@helixui/tokens 3.2.0-next.89 → 3.2.0-next.94

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/dist/index.d.ts +39 -0
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/tokens.css +17 -5
  4. package/dist/tokens.json +57 -10
  5. package/package.json +1 -1
  6. package/src/tokens.json +57 -10
package/dist/index.d.ts CHANGED
@@ -413,6 +413,7 @@ export declare const tokens: {
413
413
  };
414
414
  strong: {
415
415
  value: string;
416
+ description: string;
416
417
  };
417
418
  focus: {
418
419
  value: string;
@@ -432,6 +433,7 @@ export declare const tokens: {
432
433
  };
433
434
  "focus-ring": {
434
435
  value: string;
436
+ description: string;
435
437
  };
436
438
  selection: {
437
439
  bg: {
@@ -448,6 +450,10 @@ export declare const tokens: {
448
450
  value: string;
449
451
  description: string;
450
452
  };
453
+ "bg-inverted-rest": {
454
+ value: string;
455
+ description: string;
456
+ };
451
457
  "bg-hover": {
452
458
  value: string;
453
459
  description: string;
@@ -498,6 +504,10 @@ export declare const tokens: {
498
504
  value: string;
499
505
  description: string;
500
506
  };
507
+ "bg-inverted-hover": {
508
+ value: string;
509
+ description: string;
510
+ };
501
511
  };
502
512
  };
503
513
  };
@@ -840,6 +850,7 @@ export declare const tokens: {
840
850
  focus: {
841
851
  "ring-color": {
842
852
  value: string;
853
+ description: string;
843
854
  };
844
855
  "ring-width": {
845
856
  value: string;
@@ -1262,10 +1273,23 @@ export declare const tokens: {
1262
1273
  };
1263
1274
  strong: {
1264
1275
  value: string;
1276
+ description: string;
1265
1277
  };
1266
1278
  focus: {
1267
1279
  value: string;
1268
1280
  };
1281
+ "on-dark-strong": {
1282
+ value: string;
1283
+ description: string;
1284
+ };
1285
+ "on-dark-default": {
1286
+ value: string;
1287
+ description: string;
1288
+ };
1289
+ "on-dark-subtle": {
1290
+ value: string;
1291
+ description: string;
1292
+ };
1269
1293
  };
1270
1294
  "focus-ring": {
1271
1295
  value: string;
@@ -1280,6 +1304,12 @@ export declare const tokens: {
1280
1304
  };
1281
1305
  action: {
1282
1306
  _comment: string;
1307
+ primary: {
1308
+ "bg-inverted-rest": {
1309
+ value: string;
1310
+ description: string;
1311
+ };
1312
+ };
1283
1313
  secondary: {
1284
1314
  fg: {
1285
1315
  value: string;
@@ -1314,6 +1344,12 @@ export declare const tokens: {
1314
1344
  value: string;
1315
1345
  };
1316
1346
  };
1347
+ focus: {
1348
+ "ring-color": {
1349
+ value: string;
1350
+ description: string;
1351
+ };
1352
+ };
1317
1353
  shadow: {
1318
1354
  sm: {
1319
1355
  value: string;
@@ -1745,6 +1781,7 @@ export declare const tokens: {
1745
1781
  "--hx-breadcrumb-text-color": null;
1746
1782
  };
1747
1783
  "hx-button": {
1784
+ "--hx-button-active-bg": null;
1748
1785
  "--hx-button-bg": null;
1749
1786
  "--hx-button-border-color": null;
1750
1787
  "--hx-button-border-radius": null;
@@ -1754,8 +1791,10 @@ export declare const tokens: {
1754
1791
  "--hx-button-font-weight": null;
1755
1792
  "--hx-button-hover-bg": null;
1756
1793
  "--hx-button-inverted-color": null;
1794
+ "--hx-button-inverted-danger-interactive-color": null;
1757
1795
  "--hx-button-inverted-focus-ring-color": null;
1758
1796
  "--hx-button-inverted-ghost-hover-bg": null;
1797
+ "--hx-button-inverted-primary-interactive-color": null;
1759
1798
  };
1760
1799
  "hx-button-group": {
1761
1800
  "--hx-button-group-border-radius": null;
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
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
@@ -121,15 +121,16 @@
121
121
  --hx-color-surface-info-strong: var(--hx-color-primary-600);
122
122
  --hx-color-border-default: var(--hx-color-neutral-200);
123
123
  --hx-color-border-subtle: var(--hx-color-neutral-100);
124
- --hx-color-border-strong: var(--hx-color-neutral-400);
124
+ --hx-color-border-strong: var(--hx-color-neutral-500);
125
125
  --hx-color-border-focus: var(--hx-color-primary-500);
126
126
  --hx-color-border-on-dark-strong: var(--hx-overlay-white-70);
127
127
  --hx-color-border-on-dark-default: var(--hx-overlay-white-30);
128
128
  --hx-color-border-on-dark-subtle: var(--hx-overlay-white-10);
129
- --hx-color-focus-ring: var(--hx-color-primary-400);
129
+ --hx-color-focus-ring: var(--hx-color-primary-600);
130
130
  --hx-color-selection-bg: var(--hx-color-primary-200);
131
131
  --hx-color-selection-color: var(--hx-color-neutral-900);
132
132
  --hx-color-action-primary-bg: var(--hx-color-primary-500);
133
+ --hx-color-action-primary-bg-inverted-rest: var(--hx-color-primary-500);
133
134
  --hx-color-action-primary-bg-hover: var(--hx-color-primary-600);
134
135
  --hx-color-action-primary-bg-active: var(--hx-color-primary-700);
135
136
  --hx-color-action-primary-bg-inverted-hover: var(--hx-color-primary-400);
@@ -141,6 +142,7 @@
141
142
  --hx-color-action-danger-bg: var(--hx-color-error-500);
142
143
  --hx-color-action-danger-bg-hover: var(--hx-color-error-600);
143
144
  --hx-color-action-danger-bg-active: var(--hx-color-error-700);
145
+ --hx-color-action-danger-bg-inverted-hover: var(--hx-color-error-400);
144
146
  --hx-body-bg: var(--hx-color-surface-default);
145
147
  --hx-body-color: var(--hx-color-text-primary);
146
148
  --hx-body-font-family: var(--hx-font-family-sans);
@@ -240,7 +242,7 @@
240
242
  --hx-transition-slow: 350ms ease;
241
243
  --hx-touch-target-min: 2.75rem;
242
244
  --hx-touch-target-size: 44px;
243
- --hx-focus-ring-color: var(--hx-color-primary-400);
245
+ --hx-focus-ring-color: var(--hx-color-primary-600);
244
246
  --hx-focus-ring-width: 2px;
245
247
  --hx-focus-ring-offset: 2px;
246
248
  --hx-focus-ring-style: solid;
@@ -368,11 +370,15 @@
368
370
  --hx-color-surface-overlay: rgba(0, 0, 0, 0.85);
369
371
  --hx-color-border-default: var(--hx-color-neutral-700);
370
372
  --hx-color-border-subtle: var(--hx-color-neutral-800);
371
- --hx-color-border-strong: var(--hx-color-neutral-500);
373
+ --hx-color-border-strong: var(--hx-color-neutral-400);
372
374
  --hx-color-border-focus: var(--hx-color-primary-400);
375
+ --hx-color-border-on-dark-strong: var(--hx-overlay-black-50);
376
+ --hx-color-border-on-dark-default: var(--hx-overlay-black-30);
377
+ --hx-color-border-on-dark-subtle: var(--hx-overlay-black-10);
373
378
  --hx-color-focus-ring: var(--hx-color-primary-400);
374
379
  --hx-color-selection-bg: var(--hx-color-primary-800);
375
380
  --hx-color-selection-color: var(--hx-color-neutral-100);
381
+ --hx-color-action-primary-bg-inverted-rest: var(--hx-color-primary-600);
376
382
  --hx-color-action-secondary-fg: var(--hx-color-primary-400);
377
383
  --hx-color-action-secondary-border: var(--hx-color-primary-400);
378
384
  --hx-color-action-secondary-bg-hover: var(--hx-color-primary-900);
@@ -380,6 +386,7 @@
380
386
  --hx-color-action-ghost-bg-hover: var(--hx-color-primary-900);
381
387
  --hx-body-bg: var(--hx-color-surface-default);
382
388
  --hx-body-color: var(--hx-color-text-primary);
389
+ --hx-focus-ring-color: var(--hx-color-primary-400);
383
390
  --hx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
384
391
  --hx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
385
392
  --hx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
@@ -409,11 +416,15 @@
409
416
  --hx-color-surface-overlay: rgba(0, 0, 0, 0.85);
410
417
  --hx-color-border-default: var(--hx-color-neutral-700);
411
418
  --hx-color-border-subtle: var(--hx-color-neutral-800);
412
- --hx-color-border-strong: var(--hx-color-neutral-500);
419
+ --hx-color-border-strong: var(--hx-color-neutral-400);
413
420
  --hx-color-border-focus: var(--hx-color-primary-400);
421
+ --hx-color-border-on-dark-strong: var(--hx-overlay-black-50);
422
+ --hx-color-border-on-dark-default: var(--hx-overlay-black-30);
423
+ --hx-color-border-on-dark-subtle: var(--hx-overlay-black-10);
414
424
  --hx-color-focus-ring: var(--hx-color-primary-400);
415
425
  --hx-color-selection-bg: var(--hx-color-primary-800);
416
426
  --hx-color-selection-color: var(--hx-color-neutral-100);
427
+ --hx-color-action-primary-bg-inverted-rest: var(--hx-color-primary-600);
417
428
  --hx-color-action-secondary-fg: var(--hx-color-primary-400);
418
429
  --hx-color-action-secondary-border: var(--hx-color-primary-400);
419
430
  --hx-color-action-secondary-bg-hover: var(--hx-color-primary-900);
@@ -421,6 +432,7 @@
421
432
  --hx-color-action-ghost-bg-hover: var(--hx-color-primary-900);
422
433
  --hx-body-bg: var(--hx-color-surface-default);
423
434
  --hx-body-color: var(--hx-color-text-primary);
435
+ --hx-focus-ring-color: var(--hx-color-primary-400);
424
436
  --hx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
425
437
  --hx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
426
438
  --hx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
package/dist/tokens.json CHANGED
@@ -182,7 +182,7 @@
182
182
  "overlay": { "value": "rgba(0, 0, 0, 0.75)" },
183
183
  "success-strong": {
184
184
  "value": "var(--hx-color-success-700)",
185
- "description": "Emphasis success surface for high-prominence components (e.g. hx-toast--success). Pairs with text.inverse (neutral-0) for AA — neutral-0 on success-700 (#146831) = 6.88:1. Added in 3.2.1 to route the toast variant fills through the semantic tier instead of consuming success-700 directly."
185
+ "description": "Emphasis success surface for high-prominence components (e.g. hx-toast--success). Pairs with text.on-success-strong (neutral-0, no dark-mode flip) for AA — neutral-0 on success-700 (#146831) = 6.88:1. Do NOT pair with text.inverse: surface.success-strong itself does not dark-mode-flip (the value stays success-700 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). Added in 3.2.1 to route the toast variant fills through the semantic tier instead of consuming success-700 directly."
186
186
  },
187
187
  "warning-strong": {
188
188
  "value": "var(--hx-color-warning-500)",
@@ -190,17 +190,20 @@
190
190
  },
191
191
  "danger-strong": {
192
192
  "value": "var(--hx-color-error-600)",
193
- "description": "Emphasis danger surface for high-prominence components (e.g. hx-toast--danger). Pairs with text.inverse (neutral-0) for AA — neutral-0 on error-600 (#C92A2A) = 5.46:1. Tracks action.danger.bg-hover by value (also error-600) but is exposed as a surface semantic so non-interactive consumers (toasts, banners) don't reach into the action.* hover state to find it."
193
+ "description": "Emphasis danger surface for high-prominence components (e.g. hx-toast--danger). Pairs with text.on-error-strong (neutral-0, no dark-mode flip) for AA — neutral-0 on error-600 (#C92A2A) = 5.46:1. Do NOT pair with text.inverse: surface.danger-strong itself does not dark-mode-flip (the value stays error-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.danger.bg-hover by value (also error-600) but is exposed as a surface semantic so non-interactive consumers (toasts, banners) don't reach into the action.* hover state to find it."
194
194
  },
195
195
  "info-strong": {
196
196
  "value": "var(--hx-color-primary-600)",
197
- "description": "Emphasis info surface for high-prominence components (e.g. hx-toast--info). Pairs with text.inverse (neutral-0) for AA — neutral-0 on primary-600 (#0F7078) = 5.82:1. Tracks action.primary.bg-hover by value but exposed under surface.* so toasts/banners consume a surface semantic, not an action-state semantic."
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
198
  }
199
199
  },
200
200
  "border": {
201
201
  "default": { "value": "var(--hx-color-neutral-200)" },
202
202
  "subtle": { "value": "var(--hx-color-neutral-100)" },
203
- "strong": { "value": "var(--hx-color-neutral-400)" },
203
+ "strong": {
204
+ "value": "var(--hx-color-neutral-500)",
205
+ "description": "Strong border for state-conveying form-control borders (text input, select, checkbox, radio, switch track, file upload dropzone, side-nav dividers, etc.). Light-mode pairs with surface.default (white) at 4.63:1 — clears the WCAG 1.4.11 3:1 floor for non-text UI components and the 3:1 floor for state-conveying borders. Pre-3.2.2 this was neutral-400 (#8E9C98) which lands at 2.85:1 on white — a sub-3:1 fail systemic to every form-control border across the library. Dark mode flips to neutral-400 (#8E9C98 on #0D1825 = 6.27:1) via the dark.color.border.strong override — the flip both preserves mode differentiation (outline button parity) and keeps the dark border bright enough to remain crisp on the dark page."
206
+ },
204
207
  "focus": { "value": "var(--hx-color-primary-500)" },
205
208
  "on-dark-strong": {
206
209
  "value": "var(--hx-overlay-white-70)",
@@ -215,7 +218,10 @@
215
218
  "description": "Subtle border treatment on dark surfaces (low-emphasis dividers inside dark panels)."
216
219
  }
217
220
  },
218
- "focus-ring": { "value": "var(--hx-color-primary-400)" },
221
+ "focus-ring": {
222
+ "value": "var(--hx-color-primary-600)",
223
+ "description": "Light-mode focus-ring color. Pairs with surface.default (white) at 5.82:1 — clears the WCAG 1.4.11 3:1 floor for non-text UI components with comfortable headroom. Pre-3.2.2 this resolved to primary-400 (#6AB1B1) which lands at 2.45:1 on white — a sub-3:1 fail for any focus indicator drawn at full opacity (outline-style focus on hx-link, border-flip on hx-text-input, etc.). The dark.color.focus-ring override keeps primary-400 because primary-400 on dark surface.default = 7.27:1 (AA pass) while primary-600 on dark = 3.07:1 (just below 3:1 floor). Color-mix box-shadow ring treatments (hx-text-input wrapper) layer their alpha on top of this base; the change only sharpens, never weakens, the ring against light surfaces."
224
+ },
219
225
  "selection": {
220
226
  "bg": { "value": "var(--hx-color-primary-200)" },
221
227
  "color": { "value": "var(--hx-color-neutral-900)" }
@@ -227,6 +233,10 @@
227
233
  "value": "var(--hx-color-primary-500)",
228
234
  "description": "Resting interactive primary surface (button bg, active nav-item bg, primary toast bg). Resolves to primary-500 in light/dark and the HC primary-500 override in HC."
229
235
  },
236
+ "bg-inverted-rest": {
237
+ "value": "var(--hx-color-primary-500)",
238
+ "description": "Resting state for primary surfaces that live on the inverse surface (e.g. inverted-mode primary buttons). Tracks action.primary.bg (primary-500) in light mode where surface.inverse is dark (#0D1825) and primary-500 lands at 5.20:1. Dark-mode override flips to primary-600 because surface.inverse becomes light (#EBEEE9) in dark mode and primary-500 on light = 2.94:1 (sub-3:1 fail for the WCAG 1.4.11 UI-component boundary). Decoupled from action.primary.bg so the standard non-inverted button keeps its primary-500 fill against the dark page in dark mode (the documented architectural intent — see dark.action._comment)."
239
+ },
230
240
  "bg-hover": {
231
241
  "value": "var(--hx-color-primary-600)",
232
242
  "description": "Hover state for interactive primary surfaces. Pairs with text.on-primary-strong (neutral-0) for AA — primary-600 on neutral-0 = 5.82:1."
@@ -276,6 +286,10 @@
276
286
  "bg-active": {
277
287
  "value": "var(--hx-color-error-700)",
278
288
  "description": "Active/pressed state for danger surfaces. Pairs with text.on-error-strong (neutral-0) — error-700 on neutral-0 = 7.96:1 AA."
289
+ },
290
+ "bg-inverted-hover": {
291
+ "value": "var(--hx-color-error-400)",
292
+ "description": "Hover/pressed state for danger surfaces that live on a dark/inverted background — flips lighter rather than darker so the affordance reads against an already-dark page. error-400 (#FC7264) on surface.inverse (neutral-900, #0D1825) = 6.58:1, clears the WCAG 1.4.11 3:1 UI floor. Sister token to action.primary.bg-inverted-hover; added in 3.2.1 round-7 to close the inverted-mode :active regression where base error-700 (#A21312) on dark surface dropped to ~3:1."
279
293
  }
280
294
  }
281
295
  }
@@ -431,7 +445,10 @@
431
445
  }
432
446
  },
433
447
  "focus": {
434
- "ring-color": { "value": "var(--hx-color-primary-400)" },
448
+ "ring-color": {
449
+ "value": "var(--hx-color-primary-600)",
450
+ "description": "Light-mode focus ring color. Mirrors color.focus-ring (primary-600 = #0F7078, 5.82:1 on white surface — AA pass for the 3:1 UI-component floor). Pre-3.2.2 this was primary-400 (#6AB1B1, 2.45:1 on white — sub-3:1 fail). Dark mode keeps primary-400 via dark.focus.ring-color override (7.27:1 on dark surface)."
451
+ },
435
452
  "ring-width": { "value": "2px" },
436
453
  "ring-offset": { "value": "2px" },
437
454
  "ring-style": { "value": "solid" },
@@ -619,8 +636,23 @@
619
636
  "border": {
620
637
  "default": { "value": "var(--hx-color-neutral-700)" },
621
638
  "subtle": { "value": "var(--hx-color-neutral-800)" },
622
- "strong": { "value": "var(--hx-color-neutral-500)" },
623
- "focus": { "value": "var(--hx-color-primary-400)" }
639
+ "strong": {
640
+ "value": "var(--hx-color-neutral-400)",
641
+ "description": "Dark-mode override. Light mode binds border.strong to neutral-500 (#66787B); dark flips to neutral-400 (#8E9C98) so (a) the border resolves to a different value across modes — preserving the dark-mode-resolution outline-button parity contract — and (b) on dark surface.default (#0D1825) neutral-400 lands at 6.27:1, clearing the WCAG 1.4.11 3:1 floor with comfortable headroom (vs neutral-500's 3.86:1 dark-mode floor)."
642
+ },
643
+ "focus": { "value": "var(--hx-color-primary-400)" },
644
+ "on-dark-strong": {
645
+ "value": "var(--hx-overlay-black-50)",
646
+ "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
+ },
648
+ "on-dark-default": {
649
+ "value": "var(--hx-overlay-black-30)",
650
+ "description": "Dark-mode override mirroring on-dark-strong's flip rationale. Used as a translucent fill (inverted secondary/ghost hover bg) on surface.inverse — the original overlay-white-30 binding produces ~1.05:1 against the now-light inverse surface."
651
+ },
652
+ "on-dark-subtle": {
653
+ "value": "var(--hx-overlay-black-10)",
654
+ "description": "Dark-mode override mirroring the on-dark-default flip. Used as the resting fill for inverted tertiary buttons; matches the original light-mode subtle elevation against the inverse surface."
655
+ }
624
656
  },
625
657
  "focus-ring": { "value": "var(--hx-color-primary-400)" },
626
658
  "selection": {
@@ -628,7 +660,13 @@
628
660
  "color": { "value": "var(--hx-color-neutral-100)" }
629
661
  },
630
662
  "action": {
631
- "_comment": "Dark-mode overrides for the action.* semantic layer. Filled-action surfaces (primary.bg/bg-hover/bg-active, danger.*) intentionally do NOT flip in dark mode — the brand fill remains brand-colored against the dark page, which is the standard dark-theme treatment for primary/destructive buttons. Outline/ghost treatments DO flip: the resting fg primary-600 fails AA (3.07:1) on dark surface.default, and primary-50 hover-bg is far too bright on a dark page. Mirrors the dark.text.link cascade (light primary-600 link → dark primary-400 link).",
663
+ "_comment": "Dark-mode overrides for the action.* semantic layer. Filled-action surfaces (primary.bg/bg-hover/bg-active, danger.*) intentionally do NOT flip in dark mode for the standard non-inverted button — the brand fill remains brand-colored against the dark page, which is the standard dark-theme treatment for primary/destructive buttons. Outline/ghost treatments DO flip: the resting fg primary-600 fails AA (3.07:1) on dark surface.default, and primary-50 hover-bg is far too bright on a dark page. Mirrors the dark.text.link cascade (light primary-600 link → dark primary-400 link). Inverted-rest filled surfaces (action.primary.bg-inverted-rest) ALSO flip — they paint on surface.inverse, which becomes light (#EBEEE9) in dark mode, and the brand-resting fill needs to clear the WCAG 1.4.11 3:1 UI-component floor against the now-light inverse surface.",
664
+ "primary": {
665
+ "bg-inverted-rest": {
666
+ "value": "var(--hx-color-primary-600)",
667
+ "description": "Dark-mode override. surface.inverse becomes light (#EBEEE9) in dark mode, and primary-500 on #EBEEE9 = 2.94:1 — sub-3:1 fail for the inverted-mode primary button boundary. primary-600 on #EBEEE9 = 4.97:1, clears the WCAG 1.4.11 floor with headroom. Sister to action.secondary.fg's dark flip (primary-600 → primary-400 — opposite direction because secondary.fg paints on surface.default whereas inverted-rest paints on surface.inverse)."
668
+ }
669
+ },
632
670
  "secondary": {
633
671
  "fg": {
634
672
  "value": "var(--hx-color-primary-400)",
@@ -659,6 +697,12 @@
659
697
  "bg": { "value": "var(--hx-color-surface-default)" },
660
698
  "color": { "value": "var(--hx-color-text-primary)" }
661
699
  },
700
+ "focus": {
701
+ "ring-color": {
702
+ "value": "var(--hx-color-primary-400)",
703
+ "description": "Dark-mode focus ring flips to primary-400 (#6AB1B1) — primary-600 on dark surface.default = 3.07:1 (sub-3:1 UI floor fail). primary-400 on dark surface = 7.27:1, AA pass. Mirrors the dark.color.focus-ring override and the dark.text.link cascade (primary-600 → primary-400)."
704
+ }
705
+ },
662
706
  "shadow": {
663
707
  "sm": { "value": "0 1px 2px 0 rgb(0 0 0 / 0.3)" },
664
708
  "md": { "value": "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)" },
@@ -942,6 +986,7 @@
942
986
  "--hx-breadcrumb-text-color": null
943
987
  },
944
988
  "hx-button": {
989
+ "--hx-button-active-bg": null,
945
990
  "--hx-button-bg": null,
946
991
  "--hx-button-border-color": null,
947
992
  "--hx-button-border-radius": null,
@@ -951,8 +996,10 @@
951
996
  "--hx-button-font-weight": null,
952
997
  "--hx-button-hover-bg": null,
953
998
  "--hx-button-inverted-color": null,
999
+ "--hx-button-inverted-danger-interactive-color": null,
954
1000
  "--hx-button-inverted-focus-ring-color": null,
955
- "--hx-button-inverted-ghost-hover-bg": null
1001
+ "--hx-button-inverted-ghost-hover-bg": null,
1002
+ "--hx-button-inverted-primary-interactive-color": null
956
1003
  },
957
1004
  "hx-button-group": {
958
1005
  "--hx-button-group-border-radius": null,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helixui/tokens",
3
- "version": "3.2.0-next.89",
3
+ "version": "3.2.0-next.94",
4
4
  "description": "Design tokens for the HELiX enterprise healthcare web component library",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/src/tokens.json CHANGED
@@ -182,7 +182,7 @@
182
182
  "overlay": { "value": "rgba(0, 0, 0, 0.75)" },
183
183
  "success-strong": {
184
184
  "value": "var(--hx-color-success-700)",
185
- "description": "Emphasis success surface for high-prominence components (e.g. hx-toast--success). Pairs with text.inverse (neutral-0) for AA — neutral-0 on success-700 (#146831) = 6.88:1. Added in 3.2.1 to route the toast variant fills through the semantic tier instead of consuming success-700 directly."
185
+ "description": "Emphasis success surface for high-prominence components (e.g. hx-toast--success). Pairs with text.on-success-strong (neutral-0, no dark-mode flip) for AA — neutral-0 on success-700 (#146831) = 6.88:1. Do NOT pair with text.inverse: surface.success-strong itself does not dark-mode-flip (the value stays success-700 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). Added in 3.2.1 to route the toast variant fills through the semantic tier instead of consuming success-700 directly."
186
186
  },
187
187
  "warning-strong": {
188
188
  "value": "var(--hx-color-warning-500)",
@@ -190,17 +190,20 @@
190
190
  },
191
191
  "danger-strong": {
192
192
  "value": "var(--hx-color-error-600)",
193
- "description": "Emphasis danger surface for high-prominence components (e.g. hx-toast--danger). Pairs with text.inverse (neutral-0) for AA — neutral-0 on error-600 (#C92A2A) = 5.46:1. Tracks action.danger.bg-hover by value (also error-600) but is exposed as a surface semantic so non-interactive consumers (toasts, banners) don't reach into the action.* hover state to find it."
193
+ "description": "Emphasis danger surface for high-prominence components (e.g. hx-toast--danger). Pairs with text.on-error-strong (neutral-0, no dark-mode flip) for AA — neutral-0 on error-600 (#C92A2A) = 5.46:1. Do NOT pair with text.inverse: surface.danger-strong itself does not dark-mode-flip (the value stays error-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.danger.bg-hover by value (also error-600) but is exposed as a surface semantic so non-interactive consumers (toasts, banners) don't reach into the action.* hover state to find it."
194
194
  },
195
195
  "info-strong": {
196
196
  "value": "var(--hx-color-primary-600)",
197
- "description": "Emphasis info surface for high-prominence components (e.g. hx-toast--info). Pairs with text.inverse (neutral-0) for AA — neutral-0 on primary-600 (#0F7078) = 5.82:1. Tracks action.primary.bg-hover by value but exposed under surface.* so toasts/banners consume a surface semantic, not an action-state semantic."
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
198
  }
199
199
  },
200
200
  "border": {
201
201
  "default": { "value": "var(--hx-color-neutral-200)" },
202
202
  "subtle": { "value": "var(--hx-color-neutral-100)" },
203
- "strong": { "value": "var(--hx-color-neutral-400)" },
203
+ "strong": {
204
+ "value": "var(--hx-color-neutral-500)",
205
+ "description": "Strong border for state-conveying form-control borders (text input, select, checkbox, radio, switch track, file upload dropzone, side-nav dividers, etc.). Light-mode pairs with surface.default (white) at 4.63:1 — clears the WCAG 1.4.11 3:1 floor for non-text UI components and the 3:1 floor for state-conveying borders. Pre-3.2.2 this was neutral-400 (#8E9C98) which lands at 2.85:1 on white — a sub-3:1 fail systemic to every form-control border across the library. Dark mode flips to neutral-400 (#8E9C98 on #0D1825 = 6.27:1) via the dark.color.border.strong override — the flip both preserves mode differentiation (outline button parity) and keeps the dark border bright enough to remain crisp on the dark page."
206
+ },
204
207
  "focus": { "value": "var(--hx-color-primary-500)" },
205
208
  "on-dark-strong": {
206
209
  "value": "var(--hx-overlay-white-70)",
@@ -215,7 +218,10 @@
215
218
  "description": "Subtle border treatment on dark surfaces (low-emphasis dividers inside dark panels)."
216
219
  }
217
220
  },
218
- "focus-ring": { "value": "var(--hx-color-primary-400)" },
221
+ "focus-ring": {
222
+ "value": "var(--hx-color-primary-600)",
223
+ "description": "Light-mode focus-ring color. Pairs with surface.default (white) at 5.82:1 — clears the WCAG 1.4.11 3:1 floor for non-text UI components with comfortable headroom. Pre-3.2.2 this resolved to primary-400 (#6AB1B1) which lands at 2.45:1 on white — a sub-3:1 fail for any focus indicator drawn at full opacity (outline-style focus on hx-link, border-flip on hx-text-input, etc.). The dark.color.focus-ring override keeps primary-400 because primary-400 on dark surface.default = 7.27:1 (AA pass) while primary-600 on dark = 3.07:1 (just below 3:1 floor). Color-mix box-shadow ring treatments (hx-text-input wrapper) layer their alpha on top of this base; the change only sharpens, never weakens, the ring against light surfaces."
224
+ },
219
225
  "selection": {
220
226
  "bg": { "value": "var(--hx-color-primary-200)" },
221
227
  "color": { "value": "var(--hx-color-neutral-900)" }
@@ -227,6 +233,10 @@
227
233
  "value": "var(--hx-color-primary-500)",
228
234
  "description": "Resting interactive primary surface (button bg, active nav-item bg, primary toast bg). Resolves to primary-500 in light/dark and the HC primary-500 override in HC."
229
235
  },
236
+ "bg-inverted-rest": {
237
+ "value": "var(--hx-color-primary-500)",
238
+ "description": "Resting state for primary surfaces that live on the inverse surface (e.g. inverted-mode primary buttons). Tracks action.primary.bg (primary-500) in light mode where surface.inverse is dark (#0D1825) and primary-500 lands at 5.20:1. Dark-mode override flips to primary-600 because surface.inverse becomes light (#EBEEE9) in dark mode and primary-500 on light = 2.94:1 (sub-3:1 fail for the WCAG 1.4.11 UI-component boundary). Decoupled from action.primary.bg so the standard non-inverted button keeps its primary-500 fill against the dark page in dark mode (the documented architectural intent — see dark.action._comment)."
239
+ },
230
240
  "bg-hover": {
231
241
  "value": "var(--hx-color-primary-600)",
232
242
  "description": "Hover state for interactive primary surfaces. Pairs with text.on-primary-strong (neutral-0) for AA — primary-600 on neutral-0 = 5.82:1."
@@ -276,6 +286,10 @@
276
286
  "bg-active": {
277
287
  "value": "var(--hx-color-error-700)",
278
288
  "description": "Active/pressed state for danger surfaces. Pairs with text.on-error-strong (neutral-0) — error-700 on neutral-0 = 7.96:1 AA."
289
+ },
290
+ "bg-inverted-hover": {
291
+ "value": "var(--hx-color-error-400)",
292
+ "description": "Hover/pressed state for danger surfaces that live on a dark/inverted background — flips lighter rather than darker so the affordance reads against an already-dark page. error-400 (#FC7264) on surface.inverse (neutral-900, #0D1825) = 6.58:1, clears the WCAG 1.4.11 3:1 UI floor. Sister token to action.primary.bg-inverted-hover; added in 3.2.1 round-7 to close the inverted-mode :active regression where base error-700 (#A21312) on dark surface dropped to ~3:1."
279
293
  }
280
294
  }
281
295
  }
@@ -431,7 +445,10 @@
431
445
  }
432
446
  },
433
447
  "focus": {
434
- "ring-color": { "value": "var(--hx-color-primary-400)" },
448
+ "ring-color": {
449
+ "value": "var(--hx-color-primary-600)",
450
+ "description": "Light-mode focus ring color. Mirrors color.focus-ring (primary-600 = #0F7078, 5.82:1 on white surface — AA pass for the 3:1 UI-component floor). Pre-3.2.2 this was primary-400 (#6AB1B1, 2.45:1 on white — sub-3:1 fail). Dark mode keeps primary-400 via dark.focus.ring-color override (7.27:1 on dark surface)."
451
+ },
435
452
  "ring-width": { "value": "2px" },
436
453
  "ring-offset": { "value": "2px" },
437
454
  "ring-style": { "value": "solid" },
@@ -619,8 +636,23 @@
619
636
  "border": {
620
637
  "default": { "value": "var(--hx-color-neutral-700)" },
621
638
  "subtle": { "value": "var(--hx-color-neutral-800)" },
622
- "strong": { "value": "var(--hx-color-neutral-500)" },
623
- "focus": { "value": "var(--hx-color-primary-400)" }
639
+ "strong": {
640
+ "value": "var(--hx-color-neutral-400)",
641
+ "description": "Dark-mode override. Light mode binds border.strong to neutral-500 (#66787B); dark flips to neutral-400 (#8E9C98) so (a) the border resolves to a different value across modes — preserving the dark-mode-resolution outline-button parity contract — and (b) on dark surface.default (#0D1825) neutral-400 lands at 6.27:1, clearing the WCAG 1.4.11 3:1 floor with comfortable headroom (vs neutral-500's 3.86:1 dark-mode floor)."
642
+ },
643
+ "focus": { "value": "var(--hx-color-primary-400)" },
644
+ "on-dark-strong": {
645
+ "value": "var(--hx-overlay-black-50)",
646
+ "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
+ },
648
+ "on-dark-default": {
649
+ "value": "var(--hx-overlay-black-30)",
650
+ "description": "Dark-mode override mirroring on-dark-strong's flip rationale. Used as a translucent fill (inverted secondary/ghost hover bg) on surface.inverse — the original overlay-white-30 binding produces ~1.05:1 against the now-light inverse surface."
651
+ },
652
+ "on-dark-subtle": {
653
+ "value": "var(--hx-overlay-black-10)",
654
+ "description": "Dark-mode override mirroring the on-dark-default flip. Used as the resting fill for inverted tertiary buttons; matches the original light-mode subtle elevation against the inverse surface."
655
+ }
624
656
  },
625
657
  "focus-ring": { "value": "var(--hx-color-primary-400)" },
626
658
  "selection": {
@@ -628,7 +660,13 @@
628
660
  "color": { "value": "var(--hx-color-neutral-100)" }
629
661
  },
630
662
  "action": {
631
- "_comment": "Dark-mode overrides for the action.* semantic layer. Filled-action surfaces (primary.bg/bg-hover/bg-active, danger.*) intentionally do NOT flip in dark mode — the brand fill remains brand-colored against the dark page, which is the standard dark-theme treatment for primary/destructive buttons. Outline/ghost treatments DO flip: the resting fg primary-600 fails AA (3.07:1) on dark surface.default, and primary-50 hover-bg is far too bright on a dark page. Mirrors the dark.text.link cascade (light primary-600 link → dark primary-400 link).",
663
+ "_comment": "Dark-mode overrides for the action.* semantic layer. Filled-action surfaces (primary.bg/bg-hover/bg-active, danger.*) intentionally do NOT flip in dark mode for the standard non-inverted button — the brand fill remains brand-colored against the dark page, which is the standard dark-theme treatment for primary/destructive buttons. Outline/ghost treatments DO flip: the resting fg primary-600 fails AA (3.07:1) on dark surface.default, and primary-50 hover-bg is far too bright on a dark page. Mirrors the dark.text.link cascade (light primary-600 link → dark primary-400 link). Inverted-rest filled surfaces (action.primary.bg-inverted-rest) ALSO flip — they paint on surface.inverse, which becomes light (#EBEEE9) in dark mode, and the brand-resting fill needs to clear the WCAG 1.4.11 3:1 UI-component floor against the now-light inverse surface.",
664
+ "primary": {
665
+ "bg-inverted-rest": {
666
+ "value": "var(--hx-color-primary-600)",
667
+ "description": "Dark-mode override. surface.inverse becomes light (#EBEEE9) in dark mode, and primary-500 on #EBEEE9 = 2.94:1 — sub-3:1 fail for the inverted-mode primary button boundary. primary-600 on #EBEEE9 = 4.97:1, clears the WCAG 1.4.11 floor with headroom. Sister to action.secondary.fg's dark flip (primary-600 → primary-400 — opposite direction because secondary.fg paints on surface.default whereas inverted-rest paints on surface.inverse)."
668
+ }
669
+ },
632
670
  "secondary": {
633
671
  "fg": {
634
672
  "value": "var(--hx-color-primary-400)",
@@ -659,6 +697,12 @@
659
697
  "bg": { "value": "var(--hx-color-surface-default)" },
660
698
  "color": { "value": "var(--hx-color-text-primary)" }
661
699
  },
700
+ "focus": {
701
+ "ring-color": {
702
+ "value": "var(--hx-color-primary-400)",
703
+ "description": "Dark-mode focus ring flips to primary-400 (#6AB1B1) — primary-600 on dark surface.default = 3.07:1 (sub-3:1 UI floor fail). primary-400 on dark surface = 7.27:1, AA pass. Mirrors the dark.color.focus-ring override and the dark.text.link cascade (primary-600 → primary-400)."
704
+ }
705
+ },
662
706
  "shadow": {
663
707
  "sm": { "value": "0 1px 2px 0 rgb(0 0 0 / 0.3)" },
664
708
  "md": { "value": "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)" },
@@ -942,6 +986,7 @@
942
986
  "--hx-breadcrumb-text-color": null
943
987
  },
944
988
  "hx-button": {
989
+ "--hx-button-active-bg": null,
945
990
  "--hx-button-bg": null,
946
991
  "--hx-button-border-color": null,
947
992
  "--hx-button-border-radius": null,
@@ -951,8 +996,10 @@
951
996
  "--hx-button-font-weight": null,
952
997
  "--hx-button-hover-bg": null,
953
998
  "--hx-button-inverted-color": null,
999
+ "--hx-button-inverted-danger-interactive-color": null,
954
1000
  "--hx-button-inverted-focus-ring-color": null,
955
- "--hx-button-inverted-ghost-hover-bg": null
1001
+ "--hx-button-inverted-ghost-hover-bg": null,
1002
+ "--hx-button-inverted-primary-interactive-color": null
956
1003
  },
957
1004
  "hx-button-group": {
958
1005
  "--hx-button-group-border-radius": null,