@tensor_1/tokens 2.55.3 → 2.57.0

package/build/ts/tokens.js

@@ -78,6 +78,8 @@ export const cssVar = {
   "chart-6": "var(--uix-chart-6)",
   "chart-7": "var(--uix-chart-7)",
   "chart-8": "var(--uix-chart-8)",
+  "chart-series": "var(--uix-chart-series)",
+  "chart-series-soft": "var(--uix-chart-series-soft)",
   "chart-neutral": "var(--uix-chart-neutral)",
   "chart-grid": "var(--uix-chart-grid)",
   "chart-axis": "var(--uix-chart-axis)",
@@ -88,6 +90,47 @@ export const cssVar = {
   "chart-event": "var(--uix-chart-event)",
   "chart-partial": "var(--uix-chart-partial)",
   "chart-comparison": "var(--uix-chart-comparison)",
+  "file-img": "var(--uix-file-img)",
+  "file-img-soft": "var(--uix-file-img-soft)",
+  "file-img-strong": "var(--uix-file-img-strong)",
+  "file-img-edge": "var(--uix-file-img-edge)",
+  "file-img-label": "var(--uix-file-img-label)",
+  "file-doc": "var(--uix-file-doc)",
+  "file-doc-soft": "var(--uix-file-doc-soft)",
+  "file-doc-strong": "var(--uix-file-doc-strong)",
+  "file-doc-edge": "var(--uix-file-doc-edge)",
+  "file-doc-label": "var(--uix-file-doc-label)",
+  "file-sheet": "var(--uix-file-sheet)",
+  "file-sheet-soft": "var(--uix-file-sheet-soft)",
+  "file-sheet-strong": "var(--uix-file-sheet-strong)",
+  "file-sheet-edge": "var(--uix-file-sheet-edge)",
+  "file-sheet-label": "var(--uix-file-sheet-label)",
+  "file-mail": "var(--uix-file-mail)",
+  "file-mail-soft": "var(--uix-file-mail-soft)",
+  "file-mail-strong": "var(--uix-file-mail-strong)",
+  "file-mail-edge": "var(--uix-file-mail-edge)",
+  "file-mail-label": "var(--uix-file-mail-label)",
+  "file-code": "var(--uix-file-code)",
+  "file-code-soft": "var(--uix-file-code-soft)",
+  "file-code-strong": "var(--uix-file-code-strong)",
+  "file-code-edge": "var(--uix-file-code-edge)",
+  "file-code-label": "var(--uix-file-code-label)",
+  "file-log": "var(--uix-file-log)",
+  "file-log-soft": "var(--uix-file-log-soft)",
+  "file-log-strong": "var(--uix-file-log-strong)",
+  "file-log-edge": "var(--uix-file-log-edge)",
+  "file-log-label": "var(--uix-file-log-label)",
+  "file-archive": "var(--uix-file-archive)",
+  "file-archive-soft": "var(--uix-file-archive-soft)",
+  "file-archive-strong": "var(--uix-file-archive-strong)",
+  "file-archive-edge": "var(--uix-file-archive-edge)",
+  "file-archive-label": "var(--uix-file-archive-label)",
+  "file-other": "var(--uix-file-other)",
+  "file-other-soft": "var(--uix-file-other-soft)",
+  "file-other-strong": "var(--uix-file-other-strong)",
+  "file-other-edge": "var(--uix-file-other-edge)",
+  "file-other-label": "var(--uix-file-other-label)",
+  "file-label-fg": "var(--uix-file-label-fg)",
   "row": "var(--uix-row)",
   "row-alt": "var(--uix-row-alt)",
   "row-pinned-bg": "var(--uix-row-pinned-bg)",
@@ -133,7 +176,15 @@ export const cssVar = {
   "loop-ping": "var(--uix-loop-ping)",
   "loop-blink": "var(--uix-loop-blink)",
   "loop-pulse": "var(--uix-loop-pulse)",
+  "dur-arrive": "var(--uix-dur-arrive)",
+  "stagger-arrive": "var(--uix-stagger-arrive)",
+  "delay-arrive-trace": "var(--uix-delay-arrive-trace)",
+  "dur-arrive-trace": "var(--uix-dur-arrive-trace)",
+  "dur-arrive-grow": "var(--uix-dur-arrive-grow)",
+  "stagger-arrive-grow": "var(--uix-stagger-arrive-grow)",
+  "dur-arrive-count": "var(--uix-dur-arrive-count)",
   "lift": "var(--uix-lift)",
+  "arrive-rise": "var(--uix-arrive-rise)",
   "z-raised": "var(--uix-z-raised)",
   "z-sticky": "var(--uix-z-sticky)",
   "z-dropdown": "var(--uix-z-dropdown)",
@@ -223,24 +274,24 @@ export const light = {
   "accent-text": "color-mix(in srgb, var(--uix-accent) 65%, #000000)",
   "ring": "#1447E6",
   "brand-muted": "color-mix(in srgb, var(--uix-accent) 12%, transparent)",
-  "success": "#047857",
+  "success": "#2B7752",
   "success-fg": "#FFFFFF",
-  "success-bg": "#D0FAE5",
+  "success-bg": "#E8F4ED",
   "success-text": "var(--uix-success)",
-  "warning": "#F99C00",
+  "warning": "#D4A03A",
   "warning-fg": "#1A1A1A",
-  "warning-bg": "#FEF3D6",
-  "warning-text": "#92400E",
-  "warning-border": "#D97706",
-  "info": "#1447E6",
+  "warning-bg": "#FAF2E1",
+  "warning-text": "#8F6213",
+  "warning-border": "#B8862C",
+  "info": "#3A5BD0",
   "info-fg": "#FFFFFF",
-  "info-bg": "#E3EBFF",
-  "info-text": "#1447E6",
-  "danger": "#E40014",
+  "info-bg": "#ECF0FC",
+  "info-text": "#3A5BD0",
+  "danger": "#B8433C",
   "danger-fg": "#FFFFFF",
-  "danger-bg": "#FFE4E6",
-  "danger-border": "#E40014",
-  "danger-text": "#C20012",
+  "danger-bg": "#FBEDEB",
+  "danger-border": "#D65A50",
+  "danger-text": "#B9423C",
   "amber": "#C98A1E",
   "amber-text": "#795006",
   "amber-bg": "#FEFCE8",
@@ -248,42 +299,85 @@ export const light = {
   "attention-bg": "#FFEDD5",
   "attention-text": "#9A3412",
   "attention-solid": "#EA580C",
-  "overdue": "#DC2626",
-  "overdue-bg": "#FEE2E2",
-  "overdue-text": "#991B1B",
-  "overdue-solid": "#EF4444",
+  "overdue": "#B8433C",
+  "overdue-bg": "#FBEDEB",
+  "overdue-text": "#B9423C",
+  "overdue-solid": "#D65A50",
   "sev-4": "var(--uix-info)",
   "sev-4-bg": "var(--uix-info-bg)",
   "sev-4-text": "var(--uix-info-text)",
   "sev-5": "var(--uix-text-muted)",
   "sev-5-bg": "var(--uix-bg-active)",
   "sev-5-text": "var(--uix-text-hushed)",
-  "success-solid": "#10B981",
-  "warning-solid": "#F59E0B",
-  "info-solid": "#2563EB",
-  "danger-solid": "#EF4444",
+  "success-solid": "#3FA373",
+  "warning-solid": "#B8862C",
+  "info-solid": "#5B7BE3",
+  "danger-solid": "#D65A50",
   "neutral-solid": "#8A8A8A",
   "neutral-text": "var(--uix-text-hushed)",
   "neutral-bg": "var(--uix-bg-active)",
   "neutral-border": "var(--uix-border-strong)",
   "chart-1": "#0455E6",
-  "chart-2": "#249BC8",
-  "chart-3": "#06A543",
-  "chart-4": "#905709",
-  "chart-5": "#F25C1B",
-  "chart-6": "#B00825",
-  "chart-7": "#8143E6",
-  "chart-8": "#DB2579",
+  "chart-2": "#1F978A",
+  "chart-3": "#8C72D6",
+  "chart-4": "#4C9A5A",
+  "chart-5": "#B45E9A",
+  "chart-6": "#7F8A2E",
+  "chart-7": "#2F8FC2",
+  "chart-8": "#5E7D3A",
+  "chart-series": "var(--uix-chart-1)",
+  "chart-series-soft": "rgba(4,85,230,.14)",
   "chart-neutral": "#64748B",
   "chart-grid": "#EDEDED",
   "chart-axis": "#D4D4D4",
   "chart-reference": "#525252",
   "chart-zone-warning": "rgba(217,119,6,.10)",
-  "chart-zone-danger": "rgba(228,0,20,.07)",
+  "chart-zone-danger": "rgba(214,90,80,.08)",
   "chart-forecast-band": "rgba(10,10,10,.06)",
   "chart-event": "#737373",
   "chart-partial": "rgba(10,10,10,.10)",
   "chart-comparison": "#B8B8B8",
+  "file-img": "var(--uix-chart-3)",
+  "file-img-soft": "color-mix(in srgb, var(--uix-file-img) 12%, transparent)",
+  "file-img-strong": "color-mix(in srgb, var(--uix-file-img) 22%, transparent)",
+  "file-img-edge": "color-mix(in srgb, var(--uix-file-img) 28%, var(--uix-border))",
+  "file-img-label": "color-mix(in srgb, var(--uix-file-img) 86%, #000000)",
+  "file-doc": "var(--uix-chart-5)",
+  "file-doc-soft": "color-mix(in srgb, var(--uix-file-doc) 12%, transparent)",
+  "file-doc-strong": "color-mix(in srgb, var(--uix-file-doc) 22%, transparent)",
+  "file-doc-edge": "color-mix(in srgb, var(--uix-file-doc) 28%, var(--uix-border))",
+  "file-doc-label": "color-mix(in srgb, var(--uix-file-doc) 86%, #000000)",
+  "file-sheet": "#3F8F55",
+  "file-sheet-soft": "color-mix(in srgb, var(--uix-file-sheet) 12%, transparent)",
+  "file-sheet-strong": "color-mix(in srgb, var(--uix-file-sheet) 22%, transparent)",
+  "file-sheet-edge": "color-mix(in srgb, var(--uix-file-sheet) 28%, var(--uix-border))",
+  "file-sheet-label": "color-mix(in srgb, var(--uix-file-sheet) 86%, #000000)",
+  "file-mail": "var(--uix-chart-7)",
+  "file-mail-soft": "color-mix(in srgb, var(--uix-file-mail) 12%, transparent)",
+  "file-mail-strong": "color-mix(in srgb, var(--uix-file-mail) 22%, transparent)",
+  "file-mail-edge": "color-mix(in srgb, var(--uix-file-mail) 28%, var(--uix-border))",
+  "file-mail-label": "color-mix(in srgb, var(--uix-file-mail) 86%, #000000)",
+  "file-code": "var(--uix-chart-2)",
+  "file-code-soft": "color-mix(in srgb, var(--uix-file-code) 12%, transparent)",
+  "file-code-strong": "color-mix(in srgb, var(--uix-file-code) 22%, transparent)",
+  "file-code-edge": "color-mix(in srgb, var(--uix-file-code) 28%, var(--uix-border))",
+  "file-code-label": "color-mix(in srgb, var(--uix-file-code) 86%, #000000)",
+  "file-log": "var(--uix-chart-6)",
+  "file-log-soft": "color-mix(in srgb, var(--uix-file-log) 12%, transparent)",
+  "file-log-strong": "color-mix(in srgb, var(--uix-file-log) 22%, transparent)",
+  "file-log-edge": "color-mix(in srgb, var(--uix-file-log) 28%, var(--uix-border))",
+  "file-log-label": "color-mix(in srgb, var(--uix-file-log) 86%, #000000)",
+  "file-archive": "#8A7A66",
+  "file-archive-soft": "color-mix(in srgb, var(--uix-file-archive) 12%, transparent)",
+  "file-archive-strong": "color-mix(in srgb, var(--uix-file-archive) 22%, transparent)",
+  "file-archive-edge": "color-mix(in srgb, var(--uix-file-archive) 28%, var(--uix-border))",
+  "file-archive-label": "color-mix(in srgb, var(--uix-file-archive) 86%, #000000)",
+  "file-other": "#808080",
+  "file-other-soft": "color-mix(in srgb, var(--uix-file-other) 12%, transparent)",
+  "file-other-strong": "color-mix(in srgb, var(--uix-file-other) 22%, transparent)",
+  "file-other-edge": "color-mix(in srgb, var(--uix-file-other) 28%, var(--uix-border))",
+  "file-other-label": "color-mix(in srgb, var(--uix-file-other) 86%, #000000)",
+  "file-label-fg": "#FFFFFF",
   "row": "#FFFFFF",
   "row-alt": "#FAFAFA",
   "row-pinned-bg": "#F4F7FF",
@@ -329,7 +423,15 @@ export const light = {
   "loop-ping": "1600ms",
   "loop-blink": "1100ms",
   "loop-pulse": "2000ms",
+  "dur-arrive": "420ms",
+  "stagger-arrive": "45ms",
+  "delay-arrive-trace": "150ms",
+  "dur-arrive-trace": "700ms",
+  "dur-arrive-grow": "500ms",
+  "stagger-arrive-grow": "25ms",
+  "dur-arrive-count": "600ms",
   "lift": "4px",
+  "arrive-rise": "8px",
   "z-raised": "1",
   "z-sticky": "3",
   "z-dropdown": "10",
@@ -414,24 +516,24 @@ export const dark = {
   "accent-text": "color-mix(in srgb, var(--uix-accent) 70%, #FFFFFF)",
   "ring": "#3080FF",
   "brand-muted": "color-mix(in srgb, var(--uix-accent) 16%, transparent)",
-  "success": "#49AF7E",
+  "success": "#5DB887",
   "success-fg": "#002C22",
-  "success-bg": "rgba(73,175,126,.12)",
+  "success-bg": "rgba(93,184,135,.12)",
   "success-text": "#7CC79F",
-  "warning": "#D7B672",
+  "warning": "#D9B571",
   "warning-fg": "#1A1A1A",
-  "warning-bg": "rgba(217,164,64,.12)",
-  "warning-border": "#CA8A04",
-  "warning-text": "#D7B672",
-  "info": "#2563EB",
+  "warning-bg": "rgba(217,168,74,.12)",
+  "warning-border": "#B48C3E",
+  "warning-text": "#D9B571",
+  "info": "#3D5CC8",
   "info-fg": "#FFFFFF",
-  "info-bg": "rgba(98,147,219,.12)",
-  "info-text": "#8DB4E7",
-  "danger": "#BE3A41",
+  "info-bg": "rgba(120,144,230,.12)",
+  "info-text": "#97AEEC",
+  "danger": "#B4444A",
   "danger-fg": "#FFFFFF",
-  "danger-bg": "rgba(218,108,108,.12)",
-  "danger-border": "#DA6C6C",
-  "danger-text": "#E69593",
+  "danger-bg": "rgba(218,108,100,.12)",
+  "danger-border": "#DA6C64",
+  "danger-text": "#E4958F",
   "amber": "#E6B25C",
   "amber-text": "#DDB370",
   "amber-bg": "rgba(201,138,30,.14)",
@@ -443,29 +545,71 @@ export const dark = {
   "overdue-bg": "rgba(218,108,108,.12)",
   "overdue-text": "#E89D9F",
   "overdue-solid": "#DA6C6C",
-  "success-solid": "#49AF7E",
-  "warning-solid": "#D9A440",
-  "info-solid": "#6293DB",
-  "danger-solid": "#DA6C6C",
+  "success-solid": "#5DB887",
+  "warning-solid": "#D9A84A",
+  "info-solid": "#7890E6",
+  "danger-solid": "#DA6C64",
   "neutral-solid": "#868686",
   "chart-1": "#3280FC",
-  "chart-2": "#15A7A4",
-  "chart-3": "#127A3D",
-  "chart-4": "#AB9017",
-  "chart-5": "#8F530C",
-  "chart-6": "#CD766F",
-  "chart-7": "#9A77F4",
-  "chart-8": "#FB416A",
+  "chart-2": "#22A093",
+  "chart-3": "#A580CF",
+  "chart-4": "#4E9F62",
+  "chart-5": "#C474AC",
+  "chart-6": "#93993A",
+  "chart-7": "#0A819D",
+  "chart-8": "#6E9147",
+  "chart-series-soft": "rgba(50,128,252,.18)",
   "chart-neutral": "#A1A1A1",
   "chart-grid": "#232323",
   "chart-axis": "#3A3A3A",
   "chart-reference": "#B3B3B3",
   "chart-zone-warning": "rgba(217,164,64,.10)",
-  "chart-zone-danger": "rgba(218,108,108,.10)",
+  "chart-zone-danger": "rgba(218,108,100,.10)",
   "chart-forecast-band": "rgba(250,250,250,.06)",
   "chart-event": "#8C8C8C",
   "chart-partial": "rgba(250,250,250,.12)",
   "chart-comparison": "#5C5C5C",
+  "file-img": "#A58FE6",
+  "file-img-soft": "color-mix(in srgb, var(--uix-file-img) 15%, transparent)",
+  "file-img-strong": "color-mix(in srgb, var(--uix-file-img) 26%, transparent)",
+  "file-img-edge": "color-mix(in srgb, var(--uix-file-img) 32%, var(--uix-border))",
+  "file-img-label": "var(--uix-file-img)",
+  "file-doc": "#CF7FB6",
+  "file-doc-soft": "color-mix(in srgb, var(--uix-file-doc) 15%, transparent)",
+  "file-doc-strong": "color-mix(in srgb, var(--uix-file-doc) 26%, transparent)",
+  "file-doc-edge": "color-mix(in srgb, var(--uix-file-doc) 32%, var(--uix-border))",
+  "file-doc-label": "var(--uix-file-doc)",
+  "file-sheet": "#5DB07A",
+  "file-sheet-soft": "color-mix(in srgb, var(--uix-file-sheet) 15%, transparent)",
+  "file-sheet-strong": "color-mix(in srgb, var(--uix-file-sheet) 26%, transparent)",
+  "file-sheet-edge": "color-mix(in srgb, var(--uix-file-sheet) 32%, var(--uix-border))",
+  "file-sheet-label": "var(--uix-file-sheet)",
+  "file-mail": "#55A9D9",
+  "file-mail-soft": "color-mix(in srgb, var(--uix-file-mail) 15%, transparent)",
+  "file-mail-strong": "color-mix(in srgb, var(--uix-file-mail) 26%, transparent)",
+  "file-mail-edge": "color-mix(in srgb, var(--uix-file-mail) 32%, var(--uix-border))",
+  "file-mail-label": "var(--uix-file-mail)",
+  "file-code": "#3DB5A7",
+  "file-code-soft": "color-mix(in srgb, var(--uix-file-code) 15%, transparent)",
+  "file-code-strong": "color-mix(in srgb, var(--uix-file-code) 26%, transparent)",
+  "file-code-edge": "color-mix(in srgb, var(--uix-file-code) 32%, var(--uix-border))",
+  "file-code-label": "var(--uix-file-code)",
+  "file-log": "#A3AE4C",
+  "file-log-soft": "color-mix(in srgb, var(--uix-file-log) 15%, transparent)",
+  "file-log-strong": "color-mix(in srgb, var(--uix-file-log) 26%, transparent)",
+  "file-log-edge": "color-mix(in srgb, var(--uix-file-log) 32%, var(--uix-border))",
+  "file-log-label": "var(--uix-file-log)",
+  "file-archive": "#B0A08A",
+  "file-archive-soft": "color-mix(in srgb, var(--uix-file-archive) 15%, transparent)",
+  "file-archive-strong": "color-mix(in srgb, var(--uix-file-archive) 26%, transparent)",
+  "file-archive-edge": "color-mix(in srgb, var(--uix-file-archive) 32%, var(--uix-border))",
+  "file-archive-label": "var(--uix-file-archive)",
+  "file-other": "#8C8C8C",
+  "file-other-soft": "color-mix(in srgb, var(--uix-file-other) 15%, transparent)",
+  "file-other-strong": "color-mix(in srgb, var(--uix-file-other) 26%, transparent)",
+  "file-other-edge": "color-mix(in srgb, var(--uix-file-other) 32%, var(--uix-border))",
+  "file-other-label": "var(--uix-file-other)",
+  "file-label-fg": "#0A0A0A",
   "row": "#111111",
   "row-alt": "#161616",
   "row-pinned-bg": "rgba(48,128,255,.08)",
@@ -481,6 +625,7 @@ export const dark = {
 
 export const num = {
   "lift": 4,
+  "arrive-rise": 8,
   "radius-xs": 4,
   "radius-sm": 8,
   "radius-md": 12,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.55.3",
+  "version": "2.57.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/arrive.css

@@ -0,0 +1,67 @@
+/* uix arrive — the first paint of a glance page (calm kit 2.56). Not .uix-arrival, which is the
+   "you are here" tint on a link target.
+
+   .uix-arrive is the stage. While it carries [data-uix-arrive="play"] (React <Arrive> sets it on
+   the first mount of a session and clears it once the sequence is over), every .uix-arrive__item
+   inside fades and rises 8 px, 45 ms after the one before (its --uix-arrive-i), over 420 ms; lines
+   inside an item trace in from the left 150 ms after their card starts (700 ms) and bars grow from
+   their baseline, 25 ms apart (500 ms). With any other value, or none, nothing moves: the resting
+   state is the finished page, so a refresh or a data change never replays it. Under reduced
+   motion each item only fades, for --uix-dur (160 ms), and charts appear drawn.
+
+   Hooks for drawn marks (used by Sparkline, BarList and Meter; any SVG of your own can opt in):
+     .uix-arrive__trace  an SVG stroke with pathLength="1"
+     .uix-arrive__grow   an element that grows on its inline axis from scaleX(0) to its own transform,
+                         with --uix-arrive-j as its index among its siblings
+     .uix-arrive__slide  a full-width fill that slides in from its start edge to its own transform
+   Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-arrive { --uix-arrive-i: 0; }
+
+  .uix-arrive[data-uix-arrive="play"] .uix-arrive__item {
+    animation: uix-arrive-rise var(--uix-dur-arrive) var(--uix-ease-out) calc(var(--uix-arrive-i, 0) * var(--uix-stagger-arrive)) both;
+  }
+  .uix-arrive[data-uix-arrive="play"] .uix-arrive__trace {
+    stroke-dasharray: 1;
+    animation: uix-arrive-trace var(--uix-dur-arrive-trace) var(--uix-ease-out) calc(var(--uix-arrive-i, 0) * var(--uix-stagger-arrive) + var(--uix-delay-arrive-trace)) both;
+  }
+  .uix-arrive[data-uix-arrive="play"] .uix-arrive__grow {
+    transform-origin: left center;
+    animation: uix-arrive-grow var(--uix-dur-arrive-grow) var(--uix-ease-out) calc(var(--uix-arrive-i, 0) * var(--uix-stagger-arrive) + var(--uix-delay-arrive-trace) + var(--uix-arrive-j, 0) * var(--uix-stagger-arrive-grow)) both;
+  }
+  .uix-arrive[data-uix-arrive="play"] .uix-arrive__grow:dir(rtl) { transform-origin: right center; }
+  .uix-arrive[data-uix-arrive="play"] .uix-arrive__slide {
+    animation: uix-arrive-slide var(--uix-dur-arrive-grow) var(--uix-ease-out) calc(var(--uix-arrive-i, 0) * var(--uix-stagger-arrive) + var(--uix-delay-arrive-trace)) both;
+  }
+  .uix-arrive[data-uix-arrive="play"] .uix-arrive__slide:dir(rtl) { animation-name: uix-arrive-slide-rtl; }
+
+  @keyframes uix-arrive-rise {
+    from { opacity: 0; transform: translateY(var(--uix-arrive-rise)); }
+    to { opacity: 1; transform: none; }
+  }
+  @keyframes uix-arrive-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
+  /* no `to`: each mark grows or slides to its own resting transform (a bar's scaleX(--val)) */
+  @keyframes uix-arrive-grow { from { transform: scaleX(0); } }
+  @keyframes uix-arrive-slide { from { transform: translateX(-100%); } }
+  @keyframes uix-arrive-slide-rtl { from { transform: translateX(100%); } }
+  @keyframes uix-arrive-fade { from { opacity: 0; } to { opacity: 1; } }
+
+  /* !important: the reduced-motion policy (motion.css) ends every keyframe animation at once; a
+     layered !important wins over it, so the items still fade (feedback, not movement). Marks do
+     not draw in: they are simply there. The in-app preference gets the same. */
+  @media (prefers-reduced-motion: reduce) {
+    .uix-arrive[data-uix-arrive="play"] .uix-arrive__item { animation: uix-arrive-fade var(--uix-dur) var(--uix-ease-out) both !important; }
+    .uix-arrive[data-uix-arrive="play"] .uix-arrive__trace,
+    .uix-arrive[data-uix-arrive="play"] .uix-arrive__grow,
+    .uix-arrive[data-uix-arrive="play"] .uix-arrive__grow:dir(rtl),
+    .uix-arrive[data-uix-arrive="play"] .uix-arrive__slide,
+    .uix-arrive[data-uix-arrive="play"] .uix-arrive__slide:dir(rtl) { animation: none !important; stroke-dasharray: none; }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    :root[data-motion="reduce"] .uix-arrive[data-uix-arrive="play"] .uix-arrive__item { animation: uix-arrive-fade var(--uix-dur) var(--uix-ease-out) both !important; }
+    :root[data-motion="reduce"] .uix-arrive[data-uix-arrive="play"] :is(.uix-arrive__trace, .uix-arrive__grow, .uix-arrive__slide) { animation: none !important; stroke-dasharray: none; }
+  }
+  @media print {
+    .uix-arrive[data-uix-arrive="play"] :is(.uix-arrive__item, .uix-arrive__trace, .uix-arrive__grow, .uix-arrive__slide) { animation: none; }
+  }
+}

package/styles/components/chart-card.css

@@ -0,0 +1,87 @@
+/* uix chart card — the glance kit (calm kit 2.56): one card asks one question and answers it with
+   a number before it shows one chart. Also the small marks a glance card holds: a bar list, a
+   service status strip and a sparkline. For analysis with reading time use .uix-chart.
+   Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-chart-card {
+    display: flex; flex-direction: column; gap: var(--uix-space-2); min-width: 0;
+    padding: var(--uix-space-4) var(--uix-space-5);
+    border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg);
+    background: var(--uix-surface); box-shadow: var(--uix-shadow-sm); color: var(--uix-text);
+  }
+  .uix-chart-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--uix-space-3); min-width: 0; }
+  /* the title is the question, in the quiet voice; the answer under it is the loud line */
+  .uix-chart-card__question {
+    margin: 0; min-width: 0; color: var(--uix-text-hushed);
+    font-size: var(--uix-text-meta); font-weight: 500; line-height: var(--uix-leading-meta);
+  }
+  .uix-chart-card__action { flex: none; font-size: var(--uix-text-meta); }
+  .uix-chart-card__answer {
+    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--uix-space-2); margin: 0; min-width: 0;
+    font-size: var(--uix-text-h3); font-weight: 600; line-height: var(--uix-leading-h3); overflow-wrap: anywhere;
+  }
+  .uix-chart-card__headline {
+    font-size: var(--uix-text-h2); font-weight: 650; line-height: var(--uix-leading-h2);
+    letter-spacing: var(--uix-tracking-tight); font-variant-numeric: tabular-nums;
+  }
+  .uix-chart-card__plot { position: relative; min-width: 0; margin-top: var(--uix-space-1); }
+  .uix-chart-card__note { margin: 0; color: var(--uix-text-muted); font-size: var(--uix-text-meta); line-height: var(--uix-leading-meta); }
+  /* an empty card is one sentence (proposal rule 7); it shrinks to fit it */
+  .uix-chart-card__empty { margin: 0; padding-block: var(--uix-space-2); color: var(--uix-text-muted); font-size: var(--uix-text-body); }
+
+  /* a Chart inside the card drops its own card chrome; the plot keeps its height */
+  .uix-chart-card .uix-chart { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
+  /* axis digits in the UI face with tabular figures (ECharts' SVG text takes CSS) */
+  .uix-chart-card svg text { font-variant-numeric: tabular-nums; }
+
+  /* the glance tooltip: dark ink on light pages and light ink on dark ones, small, no border */
+  .uix-glance-tooltip { font-size: var(--uix-text-meta); line-height: var(--uix-leading-meta); font-variant-numeric: tabular-nums; }
+  .uix-glance-tooltip__title { opacity: .75; }
+  .uix-glance-tooltip__row { display: flex; align-items: center; gap: var(--uix-space-2); white-space: nowrap; }
+  .uix-glance-tooltip__swatch { width: 8px; height: 8px; flex: none; border-radius: var(--uix-radius-xs); background: var(--swatch); }
+  .uix-glance-tooltip__value { margin-inline-start: auto; font-weight: 650; padding-inline-start: var(--uix-space-3); }
+
+  /* ── bar list: one row per bucket, label | bar | value ─────────────────────────────────── */
+  .uix-bar-list { display: flex; flex-direction: column; gap: var(--uix-space-2); margin: 0; padding: 0; list-style: none; }
+  .uix-bar-list__row {
+    display: grid; grid-template-columns: minmax(4rem, max-content) minmax(0, 1fr) minmax(2rem, max-content);
+    align-items: center; gap: var(--uix-space-3); font-size: var(--uix-text-meta);
+  }
+  .uix-bar-list__label { min-width: 0; color: var(--uix-text-hushed); overflow-wrap: anywhere; }
+  .uix-bar-list__track { display: block; height: 8px; border-radius: var(--uix-radius-pill); background: var(--uix-bg-active); overflow: hidden; }
+  .uix-bar-list__bar {
+    display: block; height: 100%; border-radius: inherit; background: var(--uix-chart-series);
+    transform-origin: left center; transform: scaleX(var(--val, 0));
+    transition: transform var(--uix-dur) var(--uix-ease-out);
+  }
+  .uix-bar-list__bar:dir(rtl) { transform-origin: right center; }
+  .uix-bar-list__row[data-tone="comparison"] .uix-bar-list__bar { background: var(--uix-chart-comparison); }
+  .uix-bar-list__row[data-tone="warning"] .uix-bar-list__bar { background: var(--uix-warning-solid); }
+  .uix-bar-list__value { text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
+
+  /* ── status strip: one cell per service, ok / degraded / down / unknown ───────────────── */
+  .uix-status-strip { display: flex; flex-direction: column; gap: var(--uix-space-2); min-width: 0; }
+  .uix-status-strip__cells { display: flex; gap: var(--uix-space-1); height: 8px; }
+  .uix-status-strip__cell { flex: 1 1 0; min-width: 2px; border-radius: var(--uix-radius-xs); background: var(--uix-neutral-solid); }
+  .uix-status-strip__cell[data-tone="ok"] { background: var(--uix-success-solid); }
+  .uix-status-strip__cell[data-tone="warning"] { background: var(--uix-warning-solid); }
+  .uix-status-strip__cell[data-tone="critical"] { background: var(--uix-danger-solid); }
+  .uix-status-strip__list { display: flex; flex-direction: column; gap: var(--uix-space-2); margin: var(--uix-space-1) 0 0; padding: 0; list-style: none; font-size: var(--uix-text-meta); }
+  .uix-status-strip__item { display: flex; align-items: baseline; gap: var(--uix-space-3); min-width: 0; }
+  .uix-status-strip__name { min-width: 0; overflow-wrap: anywhere; }
+  .uix-status-strip__state { margin-inline-start: auto; flex: none; color: var(--uix-text-muted); }
+
+  /* ── sparkline: an ink-grey line and an endpoint dot ───────────────────────────────────── */
+  .uix-sparkline { display: inline-block; flex: none; vertical-align: middle; overflow: visible; }
+  .uix-sparkline__line { fill: none; stroke: var(--uix-text-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+  .uix-sparkline--series .uix-sparkline__line { stroke: var(--uix-chart-series); }
+  .uix-sparkline__end { fill: var(--uix-text); }
+  .uix-sparkline--series .uix-sparkline__end { fill: var(--uix-chart-series); }
+
+  @media (forced-colors: active) {
+    .uix-bar-list__bar, .uix-status-strip__cell { background: CanvasText; }
+    .uix-status-strip__cell[data-tone="ok"] { background: GrayText; }
+    .uix-sparkline__line { stroke: CanvasText; }
+    .uix-sparkline__end { fill: CanvasText; }
+  }
+}