@tensor_1/tokens 2.55.3 → 2.56.0

package/build/css/tokens.css

@@ -26,24 +26,24 @@
     --uix-accent-text: color-mix(in srgb, var(--uix-accent) 65%, #000000);
     --uix-ring: var(--uix-brand,#1447E6);
     --uix-brand-muted: color-mix(in srgb, var(--uix-accent) 12%, transparent);
-    --uix-success: #047857;
+    --uix-success: #2B7752;
     --uix-success-fg: #FFFFFF;
-    --uix-success-bg: #D0FAE5;
+    --uix-success-bg: #E8F4ED;
     --uix-success-text: var(--uix-success);
-    --uix-warning: #F99C00;
+    --uix-warning: #D4A03A;
     --uix-warning-fg: #1A1A1A;
-    --uix-warning-bg: #FEF3D6;
-    --uix-warning-text: #92400E;
-    --uix-warning-border: #D97706;
-    --uix-info: #1447E6;
+    --uix-warning-bg: #FAF2E1;
+    --uix-warning-text: #8F6213;
+    --uix-warning-border: #B8862C;
+    --uix-info: #3A5BD0;
     --uix-info-fg: #FFFFFF;
-    --uix-info-bg: #E3EBFF;
-    --uix-info-text: #1447E6;
-    --uix-danger: #E40014;
+    --uix-info-bg: #ECF0FC;
+    --uix-info-text: #3A5BD0;
+    --uix-danger: #B8433C;
     --uix-danger-fg: #FFFFFF;
-    --uix-danger-bg: #FFE4E6;
-    --uix-danger-border: #E40014;
-    --uix-danger-text: #C20012;
+    --uix-danger-bg: #FBEDEB;
+    --uix-danger-border: #D65A50;
+    --uix-danger-text: #B9423C;
     --uix-amber: #C98A1E;
     --uix-amber-text: #795006;
     --uix-amber-bg: #FEFCE8;
@@ -51,38 +51,40 @@
     --uix-attention-bg: #FFEDD5;
     --uix-attention-text: #9A3412;
     --uix-attention-solid: #EA580C;
-    --uix-overdue: #DC2626;
-    --uix-overdue-bg: #FEE2E2;
-    --uix-overdue-text: #991B1B;
-    --uix-overdue-solid: #EF4444;
+    --uix-overdue: #B8433C;
+    --uix-overdue-bg: #FBEDEB;
+    --uix-overdue-text: #B9423C;
+    --uix-overdue-solid: #D65A50;
     --uix-sev-4: var(--uix-info);
     --uix-sev-4-bg: var(--uix-info-bg);
     --uix-sev-4-text: var(--uix-info-text);
     --uix-sev-5: var(--uix-text-muted);
     --uix-sev-5-bg: var(--uix-bg-active);
     --uix-sev-5-text: var(--uix-text-hushed);
-    --uix-success-solid: #10B981;
-    --uix-warning-solid: #F59E0B;
-    --uix-info-solid: #2563EB;
-    --uix-danger-solid: #EF4444;
+    --uix-success-solid: #3FA373;
+    --uix-warning-solid: #B8862C;
+    --uix-info-solid: #5B7BE3;
+    --uix-danger-solid: #D65A50;
     --uix-neutral-solid: #8A8A8A;
     --uix-neutral-text: var(--uix-text-hushed);
     --uix-neutral-bg: var(--uix-bg-active);
     --uix-neutral-border: var(--uix-border-strong);
     --uix-chart-1: #0455E6;
-    --uix-chart-2: #249BC8;
-    --uix-chart-3: #06A543;
-    --uix-chart-4: #905709;
-    --uix-chart-5: #F25C1B;
-    --uix-chart-6: #B00825;
-    --uix-chart-7: #8143E6;
-    --uix-chart-8: #DB2579;
+    --uix-chart-2: #1F978A;
+    --uix-chart-3: #8C72D6;
+    --uix-chart-4: #4C9A5A;
+    --uix-chart-5: #B45E9A;
+    --uix-chart-6: #7F8A2E;
+    --uix-chart-7: #2F8FC2;
+    --uix-chart-8: #5E7D3A;
+    --uix-chart-series: var(--uix-chart-1);
+    --uix-chart-series-soft: rgba(4,85,230,.14);
     --uix-chart-neutral: #64748B;
     --uix-chart-grid: #EDEDED;
     --uix-chart-axis: #D4D4D4;
     --uix-chart-reference: #525252;
     --uix-chart-zone-warning: rgba(217,119,6,.10);
-    --uix-chart-zone-danger: rgba(228,0,20,.07);
+    --uix-chart-zone-danger: rgba(214,90,80,.08);
     --uix-chart-forecast-band: rgba(10,10,10,.06);
     --uix-chart-event: #737373;
     --uix-chart-partial: rgba(10,10,10,.10);
@@ -132,7 +134,15 @@
     --uix-loop-ping: 1600ms;
     --uix-loop-blink: 1100ms;
     --uix-loop-pulse: 2000ms;
+    --uix-dur-arrive: 420ms;
+    --uix-stagger-arrive: 45ms;
+    --uix-delay-arrive-trace: 150ms;
+    --uix-dur-arrive-trace: 700ms;
+    --uix-dur-arrive-grow: 500ms;
+    --uix-stagger-arrive-grow: 25ms;
+    --uix-dur-arrive-count: 600ms;
     --uix-lift: 4px;
+    --uix-arrive-rise: 8px;
     --uix-z-raised: 1;
     --uix-z-sticky: 3;
     --uix-z-dropdown: 10;
@@ -217,24 +227,24 @@
     --uix-accent-text: color-mix(in srgb, var(--uix-accent) 70%, #FFFFFF);
     --uix-ring: var(--uix-brand,#3080FF);
     --uix-brand-muted: color-mix(in srgb, var(--uix-accent) 16%, transparent);
-    --uix-success: #49AF7E;
+    --uix-success: #5DB887;
     --uix-success-fg: #002C22;
-    --uix-success-bg: rgba(73,175,126,.12);
+    --uix-success-bg: rgba(93,184,135,.12);
     --uix-success-text: #7CC79F;
-    --uix-warning: #D7B672;
+    --uix-warning: #D9B571;
     --uix-warning-fg: #1A1A1A;
-    --uix-warning-bg: rgba(217,164,64,.12);
-    --uix-warning-border: #CA8A04;
-    --uix-warning-text: var(--uix-warning,#D7B672);
-    --uix-info: #2563EB;
+    --uix-warning-bg: rgba(217,168,74,.12);
+    --uix-warning-border: #B48C3E;
+    --uix-warning-text: var(--uix-warning,#D9B571);
+    --uix-info: #3D5CC8;
     --uix-info-fg: #FFFFFF;
-    --uix-info-bg: rgba(98,147,219,.12);
-    --uix-info-text: #8DB4E7;
-    --uix-danger: #BE3A41;
+    --uix-info-bg: rgba(120,144,230,.12);
+    --uix-info-text: #97AEEC;
+    --uix-danger: #B4444A;
     --uix-danger-fg: #FFFFFF;
-    --uix-danger-bg: rgba(218,108,108,.12);
-    --uix-danger-border: #DA6C6C;
-    --uix-danger-text: #E69593;
+    --uix-danger-bg: rgba(218,108,100,.12);
+    --uix-danger-border: #DA6C64;
+    --uix-danger-text: #E4958F;
     --uix-amber: #E6B25C;
     --uix-amber-text: #DDB370;
     --uix-amber-bg: rgba(201,138,30,.14);
@@ -246,25 +256,26 @@
     --uix-overdue-bg: rgba(218,108,108,.12);
     --uix-overdue-text: #E89D9F;
     --uix-overdue-solid: #DA6C6C;
-    --uix-success-solid: #49AF7E;
-    --uix-warning-solid: #D9A440;
-    --uix-info-solid: #6293DB;
-    --uix-danger-solid: #DA6C6C;
+    --uix-success-solid: #5DB887;
+    --uix-warning-solid: #D9A84A;
+    --uix-info-solid: #7890E6;
+    --uix-danger-solid: #DA6C64;
     --uix-neutral-solid: #868686;
     --uix-chart-1: #3280FC;
-    --uix-chart-2: #15A7A4;
-    --uix-chart-3: #127A3D;
-    --uix-chart-4: #AB9017;
-    --uix-chart-5: #8F530C;
-    --uix-chart-6: #CD766F;
-    --uix-chart-7: #9A77F4;
-    --uix-chart-8: #FB416A;
+    --uix-chart-2: #22A093;
+    --uix-chart-3: #A580CF;
+    --uix-chart-4: #4E9F62;
+    --uix-chart-5: #C474AC;
+    --uix-chart-6: #93993A;
+    --uix-chart-7: #0A819D;
+    --uix-chart-8: #6E9147;
+    --uix-chart-series-soft: rgba(50,128,252,.18);
     --uix-chart-neutral: #A1A1A1;
     --uix-chart-grid: #232323;
     --uix-chart-axis: #3A3A3A;
     --uix-chart-reference: #B3B3B3;
     --uix-chart-zone-warning: rgba(217,164,64,.10);
-    --uix-chart-zone-danger: rgba(218,108,108,.10);
+    --uix-chart-zone-danger: rgba(218,108,100,.10);
     --uix-chart-forecast-band: rgba(250,250,250,.06);
     --uix-chart-event: #8C8C8C;
     --uix-chart-partial: rgba(250,250,250,.12);

package/build/tailwind/preset.cjs

@@ -78,6 +78,8 @@ module.exports = {
       "uix-chart-6": "var(--uix-chart-6)",
       "uix-chart-7": "var(--uix-chart-7)",
       "uix-chart-8": "var(--uix-chart-8)",
+      "uix-chart-series": "var(--uix-chart-series)",
+      "uix-chart-series-soft": "var(--uix-chart-series-soft)",
       "uix-chart-neutral": "var(--uix-chart-neutral)",
       "uix-chart-grid": "var(--uix-chart-grid)",
       "uix-chart-axis": "var(--uix-chart-axis)",

package/build/tailwind/theme.css

@@ -75,6 +75,8 @@
   --color-uix-chart-6: var(--uix-chart-6);
   --color-uix-chart-7: var(--uix-chart-7);
   --color-uix-chart-8: var(--uix-chart-8);
+  --color-uix-chart-series: var(--uix-chart-series);
+  --color-uix-chart-series-soft: var(--uix-chart-series-soft);
   --color-uix-chart-neutral: var(--uix-chart-neutral);
   --color-uix-chart-grid: var(--uix-chart-grid);
   --color-uix-chart-axis: var(--uix-chart-axis);

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" | "success-text" | "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" | "neutral-solid" | "neutral-text" | "neutral-bg" | "neutral-border" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "chart-grid" | "chart-axis" | "chart-reference" | "chart-zone-warning" | "chart-zone-danger" | "chart-forecast-band" | "chart-event" | "chart-partial" | "chart-comparison" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "print-ink" | "print-ink-quiet" | "print-paper" | "print-paper-quiet" | "print-line" | "print-danger" | "shadow-sm" | "shadow-md" | "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" | "dur-exit-fast" | "dur-exit" | "dur-exit-slow" | "dur-highlight" | "dur-change" | "delay-pending" | "hold-pending" | "hold-result" | "delay-tooltip" | "delay-tooltip-skip" | "loop-spin" | "loop-progress" | "loop-shimmer" | "loop-ping" | "loop-blink" | "loop-pulse" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-xl" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-standard" | "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" | "success-text" | "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" | "neutral-solid" | "neutral-text" | "neutral-bg" | "neutral-border" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-series" | "chart-series-soft" | "chart-neutral" | "chart-grid" | "chart-axis" | "chart-reference" | "chart-zone-warning" | "chart-zone-danger" | "chart-forecast-band" | "chart-event" | "chart-partial" | "chart-comparison" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "print-ink" | "print-ink-quiet" | "print-paper" | "print-paper-quiet" | "print-line" | "print-danger" | "shadow-sm" | "shadow-md" | "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" | "dur-exit-fast" | "dur-exit" | "dur-exit-slow" | "dur-highlight" | "dur-change" | "delay-pending" | "hold-pending" | "hold-result" | "delay-tooltip" | "delay-tooltip-skip" | "loop-spin" | "loop-progress" | "loop-shimmer" | "loop-ping" | "loop-blink" | "loop-pulse" | "dur-arrive" | "stagger-arrive" | "delay-arrive-trace" | "dur-arrive-trace" | "dur-arrive-grow" | "stagger-arrive-grow" | "dur-arrive-count" | "lift" | "arrive-rise" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-xl" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-standard" | "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

@@ -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)",
@@ -133,7 +135,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 +233,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,38 +258,40 @@ 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)",
@@ -329,7 +341,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 +434,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,25 +463,26 @@ 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)",
@@ -481,6 +502,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.56.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; }
+  }
+}

package/styles/components/meter.css

@@ -15,4 +15,16 @@
      --uix-accent-text, not --uix-accent: the raw accent of a bright brand is 2.62:1 on the track. */
   .uix-meter__fill[data-tone="neutral"]   { background: var(--uix-text-muted); }
   .uix-meter__fill[data-tone="accent"]    { background: var(--uix-accent-text); }
+
+  /* A target (calm kit 2.56): a thin ink mark across the track where the goal is ("Ziel 95 %"),
+     so "under target" reads from the bar itself. The track stops clipping so the mark can stand
+     a little proud of it; the fill keeps its rounded clip in __clip. --target is 0-1. */
+  .uix-meter--target { position: relative; overflow: visible; }
+  .uix-meter__clip { height: 100%; border-radius: inherit; overflow: hidden; }
+  .uix-meter__target {
+    position: absolute; top: calc(-1 * var(--uix-space-1)); bottom: calc(-1 * var(--uix-space-1));
+    inset-inline-start: calc(var(--target, 1) * 100%); width: 2px;
+    border-radius: var(--uix-radius-xs); background: var(--uix-text-hushed);
+  }
+  @media (forced-colors: active) { .uix-meter__target { background: CanvasText; } }
 }