@tensor_1/tokens 2.15.0 → 2.17.0

package/styles/components/sidebar.css

@@ -32,7 +32,9 @@
   .uix-navitem__badge { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
   /* on the active tint, muted badge dips below AA — hushed composites darker on the tint */
   .uix-navitem[aria-current="page"] .uix-navitem__badge { color: var(--uix-text-hushed); }
-  .uix-navitem__star { display: grid; place-items: center; width: 22px; height: 22px; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-xs); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-navitem__star { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-xs); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  /* invisible halo → 24px effective target with zero visual change (UIX-A11Y-2) */
+  .uix-navitem__star::before { content: ""; position: absolute; inset: -1px; }
   .uix-navitem__star svg { width: 15px; height: 15px; }
   .uix-navitem:hover .uix-navitem__star, .uix-navitem:focus-within .uix-navitem__star, .uix-navitem__star:focus-visible { opacity: 1; }
   .uix-navitem__star[data-on] { opacity: 1; color: var(--uix-warning); }
@@ -83,26 +85,39 @@
   .uix-navgroup__chevron { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
   .uix-navgroup__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--uix-dur) var(--uix-ease-out); }
   .uix-navgroup__trigger[aria-expanded="false"] + .uix-navgroup__panel { grid-template-rows: 0fr; }
-  .uix-navgroup__panel > div { overflow: hidden; }
+  /* visibility keeps the 0fr-collapsed links out of the tab order / accessibility tree
+     (UIX-A11Y-2); the transition delays hiding until the row collapse finishes, and
+     visibility snaps back to visible instantly on expand, so nothing visibly glitches. */
+  .uix-navgroup__panel > div { overflow: hidden; visibility: visible; transition: visibility var(--uix-dur) var(--uix-ease-out); }
+  .uix-navgroup__trigger[aria-expanded="false"] + .uix-navgroup__panel > div { visibility: hidden; }
   .uix-subitem { padding-left: var(--uix-space-5); }
   .uix-subitem .uix-navitem__label::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--uix-text-muted); margin-right: var(--uix-space-3); vertical-align: middle; }
 
   /* collapsed rail */
   .uix-sidebar[data-collapsed], .uix-sidebar[data-nav="rail"] { width: var(--uix-sidebar-w-rail); }
-  .uix-sidebar[data-collapsed] .uix-navitem__label,
   .uix-sidebar[data-collapsed] .uix-navitem__badge,
   .uix-sidebar[data-collapsed] .uix-navitem__star,
   .uix-sidebar[data-collapsed] .uix-sidebar__eyebrow,
   .uix-sidebar[data-collapsed] .uix-sidebar__brand,
   .uix-sidebar[data-collapsed] .uix-navgroup__chevron,
   .uix-sidebar[data-collapsed] .uix-navgroup__panel { display: none; }
-  .uix-sidebar[data-nav="rail"] .uix-navitem__label,
   .uix-sidebar[data-nav="rail"] .uix-navitem__badge,
   .uix-sidebar[data-nav="rail"] .uix-navitem__star,
   .uix-sidebar[data-nav="rail"] .uix-sidebar__eyebrow,
   .uix-sidebar[data-nav="rail"] .uix-sidebar__brand,
   .uix-sidebar[data-nav="rail"] .uix-navgroup__chevron,
   .uix-sidebar[data-nav="rail"] .uix-navgroup__panel { display: none; }
+  /* rail labels stay in the accessibility tree — clip pattern (mirrors .uix-visually-hidden),
+     not display:none, so icon-only nav items keep their names (UIX-A11Y-2). position:absolute
+     removes the label from the flex row, so the centered rail layout is unaffected. */
+  .uix-sidebar[data-collapsed] .uix-navitem__label,
+  .uix-sidebar[data-nav="rail"] .uix-navitem__label {
+    position: absolute !important;
+    width: 1px; height: 1px;
+    padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0, 0, 0, 0);
+    white-space: nowrap; border: 0;
+  }
   /* center the icon-only rail; head keeps just the toggle, centered */
   .uix-sidebar[data-collapsed] .uix-navitem { justify-content: center; padding: 0; gap: 0; }
   .uix-sidebar[data-collapsed] .uix-sidebar__head { justify-content: center; padding-inline: 0; }

package/styles/components/stat-tile.css

@@ -6,6 +6,8 @@
   .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__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); }
 }

package/styles/components/table-toolbar.css

@@ -15,7 +15,8 @@
     transition: background-color var(--uix-dur-fast) var(--uix-ease-out), border-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-chip:hover { border-color: var(--uix-border-strong); color: var(--uix-text); }
-  .uix-chip[data-on] { background: var(--uix-brand-muted); border-color: var(--uix-accent); color: var(--uix-accent); }
+  .uix-chip[data-on] { background: var(--uix-brand-muted); border-color: var(--uix-accent); color: var(--uix-accent-text); }
+  .uix-chip:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
   .uix-chip__count { font-variant-numeric: tabular-nums; opacity: .7; }
   .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); }

package/styles/components/table.css

@@ -18,18 +18,32 @@
   /* multi-column sort ordinal (⇧+click adds a secondary key) */
   .uix-table th[data-sort-order]::before { content: attr(data-sort-order); display: inline-block; margin-right: var(--uix-space-1); font-size: var(--uix-text-eyebrow); font-variant-numeric: tabular-nums; color: var(--uix-accent); }
 
+  /* sortable header's real <button> (UIX-A11Y-2): visually indistinguishable from the old
+     plain-text th — inherited font/colour, no chrome — with an inset overlay so the whole
+     cell stays the click target (the sticky th is its containing block). The sort arrow and
+     ordinal stay as th pseudo-content so they never pollute the button's accessible name. */
+  .uix-th__sortbtn { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: inherit; cursor: pointer; }
+  .uix-th__sortbtn::before { content: ""; position: absolute; inset: 0; }
+
   .uix-table td { padding: 0 var(--uix-space-4); height: var(--uix-row-h); border-bottom: 1px solid var(--uix-border); color: var(--uix-text); vertical-align: middle; }
-  .uix-table tbody tr { background: var(--uix-row); }
+  .uix-table tbody tr { background: var(--uix-row); transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }
   .uix-table tbody tr:nth-child(even) { background: var(--uix-row-alt); }
   .uix-table--no-zebra tbody tr, .uix-table--no-zebra tbody tr:nth-child(even) { background: var(--uix-row); }
   .uix-table tbody tr[data-pinned] { background: var(--uix-row-pinned-bg); }
-  .uix-table tbody tr[aria-selected="true"] { background: var(--uix-row-selected-bg); }
+  /* [data-selected] carries row-selection styling; aria-selected is invalid on a native
+     table row — AT state comes from the row checkbox (UIX-A11Y-2). */
+  .uix-table tbody tr[data-selected] { background: var(--uix-row-selected-bg); }
   .uix-table tbody tr:hover { background: var(--uix-bg-hover); }
+  /* Row links stay calm on hover/focus: the row tint is the affordance, so neither the base
+     layer's `a:hover` underline nor link.css reaches them. `:not(.uix-btn)` keeps buttons
+     styled; the global :focus-visible ring still marks keyboard focus. */
+  .uix-table tbody a:not(.uix-btn):is(:hover, :focus-visible) { color: var(--uix-text); text-decoration: none; }
   .uix-table[data-density="compact"] td, .uix-table--compact td { height: var(--uix-row-h-compact); }
   .uix-table[data-density="comfortable"] td { height: var(--uix-row-h-comfortable); }
 
   .uix-table__pin { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1); border-radius: var(--uix-radius-xs); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
-  .uix-table tbody tr:hover .uix-table__pin, .uix-table__pin[data-on] { opacity: 1; }
+  /* :focus-visible reveal mirrors .uix-rowact so keyboard users can find the pin (UIX-A11Y-2) */
+  .uix-table tbody tr:hover .uix-table__pin, .uix-table__pin:focus-visible, .uix-table__pin[data-on] { opacity: 1; }
   .uix-table__pin:hover { background: var(--uix-bg-active); color: var(--uix-text); }
   .uix-table__pin[data-on] { color: var(--uix-accent); }
   .uix-table__pin svg { width: 15px; height: 15px; }
@@ -38,13 +52,16 @@
   /* frozen first column (opt-in via .uix-table--pinned-col) */
   .uix-table--pinned-col th:first-child, .uix-table--pinned-col td:first-child { position: sticky; left: 0; z-index: var(--uix-z-raised); box-shadow: 1px 0 0 var(--uix-border); }
   .uix-table--pinned-col thead th:first-child { z-index: var(--uix-z-sticky); background: var(--uix-surface); }
-  .uix-table--pinned-col tbody tr td:first-child { background: var(--uix-row); }
+  .uix-table--pinned-col tbody tr td:first-child { background: var(--uix-row); transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }
   .uix-table--pinned-col tbody tr:nth-child(even) td:first-child { background: var(--uix-row-alt); }
   .uix-table--pinned-col.uix-table--no-zebra tbody tr td:first-child,
   .uix-table--pinned-col.uix-table--no-zebra tbody tr:nth-child(even) td:first-child { background: var(--uix-row); }
   .uix-table--pinned-col tbody tr[data-pinned] td:first-child { background: var(--uix-row-pinned-bg); }
-  .uix-table--pinned-col tbody tr[aria-selected="true"] td:first-child { background: var(--uix-row-selected-bg); }
+  .uix-table--pinned-col tbody tr[data-selected] td:first-child { background: var(--uix-row-selected-bg); }
   .uix-table--pinned-col tbody tr:hover td:first-child { background: var(--uix-bg-hover); }
+  @media (prefers-reduced-motion: reduce) {
+    .uix-table tbody tr, .uix-table--pinned-col tbody tr td:first-child { transition: none; }
+  }
 
   /* ── column sizing + cell behaviour (a shared vocabulary, not per-app px) ──────── */
   .uix-table--fixed { table-layout: fixed; width: 100%; }
@@ -142,7 +159,7 @@
   .uix-table--cards thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
   .uix-table--cards tbody, .uix-table--cards tr, .uix-table--cards td { display: block; width: auto; }
   .uix-table--cards tbody tr { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); margin: 0 0 var(--uix-space-3); padding: var(--uix-space-1) var(--uix-space-4); box-shadow: var(--uix-shadow-sm); }
-  .uix-table--cards tbody tr[aria-selected="true"] { box-shadow: 0 0 0 2px var(--uix-accent); }
+  .uix-table--cards tbody tr[data-selected] { box-shadow: 0 0 0 2px var(--uix-accent); }
   .uix-table--cards td { height: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--uix-space-5); padding: var(--uix-space-2) 0; border-bottom: 1px solid var(--uix-border); text-align: right; white-space: normal; }
   .uix-table--cards td:last-child { border-bottom: 0; }
   .uix-table--cards td::before { content: attr(data-label); color: var(--uix-text-muted); font-size: var(--uix-text-meta); font-weight: 500; text-align: left; flex: none; }

package/styles/components/tag-input.css

@@ -10,7 +10,9 @@
     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 { 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); }
+  .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; }
 }

package/styles/components/timeline.css

@@ -1,6 +1,7 @@
 /* uix timeline / activity feed — depends only on --uix-* tokens. */
 @layer uix.components {
-  .uix-timeline { display: flex; flex-direction: column; }
+  /* list reset — the React Timeline renders <ol>/<li> for semantics; keep visuals pixel-identical (UIX-A11Y-4) */
+  .uix-timeline { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
   .uix-timeline__item { display: grid; grid-template-columns: 24px 1fr; gap: var(--uix-space-3); }
   .uix-timeline__rail { display: flex; flex-direction: column; align-items: center; }
   .uix-timeline__node { width: 12px; height: 12px; border-radius: 50%; background: var(--uix-accent); margin-top: var(--uix-space-1); flex: none; box-shadow: 0 0 0 3px var(--uix-brand-muted); }

package/styles/components/tooltip.css

@@ -13,7 +13,8 @@
     background: var(--uix-text); color: var(--uix-bg-app);
     font-size: var(--uix-text-meta); font-weight: 500; line-height: 1.4;
     padding: var(--uix-space-2) var(--uix-space-3); border-radius: var(--uix-radius-sm);
-    box-shadow: var(--uix-shadow-popover); white-space: normal; pointer-events: none;
+    /* no pointer-events:none — the bubble must be hoverable (WCAG 1.4.13, UIX-A11Y-1) */
+    box-shadow: var(--uix-shadow-popover); white-space: normal;
     opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-tooltip__bubble:popover-open { opacity: 1; }

package/tokens/base/color.json

@@ -21,6 +21,7 @@
   "accent-hover": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 88%, #000000)", "$description": "Primary-button hover. Theme-aware: derived from the live accent so it tracks the brand override (light darkens, dark lightens — see tokens/dark)." },
   "accent-fg":    { "$type": "color", "$value": "var(--uix-brand-fg,#FFFFFF)", "$description": "Runtime: chains through --uix-brand-fg." },
   "link":         { "$type": "color", "$value": "var(--uix-brand,#1447E6)", "$description": "Runtime: chains through --uix-brand." },
+  "accent-text":  { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 65%, #000000)", "$description": "The brand hue as TEXT on a neutral or --uix-brand-muted surface (a selected filter chip, an active tab label). The raw accent is a fill colour: a bright brand (POSx green, mission-control blue) reads below 3:1 as text on its own tint. Darkened from the live accent so it tracks the brand override; the worst shipped theme is 5.5:1 on brand-muted. Not for text ON a solid accent fill, which is --uix-accent-fg." },
   "ring":         { "$type": "color", "$value": "var(--uix-brand,#1447E6)", "$description": "Runtime: chains through --uix-brand." },
   "brand-muted":  { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 12%, transparent)", "$description": "Runtime: color-mix of the live accent." },
 

package/tokens/base/typography.json

@@ -3,19 +3,19 @@
   "font-heading": { "$type": "fontFamily", "$value": "\"IBM Plex Sans\",\"Inter\",system-ui,sans-serif" },
   "font-mono":    { "$type": "fontFamily", "$value": "\"IBM Plex Mono\",ui-monospace,monospace" },
 
-  "text-display":   { "$type": "dimension", "$value": "40px" },
+  "text-display":   { "$type": "dimension", "$value": "2.5rem" },
   "leading-display":{ "$type": "number",    "$value": "1.05" },
-  "text-data-hero": { "$type": "dimension", "$value": "34px" },
+  "text-data-hero": { "$type": "dimension", "$value": "2.125rem" },
   "leading-data-hero": { "$type": "number", "$value": "1.1" },
-  "text-h2":   { "$type": "dimension", "$value": "24px" },
+  "text-h2":   { "$type": "dimension", "$value": "1.5rem" },
   "leading-h2":{ "$type": "number",    "$value": "1.15" },
-  "text-h3":   { "$type": "dimension", "$value": "15px" },
+  "text-h3":   { "$type": "dimension", "$value": "0.9375rem" },
   "leading-h3":{ "$type": "number",    "$value": "1.3" },
-  "text-body":   { "$type": "dimension", "$value": "14px" },
+  "text-body":   { "$type": "dimension", "$value": "0.875rem" },
   "leading-body":{ "$type": "number",    "$value": "1.5" },
-  "text-meta":   { "$type": "dimension", "$value": "12.5px" },
+  "text-meta":   { "$type": "dimension", "$value": "0.78125rem" },
   "leading-meta":{ "$type": "number",    "$value": "1.4" },
-  "text-eyebrow":   { "$type": "dimension", "$value": "11px" },
+  "text-eyebrow":   { "$type": "dimension", "$value": "0.6875rem" },
   "leading-eyebrow":{ "$type": "number",    "$value": "1.2" },
 
   "tracking-tight":   { "$type": "dimension", "$value": "-0.02em" },

package/tokens/dark/color.json

@@ -16,6 +16,7 @@
   "accent":       { "$type": "color", "$value": "var(--uix-brand,#2563EB)" },
   "accent-hover": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 82%, #FFFFFF)", "$description": "On dark, primary-button hover LIGHTENS the accent (the light-theme value darkens). Tracks the live brand override." },
   "link":         { "$type": "color", "$value": "color-mix(in srgb, var(--uix-brand,#5B8DEF) 70%, #FFFFFF)", "$description": "Brightened on dark so links read clearly as links and stay distinct from the solid accent button background." },
+  "accent-text":  { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 70%, #FFFFFF)", "$description": "On dark, accent-hued text LIGHTENS the accent (the light-theme value darkens): the solid dark accent measured 3.2:1 on its own 16% tint. Same 70% weight as --uix-link." },
   "ring":         { "$type": "color", "$value": "var(--uix-brand,#3080FF)" },
   "brand-muted": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 16%, transparent)" },