@tensor_1/tokens 2.3.0 → 2.4.0

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 (11) hide show
  1. package/README.md +14 -0
  2. package/build/css/components.css +18 -3
  3. package/build/css/styles.css +44 -3
  4. package/build/css/tokens.css +26 -0
  5. package/build/tailwind/preset.cjs +16 -0
  6. package/build/tailwind/theme.css +16 -0
  7. package/build/ts/tokens.d.ts +1 -1
  8. package/build/ts/tokens.js +42 -0
  9. package/package.json +1 -1
  10. package/tokens/base/color.json +20 -1
  11. package/tokens/dark/color.json +13 -1
package/README.md CHANGED
@@ -48,3 +48,17 @@ Override the write-only brand slots; `accent` / `link` / `ring` / `brand-muted`
48
48
  | `./themes/{tensor,posx,shopx,mission-control}` | per-product brand |
49
49
 
50
50
  Source of truth: `tokens/*.json` (DTCG) → [Style Dictionary](https://styledictionary.com). Part of the **[UIx v2 styleguide](https://github.com/COx-ORG-H/UIx)**.
51
+
52
+ ## Primitives — consume, don't fork
53
+
54
+ The following CSS primitives (and their `@tensor_1/react` wrappers) are the intended consumption point for the tokens below. If your codebase reimplements any of these, replace it with the primitive so theme/brand overrides, dark mode, and WCAG contrast all apply automatically.
55
+
56
+ | Primitive | CSS file | Key `--uix-*` tokens |
57
+ |---|---|---|
58
+ | Row selection | `table.css` `tr[aria-selected]` | `--uix-row-selected-bg` |
59
+ | Utilization / threshold bar | `meter.css` · `<Meter>` | `--uix-attention`, `--uix-overdue`, `--uix-warning`, `--uix-danger` |
60
+ | Triage inbox | `inbox.css` · `<Inbox>` / `<InboxItem>` | `--uix-brand-muted`, `--uix-accent` (accent stripe) |
61
+ | Status + SLA + priority pill | `status-pill.css` · `<StatusPill>` | `--uix-sla-ok/at-risk/breached`, `--uix-p1`…`--uix-p5`, `--uix-attention`, `--uix-overdue` |
62
+ | Entity detail related-panels | `<DetailLayout>` (`@tensor_1/react`) | `--uix-surface`, `--uix-border` |
63
+
64
+ If you reach for `var(--uix-danger)` or `var(--uix-warning)` to render SLA urgency or severity, use `<StatusPill tone="sla-breached">` or `<StatusPill tone="p1">` instead — the component handles WCAG contrast, dark mode, and brand overrides; a raw literal does not.
package/build/css/components.css CHANGED
@@ -580,6 +580,19 @@
580
580
  /* critical = the one SOLID fill (most urgent); muted = a quiet, chrome-less label */
581
581
  .uix-pill--critical { --tone-bg: var(--uix-danger); --tone-fg: var(--uix-danger-fg); --tone-dot: var(--uix-danger-fg); }
582
582
  .uix-pill--muted { --tone-bg: transparent; --tone-fg: var(--uix-text-muted); --tone-dot: var(--uix-text-muted); }
583
+ /* time-pressure tones (U1 tokens — distinct from severity and validation-error) */
584
+ .uix-pill--attention { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
585
+ .uix-pill--overdue { --tone-bg: var(--uix-overdue-bg); --tone-fg: var(--uix-overdue-text); --tone-dot: var(--uix-overdue); }
586
+ /* SLA tones — ok=success, at-risk=attention, breached=overdue */
587
+ .uix-pill--sla-ok { --tone-bg: var(--uix-success-bg); --tone-fg: var(--uix-success); --tone-dot: var(--uix-success); }
588
+ .uix-pill--sla-at-risk { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
589
+ .uix-pill--sla-breached { --tone-bg: var(--uix-overdue-bg); --tone-fg: var(--uix-overdue-text); --tone-dot: var(--uix-overdue); }
590
+ /* Priority/severity tones — P1=danger, P2=warning, P3=amber, P4=info, P5=neutral (complete 5-tier ramp) */
591
+ .uix-pill--p1 { --tone-bg: var(--uix-danger-bg); --tone-fg: var(--uix-danger-text); --tone-dot: var(--uix-danger); }
592
+ .uix-pill--p2 { --tone-bg: var(--uix-warning-bg); --tone-fg: var(--uix-warning-text); --tone-dot: var(--uix-warning); }
593
+ .uix-pill--p3 { --tone-bg: var(--uix-amber-bg); --tone-fg: var(--uix-amber-text); --tone-dot: var(--uix-amber); }
594
+ .uix-pill--p4 { --tone-bg: var(--uix-info-bg); --tone-fg: var(--uix-info-text); --tone-dot: var(--uix-info); }
595
+ .uix-pill--p5 { --tone-bg: var(--uix-bg-active); --tone-fg: var(--uix-text-hushed); --tone-dot: var(--uix-text-muted); }
583
596
 
584
597
  /* outline treatment — transparent fill, tone-tinted border, tone-colored text. The border tints
585
598
  the tone hue (--tone-fg) at 40%; neutral/muted use the structural borders, critical reads strongest. */
@@ -609,7 +622,7 @@
609
622
  .uix-table tbody tr:nth-child(even) { background: var(--uix-row-alt); }
610
623
  .uix-table--no-zebra tbody tr, .uix-table--no-zebra tbody tr:nth-child(even) { background: var(--uix-row); }
611
624
  .uix-table tbody tr[data-pinned] { background: var(--uix-row-pinned-bg); }
612
- .uix-table tbody tr[aria-selected="true"] { background: var(--uix-brand-muted); }
625
+ .uix-table tbody tr[aria-selected="true"] { background: var(--uix-row-selected-bg); }
613
626
  .uix-table tbody tr:hover { background: var(--uix-bg-hover); }
614
627
  /* density tiers — standard is the default td height above; data-density overrides it.
615
628
  .uix-table--compact kept as a back-compat alias. */
@@ -737,8 +750,10 @@
737
750
  @layer uix.components {
738
751
  .uix-meter { height: 8px; background: var(--uix-bg-active); border-radius: var(--uix-radius-pill); overflow: hidden; }
739
752
  .uix-meter__fill { height: 100%; border-radius: inherit; background: var(--uix-success); transition: width var(--uix-dur) var(--uix-ease-out); }
740
- .uix-meter__fill[data-tone="warning"] { background: var(--uix-warning); }
741
- .uix-meter__fill[data-tone="danger"] { background: var(--uix-danger); }
753
+ .uix-meter__fill[data-tone="warning"] { background: var(--uix-warning); }
754
+ .uix-meter__fill[data-tone="danger"] { background: var(--uix-danger); }
755
+ .uix-meter__fill[data-tone="attention"] { background: var(--uix-attention); }
756
+ .uix-meter__fill[data-tone="overdue"] { background: var(--uix-overdue); }
742
757
  }
743
758
  /* uix timeline / activity feed — depends only on --uix-* tokens. */
744
759
  @layer uix.components {
package/build/css/styles.css CHANGED
@@ -53,6 +53,21 @@
53
53
  --uix-danger-text: #C20012;
54
54
  --uix-amber: #C98A1E;
55
55
  --uix-amber-text: #795006;
56
+ --uix-amber-bg: #FEFCE8;
57
+ --uix-attention: #EA580C;
58
+ --uix-attention-bg: #FFEDD5;
59
+ --uix-attention-text: #9A3412;
60
+ --uix-attention-solid: #EA580C;
61
+ --uix-overdue: #DC2626;
62
+ --uix-overdue-bg: #FEE2E2;
63
+ --uix-overdue-text: #991B1B;
64
+ --uix-overdue-solid: #EF4444;
65
+ --uix-sev-4: var(--uix-info);
66
+ --uix-sev-4-bg: var(--uix-info-bg);
67
+ --uix-sev-4-text: var(--uix-info-text);
68
+ --uix-sev-5: var(--uix-text-muted);
69
+ --uix-sev-5-bg: var(--uix-bg-active);
70
+ --uix-sev-5-text: var(--uix-text-hushed);
56
71
  --uix-success-solid: #10B981;
57
72
  --uix-warning-solid: #F59E0B;
58
73
  --uix-info-solid: #2563EB;
@@ -69,6 +84,7 @@
69
84
  --uix-row: #FFFFFF;
70
85
  --uix-row-alt: #FAFAFA;
71
86
  --uix-row-pinned-bg: #F4F7FF;
87
+ --uix-row-selected-bg: #DBEAFE;
72
88
  --uix-scrollbar-thumb: rgba(10,10,10,.20);
73
89
  --uix-scrollbar-thumb-hover: rgba(10,10,10,.34);
74
90
  --uix-scrollbar-track: transparent;
@@ -179,6 +195,15 @@
179
195
  --uix-danger-text: #F87171;
180
196
  --uix-amber: #E6B25C;
181
197
  --uix-amber-text: #E6B25C;
198
+ --uix-amber-bg: rgba(201,138,30,.14);
199
+ --uix-attention: #FB923C;
200
+ --uix-attention-bg: rgba(234,88,12,.16);
201
+ --uix-attention-text: #FDBA74;
202
+ --uix-attention-solid: #F97316;
203
+ --uix-overdue: #F87171;
204
+ --uix-overdue-bg: rgba(220,38,38,.18);
205
+ --uix-overdue-text: #FCA5A5;
206
+ --uix-overdue-solid: #F87171;
182
207
  --uix-success-solid: #34D399;
183
208
  --uix-warning-solid: #FBBF24;
184
209
  --uix-info-solid: #3B82F6;
@@ -195,6 +220,7 @@
195
220
  --uix-row: #111111;
196
221
  --uix-row-alt: #161616;
197
222
  --uix-row-pinned-bg: rgba(48,128,255,.08);
223
+ --uix-row-selected-bg: rgba(48,128,255,.16);
198
224
  --uix-scrollbar-thumb: rgba(255,255,255,.18);
199
225
  --uix-scrollbar-thumb-hover: rgba(255,255,255,.30);
200
226
  --uix-highlight-top: inset 0 1px 0 rgba(255,255,255,.04);
@@ -843,6 +869,19 @@
843
869
  /* critical = the one SOLID fill (most urgent); muted = a quiet, chrome-less label */
844
870
  .uix-pill--critical { --tone-bg: var(--uix-danger); --tone-fg: var(--uix-danger-fg); --tone-dot: var(--uix-danger-fg); }
845
871
  .uix-pill--muted { --tone-bg: transparent; --tone-fg: var(--uix-text-muted); --tone-dot: var(--uix-text-muted); }
872
+ /* time-pressure tones (U1 tokens — distinct from severity and validation-error) */
873
+ .uix-pill--attention { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
874
+ .uix-pill--overdue { --tone-bg: var(--uix-overdue-bg); --tone-fg: var(--uix-overdue-text); --tone-dot: var(--uix-overdue); }
875
+ /* SLA tones — ok=success, at-risk=attention, breached=overdue */
876
+ .uix-pill--sla-ok { --tone-bg: var(--uix-success-bg); --tone-fg: var(--uix-success); --tone-dot: var(--uix-success); }
877
+ .uix-pill--sla-at-risk { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
878
+ .uix-pill--sla-breached { --tone-bg: var(--uix-overdue-bg); --tone-fg: var(--uix-overdue-text); --tone-dot: var(--uix-overdue); }
879
+ /* Priority/severity tones — P1=danger, P2=warning, P3=amber, P4=info, P5=neutral (complete 5-tier ramp) */
880
+ .uix-pill--p1 { --tone-bg: var(--uix-danger-bg); --tone-fg: var(--uix-danger-text); --tone-dot: var(--uix-danger); }
881
+ .uix-pill--p2 { --tone-bg: var(--uix-warning-bg); --tone-fg: var(--uix-warning-text); --tone-dot: var(--uix-warning); }
882
+ .uix-pill--p3 { --tone-bg: var(--uix-amber-bg); --tone-fg: var(--uix-amber-text); --tone-dot: var(--uix-amber); }
883
+ .uix-pill--p4 { --tone-bg: var(--uix-info-bg); --tone-fg: var(--uix-info-text); --tone-dot: var(--uix-info); }
884
+ .uix-pill--p5 { --tone-bg: var(--uix-bg-active); --tone-fg: var(--uix-text-hushed); --tone-dot: var(--uix-text-muted); }
846
885
 
847
886
  /* outline treatment — transparent fill, tone-tinted border, tone-colored text. The border tints
848
887
  the tone hue (--tone-fg) at 40%; neutral/muted use the structural borders, critical reads strongest. */
@@ -872,7 +911,7 @@
872
911
  .uix-table tbody tr:nth-child(even) { background: var(--uix-row-alt); }
873
912
  .uix-table--no-zebra tbody tr, .uix-table--no-zebra tbody tr:nth-child(even) { background: var(--uix-row); }
874
913
  .uix-table tbody tr[data-pinned] { background: var(--uix-row-pinned-bg); }
875
- .uix-table tbody tr[aria-selected="true"] { background: var(--uix-brand-muted); }
914
+ .uix-table tbody tr[aria-selected="true"] { background: var(--uix-row-selected-bg); }
876
915
  .uix-table tbody tr:hover { background: var(--uix-bg-hover); }
877
916
  /* density tiers — standard is the default td height above; data-density overrides it.
878
917
  .uix-table--compact kept as a back-compat alias. */
@@ -1045,8 +1084,10 @@
1045
1084
  @layer uix.components {
1046
1085
  .uix-meter { height: 8px; background: var(--uix-bg-active); border-radius: var(--uix-radius-pill); overflow: hidden; }
1047
1086
  .uix-meter__fill { height: 100%; border-radius: inherit; background: var(--uix-success); transition: width var(--uix-dur) var(--uix-ease-out); }
1048
- .uix-meter__fill[data-tone="warning"] { background: var(--uix-warning); }
1049
- .uix-meter__fill[data-tone="danger"] { background: var(--uix-danger); }
1087
+ .uix-meter__fill[data-tone="warning"] { background: var(--uix-warning); }
1088
+ .uix-meter__fill[data-tone="danger"] { background: var(--uix-danger); }
1089
+ .uix-meter__fill[data-tone="attention"] { background: var(--uix-attention); }
1090
+ .uix-meter__fill[data-tone="overdue"] { background: var(--uix-overdue); }
1050
1091
  }
1051
1092
  /* uix timeline / activity feed — depends only on --uix-* tokens. */
1052
1093
  @layer uix.components {
package/build/css/tokens.css CHANGED
@@ -42,6 +42,21 @@
42
42
  --uix-danger-text: #C20012;
43
43
  --uix-amber: #C98A1E;
44
44
  --uix-amber-text: #795006;
45
+ --uix-amber-bg: #FEFCE8;
46
+ --uix-attention: #EA580C;
47
+ --uix-attention-bg: #FFEDD5;
48
+ --uix-attention-text: #9A3412;
49
+ --uix-attention-solid: #EA580C;
50
+ --uix-overdue: #DC2626;
51
+ --uix-overdue-bg: #FEE2E2;
52
+ --uix-overdue-text: #991B1B;
53
+ --uix-overdue-solid: #EF4444;
54
+ --uix-sev-4: var(--uix-info);
55
+ --uix-sev-4-bg: var(--uix-info-bg);
56
+ --uix-sev-4-text: var(--uix-info-text);
57
+ --uix-sev-5: var(--uix-text-muted);
58
+ --uix-sev-5-bg: var(--uix-bg-active);
59
+ --uix-sev-5-text: var(--uix-text-hushed);
45
60
  --uix-success-solid: #10B981;
46
61
  --uix-warning-solid: #F59E0B;
47
62
  --uix-info-solid: #2563EB;
@@ -58,6 +73,7 @@
58
73
  --uix-row: #FFFFFF;
59
74
  --uix-row-alt: #FAFAFA;
60
75
  --uix-row-pinned-bg: #F4F7FF;
76
+ --uix-row-selected-bg: #DBEAFE;
61
77
  --uix-scrollbar-thumb: rgba(10,10,10,.20);
62
78
  --uix-scrollbar-thumb-hover: rgba(10,10,10,.34);
63
79
  --uix-scrollbar-track: transparent;
@@ -168,6 +184,15 @@
168
184
  --uix-danger-text: #F87171;
169
185
  --uix-amber: #E6B25C;
170
186
  --uix-amber-text: #E6B25C;
187
+ --uix-amber-bg: rgba(201,138,30,.14);
188
+ --uix-attention: #FB923C;
189
+ --uix-attention-bg: rgba(234,88,12,.16);
190
+ --uix-attention-text: #FDBA74;
191
+ --uix-attention-solid: #F97316;
192
+ --uix-overdue: #F87171;
193
+ --uix-overdue-bg: rgba(220,38,38,.18);
194
+ --uix-overdue-text: #FCA5A5;
195
+ --uix-overdue-solid: #F87171;
171
196
  --uix-success-solid: #34D399;
172
197
  --uix-warning-solid: #FBBF24;
173
198
  --uix-info-solid: #3B82F6;
@@ -184,6 +209,7 @@
184
209
  --uix-row: #111111;
185
210
  --uix-row-alt: #161616;
186
211
  --uix-row-pinned-bg: rgba(48,128,255,.08);
212
+ --uix-row-selected-bg: rgba(48,128,255,.16);
187
213
  --uix-scrollbar-thumb: rgba(255,255,255,.18);
188
214
  --uix-scrollbar-thumb-hover: rgba(255,255,255,.30);
189
215
  --uix-highlight-top: inset 0 1px 0 rgba(255,255,255,.04);
package/build/tailwind/preset.cjs CHANGED
@@ -43,6 +43,21 @@ module.exports = {
43
43
  "uix-danger-text": "var(--uix-danger-text)",
44
44
  "uix-amber": "var(--uix-amber)",
45
45
  "uix-amber-text": "var(--uix-amber-text)",
46
+ "uix-amber-bg": "var(--uix-amber-bg)",
47
+ "uix-attention": "var(--uix-attention)",
48
+ "uix-attention-bg": "var(--uix-attention-bg)",
49
+ "uix-attention-text": "var(--uix-attention-text)",
50
+ "uix-attention-solid": "var(--uix-attention-solid)",
51
+ "uix-overdue": "var(--uix-overdue)",
52
+ "uix-overdue-bg": "var(--uix-overdue-bg)",
53
+ "uix-overdue-text": "var(--uix-overdue-text)",
54
+ "uix-overdue-solid": "var(--uix-overdue-solid)",
55
+ "uix-sev-4": "var(--uix-sev-4)",
56
+ "uix-sev-4-bg": "var(--uix-sev-4-bg)",
57
+ "uix-sev-4-text": "var(--uix-sev-4-text)",
58
+ "uix-sev-5": "var(--uix-sev-5)",
59
+ "uix-sev-5-bg": "var(--uix-sev-5-bg)",
60
+ "uix-sev-5-text": "var(--uix-sev-5-text)",
46
61
  "uix-success-solid": "var(--uix-success-solid)",
47
62
  "uix-warning-solid": "var(--uix-warning-solid)",
48
63
  "uix-info-solid": "var(--uix-info-solid)",
@@ -59,6 +74,7 @@ module.exports = {
59
74
  "uix-row": "var(--uix-row)",
60
75
  "uix-row-alt": "var(--uix-row-alt)",
61
76
  "uix-row-pinned-bg": "var(--uix-row-pinned-bg)",
77
+ "uix-row-selected-bg": "var(--uix-row-selected-bg)",
62
78
  "uix-scrollbar-thumb": "var(--uix-scrollbar-thumb)",
63
79
  "uix-scrollbar-thumb-hover": "var(--uix-scrollbar-thumb-hover)",
64
80
  "uix-scrollbar-track": "var(--uix-scrollbar-track)",
package/build/tailwind/theme.css CHANGED
@@ -40,6 +40,21 @@
40
40
  --color-uix-danger-text: var(--uix-danger-text);
41
41
  --color-uix-amber: var(--uix-amber);
42
42
  --color-uix-amber-text: var(--uix-amber-text);
43
+ --color-uix-amber-bg: var(--uix-amber-bg);
44
+ --color-uix-attention: var(--uix-attention);
45
+ --color-uix-attention-bg: var(--uix-attention-bg);
46
+ --color-uix-attention-text: var(--uix-attention-text);
47
+ --color-uix-attention-solid: var(--uix-attention-solid);
48
+ --color-uix-overdue: var(--uix-overdue);
49
+ --color-uix-overdue-bg: var(--uix-overdue-bg);
50
+ --color-uix-overdue-text: var(--uix-overdue-text);
51
+ --color-uix-overdue-solid: var(--uix-overdue-solid);
52
+ --color-uix-sev-4: var(--uix-sev-4);
53
+ --color-uix-sev-4-bg: var(--uix-sev-4-bg);
54
+ --color-uix-sev-4-text: var(--uix-sev-4-text);
55
+ --color-uix-sev-5: var(--uix-sev-5);
56
+ --color-uix-sev-5-bg: var(--uix-sev-5-bg);
57
+ --color-uix-sev-5-text: var(--uix-sev-5-text);
43
58
  --color-uix-success-solid: var(--uix-success-solid);
44
59
  --color-uix-warning-solid: var(--uix-warning-solid);
45
60
  --color-uix-info-solid: var(--uix-info-solid);
@@ -56,6 +71,7 @@
56
71
  --color-uix-row: var(--uix-row);
57
72
  --color-uix-row-alt: var(--uix-row-alt);
58
73
  --color-uix-row-pinned-bg: var(--uix-row-pinned-bg);
74
+ --color-uix-row-selected-bg: var(--uix-row-selected-bg);
59
75
  --color-uix-scrollbar-thumb: var(--uix-scrollbar-thumb);
60
76
  --color-uix-scrollbar-thumb-hover: var(--uix-scrollbar-thumb-hover);
61
77
  --color-uix-scrollbar-track: var(--uix-scrollbar-track);
package/build/ts/tokens.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /* GENERATED — do not edit. */
2
- export type UixTokenName = "bg-app" | "bg-subtle" | "bg-hover" | "bg-active" | "surface" | "surface-2" | "surface-3" | "border" | "border-strong" | "text" | "text-hushed" | "text-muted" | "text-reverse" | "text-hushed-reverse" | "accent" | "accent-dark" | "accent-light" | "accent-hover" | "accent-fg" | "link" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-text" | "amber" | "amber-text" | "success-solid" | "warning-solid" | "info-solid" | "danger-solid" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "row" | "row-alt" | "row-pinned-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "shadow-sm" | "shadow-popover" | "shadow-overlay" | "highlight-top" | "ease-out" | "ease-out-strong" | "ease-in" | "ease-in-out" | "ease-spring" | "dur-fast" | "dur" | "dur-slow" | "dur-slower" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-comfortable" | "control-h" | "sidebar-w" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "space-0" | "space-1" | "space-2" | "space-3" | "space-4" | "space-5" | "space-6" | "space-7" | "space-8" | "space-9" | "space-10" | "space-11" | "space-12" | "font-sans" | "font-heading" | "font-mono" | "text-display" | "leading-display" | "text-data-hero" | "leading-data-hero" | "text-h2" | "leading-h2" | "text-h3" | "leading-h3" | "text-body" | "leading-body" | "text-meta" | "leading-meta" | "text-eyebrow" | "leading-eyebrow" | "tracking-tight" | "tracking-eyebrow";
2
+ export type UixTokenName = "bg-app" | "bg-subtle" | "bg-hover" | "bg-active" | "surface" | "surface-2" | "surface-3" | "border" | "border-strong" | "text" | "text-hushed" | "text-muted" | "text-reverse" | "text-hushed-reverse" | "accent" | "accent-dark" | "accent-light" | "accent-hover" | "accent-fg" | "link" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-text" | "amber" | "amber-text" | "amber-bg" | "attention" | "attention-bg" | "attention-text" | "attention-solid" | "overdue" | "overdue-bg" | "overdue-text" | "overdue-solid" | "sev-4" | "sev-4-bg" | "sev-4-text" | "sev-5" | "sev-5-bg" | "sev-5-text" | "success-solid" | "warning-solid" | "info-solid" | "danger-solid" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "shadow-sm" | "shadow-popover" | "shadow-overlay" | "highlight-top" | "ease-out" | "ease-out-strong" | "ease-in" | "ease-in-out" | "ease-spring" | "dur-fast" | "dur" | "dur-slow" | "dur-slower" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-comfortable" | "control-h" | "sidebar-w" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "space-0" | "space-1" | "space-2" | "space-3" | "space-4" | "space-5" | "space-6" | "space-7" | "space-8" | "space-9" | "space-10" | "space-11" | "space-12" | "font-sans" | "font-heading" | "font-mono" | "text-display" | "leading-display" | "text-data-hero" | "leading-data-hero" | "text-h2" | "leading-h2" | "text-h3" | "leading-h3" | "text-body" | "leading-body" | "text-meta" | "leading-meta" | "text-eyebrow" | "leading-eyebrow" | "tracking-tight" | "tracking-eyebrow";
3
3
  export declare const cssVar: Record<UixTokenName, string>;
4
4
  export declare const light: Record<UixTokenName, string>;
5
5
  export declare const dark: Partial<Record<UixTokenName, string>>;
package/build/ts/tokens.js CHANGED
@@ -43,6 +43,21 @@ export const cssVar = {
43
43
  "danger-text": "var(--uix-danger-text)",
44
44
  "amber": "var(--uix-amber)",
45
45
  "amber-text": "var(--uix-amber-text)",
46
+ "amber-bg": "var(--uix-amber-bg)",
47
+ "attention": "var(--uix-attention)",
48
+ "attention-bg": "var(--uix-attention-bg)",
49
+ "attention-text": "var(--uix-attention-text)",
50
+ "attention-solid": "var(--uix-attention-solid)",
51
+ "overdue": "var(--uix-overdue)",
52
+ "overdue-bg": "var(--uix-overdue-bg)",
53
+ "overdue-text": "var(--uix-overdue-text)",
54
+ "overdue-solid": "var(--uix-overdue-solid)",
55
+ "sev-4": "var(--uix-sev-4)",
56
+ "sev-4-bg": "var(--uix-sev-4-bg)",
57
+ "sev-4-text": "var(--uix-sev-4-text)",
58
+ "sev-5": "var(--uix-sev-5)",
59
+ "sev-5-bg": "var(--uix-sev-5-bg)",
60
+ "sev-5-text": "var(--uix-sev-5-text)",
46
61
  "success-solid": "var(--uix-success-solid)",
47
62
  "warning-solid": "var(--uix-warning-solid)",
48
63
  "info-solid": "var(--uix-info-solid)",
@@ -59,6 +74,7 @@ export const cssVar = {
59
74
  "row": "var(--uix-row)",
60
75
  "row-alt": "var(--uix-row-alt)",
61
76
  "row-pinned-bg": "var(--uix-row-pinned-bg)",
77
+ "row-selected-bg": "var(--uix-row-selected-bg)",
62
78
  "scrollbar-thumb": "var(--uix-scrollbar-thumb)",
63
79
  "scrollbar-thumb-hover": "var(--uix-scrollbar-thumb-hover)",
64
80
  "scrollbar-track": "var(--uix-scrollbar-track)",
@@ -174,6 +190,21 @@ export const light = {
174
190
  "danger-text": "#C20012",
175
191
  "amber": "#C98A1E",
176
192
  "amber-text": "#795006",
193
+ "amber-bg": "#FEFCE8",
194
+ "attention": "#EA580C",
195
+ "attention-bg": "#FFEDD5",
196
+ "attention-text": "#9A3412",
197
+ "attention-solid": "#EA580C",
198
+ "overdue": "#DC2626",
199
+ "overdue-bg": "#FEE2E2",
200
+ "overdue-text": "#991B1B",
201
+ "overdue-solid": "#EF4444",
202
+ "sev-4": "var(--uix-info)",
203
+ "sev-4-bg": "var(--uix-info-bg)",
204
+ "sev-4-text": "var(--uix-info-text)",
205
+ "sev-5": "var(--uix-text-muted)",
206
+ "sev-5-bg": "var(--uix-bg-active)",
207
+ "sev-5-text": "var(--uix-text-hushed)",
177
208
  "success-solid": "#10B981",
178
209
  "warning-solid": "#F59E0B",
179
210
  "info-solid": "#2563EB",
@@ -190,6 +221,7 @@ export const light = {
190
221
  "row": "#FFFFFF",
191
222
  "row-alt": "#FAFAFA",
192
223
  "row-pinned-bg": "#F4F7FF",
224
+ "row-selected-bg": "#DBEAFE",
193
225
  "scrollbar-thumb": "rgba(10,10,10,.20)",
194
226
  "scrollbar-thumb-hover": "rgba(10,10,10,.34)",
195
227
  "scrollbar-track": "transparent",
@@ -300,6 +332,15 @@ export const dark = {
300
332
  "danger-text": "#F87171",
301
333
  "amber": "#E6B25C",
302
334
  "amber-text": "#E6B25C",
335
+ "amber-bg": "rgba(201,138,30,.14)",
336
+ "attention": "#FB923C",
337
+ "attention-bg": "rgba(234,88,12,.16)",
338
+ "attention-text": "#FDBA74",
339
+ "attention-solid": "#F97316",
340
+ "overdue": "#F87171",
341
+ "overdue-bg": "rgba(220,38,38,.18)",
342
+ "overdue-text": "#FCA5A5",
343
+ "overdue-solid": "#F87171",
303
344
  "success-solid": "#34D399",
304
345
  "warning-solid": "#FBBF24",
305
346
  "info-solid": "#3B82F6",
@@ -316,6 +357,7 @@ export const dark = {
316
357
  "row": "#111111",
317
358
  "row-alt": "#161616",
318
359
  "row-pinned-bg": "rgba(48,128,255,.08)",
360
+ "row-selected-bg": "rgba(48,128,255,.16)",
319
361
  "scrollbar-thumb": "rgba(255,255,255,.18)",
320
362
  "scrollbar-thumb-hover": "rgba(255,255,255,.30)",
321
363
  "highlight-top": "inset 0 1px 0 rgba(255,255,255,.04)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tensor_1/tokens",
3
- "version": "2.3.0",
3
+ "version": "2.4.0",
4
4
  "description": "UIx v2 design tokens — the --uix-* contract for house products (Tensor, POSx, SHOPx). One DTCG source -> CSS variables, Tailwind theme, and typed TS constants.",
5
5
  "type": "module",
6
6
  "license": "UNLICENSED",
package/tokens/base/color.json CHANGED
@@ -41,6 +41,24 @@
41
41
  "danger-text": { "$type": "color", "$value": "#C20012", "$description": "Danger-toned TEXT, legible on --uix-danger-bg (the bright --uix-danger #E40014 is only 4.05:1 on #FFE4E6). A hand-darkened red for text; --uix-danger stays the SOLID role (danger button bg, critical pill, dots). Dark mode brightens it. Used by pill/alert/stat-trend/field-error/menu/sla/node/audit --danger." },
42
42
  "amber": { "$type": "color", "$value": "#C98A1E", "$description": "SEV-3 / medium-severity tone — the third tier of the severity ramp (danger = SEV-1, warning = SEV-2, amber = SEV-3). A muted ochre, deliberately distinct from the brighter --uix-warning so the three tiers read apart." },
43
43
  "amber-text": { "$type": "color", "$value": "#795006", "$description": "Amber-toned TEXT, legible on a faint amber tint and on dark surfaces (the SEV-3 ochre is too light as text on pale fills). Dark mode brightens it to track --uix-amber. Used by severity-3 badges." },
44
+ "amber-bg": { "$type": "color", "$value": "#FEFCE8", "$description": "Amber-toned wash for SEV-3 pill backgrounds. Completes the amber ramp (amber / amber-text / amber-bg) to match the depth of the warning/danger/info ramps." },
45
+
46
+ "attention": { "$type": "color", "$value": "#EA580C", "$description": "Time-pressure semantic — 'approaching deadline / SLA at risk'. Distinct from --uix-warning (validation-warning, golden #F99C00) and --uix-danger (error/severity). Covers SLA, renewal-due, EoL/EoS countdown, patch-overdue across modules." },
47
+ "attention-bg": { "$type": "color", "$value": "#FFEDD5" },
48
+ "attention-text": { "$type": "color", "$value": "#9A3412", "$description": "Attention-toned TEXT legible on --uix-attention-bg (#FFEDD5). Dark mode brightens to track --uix-attention." },
49
+ "attention-solid": { "$type": "color", "$value": "#EA580C", "$description": "SOLID role for attention fills/dots/pulses (see success-solid)." },
50
+
51
+ "overdue": { "$type": "color", "$value": "#DC2626", "$description": "Time-pressure semantic — 'breached / past due'. Same hue family as danger but a SEPARATE role so products retheme breach independently of validation error. Covers SLA breach and hard-deadline misses." },
52
+ "overdue-bg": { "$type": "color", "$value": "#FEE2E2" },
53
+ "overdue-text": { "$type": "color", "$value": "#991B1B", "$description": "Overdue-toned TEXT legible on --uix-overdue-bg (#FEE2E2). Dark mode brightens." },
54
+ "overdue-solid": { "$type": "color", "$value": "#EF4444", "$description": "SOLID role for overdue fills/dots (see success-solid)." },
55
+
56
+ "sev-4": { "$type": "color", "$value": "var(--uix-info)", "$description": "SEV-4 alias → info tone. Full severity ramp: SEV-1=danger, SEV-2=warning, SEV-3=amber, SEV-4=info, SEV-5=neutral. var() reference — no dark override needed." },
57
+ "sev-4-bg": { "$type": "color", "$value": "var(--uix-info-bg)" },
58
+ "sev-4-text": { "$type": "color", "$value": "var(--uix-info-text)" },
59
+ "sev-5": { "$type": "color", "$value": "var(--uix-text-muted)", "$description": "SEV-5 alias → neutral/muted tone. Lowest priority, minimal visual weight. var() reference — no dark override needed." },
60
+ "sev-5-bg": { "$type": "color", "$value": "var(--uix-bg-active)" },
61
+ "sev-5-text": { "$type": "color", "$value": "var(--uix-text-hushed)" },
44
62
 
45
63
  "success-solid": { "$type": "color", "$value": "#10B981", "$description": "SOLID status role — the vivid fill/dot/pulse color, distinct from the legible TEXT role (--uix-success). Products override per brand." },
46
64
  "warning-solid": { "$type": "color", "$value": "#F59E0B", "$description": "SOLID status role (see success-solid)." },
@@ -59,7 +77,8 @@
59
77
 
60
78
  "row": { "$type": "color", "$value": "#FFFFFF" },
61
79
  "row-alt": { "$type": "color", "$value": "#FAFAFA" },
62
- "row-pinned-bg": { "$type": "color", "$value": "#F4F7FF" },
80
+ "row-pinned-bg": { "$type": "color", "$value": "#F4F7FF" },
81
+ "row-selected-bg": { "$type": "color", "$value": "#DBEAFE", "$description": "Dedicated row-selection background (table tr[aria-selected]). Distinct from --uix-row-pinned-bg (#F4F7FF, very pale blue) and --uix-brand-muted (dynamic accent tint). Enables bulk-selected rows to read apart from pinned rows and inbox unread tints in the same table." },
63
82
 
64
83
  "scrollbar-thumb": { "$type": "color", "$value": "rgba(10,10,10,.20)" },
65
84
  "scrollbar-thumb-hover": { "$type": "color", "$value": "rgba(10,10,10,.34)" },
package/tokens/dark/color.json CHANGED
@@ -36,6 +36,17 @@
36
36
  "danger-text": { "$type": "color", "$value": "#F87171", "$description": "On dark, the deep --uix-danger #DC2626 fails as text on the faint danger tint and on plain surfaces — brightened so pill/field-error/stat-trend/menu/node/audit text reads AA. --uix-danger stays the solid critical-pill / button bg (with white --uix-danger-fg)." },
37
37
  "amber": { "$type": "color", "$value": "#E6B25C", "$description": "SEV-3 tone lightened for dark surfaces (the light-mode ochre #C98A1E is too dark on dark)." },
38
38
  "amber-text": { "$type": "color", "$value": "#E6B25C", "$description": "On dark the lightened amber reads as text directly — tracks --uix-amber." },
39
+ "amber-bg": { "$type": "color", "$value": "rgba(201,138,30,.14)" },
40
+
41
+ "attention": { "$type": "color", "$value": "#FB923C", "$description": "Orange-400 — brightened for dark surfaces (the light-mode #EA580C is too dark on dark)." },
42
+ "attention-bg": { "$type": "color", "$value": "rgba(234,88,12,.16)" },
43
+ "attention-text": { "$type": "color", "$value": "#FDBA74", "$description": "On dark, orange text tracks --uix-attention (brightened); reads AA on the faint attention-bg." },
44
+ "attention-solid": { "$type": "color", "$value": "#F97316" },
45
+
46
+ "overdue": { "$type": "color", "$value": "#F87171", "$description": "Red-400 — brightened overdue for dark surfaces (the light-mode #DC2626 fails on dark)." },
47
+ "overdue-bg": { "$type": "color", "$value": "rgba(220,38,38,.18)" },
48
+ "overdue-text": { "$type": "color", "$value": "#FCA5A5", "$description": "On dark, brightened red text reads AA on the faint overdue-bg." },
49
+ "overdue-solid": { "$type": "color", "$value": "#F87171" },
39
50
 
40
51
  "success-solid": { "$type": "color", "$value": "#34D399" },
41
52
  "warning-solid": { "$type": "color", "$value": "#FBBF24" },
@@ -54,7 +65,8 @@
54
65
 
55
66
  "row": { "$type": "color", "$value": "#111111" },
56
67
  "row-alt": { "$type": "color", "$value": "#161616" },
57
- "row-pinned-bg": { "$type": "color", "$value": "rgba(48,128,255,.08)" },
68
+ "row-pinned-bg": { "$type": "color", "$value": "rgba(48,128,255,.08)" },
69
+ "row-selected-bg": { "$type": "color", "$value": "rgba(48,128,255,.16)", "$description": "Dark-mode selection wash — stronger than row-pinned-bg (rgba(48,128,255,.08)) so selected rows read apart from pinned." },
58
70
 
59
71
  "scrollbar-thumb": { "$type": "color", "$value": "rgba(255,255,255,.18)" },
60
72
  "scrollbar-thumb-hover": { "$type": "color", "$value": "rgba(255,255,255,.30)" }