@acorex/styles 21.0.3-next.20 → 21.0.3-next.22

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 (2) hide show
  1. package/package.json +1 -1
  2. package/themes/default.css +171 -44
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "21.0.3-next.20",
3
+ "version": "21.0.3-next.22",
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
 
@@ -607,7 +607,6 @@ html.ax-dark {
607
607
  --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);
608
608
  }
609
609
 
610
- :root.ax-dark,
611
610
  .ax-dark {
612
611
  --ax-sys-theme-isDark: 1;
613
612
  --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-darker-surface));
@@ -1138,13 +1137,161 @@ html.ax-dark {
1138
1137
  --ax-sys-color-border-default: var(--ax-sys-color-border-darkest-surface);
1139
1138
  }
1140
1139
 
1141
- @theme inline {
1140
+ /*
1141
+ * Re-declare light theme primitives and Tailwind color aliases for the `.ax-light` subtree.
1142
+ * Mirrors the `.ax-dark` override pattern so localized light zones work inside a dark page.
1143
+ */
1144
+ .ax-dark .ax-light {
1145
+ --ax-sys-theme-isDark: 0;
1146
+ --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-light-surface));
1147
+ --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-darkest-surface));
1148
+
1149
+ --ax-sys-color-lightest-surface: 255, 255, 255;
1150
+ --ax-sys-color-on-lightest-surface: 10, 10, 10;
1151
+ --ax-sys-color-border-lightest-surface: 233, 233, 233;
1152
+ --ax-sys-color-lighter-surface: 250, 250, 250;
1153
+ --ax-sys-color-on-lighter-surface: 10, 10, 10;
1154
+ --ax-sys-color-border-lighter-surface: 228, 228, 228;
1155
+ --ax-sys-color-light-surface: 245, 245, 245;
1156
+ --ax-sys-color-on-light-surface: 10, 10, 10;
1157
+ --ax-sys-color-border-light-surface: 223, 223, 223;
1158
+ --ax-sys-color-surface: 240, 240, 241;
1159
+ --ax-sys-color-on-surface: 10, 10, 10;
1160
+ --ax-sys-color-border-surface: 218, 218, 218;
1161
+ --ax-sys-color-dark-surface: 235, 235, 236;
1162
+ --ax-sys-color-on-dark-surface: 10, 10, 10;
1163
+ --ax-sys-color-border-dark-surface: 213, 213, 213;
1164
+ --ax-sys-color-darker-surface: 230, 230, 231;
1165
+ --ax-sys-color-on-darker-surface: 10, 10, 10;
1166
+ --ax-sys-color-border-darker-surface: 208, 208, 208;
1167
+ --ax-sys-color-darkest-surface: 224, 224, 225;
1168
+ --ax-sys-color-on-darkest-surface: 10, 10, 10;
1169
+ --ax-sys-color-border-darkest-surface: 202, 202, 202;
1170
+
1171
+ --ax-sys-color-primary-50: 231, 246, 255;
1172
+ --ax-sys-color-primary-100: 211, 234, 255;
1173
+ --ax-sys-color-primary-200: 183, 217, 255;
1174
+ --ax-sys-color-primary-300: 138, 189, 255;
1175
+ --ax-sys-color-primary-400: 77, 151, 255;
1176
+ --ax-sys-color-primary-500: 43, 127, 255;
1177
+ --ax-sys-color-primary-600: 20, 108, 235;
1178
+ --ax-sys-color-primary-700: 0, 86, 210;
1179
+ --ax-sys-color-primary-800: 12, 70, 182;
1180
+ --ax-sys-color-primary-900: 29, 64, 142;
1181
+ --ax-sys-color-primary-950: 14, 34, 84;
1182
+
1183
+ --ax-sys-color-primary-lightest-surface: 211, 234, 255;
1184
+ --ax-sys-color-on-primary-lightest-surface: 29, 48, 64;
1185
+ --ax-sys-color-border-primary-lightest-surface: 175, 217, 255;
1186
+ --ax-sys-color-primary-lighter-surface: 183, 217, 255;
1187
+ --ax-sys-color-on-primary-lighter-surface: 18, 47, 77;
1188
+ --ax-sys-color-border-primary-lighter-surface: 147, 198, 255;
1189
+ --ax-sys-color-primary-light-surface: 138, 189, 255;
1190
+ --ax-sys-color-on-primary-light-surface: 0, 44, 98;
1191
+ --ax-sys-color-border-primary-light-surface: 102, 169, 255;
1192
+ --ax-sys-color-primary-surface: 43, 127, 255;
1193
+ --ax-sys-color-on-primary-surface: 244, 254, 255;
1194
+ --ax-sys-color-border-primary-surface: 7, 105, 255;
1195
+ --ax-sys-color-primary-dark-surface: 20, 108, 235;
1196
+ --ax-sys-color-on-primary-dark-surface: 244, 254, 255;
1197
+ --ax-sys-color-border-primary-dark-surface: 17, 93, 202;
1198
+ --ax-sys-color-primary-darker-surface: 0, 86, 210;
1199
+ --ax-sys-color-on-primary-darker-surface: 245, 254, 255;
1200
+ --ax-sys-color-border-primary-darker-surface: 0, 71, 174;
1201
+ --ax-sys-color-primary-darkest-surface: 12, 70, 182;
1202
+ --ax-sys-color-on-primary-darkest-surface: 245, 254, 255;
1203
+ --ax-sys-color-border-primary-darkest-surface: 10, 57, 149;
1204
+
1205
+ --ax-sys-color-bg-default: var(--ax-sys-color-lightest-surface);
1206
+ --ax-sys-color-text-default: var(--ax-sys-color-on-lightest-surface);
1207
+ --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);
1208
+
1142
1209
  --color-bg-default: rgba(var(--ax-sys-color-bg-default));
1143
1210
  --color-text-default: rgba(var(--ax-sys-color-text-default));
1144
1211
  --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;
1212
+
1213
+ --color-lightest: rgba(var(--ax-sys-color-lightest-surface));
1214
+ --color-on-lightest: rgba(var(--ax-sys-color-on-lightest-surface));
1215
+ --color-border-lightest: rgba(var(--ax-sys-color-border-lightest-surface));
1216
+ --color-lighter: rgba(var(--ax-sys-color-lighter-surface));
1217
+ --color-on-lighter: rgba(var(--ax-sys-color-on-lighter-surface));
1218
+ --color-border-lighter: rgba(var(--ax-sys-color-border-lighter-surface));
1219
+ --color-light: rgba(var(--ax-sys-color-light-surface));
1220
+ --color-on-light: rgba(var(--ax-sys-color-on-light-surface));
1221
+ --color-border-light: rgba(var(--ax-sys-color-border-light-surface));
1222
+ --color-surface: rgba(var(--ax-sys-color-surface));
1223
+ --color-on-surface: rgba(var(--ax-sys-color-on-surface));
1224
+ --color-border-surface: rgba(var(--ax-sys-color-border-surface));
1225
+ --color-dark: rgba(var(--ax-sys-color-dark-surface));
1226
+ --color-on-dark: rgba(var(--ax-sys-color-on-dark-surface));
1227
+ --color-border-dark: rgba(var(--ax-sys-color-border-dark-surface));
1228
+ --color-darker: rgba(var(--ax-sys-color-darker-surface));
1229
+ --color-on-darker: rgba(var(--ax-sys-color-on-darker-surface));
1230
+ --color-border-darker: rgba(var(--ax-sys-color-border-darker-surface));
1231
+ --color-darkest: rgba(var(--ax-sys-color-darkest-surface));
1232
+ --color-on-darkest: rgba(var(--ax-sys-color-on-darkest-surface));
1233
+ --color-border-darkest: rgba(var(--ax-sys-color-border-darkest-surface));
1234
+
1235
+ --color-primary: rgba(var(--ax-sys-color-primary-surface));
1236
+ --color-primary-50: rgba(var(--ax-sys-color-primary-50));
1237
+ --color-primary-100: rgba(var(--ax-sys-color-primary-100));
1238
+ --color-primary-200: rgba(var(--ax-sys-color-primary-200));
1239
+ --color-primary-300: rgba(var(--ax-sys-color-primary-300));
1240
+ --color-primary-400: rgba(var(--ax-sys-color-primary-400));
1241
+ --color-primary-500: rgba(var(--ax-sys-color-primary-500));
1242
+ --color-primary-600: rgba(var(--ax-sys-color-primary-600));
1243
+ --color-primary-700: rgba(var(--ax-sys-color-primary-700));
1244
+ --color-primary-800: rgba(var(--ax-sys-color-primary-800));
1245
+ --color-primary-900: rgba(var(--ax-sys-color-primary-900));
1246
+ --color-primary-950: rgba(var(--ax-sys-color-primary-950));
1247
+ --color-primary-lightest: rgba(var(--ax-sys-color-primary-lightest-surface));
1248
+ --color-on-primary-lightest: rgba(var(--ax-sys-color-on-primary-lightest-surface));
1249
+ --color-border-primary-lightest: rgba(var(--ax-sys-color-border-primary-lightest-surface));
1250
+ --color-primary-lighter: rgba(var(--ax-sys-color-primary-lighter-surface));
1251
+ --color-on-primary-lighter: rgba(var(--ax-sys-color-on-primary-lighter-surface));
1252
+ --color-border-primary-lighter: rgba(var(--ax-sys-color-border-primary-lighter-surface));
1253
+ --color-primary-light: rgba(var(--ax-sys-color-primary-light-surface));
1254
+ --color-on-primary-light: rgba(var(--ax-sys-color-on-primary-light-surface));
1255
+ --color-border-primary-light: rgba(var(--ax-sys-color-border-primary-light-surface));
1256
+ --color-on-primary: rgba(var(--ax-sys-color-on-primary-surface));
1257
+ --color-border-primary: rgba(var(--ax-sys-color-border-primary-surface));
1258
+ --color-primary-dark: rgba(var(--ax-sys-color-primary-dark-surface));
1259
+ --color-on-primary-dark: rgba(var(--ax-sys-color-on-primary-dark-surface));
1260
+ --color-border-primary-dark: rgba(var(--ax-sys-color-border-primary-dark-surface));
1261
+ --color-primary-darker: rgba(var(--ax-sys-color-primary-darker-surface));
1262
+ --color-on-primary-darker: rgba(var(--ax-sys-color-on-primary-darker-surface));
1263
+ --color-border-primary-darker: rgba(var(--ax-sys-color-border-primary-darker-surface));
1264
+ --color-primary-darkest: rgba(var(--ax-sys-color-primary-darkest-surface));
1265
+ --color-on-primary-darkest: rgba(var(--ax-sys-color-on-primary-darkest-surface));
1266
+ --color-border-primary-darkest: rgba(var(--ax-sys-color-border-primary-darkest-surface));
1267
+ }
1268
+
1269
+ /*
1270
+ * Re-declare every Tailwind theme color alias for the `.ax-dark` subtree.
1271
+ *
1272
+ * Why this exists:
1273
+ * `@theme { --color-lightest: rgba(var(--ax-sys-color-lightest-surface)); ... }`
1274
+ * is emitted by Tailwind only on `:root`. Per the CSS spec, the inner
1275
+ * `var(--ax-sys-color-*)` references are substituted at computed-value time
1276
+ * on the declaring element (`:root`), so the resolved alias values are baked
1277
+ * to the LIGHT primitives and inherited downward unchanged.
1278
+ *
1279
+ * Result: a sub-tree `.ax-dark` flips the `--ax-sys-color-*` primitives but
1280
+ * the `--color-*` aliases (consumed by Tailwind utilities like `bg-lightest`,
1281
+ * `text-on-surface`, `border-default`) stay light, and a localized dark zone
1282
+ * inside an otherwise light page does not actually go dark.
1283
+ *
1284
+ * This block re-declares the aliases on `.ax-dark` so they are recomputed
1285
+ * against the dark primitives wherever `.ax-dark` appears in the DOM.
1286
+ * Pure static aliases (`--radius-default`, `--breakpoint-*`) are intentionally
1287
+ * omitted because they do not depend on `--ax-sys-color-*`.
1288
+ */
1289
+ .ax-dark {
1290
+ --ax-sys-theme-isDark: 1;
1291
+ --color-bg-default: rgba(var(--ax-sys-color-bg-default));
1292
+ --color-text-default: rgba(var(--ax-sys-color-text-default));
1293
+ --color-border-default: rgba(var(--ax-sys-color-border-default));
1294
+
1148
1295
  /* Surface Surfaces */
1149
1296
  --color-surface: rgba(var(--ax-sys-color-surface));
1150
1297
  --color-surface-50: rgba(var(--ax-sys-color-surface-50));
@@ -1168,7 +1315,6 @@ html.ax-dark {
1168
1315
  --color-light: rgba(var(--ax-sys-color-light-surface));
1169
1316
  --color-on-light: rgba(var(--ax-sys-color-on-light-surface));
1170
1317
  --color-border-light: rgba(var(--ax-sys-color-border-light-surface));
1171
- --color-surface: rgba(var(--ax-sys-color-surface));
1172
1318
  --color-on-surface: rgba(var(--ax-sys-color-on-surface));
1173
1319
  --color-border-surface: rgba(var(--ax-sys-color-border-surface));
1174
1320
  --color-dark: rgba(var(--ax-sys-color-dark-surface));
@@ -1180,6 +1326,7 @@ html.ax-dark {
1180
1326
  --color-darkest: rgba(var(--ax-sys-color-darkest-surface));
1181
1327
  --color-on-darkest: rgba(var(--ax-sys-color-on-darkest-surface));
1182
1328
  --color-border-darkest: rgba(var(--ax-sys-color-border-darkest-surface));
1329
+
1183
1330
  /* Primary Surfaces */
1184
1331
  --color-primary: rgba(var(--ax-sys-color-primary-surface));
1185
1332
  --color-primary-50: rgba(var(--ax-sys-color-primary-50));
@@ -1203,7 +1350,6 @@ html.ax-dark {
1203
1350
  --color-primary-light: rgba(var(--ax-sys-color-primary-light-surface));
1204
1351
  --color-on-primary-light: rgba(var(--ax-sys-color-on-primary-light-surface));
1205
1352
  --color-border-primary-light: rgba(var(--ax-sys-color-border-primary-light-surface));
1206
- --color-primary: rgba(var(--ax-sys-color-primary-surface));
1207
1353
  --color-on-primary: rgba(var(--ax-sys-color-on-primary-surface));
1208
1354
  --color-border-primary: rgba(var(--ax-sys-color-border-primary-surface));
1209
1355
  --color-primary-dark: rgba(var(--ax-sys-color-primary-dark-surface));
@@ -1239,7 +1385,6 @@ html.ax-dark {
1239
1385
  --color-secondary-light: rgba(var(--ax-sys-color-secondary-light-surface));
1240
1386
  --color-on-secondary-light: rgba(var(--ax-sys-color-on-secondary-light-surface));
1241
1387
  --color-border-secondary-light: rgba(var(--ax-sys-color-border-secondary-light-surface));
1242
- --color-secondary: rgba(var(--ax-sys-color-secondary-surface));
1243
1388
  --color-on-secondary: rgba(var(--ax-sys-color-on-secondary-surface));
1244
1389
  --color-border-secondary: rgba(var(--ax-sys-color-border-secondary-surface));
1245
1390
  --color-secondary-dark: rgba(var(--ax-sys-color-secondary-dark-surface));
@@ -1275,7 +1420,6 @@ html.ax-dark {
1275
1420
  --color-success-light: rgba(var(--ax-sys-color-success-light-surface));
1276
1421
  --color-on-success-light: rgba(var(--ax-sys-color-on-success-light-surface));
1277
1422
  --color-border-success-light: rgba(var(--ax-sys-color-border-success-light-surface));
1278
- --color-success: rgba(var(--ax-sys-color-success-surface));
1279
1423
  --color-on-success: rgba(var(--ax-sys-color-on-success-surface));
1280
1424
  --color-border-success: rgba(var(--ax-sys-color-border-success-surface));
1281
1425
  --color-success-dark: rgba(var(--ax-sys-color-success-dark-surface));
@@ -1311,7 +1455,6 @@ html.ax-dark {
1311
1455
  --color-warning-light: rgba(var(--ax-sys-color-warning-light-surface));
1312
1456
  --color-on-warning-light: rgba(var(--ax-sys-color-on-warning-light-surface));
1313
1457
  --color-border-warning-light: rgba(var(--ax-sys-color-border-warning-light-surface));
1314
- --color-warning: rgba(var(--ax-sys-color-warning-surface));
1315
1458
  --color-on-warning: rgba(var(--ax-sys-color-on-warning-surface));
1316
1459
  --color-border-warning: rgba(var(--ax-sys-color-border-warning-surface));
1317
1460
  --color-warning-dark: rgba(var(--ax-sys-color-warning-dark-surface));
@@ -1347,7 +1490,6 @@ html.ax-dark {
1347
1490
  --color-danger-light: rgba(var(--ax-sys-color-danger-light-surface));
1348
1491
  --color-on-danger-light: rgba(var(--ax-sys-color-on-danger-light-surface));
1349
1492
  --color-border-danger-light: rgba(var(--ax-sys-color-border-danger-light-surface));
1350
- --color-danger: rgba(var(--ax-sys-color-danger-surface));
1351
1493
  --color-on-danger: rgba(var(--ax-sys-color-on-danger-surface));
1352
1494
  --color-border-danger: rgba(var(--ax-sys-color-border-danger-surface));
1353
1495
  --color-danger-dark: rgba(var(--ax-sys-color-danger-dark-surface));
@@ -1383,7 +1525,6 @@ html.ax-dark {
1383
1525
  --color-accent-light: rgba(var(--ax-sys-color-accent-light-surface));
1384
1526
  --color-on-accent-light: rgba(var(--ax-sys-color-on-accent-light-surface));
1385
1527
  --color-border-accent-light: rgba(var(--ax-sys-color-border-accent-light-surface));
1386
- --color-accent: rgba(var(--ax-sys-color-accent-surface));
1387
1528
  --color-on-accent: rgba(var(--ax-sys-color-on-accent-surface));
1388
1529
  --color-border-accent: rgba(var(--ax-sys-color-border-accent-surface));
1389
1530
  --color-accent-dark: rgba(var(--ax-sys-color-accent-dark-surface));
@@ -1419,7 +1560,6 @@ html.ax-dark {
1419
1560
  --color-accent1-light: rgba(var(--ax-sys-color-accent1-light-surface));
1420
1561
  --color-on-accent1-light: rgba(var(--ax-sys-color-on-accent1-light-surface));
1421
1562
  --color-border-accent1-light: rgba(var(--ax-sys-color-border-accent1-light-surface));
1422
- --color-accent1: rgba(var(--ax-sys-color-accent1-surface));
1423
1563
  --color-on-accent1: rgba(var(--ax-sys-color-on-accent1-surface));
1424
1564
  --color-border-accent1: rgba(var(--ax-sys-color-border-accent1-surface));
1425
1565
  --color-accent1-dark: rgba(var(--ax-sys-color-accent1-dark-surface));
@@ -1455,7 +1595,6 @@ html.ax-dark {
1455
1595
  --color-accent2-light: rgba(var(--ax-sys-color-accent2-light-surface));
1456
1596
  --color-on-accent2-light: rgba(var(--ax-sys-color-on-accent2-light-surface));
1457
1597
  --color-border-accent2-light: rgba(var(--ax-sys-color-border-accent2-light-surface));
1458
- --color-accent2: rgba(var(--ax-sys-color-accent2-surface));
1459
1598
  --color-on-accent2: rgba(var(--ax-sys-color-on-accent2-surface));
1460
1599
  --color-border-accent2: rgba(var(--ax-sys-color-border-accent2-surface));
1461
1600
  --color-accent2-dark: rgba(var(--ax-sys-color-accent2-dark-surface));
@@ -1491,7 +1630,6 @@ html.ax-dark {
1491
1630
  --color-accent3-light: rgba(var(--ax-sys-color-accent3-light-surface));
1492
1631
  --color-on-accent3-light: rgba(var(--ax-sys-color-on-accent3-light-surface));
1493
1632
  --color-border-accent3-light: rgba(var(--ax-sys-color-border-accent3-light-surface));
1494
- --color-accent3: rgba(var(--ax-sys-color-accent3-surface));
1495
1633
  --color-on-accent3: rgba(var(--ax-sys-color-on-accent3-surface));
1496
1634
  --color-border-accent3: rgba(var(--ax-sys-color-border-accent3-surface));
1497
1635
  --color-accent3-dark: rgba(var(--ax-sys-color-accent3-dark-surface));
@@ -1527,7 +1665,6 @@ html.ax-dark {
1527
1665
  --color-accent4-light: rgba(var(--ax-sys-color-accent4-light-surface));
1528
1666
  --color-on-accent4-light: rgba(var(--ax-sys-color-on-accent4-light-surface));
1529
1667
  --color-border-accent4-light: rgba(var(--ax-sys-color-border-accent4-light-surface));
1530
- --color-accent4: rgba(var(--ax-sys-color-accent4-surface));
1531
1668
  --color-on-accent4: rgba(var(--ax-sys-color-on-accent4-surface));
1532
1669
  --color-border-accent4: rgba(var(--ax-sys-color-border-accent4-surface));
1533
1670
  --color-accent4-dark: rgba(var(--ax-sys-color-accent4-dark-surface));
@@ -1563,7 +1700,6 @@ html.ax-dark {
1563
1700
  --color-accent5-light: rgba(var(--ax-sys-color-accent5-light-surface));
1564
1701
  --color-on-accent5-light: rgba(var(--ax-sys-color-on-accent5-light-surface));
1565
1702
  --color-border-accent5-light: rgba(var(--ax-sys-color-border-accent5-light-surface));
1566
- --color-accent5: rgba(var(--ax-sys-color-accent5-surface));
1567
1703
  --color-on-accent5: rgba(var(--ax-sys-color-on-accent5-surface));
1568
1704
  --color-border-accent5: rgba(var(--ax-sys-color-border-accent5-surface));
1569
1705
  --color-accent5-dark: rgba(var(--ax-sys-color-accent5-dark-surface));
@@ -1599,7 +1735,6 @@ html.ax-dark {
1599
1735
  --color-accent6-light: rgba(var(--ax-sys-color-accent6-light-surface));
1600
1736
  --color-on-accent6-light: rgba(var(--ax-sys-color-on-accent6-light-surface));
1601
1737
  --color-border-accent6-light: rgba(var(--ax-sys-color-border-accent6-light-surface));
1602
- --color-accent6: rgba(var(--ax-sys-color-accent6-surface));
1603
1738
  --color-on-accent6: rgba(var(--ax-sys-color-on-accent6-surface));
1604
1739
  --color-border-accent6: rgba(var(--ax-sys-color-border-accent6-surface));
1605
1740
  --color-accent6-dark: rgba(var(--ax-sys-color-accent6-dark-surface));
@@ -1613,33 +1748,13 @@ html.ax-dark {
1613
1748
  --color-border-accent6-darkest: rgba(var(--ax-sys-color-border-accent6-darkest-surface));
1614
1749
  }
1615
1750
 
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;
1751
+ @theme inline {
1639
1752
  --color-bg-default: rgba(var(--ax-sys-color-bg-default));
1640
1753
  --color-text-default: rgba(var(--ax-sys-color-text-default));
1641
1754
  --color-border-default: rgba(var(--ax-sys-color-border-default));
1642
-
1755
+ --radius-default: var(--ax-sys-border-radius);
1756
+ --breakpoint-3xl: 1920px;
1757
+ --breakpoint-4xl: 2560px;
1643
1758
  /* Surface Surfaces */
1644
1759
  --color-surface: rgba(var(--ax-sys-color-surface));
1645
1760
  --color-surface-50: rgba(var(--ax-sys-color-surface-50));
@@ -1663,6 +1778,7 @@ html.ax-dark {
1663
1778
  --color-light: rgba(var(--ax-sys-color-light-surface));
1664
1779
  --color-on-light: rgba(var(--ax-sys-color-on-light-surface));
1665
1780
  --color-border-light: rgba(var(--ax-sys-color-border-light-surface));
1781
+ --color-surface: rgba(var(--ax-sys-color-surface));
1666
1782
  --color-on-surface: rgba(var(--ax-sys-color-on-surface));
1667
1783
  --color-border-surface: rgba(var(--ax-sys-color-border-surface));
1668
1784
  --color-dark: rgba(var(--ax-sys-color-dark-surface));
@@ -1674,7 +1790,6 @@ html.ax-dark {
1674
1790
  --color-darkest: rgba(var(--ax-sys-color-darkest-surface));
1675
1791
  --color-on-darkest: rgba(var(--ax-sys-color-on-darkest-surface));
1676
1792
  --color-border-darkest: rgba(var(--ax-sys-color-border-darkest-surface));
1677
-
1678
1793
  /* Primary Surfaces */
1679
1794
  --color-primary: rgba(var(--ax-sys-color-primary-surface));
1680
1795
  --color-primary-50: rgba(var(--ax-sys-color-primary-50));
@@ -1698,6 +1813,7 @@ html.ax-dark {
1698
1813
  --color-primary-light: rgba(var(--ax-sys-color-primary-light-surface));
1699
1814
  --color-on-primary-light: rgba(var(--ax-sys-color-on-primary-light-surface));
1700
1815
  --color-border-primary-light: rgba(var(--ax-sys-color-border-primary-light-surface));
1816
+ --color-primary: rgba(var(--ax-sys-color-primary-surface));
1701
1817
  --color-on-primary: rgba(var(--ax-sys-color-on-primary-surface));
1702
1818
  --color-border-primary: rgba(var(--ax-sys-color-border-primary-surface));
1703
1819
  --color-primary-dark: rgba(var(--ax-sys-color-primary-dark-surface));
@@ -1733,6 +1849,7 @@ html.ax-dark {
1733
1849
  --color-secondary-light: rgba(var(--ax-sys-color-secondary-light-surface));
1734
1850
  --color-on-secondary-light: rgba(var(--ax-sys-color-on-secondary-light-surface));
1735
1851
  --color-border-secondary-light: rgba(var(--ax-sys-color-border-secondary-light-surface));
1852
+ --color-secondary: rgba(var(--ax-sys-color-secondary-surface));
1736
1853
  --color-on-secondary: rgba(var(--ax-sys-color-on-secondary-surface));
1737
1854
  --color-border-secondary: rgba(var(--ax-sys-color-border-secondary-surface));
1738
1855
  --color-secondary-dark: rgba(var(--ax-sys-color-secondary-dark-surface));
@@ -1768,6 +1885,7 @@ html.ax-dark {
1768
1885
  --color-success-light: rgba(var(--ax-sys-color-success-light-surface));
1769
1886
  --color-on-success-light: rgba(var(--ax-sys-color-on-success-light-surface));
1770
1887
  --color-border-success-light: rgba(var(--ax-sys-color-border-success-light-surface));
1888
+ --color-success: rgba(var(--ax-sys-color-success-surface));
1771
1889
  --color-on-success: rgba(var(--ax-sys-color-on-success-surface));
1772
1890
  --color-border-success: rgba(var(--ax-sys-color-border-success-surface));
1773
1891
  --color-success-dark: rgba(var(--ax-sys-color-success-dark-surface));
@@ -1803,6 +1921,7 @@ html.ax-dark {
1803
1921
  --color-warning-light: rgba(var(--ax-sys-color-warning-light-surface));
1804
1922
  --color-on-warning-light: rgba(var(--ax-sys-color-on-warning-light-surface));
1805
1923
  --color-border-warning-light: rgba(var(--ax-sys-color-border-warning-light-surface));
1924
+ --color-warning: rgba(var(--ax-sys-color-warning-surface));
1806
1925
  --color-on-warning: rgba(var(--ax-sys-color-on-warning-surface));
1807
1926
  --color-border-warning: rgba(var(--ax-sys-color-border-warning-surface));
1808
1927
  --color-warning-dark: rgba(var(--ax-sys-color-warning-dark-surface));
@@ -1838,6 +1957,7 @@ html.ax-dark {
1838
1957
  --color-danger-light: rgba(var(--ax-sys-color-danger-light-surface));
1839
1958
  --color-on-danger-light: rgba(var(--ax-sys-color-on-danger-light-surface));
1840
1959
  --color-border-danger-light: rgba(var(--ax-sys-color-border-danger-light-surface));
1960
+ --color-danger: rgba(var(--ax-sys-color-danger-surface));
1841
1961
  --color-on-danger: rgba(var(--ax-sys-color-on-danger-surface));
1842
1962
  --color-border-danger: rgba(var(--ax-sys-color-border-danger-surface));
1843
1963
  --color-danger-dark: rgba(var(--ax-sys-color-danger-dark-surface));
@@ -1873,6 +1993,7 @@ html.ax-dark {
1873
1993
  --color-accent-light: rgba(var(--ax-sys-color-accent-light-surface));
1874
1994
  --color-on-accent-light: rgba(var(--ax-sys-color-on-accent-light-surface));
1875
1995
  --color-border-accent-light: rgba(var(--ax-sys-color-border-accent-light-surface));
1996
+ --color-accent: rgba(var(--ax-sys-color-accent-surface));
1876
1997
  --color-on-accent: rgba(var(--ax-sys-color-on-accent-surface));
1877
1998
  --color-border-accent: rgba(var(--ax-sys-color-border-accent-surface));
1878
1999
  --color-accent-dark: rgba(var(--ax-sys-color-accent-dark-surface));
@@ -1908,6 +2029,7 @@ html.ax-dark {
1908
2029
  --color-accent1-light: rgba(var(--ax-sys-color-accent1-light-surface));
1909
2030
  --color-on-accent1-light: rgba(var(--ax-sys-color-on-accent1-light-surface));
1910
2031
  --color-border-accent1-light: rgba(var(--ax-sys-color-border-accent1-light-surface));
2032
+ --color-accent1: rgba(var(--ax-sys-color-accent1-surface));
1911
2033
  --color-on-accent1: rgba(var(--ax-sys-color-on-accent1-surface));
1912
2034
  --color-border-accent1: rgba(var(--ax-sys-color-border-accent1-surface));
1913
2035
  --color-accent1-dark: rgba(var(--ax-sys-color-accent1-dark-surface));
@@ -1943,6 +2065,7 @@ html.ax-dark {
1943
2065
  --color-accent2-light: rgba(var(--ax-sys-color-accent2-light-surface));
1944
2066
  --color-on-accent2-light: rgba(var(--ax-sys-color-on-accent2-light-surface));
1945
2067
  --color-border-accent2-light: rgba(var(--ax-sys-color-border-accent2-light-surface));
2068
+ --color-accent2: rgba(var(--ax-sys-color-accent2-surface));
1946
2069
  --color-on-accent2: rgba(var(--ax-sys-color-on-accent2-surface));
1947
2070
  --color-border-accent2: rgba(var(--ax-sys-color-border-accent2-surface));
1948
2071
  --color-accent2-dark: rgba(var(--ax-sys-color-accent2-dark-surface));
@@ -1978,6 +2101,7 @@ html.ax-dark {
1978
2101
  --color-accent3-light: rgba(var(--ax-sys-color-accent3-light-surface));
1979
2102
  --color-on-accent3-light: rgba(var(--ax-sys-color-on-accent3-light-surface));
1980
2103
  --color-border-accent3-light: rgba(var(--ax-sys-color-border-accent3-light-surface));
2104
+ --color-accent3: rgba(var(--ax-sys-color-accent3-surface));
1981
2105
  --color-on-accent3: rgba(var(--ax-sys-color-on-accent3-surface));
1982
2106
  --color-border-accent3: rgba(var(--ax-sys-color-border-accent3-surface));
1983
2107
  --color-accent3-dark: rgba(var(--ax-sys-color-accent3-dark-surface));
@@ -2013,6 +2137,7 @@ html.ax-dark {
2013
2137
  --color-accent4-light: rgba(var(--ax-sys-color-accent4-light-surface));
2014
2138
  --color-on-accent4-light: rgba(var(--ax-sys-color-on-accent4-light-surface));
2015
2139
  --color-border-accent4-light: rgba(var(--ax-sys-color-border-accent4-light-surface));
2140
+ --color-accent4: rgba(var(--ax-sys-color-accent4-surface));
2016
2141
  --color-on-accent4: rgba(var(--ax-sys-color-on-accent4-surface));
2017
2142
  --color-border-accent4: rgba(var(--ax-sys-color-border-accent4-surface));
2018
2143
  --color-accent4-dark: rgba(var(--ax-sys-color-accent4-dark-surface));
@@ -2048,6 +2173,7 @@ html.ax-dark {
2048
2173
  --color-accent5-light: rgba(var(--ax-sys-color-accent5-light-surface));
2049
2174
  --color-on-accent5-light: rgba(var(--ax-sys-color-on-accent5-light-surface));
2050
2175
  --color-border-accent5-light: rgba(var(--ax-sys-color-border-accent5-light-surface));
2176
+ --color-accent5: rgba(var(--ax-sys-color-accent5-surface));
2051
2177
  --color-on-accent5: rgba(var(--ax-sys-color-on-accent5-surface));
2052
2178
  --color-border-accent5: rgba(var(--ax-sys-color-border-accent5-surface));
2053
2179
  --color-accent5-dark: rgba(var(--ax-sys-color-accent5-dark-surface));
@@ -2083,6 +2209,7 @@ html.ax-dark {
2083
2209
  --color-accent6-light: rgba(var(--ax-sys-color-accent6-light-surface));
2084
2210
  --color-on-accent6-light: rgba(var(--ax-sys-color-on-accent6-light-surface));
2085
2211
  --color-border-accent6-light: rgba(var(--ax-sys-color-border-accent6-light-surface));
2212
+ --color-accent6: rgba(var(--ax-sys-color-accent6-surface));
2086
2213
  --color-on-accent6: rgba(var(--ax-sys-color-on-accent6-surface));
2087
2214
  --color-border-accent6: rgba(var(--ax-sys-color-border-accent6-surface));
2088
2215
  --color-accent6-dark: rgba(var(--ax-sys-color-accent6-dark-surface));