@acorex/styles 21.0.3-next.35 → 21.0.3-next.36

package/components/_editor-container.css

@@ -2,14 +2,11 @@
 
 @layer base {
   .ax-editor-container {
-    @apply h-9 min-h-9 px-3 py-3 text-sm;
+    @apply rounded-default relative flex h-default min-h-default items-center justify-between overflow-hidden px-3 py-3 text-sm leading-5;
+
     .ax-content {
       @apply text-sm;
     }
-  }
-
-  .ax-editor-container {
-    @apply rounded-default relative flex h-9 min-h-9 items-center justify-between overflow-hidden px-3 py-3 text-sm leading-5;
 
     .ax-editor-container {
       @apply p-0;
@@ -30,40 +27,65 @@
     }
 
     &.ax-state-error {
-      @apply border-danger-600! focus-within:ring-danger-600/30!;
+      @apply border-danger-600!;
+      &:focus-within {
+        @apply outline-2 outline-offset-0 outline-danger-light;
+      }
     }
 
-    &:has(.ax-general-button-control, .ax-general-button-icon) {
+    /* Keep end padding for spin/clear controls, but not when a suffix button is attached */
+    &:has(.ax-general-button-control, .ax-general-button-icon):not(:has(ax-suffix > ax-button)) {
       @apply pe-2;
     }
 
-    &:has(ax-prefix ax-button) {
-      @apply ps-0;
+    ax-suffix > ax-icon,
+    ax-prefix > ax-icon {
+      @apply text-muted;
     }
 
-    &:has(ax-suffix ax-button) {
-      @apply pe-0;
+    ax-prefix,
+    ax-suffix {
+      @apply flex items-center self-stretch gap-2;
     }
 
-    ax-prefix > ax-button {
-      @apply rounded-e-none!;
+    ax-prefix:has(> ax-button),
+    ax-suffix:has(> ax-button) {
+      @apply items-stretch;
     }
 
-    ax-suffix > ax-button {
-      @apply rounded-s-none!;
+    ax-prefix {
+      @apply pe-2;
     }
+  }
+}
 
-    ax-suffix > ax-icon,
-    ax-prefix > ax-icon {
-      @apply text-muted;
+/* Components layer so these beat button size utilities and spin-button pe-2 */
+@layer components {
+  .ax-editor-container {
+    &:has(ax-prefix > ax-button),
+    &:has(ax-suffix > ax-button) {
+      @apply py-0;
     }
 
-    ax-prefix,
-    ax-suffix {
-      @apply flex items-center gap-2;
+    &:has(ax-prefix > ax-button) {
+      @apply ps-0!;
     }
-    ax-prefix {
-      @apply pe-2;
+
+    &:has(ax-suffix > ax-button) {
+      @apply pe-0!;
+    }
+
+    ax-prefix > ax-button,
+    ax-suffix > ax-button {
+      @apply self-stretch shrink-0 rounded-none!;
+
+      > button {
+        @apply h-full min-h-0 rounded-[inherit]!;
+      }
+
+      &.ax-button-icon > button {
+        @apply aspect-square size-auto! h-full w-auto!;
+      }
     }
   }
 }

package/components/_general-button.css

@@ -7,7 +7,9 @@
     @apply disabled:cursor-not-allowed disabled:opacity-50;
     @apply text-text-default/50 hover:text-text-default/70;
     @apply hover:bg-bg-default/10;
-    @apply focus-visible:ring-primary/30 focus-visible:ring-3 focus-visible:outline-none;
+    &:focus-visible {
+      @apply ax-focus-ring;
+    }
     * {
       @apply cursor-[inherit];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "21.0.3-next.35",
+  "version": "21.0.3-next.36",
   "main": "index.css",
   "author": "Ali Safari",
   "license": "ISC",

package/themes/default.css

@@ -48,27 +48,13 @@ html.ax-dark {
   color: rgba(var(--ax-sys-color-on-darkest-surface));
 }
 
-.ax-xs {
-  --ax-sys-size: ax-xs;
-}
-.ax-sm {
-  --ax-sys-size: ax-sm;
-}
-.ax-md {
-  --ax-sys-size: ax-md;
-}
-.ax-lg {
-  --ax-sys-size: ax-lg;
-}
-.ax-xl {
-  --ax-sys-size: ax-xl;
-}
-
 :root {
   --ax-sys-theme-isDark: 0;
   --ax-sys-icon-size: 100%;
   --ax-sys-icon-weight: 400;
-  --ax-sys-size-base: 2.5rem;
+  /* Immutable md control height — size utilities derive --ax-sys-size-base from this */
+  --ax-sys-size-md: 2.5rem;
+  --ax-sys-size-base: var(--ax-sys-size-md);
   --ax-overlay-full-width: 93;
   --ax-sys-icon-width: inherit;
   --ax-sys-icon-height: inherit;
@@ -1776,6 +1762,9 @@ html.ax-dark {
   --color-text-default: rgba(var(--ax-sys-color-text-default));
   --color-border-default: rgba(var(--ax-sys-color-border-default));
   --radius-default: var(--ax-sys-border-radius);
+  --spacing-default: var(--ax-sys-size-base);
+  --height-default: var(--ax-sys-size-base);
+  --min-height-default: var(--ax-sys-size-base);
   --breakpoint-3xl: 1920px;
   --breakpoint-4xl: 2560px;
   /* Surface Surfaces */
@@ -2245,17 +2234,12 @@ html.ax-dark {
   --color-on-accent6-darkest: rgba(var(--ax-sys-color-on-accent6-darkest-surface));
   --color-border-accent6-darkest: rgba(var(--ax-sys-color-border-accent6-darkest-surface));
 
-  /* Default scale (matches ax-md) — wired to base tokens so all utilities respond to theme changes */
-  --spacing: var(--ax-sys-spacing-base);
-  --text-xs: var(--ax-sys-text-xs-base);
-  --text-sm: var(--ax-sys-text-sm-base);
-  --text-base: var(--ax-sys-body-font-size);
-  --text-lg: var(--ax-sys-text-lg-base);
-  --text-xl: var(--ax-sys-text-xl-base);
-  --leading-3: var(--ax-sys-leading-3-base);
-  --leading-4: var(--ax-sys-leading-4-base);
-  --leading-5: var(--ax-sys-leading-5-base);
-  --leading-6: var(--ax-sys-leading-6-base);
+  /*
+   * Do NOT put --spacing / --text-* / --leading-* in @theme inline.
+   * inline would bake var(--ax-sys-*-base) into utilities (e.g. p-3 → calc(var(--ax-sys-spacing-base) * 3)),
+   * so ax-sm/ax-lg overrides of --spacing would never take effect.
+   * Those tokens live on :root (and size utilities) so utilities keep referencing var(--spacing) etc.
+   */
 }
 
 @utility text-muted {
@@ -3224,6 +3208,14 @@ html.ax-dark {
   @apply cursor-text opacity-70 *:cursor-text;
 }
 
+@utility ax-focus-ring {
+  @apply outline-none shadow-[0_0_0_1px_var(--ax-comp-text,var(--color-on-primary)),0_0_0_3px_var(--ax-comp-bg-light,var(--color-primary-light))];
+}
+
+@utility ax-focus-ring-editor {
+  @apply outline-2 outline-offset-0 outline-(--ax-comp-bg-light,var(--color-primary-light));
+}
+
 @utility ax-fill {
   @apply bg-(--ax-comp-bg-lightest,var(--color-lighter)) text-(--ax-comp-text-lightest,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-lightest,var(--color-darker)) dark:text-(--ax-comp-text-lightest,var(--color-on-darker));
   &.ax-default {
@@ -3233,7 +3225,9 @@ html.ax-dark {
     @apply bg-(--ax-comp-bg-lighter,var(--color-light)) text-(--ax-comp-text-lighter,var(--color-on-light)) dark:bg-(--ax-comp-bg-lighter,var(--color-dark)) dark:text-(--ax-comp-text-lighter,var(--color-on-dark));
   }
   &.ax-editor-container {
-    @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
+    &:focus-within {
+      @apply ax-focus-ring-editor;
+    }
   }
 }
 
@@ -3257,7 +3251,7 @@ html.ax-dark {
     }
     &:focus-visible,
     &.ax-state-focus {
-      @apply ring-primary/30 ring-3;
+      @apply ax-focus-ring;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -3275,7 +3269,9 @@ html.ax-dark {
     @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
   }
   &.ax-editor-container {
-    @apply focus-within:border-primary!;
+    &:focus-within {
+      border-color: var(--ax-comp-bg, var(--color-primary)) !important;
+    }
   }
 }
 
@@ -3295,7 +3291,7 @@ html.ax-dark {
     }
     &:focus-visible,
     &.ax-state-focus {
-      @apply ring-primary/30 ring-3;
+      @apply ax-focus-ring;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -3313,7 +3309,9 @@ html.ax-dark {
     @apply bg-(--ax-comp-bg-darker,var(--color-light)) text-(--ax-comp-text-darker,var(--color-on-light)) dark:bg-(--ax-comp-bg-darker,var(--color-dark)) dark:text-(--ax-comp-text-darker,var(--color-on-dark));
   }
   &.ax-editor-container {
-    @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
+    &:focus-within {
+      @apply ax-focus-ring-editor;
+    }
   }
 }
 
@@ -3337,7 +3335,7 @@ html.ax-dark {
     }
     &:focus-visible,
     &.ax-state-focus {
-      @apply ring-primary/30 ring-3;
+      @apply ax-focus-ring;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -3361,7 +3359,9 @@ html.ax-dark {
     @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
   }
   &.ax-editor-container {
-    @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
+    &:focus-within {
+      @apply ax-focus-ring-editor;
+    }
   }
 }
 
@@ -3381,7 +3381,7 @@ html.ax-dark {
     }
     &:focus-visible,
     &.ax-state-focus {
-      @apply ring-primary/30 ring-3;
+      @apply ax-focus-ring;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -3417,7 +3417,7 @@ html.ax-dark {
     }
     &:focus-visible,
     &.ax-state-focus {
-      @apply ring-primary/30 ring-3;
+      @apply ax-focus-ring;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -3453,7 +3453,7 @@ html.ax-dark {
     }
     &:focus-visible,
     &.ax-state-focus {
-      @apply ring-primary/30 ring-3;
+      @apply ax-focus-ring;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -3484,7 +3484,7 @@ html.ax-dark {
     }
     &:focus-visible,
     &.ax-state-focus {
-      @apply ring-primary/30 ring-3;
+      @apply ax-focus-ring;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -3561,6 +3561,10 @@ html.ax-dark {
 }
 
 @utility ax-xs {
+  --ax-sys-size: ax-xs;
+  /* Control height — 1.5rem at default md of 2.5rem */
+  --ax-sys-size-base: calc(var(--ax-sys-size-md) * 0.6);
+
   /* Spacing */
   --spacing: calc(var(--ax-sys-spacing-base) * 0.5);
   --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 0.5);
@@ -3580,6 +3584,10 @@ html.ax-dark {
 }
 
 @utility ax-sm {
+  --ax-sys-size: ax-sm;
+  /* Control height — 2rem at default md of 2.5rem */
+  --ax-sys-size-base: calc(var(--ax-sys-size-md) * 0.8);
+
   /* Spacing */
   --spacing: calc(var(--ax-sys-spacing-base) * 0.75);
   --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 0.75);
@@ -3599,6 +3607,9 @@ html.ax-dark {
 }
 
 @utility ax-md {
+  --ax-sys-size: ax-md;
+  --ax-sys-size-base: var(--ax-sys-size-md);
+
   /* Tailwind Default Scale */
   --spacing: var(--ax-sys-spacing-base);
   --ax-sys-border-radius: var(--ax-sys-border-radius-base);
@@ -3618,6 +3629,10 @@ html.ax-dark {
 }
 
 @utility ax-lg {
+  --ax-sys-size: ax-lg;
+  /* Control height — 3.375rem at default md of 2.5rem */
+  --ax-sys-size-base: calc(var(--ax-sys-size-md) * 1.35);
+
   /* Spacing */
   --spacing: calc(var(--ax-sys-spacing-base) * 1.25);
   --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 1.25);
@@ -3637,6 +3652,10 @@ html.ax-dark {
 }
 
 @utility ax-xl {
+  --ax-sys-size: ax-xl;
+  /* Control height — 4rem at default md of 2.5rem */
+  --ax-sys-size-base: calc(var(--ax-sys-size-md) * 1.6);
+
   /* Spacing */
   --spacing: calc(var(--ax-sys-spacing-base) * 1.5);
   --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 1.5);