@acorex/styles 21.0.3-next.3 → 21.0.3-next.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/components/_action-item.css +6 -3
  2. package/components/_editor-container.css +23 -2
  3. package/package.json +1 -1
  4. package/themes/default.css +264 -97
package/components/_action-item.css CHANGED
@@ -27,7 +27,10 @@
27
27
  font-weight: bolder;
28
28
  text-transform: uppercase;
29
29
  padding-block: var(--ax-comp-action-item-padding-block, 0.25rem);
30
- padding-inline: var(--ax-comp-action-item-padding-inline, calc(var(--ax-comp-action-item-padding-inline, 0.875rem) / 3 * 2));
30
+ padding-inline: var(
31
+ --ax-comp-action-item-padding-inline,
32
+ calc(var(--ax-comp-action-item-padding-inline, 0.875rem) / 3 * 2)
33
+ );
31
34
  }
32
35
  ax-divider {
33
36
  display: block;
@@ -60,10 +63,10 @@
60
63
  & > div {
61
64
  display: flex;
62
65
  align-items: center;
63
- justify-content: center;
66
+ justify-content: start;
64
67
  &.ax-action-item-prefix,
65
68
  &.ax-action-item-suffix {
66
- gap: 0.5rem;
69
+ gap: 1rem;
67
70
  }
68
71
  }
69
72
  ax-prefix {
package/components/_editor-container.css CHANGED
@@ -23,7 +23,7 @@
23
23
  .ax-editor {
24
24
  font-size: inherit;
25
25
 
26
- @apply w-full flex-1 py-2 outline-0 outline-transparent placeholder:opacity-50;
26
+ @apply w-full flex-1 py-2 outline-0 outline-transparent;
27
27
  }
28
28
  .ax-placeholder {
29
29
  @apply opacity-50;
@@ -34,7 +34,28 @@
34
34
  }
35
35
 
36
36
  &:has(.ax-general-button-control, .ax-general-button-icon) {
37
- @apply pe-1;
37
+ @apply pe-2;
38
+ }
39
+
40
+ &:has(ax-prefix ax-button) {
41
+ @apply ps-0;
42
+ }
43
+
44
+ &:has(ax-suffix ax-button) {
45
+ @apply pe-0;
46
+ }
47
+
48
+ ax-prefix > ax-button {
49
+ @apply rounded-e-none!;
50
+ }
51
+
52
+ ax-suffix > ax-button {
53
+ @apply rounded-s-none!;
54
+ }
55
+
56
+ ax-suffix > ax-icon,
57
+ ax-prefix > ax-icon {
58
+ @apply text-muted;
38
59
  }
39
60
 
40
61
  ax-prefix,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "21.0.3-next.3",
3
+ "version": "21.0.3-next.30",
4
4
  "main": "index.css",
5
5
  "author": "Ali Safari",
6
6
  "license": "ISC",
package/themes/default.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @import 'tailwindcss';
2
2
  @import 'tw-animate';
3
3
 
4
- @custom-variant dark (&:where(.ax-dark, .ax-dark *));
4
+ @custom-variant dark (&:where(.ax-dark, .ax-dark *):not(:where(.ax-light, .ax-light *)));
5
5
 
6
6
  @custom-variant hover (&:hover);
7
7
 
@@ -73,7 +73,30 @@ html.ax-dark {
73
73
  --ax-sys-icon-width: inherit;
74
74
  --ax-sys-icon-height: inherit;
75
75
  --ax-sys-body-font-size: 1rem;
76
- --ax-sys-border-radius: 0.5rem;
76
+ --ax-sys-border-radius-base: 0.5rem;
77
+ --ax-sys-spacing-base: 0.25rem;
78
+ --ax-sys-text-xs-base: 0.75rem;
79
+ --ax-sys-text-sm-base: 0.875rem;
80
+ --ax-sys-text-lg-base: 1.125rem;
81
+ --ax-sys-text-xl-base: 1.25rem;
82
+ --ax-sys-leading-3-base: 0.75rem;
83
+ --ax-sys-leading-4-base: 1rem;
84
+ --ax-sys-leading-5-base: 1.25rem;
85
+ --ax-sys-leading-6-base: 1.5rem;
86
+
87
+ /* Default Tailwind scale (matches ax-md) — used when no ax-* size class is applied */
88
+ --spacing: var(--ax-sys-spacing-base);
89
+ --text-xs: var(--ax-sys-text-xs-base);
90
+ --text-sm: var(--ax-sys-text-sm-base);
91
+ --text-base: var(--ax-sys-body-font-size);
92
+ --text-lg: var(--ax-sys-text-lg-base);
93
+ --text-xl: var(--ax-sys-text-xl-base);
94
+ --leading-3: var(--ax-sys-leading-3-base);
95
+ --leading-4: var(--ax-sys-leading-4-base);
96
+ --leading-5: var(--ax-sys-leading-5-base);
97
+ --leading-6: var(--ax-sys-leading-6-base);
98
+
99
+ --ax-sys-border-radius: var(--ax-sys-border-radius-base);
77
100
  --ax-sys-transition-duration: 150ms;
78
101
  --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
79
102
 
@@ -607,7 +630,6 @@ html.ax-dark {
607
630
  --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);
608
631
  }
609
632
 
610
- :root.ax-dark,
611
633
  .ax-dark {
612
634
  --ax-sys-theme-isDark: 1;
613
635
  --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-darker-surface));
@@ -1138,13 +1160,161 @@ html.ax-dark {
1138
1160
  --ax-sys-color-border-default: var(--ax-sys-color-border-darkest-surface);
1139
1161
  }
1140
1162
 
1141
- @theme inline {
1163
+ /*
1164
+ * Re-declare light theme primitives and Tailwind color aliases for the `.ax-light` subtree.
1165
+ * Mirrors the `.ax-dark` override pattern so localized light zones work inside a dark page.
1166
+ */
1167
+ .ax-dark .ax-light {
1168
+ --ax-sys-theme-isDark: 0;
1169
+ --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-light-surface));
1170
+ --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-darkest-surface));
1171
+
1172
+ --ax-sys-color-lightest-surface: 255, 255, 255;
1173
+ --ax-sys-color-on-lightest-surface: 10, 10, 10;
1174
+ --ax-sys-color-border-lightest-surface: 233, 233, 233;
1175
+ --ax-sys-color-lighter-surface: 250, 250, 250;
1176
+ --ax-sys-color-on-lighter-surface: 10, 10, 10;
1177
+ --ax-sys-color-border-lighter-surface: 228, 228, 228;
1178
+ --ax-sys-color-light-surface: 245, 245, 245;
1179
+ --ax-sys-color-on-light-surface: 10, 10, 10;
1180
+ --ax-sys-color-border-light-surface: 223, 223, 223;
1181
+ --ax-sys-color-surface: 240, 240, 241;
1182
+ --ax-sys-color-on-surface: 10, 10, 10;
1183
+ --ax-sys-color-border-surface: 218, 218, 218;
1184
+ --ax-sys-color-dark-surface: 235, 235, 236;
1185
+ --ax-sys-color-on-dark-surface: 10, 10, 10;
1186
+ --ax-sys-color-border-dark-surface: 213, 213, 213;
1187
+ --ax-sys-color-darker-surface: 230, 230, 231;
1188
+ --ax-sys-color-on-darker-surface: 10, 10, 10;
1189
+ --ax-sys-color-border-darker-surface: 208, 208, 208;
1190
+ --ax-sys-color-darkest-surface: 224, 224, 225;
1191
+ --ax-sys-color-on-darkest-surface: 10, 10, 10;
1192
+ --ax-sys-color-border-darkest-surface: 202, 202, 202;
1193
+
1194
+ --ax-sys-color-primary-50: 231, 246, 255;
1195
+ --ax-sys-color-primary-100: 211, 234, 255;
1196
+ --ax-sys-color-primary-200: 183, 217, 255;
1197
+ --ax-sys-color-primary-300: 138, 189, 255;
1198
+ --ax-sys-color-primary-400: 77, 151, 255;
1199
+ --ax-sys-color-primary-500: 43, 127, 255;
1200
+ --ax-sys-color-primary-600: 20, 108, 235;
1201
+ --ax-sys-color-primary-700: 0, 86, 210;
1202
+ --ax-sys-color-primary-800: 12, 70, 182;
1203
+ --ax-sys-color-primary-900: 29, 64, 142;
1204
+ --ax-sys-color-primary-950: 14, 34, 84;
1205
+
1206
+ --ax-sys-color-primary-lightest-surface: 211, 234, 255;
1207
+ --ax-sys-color-on-primary-lightest-surface: 29, 48, 64;
1208
+ --ax-sys-color-border-primary-lightest-surface: 175, 217, 255;
1209
+ --ax-sys-color-primary-lighter-surface: 183, 217, 255;
1210
+ --ax-sys-color-on-primary-lighter-surface: 18, 47, 77;
1211
+ --ax-sys-color-border-primary-lighter-surface: 147, 198, 255;
1212
+ --ax-sys-color-primary-light-surface: 138, 189, 255;
1213
+ --ax-sys-color-on-primary-light-surface: 0, 44, 98;
1214
+ --ax-sys-color-border-primary-light-surface: 102, 169, 255;
1215
+ --ax-sys-color-primary-surface: 43, 127, 255;
1216
+ --ax-sys-color-on-primary-surface: 244, 254, 255;
1217
+ --ax-sys-color-border-primary-surface: 7, 105, 255;
1218
+ --ax-sys-color-primary-dark-surface: 20, 108, 235;
1219
+ --ax-sys-color-on-primary-dark-surface: 244, 254, 255;
1220
+ --ax-sys-color-border-primary-dark-surface: 17, 93, 202;
1221
+ --ax-sys-color-primary-darker-surface: 0, 86, 210;
1222
+ --ax-sys-color-on-primary-darker-surface: 245, 254, 255;
1223
+ --ax-sys-color-border-primary-darker-surface: 0, 71, 174;
1224
+ --ax-sys-color-primary-darkest-surface: 12, 70, 182;
1225
+ --ax-sys-color-on-primary-darkest-surface: 245, 254, 255;
1226
+ --ax-sys-color-border-primary-darkest-surface: 10, 57, 149;
1227
+
1228
+ --ax-sys-color-bg-default: var(--ax-sys-color-lightest-surface);
1229
+ --ax-sys-color-text-default: var(--ax-sys-color-on-lightest-surface);
1230
+ --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);
1231
+
1142
1232
  --color-bg-default: rgba(var(--ax-sys-color-bg-default));
1143
1233
  --color-text-default: rgba(var(--ax-sys-color-text-default));
1144
1234
  --color-border-default: rgba(var(--ax-sys-color-border-default));
1145
- --radius-default: var(--ax-sys-border-radius);
1146
- --breakpoint-3xl: 1920px;
1147
- --breakpoint-4xl: 2560px;
1235
+
1236
+ --color-lightest: rgba(var(--ax-sys-color-lightest-surface));
1237
+ --color-on-lightest: rgba(var(--ax-sys-color-on-lightest-surface));
1238
+ --color-border-lightest: rgba(var(--ax-sys-color-border-lightest-surface));
1239
+ --color-lighter: rgba(var(--ax-sys-color-lighter-surface));
1240
+ --color-on-lighter: rgba(var(--ax-sys-color-on-lighter-surface));
1241
+ --color-border-lighter: rgba(var(--ax-sys-color-border-lighter-surface));
1242
+ --color-light: rgba(var(--ax-sys-color-light-surface));
1243
+ --color-on-light: rgba(var(--ax-sys-color-on-light-surface));
1244
+ --color-border-light: rgba(var(--ax-sys-color-border-light-surface));
1245
+ --color-surface: rgba(var(--ax-sys-color-surface));
1246
+ --color-on-surface: rgba(var(--ax-sys-color-on-surface));
1247
+ --color-border-surface: rgba(var(--ax-sys-color-border-surface));
1248
+ --color-dark: rgba(var(--ax-sys-color-dark-surface));
1249
+ --color-on-dark: rgba(var(--ax-sys-color-on-dark-surface));
1250
+ --color-border-dark: rgba(var(--ax-sys-color-border-dark-surface));
1251
+ --color-darker: rgba(var(--ax-sys-color-darker-surface));
1252
+ --color-on-darker: rgba(var(--ax-sys-color-on-darker-surface));
1253
+ --color-border-darker: rgba(var(--ax-sys-color-border-darker-surface));
1254
+ --color-darkest: rgba(var(--ax-sys-color-darkest-surface));
1255
+ --color-on-darkest: rgba(var(--ax-sys-color-on-darkest-surface));
1256
+ --color-border-darkest: rgba(var(--ax-sys-color-border-darkest-surface));
1257
+
1258
+ --color-primary: rgba(var(--ax-sys-color-primary-surface));
1259
+ --color-primary-50: rgba(var(--ax-sys-color-primary-50));
1260
+ --color-primary-100: rgba(var(--ax-sys-color-primary-100));
1261
+ --color-primary-200: rgba(var(--ax-sys-color-primary-200));
1262
+ --color-primary-300: rgba(var(--ax-sys-color-primary-300));
1263
+ --color-primary-400: rgba(var(--ax-sys-color-primary-400));
1264
+ --color-primary-500: rgba(var(--ax-sys-color-primary-500));
1265
+ --color-primary-600: rgba(var(--ax-sys-color-primary-600));
1266
+ --color-primary-700: rgba(var(--ax-sys-color-primary-700));
1267
+ --color-primary-800: rgba(var(--ax-sys-color-primary-800));
1268
+ --color-primary-900: rgba(var(--ax-sys-color-primary-900));
1269
+ --color-primary-950: rgba(var(--ax-sys-color-primary-950));
1270
+ --color-primary-lightest: rgba(var(--ax-sys-color-primary-lightest-surface));
1271
+ --color-on-primary-lightest: rgba(var(--ax-sys-color-on-primary-lightest-surface));
1272
+ --color-border-primary-lightest: rgba(var(--ax-sys-color-border-primary-lightest-surface));
1273
+ --color-primary-lighter: rgba(var(--ax-sys-color-primary-lighter-surface));
1274
+ --color-on-primary-lighter: rgba(var(--ax-sys-color-on-primary-lighter-surface));
1275
+ --color-border-primary-lighter: rgba(var(--ax-sys-color-border-primary-lighter-surface));
1276
+ --color-primary-light: rgba(var(--ax-sys-color-primary-light-surface));
1277
+ --color-on-primary-light: rgba(var(--ax-sys-color-on-primary-light-surface));
1278
+ --color-border-primary-light: rgba(var(--ax-sys-color-border-primary-light-surface));
1279
+ --color-on-primary: rgba(var(--ax-sys-color-on-primary-surface));
1280
+ --color-border-primary: rgba(var(--ax-sys-color-border-primary-surface));
1281
+ --color-primary-dark: rgba(var(--ax-sys-color-primary-dark-surface));
1282
+ --color-on-primary-dark: rgba(var(--ax-sys-color-on-primary-dark-surface));
1283
+ --color-border-primary-dark: rgba(var(--ax-sys-color-border-primary-dark-surface));
1284
+ --color-primary-darker: rgba(var(--ax-sys-color-primary-darker-surface));
1285
+ --color-on-primary-darker: rgba(var(--ax-sys-color-on-primary-darker-surface));
1286
+ --color-border-primary-darker: rgba(var(--ax-sys-color-border-primary-darker-surface));
1287
+ --color-primary-darkest: rgba(var(--ax-sys-color-primary-darkest-surface));
1288
+ --color-on-primary-darkest: rgba(var(--ax-sys-color-on-primary-darkest-surface));
1289
+ --color-border-primary-darkest: rgba(var(--ax-sys-color-border-primary-darkest-surface));
1290
+ }
1291
+
1292
+ /*
1293
+ * Re-declare every Tailwind theme color alias for the `.ax-dark` subtree.
1294
+ *
1295
+ * Why this exists:
1296
+ * `@theme { --color-lightest: rgba(var(--ax-sys-color-lightest-surface)); ... }`
1297
+ * is emitted by Tailwind only on `:root`. Per the CSS spec, the inner
1298
+ * `var(--ax-sys-color-*)` references are substituted at computed-value time
1299
+ * on the declaring element (`:root`), so the resolved alias values are baked
1300
+ * to the LIGHT primitives and inherited downward unchanged.
1301
+ *
1302
+ * Result: a sub-tree `.ax-dark` flips the `--ax-sys-color-*` primitives but
1303
+ * the `--color-*` aliases (consumed by Tailwind utilities like `bg-lightest`,
1304
+ * `text-on-surface`, `border-default`) stay light, and a localized dark zone
1305
+ * inside an otherwise light page does not actually go dark.
1306
+ *
1307
+ * This block re-declares the aliases on `.ax-dark` so they are recomputed
1308
+ * against the dark primitives wherever `.ax-dark` appears in the DOM.
1309
+ * Pure static aliases (`--radius-default`, `--breakpoint-*`) are intentionally
1310
+ * omitted because they do not depend on `--ax-sys-color-*`.
1311
+ */
1312
+ .ax-dark {
1313
+ --ax-sys-theme-isDark: 1;
1314
+ --color-bg-default: rgba(var(--ax-sys-color-bg-default));
1315
+ --color-text-default: rgba(var(--ax-sys-color-text-default));
1316
+ --color-border-default: rgba(var(--ax-sys-color-border-default));
1317
+
1148
1318
  /* Surface Surfaces */
1149
1319
  --color-surface: rgba(var(--ax-sys-color-surface));
1150
1320
  --color-surface-50: rgba(var(--ax-sys-color-surface-50));
@@ -1168,7 +1338,6 @@ html.ax-dark {
1168
1338
  --color-light: rgba(var(--ax-sys-color-light-surface));
1169
1339
  --color-on-light: rgba(var(--ax-sys-color-on-light-surface));
1170
1340
  --color-border-light: rgba(var(--ax-sys-color-border-light-surface));
1171
- --color-surface: rgba(var(--ax-sys-color-surface));
1172
1341
  --color-on-surface: rgba(var(--ax-sys-color-on-surface));
1173
1342
  --color-border-surface: rgba(var(--ax-sys-color-border-surface));
1174
1343
  --color-dark: rgba(var(--ax-sys-color-dark-surface));
@@ -1180,6 +1349,7 @@ html.ax-dark {
1180
1349
  --color-darkest: rgba(var(--ax-sys-color-darkest-surface));
1181
1350
  --color-on-darkest: rgba(var(--ax-sys-color-on-darkest-surface));
1182
1351
  --color-border-darkest: rgba(var(--ax-sys-color-border-darkest-surface));
1352
+
1183
1353
  /* Primary Surfaces */
1184
1354
  --color-primary: rgba(var(--ax-sys-color-primary-surface));
1185
1355
  --color-primary-50: rgba(var(--ax-sys-color-primary-50));
@@ -1203,7 +1373,6 @@ html.ax-dark {
1203
1373
  --color-primary-light: rgba(var(--ax-sys-color-primary-light-surface));
1204
1374
  --color-on-primary-light: rgba(var(--ax-sys-color-on-primary-light-surface));
1205
1375
  --color-border-primary-light: rgba(var(--ax-sys-color-border-primary-light-surface));
1206
- --color-primary: rgba(var(--ax-sys-color-primary-surface));
1207
1376
  --color-on-primary: rgba(var(--ax-sys-color-on-primary-surface));
1208
1377
  --color-border-primary: rgba(var(--ax-sys-color-border-primary-surface));
1209
1378
  --color-primary-dark: rgba(var(--ax-sys-color-primary-dark-surface));
@@ -1239,7 +1408,6 @@ html.ax-dark {
1239
1408
  --color-secondary-light: rgba(var(--ax-sys-color-secondary-light-surface));
1240
1409
  --color-on-secondary-light: rgba(var(--ax-sys-color-on-secondary-light-surface));
1241
1410
  --color-border-secondary-light: rgba(var(--ax-sys-color-border-secondary-light-surface));
1242
- --color-secondary: rgba(var(--ax-sys-color-secondary-surface));
1243
1411
  --color-on-secondary: rgba(var(--ax-sys-color-on-secondary-surface));
1244
1412
  --color-border-secondary: rgba(var(--ax-sys-color-border-secondary-surface));
1245
1413
  --color-secondary-dark: rgba(var(--ax-sys-color-secondary-dark-surface));
@@ -1275,7 +1443,6 @@ html.ax-dark {
1275
1443
  --color-success-light: rgba(var(--ax-sys-color-success-light-surface));
1276
1444
  --color-on-success-light: rgba(var(--ax-sys-color-on-success-light-surface));
1277
1445
  --color-border-success-light: rgba(var(--ax-sys-color-border-success-light-surface));
1278
- --color-success: rgba(var(--ax-sys-color-success-surface));
1279
1446
  --color-on-success: rgba(var(--ax-sys-color-on-success-surface));
1280
1447
  --color-border-success: rgba(var(--ax-sys-color-border-success-surface));
1281
1448
  --color-success-dark: rgba(var(--ax-sys-color-success-dark-surface));
@@ -1311,7 +1478,6 @@ html.ax-dark {
1311
1478
  --color-warning-light: rgba(var(--ax-sys-color-warning-light-surface));
1312
1479
  --color-on-warning-light: rgba(var(--ax-sys-color-on-warning-light-surface));
1313
1480
  --color-border-warning-light: rgba(var(--ax-sys-color-border-warning-light-surface));
1314
- --color-warning: rgba(var(--ax-sys-color-warning-surface));
1315
1481
  --color-on-warning: rgba(var(--ax-sys-color-on-warning-surface));
1316
1482
  --color-border-warning: rgba(var(--ax-sys-color-border-warning-surface));
1317
1483
  --color-warning-dark: rgba(var(--ax-sys-color-warning-dark-surface));
@@ -1347,7 +1513,6 @@ html.ax-dark {
1347
1513
  --color-danger-light: rgba(var(--ax-sys-color-danger-light-surface));
1348
1514
  --color-on-danger-light: rgba(var(--ax-sys-color-on-danger-light-surface));
1349
1515
  --color-border-danger-light: rgba(var(--ax-sys-color-border-danger-light-surface));
1350
- --color-danger: rgba(var(--ax-sys-color-danger-surface));
1351
1516
  --color-on-danger: rgba(var(--ax-sys-color-on-danger-surface));
1352
1517
  --color-border-danger: rgba(var(--ax-sys-color-border-danger-surface));
1353
1518
  --color-danger-dark: rgba(var(--ax-sys-color-danger-dark-surface));
@@ -1383,7 +1548,6 @@ html.ax-dark {
1383
1548
  --color-accent-light: rgba(var(--ax-sys-color-accent-light-surface));
1384
1549
  --color-on-accent-light: rgba(var(--ax-sys-color-on-accent-light-surface));
1385
1550
  --color-border-accent-light: rgba(var(--ax-sys-color-border-accent-light-surface));
1386
- --color-accent: rgba(var(--ax-sys-color-accent-surface));
1387
1551
  --color-on-accent: rgba(var(--ax-sys-color-on-accent-surface));
1388
1552
  --color-border-accent: rgba(var(--ax-sys-color-border-accent-surface));
1389
1553
  --color-accent-dark: rgba(var(--ax-sys-color-accent-dark-surface));
@@ -1419,7 +1583,6 @@ html.ax-dark {
1419
1583
  --color-accent1-light: rgba(var(--ax-sys-color-accent1-light-surface));
1420
1584
  --color-on-accent1-light: rgba(var(--ax-sys-color-on-accent1-light-surface));
1421
1585
  --color-border-accent1-light: rgba(var(--ax-sys-color-border-accent1-light-surface));
1422
- --color-accent1: rgba(var(--ax-sys-color-accent1-surface));
1423
1586
  --color-on-accent1: rgba(var(--ax-sys-color-on-accent1-surface));
1424
1587
  --color-border-accent1: rgba(var(--ax-sys-color-border-accent1-surface));
1425
1588
  --color-accent1-dark: rgba(var(--ax-sys-color-accent1-dark-surface));
@@ -1455,7 +1618,6 @@ html.ax-dark {
1455
1618
  --color-accent2-light: rgba(var(--ax-sys-color-accent2-light-surface));
1456
1619
  --color-on-accent2-light: rgba(var(--ax-sys-color-on-accent2-light-surface));
1457
1620
  --color-border-accent2-light: rgba(var(--ax-sys-color-border-accent2-light-surface));
1458
- --color-accent2: rgba(var(--ax-sys-color-accent2-surface));
1459
1621
  --color-on-accent2: rgba(var(--ax-sys-color-on-accent2-surface));
1460
1622
  --color-border-accent2: rgba(var(--ax-sys-color-border-accent2-surface));
1461
1623
  --color-accent2-dark: rgba(var(--ax-sys-color-accent2-dark-surface));
@@ -1491,7 +1653,6 @@ html.ax-dark {
1491
1653
  --color-accent3-light: rgba(var(--ax-sys-color-accent3-light-surface));
1492
1654
  --color-on-accent3-light: rgba(var(--ax-sys-color-on-accent3-light-surface));
1493
1655
  --color-border-accent3-light: rgba(var(--ax-sys-color-border-accent3-light-surface));
1494
- --color-accent3: rgba(var(--ax-sys-color-accent3-surface));
1495
1656
  --color-on-accent3: rgba(var(--ax-sys-color-on-accent3-surface));
1496
1657
  --color-border-accent3: rgba(var(--ax-sys-color-border-accent3-surface));
1497
1658
  --color-accent3-dark: rgba(var(--ax-sys-color-accent3-dark-surface));
@@ -1527,7 +1688,6 @@ html.ax-dark {
1527
1688
  --color-accent4-light: rgba(var(--ax-sys-color-accent4-light-surface));
1528
1689
  --color-on-accent4-light: rgba(var(--ax-sys-color-on-accent4-light-surface));
1529
1690
  --color-border-accent4-light: rgba(var(--ax-sys-color-border-accent4-light-surface));
1530
- --color-accent4: rgba(var(--ax-sys-color-accent4-surface));
1531
1691
  --color-on-accent4: rgba(var(--ax-sys-color-on-accent4-surface));
1532
1692
  --color-border-accent4: rgba(var(--ax-sys-color-border-accent4-surface));
1533
1693
  --color-accent4-dark: rgba(var(--ax-sys-color-accent4-dark-surface));
@@ -1563,7 +1723,6 @@ html.ax-dark {
1563
1723
  --color-accent5-light: rgba(var(--ax-sys-color-accent5-light-surface));
1564
1724
  --color-on-accent5-light: rgba(var(--ax-sys-color-on-accent5-light-surface));
1565
1725
  --color-border-accent5-light: rgba(var(--ax-sys-color-border-accent5-light-surface));
1566
- --color-accent5: rgba(var(--ax-sys-color-accent5-surface));
1567
1726
  --color-on-accent5: rgba(var(--ax-sys-color-on-accent5-surface));
1568
1727
  --color-border-accent5: rgba(var(--ax-sys-color-border-accent5-surface));
1569
1728
  --color-accent5-dark: rgba(var(--ax-sys-color-accent5-dark-surface));
@@ -1599,7 +1758,6 @@ html.ax-dark {
1599
1758
  --color-accent6-light: rgba(var(--ax-sys-color-accent6-light-surface));
1600
1759
  --color-on-accent6-light: rgba(var(--ax-sys-color-on-accent6-light-surface));
1601
1760
  --color-border-accent6-light: rgba(var(--ax-sys-color-border-accent6-light-surface));
1602
- --color-accent6: rgba(var(--ax-sys-color-accent6-surface));
1603
1761
  --color-on-accent6: rgba(var(--ax-sys-color-on-accent6-surface));
1604
1762
  --color-border-accent6: rgba(var(--ax-sys-color-border-accent6-surface));
1605
1763
  --color-accent6-dark: rgba(var(--ax-sys-color-accent6-dark-surface));
@@ -1613,33 +1771,13 @@ html.ax-dark {
1613
1771
  --color-border-accent6-darkest: rgba(var(--ax-sys-color-border-accent6-darkest-surface));
1614
1772
  }
1615
1773
 
1616
- /*
1617
- * Re-declare every Tailwind theme color alias for the `.ax-dark` subtree.
1618
- *
1619
- * Why this exists:
1620
- * `@theme { --color-lightest: rgba(var(--ax-sys-color-lightest-surface)); ... }`
1621
- * is emitted by Tailwind only on `:root`. Per the CSS spec, the inner
1622
- * `var(--ax-sys-color-*)` references are substituted at computed-value time
1623
- * on the declaring element (`:root`), so the resolved alias values are baked
1624
- * to the LIGHT primitives and inherited downward unchanged.
1625
- *
1626
- * Result: a sub-tree `.ax-dark` flips the `--ax-sys-color-*` primitives but
1627
- * the `--color-*` aliases (consumed by Tailwind utilities like `bg-lightest`,
1628
- * `text-on-surface`, `border-default`) stay light, and a localized dark zone
1629
- * inside an otherwise light page does not actually go dark.
1630
- *
1631
- * This block re-declares the aliases on `.ax-dark` so they are recomputed
1632
- * against the dark primitives wherever `.ax-dark` appears in the DOM.
1633
- * Pure static aliases (`--radius-default`, `--breakpoint-*`) are intentionally
1634
- * omitted because they do not depend on `--ax-sys-color-*`.
1635
- */
1636
- :root.ax-dark,
1637
- .ax-dark {
1638
- --ax-sys-theme-isDark: 1;
1774
+ @theme inline {
1639
1775
  --color-bg-default: rgba(var(--ax-sys-color-bg-default));
1640
1776
  --color-text-default: rgba(var(--ax-sys-color-text-default));
1641
1777
  --color-border-default: rgba(var(--ax-sys-color-border-default));
1642
-
1778
+ --radius-default: var(--ax-sys-border-radius);
1779
+ --breakpoint-3xl: 1920px;
1780
+ --breakpoint-4xl: 2560px;
1643
1781
  /* Surface Surfaces */
1644
1782
  --color-surface: rgba(var(--ax-sys-color-surface));
1645
1783
  --color-surface-50: rgba(var(--ax-sys-color-surface-50));
@@ -1663,6 +1801,7 @@ html.ax-dark {
1663
1801
  --color-light: rgba(var(--ax-sys-color-light-surface));
1664
1802
  --color-on-light: rgba(var(--ax-sys-color-on-light-surface));
1665
1803
  --color-border-light: rgba(var(--ax-sys-color-border-light-surface));
1804
+ --color-surface: rgba(var(--ax-sys-color-surface));
1666
1805
  --color-on-surface: rgba(var(--ax-sys-color-on-surface));
1667
1806
  --color-border-surface: rgba(var(--ax-sys-color-border-surface));
1668
1807
  --color-dark: rgba(var(--ax-sys-color-dark-surface));
@@ -1674,7 +1813,6 @@ html.ax-dark {
1674
1813
  --color-darkest: rgba(var(--ax-sys-color-darkest-surface));
1675
1814
  --color-on-darkest: rgba(var(--ax-sys-color-on-darkest-surface));
1676
1815
  --color-border-darkest: rgba(var(--ax-sys-color-border-darkest-surface));
1677
-
1678
1816
  /* Primary Surfaces */
1679
1817
  --color-primary: rgba(var(--ax-sys-color-primary-surface));
1680
1818
  --color-primary-50: rgba(var(--ax-sys-color-primary-50));
@@ -1698,6 +1836,7 @@ html.ax-dark {
1698
1836
  --color-primary-light: rgba(var(--ax-sys-color-primary-light-surface));
1699
1837
  --color-on-primary-light: rgba(var(--ax-sys-color-on-primary-light-surface));
1700
1838
  --color-border-primary-light: rgba(var(--ax-sys-color-border-primary-light-surface));
1839
+ --color-primary: rgba(var(--ax-sys-color-primary-surface));
1701
1840
  --color-on-primary: rgba(var(--ax-sys-color-on-primary-surface));
1702
1841
  --color-border-primary: rgba(var(--ax-sys-color-border-primary-surface));
1703
1842
  --color-primary-dark: rgba(var(--ax-sys-color-primary-dark-surface));
@@ -1733,6 +1872,7 @@ html.ax-dark {
1733
1872
  --color-secondary-light: rgba(var(--ax-sys-color-secondary-light-surface));
1734
1873
  --color-on-secondary-light: rgba(var(--ax-sys-color-on-secondary-light-surface));
1735
1874
  --color-border-secondary-light: rgba(var(--ax-sys-color-border-secondary-light-surface));
1875
+ --color-secondary: rgba(var(--ax-sys-color-secondary-surface));
1736
1876
  --color-on-secondary: rgba(var(--ax-sys-color-on-secondary-surface));
1737
1877
  --color-border-secondary: rgba(var(--ax-sys-color-border-secondary-surface));
1738
1878
  --color-secondary-dark: rgba(var(--ax-sys-color-secondary-dark-surface));
@@ -1768,6 +1908,7 @@ html.ax-dark {
1768
1908
  --color-success-light: rgba(var(--ax-sys-color-success-light-surface));
1769
1909
  --color-on-success-light: rgba(var(--ax-sys-color-on-success-light-surface));
1770
1910
  --color-border-success-light: rgba(var(--ax-sys-color-border-success-light-surface));
1911
+ --color-success: rgba(var(--ax-sys-color-success-surface));
1771
1912
  --color-on-success: rgba(var(--ax-sys-color-on-success-surface));
1772
1913
  --color-border-success: rgba(var(--ax-sys-color-border-success-surface));
1773
1914
  --color-success-dark: rgba(var(--ax-sys-color-success-dark-surface));
@@ -1803,6 +1944,7 @@ html.ax-dark {
1803
1944
  --color-warning-light: rgba(var(--ax-sys-color-warning-light-surface));
1804
1945
  --color-on-warning-light: rgba(var(--ax-sys-color-on-warning-light-surface));
1805
1946
  --color-border-warning-light: rgba(var(--ax-sys-color-border-warning-light-surface));
1947
+ --color-warning: rgba(var(--ax-sys-color-warning-surface));
1806
1948
  --color-on-warning: rgba(var(--ax-sys-color-on-warning-surface));
1807
1949
  --color-border-warning: rgba(var(--ax-sys-color-border-warning-surface));
1808
1950
  --color-warning-dark: rgba(var(--ax-sys-color-warning-dark-surface));
@@ -1838,6 +1980,7 @@ html.ax-dark {
1838
1980
  --color-danger-light: rgba(var(--ax-sys-color-danger-light-surface));
1839
1981
  --color-on-danger-light: rgba(var(--ax-sys-color-on-danger-light-surface));
1840
1982
  --color-border-danger-light: rgba(var(--ax-sys-color-border-danger-light-surface));
1983
+ --color-danger: rgba(var(--ax-sys-color-danger-surface));
1841
1984
  --color-on-danger: rgba(var(--ax-sys-color-on-danger-surface));
1842
1985
  --color-border-danger: rgba(var(--ax-sys-color-border-danger-surface));
1843
1986
  --color-danger-dark: rgba(var(--ax-sys-color-danger-dark-surface));
@@ -1873,6 +2016,7 @@ html.ax-dark {
1873
2016
  --color-accent-light: rgba(var(--ax-sys-color-accent-light-surface));
1874
2017
  --color-on-accent-light: rgba(var(--ax-sys-color-on-accent-light-surface));
1875
2018
  --color-border-accent-light: rgba(var(--ax-sys-color-border-accent-light-surface));
2019
+ --color-accent: rgba(var(--ax-sys-color-accent-surface));
1876
2020
  --color-on-accent: rgba(var(--ax-sys-color-on-accent-surface));
1877
2021
  --color-border-accent: rgba(var(--ax-sys-color-border-accent-surface));
1878
2022
  --color-accent-dark: rgba(var(--ax-sys-color-accent-dark-surface));
@@ -1908,6 +2052,7 @@ html.ax-dark {
1908
2052
  --color-accent1-light: rgba(var(--ax-sys-color-accent1-light-surface));
1909
2053
  --color-on-accent1-light: rgba(var(--ax-sys-color-on-accent1-light-surface));
1910
2054
  --color-border-accent1-light: rgba(var(--ax-sys-color-border-accent1-light-surface));
2055
+ --color-accent1: rgba(var(--ax-sys-color-accent1-surface));
1911
2056
  --color-on-accent1: rgba(var(--ax-sys-color-on-accent1-surface));
1912
2057
  --color-border-accent1: rgba(var(--ax-sys-color-border-accent1-surface));
1913
2058
  --color-accent1-dark: rgba(var(--ax-sys-color-accent1-dark-surface));
@@ -1943,6 +2088,7 @@ html.ax-dark {
1943
2088
  --color-accent2-light: rgba(var(--ax-sys-color-accent2-light-surface));
1944
2089
  --color-on-accent2-light: rgba(var(--ax-sys-color-on-accent2-light-surface));
1945
2090
  --color-border-accent2-light: rgba(var(--ax-sys-color-border-accent2-light-surface));
2091
+ --color-accent2: rgba(var(--ax-sys-color-accent2-surface));
1946
2092
  --color-on-accent2: rgba(var(--ax-sys-color-on-accent2-surface));
1947
2093
  --color-border-accent2: rgba(var(--ax-sys-color-border-accent2-surface));
1948
2094
  --color-accent2-dark: rgba(var(--ax-sys-color-accent2-dark-surface));
@@ -1978,6 +2124,7 @@ html.ax-dark {
1978
2124
  --color-accent3-light: rgba(var(--ax-sys-color-accent3-light-surface));
1979
2125
  --color-on-accent3-light: rgba(var(--ax-sys-color-on-accent3-light-surface));
1980
2126
  --color-border-accent3-light: rgba(var(--ax-sys-color-border-accent3-light-surface));
2127
+ --color-accent3: rgba(var(--ax-sys-color-accent3-surface));
1981
2128
  --color-on-accent3: rgba(var(--ax-sys-color-on-accent3-surface));
1982
2129
  --color-border-accent3: rgba(var(--ax-sys-color-border-accent3-surface));
1983
2130
  --color-accent3-dark: rgba(var(--ax-sys-color-accent3-dark-surface));
@@ -2013,6 +2160,7 @@ html.ax-dark {
2013
2160
  --color-accent4-light: rgba(var(--ax-sys-color-accent4-light-surface));
2014
2161
  --color-on-accent4-light: rgba(var(--ax-sys-color-on-accent4-light-surface));
2015
2162
  --color-border-accent4-light: rgba(var(--ax-sys-color-border-accent4-light-surface));
2163
+ --color-accent4: rgba(var(--ax-sys-color-accent4-surface));
2016
2164
  --color-on-accent4: rgba(var(--ax-sys-color-on-accent4-surface));
2017
2165
  --color-border-accent4: rgba(var(--ax-sys-color-border-accent4-surface));
2018
2166
  --color-accent4-dark: rgba(var(--ax-sys-color-accent4-dark-surface));
@@ -2048,6 +2196,7 @@ html.ax-dark {
2048
2196
  --color-accent5-light: rgba(var(--ax-sys-color-accent5-light-surface));
2049
2197
  --color-on-accent5-light: rgba(var(--ax-sys-color-on-accent5-light-surface));
2050
2198
  --color-border-accent5-light: rgba(var(--ax-sys-color-border-accent5-light-surface));
2199
+ --color-accent5: rgba(var(--ax-sys-color-accent5-surface));
2051
2200
  --color-on-accent5: rgba(var(--ax-sys-color-on-accent5-surface));
2052
2201
  --color-border-accent5: rgba(var(--ax-sys-color-border-accent5-surface));
2053
2202
  --color-accent5-dark: rgba(var(--ax-sys-color-accent5-dark-surface));
@@ -2083,6 +2232,7 @@ html.ax-dark {
2083
2232
  --color-accent6-light: rgba(var(--ax-sys-color-accent6-light-surface));
2084
2233
  --color-on-accent6-light: rgba(var(--ax-sys-color-on-accent6-light-surface));
2085
2234
  --color-border-accent6-light: rgba(var(--ax-sys-color-border-accent6-light-surface));
2235
+ --color-accent6: rgba(var(--ax-sys-color-accent6-surface));
2086
2236
  --color-on-accent6: rgba(var(--ax-sys-color-on-accent6-surface));
2087
2237
  --color-border-accent6: rgba(var(--ax-sys-color-border-accent6-surface));
2088
2238
  --color-accent6-dark: rgba(var(--ax-sys-color-accent6-dark-surface));
@@ -2094,6 +2244,18 @@ html.ax-dark {
2094
2244
  --color-accent6-darkest: rgba(var(--ax-sys-color-accent6-darkest-surface));
2095
2245
  --color-on-accent6-darkest: rgba(var(--ax-sys-color-on-accent6-darkest-surface));
2096
2246
  --color-border-accent6-darkest: rgba(var(--ax-sys-color-border-accent6-darkest-surface));
2247
+
2248
+ /* Default scale (matches ax-md) — wired to base tokens so all utilities respond to theme changes */
2249
+ --spacing: var(--ax-sys-spacing-base);
2250
+ --text-xs: var(--ax-sys-text-xs-base);
2251
+ --text-sm: var(--ax-sys-text-sm-base);
2252
+ --text-base: var(--ax-sys-body-font-size);
2253
+ --text-lg: var(--ax-sys-text-lg-base);
2254
+ --text-xl: var(--ax-sys-text-xl-base);
2255
+ --leading-3: var(--ax-sys-leading-3-base);
2256
+ --leading-4: var(--ax-sys-leading-4-base);
2257
+ --leading-5: var(--ax-sys-leading-5-base);
2258
+ --leading-6: var(--ax-sys-leading-6-base);
2097
2259
  }
2098
2260
 
2099
2261
  @utility text-muted {
@@ -2186,7 +2348,7 @@ html.ax-dark {
2186
2348
  border-color: var(--color-border-primary-darkest);
2187
2349
  }
2188
2350
 
2189
- @utility ax-default {
2351
+ /* @utility ax-default {
2190
2352
  --ax-comp-bg-lightest: var(--color-darkest);
2191
2353
  --ax-comp-text-lightest: var(--color-on-darkest);
2192
2354
  --ax-comp-border-lightest: var(--color-border-darkest);
@@ -2208,7 +2370,7 @@ html.ax-dark {
2208
2370
  --ax-comp-bg-darkest: var(--color-lightest);
2209
2371
  --ax-comp-text-darkest: var(--color-on-lightest);
2210
2372
  --ax-comp-border-darkest: var(--color-border-lightest);
2211
- }
2373
+ } */
2212
2374
 
2213
2375
  @utility ax-primary {
2214
2376
  --ax-comp-bg-lightest: var(--color-primary-lightest);
@@ -3276,90 +3438,95 @@ html.ax-dark {
3276
3438
 
3277
3439
  @utility ax-xs {
3278
3440
  /* Spacing */
3279
- --spacing: 0.125rem;
3441
+ --spacing: calc(var(--ax-sys-spacing-base) * 0.5);
3442
+ --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 0.5);
3280
3443
 
3281
3444
  /* Typography */
3282
- --text-xs: 0.625rem;
3283
- --text-sm: 0.6875rem;
3284
- --text-base: 0.75rem;
3285
- --text-lg: 0.875rem;
3286
- --text-xl: 1rem;
3445
+ --text-xs: calc(var(--ax-sys-text-xs-base) * 5 / 6);
3446
+ --text-sm: calc(var(--ax-sys-text-sm-base) * 11 / 14);
3447
+ --text-base: calc(var(--ax-sys-body-font-size) * 0.75);
3448
+ --text-lg: calc(var(--ax-sys-text-lg-base) * 7 / 9);
3449
+ --text-xl: calc(var(--ax-sys-text-xl-base) * 0.8);
3287
3450
 
3288
3451
  /* Line Heights */
3289
- --leading-3: 0.75rem;
3290
- --leading-4: 0.875rem;
3291
- --leading-5: 1rem;
3292
- --leading-6: 1.25rem;
3452
+ --leading-3: var(--ax-sys-leading-3-base);
3453
+ --leading-4: calc(var(--ax-sys-leading-4-base) * 0.875);
3454
+ --leading-5: calc(var(--ax-sys-leading-5-base) * 0.8);
3455
+ --leading-6: calc(var(--ax-sys-leading-6-base) * 5 / 6);
3293
3456
  }
3294
3457
 
3295
3458
  @utility ax-sm {
3296
3459
  /* Spacing */
3297
- --spacing: 0.1875rem;
3460
+ --spacing: calc(var(--ax-sys-spacing-base) * 0.75);
3461
+ --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 0.75);
3298
3462
 
3299
3463
  /* Typography */
3300
- --text-xs: 0.6875rem;
3301
- --text-sm: 0.75rem;
3302
- --text-base: 0.875rem;
3303
- --text-lg: 1rem;
3304
- --text-xl: 1.125rem;
3464
+ --text-xs: calc(var(--ax-sys-text-xs-base) * 11 / 12);
3465
+ --text-sm: calc(var(--ax-sys-text-sm-base) * 6 / 7);
3466
+ --text-base: calc(var(--ax-sys-body-font-size) * 0.875);
3467
+ --text-lg: calc(var(--ax-sys-text-lg-base) * 8 / 9);
3468
+ --text-xl: calc(var(--ax-sys-text-xl-base) * 0.9);
3305
3469
 
3306
3470
  /* Line Heights */
3307
- --leading-3: 0.875rem;
3308
- --leading-4: 1rem;
3309
- --leading-5: 1.125rem;
3310
- --leading-6: 1.375rem;
3471
+ --leading-3: calc(var(--ax-sys-leading-3-base) * 7 / 6);
3472
+ --leading-4: var(--ax-sys-leading-4-base);
3473
+ --leading-5: calc(var(--ax-sys-leading-5-base) * 0.9);
3474
+ --leading-6: calc(var(--ax-sys-leading-6-base) * 11 / 12);
3311
3475
  }
3312
3476
 
3313
3477
  @utility ax-md {
3314
3478
  /* Tailwind Default Scale */
3315
- --spacing: 0.25rem;
3479
+ --spacing: var(--ax-sys-spacing-base);
3480
+ --ax-sys-border-radius: var(--ax-sys-border-radius-base);
3316
3481
 
3317
3482
  /* Typography */
3318
- --text-xs: 0.75rem;
3319
- --text-sm: 0.875rem;
3320
- --text-base: 1rem;
3321
- --text-lg: 1.125rem;
3322
- --text-xl: 1.25rem;
3483
+ --text-xs: var(--ax-sys-text-xs-base);
3484
+ --text-sm: var(--ax-sys-text-sm-base);
3485
+ --text-base: var(--ax-sys-body-font-size);
3486
+ --text-lg: var(--ax-sys-text-lg-base);
3487
+ --text-xl: var(--ax-sys-text-xl-base);
3323
3488
 
3324
3489
  /* Line Heights */
3325
- --leading-3: 0.75rem;
3326
- --leading-4: 1rem;
3327
- --leading-5: 1.25rem;
3328
- --leading-6: 1.5rem;
3490
+ --leading-3: var(--ax-sys-leading-3-base);
3491
+ --leading-4: var(--ax-sys-leading-4-base);
3492
+ --leading-5: var(--ax-sys-leading-5-base);
3493
+ --leading-6: var(--ax-sys-leading-6-base);
3329
3494
  }
3330
3495
 
3331
3496
  @utility ax-lg {
3332
3497
  /* Spacing */
3333
- --spacing: 0.3125rem;
3498
+ --spacing: calc(var(--ax-sys-spacing-base) * 1.25);
3499
+ --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 1.25);
3334
3500
 
3335
3501
  /* Typography */
3336
- --text-xs: 0.8125rem;
3337
- --text-sm: 0.9375rem;
3338
- --text-base: 1.0625rem;
3339
- --text-lg: 1.25rem;
3340
- --text-xl: 1.375rem;
3502
+ --text-xs: calc(var(--ax-sys-text-xs-base) * 13 / 12);
3503
+ --text-sm: calc(var(--ax-sys-text-sm-base) * 15 / 14);
3504
+ --text-base: calc(var(--ax-sys-body-font-size) * 17 / 16);
3505
+ --text-lg: calc(var(--ax-sys-text-lg-base) * 10 / 9);
3506
+ --text-xl: calc(var(--ax-sys-text-xl-base) * 1.1);
3341
3507
 
3342
3508
  /* Line Heights */
3343
- --leading-3: 1rem;
3344
- --leading-4: 1.125rem;
3345
- --leading-5: 1.375rem;
3346
- --leading-6: 1.625rem;
3509
+ --leading-3: calc(var(--ax-sys-leading-3-base) * 4 / 3);
3510
+ --leading-4: calc(var(--ax-sys-leading-4-base) * 1.125);
3511
+ --leading-5: calc(var(--ax-sys-leading-5-base) * 1.1);
3512
+ --leading-6: calc(var(--ax-sys-leading-6-base) * 13 / 12);
3347
3513
  }
3348
3514
 
3349
3515
  @utility ax-xl {
3350
3516
  /* Spacing */
3351
- --spacing: 0.375rem;
3517
+ --spacing: calc(var(--ax-sys-spacing-base) * 1.5);
3518
+ --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 1.5);
3352
3519
 
3353
3520
  /* Typography */
3354
- --text-xs: 0.875rem;
3355
- --text-sm: 1rem;
3356
- --text-base: 1.125rem;
3357
- --text-lg: 1.375rem;
3358
- --text-xl: 1.5rem;
3521
+ --text-xs: calc(var(--ax-sys-text-xs-base) * 7 / 6);
3522
+ --text-sm: calc(var(--ax-sys-text-sm-base) * 8 / 7);
3523
+ --text-base: calc(var(--ax-sys-body-font-size) * 1.125);
3524
+ --text-lg: calc(var(--ax-sys-text-lg-base) * 11 / 9);
3525
+ --text-xl: calc(var(--ax-sys-text-xl-base) * 1.2);
3359
3526
 
3360
3527
  /* Line Heights */
3361
- --leading-3: 1.125rem;
3362
- --leading-4: 1.25rem;
3363
- --leading-5: 1.5rem;
3364
- --leading-6: 1.75rem;
3528
+ --leading-3: calc(var(--ax-sys-leading-3-base) * 1.5);
3529
+ --leading-4: calc(var(--ax-sys-leading-4-base) * 1.25);
3530
+ --leading-5: calc(var(--ax-sys-leading-5-base) * 1.2);
3531
+ --leading-6: calc(var(--ax-sys-leading-6-base) * 7 / 6);
3365
3532
  }