@acorex/styles 21.0.3-next.9 → 21.1.0-next.0

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 (6) hide show
  1. package/components/_action-item.css +4 -1
  2. package/components/_editor-container.css +53 -10
  3. package/components/_general-button.css +3 -1
  4. package/package.json +2 -2
  5. package/themes/default.css +474 -154
  6. package/tailwind-base.js +0 -324
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
 
@@ -48,32 +48,45 @@ html.ax-dark {
48
48
  color: rgba(var(--ax-sys-color-on-darkest-surface));
49
49
  }
50
50
 
51
- .ax-xs {
52
- --ax-sys-size: ax-xs;
53
- }
54
- .ax-sm {
55
- --ax-sys-size: ax-sm;
56
- }
57
- .ax-md {
58
- --ax-sys-size: ax-md;
59
- }
60
- .ax-lg {
61
- --ax-sys-size: ax-lg;
62
- }
63
- .ax-xl {
64
- --ax-sys-size: ax-xl;
65
- }
66
-
67
51
  :root {
68
52
  --ax-sys-theme-isDark: 0;
69
53
  --ax-sys-icon-size: 100%;
70
54
  --ax-sys-icon-weight: 400;
71
- --ax-sys-size-base: 2.5rem;
55
+ /* Immutable md control height (40px) — size utilities step ±8px from this */
56
+ --ax-sys-size-md: 2.5rem; /* 40px */
57
+ --ax-sys-size-step: 0.5rem; /* 8px */
58
+ /* Padding / spacing scale steps ±4px from md */
59
+ --ax-sys-padding-step: 0.25rem; /* 4px */
60
+ /* Default matches ax-md */
61
+ --ax-sys-size-base: var(--ax-sys-size-md);
72
62
  --ax-overlay-full-width: 93;
73
63
  --ax-sys-icon-width: inherit;
74
64
  --ax-sys-icon-height: inherit;
75
- --ax-sys-body-font-size: 1rem;
76
- --ax-sys-border-radius: 0.5rem;
65
+ --ax-sys-body-font-size: 1rem; /* 16px — standard Tailwind text-base */
66
+ --ax-sys-border-radius-base: 0.5rem;
67
+ --ax-sys-spacing-base: 0.25rem;
68
+ --ax-sys-text-xs-base: 0.75rem; /* 12px */
69
+ --ax-sys-text-sm-base: 0.875rem; /* 14px */
70
+ --ax-sys-text-lg-base: 1.125rem; /* 18px */
71
+ --ax-sys-text-xl-base: 1.25rem; /* 20px */
72
+ --ax-sys-leading-3-base: 0.75rem;
73
+ --ax-sys-leading-4-base: 1rem;
74
+ --ax-sys-leading-5-base: 1.25rem;
75
+ --ax-sys-leading-6-base: 1.5rem;
76
+
77
+ /* Standard Tailwind type scale (matches ax-md) — used when no ax-* size class is applied */
78
+ --spacing: var(--ax-sys-spacing-base);
79
+ --text-xs: var(--ax-sys-text-xs-base);
80
+ --text-sm: var(--ax-sys-text-sm-base);
81
+ --text-base: var(--ax-sys-body-font-size);
82
+ --text-lg: var(--ax-sys-text-lg-base);
83
+ --text-xl: var(--ax-sys-text-xl-base);
84
+ --leading-3: var(--ax-sys-leading-3-base);
85
+ --leading-4: var(--ax-sys-leading-4-base);
86
+ --leading-5: var(--ax-sys-leading-5-base);
87
+ --leading-6: var(--ax-sys-leading-6-base);
88
+
89
+ --ax-sys-border-radius: var(--ax-sys-border-radius-base);
77
90
  --ax-sys-transition-duration: 150ms;
78
91
  --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
79
92
 
@@ -607,7 +620,6 @@ html.ax-dark {
607
620
  --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);
608
621
  }
609
622
 
610
- :root.ax-dark,
611
623
  .ax-dark {
612
624
  --ax-sys-theme-isDark: 1;
613
625
  --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-darker-surface));
@@ -1138,13 +1150,161 @@ html.ax-dark {
1138
1150
  --ax-sys-color-border-default: var(--ax-sys-color-border-darkest-surface);
1139
1151
  }
1140
1152
 
1141
- @theme inline {
1153
+ /*
1154
+ * Re-declare light theme primitives and Tailwind color aliases for the `.ax-light` subtree.
1155
+ * Mirrors the `.ax-dark` override pattern so localized light zones work inside a dark page.
1156
+ */
1157
+ .ax-dark .ax-light {
1158
+ --ax-sys-theme-isDark: 0;
1159
+ --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-light-surface));
1160
+ --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-darkest-surface));
1161
+
1162
+ --ax-sys-color-lightest-surface: 255, 255, 255;
1163
+ --ax-sys-color-on-lightest-surface: 10, 10, 10;
1164
+ --ax-sys-color-border-lightest-surface: 233, 233, 233;
1165
+ --ax-sys-color-lighter-surface: 250, 250, 250;
1166
+ --ax-sys-color-on-lighter-surface: 10, 10, 10;
1167
+ --ax-sys-color-border-lighter-surface: 228, 228, 228;
1168
+ --ax-sys-color-light-surface: 245, 245, 245;
1169
+ --ax-sys-color-on-light-surface: 10, 10, 10;
1170
+ --ax-sys-color-border-light-surface: 223, 223, 223;
1171
+ --ax-sys-color-surface: 240, 240, 241;
1172
+ --ax-sys-color-on-surface: 10, 10, 10;
1173
+ --ax-sys-color-border-surface: 218, 218, 218;
1174
+ --ax-sys-color-dark-surface: 235, 235, 236;
1175
+ --ax-sys-color-on-dark-surface: 10, 10, 10;
1176
+ --ax-sys-color-border-dark-surface: 213, 213, 213;
1177
+ --ax-sys-color-darker-surface: 230, 230, 231;
1178
+ --ax-sys-color-on-darker-surface: 10, 10, 10;
1179
+ --ax-sys-color-border-darker-surface: 208, 208, 208;
1180
+ --ax-sys-color-darkest-surface: 224, 224, 225;
1181
+ --ax-sys-color-on-darkest-surface: 10, 10, 10;
1182
+ --ax-sys-color-border-darkest-surface: 202, 202, 202;
1183
+
1184
+ --ax-sys-color-primary-50: 231, 246, 255;
1185
+ --ax-sys-color-primary-100: 211, 234, 255;
1186
+ --ax-sys-color-primary-200: 183, 217, 255;
1187
+ --ax-sys-color-primary-300: 138, 189, 255;
1188
+ --ax-sys-color-primary-400: 77, 151, 255;
1189
+ --ax-sys-color-primary-500: 43, 127, 255;
1190
+ --ax-sys-color-primary-600: 20, 108, 235;
1191
+ --ax-sys-color-primary-700: 0, 86, 210;
1192
+ --ax-sys-color-primary-800: 12, 70, 182;
1193
+ --ax-sys-color-primary-900: 29, 64, 142;
1194
+ --ax-sys-color-primary-950: 14, 34, 84;
1195
+
1196
+ --ax-sys-color-primary-lightest-surface: 211, 234, 255;
1197
+ --ax-sys-color-on-primary-lightest-surface: 29, 48, 64;
1198
+ --ax-sys-color-border-primary-lightest-surface: 175, 217, 255;
1199
+ --ax-sys-color-primary-lighter-surface: 183, 217, 255;
1200
+ --ax-sys-color-on-primary-lighter-surface: 18, 47, 77;
1201
+ --ax-sys-color-border-primary-lighter-surface: 147, 198, 255;
1202
+ --ax-sys-color-primary-light-surface: 138, 189, 255;
1203
+ --ax-sys-color-on-primary-light-surface: 0, 44, 98;
1204
+ --ax-sys-color-border-primary-light-surface: 102, 169, 255;
1205
+ --ax-sys-color-primary-surface: 43, 127, 255;
1206
+ --ax-sys-color-on-primary-surface: 244, 254, 255;
1207
+ --ax-sys-color-border-primary-surface: 7, 105, 255;
1208
+ --ax-sys-color-primary-dark-surface: 20, 108, 235;
1209
+ --ax-sys-color-on-primary-dark-surface: 244, 254, 255;
1210
+ --ax-sys-color-border-primary-dark-surface: 17, 93, 202;
1211
+ --ax-sys-color-primary-darker-surface: 0, 86, 210;
1212
+ --ax-sys-color-on-primary-darker-surface: 245, 254, 255;
1213
+ --ax-sys-color-border-primary-darker-surface: 0, 71, 174;
1214
+ --ax-sys-color-primary-darkest-surface: 12, 70, 182;
1215
+ --ax-sys-color-on-primary-darkest-surface: 245, 254, 255;
1216
+ --ax-sys-color-border-primary-darkest-surface: 10, 57, 149;
1217
+
1218
+ --ax-sys-color-bg-default: var(--ax-sys-color-lightest-surface);
1219
+ --ax-sys-color-text-default: var(--ax-sys-color-on-lightest-surface);
1220
+ --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);
1221
+
1142
1222
  --color-bg-default: rgba(var(--ax-sys-color-bg-default));
1143
1223
  --color-text-default: rgba(var(--ax-sys-color-text-default));
1144
1224
  --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;
1225
+
1226
+ --color-lightest: rgba(var(--ax-sys-color-lightest-surface));
1227
+ --color-on-lightest: rgba(var(--ax-sys-color-on-lightest-surface));
1228
+ --color-border-lightest: rgba(var(--ax-sys-color-border-lightest-surface));
1229
+ --color-lighter: rgba(var(--ax-sys-color-lighter-surface));
1230
+ --color-on-lighter: rgba(var(--ax-sys-color-on-lighter-surface));
1231
+ --color-border-lighter: rgba(var(--ax-sys-color-border-lighter-surface));
1232
+ --color-light: rgba(var(--ax-sys-color-light-surface));
1233
+ --color-on-light: rgba(var(--ax-sys-color-on-light-surface));
1234
+ --color-border-light: rgba(var(--ax-sys-color-border-light-surface));
1235
+ --color-surface: rgba(var(--ax-sys-color-surface));
1236
+ --color-on-surface: rgba(var(--ax-sys-color-on-surface));
1237
+ --color-border-surface: rgba(var(--ax-sys-color-border-surface));
1238
+ --color-dark: rgba(var(--ax-sys-color-dark-surface));
1239
+ --color-on-dark: rgba(var(--ax-sys-color-on-dark-surface));
1240
+ --color-border-dark: rgba(var(--ax-sys-color-border-dark-surface));
1241
+ --color-darker: rgba(var(--ax-sys-color-darker-surface));
1242
+ --color-on-darker: rgba(var(--ax-sys-color-on-darker-surface));
1243
+ --color-border-darker: rgba(var(--ax-sys-color-border-darker-surface));
1244
+ --color-darkest: rgba(var(--ax-sys-color-darkest-surface));
1245
+ --color-on-darkest: rgba(var(--ax-sys-color-on-darkest-surface));
1246
+ --color-border-darkest: rgba(var(--ax-sys-color-border-darkest-surface));
1247
+
1248
+ --color-primary: rgba(var(--ax-sys-color-primary-surface));
1249
+ --color-primary-50: rgba(var(--ax-sys-color-primary-50));
1250
+ --color-primary-100: rgba(var(--ax-sys-color-primary-100));
1251
+ --color-primary-200: rgba(var(--ax-sys-color-primary-200));
1252
+ --color-primary-300: rgba(var(--ax-sys-color-primary-300));
1253
+ --color-primary-400: rgba(var(--ax-sys-color-primary-400));
1254
+ --color-primary-500: rgba(var(--ax-sys-color-primary-500));
1255
+ --color-primary-600: rgba(var(--ax-sys-color-primary-600));
1256
+ --color-primary-700: rgba(var(--ax-sys-color-primary-700));
1257
+ --color-primary-800: rgba(var(--ax-sys-color-primary-800));
1258
+ --color-primary-900: rgba(var(--ax-sys-color-primary-900));
1259
+ --color-primary-950: rgba(var(--ax-sys-color-primary-950));
1260
+ --color-primary-lightest: rgba(var(--ax-sys-color-primary-lightest-surface));
1261
+ --color-on-primary-lightest: rgba(var(--ax-sys-color-on-primary-lightest-surface));
1262
+ --color-border-primary-lightest: rgba(var(--ax-sys-color-border-primary-lightest-surface));
1263
+ --color-primary-lighter: rgba(var(--ax-sys-color-primary-lighter-surface));
1264
+ --color-on-primary-lighter: rgba(var(--ax-sys-color-on-primary-lighter-surface));
1265
+ --color-border-primary-lighter: rgba(var(--ax-sys-color-border-primary-lighter-surface));
1266
+ --color-primary-light: rgba(var(--ax-sys-color-primary-light-surface));
1267
+ --color-on-primary-light: rgba(var(--ax-sys-color-on-primary-light-surface));
1268
+ --color-border-primary-light: rgba(var(--ax-sys-color-border-primary-light-surface));
1269
+ --color-on-primary: rgba(var(--ax-sys-color-on-primary-surface));
1270
+ --color-border-primary: rgba(var(--ax-sys-color-border-primary-surface));
1271
+ --color-primary-dark: rgba(var(--ax-sys-color-primary-dark-surface));
1272
+ --color-on-primary-dark: rgba(var(--ax-sys-color-on-primary-dark-surface));
1273
+ --color-border-primary-dark: rgba(var(--ax-sys-color-border-primary-dark-surface));
1274
+ --color-primary-darker: rgba(var(--ax-sys-color-primary-darker-surface));
1275
+ --color-on-primary-darker: rgba(var(--ax-sys-color-on-primary-darker-surface));
1276
+ --color-border-primary-darker: rgba(var(--ax-sys-color-border-primary-darker-surface));
1277
+ --color-primary-darkest: rgba(var(--ax-sys-color-primary-darkest-surface));
1278
+ --color-on-primary-darkest: rgba(var(--ax-sys-color-on-primary-darkest-surface));
1279
+ --color-border-primary-darkest: rgba(var(--ax-sys-color-border-primary-darkest-surface));
1280
+ }
1281
+
1282
+ /*
1283
+ * Re-declare every Tailwind theme color alias for the `.ax-dark` subtree.
1284
+ *
1285
+ * Why this exists:
1286
+ * `@theme { --color-lightest: rgba(var(--ax-sys-color-lightest-surface)); ... }`
1287
+ * is emitted by Tailwind only on `:root`. Per the CSS spec, the inner
1288
+ * `var(--ax-sys-color-*)` references are substituted at computed-value time
1289
+ * on the declaring element (`:root`), so the resolved alias values are baked
1290
+ * to the LIGHT primitives and inherited downward unchanged.
1291
+ *
1292
+ * Result: a sub-tree `.ax-dark` flips the `--ax-sys-color-*` primitives but
1293
+ * the `--color-*` aliases (consumed by Tailwind utilities like `bg-lightest`,
1294
+ * `text-on-surface`, `border-default`) stay light, and a localized dark zone
1295
+ * inside an otherwise light page does not actually go dark.
1296
+ *
1297
+ * This block re-declares the aliases on `.ax-dark` so they are recomputed
1298
+ * against the dark primitives wherever `.ax-dark` appears in the DOM.
1299
+ * Pure static aliases (`--radius-default`, `--breakpoint-*`) are intentionally
1300
+ * omitted because they do not depend on `--ax-sys-color-*`.
1301
+ */
1302
+ .ax-dark {
1303
+ --ax-sys-theme-isDark: 1;
1304
+ --color-bg-default: rgba(var(--ax-sys-color-bg-default));
1305
+ --color-text-default: rgba(var(--ax-sys-color-text-default));
1306
+ --color-border-default: rgba(var(--ax-sys-color-border-default));
1307
+
1148
1308
  /* Surface Surfaces */
1149
1309
  --color-surface: rgba(var(--ax-sys-color-surface));
1150
1310
  --color-surface-50: rgba(var(--ax-sys-color-surface-50));
@@ -1168,7 +1328,6 @@ html.ax-dark {
1168
1328
  --color-light: rgba(var(--ax-sys-color-light-surface));
1169
1329
  --color-on-light: rgba(var(--ax-sys-color-on-light-surface));
1170
1330
  --color-border-light: rgba(var(--ax-sys-color-border-light-surface));
1171
- --color-surface: rgba(var(--ax-sys-color-surface));
1172
1331
  --color-on-surface: rgba(var(--ax-sys-color-on-surface));
1173
1332
  --color-border-surface: rgba(var(--ax-sys-color-border-surface));
1174
1333
  --color-dark: rgba(var(--ax-sys-color-dark-surface));
@@ -1180,6 +1339,7 @@ html.ax-dark {
1180
1339
  --color-darkest: rgba(var(--ax-sys-color-darkest-surface));
1181
1340
  --color-on-darkest: rgba(var(--ax-sys-color-on-darkest-surface));
1182
1341
  --color-border-darkest: rgba(var(--ax-sys-color-border-darkest-surface));
1342
+
1183
1343
  /* Primary Surfaces */
1184
1344
  --color-primary: rgba(var(--ax-sys-color-primary-surface));
1185
1345
  --color-primary-50: rgba(var(--ax-sys-color-primary-50));
@@ -1203,7 +1363,6 @@ html.ax-dark {
1203
1363
  --color-primary-light: rgba(var(--ax-sys-color-primary-light-surface));
1204
1364
  --color-on-primary-light: rgba(var(--ax-sys-color-on-primary-light-surface));
1205
1365
  --color-border-primary-light: rgba(var(--ax-sys-color-border-primary-light-surface));
1206
- --color-primary: rgba(var(--ax-sys-color-primary-surface));
1207
1366
  --color-on-primary: rgba(var(--ax-sys-color-on-primary-surface));
1208
1367
  --color-border-primary: rgba(var(--ax-sys-color-border-primary-surface));
1209
1368
  --color-primary-dark: rgba(var(--ax-sys-color-primary-dark-surface));
@@ -1239,7 +1398,6 @@ html.ax-dark {
1239
1398
  --color-secondary-light: rgba(var(--ax-sys-color-secondary-light-surface));
1240
1399
  --color-on-secondary-light: rgba(var(--ax-sys-color-on-secondary-light-surface));
1241
1400
  --color-border-secondary-light: rgba(var(--ax-sys-color-border-secondary-light-surface));
1242
- --color-secondary: rgba(var(--ax-sys-color-secondary-surface));
1243
1401
  --color-on-secondary: rgba(var(--ax-sys-color-on-secondary-surface));
1244
1402
  --color-border-secondary: rgba(var(--ax-sys-color-border-secondary-surface));
1245
1403
  --color-secondary-dark: rgba(var(--ax-sys-color-secondary-dark-surface));
@@ -1275,7 +1433,6 @@ html.ax-dark {
1275
1433
  --color-success-light: rgba(var(--ax-sys-color-success-light-surface));
1276
1434
  --color-on-success-light: rgba(var(--ax-sys-color-on-success-light-surface));
1277
1435
  --color-border-success-light: rgba(var(--ax-sys-color-border-success-light-surface));
1278
- --color-success: rgba(var(--ax-sys-color-success-surface));
1279
1436
  --color-on-success: rgba(var(--ax-sys-color-on-success-surface));
1280
1437
  --color-border-success: rgba(var(--ax-sys-color-border-success-surface));
1281
1438
  --color-success-dark: rgba(var(--ax-sys-color-success-dark-surface));
@@ -1311,7 +1468,6 @@ html.ax-dark {
1311
1468
  --color-warning-light: rgba(var(--ax-sys-color-warning-light-surface));
1312
1469
  --color-on-warning-light: rgba(var(--ax-sys-color-on-warning-light-surface));
1313
1470
  --color-border-warning-light: rgba(var(--ax-sys-color-border-warning-light-surface));
1314
- --color-warning: rgba(var(--ax-sys-color-warning-surface));
1315
1471
  --color-on-warning: rgba(var(--ax-sys-color-on-warning-surface));
1316
1472
  --color-border-warning: rgba(var(--ax-sys-color-border-warning-surface));
1317
1473
  --color-warning-dark: rgba(var(--ax-sys-color-warning-dark-surface));
@@ -1347,7 +1503,6 @@ html.ax-dark {
1347
1503
  --color-danger-light: rgba(var(--ax-sys-color-danger-light-surface));
1348
1504
  --color-on-danger-light: rgba(var(--ax-sys-color-on-danger-light-surface));
1349
1505
  --color-border-danger-light: rgba(var(--ax-sys-color-border-danger-light-surface));
1350
- --color-danger: rgba(var(--ax-sys-color-danger-surface));
1351
1506
  --color-on-danger: rgba(var(--ax-sys-color-on-danger-surface));
1352
1507
  --color-border-danger: rgba(var(--ax-sys-color-border-danger-surface));
1353
1508
  --color-danger-dark: rgba(var(--ax-sys-color-danger-dark-surface));
@@ -1383,7 +1538,6 @@ html.ax-dark {
1383
1538
  --color-accent-light: rgba(var(--ax-sys-color-accent-light-surface));
1384
1539
  --color-on-accent-light: rgba(var(--ax-sys-color-on-accent-light-surface));
1385
1540
  --color-border-accent-light: rgba(var(--ax-sys-color-border-accent-light-surface));
1386
- --color-accent: rgba(var(--ax-sys-color-accent-surface));
1387
1541
  --color-on-accent: rgba(var(--ax-sys-color-on-accent-surface));
1388
1542
  --color-border-accent: rgba(var(--ax-sys-color-border-accent-surface));
1389
1543
  --color-accent-dark: rgba(var(--ax-sys-color-accent-dark-surface));
@@ -1419,7 +1573,6 @@ html.ax-dark {
1419
1573
  --color-accent1-light: rgba(var(--ax-sys-color-accent1-light-surface));
1420
1574
  --color-on-accent1-light: rgba(var(--ax-sys-color-on-accent1-light-surface));
1421
1575
  --color-border-accent1-light: rgba(var(--ax-sys-color-border-accent1-light-surface));
1422
- --color-accent1: rgba(var(--ax-sys-color-accent1-surface));
1423
1576
  --color-on-accent1: rgba(var(--ax-sys-color-on-accent1-surface));
1424
1577
  --color-border-accent1: rgba(var(--ax-sys-color-border-accent1-surface));
1425
1578
  --color-accent1-dark: rgba(var(--ax-sys-color-accent1-dark-surface));
@@ -1455,7 +1608,6 @@ html.ax-dark {
1455
1608
  --color-accent2-light: rgba(var(--ax-sys-color-accent2-light-surface));
1456
1609
  --color-on-accent2-light: rgba(var(--ax-sys-color-on-accent2-light-surface));
1457
1610
  --color-border-accent2-light: rgba(var(--ax-sys-color-border-accent2-light-surface));
1458
- --color-accent2: rgba(var(--ax-sys-color-accent2-surface));
1459
1611
  --color-on-accent2: rgba(var(--ax-sys-color-on-accent2-surface));
1460
1612
  --color-border-accent2: rgba(var(--ax-sys-color-border-accent2-surface));
1461
1613
  --color-accent2-dark: rgba(var(--ax-sys-color-accent2-dark-surface));
@@ -1491,7 +1643,6 @@ html.ax-dark {
1491
1643
  --color-accent3-light: rgba(var(--ax-sys-color-accent3-light-surface));
1492
1644
  --color-on-accent3-light: rgba(var(--ax-sys-color-on-accent3-light-surface));
1493
1645
  --color-border-accent3-light: rgba(var(--ax-sys-color-border-accent3-light-surface));
1494
- --color-accent3: rgba(var(--ax-sys-color-accent3-surface));
1495
1646
  --color-on-accent3: rgba(var(--ax-sys-color-on-accent3-surface));
1496
1647
  --color-border-accent3: rgba(var(--ax-sys-color-border-accent3-surface));
1497
1648
  --color-accent3-dark: rgba(var(--ax-sys-color-accent3-dark-surface));
@@ -1527,7 +1678,6 @@ html.ax-dark {
1527
1678
  --color-accent4-light: rgba(var(--ax-sys-color-accent4-light-surface));
1528
1679
  --color-on-accent4-light: rgba(var(--ax-sys-color-on-accent4-light-surface));
1529
1680
  --color-border-accent4-light: rgba(var(--ax-sys-color-border-accent4-light-surface));
1530
- --color-accent4: rgba(var(--ax-sys-color-accent4-surface));
1531
1681
  --color-on-accent4: rgba(var(--ax-sys-color-on-accent4-surface));
1532
1682
  --color-border-accent4: rgba(var(--ax-sys-color-border-accent4-surface));
1533
1683
  --color-accent4-dark: rgba(var(--ax-sys-color-accent4-dark-surface));
@@ -1563,7 +1713,6 @@ html.ax-dark {
1563
1713
  --color-accent5-light: rgba(var(--ax-sys-color-accent5-light-surface));
1564
1714
  --color-on-accent5-light: rgba(var(--ax-sys-color-on-accent5-light-surface));
1565
1715
  --color-border-accent5-light: rgba(var(--ax-sys-color-border-accent5-light-surface));
1566
- --color-accent5: rgba(var(--ax-sys-color-accent5-surface));
1567
1716
  --color-on-accent5: rgba(var(--ax-sys-color-on-accent5-surface));
1568
1717
  --color-border-accent5: rgba(var(--ax-sys-color-border-accent5-surface));
1569
1718
  --color-accent5-dark: rgba(var(--ax-sys-color-accent5-dark-surface));
@@ -1599,7 +1748,6 @@ html.ax-dark {
1599
1748
  --color-accent6-light: rgba(var(--ax-sys-color-accent6-light-surface));
1600
1749
  --color-on-accent6-light: rgba(var(--ax-sys-color-on-accent6-light-surface));
1601
1750
  --color-border-accent6-light: rgba(var(--ax-sys-color-border-accent6-light-surface));
1602
- --color-accent6: rgba(var(--ax-sys-color-accent6-surface));
1603
1751
  --color-on-accent6: rgba(var(--ax-sys-color-on-accent6-surface));
1604
1752
  --color-border-accent6: rgba(var(--ax-sys-color-border-accent6-surface));
1605
1753
  --color-accent6-dark: rgba(var(--ax-sys-color-accent6-dark-surface));
@@ -1613,33 +1761,16 @@ html.ax-dark {
1613
1761
  --color-border-accent6-darkest: rgba(var(--ax-sys-color-border-accent6-darkest-surface));
1614
1762
  }
1615
1763
 
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;
1764
+ @theme inline {
1639
1765
  --color-bg-default: rgba(var(--ax-sys-color-bg-default));
1640
1766
  --color-text-default: rgba(var(--ax-sys-color-text-default));
1641
1767
  --color-border-default: rgba(var(--ax-sys-color-border-default));
1642
-
1768
+ --radius-default: var(--ax-sys-border-radius);
1769
+ --spacing-default: var(--ax-sys-size-base);
1770
+ --height-default: var(--ax-sys-size-base);
1771
+ --min-height-default: var(--ax-sys-size-base);
1772
+ --breakpoint-3xl: 1920px;
1773
+ --breakpoint-4xl: 2560px;
1643
1774
  /* Surface Surfaces */
1644
1775
  --color-surface: rgba(var(--ax-sys-color-surface));
1645
1776
  --color-surface-50: rgba(var(--ax-sys-color-surface-50));
@@ -1663,6 +1794,7 @@ html.ax-dark {
1663
1794
  --color-light: rgba(var(--ax-sys-color-light-surface));
1664
1795
  --color-on-light: rgba(var(--ax-sys-color-on-light-surface));
1665
1796
  --color-border-light: rgba(var(--ax-sys-color-border-light-surface));
1797
+ --color-surface: rgba(var(--ax-sys-color-surface));
1666
1798
  --color-on-surface: rgba(var(--ax-sys-color-on-surface));
1667
1799
  --color-border-surface: rgba(var(--ax-sys-color-border-surface));
1668
1800
  --color-dark: rgba(var(--ax-sys-color-dark-surface));
@@ -1674,7 +1806,6 @@ html.ax-dark {
1674
1806
  --color-darkest: rgba(var(--ax-sys-color-darkest-surface));
1675
1807
  --color-on-darkest: rgba(var(--ax-sys-color-on-darkest-surface));
1676
1808
  --color-border-darkest: rgba(var(--ax-sys-color-border-darkest-surface));
1677
-
1678
1809
  /* Primary Surfaces */
1679
1810
  --color-primary: rgba(var(--ax-sys-color-primary-surface));
1680
1811
  --color-primary-50: rgba(var(--ax-sys-color-primary-50));
@@ -1698,6 +1829,7 @@ html.ax-dark {
1698
1829
  --color-primary-light: rgba(var(--ax-sys-color-primary-light-surface));
1699
1830
  --color-on-primary-light: rgba(var(--ax-sys-color-on-primary-light-surface));
1700
1831
  --color-border-primary-light: rgba(var(--ax-sys-color-border-primary-light-surface));
1832
+ --color-primary: rgba(var(--ax-sys-color-primary-surface));
1701
1833
  --color-on-primary: rgba(var(--ax-sys-color-on-primary-surface));
1702
1834
  --color-border-primary: rgba(var(--ax-sys-color-border-primary-surface));
1703
1835
  --color-primary-dark: rgba(var(--ax-sys-color-primary-dark-surface));
@@ -1733,6 +1865,7 @@ html.ax-dark {
1733
1865
  --color-secondary-light: rgba(var(--ax-sys-color-secondary-light-surface));
1734
1866
  --color-on-secondary-light: rgba(var(--ax-sys-color-on-secondary-light-surface));
1735
1867
  --color-border-secondary-light: rgba(var(--ax-sys-color-border-secondary-light-surface));
1868
+ --color-secondary: rgba(var(--ax-sys-color-secondary-surface));
1736
1869
  --color-on-secondary: rgba(var(--ax-sys-color-on-secondary-surface));
1737
1870
  --color-border-secondary: rgba(var(--ax-sys-color-border-secondary-surface));
1738
1871
  --color-secondary-dark: rgba(var(--ax-sys-color-secondary-dark-surface));
@@ -1768,6 +1901,7 @@ html.ax-dark {
1768
1901
  --color-success-light: rgba(var(--ax-sys-color-success-light-surface));
1769
1902
  --color-on-success-light: rgba(var(--ax-sys-color-on-success-light-surface));
1770
1903
  --color-border-success-light: rgba(var(--ax-sys-color-border-success-light-surface));
1904
+ --color-success: rgba(var(--ax-sys-color-success-surface));
1771
1905
  --color-on-success: rgba(var(--ax-sys-color-on-success-surface));
1772
1906
  --color-border-success: rgba(var(--ax-sys-color-border-success-surface));
1773
1907
  --color-success-dark: rgba(var(--ax-sys-color-success-dark-surface));
@@ -1803,6 +1937,7 @@ html.ax-dark {
1803
1937
  --color-warning-light: rgba(var(--ax-sys-color-warning-light-surface));
1804
1938
  --color-on-warning-light: rgba(var(--ax-sys-color-on-warning-light-surface));
1805
1939
  --color-border-warning-light: rgba(var(--ax-sys-color-border-warning-light-surface));
1940
+ --color-warning: rgba(var(--ax-sys-color-warning-surface));
1806
1941
  --color-on-warning: rgba(var(--ax-sys-color-on-warning-surface));
1807
1942
  --color-border-warning: rgba(var(--ax-sys-color-border-warning-surface));
1808
1943
  --color-warning-dark: rgba(var(--ax-sys-color-warning-dark-surface));
@@ -1838,6 +1973,7 @@ html.ax-dark {
1838
1973
  --color-danger-light: rgba(var(--ax-sys-color-danger-light-surface));
1839
1974
  --color-on-danger-light: rgba(var(--ax-sys-color-on-danger-light-surface));
1840
1975
  --color-border-danger-light: rgba(var(--ax-sys-color-border-danger-light-surface));
1976
+ --color-danger: rgba(var(--ax-sys-color-danger-surface));
1841
1977
  --color-on-danger: rgba(var(--ax-sys-color-on-danger-surface));
1842
1978
  --color-border-danger: rgba(var(--ax-sys-color-border-danger-surface));
1843
1979
  --color-danger-dark: rgba(var(--ax-sys-color-danger-dark-surface));
@@ -1873,6 +2009,7 @@ html.ax-dark {
1873
2009
  --color-accent-light: rgba(var(--ax-sys-color-accent-light-surface));
1874
2010
  --color-on-accent-light: rgba(var(--ax-sys-color-on-accent-light-surface));
1875
2011
  --color-border-accent-light: rgba(var(--ax-sys-color-border-accent-light-surface));
2012
+ --color-accent: rgba(var(--ax-sys-color-accent-surface));
1876
2013
  --color-on-accent: rgba(var(--ax-sys-color-on-accent-surface));
1877
2014
  --color-border-accent: rgba(var(--ax-sys-color-border-accent-surface));
1878
2015
  --color-accent-dark: rgba(var(--ax-sys-color-accent-dark-surface));
@@ -1908,6 +2045,7 @@ html.ax-dark {
1908
2045
  --color-accent1-light: rgba(var(--ax-sys-color-accent1-light-surface));
1909
2046
  --color-on-accent1-light: rgba(var(--ax-sys-color-on-accent1-light-surface));
1910
2047
  --color-border-accent1-light: rgba(var(--ax-sys-color-border-accent1-light-surface));
2048
+ --color-accent1: rgba(var(--ax-sys-color-accent1-surface));
1911
2049
  --color-on-accent1: rgba(var(--ax-sys-color-on-accent1-surface));
1912
2050
  --color-border-accent1: rgba(var(--ax-sys-color-border-accent1-surface));
1913
2051
  --color-accent1-dark: rgba(var(--ax-sys-color-accent1-dark-surface));
@@ -1943,6 +2081,7 @@ html.ax-dark {
1943
2081
  --color-accent2-light: rgba(var(--ax-sys-color-accent2-light-surface));
1944
2082
  --color-on-accent2-light: rgba(var(--ax-sys-color-on-accent2-light-surface));
1945
2083
  --color-border-accent2-light: rgba(var(--ax-sys-color-border-accent2-light-surface));
2084
+ --color-accent2: rgba(var(--ax-sys-color-accent2-surface));
1946
2085
  --color-on-accent2: rgba(var(--ax-sys-color-on-accent2-surface));
1947
2086
  --color-border-accent2: rgba(var(--ax-sys-color-border-accent2-surface));
1948
2087
  --color-accent2-dark: rgba(var(--ax-sys-color-accent2-dark-surface));
@@ -1978,6 +2117,7 @@ html.ax-dark {
1978
2117
  --color-accent3-light: rgba(var(--ax-sys-color-accent3-light-surface));
1979
2118
  --color-on-accent3-light: rgba(var(--ax-sys-color-on-accent3-light-surface));
1980
2119
  --color-border-accent3-light: rgba(var(--ax-sys-color-border-accent3-light-surface));
2120
+ --color-accent3: rgba(var(--ax-sys-color-accent3-surface));
1981
2121
  --color-on-accent3: rgba(var(--ax-sys-color-on-accent3-surface));
1982
2122
  --color-border-accent3: rgba(var(--ax-sys-color-border-accent3-surface));
1983
2123
  --color-accent3-dark: rgba(var(--ax-sys-color-accent3-dark-surface));
@@ -2013,6 +2153,7 @@ html.ax-dark {
2013
2153
  --color-accent4-light: rgba(var(--ax-sys-color-accent4-light-surface));
2014
2154
  --color-on-accent4-light: rgba(var(--ax-sys-color-on-accent4-light-surface));
2015
2155
  --color-border-accent4-light: rgba(var(--ax-sys-color-border-accent4-light-surface));
2156
+ --color-accent4: rgba(var(--ax-sys-color-accent4-surface));
2016
2157
  --color-on-accent4: rgba(var(--ax-sys-color-on-accent4-surface));
2017
2158
  --color-border-accent4: rgba(var(--ax-sys-color-border-accent4-surface));
2018
2159
  --color-accent4-dark: rgba(var(--ax-sys-color-accent4-dark-surface));
@@ -2048,6 +2189,7 @@ html.ax-dark {
2048
2189
  --color-accent5-light: rgba(var(--ax-sys-color-accent5-light-surface));
2049
2190
  --color-on-accent5-light: rgba(var(--ax-sys-color-on-accent5-light-surface));
2050
2191
  --color-border-accent5-light: rgba(var(--ax-sys-color-border-accent5-light-surface));
2192
+ --color-accent5: rgba(var(--ax-sys-color-accent5-surface));
2051
2193
  --color-on-accent5: rgba(var(--ax-sys-color-on-accent5-surface));
2052
2194
  --color-border-accent5: rgba(var(--ax-sys-color-border-accent5-surface));
2053
2195
  --color-accent5-dark: rgba(var(--ax-sys-color-accent5-dark-surface));
@@ -2083,6 +2225,7 @@ html.ax-dark {
2083
2225
  --color-accent6-light: rgba(var(--ax-sys-color-accent6-light-surface));
2084
2226
  --color-on-accent6-light: rgba(var(--ax-sys-color-on-accent6-light-surface));
2085
2227
  --color-border-accent6-light: rgba(var(--ax-sys-color-border-accent6-light-surface));
2228
+ --color-accent6: rgba(var(--ax-sys-color-accent6-surface));
2086
2229
  --color-on-accent6: rgba(var(--ax-sys-color-on-accent6-surface));
2087
2230
  --color-border-accent6: rgba(var(--ax-sys-color-border-accent6-surface));
2088
2231
  --color-accent6-dark: rgba(var(--ax-sys-color-accent6-dark-surface));
@@ -2094,6 +2237,13 @@ html.ax-dark {
2094
2237
  --color-accent6-darkest: rgba(var(--ax-sys-color-accent6-darkest-surface));
2095
2238
  --color-on-accent6-darkest: rgba(var(--ax-sys-color-on-accent6-darkest-surface));
2096
2239
  --color-border-accent6-darkest: rgba(var(--ax-sys-color-border-accent6-darkest-surface));
2240
+
2241
+ /*
2242
+ * Do NOT put --spacing / --text-* / --leading-* in @theme inline.
2243
+ * inline would bake var(--ax-sys-*-base) into utilities (e.g. p-3 → calc(var(--ax-sys-spacing-base) * 3)),
2244
+ * so ax-sm/ax-lg overrides of --spacing would never take effect.
2245
+ * Those tokens live on :root (and size utilities) so utilities keep referencing var(--spacing) etc.
2246
+ */
2097
2247
  }
2098
2248
 
2099
2249
  @utility text-muted {
@@ -2186,7 +2336,7 @@ html.ax-dark {
2186
2336
  border-color: var(--color-border-primary-darkest);
2187
2337
  }
2188
2338
 
2189
- @utility ax-default {
2339
+ /* @utility ax-default {
2190
2340
  --ax-comp-bg-lightest: var(--color-darkest);
2191
2341
  --ax-comp-text-lightest: var(--color-on-darkest);
2192
2342
  --ax-comp-border-lightest: var(--color-border-darkest);
@@ -2208,7 +2358,7 @@ html.ax-dark {
2208
2358
  --ax-comp-bg-darkest: var(--color-lightest);
2209
2359
  --ax-comp-text-darkest: var(--color-on-lightest);
2210
2360
  --ax-comp-border-darkest: var(--color-border-lightest);
2211
- }
2361
+ } */
2212
2362
 
2213
2363
  @utility ax-primary {
2214
2364
  --ax-comp-bg-lightest: var(--color-primary-lightest);
@@ -3062,35 +3212,110 @@ html.ax-dark {
3062
3212
  @apply cursor-text opacity-70 *:cursor-text;
3063
3213
  }
3064
3214
 
3215
+ @utility ax-focus-ring {
3216
+ @apply 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))] outline-none;
3217
+ }
3218
+
3219
+ @utility ax-focus-ring-editor {
3220
+ @apply outline-2 outline-offset-0 outline-(--ax-comp-bg-light,var(--color-primary-light));
3221
+ }
3222
+
3065
3223
  @utility ax-fill {
3224
+ @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));
3066
3225
  &.ax-default {
3067
3226
  @apply light-surface dark:dark-surface;
3068
3227
  }
3228
+ &.ax-state-selected {
3229
+ @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));
3230
+ }
3069
3231
  &.ax-editor-container {
3070
- @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
3232
+ &:focus-within {
3233
+ @apply ax-focus-ring-editor;
3234
+ }
3235
+ }
3236
+ }
3237
+
3238
+ @utility ax-fill-interactive {
3239
+ @supports (color: color-mix(in lab, red, red)) {
3240
+ --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3241
+ }
3242
+ @apply ax-fill transition-colors outline-none;
3243
+ &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3244
+ &:hover,
3245
+ &:focus,
3246
+ &:focus-within,
3247
+ &:focus-visible,
3248
+ &.ax-state-focus {
3249
+ background-color: var(--ax-comp-bg-lighter, var(--color-light));
3250
+ color: var(--ax-comp-text-lighter, var(--color-on-light));
3251
+ @variant dark {
3252
+ background-color: var(--ax-comp-bg-lighter, var(--color-dark));
3253
+ color: var(--ax-comp-text-lighter, var(--color-on-dark));
3254
+ }
3255
+ }
3256
+ &:focus-visible,
3257
+ &.ax-state-focus {
3258
+ @apply ax-focus-ring;
3259
+ }
3260
+ }
3261
+ &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
3262
+ background-color: var(--ax-comp-bg-light, var(--color-surface));
3263
+ color: var(--ax-comp-text-light, var(--color-on-surface));
3071
3264
  }
3072
3265
  }
3073
3266
 
3074
3267
  @utility ax-flat {
3075
- @apply rounded-none;
3268
+ @apply rounded-none border-b border-(--ax-comp-bg,var(--color-border-lightest)) bg-transparent text-(--ax-comp-bg,var(--color-on-surface));
3076
3269
  &.ax-default {
3077
- @apply border-border-lightest dark:border-border-darkest border-b bg-transparent;
3270
+ @apply border-border-lightest dark:border-border-darkest border-b bg-transparent text-(--color-on-surface);
3271
+ }
3272
+ &.ax-state-selected {
3273
+ @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
3078
3274
  }
3079
3275
  &.ax-editor-container {
3080
- @apply focus-within:border-primary!;
3276
+ &:focus-within {
3277
+ border-color: var(--ax-comp-bg, var(--color-primary)) !important;
3278
+ }
3279
+ }
3280
+ }
3281
+
3282
+ @utility ax-flat-interactive {
3283
+ @supports (color: color-mix(in lab, red, red)) {
3284
+ --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3285
+ }
3286
+ @apply ax-flat transition-colors outline-none;
3287
+ &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3288
+ &:hover,
3289
+ &:focus,
3290
+ &:focus-within,
3291
+ &:focus-visible,
3292
+ &.ax-state-focus {
3293
+ border-color: var(--ax-comp-bg-dark, var(--color-border-lighter));
3294
+ color: var(--ax-comp-bg-dark, var(--color-on-lighter));
3295
+ }
3296
+ &:focus-visible,
3297
+ &.ax-state-focus {
3298
+ @apply ax-focus-ring;
3299
+ }
3300
+ }
3301
+ &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
3302
+ border-color: var(--ax-comp-bg-darker, var(--color-border-light));
3303
+ color: var(--ax-comp-bg-darker, var(--color-on-light));
3081
3304
  }
3082
3305
  }
3083
3306
 
3084
3307
  @utility ax-solid {
3085
3308
  @apply bg-(--ax-comp-bg,var(--color-lightest)) text-(--ax-comp-text,var(--color-on-lightest)) dark:bg-(--ax-comp-bg,var(--color-darkest)) dark:text-(--ax-comp-text,var(--color-on-darkest));
3086
3309
  &.ax-default {
3087
- @apply lightest-surface dark:darkest-surface border;
3310
+ @apply border-border-surface border;
3088
3311
  }
3089
3312
  &.ax-state-selected {
3090
3313
  @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));
3091
3314
  }
3092
3315
  &.ax-editor-container {
3093
- @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
3316
+ &:focus-within {
3317
+ @apply ax-focus-ring-editor;
3318
+ }
3094
3319
  }
3095
3320
  }
3096
3321
 
@@ -3098,17 +3323,34 @@ html.ax-dark {
3098
3323
  @supports (color: color-mix(in lab, red, red)) {
3099
3324
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg-lightest, var(--color-on-lightest)) 25%, transparent);
3100
3325
  }
3101
- @apply ax-solid transition-colors;
3326
+ @apply ax-solid transition-colors outline-none;
3102
3327
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3103
3328
  &:hover,
3104
3329
  &:focus,
3105
3330
  &:focus-within,
3106
- &:focus-visible {
3107
- @apply bg-(--ax-comp-bg-dark,var(--color-lighter)) text-(--ax-comp-text-dark,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-dark,var(--color-darker)) dark:text-(--ax-comp-text-dark,var(--color-on-darker));
3331
+ &:focus-visible,
3332
+ &.ax-state-focus {
3333
+ background-color: var(--ax-comp-bg-dark, var(--color-lighter));
3334
+ color: var(--ax-comp-text-dark, var(--color-on-lighter));
3335
+ @variant dark {
3336
+ background-color: var(--ax-comp-bg-dark, var(--color-darker));
3337
+ color: var(--ax-comp-text-dark, var(--color-on-darker));
3338
+ }
3339
+ }
3340
+ &:focus-visible,
3341
+ &.ax-state-focus {
3342
+ @apply ax-focus-ring;
3108
3343
  }
3109
3344
  }
3110
3345
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
3111
- @apply bg-(--ax-comp-bg-darker,var(--color-light)) text-(--ax-comp-text-darker,var(--color-on-light)) ring-1 ring-(--ax-comp-bg-dark) ring-offset-1 dark:bg-(--ax-comp-bg-darker,var(--color-dark)) dark:text-(--ax-comp-text-darker,var(--color-on-dark));
3346
+ background-color: var(--ax-comp-bg-darker, var(--color-light));
3347
+ color: var(--ax-comp-text-darker, var(--color-on-light));
3348
+ @apply ring-1 ring-offset-1;
3349
+ --tw-ring-color: var(--ax-comp-bg-dark, var(--color-primary-dark));
3350
+ @variant dark {
3351
+ background-color: var(--ax-comp-bg-darker, var(--color-dark));
3352
+ color: var(--ax-comp-text-darker, var(--color-on-dark));
3353
+ }
3112
3354
  }
3113
3355
  }
3114
3356
 
@@ -3121,7 +3363,9 @@ html.ax-dark {
3121
3363
  @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
3122
3364
  }
3123
3365
  &.ax-editor-container {
3124
- @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
3366
+ &:focus-within {
3367
+ @apply ax-focus-ring-editor;
3368
+ }
3125
3369
  }
3126
3370
  }
3127
3371
 
@@ -3129,17 +3373,24 @@ html.ax-dark {
3129
3373
  @supports (color: color-mix(in lab, red, red)) {
3130
3374
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3131
3375
  }
3132
- @apply ax-outline transition-colors;
3376
+ @apply ax-outline transition-colors outline-none;
3133
3377
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3134
3378
  &:hover,
3135
3379
  &:focus,
3136
3380
  &:focus-within,
3137
- &:focus-visible {
3138
- @apply border-(--ax-comp-bg-dark,var(--color-border-lighter)) text-(--ax-comp-bg-dark,var(--color-on-lighter));
3381
+ &:focus-visible,
3382
+ &.ax-state-focus {
3383
+ border-color: var(--ax-comp-bg-dark, var(--color-border-lighter));
3384
+ color: var(--ax-comp-bg-dark, var(--color-on-lighter));
3385
+ }
3386
+ &:focus-visible,
3387
+ &.ax-state-focus {
3388
+ @apply ax-focus-ring;
3139
3389
  }
3140
3390
  }
3141
3391
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
3142
- @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
3392
+ border-color: var(--ax-comp-bg-darker, var(--color-border-light));
3393
+ color: var(--ax-comp-bg-darker, var(--color-on-light));
3143
3394
  }
3144
3395
  }
3145
3396
 
@@ -3154,17 +3405,28 @@ html.ax-dark {
3154
3405
  @supports (color: color-mix(in lab, red, red)) {
3155
3406
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3156
3407
  }
3157
- @apply ax-twotone transition-colors;
3408
+ @apply ax-twotone transition-colors outline-none;
3158
3409
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3159
3410
  &:hover,
3160
3411
  &:focus,
3161
3412
  &:focus-within,
3162
- &:focus-visible {
3163
- @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));
3413
+ &:focus-visible,
3414
+ &.ax-state-focus {
3415
+ background-color: var(--ax-comp-bg-lighter, var(--color-light));
3416
+ color: var(--ax-comp-text-lighter, var(--color-on-light));
3417
+ @variant dark {
3418
+ background-color: var(--ax-comp-bg-lighter, var(--color-dark));
3419
+ color: var(--ax-comp-text-lighter, var(--color-on-dark));
3420
+ }
3421
+ }
3422
+ &:focus-visible,
3423
+ &.ax-state-focus {
3424
+ @apply ax-focus-ring;
3164
3425
  }
3165
3426
  }
3166
3427
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
3167
- @apply bg-(--ax-comp-bg-light,var(--color-surface)) text-(--ax-comp-text-light,var(--color-on-surface));
3428
+ background-color: var(--ax-comp-bg-light, var(--color-surface));
3429
+ color: var(--ax-comp-text-light, var(--color-on-surface));
3168
3430
  }
3169
3431
  }
3170
3432
 
@@ -3179,44 +3441,72 @@ html.ax-dark {
3179
3441
  @supports (color: color-mix(in lab, red, red)) {
3180
3442
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3181
3443
  }
3182
- @apply ax-blank transition-colors;
3444
+ @apply ax-blank transition-colors outline-none;
3183
3445
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3184
3446
  &:hover,
3185
3447
  &:focus,
3186
3448
  &:focus-within,
3187
- &:focus-visible {
3188
- @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));
3449
+ &:focus-visible,
3450
+ &.ax-state-focus {
3451
+ background-color: var(--ax-comp-bg-lightest, var(--color-lighter));
3452
+ color: var(--ax-comp-text-lightest, var(--color-on-lighter));
3453
+ @variant dark {
3454
+ background-color: var(--ax-comp-bg-lightest, var(--color-darker));
3455
+ color: var(--ax-comp-text-lightest, var(--color-on-darker));
3456
+ }
3457
+ }
3458
+ &:focus-visible,
3459
+ &.ax-state-focus {
3460
+ @apply ax-focus-ring;
3189
3461
  }
3190
3462
  }
3191
3463
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
3192
- @apply bg-(--ax-comp-bg-lighter,var(--color-surface)) text-(--ax-comp-text-lighter,var(--color-on-surface));
3464
+ background-color: var(--ax-comp-bg-lighter, var(--color-surface));
3465
+ color: var(--ax-comp-text-lighter, var(--color-on-surface));
3193
3466
  }
3194
3467
  }
3195
3468
 
3196
- @utility links {
3469
+ @utility ax-link {
3197
3470
  @apply bg-transparent text-(--ax-comp-bg,var(--color-on-surface));
3198
3471
  &.ax-state-selected {
3199
3472
  @apply text-(--ax-comp-bg-darker,var(--color-on-surface));
3200
3473
  }
3201
3474
  }
3202
3475
 
3203
- @utility links-interactive {
3476
+ @utility ax-link-interactive {
3204
3477
  @supports (color: color-mix(in lab, red, red)) {
3205
3478
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3206
3479
  }
3207
- @apply links transition-colors;
3480
+ @apply ax-link transition-colors outline-none;
3208
3481
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3209
3482
  &:hover,
3210
3483
  &:focus,
3211
3484
  &:focus-within,
3212
- &:focus-visible {
3213
- @apply text-(--ax-comp-bg-dark,var(--color-on-surface));
3485
+ &:focus-visible,
3486
+ &.ax-state-focus {
3487
+ color: var(--ax-comp-bg-dark, var(--color-on-surface));
3488
+ }
3489
+ &:focus-visible,
3490
+ &.ax-state-focus {
3491
+ @apply ax-focus-ring;
3214
3492
  }
3215
3493
  }
3216
3494
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
3217
- @apply text-(--ax-comp-bg-darker,var(--color-on-surface));
3495
+ color: var(--ax-comp-bg-darker, var(--color-on-surface));
3218
3496
  }
3219
3497
  }
3498
+
3499
+ /* Backwards-compatible aliases */
3500
+ @utility links {
3501
+ @apply ax-link;
3502
+ }
3503
+ @utility links-interactive {
3504
+ @apply ax-link-interactive;
3505
+ }
3506
+ @utility ax-links {
3507
+ @apply ax-link;
3508
+ }
3509
+
3220
3510
  @utility h1 {
3221
3511
  font-size: 2.5rem;
3222
3512
  font-weight: 500;
@@ -3275,91 +3565,121 @@ html.ax-dark {
3275
3565
  }
3276
3566
 
3277
3567
  @utility ax-xs {
3278
- /* Spacing */
3279
- --spacing: 0.125rem;
3568
+ --ax-sys-size: ax-xs;
3569
+ /* Control height — 24px (md − 16px) */
3570
+ --ax-sys-size-base: calc(var(--ax-sys-size-md) - 2 * var(--ax-sys-size-step));
3280
3571
 
3281
- /* 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;
3572
+ /* Spacing — unit 2px (md − 2×4px on the 4px base unit scale via half step) */
3573
+ --spacing: calc(var(--ax-sys-spacing-base) - 0.5 * var(--ax-sys-padding-step));
3574
+ /* Border radius — 4px */
3575
+ --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) - var(--ax-sys-padding-step));
3576
+
3577
+ /* Typography — scaled down from standard Tailwind (preserves relative scale) */
3578
+ --text-xs: calc(var(--ax-sys-text-xs-base) * 5 / 6);
3579
+ --text-sm: calc(var(--ax-sys-text-sm-base) * 11 / 14);
3580
+ --text-base: calc(var(--ax-sys-body-font-size) * 0.75);
3581
+ --text-lg: calc(var(--ax-sys-text-lg-base) * 7 / 9);
3582
+ --text-xl: calc(var(--ax-sys-text-xl-base) * 0.8);
3287
3583
 
3288
3584
  /* Line Heights */
3289
- --leading-3: 0.75rem;
3290
- --leading-4: 0.875rem;
3291
- --leading-5: 1rem;
3292
- --leading-6: 1.25rem;
3585
+ --leading-3: var(--ax-sys-leading-3-base);
3586
+ --leading-4: calc(var(--ax-sys-leading-4-base) * 0.875);
3587
+ --leading-5: calc(var(--ax-sys-leading-5-base) * 0.8);
3588
+ --leading-6: calc(var(--ax-sys-leading-6-base) * 5 / 6);
3293
3589
  }
3294
3590
 
3295
3591
  @utility ax-sm {
3296
- /* Spacing */
3297
- --spacing: 0.1875rem;
3592
+ --ax-sys-size: ax-sm;
3593
+ /* Control height — 32px (md − 8px) */
3594
+ --ax-sys-size-base: calc(var(--ax-sys-size-md) - var(--ax-sys-size-step));
3595
+
3596
+ /* Spacing — unit 3px */
3597
+ --spacing: calc(var(--ax-sys-spacing-base) - 0.25 * var(--ax-sys-padding-step));
3598
+ /* Border radius — 8px (same as md) */
3599
+ --ax-sys-border-radius: var(--ax-sys-border-radius-base);
3298
3600
 
3299
- /* 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;
3601
+ /* Typography — scaled down from standard Tailwind (preserves relative scale) */
3602
+ --text-xs: calc(var(--ax-sys-text-xs-base) * 11 / 12);
3603
+ --text-sm: calc(var(--ax-sys-text-sm-base) * 6 / 7);
3604
+ --text-base: calc(var(--ax-sys-body-font-size) * 0.875);
3605
+ --text-lg: calc(var(--ax-sys-text-lg-base) * 8 / 9);
3606
+ --text-xl: calc(var(--ax-sys-text-xl-base) * 0.9);
3305
3607
 
3306
3608
  /* Line Heights */
3307
- --leading-3: 0.875rem;
3308
- --leading-4: 1rem;
3309
- --leading-5: 1.125rem;
3310
- --leading-6: 1.375rem;
3609
+ --leading-3: calc(var(--ax-sys-leading-3-base) * 7 / 6);
3610
+ --leading-4: var(--ax-sys-leading-4-base);
3611
+ --leading-5: calc(var(--ax-sys-leading-5-base) * 0.9);
3612
+ --leading-6: calc(var(--ax-sys-leading-6-base) * 11 / 12);
3311
3613
  }
3312
3614
 
3313
3615
  @utility ax-md {
3314
- /* Tailwind Default Scale */
3315
- --spacing: 0.25rem;
3616
+ --ax-sys-size: ax-md;
3617
+ /* Control height — 40px */
3618
+ --ax-sys-size-base: var(--ax-sys-size-md);
3619
+
3620
+ /* Standard Tailwind scale — spacing unit 4px */
3621
+ --spacing: var(--ax-sys-spacing-base);
3622
+ /* Border radius — 8px */
3623
+ --ax-sys-border-radius: var(--ax-sys-border-radius-base);
3316
3624
 
3317
- /* 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;
3625
+ /* Typography — standard Tailwind */
3626
+ --text-xs: var(--ax-sys-text-xs-base);
3627
+ --text-sm: var(--ax-sys-text-sm-base);
3628
+ --text-base: var(--ax-sys-body-font-size);
3629
+ --text-lg: var(--ax-sys-text-lg-base);
3630
+ --text-xl: var(--ax-sys-text-xl-base);
3323
3631
 
3324
3632
  /* Line Heights */
3325
- --leading-3: 0.75rem;
3326
- --leading-4: 1rem;
3327
- --leading-5: 1.25rem;
3328
- --leading-6: 1.5rem;
3633
+ --leading-3: var(--ax-sys-leading-3-base);
3634
+ --leading-4: var(--ax-sys-leading-4-base);
3635
+ --leading-5: var(--ax-sys-leading-5-base);
3636
+ --leading-6: var(--ax-sys-leading-6-base);
3329
3637
  }
3330
3638
 
3331
3639
  @utility ax-lg {
3332
- /* Spacing */
3333
- --spacing: 0.3125rem;
3640
+ --ax-sys-size: ax-lg;
3641
+ /* Control height — 48px (md + 8px) */
3642
+ --ax-sys-size-base: calc(var(--ax-sys-size-md) + var(--ax-sys-size-step));
3643
+
3644
+ /* Spacing — unit 5px */
3645
+ --spacing: calc(var(--ax-sys-spacing-base) + 0.25 * var(--ax-sys-padding-step));
3646
+ /* Border radius — 8px (same as md) */
3647
+ --ax-sys-border-radius: var(--ax-sys-border-radius-base);
3334
3648
 
3335
- /* 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;
3649
+ /* Typography — scaled up from standard Tailwind (preserves relative scale) */
3650
+ --text-xs: calc(var(--ax-sys-text-xs-base) * 13 / 12);
3651
+ --text-sm: calc(var(--ax-sys-text-sm-base) * 15 / 14);
3652
+ --text-base: calc(var(--ax-sys-body-font-size) * 17 / 16);
3653
+ --text-lg: calc(var(--ax-sys-text-lg-base) * 10 / 9);
3654
+ --text-xl: calc(var(--ax-sys-text-xl-base) * 1.1);
3341
3655
 
3342
3656
  /* Line Heights */
3343
- --leading-3: 1rem;
3344
- --leading-4: 1.125rem;
3345
- --leading-5: 1.375rem;
3346
- --leading-6: 1.625rem;
3657
+ --leading-3: calc(var(--ax-sys-leading-3-base) * 4 / 3);
3658
+ --leading-4: calc(var(--ax-sys-leading-4-base) * 1.125);
3659
+ --leading-5: calc(var(--ax-sys-leading-5-base) * 1.1);
3660
+ --leading-6: calc(var(--ax-sys-leading-6-base) * 13 / 12);
3347
3661
  }
3348
3662
 
3349
3663
  @utility ax-xl {
3350
- /* Spacing */
3351
- --spacing: 0.375rem;
3664
+ --ax-sys-size: ax-xl;
3665
+ /* Control height — 56px (md + 16px) */
3666
+ --ax-sys-size-base: calc(var(--ax-sys-size-md) + 2 * var(--ax-sys-size-step));
3667
+
3668
+ /* Spacing — unit 6px */
3669
+ --spacing: calc(var(--ax-sys-spacing-base) + 0.5 * var(--ax-sys-padding-step));
3670
+ /* Border radius — 8px (same as md) */
3671
+ --ax-sys-border-radius: var(--ax-sys-border-radius-base);
3352
3672
 
3353
- /* 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;
3673
+ /* Typography — scaled up from standard Tailwind (preserves relative scale) */
3674
+ --text-xs: calc(var(--ax-sys-text-xs-base) * 7 / 6);
3675
+ --text-sm: calc(var(--ax-sys-text-sm-base) * 8 / 7);
3676
+ --text-base: calc(var(--ax-sys-body-font-size) * 1.125);
3677
+ --text-lg: calc(var(--ax-sys-text-lg-base) * 11 / 9);
3678
+ --text-xl: calc(var(--ax-sys-text-xl-base) * 1.2);
3359
3679
 
3360
3680
  /* Line Heights */
3361
- --leading-3: 1.125rem;
3362
- --leading-4: 1.25rem;
3363
- --leading-5: 1.5rem;
3364
- --leading-6: 1.75rem;
3681
+ --leading-3: calc(var(--ax-sys-leading-3-base) * 1.5);
3682
+ --leading-4: calc(var(--ax-sys-leading-4-base) * 1.25);
3683
+ --leading-5: calc(var(--ax-sys-leading-5-base) * 1.2);
3684
+ --leading-6: calc(var(--ax-sys-leading-6-base) * 7 / 6);
3365
3685
  }