@helixui/tokens 3.2.0-next.100 → 3.2.0-next.104
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.
- package/dist/index.d.ts +24 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/tokens.css +20 -10
- package/dist/tokens.json +38 -14
- package/package.json +1 -1
- package/src/tokens.json +38 -14
package/dist/index.d.ts
CHANGED
|
@@ -403,6 +403,14 @@ export declare const tokens: {
|
|
|
403
403
|
value: string;
|
|
404
404
|
description: string;
|
|
405
405
|
};
|
|
406
|
+
"on-dark-overlay-default": {
|
|
407
|
+
value: string;
|
|
408
|
+
description: string;
|
|
409
|
+
};
|
|
410
|
+
"on-dark-overlay-subtle": {
|
|
411
|
+
value: string;
|
|
412
|
+
description: string;
|
|
413
|
+
};
|
|
406
414
|
};
|
|
407
415
|
border: {
|
|
408
416
|
default: {
|
|
@@ -1263,6 +1271,14 @@ export declare const tokens: {
|
|
|
1263
1271
|
overlay: {
|
|
1264
1272
|
value: string;
|
|
1265
1273
|
};
|
|
1274
|
+
"on-dark-overlay-default": {
|
|
1275
|
+
value: string;
|
|
1276
|
+
description: string;
|
|
1277
|
+
};
|
|
1278
|
+
"on-dark-overlay-subtle": {
|
|
1279
|
+
value: string;
|
|
1280
|
+
description: string;
|
|
1281
|
+
};
|
|
1266
1282
|
};
|
|
1267
1283
|
border: {
|
|
1268
1284
|
default: {
|
|
@@ -1555,6 +1571,14 @@ export declare const tokens: {
|
|
|
1555
1571
|
value: string;
|
|
1556
1572
|
description: string;
|
|
1557
1573
|
};
|
|
1574
|
+
"on-dark-overlay-default": {
|
|
1575
|
+
value: string;
|
|
1576
|
+
description: string;
|
|
1577
|
+
};
|
|
1578
|
+
"on-dark-overlay-subtle": {
|
|
1579
|
+
value: string;
|
|
1580
|
+
description: string;
|
|
1581
|
+
};
|
|
1558
1582
|
};
|
|
1559
1583
|
border: {
|
|
1560
1584
|
default: {
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,UAAU,EAAE,MAAM,YAAY,CAAC;AAE9D,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG9D,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,wBAAwB,GACzB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AA+C7E,yCAAyC;AACzC,eAAO,MAAM,MAAM
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,UAAU,EAAE,MAAM,YAAY,CAAC;AAE9D,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG9D,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,wBAAwB,GACzB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AA+C7E,yCAAyC;AACzC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAa,CAAC;AASjC,oEAAoE;AACpE,eAAO,MAAM,YAAY,EAAE,UAAU,EAA6B,CAAC;AAEnE,oDAAoD;AACpD,eAAO,MAAM,gBAAgB,EAAE,UAAU,EAEnC,CAAC;AAEP,wDAAwD;AACxD,eAAO,MAAM,wBAAwB,EAAE,UAAU,EAE3C,CAAC;AAEP,kDAAkD;AAClD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,CAAqC,CAAC;AAEhG,wCAAwC;AACxC,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAE3C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,MAAoC,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,MAAwC,CAAC;AAEpE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAgD,CAAC"}
|
package/dist/tokens.css
CHANGED
|
@@ -119,13 +119,15 @@
|
|
|
119
119
|
--hx-color-surface-warning-strong: var(--hx-color-warning-500);
|
|
120
120
|
--hx-color-surface-danger-strong: var(--hx-color-error-600);
|
|
121
121
|
--hx-color-surface-info-strong: var(--hx-color-primary-600);
|
|
122
|
+
--hx-color-surface-on-dark-overlay-default: var(--hx-overlay-white-30);
|
|
123
|
+
--hx-color-surface-on-dark-overlay-subtle: var(--hx-overlay-white-10);
|
|
122
124
|
--hx-color-border-default: var(--hx-color-neutral-200);
|
|
123
125
|
--hx-color-border-subtle: var(--hx-color-neutral-100);
|
|
124
126
|
--hx-color-border-strong: var(--hx-color-neutral-500);
|
|
125
127
|
--hx-color-border-focus: var(--hx-color-primary-500);
|
|
126
128
|
--hx-color-border-on-dark-strong: var(--hx-overlay-white-70);
|
|
127
|
-
--hx-color-border-on-dark-default: var(--hx-overlay-
|
|
128
|
-
--hx-color-border-on-dark-subtle: var(--hx-overlay-
|
|
129
|
+
--hx-color-border-on-dark-default: var(--hx-color-surface-on-dark-overlay-default);
|
|
130
|
+
--hx-color-border-on-dark-subtle: var(--hx-color-surface-on-dark-overlay-subtle);
|
|
129
131
|
--hx-color-focus-ring: var(--hx-color-primary-600);
|
|
130
132
|
--hx-color-selection-bg: var(--hx-color-primary-200);
|
|
131
133
|
--hx-color-selection-color: var(--hx-color-neutral-900);
|
|
@@ -368,13 +370,15 @@
|
|
|
368
370
|
--hx-color-surface-sunken: var(--hx-color-neutral-950);
|
|
369
371
|
--hx-color-surface-inverse: var(--hx-color-neutral-100);
|
|
370
372
|
--hx-color-surface-overlay: rgba(0, 0, 0, 0.85);
|
|
373
|
+
--hx-color-surface-on-dark-overlay-default: var(--hx-overlay-black-30);
|
|
374
|
+
--hx-color-surface-on-dark-overlay-subtle: var(--hx-overlay-black-10);
|
|
371
375
|
--hx-color-border-default: var(--hx-color-neutral-700);
|
|
372
376
|
--hx-color-border-subtle: var(--hx-color-neutral-800);
|
|
373
377
|
--hx-color-border-strong: var(--hx-color-neutral-400);
|
|
374
378
|
--hx-color-border-focus: var(--hx-color-primary-400);
|
|
375
379
|
--hx-color-border-on-dark-strong: var(--hx-overlay-black-50);
|
|
376
|
-
--hx-color-border-on-dark-default: var(--hx-overlay-
|
|
377
|
-
--hx-color-border-on-dark-subtle: var(--hx-overlay-
|
|
380
|
+
--hx-color-border-on-dark-default: var(--hx-color-surface-on-dark-overlay-default);
|
|
381
|
+
--hx-color-border-on-dark-subtle: var(--hx-color-surface-on-dark-overlay-subtle);
|
|
378
382
|
--hx-color-focus-ring: var(--hx-color-primary-400);
|
|
379
383
|
--hx-color-selection-bg: var(--hx-color-primary-800);
|
|
380
384
|
--hx-color-selection-color: var(--hx-color-neutral-100);
|
|
@@ -414,13 +418,15 @@
|
|
|
414
418
|
--hx-color-surface-sunken: var(--hx-color-neutral-950);
|
|
415
419
|
--hx-color-surface-inverse: var(--hx-color-neutral-100);
|
|
416
420
|
--hx-color-surface-overlay: rgba(0, 0, 0, 0.85);
|
|
421
|
+
--hx-color-surface-on-dark-overlay-default: var(--hx-overlay-black-30);
|
|
422
|
+
--hx-color-surface-on-dark-overlay-subtle: var(--hx-overlay-black-10);
|
|
417
423
|
--hx-color-border-default: var(--hx-color-neutral-700);
|
|
418
424
|
--hx-color-border-subtle: var(--hx-color-neutral-800);
|
|
419
425
|
--hx-color-border-strong: var(--hx-color-neutral-400);
|
|
420
426
|
--hx-color-border-focus: var(--hx-color-primary-400);
|
|
421
427
|
--hx-color-border-on-dark-strong: var(--hx-overlay-black-50);
|
|
422
|
-
--hx-color-border-on-dark-default: var(--hx-overlay-
|
|
423
|
-
--hx-color-border-on-dark-subtle: var(--hx-overlay-
|
|
428
|
+
--hx-color-border-on-dark-default: var(--hx-color-surface-on-dark-overlay-default);
|
|
429
|
+
--hx-color-border-on-dark-subtle: var(--hx-color-surface-on-dark-overlay-subtle);
|
|
424
430
|
--hx-color-focus-ring: var(--hx-color-primary-400);
|
|
425
431
|
--hx-color-selection-bg: var(--hx-color-primary-800);
|
|
426
432
|
--hx-color-selection-color: var(--hx-color-neutral-100);
|
|
@@ -486,13 +492,15 @@
|
|
|
486
492
|
--hx-color-surface-warning-strong: var(--hx-color-warning-500);
|
|
487
493
|
--hx-color-surface-danger-strong: var(--hx-color-error-500);
|
|
488
494
|
--hx-color-surface-info-strong: var(--hx-color-primary-500);
|
|
495
|
+
--hx-color-surface-on-dark-overlay-default: #FFFFFF;
|
|
496
|
+
--hx-color-surface-on-dark-overlay-subtle: #C0C0C0;
|
|
489
497
|
--hx-color-border-default: #FFFFFF;
|
|
490
498
|
--hx-color-border-subtle: #C0C0C0;
|
|
491
499
|
--hx-color-border-strong: #FFFFFF;
|
|
492
500
|
--hx-color-border-focus: #FFFF00;
|
|
493
501
|
--hx-color-border-on-dark-strong: #FFFFFF;
|
|
494
|
-
--hx-color-border-on-dark-default:
|
|
495
|
-
--hx-color-border-on-dark-subtle:
|
|
502
|
+
--hx-color-border-on-dark-default: var(--hx-color-surface-on-dark-overlay-default);
|
|
503
|
+
--hx-color-border-on-dark-subtle: var(--hx-color-surface-on-dark-overlay-subtle);
|
|
496
504
|
--hx-color-focus-ring: #FFFF00;
|
|
497
505
|
--hx-color-selection-bg: #1AEBFF;
|
|
498
506
|
--hx-color-selection-color: #000000;
|
|
@@ -562,13 +570,15 @@
|
|
|
562
570
|
--hx-color-surface-warning-strong: var(--hx-color-warning-500);
|
|
563
571
|
--hx-color-surface-danger-strong: var(--hx-color-error-500);
|
|
564
572
|
--hx-color-surface-info-strong: var(--hx-color-primary-500);
|
|
573
|
+
--hx-color-surface-on-dark-overlay-default: #FFFFFF;
|
|
574
|
+
--hx-color-surface-on-dark-overlay-subtle: #C0C0C0;
|
|
565
575
|
--hx-color-border-default: #FFFFFF;
|
|
566
576
|
--hx-color-border-subtle: #C0C0C0;
|
|
567
577
|
--hx-color-border-strong: #FFFFFF;
|
|
568
578
|
--hx-color-border-focus: #FFFF00;
|
|
569
579
|
--hx-color-border-on-dark-strong: #FFFFFF;
|
|
570
|
-
--hx-color-border-on-dark-default:
|
|
571
|
-
--hx-color-border-on-dark-subtle:
|
|
580
|
+
--hx-color-border-on-dark-default: var(--hx-color-surface-on-dark-overlay-default);
|
|
581
|
+
--hx-color-border-on-dark-subtle: var(--hx-color-surface-on-dark-overlay-subtle);
|
|
572
582
|
--hx-color-focus-ring: #FFFF00;
|
|
573
583
|
--hx-color-selection-bg: #1AEBFF;
|
|
574
584
|
--hx-color-selection-color: #000000;
|
package/dist/tokens.json
CHANGED
|
@@ -195,6 +195,14 @@
|
|
|
195
195
|
"info-strong": {
|
|
196
196
|
"value": "var(--hx-color-primary-600)",
|
|
197
197
|
"description": "Emphasis info surface for high-prominence components (e.g. hx-toast--info). Pairs with text.on-primary-strong (neutral-0, no dark-mode flip) for AA — neutral-0 on primary-600 (#0F7078) = 5.82:1. Do NOT pair with text.inverse: surface.info-strong itself does not dark-mode-flip (the value stays primary-600 in light and dark), but text.inverse does flip to neutral-900 in dark mode — pairing the two produces dark text on a dark fill (sub-AA). Tracks action.primary.bg-hover by value but exposed under surface.* so toasts/banners consume a surface semantic, not an action-state semantic."
|
|
198
|
+
},
|
|
199
|
+
"on-dark-overlay-default": {
|
|
200
|
+
"value": "var(--hx-overlay-white-30)",
|
|
201
|
+
"description": "Translucent fill on dark surfaces — the resting/hover background for inverted secondary, ghost, and tertiary buttons painted on surface.inverse (which is dark in light mode, light in dark mode). Renamed from border.on-dark-default in 3.2.2: it was always used as a fill, never a border, and its 30% alpha cannot honour WCAG 1.4.11 3:1 against either neutral-900 (2.07:1) or neutral-0 (1.30:1) — borders need higher alpha. As a fill, contrast is irrelevant: it tints, it doesn't delimit."
|
|
202
|
+
},
|
|
203
|
+
"on-dark-overlay-subtle": {
|
|
204
|
+
"value": "var(--hx-overlay-white-10)",
|
|
205
|
+
"description": "Lowest-emphasis translucent fill on dark surfaces — the resting background for inverted-tertiary buttons and inverted hover affordances on dark side-nav. Renamed from border.on-dark-subtle in 3.2.2 for the same reason as on-dark-overlay-default: it is a fill, not a border."
|
|
198
206
|
}
|
|
199
207
|
},
|
|
200
208
|
"border": {
|
|
@@ -207,15 +215,15 @@
|
|
|
207
215
|
"focus": { "value": "var(--hx-color-primary-500)" },
|
|
208
216
|
"on-dark-strong": {
|
|
209
217
|
"value": "var(--hx-overlay-white-70)",
|
|
210
|
-
"description": "Strong border treatment on dark surfaces (e.g. inverted button outlines on a dark page).
|
|
218
|
+
"description": "Strong border treatment on dark surfaces (e.g. inverted button outlines on a dark page). overlay-white-70 on neutral-900 ≈ 5.0:1 — clears WCAG 1.4.11 3:1 floor for non-text UI. Added in 3.2.1 alongside the action.* layer for the token-cascade remediation; only the strong tier survived the 3.2.2 audit because the lower-alpha siblings (overlay-white-30/10) cannot honour a border-contract — they were renamed to surface.on-dark-overlay-* (which is what they always were: translucent fills)."
|
|
211
219
|
},
|
|
212
220
|
"on-dark-default": {
|
|
213
|
-
"value": "var(--hx-overlay-
|
|
214
|
-
"description": "
|
|
221
|
+
"value": "var(--hx-color-surface-on-dark-overlay-default)",
|
|
222
|
+
"description": "DEPRECATED 3.2.2 — alias for surface.on-dark-overlay-default. Originally shipped 3.2.1 under the border.* family but it was always used as a translucent fill, never a border, and its 30% alpha cannot honour WCAG 1.4.11 3:1. Renamed to surface.on-dark-overlay-default in 3.2.2; this alias preserves the published CSS variable name (`--hx-color-border-on-dark-default`) for consumers who set it as a theme override. Scheduled for removal in 4.0.0."
|
|
215
223
|
},
|
|
216
224
|
"on-dark-subtle": {
|
|
217
|
-
"value": "var(--hx-overlay-
|
|
218
|
-
"description": "
|
|
225
|
+
"value": "var(--hx-color-surface-on-dark-overlay-subtle)",
|
|
226
|
+
"description": "DEPRECATED 3.2.2 — alias for surface.on-dark-overlay-subtle. Originally shipped 3.2.1 under the border.* family but it was always used as a translucent fill, never a border, and its 10% alpha cannot honour WCAG 1.4.11 3:1. Renamed to surface.on-dark-overlay-subtle in 3.2.2; this alias preserves the published CSS variable name (`--hx-color-border-on-dark-subtle`) for consumers who set it as a theme override. Scheduled for removal in 4.0.0."
|
|
219
227
|
}
|
|
220
228
|
},
|
|
221
229
|
"focus-ring": {
|
|
@@ -631,7 +639,15 @@
|
|
|
631
639
|
"raised": { "value": "var(--hx-color-neutral-800)" },
|
|
632
640
|
"sunken": { "value": "var(--hx-color-neutral-950)" },
|
|
633
641
|
"inverse": { "value": "var(--hx-color-neutral-100)" },
|
|
634
|
-
"overlay": { "value": "rgba(0, 0, 0, 0.85)" }
|
|
642
|
+
"overlay": { "value": "rgba(0, 0, 0, 0.85)" },
|
|
643
|
+
"on-dark-overlay-default": {
|
|
644
|
+
"value": "var(--hx-overlay-black-30)",
|
|
645
|
+
"description": "Dark-mode override. surface.inverse flips light (#EBEEE9) in dark mode, so the base overlay-white-30 binding tints white-on-light (~1.05:1) and disappears. overlay-black-30 tints dark-on-light against the now-light inverse surface and reads correctly."
|
|
646
|
+
},
|
|
647
|
+
"on-dark-overlay-subtle": {
|
|
648
|
+
"value": "var(--hx-overlay-black-10)",
|
|
649
|
+
"description": "Dark-mode override mirroring on-dark-overlay-default's flip rationale. Lowest-emphasis tint on the (now-light in dark mode) inverse surface."
|
|
650
|
+
}
|
|
635
651
|
},
|
|
636
652
|
"border": {
|
|
637
653
|
"default": { "value": "var(--hx-color-neutral-700)" },
|
|
@@ -646,12 +662,12 @@
|
|
|
646
662
|
"description": "Dark-mode override. surface.inverse flips light (#EBEEE9) in dark mode, so the original overlay-white-70 binding paints white-ish on light = 1.12:1 (invisible). overlay-black-50 over #EBEEE9 = 3.84:1, clears the WCAG 1.4.11 3:1 floor for inverted-mode button outlines and focus rings drawn on the (now-light) inverse surface. Symmetrical with the light-mode 70% intent: dark text on light reaches the equivalent perceptual strength at a lower alpha than light text on dark."
|
|
647
663
|
},
|
|
648
664
|
"on-dark-default": {
|
|
649
|
-
"value": "var(--hx-overlay-
|
|
650
|
-
"description": "
|
|
665
|
+
"value": "var(--hx-color-surface-on-dark-overlay-default)",
|
|
666
|
+
"description": "DEPRECATED 3.2.2 — dark-mode alias preserving the published `--hx-color-border-on-dark-default` for backwards compatibility. Resolves to the renamed surface.on-dark-overlay-default token in dark mode (overlay-black-30). Removal scheduled for 4.0.0."
|
|
651
667
|
},
|
|
652
668
|
"on-dark-subtle": {
|
|
653
|
-
"value": "var(--hx-overlay-
|
|
654
|
-
"description": "
|
|
669
|
+
"value": "var(--hx-color-surface-on-dark-overlay-subtle)",
|
|
670
|
+
"description": "DEPRECATED 3.2.2 — dark-mode alias preserving the published `--hx-color-border-on-dark-subtle` for backwards compatibility. Resolves to the renamed surface.on-dark-overlay-subtle token in dark mode (overlay-black-10). Removal scheduled for 4.0.0."
|
|
655
671
|
}
|
|
656
672
|
},
|
|
657
673
|
"focus-ring": { "value": "var(--hx-color-primary-400)" },
|
|
@@ -810,6 +826,14 @@
|
|
|
810
826
|
"info-strong": {
|
|
811
827
|
"value": "var(--hx-color-primary-500)",
|
|
812
828
|
"description": "HC override for surface.info-strong. Light/dark resolves to primary-600. HC primary-600 (#60A5FA) is defined but pinning to HC primary-500 (#3B82F6, 5.71:1 on #000) keeps the info-strong surface visually distinct from the primary-strong action layer. Pairs with text.inverse (HC = #000000) for 5.71:1 AA pass."
|
|
829
|
+
},
|
|
830
|
+
"on-dark-overlay-default": {
|
|
831
|
+
"value": "#FFFFFF",
|
|
832
|
+
"description": "HC override for surface.on-dark-overlay-default. Translucent overlays disappear on the HC canvas; pin to solid white so inverted-secondary/ghost hover fills remain visible. Pairs with text.inverse (HC = #000000) for 21:1 AAA when inverted controls are in their hover state."
|
|
833
|
+
},
|
|
834
|
+
"on-dark-overlay-subtle": {
|
|
835
|
+
"value": "#C0C0C0",
|
|
836
|
+
"description": "HC override for surface.on-dark-overlay-subtle. Pinned to neutral silver so the subtle inverted hover affordance remains distinguishable from the strong tier in HC."
|
|
813
837
|
}
|
|
814
838
|
},
|
|
815
839
|
"border": {
|
|
@@ -822,12 +846,12 @@
|
|
|
822
846
|
"description": "HC override for border.on-dark-strong. The base overlay-white-70 reads softly against translucent darks but is invisible against the HC #000 canvas — pin to solid #FFFFFF (21:1 on #000) so inverted button outlines remain visible in HC."
|
|
823
847
|
},
|
|
824
848
|
"on-dark-default": {
|
|
825
|
-
"value": "
|
|
826
|
-
"description": "HC
|
|
849
|
+
"value": "var(--hx-color-surface-on-dark-overlay-default)",
|
|
850
|
+
"description": "DEPRECATED 3.2.2 — HC alias preserving the published `--hx-color-border-on-dark-default` for backwards compatibility. Resolves to the renamed surface.on-dark-overlay-default token in HC mode (#FFFFFF). Removal scheduled for 4.0.0."
|
|
827
851
|
},
|
|
828
852
|
"on-dark-subtle": {
|
|
829
|
-
"value": "
|
|
830
|
-
"description": "HC
|
|
853
|
+
"value": "var(--hx-color-surface-on-dark-overlay-subtle)",
|
|
854
|
+
"description": "DEPRECATED 3.2.2 — HC alias preserving the published `--hx-color-border-on-dark-subtle` for backwards compatibility. Resolves to the renamed surface.on-dark-overlay-subtle token in HC mode (#C0C0C0). Removal scheduled for 4.0.0."
|
|
831
855
|
}
|
|
832
856
|
},
|
|
833
857
|
"focus-ring": { "value": "#FFFF00", "description": "High-visibility yellow focus ring" },
|
package/package.json
CHANGED
package/src/tokens.json
CHANGED
|
@@ -195,6 +195,14 @@
|
|
|
195
195
|
"info-strong": {
|
|
196
196
|
"value": "var(--hx-color-primary-600)",
|
|
197
197
|
"description": "Emphasis info surface for high-prominence components (e.g. hx-toast--info). Pairs with text.on-primary-strong (neutral-0, no dark-mode flip) for AA — neutral-0 on primary-600 (#0F7078) = 5.82:1. Do NOT pair with text.inverse: surface.info-strong itself does not dark-mode-flip (the value stays primary-600 in light and dark), but text.inverse does flip to neutral-900 in dark mode — pairing the two produces dark text on a dark fill (sub-AA). Tracks action.primary.bg-hover by value but exposed under surface.* so toasts/banners consume a surface semantic, not an action-state semantic."
|
|
198
|
+
},
|
|
199
|
+
"on-dark-overlay-default": {
|
|
200
|
+
"value": "var(--hx-overlay-white-30)",
|
|
201
|
+
"description": "Translucent fill on dark surfaces — the resting/hover background for inverted secondary, ghost, and tertiary buttons painted on surface.inverse (which is dark in light mode, light in dark mode). Renamed from border.on-dark-default in 3.2.2: it was always used as a fill, never a border, and its 30% alpha cannot honour WCAG 1.4.11 3:1 against either neutral-900 (2.07:1) or neutral-0 (1.30:1) — borders need higher alpha. As a fill, contrast is irrelevant: it tints, it doesn't delimit."
|
|
202
|
+
},
|
|
203
|
+
"on-dark-overlay-subtle": {
|
|
204
|
+
"value": "var(--hx-overlay-white-10)",
|
|
205
|
+
"description": "Lowest-emphasis translucent fill on dark surfaces — the resting background for inverted-tertiary buttons and inverted hover affordances on dark side-nav. Renamed from border.on-dark-subtle in 3.2.2 for the same reason as on-dark-overlay-default: it is a fill, not a border."
|
|
198
206
|
}
|
|
199
207
|
},
|
|
200
208
|
"border": {
|
|
@@ -207,15 +215,15 @@
|
|
|
207
215
|
"focus": { "value": "var(--hx-color-primary-500)" },
|
|
208
216
|
"on-dark-strong": {
|
|
209
217
|
"value": "var(--hx-overlay-white-70)",
|
|
210
|
-
"description": "Strong border treatment on dark surfaces (e.g. inverted button outlines on a dark page).
|
|
218
|
+
"description": "Strong border treatment on dark surfaces (e.g. inverted button outlines on a dark page). overlay-white-70 on neutral-900 ≈ 5.0:1 — clears WCAG 1.4.11 3:1 floor for non-text UI. Added in 3.2.1 alongside the action.* layer for the token-cascade remediation; only the strong tier survived the 3.2.2 audit because the lower-alpha siblings (overlay-white-30/10) cannot honour a border-contract — they were renamed to surface.on-dark-overlay-* (which is what they always were: translucent fills)."
|
|
211
219
|
},
|
|
212
220
|
"on-dark-default": {
|
|
213
|
-
"value": "var(--hx-overlay-
|
|
214
|
-
"description": "
|
|
221
|
+
"value": "var(--hx-color-surface-on-dark-overlay-default)",
|
|
222
|
+
"description": "DEPRECATED 3.2.2 — alias for surface.on-dark-overlay-default. Originally shipped 3.2.1 under the border.* family but it was always used as a translucent fill, never a border, and its 30% alpha cannot honour WCAG 1.4.11 3:1. Renamed to surface.on-dark-overlay-default in 3.2.2; this alias preserves the published CSS variable name (`--hx-color-border-on-dark-default`) for consumers who set it as a theme override. Scheduled for removal in 4.0.0."
|
|
215
223
|
},
|
|
216
224
|
"on-dark-subtle": {
|
|
217
|
-
"value": "var(--hx-overlay-
|
|
218
|
-
"description": "
|
|
225
|
+
"value": "var(--hx-color-surface-on-dark-overlay-subtle)",
|
|
226
|
+
"description": "DEPRECATED 3.2.2 — alias for surface.on-dark-overlay-subtle. Originally shipped 3.2.1 under the border.* family but it was always used as a translucent fill, never a border, and its 10% alpha cannot honour WCAG 1.4.11 3:1. Renamed to surface.on-dark-overlay-subtle in 3.2.2; this alias preserves the published CSS variable name (`--hx-color-border-on-dark-subtle`) for consumers who set it as a theme override. Scheduled for removal in 4.0.0."
|
|
219
227
|
}
|
|
220
228
|
},
|
|
221
229
|
"focus-ring": {
|
|
@@ -631,7 +639,15 @@
|
|
|
631
639
|
"raised": { "value": "var(--hx-color-neutral-800)" },
|
|
632
640
|
"sunken": { "value": "var(--hx-color-neutral-950)" },
|
|
633
641
|
"inverse": { "value": "var(--hx-color-neutral-100)" },
|
|
634
|
-
"overlay": { "value": "rgba(0, 0, 0, 0.85)" }
|
|
642
|
+
"overlay": { "value": "rgba(0, 0, 0, 0.85)" },
|
|
643
|
+
"on-dark-overlay-default": {
|
|
644
|
+
"value": "var(--hx-overlay-black-30)",
|
|
645
|
+
"description": "Dark-mode override. surface.inverse flips light (#EBEEE9) in dark mode, so the base overlay-white-30 binding tints white-on-light (~1.05:1) and disappears. overlay-black-30 tints dark-on-light against the now-light inverse surface and reads correctly."
|
|
646
|
+
},
|
|
647
|
+
"on-dark-overlay-subtle": {
|
|
648
|
+
"value": "var(--hx-overlay-black-10)",
|
|
649
|
+
"description": "Dark-mode override mirroring on-dark-overlay-default's flip rationale. Lowest-emphasis tint on the (now-light in dark mode) inverse surface."
|
|
650
|
+
}
|
|
635
651
|
},
|
|
636
652
|
"border": {
|
|
637
653
|
"default": { "value": "var(--hx-color-neutral-700)" },
|
|
@@ -646,12 +662,12 @@
|
|
|
646
662
|
"description": "Dark-mode override. surface.inverse flips light (#EBEEE9) in dark mode, so the original overlay-white-70 binding paints white-ish on light = 1.12:1 (invisible). overlay-black-50 over #EBEEE9 = 3.84:1, clears the WCAG 1.4.11 3:1 floor for inverted-mode button outlines and focus rings drawn on the (now-light) inverse surface. Symmetrical with the light-mode 70% intent: dark text on light reaches the equivalent perceptual strength at a lower alpha than light text on dark."
|
|
647
663
|
},
|
|
648
664
|
"on-dark-default": {
|
|
649
|
-
"value": "var(--hx-overlay-
|
|
650
|
-
"description": "
|
|
665
|
+
"value": "var(--hx-color-surface-on-dark-overlay-default)",
|
|
666
|
+
"description": "DEPRECATED 3.2.2 — dark-mode alias preserving the published `--hx-color-border-on-dark-default` for backwards compatibility. Resolves to the renamed surface.on-dark-overlay-default token in dark mode (overlay-black-30). Removal scheduled for 4.0.0."
|
|
651
667
|
},
|
|
652
668
|
"on-dark-subtle": {
|
|
653
|
-
"value": "var(--hx-overlay-
|
|
654
|
-
"description": "
|
|
669
|
+
"value": "var(--hx-color-surface-on-dark-overlay-subtle)",
|
|
670
|
+
"description": "DEPRECATED 3.2.2 — dark-mode alias preserving the published `--hx-color-border-on-dark-subtle` for backwards compatibility. Resolves to the renamed surface.on-dark-overlay-subtle token in dark mode (overlay-black-10). Removal scheduled for 4.0.0."
|
|
655
671
|
}
|
|
656
672
|
},
|
|
657
673
|
"focus-ring": { "value": "var(--hx-color-primary-400)" },
|
|
@@ -810,6 +826,14 @@
|
|
|
810
826
|
"info-strong": {
|
|
811
827
|
"value": "var(--hx-color-primary-500)",
|
|
812
828
|
"description": "HC override for surface.info-strong. Light/dark resolves to primary-600. HC primary-600 (#60A5FA) is defined but pinning to HC primary-500 (#3B82F6, 5.71:1 on #000) keeps the info-strong surface visually distinct from the primary-strong action layer. Pairs with text.inverse (HC = #000000) for 5.71:1 AA pass."
|
|
829
|
+
},
|
|
830
|
+
"on-dark-overlay-default": {
|
|
831
|
+
"value": "#FFFFFF",
|
|
832
|
+
"description": "HC override for surface.on-dark-overlay-default. Translucent overlays disappear on the HC canvas; pin to solid white so inverted-secondary/ghost hover fills remain visible. Pairs with text.inverse (HC = #000000) for 21:1 AAA when inverted controls are in their hover state."
|
|
833
|
+
},
|
|
834
|
+
"on-dark-overlay-subtle": {
|
|
835
|
+
"value": "#C0C0C0",
|
|
836
|
+
"description": "HC override for surface.on-dark-overlay-subtle. Pinned to neutral silver so the subtle inverted hover affordance remains distinguishable from the strong tier in HC."
|
|
813
837
|
}
|
|
814
838
|
},
|
|
815
839
|
"border": {
|
|
@@ -822,12 +846,12 @@
|
|
|
822
846
|
"description": "HC override for border.on-dark-strong. The base overlay-white-70 reads softly against translucent darks but is invisible against the HC #000 canvas — pin to solid #FFFFFF (21:1 on #000) so inverted button outlines remain visible in HC."
|
|
823
847
|
},
|
|
824
848
|
"on-dark-default": {
|
|
825
|
-
"value": "
|
|
826
|
-
"description": "HC
|
|
849
|
+
"value": "var(--hx-color-surface-on-dark-overlay-default)",
|
|
850
|
+
"description": "DEPRECATED 3.2.2 — HC alias preserving the published `--hx-color-border-on-dark-default` for backwards compatibility. Resolves to the renamed surface.on-dark-overlay-default token in HC mode (#FFFFFF). Removal scheduled for 4.0.0."
|
|
827
851
|
},
|
|
828
852
|
"on-dark-subtle": {
|
|
829
|
-
"value": "
|
|
830
|
-
"description": "HC
|
|
853
|
+
"value": "var(--hx-color-surface-on-dark-overlay-subtle)",
|
|
854
|
+
"description": "DEPRECATED 3.2.2 — HC alias preserving the published `--hx-color-border-on-dark-subtle` for backwards compatibility. Resolves to the renamed surface.on-dark-overlay-subtle token in HC mode (#C0C0C0). Removal scheduled for 4.0.0."
|
|
831
855
|
}
|
|
832
856
|
},
|
|
833
857
|
"focus-ring": { "value": "#FFFF00", "description": "High-visibility yellow focus ring" },
|