@acorex/styles 21.0.3-next.23 → 21.0.3-next.25

package/package.json

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

package/themes/default.css

@@ -74,6 +74,28 @@ html.ax-dark {
   --ax-sys-icon-height: inherit;
   --ax-sys-body-font-size: 1rem;
   --ax-sys-border-radius-base: 0.5rem;
+  --ax-sys-spacing-base: 0.25rem;
+  --ax-sys-text-xs-base: 0.75rem;
+  --ax-sys-text-sm-base: 0.875rem;
+  --ax-sys-text-lg-base: 1.125rem;
+  --ax-sys-text-xl-base: 1.25rem;
+  --ax-sys-leading-3-base: 0.75rem;
+  --ax-sys-leading-4-base: 1rem;
+  --ax-sys-leading-5-base: 1.25rem;
+  --ax-sys-leading-6-base: 1.5rem;
+
+  /* Default Tailwind scale (matches ax-md) — used when no ax-* size class is applied */
+  --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);
+
   --ax-sys-border-radius: var(--ax-sys-border-radius-base);
   --ax-sys-transition-duration: 150ms;
   --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2222,6 +2244,18 @@ html.ax-dark {
   --color-accent6-darkest: rgba(var(--ax-sys-color-accent6-darkest-surface));
   --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);
 }
 
 @utility text-muted {
@@ -3404,95 +3438,95 @@ html.ax-dark {
 
 @utility ax-xs {
   /* Spacing */
-  --spacing: 0.125rem;
+  --spacing: calc(var(--ax-sys-spacing-base) * 0.5);
   --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 0.5);
 
   /* Typography */
-  --text-xs: 0.625rem;
-  --text-sm: 0.6875rem;
-  --text-base: 0.75rem;
-  --text-lg: 0.875rem;
-  --text-xl: 1rem;
+  --text-xs: calc(var(--ax-sys-text-xs-base) * 5 / 6);
+  --text-sm: calc(var(--ax-sys-text-sm-base) * 11 / 14);
+  --text-base: calc(var(--ax-sys-body-font-size) * 0.75);
+  --text-lg: calc(var(--ax-sys-text-lg-base) * 7 / 9);
+  --text-xl: calc(var(--ax-sys-text-xl-base) * 0.8);
 
   /* Line Heights */
-  --leading-3: 0.75rem;
-  --leading-4: 0.875rem;
-  --leading-5: 1rem;
-  --leading-6: 1.25rem;
+  --leading-3: var(--ax-sys-leading-3-base);
+  --leading-4: calc(var(--ax-sys-leading-4-base) * 0.875);
+  --leading-5: calc(var(--ax-sys-leading-5-base) * 0.8);
+  --leading-6: calc(var(--ax-sys-leading-6-base) * 5 / 6);
 }
 
 @utility ax-sm {
   /* Spacing */
-  --spacing: 0.1875rem;
+  --spacing: calc(var(--ax-sys-spacing-base) * 0.75);
   --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 0.75);
 
   /* Typography */
-  --text-xs: 0.6875rem;
-  --text-sm: 0.75rem;
-  --text-base: 0.875rem;
-  --text-lg: 1rem;
-  --text-xl: 1.125rem;
+  --text-xs: calc(var(--ax-sys-text-xs-base) * 11 / 12);
+  --text-sm: calc(var(--ax-sys-text-sm-base) * 6 / 7);
+  --text-base: calc(var(--ax-sys-body-font-size) * 0.875);
+  --text-lg: calc(var(--ax-sys-text-lg-base) * 8 / 9);
+  --text-xl: calc(var(--ax-sys-text-xl-base) * 0.9);
 
   /* Line Heights */
-  --leading-3: 0.875rem;
-  --leading-4: 1rem;
-  --leading-5: 1.125rem;
-  --leading-6: 1.375rem;
+  --leading-3: calc(var(--ax-sys-leading-3-base) * 7 / 6);
+  --leading-4: var(--ax-sys-leading-4-base);
+  --leading-5: calc(var(--ax-sys-leading-5-base) * 0.9);
+  --leading-6: calc(var(--ax-sys-leading-6-base) * 11 / 12);
 }
 
 @utility ax-md {
   /* Tailwind Default Scale */
-  --spacing: 0.25rem;
+  --spacing: var(--ax-sys-spacing-base);
   --ax-sys-border-radius: var(--ax-sys-border-radius-base);
 
   /* Typography */
-  --text-xs: 0.75rem;
-  --text-sm: 0.875rem;
-  --text-base: 1rem;
-  --text-lg: 1.125rem;
-  --text-xl: 1.25rem;
+  --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);
 
   /* Line Heights */
-  --leading-3: 0.75rem;
-  --leading-4: 1rem;
-  --leading-5: 1.25rem;
-  --leading-6: 1.5rem;
+  --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);
 }
 
 @utility ax-lg {
   /* Spacing */
-  --spacing: 0.3125rem;
+  --spacing: calc(var(--ax-sys-spacing-base) * 1.25);
   --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 1.25);
 
   /* Typography */
-  --text-xs: 0.8125rem;
-  --text-sm: 0.9375rem;
-  --text-base: 1.0625rem;
-  --text-lg: 1.25rem;
-  --text-xl: 1.375rem;
+  --text-xs: calc(var(--ax-sys-text-xs-base) * 13 / 12);
+  --text-sm: calc(var(--ax-sys-text-sm-base) * 15 / 14);
+  --text-base: calc(var(--ax-sys-body-font-size) * 17 / 16);
+  --text-lg: calc(var(--ax-sys-text-lg-base) * 10 / 9);
+  --text-xl: calc(var(--ax-sys-text-xl-base) * 1.1);
 
   /* Line Heights */
-  --leading-3: 1rem;
-  --leading-4: 1.125rem;
-  --leading-5: 1.375rem;
-  --leading-6: 1.625rem;
+  --leading-3: calc(var(--ax-sys-leading-3-base) * 4 / 3);
+  --leading-4: calc(var(--ax-sys-leading-4-base) * 1.125);
+  --leading-5: calc(var(--ax-sys-leading-5-base) * 1.1);
+  --leading-6: calc(var(--ax-sys-leading-6-base) * 13 / 12);
 }
 
 @utility ax-xl {
   /* Spacing */
-  --spacing: 0.375rem;
+  --spacing: calc(var(--ax-sys-spacing-base) * 1.5);
   --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 1.5);
 
   /* Typography */
-  --text-xs: 0.875rem;
-  --text-sm: 1rem;
-  --text-base: 1.125rem;
-  --text-lg: 1.375rem;
-  --text-xl: 1.5rem;
+  --text-xs: calc(var(--ax-sys-text-xs-base) * 7 / 6);
+  --text-sm: calc(var(--ax-sys-text-sm-base) * 8 / 7);
+  --text-base: calc(var(--ax-sys-body-font-size) * 1.125);
+  --text-lg: calc(var(--ax-sys-text-lg-base) * 11 / 9);
+  --text-xl: calc(var(--ax-sys-text-xl-base) * 1.2);
 
   /* Line Heights */
-  --leading-3: 1.125rem;
-  --leading-4: 1.25rem;
-  --leading-5: 1.5rem;
-  --leading-6: 1.75rem;
+  --leading-3: calc(var(--ax-sys-leading-3-base) * 1.5);
+  --leading-4: calc(var(--ax-sys-leading-4-base) * 1.25);
+  --leading-5: calc(var(--ax-sys-leading-5-base) * 1.2);
+  --leading-6: calc(var(--ax-sys-leading-6-base) * 7 / 6);
 }