@tensor_1/tokens 2.31.0 → 2.32.0

package/styles/components/status-pill.css

@@ -7,7 +7,7 @@
   }
   .uix-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone-dot, currentColor); flex: none; }
   .uix-pill--neutral { --tone-bg: var(--uix-bg-active); --tone-fg: var(--uix-text-hushed); --tone-dot: var(--uix-text-muted); }
-  .uix-pill--success { --tone-bg: var(--uix-success-bg); --tone-fg: var(--uix-success); --tone-dot: var(--uix-success); }
+  .uix-pill--success { --tone-bg: var(--uix-success-bg); --tone-fg: var(--uix-success-text); --tone-dot: var(--uix-success); }
   .uix-pill--info    { --tone-bg: var(--uix-info-bg);    --tone-fg: var(--uix-info-text);    --tone-dot: var(--uix-info); }
   .uix-pill--warning { --tone-bg: var(--uix-warning-bg); --tone-fg: var(--uix-warning-text); --tone-dot: var(--uix-warning); }
   .uix-pill--danger  { --tone-bg: var(--uix-danger-bg);  --tone-fg: var(--uix-danger-text);  --tone-dot: var(--uix-danger); }
@@ -18,7 +18,7 @@
   .uix-pill--attention { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
   .uix-pill--overdue   { --tone-bg: var(--uix-overdue-bg);   --tone-fg: var(--uix-overdue-text);   --tone-dot: var(--uix-overdue); }
   /* SLA tones — ok=success, at-risk=attention, breached=overdue */
-  .uix-pill--sla-ok       { --tone-bg: var(--uix-success-bg);   --tone-fg: var(--uix-success);        --tone-dot: var(--uix-success); }
+  .uix-pill--sla-ok       { --tone-bg: var(--uix-success-bg);   --tone-fg: var(--uix-success-text);   --tone-dot: var(--uix-success); }
   .uix-pill--sla-at-risk  { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
   .uix-pill--sla-breached { --tone-bg: var(--uix-overdue-bg);   --tone-fg: var(--uix-overdue-text);   --tone-dot: var(--uix-overdue); }
   /* Priority/severity tones — P1=danger, P2=warning, P3=amber, P4=info, P5=neutral (complete 5-tier ramp) */
@@ -35,3 +35,11 @@
   .uix-pill--outline.uix-pill--muted    { --tone-line: var(--uix-border); }
   .uix-pill--outline.uix-pill--critical { color: var(--uix-danger-text); --tone-dot: var(--uix-danger); --tone-line: color-mix(in srgb, var(--uix-danger) 60%, transparent); }
 }
+
+/* Sizes (HAR-1614): sm for dense cells, lg for a page header. The default is unchanged. */
+@layer uix.components {
+  .uix-pill--sm { gap: var(--uix-space-1); padding: 0 var(--uix-space-2); font-size: var(--uix-text-eyebrow); }
+  .uix-pill--sm .uix-pill__dot { width: 6px; height: 6px; }
+  .uix-pill--lg { padding: var(--uix-space-2) var(--uix-space-4); font-size: var(--uix-text-body); }
+  .uix-pill--lg .uix-pill__dot { width: 9px; height: 9px; }
+}

package/styles/components/steps.css

@@ -44,3 +44,15 @@
     .uix-steps--horizontal > .uix-step > .uix-step__connector { position: absolute; left: 13px; top: 30px; bottom: 4px; width: 1px; height: auto; min-width: 0; margin: 0; }
   }
 }
+
+/* Steps that hold content (`progress={false}`, HAR-1628): numbered sections, all on screen at
+   once. No state is drawn, so every step reads as body text and its content fills the row. */
+@layer uix.components {
+  .uix-steps--sections { align-items: stretch; }
+  .uix-steps--sections > .uix-step { color: var(--uix-text); padding-bottom: var(--uix-space-6); }
+  .uix-steps--sections > .uix-step:last-child { padding-bottom: 0; }
+  .uix-steps--sections > .uix-step > .uix-step__text { flex: 1 1 0; }
+  .uix-steps--sections .uix-step__title { font-size: var(--uix-text-body); font-weight: 600; }
+  :is(h2, h3, h4, h5, h6).uix-step__title { margin: 0; line-height: inherit; }
+  .uix-step__content { min-width: 0; margin-top: var(--uix-space-3); color: var(--uix-text); font-size: var(--uix-text-body); }
+}

package/styles/components/table-toolbar.css

@@ -21,7 +21,8 @@
   .uix-chip__count { font-variant-numeric: tabular-nums; color: var(--uix-text-muted); }
   .uix-chip[data-on] .uix-chip__count { color: inherit; }
   .uix-filter-popover { display: grid; gap: var(--uix-space-4); min-width: 260px; padding: var(--uix-space-4); }
-  .uix-filter-popover .uix-label { display: grid; gap: var(--uix-space-2); }
+  /* one element as surface + content: beat popover.css's later 8 px (HAR-1573) */
+  .uix-popover.uix-filter-popover { padding: var(--uix-space-4); }
   .uix-filter-popover__actions { display: flex; justify-content: flex-end; gap: var(--uix-space-2); }
 }
 
@@ -34,20 +35,24 @@
   .uix-chip__icon { display: inline-flex; flex: none; }
   .uix-chip__label { min-width: 0; overflow-wrap: anywhere; }
   .uix-chip__icon svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
-  .uix-chip--removable { padding-inline-end: var(--uix-space-1); }
+  .uix-chip--removable { padding-inline-end: calc(var(--uix-space-1) / 2); }
   .uix-chip__main {
     display: inline-flex; align-items: center; gap: var(--uix-space-2); padding: 0; border: 0;
     background: transparent; color: inherit; font: inherit; border-radius: var(--uix-radius-pill);
   }
   button.uix-chip__main, a.uix-chip__main { cursor: pointer; }
   .uix-chip__main:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
-  /* 24 px hit area (WCAG 2.5.8) without growing the chip: the negative block margin eats the overhang */
+  /* remove x (HAR-1569): one spec with .uix-tag__remove, pinned by tests/dismiss-control.test.mjs */
   .uix-chip__remove {
-    display: inline-grid; place-items: center; width: 24px; height: 24px; margin-block: calc(-1 * var(--uix-space-1)); padding: 0; flex: none;
-    border: 0; border-radius: var(--uix-radius-pill); background: transparent; color: inherit; cursor: pointer;
+    position: relative; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px;
+    margin-block: calc(var(--uix-space-1) / -2); padding: 0; border: 0; border-radius: var(--uix-radius-pill);
+    background: transparent; color: inherit; font: inherit; line-height: 0; cursor: pointer;
+    transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
   }
-  .uix-chip__remove svg { width: 12px; height: 12px; }
-  .uix-chip__remove:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
+  .uix-chip__remove::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; }
+  .uix-chip__remove svg { display: block; width: 12px; height: 12px; pointer-events: none; }
+  .uix-chip__remove:hover { background: color-mix(in srgb, var(--uix-text) 18%, transparent); color: var(--uix-text); }
+  .uix-chip__remove:active { background: color-mix(in srgb, var(--uix-text) 26%, transparent); }
   .uix-chip__remove:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
   .uix-chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); }
 }
@@ -66,4 +71,6 @@
   .uix-filter-editor__list { display: grid; gap: var(--uix-space-2); max-height: 16rem; overflow-y: auto; padding: var(--uix-space-1); }
   .uix-filter-editor__note { margin: 0; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
   .uix-filter-editor__choices { display: grid; gap: var(--uix-space-2); }
+  /* HAR-1505: enum presets, a toggle-chip row above the search box and options */
+  .uix-filter-editor__presets { padding-bottom: var(--uix-space-3); border-bottom: 1px solid var(--uix-border); }
 }

package/styles/components/tag-input.css

@@ -10,9 +10,18 @@
     display: inline-flex; align-items: center; gap: var(--uix-space-1); padding: var(--uix-space-1) var(--uix-space-1) var(--uix-space-1) var(--uix-space-2); border-radius: var(--uix-radius-sm);
     background: var(--uix-bg-active); color: var(--uix-text); font-size: var(--uix-text-meta);
   }
-  .uix-tag__remove { position: relative; display: grid; place-items: center; width: 16px; height: 16px; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-xs); }
-  /* Invisible overlay grows the 16px visual to a 24px hit target (UIX-A11Y-3). */
-  .uix-tag__remove::before { content: ""; position: absolute; inset: -4px; }
-  .uix-tag__remove:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
-  .uix-tag__remove svg { width: 12px; height: 12px; }
+  /* remove x (HAR-1569): one spec with .uix-chip__remove, pinned by tests/dismiss-control.test.mjs.
+   * 20 px circle, 2 px from the trailing edge; ::before makes a concentric 24 px hit area. */
+  .uix-tag:has(> .uix-tag__remove:last-child) { padding-inline-end: calc(var(--uix-space-1) / 2); }
+  .uix-tag__remove {
+    position: relative; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px;
+    margin-block: calc(var(--uix-space-1) / -2); padding: 0; border: 0; border-radius: var(--uix-radius-pill);
+    background: transparent; color: var(--uix-text-muted); font: inherit; line-height: 0; cursor: pointer;
+    transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-tag__remove::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; }
+  .uix-tag__remove svg { display: block; width: 12px; height: 12px; pointer-events: none; }
+  .uix-tag__remove:hover { background: color-mix(in srgb, var(--uix-text) 18%, transparent); color: var(--uix-text); }
+  .uix-tag__remove:active { background: color-mix(in srgb, var(--uix-text) 26%, transparent); }
+  .uix-tag__remove:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
 }

package/styles/components/text-diff.css

@@ -0,0 +1,50 @@
+/* TextDiff (HAR-1368): two-way line/word diff. Changes carry a −/+ sign, strike/underline and
+   spoken words as well as colour. Split view stacks below ~36rem (container query). */
+@layer uix.components {
+  .uix-text-diff { container-type: inline-size; min-width: 0; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); color: var(--uix-text); overflow: hidden; }
+  .uix-text-diff__summary { margin: 0; padding: var(--uix-space-2) var(--uix-space-3); border-bottom: 1px solid var(--uix-border); font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  .uix-text-diff__heads { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--uix-border); background: var(--uix-bg-subtle); font-size: var(--uix-text-meta); font-weight: 600; }
+  .uix-text-diff__head { padding: var(--uix-space-2) var(--uix-space-3); min-width: 0; overflow-wrap: anywhere; }
+  .uix-text-diff__head + .uix-text-diff__head { border-left: 1px solid var(--uix-border); }
+  .uix-text-diff[data-view="unified"] .uix-text-diff__heads { display: flex; flex-wrap: wrap; column-gap: var(--uix-space-3); }
+  .uix-text-diff[data-view="unified"] .uix-text-diff__head + .uix-text-diff__head { border-left: 0; }
+  .uix-text-diff__body { position: relative; overflow: auto; font-family: var(--uix-font-mono); font-size: var(--uix-text-meta); line-height: 1.6; }
+  .uix-text-diff__row { display: grid; grid-template-columns: 1fr 1fr; min-width: 0; }
+  .uix-text-diff[data-view="unified"] .uix-text-diff__row { grid-template-columns: 1fr; }
+  .uix-text-diff__row:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: -2px; }
+  .uix-text-diff__cell { display: grid; grid-template-columns: 4ch 2ch minmax(0, 1fr); min-width: 0; }
+  .uix-text-diff__cell + .uix-text-diff__cell { border-left: 1px solid var(--uix-border); }
+  .uix-text-diff__cell[data-empty] { background: var(--uix-bg-subtle); }
+  .uix-text-diff__cell[data-kind="delete"] { background: var(--uix-danger-bg); }
+  .uix-text-diff__cell[data-kind="insert"] { background: var(--uix-success-bg); }
+  .uix-text-diff__num { padding-inline-end: var(--uix-space-1); text-align: end; color: var(--uix-text-muted); user-select: none; }
+  .uix-text-diff__sign { text-align: center; color: var(--uix-text-muted); user-select: none; }
+  .uix-text-diff__cell[data-kind="delete"] .uix-text-diff__sign, .uix-text-diff__cell[data-kind="insert"] .uix-text-diff__sign { color: var(--uix-text); font-weight: 600; }
+  .uix-text-diff__text { min-width: 0; padding-inline-end: var(--uix-space-2); white-space: pre-wrap; overflow-wrap: anywhere; }
+  .uix-text-diff del, .uix-text-diff ins { border-radius: var(--uix-radius-sm); color: var(--uix-text); }
+  .uix-text-diff del { background: color-mix(in srgb, var(--uix-danger) 22%, transparent); text-decoration: line-through; }
+  .uix-text-diff ins { background: color-mix(in srgb, var(--uix-success) 22%, transparent); text-decoration: underline; text-underline-offset: 0.2em; }
+  /* A whole added/removed line: the row tint, the sign and the spoken word carry it; striking a whole line hurts reading. */
+  .uix-text-diff__cell del[data-whole], .uix-text-diff__cell ins[data-whole] { background: none; text-decoration: none; }
+  .uix-text-diff__row[data-kind="fold"] { grid-template-columns: 1fr; background: var(--uix-bg-subtle); }
+  .uix-text-diff__fold { justify-self: start; margin: 0; padding: var(--uix-space-1) var(--uix-space-3); border: 0; background: none; font: inherit; color: var(--uix-link); cursor: pointer; }
+  .uix-text-diff__fold:hover { text-decoration: underline; }
+  .uix-text-diff__fold:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: -2px; }
+  .uix-text-diff__row[data-kind="prose"] { grid-template-columns: 1fr 1fr; }
+  .uix-text-diff__prose { min-width: 0; padding: var(--uix-space-3); font-family: var(--uix-font-sans); font-size: var(--uix-text-body); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
+  .uix-text-diff__side { min-width: 0; }
+  .uix-text-diff__side + .uix-text-diff__side { border-left: 1px solid var(--uix-border); }
+  .uix-text-diff__side > .uix-text-diff__head { border-bottom: 1px solid var(--uix-border); background: var(--uix-bg-subtle); font-family: var(--uix-font-sans); font-size: var(--uix-text-meta); font-weight: 600; }
+  .uix-text-diff__note { margin: 0; padding: var(--uix-space-3); color: var(--uix-text-muted); }
+  @container (max-width: 36rem) {
+    .uix-text-diff[data-view="split"] .uix-text-diff__heads { display: none; }
+    .uix-text-diff[data-view="split"] .uix-text-diff__row { grid-template-columns: 1fr; }
+    .uix-text-diff[data-view="split"] .uix-text-diff__cell + .uix-text-diff__cell { border-left: 0; }
+    .uix-text-diff[data-view="split"] .uix-text-diff__row[data-kind="equal"] .uix-text-diff__cell[data-side="after"],
+    .uix-text-diff[data-view="split"] .uix-text-diff__cell[data-empty] { display: none; }
+    .uix-text-diff__side + .uix-text-diff__side { border-left: 0; border-top: 1px solid var(--uix-border); }
+  }
+  @media (forced-colors: active) {
+    .uix-text-diff del, .uix-text-diff ins { forced-color-adjust: none; background: Canvas; color: CanvasText; outline: 1px solid CanvasText; }
+  }
+}

package/styles/components/toast.css

@@ -10,9 +10,9 @@
   @keyframes uix-toast-out { to { opacity: 0; transform: translateX(16px); } }
   .uix-toast__icon { flex: none; margin-top: 1px; }
   .uix-toast__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
-  .uix-toast__body { flex: 1; }
+  .uix-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--uix-space-1); }
   .uix-toast__title { font-weight: 600; font-size: var(--uix-text-body); }
-  .uix-toast__msg { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-1); }
+  .uix-toast__msg { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
   .uix-toast__close { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1) var(--uix-space-2); border-radius: var(--uix-radius-xs); }
   .uix-toast__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
   .uix-toast--success .uix-toast__icon { color: var(--uix-success); }

package/styles/components/view-menu.css

@@ -18,8 +18,13 @@
   }
   .uix-view-menu__row { display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-3); font-size: var(--uix-text-body); color: var(--uix-text); cursor: pointer; }
   .uix-view-menu__row + .uix-view-menu__row { margin-top: var(--uix-space-3); }
-  .uix-view-menu .uix-segmented { display: flex; width: 100%; }
-  .uix-view-menu .uix-segmented__option { flex: 1; text-align: center; }
+  /* HAR-1601: three equal options in a 304 px panel are 84 px each, and "Großzügig" did not fit
+     its option: the Segmented's `overflow-wrap: anywhere` then split it after the 8th letter.
+     Here an option is never narrower than its longest word (overflow-wrap: normal makes
+     min-content that word), the padding is tighter, and options that still do not fit in one
+     row wrap as whole options. */
+  .uix-view-menu .uix-segmented { display: flex; flex-wrap: wrap; width: 100%; }
+  .uix-view-menu .uix-segmented__option { flex: 1 1 0; min-width: min-content; padding-inline: var(--uix-space-2); text-align: center; overflow-wrap: normal; hyphens: manual; }
   .uix-view-menu__cols { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--uix-space-1)); padding: 0; list-style: none; }
   .uix-view-menu__footer { border-top: 1px solid var(--uix-border); padding: var(--uix-space-1) 0 0; }
   /* Column rows. Hover paints the WHOLE row (grip, checkbox, name, ⋯ together), never just the label. */

package/tokens/base/color.json

@@ -28,6 +28,7 @@
   "success":    { "$type": "color", "$value": "#047857" },
   "success-fg": { "$type": "color", "$value": "#FFFFFF" },
   "success-bg": { "$type": "color", "$value": "#D0FAE5" },
+  "success-text": { "$type": "color", "$value": "var(--uix-success)", "$description": "Success-toned TEXT (pill, alert icon, stat trend, SLA ok). Light aliases --uix-success (#047857, already AA on the pale tint), so a theme's light success override still reaches text; dark sets its own value in the calibrated status-text band (HAR-1562). Paint text with this, not with --uix-success, which is the solid/dot role on dark." },
   "warning":      { "$type": "color", "$value": "#F99C00" },
   "warning-fg":   { "$type": "color", "$value": "#1A1A1A" },
   "warning-bg":   { "$type": "color", "$value": "#FEF3D6" },
@@ -68,15 +69,29 @@
   "info-solid":    { "$type": "color", "$value": "#2563EB", "$description": "SOLID status role (see success-solid)." },
   "danger-solid":  { "$type": "color", "$value": "#EF4444", "$description": "SOLID status role (see success-solid)." },
 
-  "chart-1": { "$type": "color", "$value": "#2563EB" },
-  "chart-2": { "$type": "color", "$value": "#0891B2" },
-  "chart-3": { "$type": "color", "$value": "#16A34A" },
-  "chart-4": { "$type": "color", "$value": "#F59E0B" },
-  "chart-5": { "$type": "color", "$value": "#EA580C" },
-  "chart-6": { "$type": "color", "$value": "#E11D48" },
-  "chart-7": { "$type": "color", "$value": "#7C3AED" },
-  "chart-8": { "$type": "color", "$value": "#DB2777" },
+  "neutral-solid":  { "$type": "color", "$value": "#8A8A8A", "$description": "NEUTRAL status family (HAR-1562): the default, non-alarming status tone (open, scheduled, draft, in progress). Solid = the dot/fill, 3:1 non-text on white. Dark overrides." },
+  "neutral-text":   { "$type": "color", "$value": "var(--uix-text-hushed)", "$description": "Neutral status TEXT, alias of --uix-text-hushed. var() reference, no dark override needed." },
+  "neutral-bg":     { "$type": "color", "$value": "var(--uix-bg-active)", "$description": "Neutral status tint, alias of --uix-bg-active." },
+  "neutral-border": { "$type": "color", "$value": "var(--uix-border-strong)", "$description": "Neutral status outline, alias of --uix-border-strong." },
+
+  "chart-1": { "$type": "color", "$value": "#0455E6", "$description": "Categorical palette, light. Fixed hue order (blue, cyan, green, ochre, orange, crimson, violet, pink), re-stepped so the dataviz validator passes on --uix-surface and --uix-bg-app: L 0.43-0.77, C >= 0.10, adjacent CVD dE >= 8, normal-vision dE >= 15, >= 3:1 (HAR-1552)." },
+  "chart-2": { "$type": "color", "$value": "#249BC8" },
+  "chart-3": { "$type": "color", "$value": "#06A543" },
+  "chart-4": { "$type": "color", "$value": "#905709" },
+  "chart-5": { "$type": "color", "$value": "#F25C1B" },
+  "chart-6": { "$type": "color", "$value": "#B00825" },
+  "chart-7": { "$type": "color", "$value": "#8143E6" },
+  "chart-8": { "$type": "color", "$value": "#DB2579" },
   "chart-neutral": { "$type": "color", "$value": "#64748B" },
+  "chart-grid": { "$type": "color", "$value": "#EDEDED", "$description": "Chart gridline: a SOLID 1px hairline, recessive. Dashes are reserved for projections and thresholds (HAR-1552)." },
+  "chart-axis": { "$type": "color", "$value": "#D4D4D4", "$description": "Chart axis line (labels use --uix-text-muted)." },
+  "chart-reference": { "$type": "color", "$value": "#525252", "$description": "Neutral ink for target, budget and baseline reference lines: 7.8:1 on --uix-surface. Not a status colour." },
+  "chart-zone-warning": { "$type": "color", "$value": "rgba(217,119,6,.10)", "$description": "Alpha fill for a warning threshold zone behind the series." },
+  "chart-zone-danger": { "$type": "color", "$value": "rgba(228,0,20,.07)", "$description": "Alpha fill for a danger threshold zone behind the series." },
+  "chart-forecast-band": { "$type": "color", "$value": "rgba(10,10,10,.06)", "$description": "Alpha fill for a forecast / confidence band; neutral so it works under any series hue." },
+  "chart-event": { "$type": "color", "$value": "#737373", "$description": "Event-marker line and label ink (deploys, incidents, releases): 4.7:1 on --uix-surface." },
+  "chart-partial": { "$type": "color", "$value": "rgba(10,10,10,.10)", "$description": "Hatch base for a partial (incomplete) period." },
+  "chart-comparison": { "$type": "color", "$value": "#B8B8B8", "$description": "Muted ghost line for the comparison period (last week, last year)." },
 
   "row":           { "$type": "color", "$value": "#FFFFFF" },
   "row-alt":       { "$type": "color", "$value": "#FAFAFA" },

package/tokens/base/size.json

@@ -3,6 +3,7 @@
   "radius-sm":   { "$type": "dimension", "$value": "8px" },
   "radius-md":   { "$type": "dimension", "$value": "12px" },
   "radius-lg":   { "$type": "dimension", "$value": "16px" },
+  "radius-xl":   { "$type": "dimension", "$value": "24px", "$description": "Largest corner radius below pill: hero cards, sheets, large dialogs (HAR-1384, shipped with HAR-1562)." },
   "radius-pill": { "$type": "dimension", "$value": "999px" },
 
   "row-h":             { "$type": "dimension", "$value": "56px" },

package/tokens/dark/color.json

@@ -20,51 +20,62 @@
   "ring":         { "$type": "color", "$value": "var(--uix-brand,#3080FF)" },
   "brand-muted": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 16%, transparent)" },
 
-  "success":    { "$type": "color", "$value": "#00D294" },
+  "success":    { "$type": "color", "$value": "#49AF7E", "$description": "Calibrated (HAR-1562): dark status TEXT tokens share one lightness band (OKLCH L 74-80%, C <= 0.10) near --uix-text-hushed, SOLIDS C <= 0.14, tints = solid at 12% alpha. The old #00D294 (C 0.165) glowed against dark surfaces." },
   "success-fg": { "$type": "color", "$value": "#002C22" },
-  "success-bg": { "$type": "color", "$value": "rgba(0,210,148,.15)" },
-  "warning":      { "$type": "color", "$value": "#FCBB00" },
+  "success-bg": { "$type": "color", "$value": "rgba(73,175,126,.12)" },
+  "success-text": { "$type": "color", "$value": "#7CC79F", "$description": "Success-toned TEXT on dark: 9.5:1 on --uix-surface, 8.0:1 on its own tint." },
+  "warning":      { "$type": "color", "$value": "#D7B672", "$description": "On dark --uix-warning carries the calibrated warning TEXT value, because --uix-warning-text chains to it (var(--uix-warning,...)) and that chain is part of the contract. The fill/dot role is --uix-warning-solid." },
   "warning-fg":   { "$type": "color", "$value": "#1A1A1A" },
-  "warning-bg":   { "$type": "color", "$value": "rgba(249,156,0,.16)" },
+  "warning-bg":   { "$type": "color", "$value": "rgba(217,164,64,.12)" },
   "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)." },
+  "warning-text": { "$type": "color", "$value": "var(--uix-warning,#D7B672)", "$description": "On dark, warning text tracks --uix-warning live (fallback to the dark warning value, calibrated by HAR-1562: 9.7:1 on --uix-surface, 8.1:1 on its own tint)." },
   "info":       { "$type": "color", "$value": "#2563EB" },
   "info-fg":    { "$type": "color", "$value": "#FFFFFF" },
-  "info-bg":    { "$type": "color", "$value": "rgba(48,128,255,.16)" },
-  "info-text":  { "$type": "color", "$value": "#60A5FA", "$description": "On dark, the deep --uix-info #2563EB fails as text on the faint info tint — brightened so info pill/alert/node text reads AA." },
-  "danger":     { "$type": "color", "$value": "#DC2626" },
+  "info-bg":    { "$type": "color", "$value": "rgba(98,147,219,.12)" },
+  "info-text":  { "$type": "color", "$value": "#8DB4E7", "$description": "On dark, the deep --uix-info #2563EB (a fill with white text, unchanged) fails as text on the faint info tint. Calibrated (HAR-1562): 8.8:1 on --uix-surface, 7.6:1 on its own tint." },
+  "danger":     { "$type": "color", "$value": "#BE3A41", "$description": "The dark danger FILL (critical pill, danger button) with white --uix-danger-fg on it: 5.4:1. Calmer than the old #DC2626 (C 0.215)." },
   "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)." },
+  "danger-bg":  { "$type": "color", "$value": "rgba(218,108,108,.12)" },
+  "danger-border": { "$type": "color", "$value": "#DA6C6C", "$description": "On dark, the danger solid as an outline; 5.7:1 on --uix-surface #111111." },
+  "danger-text": { "$type": "color", "$value": "#E69593", "$description": "On dark, danger-toned TEXT for pill/field-error/stat-trend/menu/node/audit. Calibrated (HAR-1562): 8.2:1 on --uix-surface, 7.1:1 on its own tint. --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." },
+  "amber-text": { "$type": "color", "$value": "#DDB370", "$description": "On dark, amber TEXT in the calibrated status-text band (HAR-1562: C <= 0.10; the old #E6B25C was C 0.12)." },
   "amber-bg":   { "$type": "color", "$value": "rgba(201,138,30,.14)" },
 
-  "attention":       { "$type": "color", "$value": "#FB923C", "$description": "Orange-400 — brightened for dark surfaces (the light-mode #EA580C is too dark on dark)." },
-  "attention-bg":    { "$type": "color", "$value": "rgba(234,88,12,.16)" },
-  "attention-text":  { "$type": "color", "$value": "#FDBA74", "$description": "On dark, orange text tracks --uix-attention (brightened); reads AA on the faint attention-bg." },
-  "attention-solid": { "$type": "color", "$value": "#F97316" },
+  "attention":       { "$type": "color", "$value": "#DD854C", "$description": "Dark attention solid (HAR-1562 calibration; the light-mode #EA580C is too dark on dark)." },
+  "attention-bg":    { "$type": "color", "$value": "rgba(221,133,76,.12)" },
+  "attention-text":  { "$type": "color", "$value": "#DFA779", "$description": "On dark, attention TEXT: 8.9:1 on --uix-surface, reads AA on the faint attention-bg." },
+  "attention-solid": { "$type": "color", "$value": "#DD854C" },
 
-  "overdue":       { "$type": "color", "$value": "#F87171", "$description": "Red-400 — brightened overdue for dark surfaces (the light-mode #DC2626 fails on dark)." },
-  "overdue-bg":    { "$type": "color", "$value": "rgba(220,38,38,.18)" },
-  "overdue-text":  { "$type": "color", "$value": "#FCA5A5", "$description": "On dark, brightened red text reads AA on the faint overdue-bg." },
-  "overdue-solid": { "$type": "color", "$value": "#F87171" },
+  "overdue":       { "$type": "color", "$value": "#DA6C6C", "$description": "Dark overdue solid (HAR-1562 calibration; the light-mode #DC2626 fails on dark)." },
+  "overdue-bg":    { "$type": "color", "$value": "rgba(218,108,108,.12)" },
+  "overdue-text":  { "$type": "color", "$value": "#E89D9F", "$description": "On dark, overdue TEXT: 8.8:1 on --uix-surface, reads AA on the faint overdue-bg." },
+  "overdue-solid": { "$type": "color", "$value": "#DA6C6C" },
 
-  "success-solid": { "$type": "color", "$value": "#34D399" },
-  "warning-solid": { "$type": "color", "$value": "#FBBF24" },
-  "info-solid":    { "$type": "color", "$value": "#3B82F6" },
-  "danger-solid":  { "$type": "color", "$value": "#F87171" },
+  "success-solid": { "$type": "color", "$value": "#49AF7E" },
+  "warning-solid": { "$type": "color", "$value": "#D9A440" },
+  "info-solid":    { "$type": "color", "$value": "#6293DB" },
+  "danger-solid":  { "$type": "color", "$value": "#DA6C6C" },
+  "neutral-solid": { "$type": "color", "$value": "#868686", "$description": "Dark neutral status solid (dot/fill): 5.2:1 on --uix-surface." },
 
-  "chart-1": { "$type": "color", "$value": "#3080FF" },
-  "chart-2": { "$type": "color", "$value": "#00C2B0" },
-  "chart-3": { "$type": "color", "$value": "#00D294" },
-  "chart-4": { "$type": "color", "$value": "#FCBB00" },
-  "chart-5": { "$type": "color", "$value": "#FF8B1A" },
-  "chart-6": { "$type": "color", "$value": "#FF6568" },
-  "chart-7": { "$type": "color", "$value": "#A685FF" },
-  "chart-8": { "$type": "color", "$value": "#FF667F" },
+  "chart-1": { "$type": "color", "$value": "#3280FC", "$description": "Categorical palette, dark: the same eight hues stepped for the dark band (L 0.48-0.67) and validated against --uix-surface #111111 (HAR-1552)." },
+  "chart-2": { "$type": "color", "$value": "#15A7A4" },
+  "chart-3": { "$type": "color", "$value": "#127A3D" },
+  "chart-4": { "$type": "color", "$value": "#AB9017" },
+  "chart-5": { "$type": "color", "$value": "#8F530C" },
+  "chart-6": { "$type": "color", "$value": "#CD766F" },
+  "chart-7": { "$type": "color", "$value": "#9A77F4" },
+  "chart-8": { "$type": "color", "$value": "#FB416A" },
   "chart-neutral": { "$type": "color", "$value": "#A1A1A1" },
+  "chart-grid": { "$type": "color", "$value": "#232323" },
+  "chart-axis": { "$type": "color", "$value": "#3A3A3A" },
+  "chart-reference": { "$type": "color", "$value": "#B3B3B3" },
+  "chart-zone-warning": { "$type": "color", "$value": "rgba(217,164,64,.10)" },
+  "chart-zone-danger": { "$type": "color", "$value": "rgba(218,108,108,.10)" },
+  "chart-forecast-band": { "$type": "color", "$value": "rgba(250,250,250,.06)" },
+  "chart-event": { "$type": "color", "$value": "#8C8C8C" },
+  "chart-partial": { "$type": "color", "$value": "rgba(250,250,250,.12)" },
+  "chart-comparison": { "$type": "color", "$value": "#5C5C5C" },
 
   "row":           { "$type": "color", "$value": "#111111" },
   "row-alt":       { "$type": "color", "$value": "#161616" },