@tensor_1/tokens 2.0.0

package/build/ts/tokens.js

@@ -0,0 +1,355 @@
+/* GENERATED — do not edit. Source: tokens/  •  Build: npm run build:tokens.
+ * cssVar  — theme-aware var() strings; use in the browser / CSS-in-JS (respects brand + dark).
+ * light/dark — resolved values for non-DOM use (SSR, React Native, server-rendered charts).
+ *              runtime brand tokens resolve to their fallback color here.
+ * num     — unitless px numbers (React Native, layout math). */
+export const cssVar = {
+  "bg-app": "var(--uix-bg-app)",
+  "bg-subtle": "var(--uix-bg-subtle)",
+  "bg-hover": "var(--uix-bg-hover)",
+  "bg-active": "var(--uix-bg-active)",
+  "surface": "var(--uix-surface)",
+  "surface-2": "var(--uix-surface-2)",
+  "surface-3": "var(--uix-surface-3)",
+  "border": "var(--uix-border)",
+  "border-strong": "var(--uix-border-strong)",
+  "text": "var(--uix-text)",
+  "text-hushed": "var(--uix-text-hushed)",
+  "text-muted": "var(--uix-text-muted)",
+  "text-reverse": "var(--uix-text-reverse)",
+  "text-hushed-reverse": "var(--uix-text-hushed-reverse)",
+  "accent": "var(--uix-accent)",
+  "accent-dark": "var(--uix-accent-dark)",
+  "accent-light": "var(--uix-accent-light)",
+  "accent-hover": "var(--uix-accent-hover)",
+  "accent-fg": "var(--uix-accent-fg)",
+  "link": "var(--uix-link)",
+  "ring": "var(--uix-ring)",
+  "brand-muted": "var(--uix-brand-muted)",
+  "success": "var(--uix-success)",
+  "success-fg": "var(--uix-success-fg)",
+  "success-bg": "var(--uix-success-bg)",
+  "warning": "var(--uix-warning)",
+  "warning-fg": "var(--uix-warning-fg)",
+  "warning-bg": "var(--uix-warning-bg)",
+  "warning-text": "var(--uix-warning-text)",
+  "info": "var(--uix-info)",
+  "info-fg": "var(--uix-info-fg)",
+  "info-bg": "var(--uix-info-bg)",
+  "info-text": "var(--uix-info-text)",
+  "danger": "var(--uix-danger)",
+  "danger-fg": "var(--uix-danger-fg)",
+  "danger-bg": "var(--uix-danger-bg)",
+  "danger-text": "var(--uix-danger-text)",
+  "success-solid": "var(--uix-success-solid)",
+  "warning-solid": "var(--uix-warning-solid)",
+  "info-solid": "var(--uix-info-solid)",
+  "danger-solid": "var(--uix-danger-solid)",
+  "chart-1": "var(--uix-chart-1)",
+  "chart-2": "var(--uix-chart-2)",
+  "chart-3": "var(--uix-chart-3)",
+  "chart-4": "var(--uix-chart-4)",
+  "chart-5": "var(--uix-chart-5)",
+  "chart-6": "var(--uix-chart-6)",
+  "chart-7": "var(--uix-chart-7)",
+  "chart-8": "var(--uix-chart-8)",
+  "chart-neutral": "var(--uix-chart-neutral)",
+  "row": "var(--uix-row)",
+  "row-alt": "var(--uix-row-alt)",
+  "row-pinned-bg": "var(--uix-row-pinned-bg)",
+  "scrollbar-thumb": "var(--uix-scrollbar-thumb)",
+  "scrollbar-thumb-hover": "var(--uix-scrollbar-thumb-hover)",
+  "scrollbar-track": "var(--uix-scrollbar-track)",
+  "scrim": "var(--uix-scrim)",
+  "scrim-strong": "var(--uix-scrim-strong)",
+  "shadow-sm": "var(--uix-shadow-sm)",
+  "shadow-popover": "var(--uix-shadow-popover)",
+  "shadow-overlay": "var(--uix-shadow-overlay)",
+  "highlight-top": "var(--uix-highlight-top)",
+  "ease-out": "var(--uix-ease-out)",
+  "ease-out-strong": "var(--uix-ease-out-strong)",
+  "ease-in": "var(--uix-ease-in)",
+  "ease-in-out": "var(--uix-ease-in-out)",
+  "ease-spring": "var(--uix-ease-spring)",
+  "dur-fast": "var(--uix-dur-fast)",
+  "dur": "var(--uix-dur)",
+  "dur-slow": "var(--uix-dur-slow)",
+  "dur-slower": "var(--uix-dur-slower)",
+  "lift": "var(--uix-lift)",
+  "z-raised": "var(--uix-z-raised)",
+  "z-sticky": "var(--uix-z-sticky)",
+  "z-dropdown": "var(--uix-z-dropdown)",
+  "z-overlay": "var(--uix-z-overlay)",
+  "z-tooltip": "var(--uix-z-tooltip)",
+  "z-toast": "var(--uix-z-toast)",
+  "radius-xs": "var(--uix-radius-xs)",
+  "radius-sm": "var(--uix-radius-sm)",
+  "radius-md": "var(--uix-radius-md)",
+  "radius-lg": "var(--uix-radius-lg)",
+  "radius-pill": "var(--uix-radius-pill)",
+  "row-h": "var(--uix-row-h)",
+  "row-h-compact": "var(--uix-row-h-compact)",
+  "row-h-comfortable": "var(--uix-row-h-comfortable)",
+  "control-h": "var(--uix-control-h)",
+  "sidebar-w": "var(--uix-sidebar-w)",
+  "topbar-h": "var(--uix-topbar-h)",
+  "scrollbar-size": "var(--uix-scrollbar-size)",
+  "icon-sm": "var(--uix-icon-sm)",
+  "icon-md": "var(--uix-icon-md)",
+  "icon-lg": "var(--uix-icon-lg)",
+  "peek-w": "var(--uix-peek-w)",
+  "space-0": "var(--uix-space-0)",
+  "space-1": "var(--uix-space-1)",
+  "space-2": "var(--uix-space-2)",
+  "space-3": "var(--uix-space-3)",
+  "space-4": "var(--uix-space-4)",
+  "space-5": "var(--uix-space-5)",
+  "space-6": "var(--uix-space-6)",
+  "space-7": "var(--uix-space-7)",
+  "space-8": "var(--uix-space-8)",
+  "space-9": "var(--uix-space-9)",
+  "space-10": "var(--uix-space-10)",
+  "space-11": "var(--uix-space-11)",
+  "space-12": "var(--uix-space-12)",
+  "font-sans": "var(--uix-font-sans)",
+  "font-heading": "var(--uix-font-heading)",
+  "font-mono": "var(--uix-font-mono)",
+  "text-display": "var(--uix-text-display)",
+  "leading-display": "var(--uix-leading-display)",
+  "text-data-hero": "var(--uix-text-data-hero)",
+  "leading-data-hero": "var(--uix-leading-data-hero)",
+  "text-h2": "var(--uix-text-h2)",
+  "leading-h2": "var(--uix-leading-h2)",
+  "text-h3": "var(--uix-text-h3)",
+  "leading-h3": "var(--uix-leading-h3)",
+  "text-body": "var(--uix-text-body)",
+  "leading-body": "var(--uix-leading-body)",
+  "text-meta": "var(--uix-text-meta)",
+  "leading-meta": "var(--uix-leading-meta)",
+  "text-eyebrow": "var(--uix-text-eyebrow)",
+  "leading-eyebrow": "var(--uix-leading-eyebrow)",
+  "tracking-tight": "var(--uix-tracking-tight)",
+  "tracking-eyebrow": "var(--uix-tracking-eyebrow)",
+};
+
+export const light = {
+  "bg-app": "#FAFAFA",
+  "bg-subtle": "#F5F5F5",
+  "bg-hover": "#EFEFEF",
+  "bg-active": "#E5E5E5",
+  "surface": "#FFFFFF",
+  "surface-2": "#FFFFFF",
+  "surface-3": "#FAFAFA",
+  "border": "#E5E5E5",
+  "border-strong": "#D4D4D4",
+  "text": "#0A0A0A",
+  "text-hushed": "rgba(10,10,10,.62)",
+  "text-muted": "#6B6B6B",
+  "text-reverse": "#FFFFFF",
+  "text-hushed-reverse": "rgba(255,255,255,.62)",
+  "accent": "#1447E6",
+  "accent-dark": "#0E3AC0",
+  "accent-light": "#4D77F0",
+  "accent-hover": "color-mix(in srgb, var(--uix-accent) 88%, #000000)",
+  "accent-fg": "#FFFFFF",
+  "link": "#1447E6",
+  "ring": "#1447E6",
+  "brand-muted": "color-mix(in srgb, var(--uix-accent) 12%, transparent)",
+  "success": "#047857",
+  "success-fg": "#FFFFFF",
+  "success-bg": "#D0FAE5",
+  "warning": "#F99C00",
+  "warning-fg": "#1A1A1A",
+  "warning-bg": "#FEF3D6",
+  "warning-text": "#92400E",
+  "info": "#1447E6",
+  "info-fg": "#FFFFFF",
+  "info-bg": "#E3EBFF",
+  "info-text": "#1447E6",
+  "danger": "#E40014",
+  "danger-fg": "#FFFFFF",
+  "danger-bg": "#FFE4E6",
+  "danger-text": "#C20012",
+  "success-solid": "#10B981",
+  "warning-solid": "#F59E0B",
+  "info-solid": "#2563EB",
+  "danger-solid": "#EF4444",
+  "chart-1": "#2563EB",
+  "chart-2": "#0891B2",
+  "chart-3": "#16A34A",
+  "chart-4": "#F59E0B",
+  "chart-5": "#EA580C",
+  "chart-6": "#E11D48",
+  "chart-7": "#7C3AED",
+  "chart-8": "#DB2777",
+  "chart-neutral": "#64748B",
+  "row": "#FFFFFF",
+  "row-alt": "#FAFAFA",
+  "row-pinned-bg": "#F4F7FF",
+  "scrollbar-thumb": "rgba(10,10,10,.20)",
+  "scrollbar-thumb-hover": "rgba(10,10,10,.34)",
+  "scrollbar-track": "transparent",
+  "scrim": "rgba(0,0,0,.5)",
+  "scrim-strong": "rgba(0,0,0,.7)",
+  "shadow-sm": "0 1px 2px rgba(0,0,0,.06)",
+  "shadow-popover": "0 8px 24px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.05)",
+  "shadow-overlay": "0 16px 48px rgba(0,0,0,.18)",
+  "highlight-top": "inset 0 1px 0 rgba(255,255,255,0)",
+  "ease-out": "cubic-bezier(.23,1,.32,1)",
+  "ease-out-strong": "cubic-bezier(.2,0,0,1)",
+  "ease-in": "cubic-bezier(.4,0,1,1)",
+  "ease-in-out": "cubic-bezier(.77,0,.175,1)",
+  "ease-spring": "cubic-bezier(.34,1.56,.64,1)",
+  "dur-fast": "120ms",
+  "dur": "160ms",
+  "dur-slow": "240ms",
+  "dur-slower": "320ms",
+  "lift": "4px",
+  "z-raised": "1",
+  "z-sticky": "3",
+  "z-dropdown": "10",
+  "z-overlay": "20",
+  "z-tooltip": "30",
+  "z-toast": "100",
+  "radius-xs": "4px",
+  "radius-sm": "8px",
+  "radius-md": "12px",
+  "radius-lg": "16px",
+  "radius-pill": "999px",
+  "row-h": "56px",
+  "row-h-compact": "44px",
+  "row-h-comfortable": "68px",
+  "control-h": "36px",
+  "sidebar-w": "248px",
+  "topbar-h": "56px",
+  "scrollbar-size": "10px",
+  "icon-sm": "16px",
+  "icon-md": "20px",
+  "icon-lg": "24px",
+  "peek-w": "420px",
+  "space-0": "0",
+  "space-1": "4px",
+  "space-2": "8px",
+  "space-3": "12px",
+  "space-4": "16px",
+  "space-5": "20px",
+  "space-6": "24px",
+  "space-7": "32px",
+  "space-8": "40px",
+  "space-9": "48px",
+  "space-10": "64px",
+  "space-11": "80px",
+  "space-12": "96px",
+  "font-sans": "\"Inter\",system-ui,sans-serif",
+  "font-heading": "\"IBM Plex Sans\",\"Inter\",system-ui,sans-serif",
+  "font-mono": "\"IBM Plex Mono\",ui-monospace,monospace",
+  "text-display": "40px",
+  "leading-display": "1.05",
+  "text-data-hero": "34px",
+  "leading-data-hero": "1.1",
+  "text-h2": "24px",
+  "leading-h2": "1.15",
+  "text-h3": "15px",
+  "leading-h3": "1.3",
+  "text-body": "14px",
+  "leading-body": "1.5",
+  "text-meta": "12.5px",
+  "leading-meta": "1.4",
+  "text-eyebrow": "11px",
+  "leading-eyebrow": "1.2",
+  "tracking-tight": "-0.02em",
+  "tracking-eyebrow": "0.06em",
+};
+
+export const dark = {
+  "bg-app": "#0A0A0A",
+  "bg-subtle": "#171717",
+  "bg-hover": "#1F1F1F",
+  "bg-active": "#262626",
+  "surface": "#111111",
+  "surface-2": "#171717",
+  "surface-3": "#262626",
+  "border": "rgba(255,255,255,.08)",
+  "border-strong": "rgba(255,255,255,.14)",
+  "text": "#FAFAFA",
+  "text-hushed": "rgba(250,250,250,.64)",
+  "text-muted": "#A1A1A1",
+  "accent": "#2563EB",
+  "accent-hover": "color-mix(in srgb, var(--uix-accent) 82%, #FFFFFF)",
+  "link": "#5B8DEF",
+  "ring": "#3080FF",
+  "brand-muted": "color-mix(in srgb, var(--uix-accent) 16%, transparent)",
+  "success": "#00D294",
+  "success-fg": "#002C22",
+  "success-bg": "rgba(0,210,148,.15)",
+  "warning": "#FCBB00",
+  "warning-fg": "#1A1A1A",
+  "warning-bg": "rgba(249,156,0,.16)",
+  "warning-text": "#FCBB00",
+  "info": "#2563EB",
+  "info-fg": "#FFFFFF",
+  "info-bg": "rgba(48,128,255,.16)",
+  "info-text": "#60A5FA",
+  "danger": "#DC2626",
+  "danger-fg": "#FFFFFF",
+  "danger-bg": "rgba(220,38,38,.20)",
+  "danger-text": "#F87171",
+  "success-solid": "#34D399",
+  "warning-solid": "#FBBF24",
+  "info-solid": "#3B82F6",
+  "danger-solid": "#F87171",
+  "chart-1": "#3080FF",
+  "chart-2": "#00C2B0",
+  "chart-3": "#00D294",
+  "chart-4": "#FCBB00",
+  "chart-5": "#FF8B1A",
+  "chart-6": "#FF6568",
+  "chart-7": "#A685FF",
+  "chart-8": "#FF667F",
+  "chart-neutral": "#A1A1A1",
+  "row": "#111111",
+  "row-alt": "#161616",
+  "row-pinned-bg": "rgba(48,128,255,.08)",
+  "scrollbar-thumb": "rgba(255,255,255,.18)",
+  "scrollbar-thumb-hover": "rgba(255,255,255,.30)",
+  "highlight-top": "inset 0 1px 0 rgba(255,255,255,.04)",
+};
+
+export const num = {
+  "lift": 4,
+  "radius-xs": 4,
+  "radius-sm": 8,
+  "radius-md": 12,
+  "radius-lg": 16,
+  "radius-pill": 999,
+  "row-h": 56,
+  "row-h-compact": 44,
+  "row-h-comfortable": 68,
+  "control-h": 36,
+  "sidebar-w": 248,
+  "topbar-h": 56,
+  "scrollbar-size": 10,
+  "icon-sm": 16,
+  "icon-md": 20,
+  "icon-lg": 24,
+  "peek-w": 420,
+  "space-1": 4,
+  "space-2": 8,
+  "space-3": 12,
+  "space-4": 16,
+  "space-5": 20,
+  "space-6": 24,
+  "space-7": 32,
+  "space-8": 40,
+  "space-9": 48,
+  "space-10": 64,
+  "space-11": 80,
+  "space-12": 96,
+  "text-display": 40,
+  "text-data-hero": 34,
+  "text-h2": 24,
+  "text-h3": 15,
+  "text-body": 14,
+  "text-meta": 12.5,
+  "text-eyebrow": 11,
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@tensor_1/tokens",
+  "version": "2.0.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",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/COx-ORG-H/UIx.git",
+    "directory": "packages/tokens"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "build",
+    "themes/*.css",
+    "tokens"
+  ],
+  "exports": {
+    "./css": "./build/css/tokens.css",
+    "./styles": "./build/css/components.css",
+    "./tailwind": "./build/tailwind/theme.css",
+    "./tailwind/preset": "./build/tailwind/preset.cjs",
+    "./ts": {
+      "types": "./build/ts/tokens.d.ts",
+      "default": "./build/ts/tokens.js"
+    },
+    "./themes/tensor": "./themes/tensor.css",
+    "./themes/posx": "./themes/posx.css",
+    "./themes/shopx": "./themes/shopx.css",
+    "./themes/mission-control": "./themes/mission-control.css"
+  },
+  "scripts": {
+    "build:tokens": "node style-dictionary.config.mjs",
+    "build:themes": "node scripts/build-themes.mjs",
+    "build:styles": "node scripts/build-styles.mjs",
+    "build": "npm run build:tokens && npm run build:themes && npm run build:styles",
+    "test:parity": "node scripts/check-parity.mjs",
+    "test:contract": "node scripts/check-contract.mjs",
+    "prepublishOnly": "npm run build && npm run test:parity && npm run test:contract"
+  },
+  "devDependencies": {
+    "postcss": "^8.4.0",
+    "postcss-import": "^16.1.1",
+    "style-dictionary": "^4.0.0"
+  }
+}

package/themes/mission-control.css

@@ -0,0 +1,4 @@
+/* GENERATED — do not edit. Brand override for "mission-control". Source: themes/mission-control.tokens.json; build: npm run build:themes.
+   Sets only the write-only brand slots; accent/link/ring/brand-muted re-chain via @tensor_1/tokens/css. */
+:root { --uix-brand: #0088ff; --uix-brand-fg: #ffffff; --uix-bg-app: #f4f2f0; --uix-bg-subtle: #F4F2F0; --uix-bg-hover: #ECEAE6; --uix-bg-active: #E7E4DF; --uix-surface: #FFFFFF; --uix-surface-2: #FFFFFF; --uix-surface-3: #FFFFFF; --uix-border: #D2CECB; --uix-border-strong: #C4BFBB; --uix-text: #0C0A08; --uix-text-hushed: rgba(12,10,8,0.60); --uix-text-muted: #6E6A68; --uix-font-sans: "Geist", system-ui, sans-serif; --uix-font-mono: "Geist Mono", ui-monospace, monospace; --uix-radius-sm: 6px; --uix-radius-md: 8px; --uix-success: #1b6b33; --uix-success-fg: #FFFFFF; --uix-success-bg: #E7F0EC; --uix-success-solid: #34c759; --uix-warning: #9a4d06; --uix-warning-fg: #FFFFFF; --uix-warning-bg: #FBE9DD; --uix-warning-solid: #ff8d28; --uix-info: #0b5cab; --uix-info-fg: #FFFFFF; --uix-info-bg: #E4EBF6; --uix-info-solid: #0088ff; --uix-danger: #be1f25; --uix-danger-fg: #FFFFFF; --uix-danger-bg: #FBE4E4; --uix-danger-solid: #ff383c; }
+:root:where(.dark,[data-theme="dark"]) { --uix-brand: #0091ff; --uix-bg-app: #0E0D0C; --uix-bg-subtle: #1A1817; --uix-bg-hover: #252220; --uix-bg-active: #322E2B; --uix-surface: #1A1817; --uix-surface-2: #252220; --uix-surface-3: #322E2B; --uix-border: rgba(255,255,255,0.08); --uix-border-strong: rgba(255,255,255,0.14); --uix-text: #E3E0DB; --uix-text-hushed: rgba(227,224,219,0.60); --uix-text-muted: rgba(227,224,219,0.60); --uix-success: #30d158; --uix-success-fg: #0C0A08; --uix-success-bg: rgba(94,192,138,0.14); --uix-success-solid: #30d158; --uix-warning: #ff9230; --uix-warning-fg: #0C0A08; --uix-warning-bg: rgba(240,138,74,0.16); --uix-warning-solid: #ff9230; --uix-info: #0091ff; --uix-info-fg: #0C0A08; --uix-info-bg: rgba(86,131,210,0.16); --uix-info-solid: #0091ff; --uix-danger: #ff4245; --uix-danger-fg: #0C0A08; --uix-danger-bg: rgba(242,109,109,0.16); --uix-danger-solid: #ff4245; }

package/themes/posx.css

@@ -0,0 +1,4 @@
+/* GENERATED — do not edit. Brand override for "posx". Source: themes/posx.tokens.json; build: npm run build:themes.
+   Sets only the write-only brand slots; accent/link/ring/brand-muted re-chain via @tensor_1/tokens/css. */
+:root { --uix-brand: #16A34A; --uix-brand-fg: #FFFFFF; }
+:root:where(.dark,[data-theme="dark"]) { --uix-brand: #22C55E; }

package/themes/shopx.css

@@ -0,0 +1,4 @@
+/* GENERATED — do not edit. Brand override for "shopx". Source: themes/shopx.tokens.json; build: npm run build:themes.
+   Sets only the write-only brand slots; accent/link/ring/brand-muted re-chain via @tensor_1/tokens/css. */
+:root { --uix-brand: #7C3AED; --uix-brand-fg: #FFFFFF; }
+:root:where(.dark,[data-theme="dark"]) { --uix-brand: #8B5CF6; }

package/themes/tensor.css

@@ -0,0 +1,4 @@
+/* GENERATED — do not edit. Brand override for "tensor". Source: themes/tensor.tokens.json; build: npm run build:themes.
+   Sets only the write-only brand slots; accent/link/ring/brand-muted re-chain via @tensor_1/tokens/css. */
+:root { --uix-brand: #4F46E5; --uix-brand-fg: #FFFFFF; }
+:root:where(.dark,[data-theme="dark"]) { --uix-brand: #6366F1; }

package/tokens/base/color.json

@@ -0,0 +1,68 @@
+{
+  "bg-app":    { "$type": "color", "$value": "#FAFAFA" },
+  "bg-subtle": { "$type": "color", "$value": "#F5F5F5" },
+  "bg-hover":  { "$type": "color", "$value": "#EFEFEF" },
+  "bg-active": { "$type": "color", "$value": "#E5E5E5" },
+  "surface":   { "$type": "color", "$value": "#FFFFFF" },
+  "surface-2": { "$type": "color", "$value": "#FFFFFF" },
+  "surface-3": { "$type": "color", "$value": "#FAFAFA" },
+  "border":        { "$type": "color", "$value": "#E5E5E5" },
+  "border-strong": { "$type": "color", "$value": "#D4D4D4" },
+
+  "text":                { "$type": "color", "$value": "#0A0A0A" },
+  "text-hushed":         { "$type": "color", "$value": "rgba(10,10,10,.62)" },
+  "text-muted":          { "$type": "color", "$value": "#6B6B6B", "$description": "Muted meta text. Darkened from #737373 so it clears WCAG AA 4.5:1 on the off-white surfaces it sits on (--uix-bg-subtle #F5F5F5, --uix-bg-app #FAFAFA); the old value was 4.34:1 on #F5F5F5." },
+  "text-reverse":        { "$type": "color", "$value": "#FFFFFF" },
+  "text-hushed-reverse": { "$type": "color", "$value": "rgba(255,255,255,.62)" },
+
+  "accent":       { "$type": "color", "$value": "var(--uix-brand,#1447E6)", "$description": "Runtime: chains through the write-only --uix-brand slot. Must stay var() to keep live brand override." },
+  "accent-dark":  { "$type": "color", "$value": "#0E3AC0" },
+  "accent-light": { "$type": "color", "$value": "#4D77F0" },
+  "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." },
+  "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." },
+
+  "success":    { "$type": "color", "$value": "#047857" },
+  "success-fg": { "$type": "color", "$value": "#FFFFFF" },
+  "success-bg": { "$type": "color", "$value": "#D0FAE5" },
+  "warning":      { "$type": "color", "$value": "#F99C00" },
+  "warning-fg":   { "$type": "color", "$value": "#1A1A1A" },
+  "warning-bg":   { "$type": "color", "$value": "#FEF3D6" },
+  "warning-text": { "$type": "color", "$value": "#92400E", "$description": "Warning-toned TEXT, legible on the faint --uix-warning-bg in light mode — the bright --uix-warning (#F99C00) fails contrast on pale yellow, so the foreground is a hand-darkened amber. Dark mode overrides to track --uix-warning. Used by status-pill --warning." },
+  "info":       { "$type": "color", "$value": "#1447E6" },
+  "info-fg":    { "$type": "color", "$value": "#FFFFFF" },
+  "info-bg":    { "$type": "color", "$value": "#E3EBFF" },
+  "info-text":  { "$type": "color", "$value": "#1447E6", "$description": "Info-toned TEXT, legible on --uix-info-bg and dark surfaces. Light = --uix-info (already AA on the pale tint); dark brightens it (the deep --uix-info #2563EB fails as text on the dark tint). Used by status-pill/alert/node --info. See --uix-warning-text for the same TEXT-vs-SOLID split." },
+  "danger":     { "$type": "color", "$value": "#E40014" },
+  "danger-fg":  { "$type": "color", "$value": "#FFFFFF" },
+  "danger-bg":  { "$type": "color", "$value": "#FFE4E6" },
+  "danger-text": { "$type": "color", "$value": "#C20012", "$description": "Danger-toned TEXT, legible on --uix-danger-bg (the bright --uix-danger #E40014 is only 4.05:1 on #FFE4E6). A hand-darkened red for text; --uix-danger stays the SOLID role (danger button bg, critical pill, dots). Dark mode brightens it. Used by pill/alert/stat-trend/field-error/menu/sla/node/audit --danger." },
+
+  "success-solid": { "$type": "color", "$value": "#10B981", "$description": "SOLID status role — the vivid fill/dot/pulse color, distinct from the legible TEXT role (--uix-success). Products override per brand." },
+  "warning-solid": { "$type": "color", "$value": "#F59E0B", "$description": "SOLID status role (see success-solid)." },
+  "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" },
+  "chart-neutral": { "$type": "color", "$value": "#64748B" },
+
+  "row":           { "$type": "color", "$value": "#FFFFFF" },
+  "row-alt":       { "$type": "color", "$value": "#FAFAFA" },
+  "row-pinned-bg": { "$type": "color", "$value": "#F4F7FF" },
+
+  "scrollbar-thumb":       { "$type": "color", "$value": "rgba(10,10,10,.20)" },
+  "scrollbar-thumb-hover": { "$type": "color", "$value": "rgba(10,10,10,.34)" },
+  "scrollbar-track":       { "$type": "color", "$value": "transparent" },
+
+  "scrim":        { "$type": "color", "$value": "rgba(0,0,0,.5)", "$description": "Backdrop behind modal / drawer / side-peek overlays and the avatar edit-overlay — dims the content beneath. Theme-invariant: a black scrim reads on light and dark alike (no dark override)." },
+  "scrim-strong": { "$type": "color", "$value": "rgba(0,0,0,.7)", "$description": "Heavier scrim for media-focus surfaces (lightbox), where the backdrop should recede fully behind the image." }
+}

package/tokens/base/effect.json

@@ -0,0 +1,26 @@
+{
+  "shadow-sm":      { "$type": "shadow", "$value": "0 1px 2px rgba(0,0,0,.06)" },
+  "shadow-popover": { "$type": "shadow", "$value": "0 8px 24px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.05)" },
+  "shadow-overlay": { "$type": "shadow", "$value": "0 16px 48px rgba(0,0,0,.18)" },
+  "highlight-top":  { "$type": "shadow", "$value": "inset 0 1px 0 rgba(255,255,255,0)" },
+
+  "ease-out":        { "$type": "cubicBezier", "$value": "cubic-bezier(.23,1,.32,1)" },
+  "ease-out-strong": { "$type": "cubicBezier", "$value": "cubic-bezier(.2,0,0,1)" },
+  "ease-in":         { "$type": "cubicBezier", "$value": "cubic-bezier(.4,0,1,1)" },
+  "ease-in-out":     { "$type": "cubicBezier", "$value": "cubic-bezier(.77,0,.175,1)" },
+  "ease-spring":     { "$type": "cubicBezier", "$value": "cubic-bezier(.34,1.56,.64,1)" },
+
+  "dur-fast":   { "$type": "duration", "$value": "120ms" },
+  "dur":        { "$type": "duration", "$value": "160ms" },
+  "dur-slow":   { "$type": "duration", "$value": "240ms" },
+  "dur-slower": { "$type": "duration", "$value": "320ms" },
+
+  "lift": { "$type": "dimension", "$value": "4px" },
+
+  "z-raised":   { "$type": "number", "$value": "1",   "$description": "z-index ladder (semantic stacking order). raised = locally lifted within a component: a sticky table header & first column, a flow node title over its diamond, a heartbeat dot over its ping." },
+  "z-sticky":   { "$type": "number", "$value": "3",   "$description": "A sticky plane that must outrank raised siblings — the pinned-column header corner, which sits above both the sticky row and the sticky column." },
+  "z-dropdown": { "$type": "number", "$value": "10",  "$description": "Detached layers anchored to a trigger: menus, selects, comboboxes, popovers." },
+  "z-overlay":  { "$type": "number", "$value": "20",  "$description": "Full-viewport overlays and their backdrops: modal, drawer, side-peek, lightbox." },
+  "z-tooltip":  { "$type": "number", "$value": "30",  "$description": "Tooltips — above overlays so a tip raised from inside a dialog stays visible." },
+  "z-toast":    { "$type": "number", "$value": "100", "$description": "Toasts / transient notifications — top of the stack." }
+}

package/tokens/base/size.json

@@ -0,0 +1,20 @@
+{
+  "radius-xs":   { "$type": "dimension", "$value": "4px", "$description": "Smallest corner radius — tiny inset elements (checkbox box, kbd key, table/sidebar hover buttons, legend swatch, inline code, audit-log diff chips, small tags). The bottom rung below radius-sm." },
+  "radius-sm":   { "$type": "dimension", "$value": "8px" },
+  "radius-md":   { "$type": "dimension", "$value": "12px" },
+  "radius-lg":   { "$type": "dimension", "$value": "16px" },
+  "radius-pill": { "$type": "dimension", "$value": "999px" },
+
+  "row-h":             { "$type": "dimension", "$value": "56px" },
+  "row-h-compact":     { "$type": "dimension", "$value": "44px" },
+  "row-h-comfortable": { "$type": "dimension", "$value": "68px" },
+  "control-h":         { "$type": "dimension", "$value": "36px" },
+  "sidebar-w":         { "$type": "dimension", "$value": "248px" },
+  "topbar-h":          { "$type": "dimension", "$value": "56px" },
+
+  "scrollbar-size": { "$type": "dimension", "$value": "10px" },
+  "icon-sm": { "$type": "dimension", "$value": "16px" },
+  "icon-md": { "$type": "dimension", "$value": "20px" },
+  "icon-lg": { "$type": "dimension", "$value": "24px" },
+  "peek-w":  { "$type": "dimension", "$value": "420px" }
+}

package/tokens/base/space.json

@@ -0,0 +1,15 @@
+{
+  "space-0":  { "$type": "dimension", "$value": "0",    "$description": "Spacing scale (4px base). The shared whitespace rhythm — components consume --uix-space-* instead of hardcoded px so density is tunable in one place." },
+  "space-1":  { "$type": "dimension", "$value": "4px" },
+  "space-2":  { "$type": "dimension", "$value": "8px" },
+  "space-3":  { "$type": "dimension", "$value": "12px" },
+  "space-4":  { "$type": "dimension", "$value": "16px" },
+  "space-5":  { "$type": "dimension", "$value": "20px" },
+  "space-6":  { "$type": "dimension", "$value": "24px" },
+  "space-7":  { "$type": "dimension", "$value": "32px" },
+  "space-8":  { "$type": "dimension", "$value": "40px" },
+  "space-9":  { "$type": "dimension", "$value": "48px" },
+  "space-10": { "$type": "dimension", "$value": "64px" },
+  "space-11": { "$type": "dimension", "$value": "80px" },
+  "space-12": { "$type": "dimension", "$value": "96px" }
+}

package/tokens/base/typography.json

@@ -0,0 +1,23 @@
+{
+  "font-sans":    { "$type": "fontFamily", "$value": "\"Inter\",system-ui,sans-serif" },
+  "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" },
+  "leading-display":{ "$type": "number",    "$value": "1.05" },
+  "text-data-hero": { "$type": "dimension", "$value": "34px" },
+  "leading-data-hero": { "$type": "number", "$value": "1.1" },
+  "text-h2":   { "$type": "dimension", "$value": "24px" },
+  "leading-h2":{ "$type": "number",    "$value": "1.15" },
+  "text-h3":   { "$type": "dimension", "$value": "15px" },
+  "leading-h3":{ "$type": "number",    "$value": "1.3" },
+  "text-body":   { "$type": "dimension", "$value": "14px" },
+  "leading-body":{ "$type": "number",    "$value": "1.5" },
+  "text-meta":   { "$type": "dimension", "$value": "12.5px" },
+  "leading-meta":{ "$type": "number",    "$value": "1.4" },
+  "text-eyebrow":   { "$type": "dimension", "$value": "11px" },
+  "leading-eyebrow":{ "$type": "number",    "$value": "1.2" },
+
+  "tracking-tight":   { "$type": "dimension", "$value": "-0.02em" },
+  "tracking-eyebrow": { "$type": "dimension", "$value": "0.06em" }
+}