@helixui/tokens 3.2.0-next.76 → 3.2.0-next.78

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 +179 -0
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/tokens.css +54 -0
  4. package/dist/tokens.json +183 -4
  5. package/package.json +1 -1
  6. package/src/tokens.json +183 -4
package/dist/index.d.ts CHANGED
@@ -337,6 +337,18 @@ export declare const tokens: {
337
337
  value: string;
338
338
  description: string;
339
339
  };
340
+ "on-primary-strong": {
341
+ value: string;
342
+ description: string;
343
+ };
344
+ "on-success-strong": {
345
+ value: string;
346
+ description: string;
347
+ };
348
+ "on-error-strong": {
349
+ value: string;
350
+ description: string;
351
+ };
340
352
  link: {
341
353
  value: string;
342
354
  };
@@ -375,6 +387,22 @@ export declare const tokens: {
375
387
  overlay: {
376
388
  value: string;
377
389
  };
390
+ "success-strong": {
391
+ value: string;
392
+ description: string;
393
+ };
394
+ "warning-strong": {
395
+ value: string;
396
+ description: string;
397
+ };
398
+ "danger-strong": {
399
+ value: string;
400
+ description: string;
401
+ };
402
+ "info-strong": {
403
+ value: string;
404
+ description: string;
405
+ };
378
406
  };
379
407
  border: {
380
408
  default: {
@@ -389,6 +417,18 @@ export declare const tokens: {
389
417
  focus: {
390
418
  value: string;
391
419
  };
420
+ "on-dark-strong": {
421
+ value: string;
422
+ description: string;
423
+ };
424
+ "on-dark-default": {
425
+ value: string;
426
+ description: string;
427
+ };
428
+ "on-dark-subtle": {
429
+ value: string;
430
+ description: string;
431
+ };
392
432
  };
393
433
  "focus-ring": {
394
434
  value: string;
@@ -401,6 +441,65 @@ export declare const tokens: {
401
441
  value: string;
402
442
  };
403
443
  };
444
+ action: {
445
+ _comment: string;
446
+ primary: {
447
+ bg: {
448
+ value: string;
449
+ description: string;
450
+ };
451
+ "bg-hover": {
452
+ value: string;
453
+ description: string;
454
+ };
455
+ "bg-active": {
456
+ value: string;
457
+ description: string;
458
+ };
459
+ "bg-inverted-hover": {
460
+ value: string;
461
+ description: string;
462
+ };
463
+ };
464
+ secondary: {
465
+ fg: {
466
+ value: string;
467
+ description: string;
468
+ };
469
+ border: {
470
+ value: string;
471
+ description: string;
472
+ };
473
+ "bg-hover": {
474
+ value: string;
475
+ description: string;
476
+ };
477
+ };
478
+ ghost: {
479
+ fg: {
480
+ value: string;
481
+ description: string;
482
+ };
483
+ "bg-hover": {
484
+ value: string;
485
+ description: string;
486
+ };
487
+ };
488
+ danger: {
489
+ bg: {
490
+ value: string;
491
+ description: string;
492
+ };
493
+ "bg-hover": {
494
+ value: string;
495
+ description: string;
496
+ };
497
+ "bg-active": {
498
+ value: string;
499
+ description: string;
500
+ };
501
+ };
502
+ };
404
503
  };
405
504
  body: {
406
505
  bg: {
@@ -1137,6 +1236,7 @@ export declare const tokens: {
1137
1236
  };
1138
1237
  };
1139
1238
  surface: {
1239
+ _comment: string;
1140
1240
  default: {
1141
1241
  value: string;
1142
1242
  };
@@ -1178,6 +1278,33 @@ export declare const tokens: {
1178
1278
  value: string;
1179
1279
  };
1180
1280
  };
1281
+ action: {
1282
+ _comment: string;
1283
+ secondary: {
1284
+ fg: {
1285
+ value: string;
1286
+ description: string;
1287
+ };
1288
+ border: {
1289
+ value: string;
1290
+ description: string;
1291
+ };
1292
+ "bg-hover": {
1293
+ value: string;
1294
+ description: string;
1295
+ };
1296
+ };
1297
+ ghost: {
1298
+ fg: {
1299
+ value: string;
1300
+ description: string;
1301
+ };
1302
+ "bg-hover": {
1303
+ value: string;
1304
+ description: string;
1305
+ };
1306
+ };
1307
+ };
1181
1308
  };
1182
1309
  body: {
1183
1310
  bg: {
@@ -1331,6 +1458,18 @@ export declare const tokens: {
1331
1458
  value: string;
1332
1459
  description: string;
1333
1460
  };
1461
+ "on-primary-strong": {
1462
+ value: string;
1463
+ description: string;
1464
+ };
1465
+ "on-error-strong": {
1466
+ value: string;
1467
+ description: string;
1468
+ };
1469
+ "on-success-strong": {
1470
+ value: string;
1471
+ description: string;
1472
+ };
1334
1473
  link: {
1335
1474
  value: string;
1336
1475
  description: string;
@@ -1364,6 +1503,22 @@ export declare const tokens: {
1364
1503
  overlay: {
1365
1504
  value: string;
1366
1505
  };
1506
+ "success-strong": {
1507
+ value: string;
1508
+ description: string;
1509
+ };
1510
+ "warning-strong": {
1511
+ value: string;
1512
+ description: string;
1513
+ };
1514
+ "danger-strong": {
1515
+ value: string;
1516
+ description: string;
1517
+ };
1518
+ "info-strong": {
1519
+ value: string;
1520
+ description: string;
1521
+ };
1367
1522
  };
1368
1523
  border: {
1369
1524
  default: {
@@ -1380,6 +1535,18 @@ export declare const tokens: {
1380
1535
  value: string;
1381
1536
  description: string;
1382
1537
  };
1538
+ "on-dark-strong": {
1539
+ value: string;
1540
+ description: string;
1541
+ };
1542
+ "on-dark-default": {
1543
+ value: string;
1544
+ description: string;
1545
+ };
1546
+ "on-dark-subtle": {
1547
+ value: string;
1548
+ description: string;
1549
+ };
1383
1550
  };
1384
1551
  "focus-ring": {
1385
1552
  value: string;
@@ -1394,6 +1561,15 @@ export declare const tokens: {
1394
1561
  value: string;
1395
1562
  };
1396
1563
  };
1564
+ action: {
1565
+ _comment: string;
1566
+ danger: {
1567
+ "bg-active": {
1568
+ value: string;
1569
+ description: string;
1570
+ };
1571
+ };
1572
+ };
1397
1573
  };
1398
1574
  body: {
1399
1575
  bg: {
@@ -1933,6 +2109,8 @@ export declare const tokens: {
1933
2109
  "--hx-nav-item-hover-bg": null;
1934
2110
  "--hx-nav-item-hover-color": null;
1935
2111
  "--hx-nav-item-padding": null;
2112
+ "--hx-nav-item-tooltip-bg": null;
2113
+ "--hx-nav-item-tooltip-color": null;
1936
2114
  "--hx-nav-link-active-bg": null;
1937
2115
  "--hx-nav-link-active-color": null;
1938
2116
  "--hx-nav-link-color": null;
@@ -2090,6 +2268,7 @@ export declare const tokens: {
2090
2268
  "--hx-side-nav-footer-padding": null;
2091
2269
  "--hx-side-nav-header-padding": null;
2092
2270
  "--hx-side-nav-toggle-color": null;
2271
+ "--hx-side-nav-toggle-hover-color": null;
2093
2272
  "--hx-side-nav-width": null;
2094
2273
  };
2095
2274
  "hx-skeleton": {
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
@@ -101,6 +101,9 @@
101
101
  --hx-color-text-on-success: var(--hx-color-neutral-900);
102
102
  --hx-color-text-on-warning: var(--hx-color-neutral-900);
103
103
  --hx-color-text-on-info: var(--hx-color-neutral-900);
104
+ --hx-color-text-on-primary-strong: var(--hx-color-neutral-0);
105
+ --hx-color-text-on-success-strong: var(--hx-color-neutral-0);
106
+ --hx-color-text-on-error-strong: var(--hx-color-neutral-0);
104
107
  --hx-color-text-link: var(--hx-color-primary-600);
105
108
  --hx-color-text-link-hover: var(--hx-color-primary-700);
106
109
  --hx-color-text-link-visited: var(--hx-color-secondary-600);
@@ -112,13 +115,32 @@
112
115
  --hx-color-surface-sunken: var(--hx-color-neutral-100);
113
116
  --hx-color-surface-inverse: var(--hx-color-neutral-900);
114
117
  --hx-color-surface-overlay: rgba(0, 0, 0, 0.75);
118
+ --hx-color-surface-success-strong: var(--hx-color-success-700);
119
+ --hx-color-surface-warning-strong: var(--hx-color-warning-500);
120
+ --hx-color-surface-danger-strong: var(--hx-color-error-600);
121
+ --hx-color-surface-info-strong: var(--hx-color-primary-600);
115
122
  --hx-color-border-default: var(--hx-color-neutral-200);
116
123
  --hx-color-border-subtle: var(--hx-color-neutral-100);
117
124
  --hx-color-border-strong: var(--hx-color-neutral-400);
118
125
  --hx-color-border-focus: var(--hx-color-primary-500);
126
+ --hx-color-border-on-dark-strong: var(--hx-overlay-white-70);
127
+ --hx-color-border-on-dark-default: var(--hx-overlay-white-30);
128
+ --hx-color-border-on-dark-subtle: var(--hx-overlay-white-10);
119
129
  --hx-color-focus-ring: var(--hx-color-primary-400);
120
130
  --hx-color-selection-bg: var(--hx-color-primary-200);
121
131
  --hx-color-selection-color: var(--hx-color-neutral-900);
132
+ --hx-color-action-primary-bg: var(--hx-color-primary-500);
133
+ --hx-color-action-primary-bg-hover: var(--hx-color-primary-600);
134
+ --hx-color-action-primary-bg-active: var(--hx-color-primary-700);
135
+ --hx-color-action-primary-bg-inverted-hover: var(--hx-color-primary-400);
136
+ --hx-color-action-secondary-fg: var(--hx-color-primary-600);
137
+ --hx-color-action-secondary-border: var(--hx-color-primary-600);
138
+ --hx-color-action-secondary-bg-hover: var(--hx-color-primary-50);
139
+ --hx-color-action-ghost-fg: var(--hx-color-primary-600);
140
+ --hx-color-action-ghost-bg-hover: var(--hx-color-primary-50);
141
+ --hx-color-action-danger-bg: var(--hx-color-error-500);
142
+ --hx-color-action-danger-bg-hover: var(--hx-color-error-600);
143
+ --hx-color-action-danger-bg-active: var(--hx-color-error-700);
122
144
  --hx-body-bg: var(--hx-color-surface-default);
123
145
  --hx-body-color: var(--hx-color-text-primary);
124
146
  --hx-body-font-family: var(--hx-font-family-sans);
@@ -351,6 +373,11 @@
351
373
  --hx-color-focus-ring: var(--hx-color-primary-400);
352
374
  --hx-color-selection-bg: var(--hx-color-primary-800);
353
375
  --hx-color-selection-color: var(--hx-color-neutral-100);
376
+ --hx-color-action-secondary-fg: var(--hx-color-primary-400);
377
+ --hx-color-action-secondary-border: var(--hx-color-primary-400);
378
+ --hx-color-action-secondary-bg-hover: var(--hx-color-primary-900);
379
+ --hx-color-action-ghost-fg: var(--hx-color-primary-400);
380
+ --hx-color-action-ghost-bg-hover: var(--hx-color-primary-900);
354
381
  --hx-body-bg: var(--hx-color-surface-default);
355
382
  --hx-body-color: var(--hx-color-text-primary);
356
383
  --hx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
@@ -387,6 +414,11 @@
387
414
  --hx-color-focus-ring: var(--hx-color-primary-400);
388
415
  --hx-color-selection-bg: var(--hx-color-primary-800);
389
416
  --hx-color-selection-color: var(--hx-color-neutral-100);
417
+ --hx-color-action-secondary-fg: var(--hx-color-primary-400);
418
+ --hx-color-action-secondary-border: var(--hx-color-primary-400);
419
+ --hx-color-action-secondary-bg-hover: var(--hx-color-primary-900);
420
+ --hx-color-action-ghost-fg: var(--hx-color-primary-400);
421
+ --hx-color-action-ghost-bg-hover: var(--hx-color-primary-900);
390
422
  --hx-body-bg: var(--hx-color-surface-default);
391
423
  --hx-body-color: var(--hx-color-text-primary);
392
424
  --hx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
@@ -426,6 +458,9 @@
426
458
  --hx-color-text-on-success: #000000;
427
459
  --hx-color-text-on-warning: #000000;
428
460
  --hx-color-text-on-info: #000000;
461
+ --hx-color-text-on-primary-strong: #000000;
462
+ --hx-color-text-on-error-strong: #000000;
463
+ --hx-color-text-on-success-strong: #000000;
429
464
  --hx-color-text-link: #FFFF00;
430
465
  --hx-color-text-link-hover: #FFFF99;
431
466
  --hx-color-text-link-visited: #FF80FF;
@@ -435,13 +470,21 @@
435
470
  --hx-color-surface-sunken: #000000;
436
471
  --hx-color-surface-inverse: #FFFFFF;
437
472
  --hx-color-surface-overlay: rgba(0, 0, 0, 0.95);
473
+ --hx-color-surface-success-strong: var(--hx-color-success-500);
474
+ --hx-color-surface-warning-strong: var(--hx-color-warning-500);
475
+ --hx-color-surface-danger-strong: var(--hx-color-error-500);
476
+ --hx-color-surface-info-strong: var(--hx-color-primary-500);
438
477
  --hx-color-border-default: #FFFFFF;
439
478
  --hx-color-border-subtle: #C0C0C0;
440
479
  --hx-color-border-strong: #FFFFFF;
441
480
  --hx-color-border-focus: #FFFF00;
481
+ --hx-color-border-on-dark-strong: #FFFFFF;
482
+ --hx-color-border-on-dark-default: #FFFFFF;
483
+ --hx-color-border-on-dark-subtle: #C0C0C0;
442
484
  --hx-color-focus-ring: #FFFF00;
443
485
  --hx-color-selection-bg: #1AEBFF;
444
486
  --hx-color-selection-color: #000000;
487
+ --hx-color-action-danger-bg-active: var(--hx-color-error-500);
445
488
  --hx-body-bg: #000000;
446
489
  --hx-body-color: #FFFFFF;
447
490
  --hx-focus-ring-color: #FFFF00;
@@ -491,6 +534,9 @@
491
534
  --hx-color-text-on-success: #000000;
492
535
  --hx-color-text-on-warning: #000000;
493
536
  --hx-color-text-on-info: #000000;
537
+ --hx-color-text-on-primary-strong: #000000;
538
+ --hx-color-text-on-error-strong: #000000;
539
+ --hx-color-text-on-success-strong: #000000;
494
540
  --hx-color-text-link: #FFFF00;
495
541
  --hx-color-text-link-hover: #FFFF99;
496
542
  --hx-color-text-link-visited: #FF80FF;
@@ -500,13 +546,21 @@
500
546
  --hx-color-surface-sunken: #000000;
501
547
  --hx-color-surface-inverse: #FFFFFF;
502
548
  --hx-color-surface-overlay: rgba(0, 0, 0, 0.95);
549
+ --hx-color-surface-success-strong: var(--hx-color-success-500);
550
+ --hx-color-surface-warning-strong: var(--hx-color-warning-500);
551
+ --hx-color-surface-danger-strong: var(--hx-color-error-500);
552
+ --hx-color-surface-info-strong: var(--hx-color-primary-500);
503
553
  --hx-color-border-default: #FFFFFF;
504
554
  --hx-color-border-subtle: #C0C0C0;
505
555
  --hx-color-border-strong: #FFFFFF;
506
556
  --hx-color-border-focus: #FFFF00;
557
+ --hx-color-border-on-dark-strong: #FFFFFF;
558
+ --hx-color-border-on-dark-default: #FFFFFF;
559
+ --hx-color-border-on-dark-subtle: #C0C0C0;
507
560
  --hx-color-focus-ring: #FFFF00;
508
561
  --hx-color-selection-bg: #1AEBFF;
509
562
  --hx-color-selection-color: #000000;
563
+ --hx-color-action-danger-bg-active: var(--hx-color-error-500);
510
564
  --hx-body-bg: #000000;
511
565
  --hx-body-color: #FFFFFF;
512
566
  --hx-focus-ring-color: #FFFF00;
package/dist/tokens.json CHANGED
@@ -146,6 +146,18 @@
146
146
  "value": "var(--hx-color-neutral-900)",
147
147
  "description": "Dark text on info surface. neutral-0 on the precision-cool info-500 (#0C8BEB) was 3.55:1 — WCAG AA fail. neutral-900 on info-500 = 5.03:1 (AA pass)."
148
148
  },
149
+ "on-primary-strong": {
150
+ "value": "var(--hx-color-neutral-0)",
151
+ "description": "White text override for primary surfaces darker than primary-500 (i.e. primary-600 hover, primary-700 active). The AA-tuned text.on-primary (neutral-900) only meets AA against primary-500; on primary-600 (#0F7078) it drops to 2.04:1 and on primary-700 (#0F6363) to 1.79:1 — both AA fails. neutral-0 on primary-600 = 4.84:1 (AA pass) and on primary-700 = 5.93:1 (AA pass). Added in 3.2.1 to remediate the token-cascade campaign findings where component variants were pinning to neutral-0 directly to escape this exact AA gap; routes the white-on-darker-primary pin through the semantic tier instead of the raw primitive."
152
+ },
153
+ "on-success-strong": {
154
+ "value": "var(--hx-color-neutral-0)",
155
+ "description": "White text override for success surfaces darker than success-500 (i.e. the success-700 #146831 fill that hx-toast--success and other emphasis-success surfaces paint). The AA-tuned text.on-success (neutral-900) only meets AA against success-500 (#3B9E58 = 4.94:1); on success-700 it drops to 1.62:1 — AA fail. neutral-0 on success-700 = 6.88:1 AA pass. Sister token to text.on-primary-strong / text.on-error-strong; same 3.2.1 token-cascade rationale (route the white-on-darker-success pin through the semantic tier instead of letting components consume neutral-0 directly)."
156
+ },
157
+ "on-error-strong": {
158
+ "value": "var(--hx-color-neutral-0)",
159
+ "description": "White text override for error surfaces darker than error-500 (i.e. error-600 hover, error-700 active). The AA-tuned text.on-error (neutral-900) only meets AA against error-500; on error-600 (#C92A2A) it drops to 1.85:1 and on error-700 (#A21312) to 1.26:1 — both AA fails. neutral-0 on error-600 = 5.32:1 (AA pass) and on error-700 = 7.81:1 (AA pass). Sister token to text.on-primary-strong; same 3.2.1 token-cascade remediation rationale."
160
+ },
149
161
  "link": { "value": "var(--hx-color-primary-600)" },
150
162
  "link-hover": { "value": "var(--hx-color-primary-700)" },
151
163
  "link-visited": { "value": "var(--hx-color-secondary-600)" },
@@ -167,18 +179,105 @@
167
179
  "value": "var(--hx-color-neutral-900)",
168
180
  "description": "Inverse surface for dark-always components (tooltips, inverse nav). Flips to a light surface in dark mode; uses system Canvas in forced-colors."
169
181
  },
170
- "overlay": { "value": "rgba(0, 0, 0, 0.75)" }
182
+ "overlay": { "value": "rgba(0, 0, 0, 0.75)" },
183
+ "success-strong": {
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."
186
+ },
187
+ "warning-strong": {
188
+ "value": "var(--hx-color-warning-500)",
189
+ "description": "Emphasis warning surface for high-prominence components (e.g. hx-toast--warning). Pairs with text.on-warning (neutral-900) for AA — neutral-900 on warning-500 (#C2711C) = 4.83:1. Stays on the lighter -500 stop because warning's on-token contract is tuned for it; see toast variant rationale."
190
+ },
191
+ "danger-strong": {
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.92: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."
194
+ },
195
+ "info-strong": {
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.39:1. Tracks action.primary.bg-hover by value but exposed under surface.* so toasts/banners consume a surface semantic, not an action-state semantic."
198
+ }
171
199
  },
172
200
  "border": {
173
201
  "default": { "value": "var(--hx-color-neutral-200)" },
174
202
  "subtle": { "value": "var(--hx-color-neutral-100)" },
175
203
  "strong": { "value": "var(--hx-color-neutral-400)" },
176
- "focus": { "value": "var(--hx-color-primary-500)" }
204
+ "focus": { "value": "var(--hx-color-primary-500)" },
205
+ "on-dark-strong": {
206
+ "value": "var(--hx-overlay-white-70)",
207
+ "description": "Strong border treatment on dark surfaces (e.g. inverted button outlines on a dark page). Routes overlay-white-70 through the semantic tier so component-level inverted-border rules don't bind to raw overlay primitives. Added in 3.2.1 alongside the action.* layer for the token-cascade remediation."
208
+ },
209
+ "on-dark-default": {
210
+ "value": "var(--hx-overlay-white-30)",
211
+ "description": "Default border treatment on dark surfaces (inverted secondary/ghost outlines, divider borders inside dark panels). Overlay-mediated so the border tints itself against whatever sits underneath rather than fighting it with a hard color."
212
+ },
213
+ "on-dark-subtle": {
214
+ "value": "var(--hx-overlay-white-10)",
215
+ "description": "Subtle border treatment on dark surfaces (low-emphasis dividers inside dark panels)."
216
+ }
177
217
  },
178
218
  "focus-ring": { "value": "var(--hx-color-primary-400)" },
179
219
  "selection": {
180
220
  "bg": { "value": "var(--hx-color-primary-200)" },
181
221
  "color": { "value": "var(--hx-color-neutral-900)" }
222
+ },
223
+ "action": {
224
+ "_comment": "Semantic action surfaces — the interactive-state layer between the primitive ramp (color.{role}.{stop}) and component-tier overrides (--hx-{component}-bg, --hx-{component}-hover-bg, etc). Pre-3.2.1, components reached straight to ramp stops (e.g. --hx-button-bg: var(--hx-color-primary-500)) which violated the three-tier cascade contract — consumers had no themable hook between the primitive and the component. The token-cascade campaign found 21 high-severity bare-primitive consumptions across hx-button, hx-toast, and hx-side-nav/hx-nav-item; this block is the systemic fix. Components rebind their --hx-{component}-bg etc. through these semantics so theme overrides at the action.* tier propagate everywhere.",
225
+ "primary": {
226
+ "bg": {
227
+ "value": "var(--hx-color-primary-500)",
228
+ "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
+ },
230
+ "bg-hover": {
231
+ "value": "var(--hx-color-primary-600)",
232
+ "description": "Hover state for interactive primary surfaces. Pairs with text.on-primary-strong (neutral-0) for AA — primary-600 on neutral-0 = 4.84:1."
233
+ },
234
+ "bg-active": {
235
+ "value": "var(--hx-color-primary-700)",
236
+ "description": "Active/pressed state for interactive primary surfaces. Pairs with text.on-primary-strong (neutral-0) — primary-700 on neutral-0 = 5.93:1 AA."
237
+ },
238
+ "bg-inverted-hover": {
239
+ "value": "var(--hx-color-primary-400)",
240
+ "description": "Hover state for primary surfaces that live on a dark/inverted background — flips lighter rather than darker so the affordance reads against an already-dark page. Matches the precision-cool inverted-button hover pattern in hx-button."
241
+ }
242
+ },
243
+ "secondary": {
244
+ "fg": {
245
+ "value": "var(--hx-color-primary-600)",
246
+ "description": "Foreground (text + icon) color for resting secondary/outline interactive treatments. primary-600 on surface.default = 5.20:1 AA."
247
+ },
248
+ "border": {
249
+ "value": "var(--hx-color-primary-600)",
250
+ "description": "Border color for resting secondary/outline interactive treatments. Matches action.secondary.fg so the affordance reads as a single chromatic outline."
251
+ },
252
+ "bg-hover": {
253
+ "value": "var(--hx-color-primary-50)",
254
+ "description": "Hover surface fill for secondary/outline interactive treatments — the lightest primary tint (#EBF8F8) so the hover affordance is felt without flipping to a full primary fill. Foreground stays bound to action.secondary.fg in the consuming component."
255
+ }
256
+ },
257
+ "ghost": {
258
+ "fg": {
259
+ "value": "var(--hx-color-primary-600)",
260
+ "description": "Foreground color for resting ghost (text-only, no border) interactive treatments. Shares its value with action.secondary.fg by design — ghost is secondary minus the outline — but kept as a separate semantic so theming can diverge if a brand wants ghost ≠ secondary."
261
+ },
262
+ "bg-hover": {
263
+ "value": "var(--hx-color-primary-50)",
264
+ "description": "Hover surface fill for ghost interactive treatments. Mirrors action.secondary.bg-hover; same divergence rationale."
265
+ }
266
+ },
267
+ "danger": {
268
+ "bg": {
269
+ "value": "var(--hx-color-error-500)",
270
+ "description": "Resting interactive danger surface (destructive button bg, danger toast bg). Pairs with text.on-error (neutral-900, AA-tuned) on error-500."
271
+ },
272
+ "bg-hover": {
273
+ "value": "var(--hx-color-error-600)",
274
+ "description": "Hover state for danger surfaces. Pairs with text.on-error-strong (neutral-0) for AA — error-600 on neutral-0 = 5.32:1."
275
+ },
276
+ "bg-active": {
277
+ "value": "var(--hx-color-error-700)",
278
+ "description": "Active/pressed state for danger surfaces. Pairs with text.on-error-strong (neutral-0) — error-700 on neutral-0 = 7.81:1 AA."
279
+ }
280
+ }
182
281
  }
183
282
  },
184
283
  "body": {
@@ -510,6 +609,7 @@
510
609
  "link-active": { "value": "var(--hx-color-primary-200)" }
511
610
  },
512
611
  "surface": {
612
+ "_comment": "Dark-mode surface.{role}-strong tokens intentionally do NOT flip — emphasis brand fills remain brand-colored against the dark page, matching the action.{primary,danger}.bg pattern (see action._comment above). The base light values resolve through the same primitives in dark mode.",
513
613
  "default": { "value": "var(--hx-color-neutral-900)" },
514
614
  "raised": { "value": "var(--hx-color-neutral-800)" },
515
615
  "sunken": { "value": "var(--hx-color-neutral-950)" },
@@ -526,6 +626,33 @@
526
626
  "selection": {
527
627
  "bg": { "value": "var(--hx-color-primary-800)" },
528
628
  "color": { "value": "var(--hx-color-neutral-100)" }
629
+ },
630
+ "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).",
632
+ "secondary": {
633
+ "fg": {
634
+ "value": "var(--hx-color-primary-400)",
635
+ "description": "Dark-mode action.secondary.fg flips to primary-400 (#6AB1B1) — primary-600 on dark surface.default = 3.07:1 (AA fail). primary-400 = 7.18:1 (AA pass). Mirrors dark.text.link's primary-600→primary-400 flip."
636
+ },
637
+ "border": {
638
+ "value": "var(--hx-color-primary-400)",
639
+ "description": "Dark-mode action.secondary.border tracks the fg flip so the outline reads as a single chromatic affordance."
640
+ },
641
+ "bg-hover": {
642
+ "value": "var(--hx-color-primary-900)",
643
+ "description": "Dark-mode hover surface — primary-50 (light fill) on a dark page would be too bright. primary-900 (#0B3232) gives action.secondary.fg (primary-400 = #6AB1B1) on primary-900 = 5.97:1, AA pass. primary-800 was tested first but only reaches 4.14:1, just shy of the body-text floor."
644
+ }
645
+ },
646
+ "ghost": {
647
+ "fg": {
648
+ "value": "var(--hx-color-primary-400)",
649
+ "description": "Dark-mode action.ghost.fg flips to primary-400 alongside action.secondary.fg (same AA gap, same fix)."
650
+ },
651
+ "bg-hover": {
652
+ "value": "var(--hx-color-primary-900)",
653
+ "description": "Dark-mode action.ghost.bg-hover mirrors action.secondary.bg-hover (primary-900 for AA headroom over primary-800)."
654
+ }
655
+ }
529
656
  }
530
657
  },
531
658
  "body": {
@@ -598,6 +725,18 @@
598
725
  "on-success": { "value": "#000000", "description": "Black text on bright HC success" },
599
726
  "on-warning": { "value": "#000000", "description": "Black text on bright HC warning" },
600
727
  "on-info": { "value": "#000000", "description": "Black text on bright HC info" },
728
+ "on-primary-strong": {
729
+ "value": "#000000",
730
+ "description": "HC override for text.on-primary-strong. The light/dark value (neutral-0 / white) is unreadable on HC primary-600 (#60A5FA) and primary-700 (#93C5FD), which are bright fills. Black on HC primary-600 = 10.09:1, on HC primary-700 = 13.02:1 — both AAA. Mirrors the existing on-primary HC override pattern."
731
+ },
732
+ "on-error-strong": {
733
+ "value": "#000000",
734
+ "description": "HC override for text.on-error-strong. White is unreadable on HC error-600 (#FCA5A5 — light red). Black on HC error-600 = 10.07:1, AAA. action.danger.bg-active also has its own HC override (flips to HC error-500) so the base error-700 stop is never paired with this token at runtime; both pairings are asserted in the regression matrix."
735
+ },
736
+ "on-success-strong": {
737
+ "value": "#000000",
738
+ "description": "HC override for text.on-success-strong. The light/dark value (neutral-0 / white) is unreadable on the HC bright-fill success surfaces. Black on HC success-500 (#4ADE80) = 9.21:1 AA pass. Sister token to on-primary-strong / on-error-strong HC overrides."
739
+ },
601
740
  "link": { "value": "#FFFF00", "description": "19.56:1 contrast on #000 — high visibility" },
602
741
  "link-hover": { "value": "#FFFF99", "description": "High-contrast hover link" },
603
742
  "link-visited": { "value": "#FF80FF", "description": "High-contrast visited link" },
@@ -611,18 +750,55 @@
611
750
  "value": "#FFFFFF",
612
751
  "description": "Inverse of HC canvas — white surface for dark-always components in HC mode"
613
752
  },
614
- "overlay": { "value": "rgba(0, 0, 0, 0.95)" }
753
+ "overlay": { "value": "rgba(0, 0, 0, 0.95)" },
754
+ "success-strong": {
755
+ "value": "var(--hx-color-success-500)",
756
+ "description": "HC override for surface.success-strong. Light/dark resolves to success-700 (#146831) which is too dark to read against the HC #000 canvas as a fill. Flip to HC success-500 (#4ADE80, 10.25:1 on #000) so emphasis success surfaces remain visible. Pairs with text.inverse (HC = #000000) for 9.21:1 AA pass."
757
+ },
758
+ "warning-strong": {
759
+ "value": "var(--hx-color-warning-500)",
760
+ "description": "HC override for surface.warning-strong. Resolves to HC warning-500 (#FBBF24) — bright yellow visible against the HC canvas. Pairs with text.on-warning (HC = #000000) for 13.73:1 AAA."
761
+ },
762
+ "danger-strong": {
763
+ "value": "var(--hx-color-error-500)",
764
+ "description": "HC override for surface.danger-strong. Light/dark resolves to error-600 which has no HC override (palette gap); flip to HC error-500 (#FCA5A5 — bright red) for visibility on the HC canvas. Pairs with text.inverse (HC = #000000) for AA."
765
+ },
766
+ "info-strong": {
767
+ "value": "var(--hx-color-primary-500)",
768
+ "description": "HC override for surface.info-strong. Light/dark resolves to primary-600; HC has no primary-600 override yet, so pin to HC primary-500 (#60A5FA) for visibility on the canvas. Pairs with text.inverse (HC = #000000) for AA."
769
+ }
615
770
  },
616
771
  "border": {
617
772
  "default": { "value": "#FFFFFF", "description": "21:1 contrast on #000" },
618
773
  "subtle": { "value": "#C0C0C0" },
619
774
  "strong": { "value": "#FFFFFF" },
620
- "focus": { "value": "#FFFF00", "description": "High-visibility yellow focus — WCAG 2.4.7" }
775
+ "focus": { "value": "#FFFF00", "description": "High-visibility yellow focus — WCAG 2.4.7" },
776
+ "on-dark-strong": {
777
+ "value": "#FFFFFF",
778
+ "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."
779
+ },
780
+ "on-dark-default": {
781
+ "value": "#FFFFFF",
782
+ "description": "HC override for border.on-dark-default. Same rationale as on-dark-strong; HC requires solid borders rather than translucent overlays."
783
+ },
784
+ "on-dark-subtle": {
785
+ "value": "#C0C0C0",
786
+ "description": "HC override for border.on-dark-subtle. Matches HC border.subtle so subtle dividers stay distinguishable from the strong tier in HC."
787
+ }
621
788
  },
622
789
  "focus-ring": { "value": "#FFFF00", "description": "High-visibility yellow focus ring" },
623
790
  "selection": {
624
791
  "bg": { "value": "#1AEBFF", "description": "High-contrast cyan selection" },
625
792
  "color": { "value": "#000000" }
793
+ },
794
+ "action": {
795
+ "_comment": "HC overrides for the action.* layer. Filled action surfaces in HC must paint a bright system-aligned fill so text.on-{role}-strong (HC = #000000) reads at AA. Without these overrides the base error-700 / primary-700 stops resolve unchanged in HC and pair with #000 at sub-AA ratios (Codex token-cascade finding: text.on-error-strong × action.danger.bg-active = 2.56:1 on base error-700).",
796
+ "danger": {
797
+ "bg-active": {
798
+ "value": "var(--hx-color-error-500)",
799
+ "description": "HC override for action.danger.bg-active. Base error-700 (#A21312) has no HC override, so HC consumers paint black on #A21312 = 2.56:1 — AA fail. Flip to HC error-500 (#F87171, 6.45:1 on #000) so danger pressed states pair with text.on-error-strong (HC = #000000) at AA. Mirrors surface.danger-strong HC pattern (also flips to error-500)."
800
+ }
801
+ }
626
802
  }
627
803
  },
628
804
  "body": {
@@ -1130,6 +1306,8 @@
1130
1306
  "--hx-nav-item-hover-bg": null,
1131
1307
  "--hx-nav-item-hover-color": null,
1132
1308
  "--hx-nav-item-padding": null,
1309
+ "--hx-nav-item-tooltip-bg": null,
1310
+ "--hx-nav-item-tooltip-color": null,
1133
1311
  "--hx-nav-link-active-bg": null,
1134
1312
  "--hx-nav-link-active-color": null,
1135
1313
  "--hx-nav-link-color": null,
@@ -1287,6 +1465,7 @@
1287
1465
  "--hx-side-nav-footer-padding": null,
1288
1466
  "--hx-side-nav-header-padding": null,
1289
1467
  "--hx-side-nav-toggle-color": null,
1468
+ "--hx-side-nav-toggle-hover-color": null,
1290
1469
  "--hx-side-nav-width": null
1291
1470
  },
1292
1471
  "hx-skeleton": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helixui/tokens",
3
- "version": "3.2.0-next.76",
3
+ "version": "3.2.0-next.78",
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
@@ -146,6 +146,18 @@
146
146
  "value": "var(--hx-color-neutral-900)",
147
147
  "description": "Dark text on info surface. neutral-0 on the precision-cool info-500 (#0C8BEB) was 3.55:1 — WCAG AA fail. neutral-900 on info-500 = 5.03:1 (AA pass)."
148
148
  },
149
+ "on-primary-strong": {
150
+ "value": "var(--hx-color-neutral-0)",
151
+ "description": "White text override for primary surfaces darker than primary-500 (i.e. primary-600 hover, primary-700 active). The AA-tuned text.on-primary (neutral-900) only meets AA against primary-500; on primary-600 (#0F7078) it drops to 2.04:1 and on primary-700 (#0F6363) to 1.79:1 — both AA fails. neutral-0 on primary-600 = 4.84:1 (AA pass) and on primary-700 = 5.93:1 (AA pass). Added in 3.2.1 to remediate the token-cascade campaign findings where component variants were pinning to neutral-0 directly to escape this exact AA gap; routes the white-on-darker-primary pin through the semantic tier instead of the raw primitive."
152
+ },
153
+ "on-success-strong": {
154
+ "value": "var(--hx-color-neutral-0)",
155
+ "description": "White text override for success surfaces darker than success-500 (i.e. the success-700 #146831 fill that hx-toast--success and other emphasis-success surfaces paint). The AA-tuned text.on-success (neutral-900) only meets AA against success-500 (#3B9E58 = 4.94:1); on success-700 it drops to 1.62:1 — AA fail. neutral-0 on success-700 = 6.88:1 AA pass. Sister token to text.on-primary-strong / text.on-error-strong; same 3.2.1 token-cascade rationale (route the white-on-darker-success pin through the semantic tier instead of letting components consume neutral-0 directly)."
156
+ },
157
+ "on-error-strong": {
158
+ "value": "var(--hx-color-neutral-0)",
159
+ "description": "White text override for error surfaces darker than error-500 (i.e. error-600 hover, error-700 active). The AA-tuned text.on-error (neutral-900) only meets AA against error-500; on error-600 (#C92A2A) it drops to 1.85:1 and on error-700 (#A21312) to 1.26:1 — both AA fails. neutral-0 on error-600 = 5.32:1 (AA pass) and on error-700 = 7.81:1 (AA pass). Sister token to text.on-primary-strong; same 3.2.1 token-cascade remediation rationale."
160
+ },
149
161
  "link": { "value": "var(--hx-color-primary-600)" },
150
162
  "link-hover": { "value": "var(--hx-color-primary-700)" },
151
163
  "link-visited": { "value": "var(--hx-color-secondary-600)" },
@@ -167,18 +179,105 @@
167
179
  "value": "var(--hx-color-neutral-900)",
168
180
  "description": "Inverse surface for dark-always components (tooltips, inverse nav). Flips to a light surface in dark mode; uses system Canvas in forced-colors."
169
181
  },
170
- "overlay": { "value": "rgba(0, 0, 0, 0.75)" }
182
+ "overlay": { "value": "rgba(0, 0, 0, 0.75)" },
183
+ "success-strong": {
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."
186
+ },
187
+ "warning-strong": {
188
+ "value": "var(--hx-color-warning-500)",
189
+ "description": "Emphasis warning surface for high-prominence components (e.g. hx-toast--warning). Pairs with text.on-warning (neutral-900) for AA — neutral-900 on warning-500 (#C2711C) = 4.83:1. Stays on the lighter -500 stop because warning's on-token contract is tuned for it; see toast variant rationale."
190
+ },
191
+ "danger-strong": {
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.92: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."
194
+ },
195
+ "info-strong": {
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.39:1. Tracks action.primary.bg-hover by value but exposed under surface.* so toasts/banners consume a surface semantic, not an action-state semantic."
198
+ }
171
199
  },
172
200
  "border": {
173
201
  "default": { "value": "var(--hx-color-neutral-200)" },
174
202
  "subtle": { "value": "var(--hx-color-neutral-100)" },
175
203
  "strong": { "value": "var(--hx-color-neutral-400)" },
176
- "focus": { "value": "var(--hx-color-primary-500)" }
204
+ "focus": { "value": "var(--hx-color-primary-500)" },
205
+ "on-dark-strong": {
206
+ "value": "var(--hx-overlay-white-70)",
207
+ "description": "Strong border treatment on dark surfaces (e.g. inverted button outlines on a dark page). Routes overlay-white-70 through the semantic tier so component-level inverted-border rules don't bind to raw overlay primitives. Added in 3.2.1 alongside the action.* layer for the token-cascade remediation."
208
+ },
209
+ "on-dark-default": {
210
+ "value": "var(--hx-overlay-white-30)",
211
+ "description": "Default border treatment on dark surfaces (inverted secondary/ghost outlines, divider borders inside dark panels). Overlay-mediated so the border tints itself against whatever sits underneath rather than fighting it with a hard color."
212
+ },
213
+ "on-dark-subtle": {
214
+ "value": "var(--hx-overlay-white-10)",
215
+ "description": "Subtle border treatment on dark surfaces (low-emphasis dividers inside dark panels)."
216
+ }
177
217
  },
178
218
  "focus-ring": { "value": "var(--hx-color-primary-400)" },
179
219
  "selection": {
180
220
  "bg": { "value": "var(--hx-color-primary-200)" },
181
221
  "color": { "value": "var(--hx-color-neutral-900)" }
222
+ },
223
+ "action": {
224
+ "_comment": "Semantic action surfaces — the interactive-state layer between the primitive ramp (color.{role}.{stop}) and component-tier overrides (--hx-{component}-bg, --hx-{component}-hover-bg, etc). Pre-3.2.1, components reached straight to ramp stops (e.g. --hx-button-bg: var(--hx-color-primary-500)) which violated the three-tier cascade contract — consumers had no themable hook between the primitive and the component. The token-cascade campaign found 21 high-severity bare-primitive consumptions across hx-button, hx-toast, and hx-side-nav/hx-nav-item; this block is the systemic fix. Components rebind their --hx-{component}-bg etc. through these semantics so theme overrides at the action.* tier propagate everywhere.",
225
+ "primary": {
226
+ "bg": {
227
+ "value": "var(--hx-color-primary-500)",
228
+ "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
+ },
230
+ "bg-hover": {
231
+ "value": "var(--hx-color-primary-600)",
232
+ "description": "Hover state for interactive primary surfaces. Pairs with text.on-primary-strong (neutral-0) for AA — primary-600 on neutral-0 = 4.84:1."
233
+ },
234
+ "bg-active": {
235
+ "value": "var(--hx-color-primary-700)",
236
+ "description": "Active/pressed state for interactive primary surfaces. Pairs with text.on-primary-strong (neutral-0) — primary-700 on neutral-0 = 5.93:1 AA."
237
+ },
238
+ "bg-inverted-hover": {
239
+ "value": "var(--hx-color-primary-400)",
240
+ "description": "Hover state for primary surfaces that live on a dark/inverted background — flips lighter rather than darker so the affordance reads against an already-dark page. Matches the precision-cool inverted-button hover pattern in hx-button."
241
+ }
242
+ },
243
+ "secondary": {
244
+ "fg": {
245
+ "value": "var(--hx-color-primary-600)",
246
+ "description": "Foreground (text + icon) color for resting secondary/outline interactive treatments. primary-600 on surface.default = 5.20:1 AA."
247
+ },
248
+ "border": {
249
+ "value": "var(--hx-color-primary-600)",
250
+ "description": "Border color for resting secondary/outline interactive treatments. Matches action.secondary.fg so the affordance reads as a single chromatic outline."
251
+ },
252
+ "bg-hover": {
253
+ "value": "var(--hx-color-primary-50)",
254
+ "description": "Hover surface fill for secondary/outline interactive treatments — the lightest primary tint (#EBF8F8) so the hover affordance is felt without flipping to a full primary fill. Foreground stays bound to action.secondary.fg in the consuming component."
255
+ }
256
+ },
257
+ "ghost": {
258
+ "fg": {
259
+ "value": "var(--hx-color-primary-600)",
260
+ "description": "Foreground color for resting ghost (text-only, no border) interactive treatments. Shares its value with action.secondary.fg by design — ghost is secondary minus the outline — but kept as a separate semantic so theming can diverge if a brand wants ghost ≠ secondary."
261
+ },
262
+ "bg-hover": {
263
+ "value": "var(--hx-color-primary-50)",
264
+ "description": "Hover surface fill for ghost interactive treatments. Mirrors action.secondary.bg-hover; same divergence rationale."
265
+ }
266
+ },
267
+ "danger": {
268
+ "bg": {
269
+ "value": "var(--hx-color-error-500)",
270
+ "description": "Resting interactive danger surface (destructive button bg, danger toast bg). Pairs with text.on-error (neutral-900, AA-tuned) on error-500."
271
+ },
272
+ "bg-hover": {
273
+ "value": "var(--hx-color-error-600)",
274
+ "description": "Hover state for danger surfaces. Pairs with text.on-error-strong (neutral-0) for AA — error-600 on neutral-0 = 5.32:1."
275
+ },
276
+ "bg-active": {
277
+ "value": "var(--hx-color-error-700)",
278
+ "description": "Active/pressed state for danger surfaces. Pairs with text.on-error-strong (neutral-0) — error-700 on neutral-0 = 7.81:1 AA."
279
+ }
280
+ }
182
281
  }
183
282
  },
184
283
  "body": {
@@ -510,6 +609,7 @@
510
609
  "link-active": { "value": "var(--hx-color-primary-200)" }
511
610
  },
512
611
  "surface": {
612
+ "_comment": "Dark-mode surface.{role}-strong tokens intentionally do NOT flip — emphasis brand fills remain brand-colored against the dark page, matching the action.{primary,danger}.bg pattern (see action._comment above). The base light values resolve through the same primitives in dark mode.",
513
613
  "default": { "value": "var(--hx-color-neutral-900)" },
514
614
  "raised": { "value": "var(--hx-color-neutral-800)" },
515
615
  "sunken": { "value": "var(--hx-color-neutral-950)" },
@@ -526,6 +626,33 @@
526
626
  "selection": {
527
627
  "bg": { "value": "var(--hx-color-primary-800)" },
528
628
  "color": { "value": "var(--hx-color-neutral-100)" }
629
+ },
630
+ "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).",
632
+ "secondary": {
633
+ "fg": {
634
+ "value": "var(--hx-color-primary-400)",
635
+ "description": "Dark-mode action.secondary.fg flips to primary-400 (#6AB1B1) — primary-600 on dark surface.default = 3.07:1 (AA fail). primary-400 = 7.18:1 (AA pass). Mirrors dark.text.link's primary-600→primary-400 flip."
636
+ },
637
+ "border": {
638
+ "value": "var(--hx-color-primary-400)",
639
+ "description": "Dark-mode action.secondary.border tracks the fg flip so the outline reads as a single chromatic affordance."
640
+ },
641
+ "bg-hover": {
642
+ "value": "var(--hx-color-primary-900)",
643
+ "description": "Dark-mode hover surface — primary-50 (light fill) on a dark page would be too bright. primary-900 (#0B3232) gives action.secondary.fg (primary-400 = #6AB1B1) on primary-900 = 5.97:1, AA pass. primary-800 was tested first but only reaches 4.14:1, just shy of the body-text floor."
644
+ }
645
+ },
646
+ "ghost": {
647
+ "fg": {
648
+ "value": "var(--hx-color-primary-400)",
649
+ "description": "Dark-mode action.ghost.fg flips to primary-400 alongside action.secondary.fg (same AA gap, same fix)."
650
+ },
651
+ "bg-hover": {
652
+ "value": "var(--hx-color-primary-900)",
653
+ "description": "Dark-mode action.ghost.bg-hover mirrors action.secondary.bg-hover (primary-900 for AA headroom over primary-800)."
654
+ }
655
+ }
529
656
  }
530
657
  },
531
658
  "body": {
@@ -598,6 +725,18 @@
598
725
  "on-success": { "value": "#000000", "description": "Black text on bright HC success" },
599
726
  "on-warning": { "value": "#000000", "description": "Black text on bright HC warning" },
600
727
  "on-info": { "value": "#000000", "description": "Black text on bright HC info" },
728
+ "on-primary-strong": {
729
+ "value": "#000000",
730
+ "description": "HC override for text.on-primary-strong. The light/dark value (neutral-0 / white) is unreadable on HC primary-600 (#60A5FA) and primary-700 (#93C5FD), which are bright fills. Black on HC primary-600 = 10.09:1, on HC primary-700 = 13.02:1 — both AAA. Mirrors the existing on-primary HC override pattern."
731
+ },
732
+ "on-error-strong": {
733
+ "value": "#000000",
734
+ "description": "HC override for text.on-error-strong. White is unreadable on HC error-600 (#FCA5A5 — light red). Black on HC error-600 = 10.07:1, AAA. action.danger.bg-active also has its own HC override (flips to HC error-500) so the base error-700 stop is never paired with this token at runtime; both pairings are asserted in the regression matrix."
735
+ },
736
+ "on-success-strong": {
737
+ "value": "#000000",
738
+ "description": "HC override for text.on-success-strong. The light/dark value (neutral-0 / white) is unreadable on the HC bright-fill success surfaces. Black on HC success-500 (#4ADE80) = 9.21:1 AA pass. Sister token to on-primary-strong / on-error-strong HC overrides."
739
+ },
601
740
  "link": { "value": "#FFFF00", "description": "19.56:1 contrast on #000 — high visibility" },
602
741
  "link-hover": { "value": "#FFFF99", "description": "High-contrast hover link" },
603
742
  "link-visited": { "value": "#FF80FF", "description": "High-contrast visited link" },
@@ -611,18 +750,55 @@
611
750
  "value": "#FFFFFF",
612
751
  "description": "Inverse of HC canvas — white surface for dark-always components in HC mode"
613
752
  },
614
- "overlay": { "value": "rgba(0, 0, 0, 0.95)" }
753
+ "overlay": { "value": "rgba(0, 0, 0, 0.95)" },
754
+ "success-strong": {
755
+ "value": "var(--hx-color-success-500)",
756
+ "description": "HC override for surface.success-strong. Light/dark resolves to success-700 (#146831) which is too dark to read against the HC #000 canvas as a fill. Flip to HC success-500 (#4ADE80, 10.25:1 on #000) so emphasis success surfaces remain visible. Pairs with text.inverse (HC = #000000) for 9.21:1 AA pass."
757
+ },
758
+ "warning-strong": {
759
+ "value": "var(--hx-color-warning-500)",
760
+ "description": "HC override for surface.warning-strong. Resolves to HC warning-500 (#FBBF24) — bright yellow visible against the HC canvas. Pairs with text.on-warning (HC = #000000) for 13.73:1 AAA."
761
+ },
762
+ "danger-strong": {
763
+ "value": "var(--hx-color-error-500)",
764
+ "description": "HC override for surface.danger-strong. Light/dark resolves to error-600 which has no HC override (palette gap); flip to HC error-500 (#FCA5A5 — bright red) for visibility on the HC canvas. Pairs with text.inverse (HC = #000000) for AA."
765
+ },
766
+ "info-strong": {
767
+ "value": "var(--hx-color-primary-500)",
768
+ "description": "HC override for surface.info-strong. Light/dark resolves to primary-600; HC has no primary-600 override yet, so pin to HC primary-500 (#60A5FA) for visibility on the canvas. Pairs with text.inverse (HC = #000000) for AA."
769
+ }
615
770
  },
616
771
  "border": {
617
772
  "default": { "value": "#FFFFFF", "description": "21:1 contrast on #000" },
618
773
  "subtle": { "value": "#C0C0C0" },
619
774
  "strong": { "value": "#FFFFFF" },
620
- "focus": { "value": "#FFFF00", "description": "High-visibility yellow focus — WCAG 2.4.7" }
775
+ "focus": { "value": "#FFFF00", "description": "High-visibility yellow focus — WCAG 2.4.7" },
776
+ "on-dark-strong": {
777
+ "value": "#FFFFFF",
778
+ "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."
779
+ },
780
+ "on-dark-default": {
781
+ "value": "#FFFFFF",
782
+ "description": "HC override for border.on-dark-default. Same rationale as on-dark-strong; HC requires solid borders rather than translucent overlays."
783
+ },
784
+ "on-dark-subtle": {
785
+ "value": "#C0C0C0",
786
+ "description": "HC override for border.on-dark-subtle. Matches HC border.subtle so subtle dividers stay distinguishable from the strong tier in HC."
787
+ }
621
788
  },
622
789
  "focus-ring": { "value": "#FFFF00", "description": "High-visibility yellow focus ring" },
623
790
  "selection": {
624
791
  "bg": { "value": "#1AEBFF", "description": "High-contrast cyan selection" },
625
792
  "color": { "value": "#000000" }
793
+ },
794
+ "action": {
795
+ "_comment": "HC overrides for the action.* layer. Filled action surfaces in HC must paint a bright system-aligned fill so text.on-{role}-strong (HC = #000000) reads at AA. Without these overrides the base error-700 / primary-700 stops resolve unchanged in HC and pair with #000 at sub-AA ratios (Codex token-cascade finding: text.on-error-strong × action.danger.bg-active = 2.56:1 on base error-700).",
796
+ "danger": {
797
+ "bg-active": {
798
+ "value": "var(--hx-color-error-500)",
799
+ "description": "HC override for action.danger.bg-active. Base error-700 (#A21312) has no HC override, so HC consumers paint black on #A21312 = 2.56:1 — AA fail. Flip to HC error-500 (#F87171, 6.45:1 on #000) so danger pressed states pair with text.on-error-strong (HC = #000000) at AA. Mirrors surface.danger-strong HC pattern (also flips to error-500)."
800
+ }
801
+ }
626
802
  }
627
803
  },
628
804
  "body": {
@@ -1130,6 +1306,8 @@
1130
1306
  "--hx-nav-item-hover-bg": null,
1131
1307
  "--hx-nav-item-hover-color": null,
1132
1308
  "--hx-nav-item-padding": null,
1309
+ "--hx-nav-item-tooltip-bg": null,
1310
+ "--hx-nav-item-tooltip-color": null,
1133
1311
  "--hx-nav-link-active-bg": null,
1134
1312
  "--hx-nav-link-active-color": null,
1135
1313
  "--hx-nav-link-color": null,
@@ -1287,6 +1465,7 @@
1287
1465
  "--hx-side-nav-footer-padding": null,
1288
1466
  "--hx-side-nav-header-padding": null,
1289
1467
  "--hx-side-nav-toggle-color": null,
1468
+ "--hx-side-nav-toggle-hover-color": null,
1290
1469
  "--hx-side-nav-width": null
1291
1470
  },
1292
1471
  "hx-skeleton": {