@tensor_1/tokens 2.19.2 → 2.20.0

package/build/css/tokens.css

@@ -33,6 +33,7 @@
     --uix-warning-fg: #1A1A1A;
     --uix-warning-bg: #FEF3D6;
     --uix-warning-text: #92400E;
+    --uix-warning-border: #D97706;
     --uix-info: #1447E6;
     --uix-info-fg: #FFFFFF;
     --uix-info-bg: #E3EBFF;
@@ -40,6 +41,7 @@
     --uix-danger: #E40014;
     --uix-danger-fg: #FFFFFF;
     --uix-danger-bg: #FFE4E6;
+    --uix-danger-border: #E40014;
     --uix-danger-text: #C20012;
     --uix-amber: #C98A1E;
     --uix-amber-text: #795006;
@@ -182,6 +184,7 @@
     --uix-warning: #FCBB00;
     --uix-warning-fg: #1A1A1A;
     --uix-warning-bg: rgba(249,156,0,.16);
+    --uix-warning-border: #CA8A04;
     --uix-warning-text: var(--uix-warning,#FCBB00);
     --uix-info: #2563EB;
     --uix-info-fg: #FFFFFF;
@@ -190,6 +193,7 @@
     --uix-danger: #DC2626;
     --uix-danger-fg: #FFFFFF;
     --uix-danger-bg: rgba(220,38,38,.20);
+    --uix-danger-border: #DC2626;
     --uix-danger-text: #F87171;
     --uix-amber: #E6B25C;
     --uix-amber-text: #E6B25C;

package/build/tailwind/preset.cjs

@@ -34,6 +34,7 @@ module.exports = {
       "uix-warning-fg": "var(--uix-warning-fg)",
       "uix-warning-bg": "var(--uix-warning-bg)",
       "uix-warning-text": "var(--uix-warning-text)",
+      "uix-warning-border": "var(--uix-warning-border)",
       "uix-info": "var(--uix-info)",
       "uix-info-fg": "var(--uix-info-fg)",
       "uix-info-bg": "var(--uix-info-bg)",
@@ -41,6 +42,7 @@ module.exports = {
       "uix-danger": "var(--uix-danger)",
       "uix-danger-fg": "var(--uix-danger-fg)",
       "uix-danger-bg": "var(--uix-danger-bg)",
+      "uix-danger-border": "var(--uix-danger-border)",
       "uix-danger-text": "var(--uix-danger-text)",
       "uix-amber": "var(--uix-amber)",
       "uix-amber-text": "var(--uix-amber-text)",

package/build/tailwind/theme.css

@@ -31,6 +31,7 @@
   --color-uix-warning-fg: var(--uix-warning-fg);
   --color-uix-warning-bg: var(--uix-warning-bg);
   --color-uix-warning-text: var(--uix-warning-text);
+  --color-uix-warning-border: var(--uix-warning-border);
   --color-uix-info: var(--uix-info);
   --color-uix-info-fg: var(--uix-info-fg);
   --color-uix-info-bg: var(--uix-info-bg);
@@ -38,6 +39,7 @@
   --color-uix-danger: var(--uix-danger);
   --color-uix-danger-fg: var(--uix-danger-fg);
   --color-uix-danger-bg: var(--uix-danger-bg);
+  --color-uix-danger-border: var(--uix-danger-border);
   --color-uix-danger-text: var(--uix-danger-text);
   --color-uix-amber: var(--uix-amber);
   --color-uix-amber-text: var(--uix-amber-text);

package/build/ts/tokens.d.ts

@@ -1,5 +1,5 @@
 /* GENERATED — do not edit. */
-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" | "accent-text" | "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" | "sidebar-w-rail" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "col-w-xs" | "col-w-sm" | "col-w-md" | "col-w-lg" | "col-w-xl" | "col-title-min" | "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";
+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" | "accent-text" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "warning-border" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-border" | "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" | "sidebar-w-rail" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "col-w-xs" | "col-w-sm" | "col-w-md" | "col-w-lg" | "col-w-xl" | "col-title-min" | "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";
 export declare const cssVar: Record<UixTokenName, string>;
 export declare const light: Record<UixTokenName, string>;
 export declare const dark: Partial<Record<UixTokenName, string>>;

package/build/ts/tokens.js

@@ -34,6 +34,7 @@ export const cssVar = {
   "warning-fg": "var(--uix-warning-fg)",
   "warning-bg": "var(--uix-warning-bg)",
   "warning-text": "var(--uix-warning-text)",
+  "warning-border": "var(--uix-warning-border)",
   "info": "var(--uix-info)",
   "info-fg": "var(--uix-info-fg)",
   "info-bg": "var(--uix-info-bg)",
@@ -41,6 +42,7 @@ export const cssVar = {
   "danger": "var(--uix-danger)",
   "danger-fg": "var(--uix-danger-fg)",
   "danger-bg": "var(--uix-danger-bg)",
+  "danger-border": "var(--uix-danger-border)",
   "danger-text": "var(--uix-danger-text)",
   "amber": "var(--uix-amber)",
   "amber-text": "var(--uix-amber-text)",
@@ -189,6 +191,7 @@ export const light = {
   "warning-fg": "#1A1A1A",
   "warning-bg": "#FEF3D6",
   "warning-text": "#92400E",
+  "warning-border": "#D97706",
   "info": "#1447E6",
   "info-fg": "#FFFFFF",
   "info-bg": "#E3EBFF",
@@ -196,6 +199,7 @@ export const light = {
   "danger": "#E40014",
   "danger-fg": "#FFFFFF",
   "danger-bg": "#FFE4E6",
+  "danger-border": "#E40014",
   "danger-text": "#C20012",
   "amber": "#C98A1E",
   "amber-text": "#795006",
@@ -338,6 +342,7 @@ export const dark = {
   "warning": "#FCBB00",
   "warning-fg": "#1A1A1A",
   "warning-bg": "rgba(249,156,0,.16)",
+  "warning-border": "#CA8A04",
   "warning-text": "#FCBB00",
   "info": "#2563EB",
   "info-fg": "#FFFFFF",
@@ -346,6 +351,7 @@ export const dark = {
   "danger": "#DC2626",
   "danger-fg": "#FFFFFF",
   "danger-bg": "rgba(220,38,38,.20)",
+  "danger-border": "#DC2626",
   "danger-text": "#F87171",
   "amber": "#E6B25C",
   "amber-text": "#E6B25C",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.19.2",
+  "version": "2.20.0",
   "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.",
   "type": "module",
   "sideEffects": [

package/styles/components/copy-button.css

@@ -0,0 +1,8 @@
+/* uix copy button — an icon-only ghost button that copies a value and confirms with a check.
+   Pair it with .uix-btn .uix-btn--ghost .uix-btn--icon; depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-copy-button { flex: none; color: var(--uix-text-muted); }
+  .uix-copy-button:hover { color: var(--uix-text); }
+  .uix-copy-button svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
+  .uix-copy-button[data-copied] { color: var(--uix-success); }
+}

package/styles/components/stat-tile.css

@@ -2,12 +2,39 @@
 @layer uix.components {
   .uix-stat { background: var(--uix-surface); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); padding: var(--uix-space-6); }
   .uix-stat__label { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-2); }
+  .uix-stat__label > span { min-width: 0; overflow-wrap: anywhere; }
   .uix-stat__label svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
-  .uix-stat__value { font-size: var(--uix-text-data-hero); font-weight: 600; line-height: var(--uix-leading-data-hero); margin-top: var(--uix-space-3); }
-  .uix-stat__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-2); display: flex; align-items: center; gap: var(--uix-space-2); }
+  .uix-stat__value { display: block; font-size: var(--uix-text-data-hero); font-weight: 600; line-height: var(--uix-leading-data-hero); margin-top: var(--uix-space-3); overflow-wrap: anywhere; }
+  .uix-stat__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); overflow-wrap: anywhere; }
   .uix-stat__trend { display: inline-flex; align-items: center; gap: var(--uix-space-1); font-size: var(--uix-text-meta); font-weight: 600; padding: var(--uix-space-1) var(--uix-space-2); border-radius: var(--uix-radius-pill); }
   /* direction glyph inside the chip (UIX-A11Y-4) — sized to sit on the text baseline row */
   .uix-stat__trend svg { width: 10px; height: 10px; flex: none; }
   .uix-stat__trend--up { color: var(--uix-success); background: var(--uix-success-bg); }
   .uix-stat__trend--down { color: var(--uix-danger-text); background: var(--uix-danger-bg); }
+
+  /* tones — an outlined tile whose value carries the tone; the label keeps its muted colour */
+  .uix-stat--warning { border-color: var(--uix-warning-border); }
+  .uix-stat--warning .uix-stat__value { color: var(--uix-warning-text); }
+  .uix-stat--danger { border-color: var(--uix-danger-border); }
+  .uix-stat--danger .uix-stat__value { color: var(--uix-danger-text); }
+
+  /* compact — for dense fact bands */
+  .uix-stat--compact { padding: var(--uix-space-3) var(--uix-space-4); }
+  .uix-stat--compact .uix-stat__value { font-size: var(--uix-text-h3); line-height: var(--uix-leading-h3); margin-top: var(--uix-space-1); }
+  .uix-stat--compact .uix-stat__meta { margin-top: var(--uix-space-1); }
+
+  /* interactive — the whole tile is a <button> that opens an editor */
+  .uix-stat--interactive {
+    display: block; width: 100%; font: inherit; color: inherit; text-align: start; cursor: pointer;
+    transition: background-color var(--uix-dur-fast) var(--uix-ease-out), border-color var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-stat--interactive:hover { background: var(--uix-bg-hover); border-color: var(--uix-border-strong); }
+  .uix-stat--interactive.uix-stat--warning:hover { border-color: var(--uix-warning-border); }
+  .uix-stat--interactive.uix-stat--danger:hover { border-color: var(--uix-danger-border); }
+  .uix-stat--interactive:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
+  .uix-stat--interactive[aria-expanded="true"] { border-color: var(--uix-ring); }
+  .uix-stat__chevron { display: inline-flex; flex: none; margin-inline-start: auto; color: var(--uix-text-muted); }
+  .uix-stat__label .uix-stat__chevron svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-stat--interactive[aria-expanded="true"] .uix-stat__chevron svg { transform: rotate(180deg); }
+  @media (prefers-reduced-motion: reduce) { .uix-stat--interactive, .uix-stat__label .uix-stat__chevron svg { transition: none; } }
 }

package/styles/components/tabs.css

@@ -4,6 +4,8 @@
   .uix-tab {
     border: 0; background: transparent; font: inherit; font-size: var(--uix-text-body); font-weight: 500;
     color: var(--uix-text-hushed); padding: var(--uix-space-3) var(--uix-space-3); cursor: pointer; position: relative;
+    /* long or translated labels wrap (two lines at the 16rem cap) instead of truncating */
+    white-space: normal; max-width: 16rem; text-align: start;
     transition: color var(--uix-dur-fast) var(--uix-ease-out), background-color var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-tab:hover { color: var(--uix-text); }
@@ -28,4 +30,38 @@
   .uix-tabs--pill { display: inline-flex; background: var(--uix-bg-subtle); padding: var(--uix-space-1); border-radius: var(--uix-radius-md); }
   .uix-tabs--pill .uix-tab { padding: var(--uix-space-2) var(--uix-space-4); border-radius: calc(var(--uix-radius-md) - 3px); }
   .uix-tabs--pill .uix-tab[aria-selected="true"] { background: var(--uix-surface); box-shadow: var(--uix-shadow-sm); }
+
+  /* overflow="scroll" — one scrolling row inside .uix-tabs-scroller; edge buttons appear only
+     on the side that has hidden tabs. Keyboard users move with Arrow/Home/End, so the buttons
+     are pointer-only (aria-hidden, tabindex -1). */
+  .uix-tabs-scroller { position: relative; min-width: 0; max-width: 100%; }
+  .uix-tabs--scroll {
+    display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
+    scrollbar-width: none; scroll-behavior: smooth; overscroll-behavior-x: contain;
+  }
+  .uix-tabs--scroll::-webkit-scrollbar { display: none; }
+  .uix-tabs--scroll .uix-tab { flex: none; }
+  /* a scroll container clips the -1px overlaps the line/enclosed variants use, so the base
+     rule is drawn inside the box instead */
+  .uix-tabs--scroll.uix-tabs--line, .uix-tabs--scroll.uix-tabs--enclosed { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--uix-border); }
+  .uix-tabs--scroll.uix-tabs--line .uix-tab::after { bottom: 0; }
+  .uix-tabs--scroll.uix-tabs--enclosed .uix-tab { margin-bottom: 0; }
+  .uix-tabs--scroll.uix-tabs--pill { display: flex; }
+
+  .uix-tabs-scroller__prev, .uix-tabs-scroller__next {
+    position: absolute; top: 0; bottom: 0; z-index: var(--uix-z-raised);
+    display: flex; align-items: center; justify-content: center;
+    width: var(--uix-control-h); padding: 0; border: 0; cursor: pointer;
+    color: var(--uix-text-hushed); font: inherit;
+  }
+  .uix-tabs-scroller__prev[hidden], .uix-tabs-scroller__next[hidden] { display: none; }
+  .uix-tabs-scroller__prev { inset-inline-start: 0; background: linear-gradient(to right, var(--uix-bg-app) 60%, transparent); }
+  .uix-tabs-scroller__next { inset-inline-end: 0; background: linear-gradient(to left, var(--uix-bg-app) 60%, transparent); }
+  .uix-tabs-scroller__prev:dir(rtl) { background: linear-gradient(to left, var(--uix-bg-app) 60%, transparent); }
+  .uix-tabs-scroller__next:dir(rtl) { background: linear-gradient(to right, var(--uix-bg-app) 60%, transparent); }
+  .uix-tabs-scroller__prev:hover, .uix-tabs-scroller__next:hover { color: var(--uix-text); }
+  .uix-tabs-scroller__prev svg, .uix-tabs-scroller__next svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
+  .uix-tabs-scroller__prev:dir(rtl) svg, .uix-tabs-scroller__next:dir(rtl) svg { transform: scaleX(-1); }
+
+  @media (prefers-reduced-motion: reduce) { .uix-tabs--scroll { scroll-behavior: auto; } }
 }

package/tokens/base/color.json

@@ -32,6 +32,7 @@
   "warning-fg":   { "$type": "color", "$value": "#1A1A1A" },
   "warning-bg":   { "$type": "color", "$value": "#FEF3D6" },
   "warning-text": { "$type": "color", "$value": "#92400E", "$description": "Warning-toned TEXT, legible on the faint --uix-warning-bg in light mode — the bright --uix-warning (#F99C00) fails contrast on pale yellow, so the foreground is a hand-darkened amber. Dark mode overrides to track --uix-warning. Used by status-pill --warning." },
+  "warning-border": { "$type": "color", "$value": "#D97706", "$description": "Warning-toned BORDER for an outlined container on a neutral surface (stat tile --warning). The bright --uix-warning is 2.1:1 on white; this amber clears the 3:1 non-text minimum on --uix-surface and --uix-bg-app." },
   "info":       { "$type": "color", "$value": "#1447E6" },
   "info-fg":    { "$type": "color", "$value": "#FFFFFF" },
   "info-bg":    { "$type": "color", "$value": "#E3EBFF" },
@@ -39,6 +40,7 @@
   "danger":     { "$type": "color", "$value": "#E40014" },
   "danger-fg":  { "$type": "color", "$value": "#FFFFFF" },
   "danger-bg":  { "$type": "color", "$value": "#FFE4E6" },
+  "danger-border": { "$type": "color", "$value": "#E40014", "$description": "Danger-toned BORDER for an outlined container on a neutral surface (stat tile --danger). 4.9:1 on white, so it clears the 3:1 non-text minimum; a separate role so a theme can soften the outline without touching the solid --uix-danger." },
   "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." },
   "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." },
   "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." },

package/tokens/dark/color.json

@@ -26,6 +26,7 @@
   "warning":      { "$type": "color", "$value": "#FCBB00" },
   "warning-fg":   { "$type": "color", "$value": "#1A1A1A" },
   "warning-bg":   { "$type": "color", "$value": "rgba(249,156,0,.16)" },
+  "warning-border": { "$type": "color", "$value": "#CA8A04", "$description": "On dark, a deeper amber than the bright --uix-warning so the outline reads as a tone rather than a highlight; 6:1 on --uix-surface #111111." },
   "warning-text": { "$type": "color", "$value": "var(--uix-warning,#FCBB00)", "$description": "On dark the faint bg is dark enough that the bright warning hue reads as text — track --uix-warning live (fallback to the dark warning value)." },
   "info":       { "$type": "color", "$value": "#2563EB" },
   "info-fg":    { "$type": "color", "$value": "#FFFFFF" },
@@ -34,6 +35,7 @@
   "danger":     { "$type": "color", "$value": "#DC2626" },
   "danger-fg":  { "$type": "color", "$value": "#FFFFFF" },
   "danger-bg":  { "$type": "color", "$value": "rgba(220,38,38,.20)" },
+  "danger-border": { "$type": "color", "$value": "#DC2626", "$description": "On dark, the solid danger red as an outline; 4.3:1 on --uix-surface #111111." },
   "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)." },
   "amber":      { "$type": "color", "$value": "#E6B25C", "$description": "SEV-3 tone lightened for dark surfaces (the light-mode ochre #C98A1E is too dark on dark)." },
   "amber-text": { "$type": "color", "$value": "#E6B25C", "$description": "On dark the lightened amber reads as text directly — tracks --uix-amber." },