@helixui/tokens 3.2.0-next.91 → 3.2.0-next.96

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 +32 -0
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/tokens.css +16 -5
  4. package/dist/tokens.json +46 -6
  5. package/package.json +1 -1
  6. package/src/tokens.json +46 -6
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;
@@ -844,6 +850,7 @@ export declare const tokens: {
844
850
  focus: {
845
851
  "ring-color": {
846
852
  value: string;
853
+ description: string;
847
854
  };
848
855
  "ring-width": {
849
856
  value: string;
@@ -1266,10 +1273,23 @@ export declare const tokens: {
1266
1273
  };
1267
1274
  strong: {
1268
1275
  value: string;
1276
+ description: string;
1269
1277
  };
1270
1278
  focus: {
1271
1279
  value: string;
1272
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
+ };
1273
1293
  };
1274
1294
  "focus-ring": {
1275
1295
  value: string;
@@ -1284,6 +1304,12 @@ export declare const tokens: {
1284
1304
  };
1285
1305
  action: {
1286
1306
  _comment: string;
1307
+ primary: {
1308
+ "bg-inverted-rest": {
1309
+ value: string;
1310
+ description: string;
1311
+ };
1312
+ };
1287
1313
  secondary: {
1288
1314
  fg: {
1289
1315
  value: string;
@@ -1318,6 +1344,12 @@ export declare const tokens: {
1318
1344
  value: string;
1319
1345
  };
1320
1346
  };
1347
+ focus: {
1348
+ "ring-color": {
1349
+ value: string;
1350
+ description: string;
1351
+ };
1352
+ };
1321
1353
  shadow: {
1322
1354
  sm: {
1323
1355
  value: string;
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);
@@ -241,7 +242,7 @@
241
242
  --hx-transition-slow: 350ms ease;
242
243
  --hx-touch-target-min: 2.75rem;
243
244
  --hx-touch-target-size: 44px;
244
- --hx-focus-ring-color: var(--hx-color-primary-400);
245
+ --hx-focus-ring-color: var(--hx-color-primary-600);
245
246
  --hx-focus-ring-width: 2px;
246
247
  --hx-focus-ring-offset: 2px;
247
248
  --hx-focus-ring-style: solid;
@@ -369,11 +370,15 @@
369
370
  --hx-color-surface-overlay: rgba(0, 0, 0, 0.85);
370
371
  --hx-color-border-default: var(--hx-color-neutral-700);
371
372
  --hx-color-border-subtle: var(--hx-color-neutral-800);
372
- --hx-color-border-strong: var(--hx-color-neutral-500);
373
+ --hx-color-border-strong: var(--hx-color-neutral-400);
373
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);
374
378
  --hx-color-focus-ring: var(--hx-color-primary-400);
375
379
  --hx-color-selection-bg: var(--hx-color-primary-800);
376
380
  --hx-color-selection-color: var(--hx-color-neutral-100);
381
+ --hx-color-action-primary-bg-inverted-rest: var(--hx-color-primary-600);
377
382
  --hx-color-action-secondary-fg: var(--hx-color-primary-400);
378
383
  --hx-color-action-secondary-border: var(--hx-color-primary-400);
379
384
  --hx-color-action-secondary-bg-hover: var(--hx-color-primary-900);
@@ -381,6 +386,7 @@
381
386
  --hx-color-action-ghost-bg-hover: var(--hx-color-primary-900);
382
387
  --hx-body-bg: var(--hx-color-surface-default);
383
388
  --hx-body-color: var(--hx-color-text-primary);
389
+ --hx-focus-ring-color: var(--hx-color-primary-400);
384
390
  --hx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
385
391
  --hx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
386
392
  --hx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
@@ -410,11 +416,15 @@
410
416
  --hx-color-surface-overlay: rgba(0, 0, 0, 0.85);
411
417
  --hx-color-border-default: var(--hx-color-neutral-700);
412
418
  --hx-color-border-subtle: var(--hx-color-neutral-800);
413
- --hx-color-border-strong: var(--hx-color-neutral-500);
419
+ --hx-color-border-strong: var(--hx-color-neutral-400);
414
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);
415
424
  --hx-color-focus-ring: var(--hx-color-primary-400);
416
425
  --hx-color-selection-bg: var(--hx-color-primary-800);
417
426
  --hx-color-selection-color: var(--hx-color-neutral-100);
427
+ --hx-color-action-primary-bg-inverted-rest: var(--hx-color-primary-600);
418
428
  --hx-color-action-secondary-fg: var(--hx-color-primary-400);
419
429
  --hx-color-action-secondary-border: var(--hx-color-primary-400);
420
430
  --hx-color-action-secondary-bg-hover: var(--hx-color-primary-900);
@@ -422,6 +432,7 @@
422
432
  --hx-color-action-ghost-bg-hover: var(--hx-color-primary-900);
423
433
  --hx-body-bg: var(--hx-color-surface-default);
424
434
  --hx-body-color: var(--hx-color-text-primary);
435
+ --hx-focus-ring-color: var(--hx-color-primary-400);
425
436
  --hx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
426
437
  --hx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
427
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
@@ -200,7 +200,10 @@
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."
@@ -435,7 +445,10 @@
435
445
  }
436
446
  },
437
447
  "focus": {
438
- "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
+ },
439
452
  "ring-width": { "value": "2px" },
440
453
  "ring-offset": { "value": "2px" },
441
454
  "ring-style": { "value": "solid" },
@@ -623,8 +636,23 @@
623
636
  "border": {
624
637
  "default": { "value": "var(--hx-color-neutral-700)" },
625
638
  "subtle": { "value": "var(--hx-color-neutral-800)" },
626
- "strong": { "value": "var(--hx-color-neutral-500)" },
627
- "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
+ }
628
656
  },
629
657
  "focus-ring": { "value": "var(--hx-color-primary-400)" },
630
658
  "selection": {
@@ -632,7 +660,13 @@
632
660
  "color": { "value": "var(--hx-color-neutral-100)" }
633
661
  },
634
662
  "action": {
635
- "_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
+ },
636
670
  "secondary": {
637
671
  "fg": {
638
672
  "value": "var(--hx-color-primary-400)",
@@ -663,6 +697,12 @@
663
697
  "bg": { "value": "var(--hx-color-surface-default)" },
664
698
  "color": { "value": "var(--hx-color-text-primary)" }
665
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
+ },
666
706
  "shadow": {
667
707
  "sm": { "value": "0 1px 2px 0 rgb(0 0 0 / 0.3)" },
668
708
  "md": { "value": "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)" },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helixui/tokens",
3
- "version": "3.2.0-next.91",
3
+ "version": "3.2.0-next.96",
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
@@ -200,7 +200,10 @@
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."
@@ -435,7 +445,10 @@
435
445
  }
436
446
  },
437
447
  "focus": {
438
- "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
+ },
439
452
  "ring-width": { "value": "2px" },
440
453
  "ring-offset": { "value": "2px" },
441
454
  "ring-style": { "value": "solid" },
@@ -623,8 +636,23 @@
623
636
  "border": {
624
637
  "default": { "value": "var(--hx-color-neutral-700)" },
625
638
  "subtle": { "value": "var(--hx-color-neutral-800)" },
626
- "strong": { "value": "var(--hx-color-neutral-500)" },
627
- "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
+ }
628
656
  },
629
657
  "focus-ring": { "value": "var(--hx-color-primary-400)" },
630
658
  "selection": {
@@ -632,7 +660,13 @@
632
660
  "color": { "value": "var(--hx-color-neutral-100)" }
633
661
  },
634
662
  "action": {
635
- "_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
+ },
636
670
  "secondary": {
637
671
  "fg": {
638
672
  "value": "var(--hx-color-primary-400)",
@@ -663,6 +697,12 @@
663
697
  "bg": { "value": "var(--hx-color-surface-default)" },
664
698
  "color": { "value": "var(--hx-color-text-primary)" }
665
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
+ },
666
706
  "shadow": {
667
707
  "sm": { "value": "0 1px 2px 0 rgb(0 0 0 / 0.3)" },
668
708
  "md": { "value": "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)" },