@tensor_1/tokens 2.2.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 +48 -3
  4. package/build/css/tokens.css +30 -0
  5. package/build/tailwind/preset.cjs +18 -0
  6. package/build/tailwind/theme.css +18 -0
  7. package/build/ts/tokens.d.ts +1 -1
  8. package/build/ts/tokens.js +48 -0
  9. package/package.json +1 -1
  10. package/tokens/base/color.json +22 -1
  11. package/tokens/dark/color.json +15 -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
@@ -51,6 +51,23 @@
51
51
  --uix-danger-fg: #FFFFFF;
52
52
  --uix-danger-bg: #FFE4E6;
53
53
  --uix-danger-text: #C20012;
54
+ --uix-amber: #C98A1E;
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);
54
71
  --uix-success-solid: #10B981;
55
72
  --uix-warning-solid: #F59E0B;
56
73
  --uix-info-solid: #2563EB;
@@ -67,6 +84,7 @@
67
84
  --uix-row: #FFFFFF;
68
85
  --uix-row-alt: #FAFAFA;
69
86
  --uix-row-pinned-bg: #F4F7FF;
87
+ --uix-row-selected-bg: #DBEAFE;
70
88
  --uix-scrollbar-thumb: rgba(10,10,10,.20);
71
89
  --uix-scrollbar-thumb-hover: rgba(10,10,10,.34);
72
90
  --uix-scrollbar-track: transparent;
@@ -175,6 +193,17 @@
175
193
  --uix-danger-fg: #FFFFFF;
176
194
  --uix-danger-bg: rgba(220,38,38,.20);
177
195
  --uix-danger-text: #F87171;
196
+ --uix-amber: #E6B25C;
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;
178
207
  --uix-success-solid: #34D399;
179
208
  --uix-warning-solid: #FBBF24;
180
209
  --uix-info-solid: #3B82F6;
@@ -191,6 +220,7 @@
191
220
  --uix-row: #111111;
192
221
  --uix-row-alt: #161616;
193
222
  --uix-row-pinned-bg: rgba(48,128,255,.08);
223
+ --uix-row-selected-bg: rgba(48,128,255,.16);
194
224
  --uix-scrollbar-thumb: rgba(255,255,255,.18);
195
225
  --uix-scrollbar-thumb-hover: rgba(255,255,255,.30);
196
226
  --uix-highlight-top: inset 0 1px 0 rgba(255,255,255,.04);
@@ -839,6 +869,19 @@
839
869
  /* critical = the one SOLID fill (most urgent); muted = a quiet, chrome-less label */
840
870
  .uix-pill--critical { --tone-bg: var(--uix-danger); --tone-fg: var(--uix-danger-fg); --tone-dot: var(--uix-danger-fg); }
841
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); }
842
885
 
843
886
  /* outline treatment — transparent fill, tone-tinted border, tone-colored text. The border tints
844
887
  the tone hue (--tone-fg) at 40%; neutral/muted use the structural borders, critical reads strongest. */
@@ -868,7 +911,7 @@
868
911
  .uix-table tbody tr:nth-child(even) { background: var(--uix-row-alt); }
869
912
  .uix-table--no-zebra tbody tr, .uix-table--no-zebra tbody tr:nth-child(even) { background: var(--uix-row); }
870
913
  .uix-table tbody tr[data-pinned] { background: var(--uix-row-pinned-bg); }
871
- .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); }
872
915
  .uix-table tbody tr:hover { background: var(--uix-bg-hover); }
873
916
  /* density tiers — standard is the default td height above; data-density overrides it.
874
917
  .uix-table--compact kept as a back-compat alias. */
@@ -1041,8 +1084,10 @@
1041
1084
  @layer uix.components {
1042
1085
  .uix-meter { height: 8px; background: var(--uix-bg-active); border-radius: var(--uix-radius-pill); overflow: hidden; }
1043
1086
  .uix-meter__fill { height: 100%; border-radius: inherit; background: var(--uix-success); transition: width var(--uix-dur) var(--uix-ease-out); }
1044
- .uix-meter__fill[data-tone="warning"] { background: var(--uix-warning); }
1045
- .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); }
1046
1091
  }
1047
1092
  /* uix timeline / activity feed — depends only on --uix-* tokens. */
1048
1093
  @layer uix.components {
package/build/css/tokens.css CHANGED
@@ -40,6 +40,23 @@
40
40
  --uix-danger-fg: #FFFFFF;
41
41
  --uix-danger-bg: #FFE4E6;
42
42
  --uix-danger-text: #C20012;
43
+ --uix-amber: #C98A1E;
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);
43
60
  --uix-success-solid: #10B981;
44
61
  --uix-warning-solid: #F59E0B;
45
62
  --uix-info-solid: #2563EB;
@@ -56,6 +73,7 @@
56
73
  --uix-row: #FFFFFF;
57
74
  --uix-row-alt: #FAFAFA;
58
75
  --uix-row-pinned-bg: #F4F7FF;
76
+ --uix-row-selected-bg: #DBEAFE;
59
77
  --uix-scrollbar-thumb: rgba(10,10,10,.20);
60
78
  --uix-scrollbar-thumb-hover: rgba(10,10,10,.34);
61
79
  --uix-scrollbar-track: transparent;
@@ -164,6 +182,17 @@
164
182
  --uix-danger-fg: #FFFFFF;
165
183
  --uix-danger-bg: rgba(220,38,38,.20);
166
184
  --uix-danger-text: #F87171;
185
+ --uix-amber: #E6B25C;
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;
167
196
  --uix-success-solid: #34D399;
168
197
  --uix-warning-solid: #FBBF24;
169
198
  --uix-info-solid: #3B82F6;
@@ -180,6 +209,7 @@
180
209
  --uix-row: #111111;
181
210
  --uix-row-alt: #161616;
182
211
  --uix-row-pinned-bg: rgba(48,128,255,.08);
212
+ --uix-row-selected-bg: rgba(48,128,255,.16);
183
213
  --uix-scrollbar-thumb: rgba(255,255,255,.18);
184
214
  --uix-scrollbar-thumb-hover: rgba(255,255,255,.30);
185
215
  --uix-highlight-top: inset 0 1px 0 rgba(255,255,255,.04);
package/build/tailwind/preset.cjs CHANGED
@@ -41,6 +41,23 @@ module.exports = {
41
41
  "uix-danger-fg": "var(--uix-danger-fg)",
42
42
  "uix-danger-bg": "var(--uix-danger-bg)",
43
43
  "uix-danger-text": "var(--uix-danger-text)",
44
+ "uix-amber": "var(--uix-amber)",
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)",
44
61
  "uix-success-solid": "var(--uix-success-solid)",
45
62
  "uix-warning-solid": "var(--uix-warning-solid)",
46
63
  "uix-info-solid": "var(--uix-info-solid)",
@@ -57,6 +74,7 @@ module.exports = {
57
74
  "uix-row": "var(--uix-row)",
58
75
  "uix-row-alt": "var(--uix-row-alt)",
59
76
  "uix-row-pinned-bg": "var(--uix-row-pinned-bg)",
77
+ "uix-row-selected-bg": "var(--uix-row-selected-bg)",
60
78
  "uix-scrollbar-thumb": "var(--uix-scrollbar-thumb)",
61
79
  "uix-scrollbar-thumb-hover": "var(--uix-scrollbar-thumb-hover)",
62
80
  "uix-scrollbar-track": "var(--uix-scrollbar-track)",
package/build/tailwind/theme.css CHANGED
@@ -38,6 +38,23 @@
38
38
  --color-uix-danger-fg: var(--uix-danger-fg);
39
39
  --color-uix-danger-bg: var(--uix-danger-bg);
40
40
  --color-uix-danger-text: var(--uix-danger-text);
41
+ --color-uix-amber: var(--uix-amber);
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);
41
58
  --color-uix-success-solid: var(--uix-success-solid);
42
59
  --color-uix-warning-solid: var(--uix-warning-solid);
43
60
  --color-uix-info-solid: var(--uix-info-solid);
@@ -54,6 +71,7 @@
54
71
  --color-uix-row: var(--uix-row);
55
72
  --color-uix-row-alt: var(--uix-row-alt);
56
73
  --color-uix-row-pinned-bg: var(--uix-row-pinned-bg);
74
+ --color-uix-row-selected-bg: var(--uix-row-selected-bg);
57
75
  --color-uix-scrollbar-thumb: var(--uix-scrollbar-thumb);
58
76
  --color-uix-scrollbar-thumb-hover: var(--uix-scrollbar-thumb-hover);
59
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" | "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
@@ -41,6 +41,23 @@ export const cssVar = {
41
41
  "danger-fg": "var(--uix-danger-fg)",
42
42
  "danger-bg": "var(--uix-danger-bg)",
43
43
  "danger-text": "var(--uix-danger-text)",
44
+ "amber": "var(--uix-amber)",
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)",
44
61
  "success-solid": "var(--uix-success-solid)",
45
62
  "warning-solid": "var(--uix-warning-solid)",
46
63
  "info-solid": "var(--uix-info-solid)",
@@ -57,6 +74,7 @@ export const cssVar = {
57
74
  "row": "var(--uix-row)",
58
75
  "row-alt": "var(--uix-row-alt)",
59
76
  "row-pinned-bg": "var(--uix-row-pinned-bg)",
77
+ "row-selected-bg": "var(--uix-row-selected-bg)",
60
78
  "scrollbar-thumb": "var(--uix-scrollbar-thumb)",
61
79
  "scrollbar-thumb-hover": "var(--uix-scrollbar-thumb-hover)",
62
80
  "scrollbar-track": "var(--uix-scrollbar-track)",
@@ -170,6 +188,23 @@ export const light = {
170
188
  "danger-fg": "#FFFFFF",
171
189
  "danger-bg": "#FFE4E6",
172
190
  "danger-text": "#C20012",
191
+ "amber": "#C98A1E",
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)",
173
208
  "success-solid": "#10B981",
174
209
  "warning-solid": "#F59E0B",
175
210
  "info-solid": "#2563EB",
@@ -186,6 +221,7 @@ export const light = {
186
221
  "row": "#FFFFFF",
187
222
  "row-alt": "#FAFAFA",
188
223
  "row-pinned-bg": "#F4F7FF",
224
+ "row-selected-bg": "#DBEAFE",
189
225
  "scrollbar-thumb": "rgba(10,10,10,.20)",
190
226
  "scrollbar-thumb-hover": "rgba(10,10,10,.34)",
191
227
  "scrollbar-track": "transparent",
@@ -294,6 +330,17 @@ export const dark = {
294
330
  "danger-fg": "#FFFFFF",
295
331
  "danger-bg": "rgba(220,38,38,.20)",
296
332
  "danger-text": "#F87171",
333
+ "amber": "#E6B25C",
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",
297
344
  "success-solid": "#34D399",
298
345
  "warning-solid": "#FBBF24",
299
346
  "info-solid": "#3B82F6",
@@ -310,6 +357,7 @@ export const dark = {
310
357
  "row": "#111111",
311
358
  "row-alt": "#161616",
312
359
  "row-pinned-bg": "rgba(48,128,255,.08)",
360
+ "row-selected-bg": "rgba(48,128,255,.16)",
313
361
  "scrollbar-thumb": "rgba(255,255,255,.18)",
314
362
  "scrollbar-thumb-hover": "rgba(255,255,255,.30)",
315
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.2.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
@@ -39,6 +39,26 @@
39
39
  "danger-fg": { "$type": "color", "$value": "#FFFFFF" },
40
40
  "danger-bg": { "$type": "color", "$value": "#FFE4E6" },
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
+ "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
+ "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)" },
42
62
 
43
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." },
44
64
  "warning-solid": { "$type": "color", "$value": "#F59E0B", "$description": "SOLID status role (see success-solid)." },
@@ -57,7 +77,8 @@
57
77
 
58
78
  "row": { "$type": "color", "$value": "#FFFFFF" },
59
79
  "row-alt": { "$type": "color", "$value": "#FAFAFA" },
60
- "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." },
61
82
 
62
83
  "scrollbar-thumb": { "$type": "color", "$value": "rgba(10,10,10,.20)" },
63
84
  "scrollbar-thumb-hover": { "$type": "color", "$value": "rgba(10,10,10,.34)" },
package/tokens/dark/color.json CHANGED
@@ -34,6 +34,19 @@
34
34
  "danger-fg": { "$type": "color", "$value": "#FFFFFF" },
35
35
  "danger-bg": { "$type": "color", "$value": "rgba(220,38,38,.20)" },
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
+ "amber": { "$type": "color", "$value": "#E6B25C", "$description": "SEV-3 tone lightened for dark surfaces (the light-mode ochre #C98A1E is too dark on dark)." },
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" },
37
50
 
38
51
  "success-solid": { "$type": "color", "$value": "#34D399" },
39
52
  "warning-solid": { "$type": "color", "$value": "#FBBF24" },
@@ -52,7 +65,8 @@
52
65
 
53
66
  "row": { "$type": "color", "$value": "#111111" },
54
67
  "row-alt": { "$type": "color", "$value": "#161616" },
55
- "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." },
56
70
 
57
71
  "scrollbar-thumb": { "$type": "color", "$value": "rgba(255,255,255,.18)" },
58
72
  "scrollbar-thumb-hover": { "$type": "color", "$value": "rgba(255,255,255,.30)" }