@titan-design/react-ui 0.4.0 → 0.6.0

package/dist/theme/tokens-css.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/tokens-css.ts"],"names":[],"mappings":";;;AAkBA,IAAM,gBAAA,GAAmB,6DAAA;AAEzB,SAAS,WAAA,CAAY,UAAkB,IAAA,EAAyB;AAC9D,EAAA,MAAM,eAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAA,CACrC,GAAA,CAAI,CAAC,CAAC,IAAA,EAAM,KAAK,CAAA,KAAM,KAAK,IAAI,CAAA,EAAA,EAAK,KAAK,CAAA,CAAA,CAAG,CAAA,CAC7C,KAAK,IAAI,CAAA;AACZ,EAAA,OAAO,GAAG,QAAQ,CAAA;AAAA,EAAO,YAAY;AAAA,CAAA,CAAA;AACvC;AAMO,SAAS,iBAAA,GAA4B;AAC1C,EAAA,MAAM,IAAA,GAAO,WAAA,CAAY,OAAA,EAAS,gBAAgB,CAAA;AAClD,EAAA,MAAM,KAAA,GAAQ,WAAA,CAAY,qBAAA,EAAuB,iBAAiB,CAAA;AAClE,EAAA,OAAO,GAAG,gBAAgB;;AAAA,EAAO,IAAI;;AAAA,EAAO,KAAK;AAAA,CAAA;AACnD","file":"tokens-css.mjs","sourcesContent":["/**\n * Token CSS Generator\n *\n * Emits a static `:root {}` CSS block from the canonical theme token maps\n * (`darkThemeCSSVars` / `lightThemeCSSVars`). Those maps mirror every `:root`\n * custom property in `theme/global.css` — completeness and value parity are\n * enforced by `config.completeness.test.ts`, so HTML prototypes that import the\n * generated stylesheet resolve to the exact same values as the design system.\n * Pure codegen: deterministic and diffable against source.\n *\n * Dark mode is the default (`:root`); light mode is activated with `.light`,\n * matching the convention in `theme/global.css`.\n */\n\nimport { darkThemeCSSVars, lightThemeCSSVars } from './config'\n\ntype CSSVarMap = Record<string, string>\n\nconst GENERATED_HEADER = '/* Generated from theme token maps. Do not edit by hand. */'\n\nfunction formatBlock(selector: string, vars: CSSVarMap): string {\n  const declarations = Object.entries(vars)\n    .map(([name, value]) => `  ${name}: ${value};`)\n    .join('\\n')\n  return `${selector} {\\n${declarations}\\n}`\n}\n\n/**\n * Build the full `tokens.css` contents: a default (dark) `:root` block plus a\n * `.light` override block, driven entirely by the exported token maps.\n */\nexport function generateTokensCss(): string {\n  const root = formatBlock(':root', darkThemeCSSVars)\n  const light = formatBlock('.light, :root.light', lightThemeCSSVars)\n  return `${GENERATED_HEADER}\\n\\n${root}\\n\\n${light}\\n`\n}\n"]}
+{"version":3,"sources":["../../src/theme/tokens/primitives.ts","../../src/theme/tokens/semantic.ts","../../src/theme/config.ts","../../src/theme/tokens-css.ts"],"names":[],"mappings":"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","file":"tokens-css.mjs","sourcesContent":["/**\n * Primitive Design Tokens\n *\n * Raw values with no semantic meaning. These are the foundation of the design system\n * and should rarely be used directly in components. Use semantic tokens instead.\n */\n\nexport const primitiveColors = {\n  // Blue scale (primary brand)\n  blue: {\n    50: '#EFF6FF',\n    100: '#DBEAFE',\n    200: '#BFDBFE',\n    300: '#93C5FD',\n    400: '#60A5FA',\n    500: '#3B82F6',\n    600: '#5048E5', // Primary main\n    700: '#3832A0', // Primary dark\n    800: '#1E40AF',\n    900: '#1E3A8A',\n  },\n\n  // Green scale (secondary brand)\n  green: {\n    50: '#ECFDF5',\n    100: '#D1FAE5',\n    200: '#A7F3D0',\n    300: '#6EE7B7',\n    400: '#3FC79A', // Secondary light\n    500: '#10B981', // Secondary main\n    600: '#059669',\n    700: '#0B815A', // Secondary dark\n    800: '#065F46',\n    900: '#064E3B',\n  },\n\n  // Teal scale (success)\n  teal: {\n    50: '#F0FDFA',\n    100: '#CCFBF1',\n    200: '#99F6E4',\n    300: '#5EEAD4',\n    400: '#43C6B7', // Success light\n    500: '#14B8A6', // Success main\n    600: '#0D9488',\n    700: '#0E8074', // Success dark\n    800: '#115E59',\n    900: '#134E4A',\n  },\n\n  // Red scale (error)\n  red: {\n    50: '#FEF2F2',\n    100: '#FEE2E2',\n    200: '#FECACA',\n    300: '#FCA5A5',\n    400: '#DA6868', // Error light\n    500: '#EF4444',\n    600: '#D14343', // Error main\n    700: '#922E2E', // Error dark\n    800: '#991B1B',\n    900: '#7F1D1D',\n  },\n\n  // Vivid green scale (live/go success)\n  greenVivid: {\n    50: '#E9FBF0',\n    100: '#C8F7DA',\n    200: '#9FF0BF',\n    300: '#6BE79D',\n    400: '#47DE84', // Success vivid light\n    500: '#2ED573', // Success vivid main\n    600: '#22B85F',\n    700: '#1A9950', // Success vivid dark\n    800: '#157A40',\n    900: '#105C30',\n  },\n\n  // Vivid red scale (alert)\n  redVivid: {\n    50: '#FFECEE',\n    100: '#FFD6DB',\n    200: '#FFB3BC',\n    300: '#FF8593',\n    400: '#FF6070', // Error vivid light\n    500: '#FF4757', // Error vivid main\n    600: '#E63548',\n    700: '#C42539', // Error vivid dark\n    800: '#9E1C2C',\n    900: '#7A1520',\n  },\n\n  // Amber scale (warning)\n  amber: {\n    50: '#FFFBEB',\n    100: '#FEF3C7',\n    200: '#FDE68A',\n    300: '#FCD34D',\n    400: '#FFBF4C', // Warning light\n    500: '#FFB020', // Warning main\n    600: '#B27B16', // Warning dark\n    700: '#B45309',\n    800: '#92400E',\n    900: '#78350F',\n  },\n\n  // Sky/Blue scale (info)\n  sky: {\n    50: '#F0F9FF',\n    100: '#E0F2FE',\n    200: '#BAE6FD',\n    300: '#7DD3FC',\n    400: '#64B6F7', // Info light\n    500: '#2196F3', // Info main\n    600: '#0284C7',\n    700: '#0B79D0', // Info dark\n    800: '#075985',\n    900: '#0C4A6E',\n  },\n\n  // Neutral/Gray scale\n  neutral: {\n    50: '#FAFAFA',\n    100: '#F3F4F6',\n    200: '#E5E7EB',\n    300: '#D1D5DB',\n    400: '#9CA3AF',\n    500: '#6B7280',\n    600: '#4B5563',\n    700: '#374151',\n    800: '#1F2937',\n    900: '#111827',\n    950: '#030712',\n  },\n\n  // Orange scale (accent/brand color)\n  accent: {\n    100: '#FFA860',\n    200: '#FF9630',\n    300: '#FF8500',\n    400: '#FF7900',\n    500: '#F56C00',\n    600: '#E06D10',\n    700: '#D0620C',\n    800: '#B75500',\n    900: '#A34900',\n  },\n\n  // Charcoal scale (dark backgrounds)\n  charcoal: {\n    0: '#6E6E6E',\n    50: '#5D5D5D',\n    100: '#4C4C4C',\n    200: '#3C3C3C',\n    300: '#2C2C2C',\n    400: '#1F1F1F',\n    500: '#1C1C1C',\n    600: '#191919',\n    700: '#161616',\n    800: '#131313',\n    900: '#101010',\n  },\n\n  // Steel scale (cool accent)\n  steel: {\n    100: '#8AA4B8',\n    200: '#7894A8',\n    300: '#678498',\n    400: '#557488',\n    500: '#406D87',\n    600: '#39617A',\n    700: '#32556D',\n    800: '#243D53',\n    900: '#1D3146',\n  },\n\n  // Pure colors\n  white: '#FFFFFF',\n  black: '#000000',\n  transparent: 'transparent',\n} as const\n\n/**\n * Derived tonal ramps (TD-05.09 color foundations)\n *\n * Seven OKLCH-generated hue ramps, 11 perceptual lightness steps each (50 -> 950).\n * Built with hue-torsion + a chroma arc, anchored through existing brand/semantic\n * hexes. `pin` marks the step each ramp flows through its anchor.\n * This is the single source of truth for chromatic hexes — the categorical palette\n * below references these steps rather than duplicating values.\n * See coordination/design-explorations/foundations.\n */\nexport const primitiveRamps = {\n  red: {\n    50: '#FFF4F4',\n    100: '#FFE3E5',\n    200: '#FFC2C5',\n    300: '#FF9A9D',\n    400: '#F77175',\n    500: '#E05254',\n    600: '#D14343', // pin\n    700: '#A4221C',\n    800: '#7E1002',\n    900: '#5A0900',\n    950: '#3D0400',\n  },\n  orange: {\n    50: '#FFF5ED',\n    100: '#FFE6D4',\n    200: '#FFC7A2',\n    300: '#FFA063',\n    400: '#FF7900', // pin\n    500: '#DA5F00',\n    600: '#B94A00',\n    700: '#983804',\n    800: '#6F290F',\n    900: '#4E1C0C',\n    950: '#331107',\n  },\n  amber: {\n    50: '#FFF7DD',\n    100: '#FFEAA9',\n    200: '#FFD352',\n    300: '#F9B415', // pin\n    400: '#E08C00',\n    500: '#C27400',\n    600: '#A45E00',\n    700: '#814D14',\n    800: '#5B3A1A',\n    900: '#442503',\n    950: '#301500',\n  },\n  green: {\n    50: '#E3FFEE',\n    100: '#B5FFD2',\n    200: '#58F69E',\n    300: '#2ED573', // pin\n    400: '#21C05D',\n    500: '#22A444',\n    600: '#298732',\n    700: '#2B6B25',\n    800: '#264D1C',\n    900: '#1B3515',\n    950: '#11220D',\n  },\n  cyan: {\n    50: '#E6FBFF',\n    100: '#C2F6FF',\n    200: '#62EAFF',\n    300: '#22D3EE', // pin\n    400: '#01B5D1',\n    500: '#2697B7',\n    600: '#307B9B',\n    700: '#2A617F',\n    800: '#22465F',\n    900: '#0B3149',\n    950: '#001F36',\n  },\n  blue: {\n    50: '#EFF8FF',\n    100: '#D9EFFF',\n    200: '#ACDBFF',\n    300: '#78C2FF',\n    400: '#3CA8FF',\n    500: '#2196F3', // pin\n    600: '#1072CB',\n    700: '#135AA8',\n    800: '#14407E',\n    900: '#112C5A',\n    950: '#091B3C',\n  },\n  magenta: {\n    50: '#FFF3F9',\n    100: '#FFE2F1',\n    200: '#FFBDE2',\n    300: '#FF8FD5',\n    400: '#ED69C3',\n    500: '#D548AF',\n    600: '#BA2996',\n    700: '#9C0D7A', // pin\n    800: '#77005A',\n    900: '#56003F',\n    950: '#3B0029',\n  },\n} as const\n\n/**\n * Categorical (qualitative) palette — an ordered, CVD-safe series expressed as\n * references into {@link primitiveRamps} (one source of truth; the palette moves\n * with the ramps).\n *\n * Design: a single canonical hue order (blue, magenta, red, orange, green, cyan,\n * amber), with steps chosen vivid-midtone-first and fanned lighter/darker as the\n * series grows to preserve separation. The sequence is nested-stable — a chart\n * with N series uses the first N colors, and the series index is stable as N\n * changes. Colorblind-safe worst-case deuteranopia/protanopia floor 8 holds\n * through {@link CATEGORICAL_CVD_SAFE_MAX} colors; the 7th is an extended color\n * that should be paired with a legend or other secondary encoding.\n *\n * Two variants: `default` (vivid, sits on neutral/light surfaces, legible under\n * black text) and `dark` (deeper shades legible under white text on a fill). A\n * separate \"light\" variant was dropped — the vivid `default` picks already clear\n * black-text contrast, so it doubles as the light-context palette.\n */\nexport const categoricalPalette = {\n  default: [\n    primitiveRamps.blue[500],\n    primitiveRamps.magenta[500],\n    primitiveRamps.red[500],\n    primitiveRamps.orange[400],\n    primitiveRamps.green[300],\n    primitiveRamps.cyan[300],\n    primitiveRamps.amber[600], // extended (7th) — pair with a legend\n  ],\n  dark: [\n    primitiveRamps.blue[600],\n    primitiveRamps.magenta[600],\n    primitiveRamps.red[500],\n    primitiveRamps.orange[600],\n    primitiveRamps.green[800],\n    primitiveRamps.cyan[800],\n    primitiveRamps.amber[500], // extended (7th) — pair with a legend\n  ],\n} as const\n\n/** Largest series count that holds the CVD floor without a legend. */\nexport const CATEGORICAL_CVD_SAFE_MAX = 6\n\n/**\n * Categorical palette variant.\n * - `default` : vivid; neutral/light surfaces, legible under black text\n * - `dark`    : deeper shades, legible under white text on a filled swatch\n */\nexport type CategoricalVariant = keyof typeof categoricalPalette\n\n/**\n * Get a color from the ordered categorical palette by series index.\n * The palette is nested-stable, so the color for a given index does not change\n * with the total series count; `index` simply wraps past the end.\n *\n * @param index - 0-based series index (wraps past the end)\n * @param variant - `default` (black-text / light surfaces) or `dark` (white text)\n * @returns The hex color string\n */\nexport function getCategoricalColor(index: number, variant: CategoricalVariant = 'default'): string {\n  const palette = categoricalPalette[variant]\n  index = Math.max(0, Math.floor(index))\n  return palette[index % palette.length]\n}\n\n/**\n * Diverging status scale (BodyMap training-status: under → optimal → over) as\n * references into {@link primitiveRamps}. A true diverging shape — `optimal` is\n * the lightest center, the extremes go darker — so the signal reads in lightness\n * (colorblind-robust; worst-case deut/protanopia min ΔE ~10.9) and the direction\n * reads in the blue↔red axis (the CVD-safe hue pair).\n *\n * Tuned so every stop is dark enough for the fill yet light enough that BLACK\n * text clears 4.5:1 on all five — no per-cell white/black flipping. The value\n * valley is symmetric: the two mid-arms (maintenance / approaching) sit at equal\n * lightness (both ~0.53 relative luminance), the ends darker.\n */\nexport const divergingScale = [\n  primitiveRamps.blue[500], // under\n  primitiveRamps.cyan[300], // maintenance\n  primitiveRamps.green[200], // optimal (light center)\n  primitiveRamps.amber[300], // approaching\n  primitiveRamps.red[600], // over\n] as const\n\n/**\n * Sequential \"effort\" scale (low → high intensity: green → yellow → orange → red)\n * as references into {@link primitiveRamps}. A 6-stop ordinal palette; the\n * velocity/RPE strip sub-samples it. Every adjacent pair clears the CVD floor\n * (min deut/protan ΔE ≥ 4.5), and within that the hue walk is kept smooth —\n * the amber-200 → amber-300 → orange-400 run steps the yellow→orange transition\n * gradually rather than lurching. Order encodes magnitude, so it tolerates the\n * green↔red CVD pair. Stops 0–3 take black text; the dark reds take white.\n */\nexport const sequentialEffort = [\n  primitiveRamps.green[300],\n  primitiveRamps.amber[200],\n  primitiveRamps.amber[300],\n  primitiveRamps.orange[400],\n  primitiveRamps.red[600],\n  primitiveRamps.red[700],\n] as const\n\n/**\n * Best-contrast text color (black or white) for a solid fill — for labels sitting\n * on categorical/diverging/effort swatches. Uses the WCAG relative-luminance ratio.\n */\nexport function bestTextColor(hex: string): '#000000' | '#FFFFFF' {\n  const [r, g, b] = [0, 2, 4].map((i) => {\n    const c = parseInt(hex.replace('#', '').slice(i, i + 2), 16) / 255\n    return c >= 0.04045 ? ((c + 0.055) / 1.055) ** 2.4 : c / 12.92\n  })\n  const l = 0.2126 * r + 0.7152 * g + 0.0722 * b\n  return (l + 0.05) / 0.05 >= 1.05 / (l + 0.05) ? '#000000' : '#FFFFFF'\n}\n\n/**\n * Discrete rainbow palette for data visualization\n * Based on Paul Tol's color schemes: https://personal.sron.nl/~pault/#fig:scheme_rainbow_discrete\n */\nexport const discreteRainbow = [\n  '#E8ECFB',\n  '#D9CCE3',\n  '#D1BBD7',\n  '#CAACCB',\n  '#BA8DB4',\n  '#AE76A3',\n  '#AA6F9E',\n  '#994F88',\n  '#882E72',\n  '#1965B0',\n  '#437DBF',\n  '#5289C7',\n  '#6195CF',\n  '#7BAFDE',\n  '#4EB265',\n  '#90C987',\n  '#CAE0AB',\n  '#F7F056',\n  '#F7CB45',\n  '#F6C141',\n  '#F4A736',\n  '#F1932D',\n  '#EE8026',\n  '#E8601C',\n  '#E65518',\n  '#DC050C',\n  '#A5170E',\n  '#72190E',\n  '#42150A',\n] as const\n\n/**\n * Palette indices for discrete rainbow colors at different palette sizes.\n * For a given palette size (index + 1), returns the indices of colors to use.\n */\nconst discreteRainbowPalettes: number[][] = [\n  [10],\n  [10, 26],\n  [10, 18, 26],\n  [10, 15, 18, 26],\n  [10, 14, 15, 18, 26],\n  [10, 14, 15, 17, 18, 26],\n  [9, 10, 14, 15, 17, 18, 26],\n  [9, 10, 14, 15, 17, 18, 23, 26],\n  [9, 10, 14, 15, 17, 18, 23, 26, 28],\n  [9, 10, 14, 15, 17, 18, 21, 24, 26, 28],\n  [9, 10, 12, 14, 15, 17, 18, 21, 24, 26, 28],\n  [3, 6, 9, 10, 12, 14, 15, 17, 18, 21, 24, 26],\n  [3, 6, 9, 10, 12, 14, 15, 16, 17, 18, 21, 24, 26],\n  [3, 6, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26],\n  [3, 6, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28],\n  [3, 5, 7, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28],\n  [3, 5, 7, 8, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28],\n  [3, 5, 7, 8, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 27, 28],\n  [2, 4, 5, 7, 8, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 27, 28],\n  [2, 4, 5, 7, 8, 9, 10, 11, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 27, 28],\n  [2, 4, 5, 7, 8, 9, 10, 11, 13, 14, 15, 16, 17, 18, 19, 21, 23, 25, 26, 27, 28],\n  [2, 4, 5, 7, 8, 9, 10, 11, 13, 14, 15, 16, 17, 18, 19, 21, 23, 25, 26, 27, 28, 29],\n  [1, 2, 4, 5, 7, 8, 9, 10, 11, 13, 14, 15, 16, 17, 18, 19, 21, 23, 25, 26, 27, 28, 29],\n]\n\n/**\n * Get a color from the discrete rainbow palette for a given index and palette size.\n * Colors are optimized for visual distinction at each palette size.\n *\n * @param index - The index of the color in the series (0-based)\n * @param size - The total number of colors needed (1-23)\n * @returns The hex color string\n */\nexport function getDiscreteRainbowColor(index: number, size: number): string {\n  index = Math.max(0, index)\n  size = Math.min(Math.max(1, size), discreteRainbowPalettes.length)\n\n  const palette = discreteRainbowPalettes[size - 1]\n  if (index >= palette.length) index = index % palette.length\n\n  return discreteRainbow[palette[index] - 1]\n}\n\nexport const primitiveTypography = {\n  fontFamilies: {\n    sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'],\n    body: ['Nunito Sans', 'sans-serif'],\n    heading: ['Space Grotesk', 'sans-serif'],\n    mono: ['SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', 'monospace'],\n  },\n  fontSizes: {\n    xs: '0.75rem',    // 12px\n    sm: '0.875rem',   // 14px\n    base: '1rem',     // 16px\n    lg: '1.125rem',   // 18px\n    xl: '1.5rem',     // 24px\n    '2xl': '2rem',    // 32px\n    '3xl': '2.25rem', // 36px\n    '4xl': '3rem',    // 48px\n    '5xl': '3.5rem',  // 56px\n  },\n  fontWeights: {\n    normal: 400,\n    medium: 500,\n    semibold: 600,\n    bold: 700,\n  },\n  lineHeights: {\n    none: 1,\n    tight: 1.375,\n    snug: 1.5,\n    normal: 1.57,\n    relaxed: 1.66,\n    loose: 1.75,\n  },\n  letterSpacing: {\n    tighter: '-0.05em',\n    tight: '-0.025em',\n    normal: '0em',\n    wide: '0.025em',\n    wider: '0.05em',\n    widest: '0.5px',\n  },\n} as const\n\nexport const primitiveSpacing = {\n  0: '0',\n  px: '1px',\n  0.5: '0.125rem',  // 2px\n  1: '0.25rem',     // 4px\n  1.5: '0.375rem',  // 6px\n  2: '0.5rem',      // 8px\n  2.5: '0.625rem',  // 10px\n  3: '0.75rem',     // 12px\n  3.5: '0.875rem',  // 14px\n  4: '1rem',        // 16px\n  5: '1.25rem',     // 20px\n  6: '1.5rem',      // 24px\n  7: '1.75rem',     // 28px\n  8: '2rem',        // 32px\n  9: '2.25rem',     // 36px\n  10: '2.5rem',     // 40px\n  11: '2.75rem',    // 44px\n  12: '3rem',       // 48px\n  14: '3.5rem',     // 56px\n  16: '4rem',       // 64px\n  20: '5rem',       // 80px\n  24: '6rem',       // 96px\n  28: '7rem',       // 112px\n  32: '8rem',       // 128px\n} as const\n\nexport const primitiveBorderRadius = {\n  none: '0',\n  sm: '4px',\n  DEFAULT: '8px',\n  md: '8px',\n  lg: '12px',\n  xl: '16px',\n  '2xl': '24px',\n  full: '9999px',\n} as const\n\nexport const primitiveShadows = {\n  none: 'none',\n  sm: '0px 1px 2px rgba(100, 116, 139, 0.12)',\n  DEFAULT: '0px 1px 3px rgba(100, 116, 139, 0.12), 0px 1px 2px rgba(100, 116, 139, 0.24)',\n  md: '0px 4px 6px rgba(100, 116, 139, 0.12)',\n  lg: '0px 10px 15px rgba(100, 116, 139, 0.12)',\n  xl: '0px 20px 25px rgba(100, 116, 139, 0.12)',\n  '2xl': '0px 25px 50px rgba(100, 116, 139, 0.25)',\n  inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',\n} as const\n\nexport const primitiveBreakpoints = {\n  xs: 0,\n  sm: 600,\n  md: 1000,\n  lg: 1200,\n  xl: 1920,\n} as const\n\nexport const primitiveZIndex = {\n  hide: -1,\n  auto: 'auto',\n  base: 0,\n  docked: 10,\n  dropdown: 1000,\n  sticky: 1100,\n  drawer: 1100,\n  banner: 1200,\n  appBar: 1200,\n  overlay: 1300,\n  modal: 1400,\n  popover: 1500,\n  skipLink: 1600,\n  toast: 1700,\n  tooltip: 1800,\n} as const\n","/**\n * Semantic Design Tokens\n *\n * Meaningful tokens following DTCG (Design Tokens Community Group) naming conventions.\n * Pattern: {category}-{intent}-{variant?}-{state?}\n *\n * Categories:\n * - brand-* : Brand colors (primary, secondary, accent)\n * - status-* : Feedback colors (success, error, warning, info)\n * - result-* : Outcome indicators (improve, degrade, inconclusive, neutral)\n * - data-* : Data visualization colors (chart series)\n * - on-* : Text on colored backgrounds\n * - surface-* : Elevated containers (NOT \"paper\")\n * - background-* : Page backgrounds\n * - text-* : Text colors\n * - border-* : Border colors\n * - interactive-* : Hover/focus/active/disabled states\n */\n\nimport { primitiveColors as p, primitiveRamps as ramp, discreteRainbow } from './primitives'\n\n// Light mode semantic colors (default)\nexport const semanticColorsLight = {\n  // Brand colors (brand-*)\n  'brand-primary': ramp.orange[400],\n  'brand-primary-light': ramp.orange[300],\n  'brand-primary-dark': ramp.orange[500],\n  'brand-primary-subtle': 'rgba(255, 121, 0, 0.08)',\n  'brand-primary-hover': ramp.orange[500],\n  'brand-primary-active': ramp.orange[600],\n\n  'brand-secondary': ramp.cyan[600],\n  'brand-secondary-light': ramp.cyan[500],\n  'brand-secondary-dark': ramp.cyan[700],\n  'brand-secondary-subtle': 'rgba(48, 123, 155, 0.08)',\n  'brand-secondary-hover': ramp.cyan[700],\n  'brand-secondary-active': ramp.cyan[800],\n\n  // Text on brand backgrounds (on-*)\n  'on-brand-primary': p.white,\n  'on-brand-secondary': p.white,\n\n  // Status colors (status-*)\n  'status-success': ramp.green[300],\n  'status-success-light': ramp.green[200],\n  'status-success-dark': ramp.green[600],\n  'status-success-subtle': ramp.green[50],\n\n  'status-error': ramp.red[600],\n  'status-error-light': ramp.red[500],\n  'status-error-dark': ramp.red[700],\n  'status-error-subtle': ramp.red[50],\n\n  'status-error-vivid': p.redVivid[500],     // vivid alert red\n  'status-error-vivid-light': p.redVivid[400],\n  'status-error-vivid-dark': p.redVivid[700],\n  'status-error-vivid-subtle': 'rgba(255, 71, 87, 0.12)',\n\n  'status-warning': ramp.amber[300],\n  'status-warning-light': ramp.amber[200],\n  'status-warning-dark': ramp.amber[500],\n  'status-warning-subtle': ramp.amber[50],\n\n  'status-info': ramp.blue[500],\n  'status-info-light': ramp.blue[300],\n  'status-info-dark': ramp.blue[600],\n  'status-info-subtle': ramp.blue[50],\n\n  // Text on status backgrounds (on-status-*)\n  'on-status-success': p.white,\n  'on-status-error': p.white,\n  'on-status-warning': p.white,\n  'on-status-info': p.white,\n\n  // Result/outcome indicators (result-*)\n  'result-improve': '#4caf50',                // Green - positive outcome\n  'result-improve-light': 'rgba(76, 175, 80, 0.12)',\n  'result-improve-dark': '#248a24',\n  'result-degrade': '#ef5350',                // Red - negative outcome\n  'result-degrade-light': 'rgba(239, 83, 80, 0.12)',\n  'result-degrade-dark': '#b30000',\n  'result-inconclusive': '#9E9A97',           // Gray - no clear result\n  'result-inconclusive-light': 'rgba(158, 154, 151, 0.12)',\n  'result-neutral': p.neutral[500],           // Neutral baseline\n\n  // Text on result backgrounds (on-result-*)\n  'on-result-improve': p.white,\n  'on-result-degrade': p.white,\n  'on-result-inconclusive': p.white,\n\n  // Data visualization colors (data-*)\n  // First 10 colors from discrete rainbow optimized for charts\n  'data-1': discreteRainbow[9],               // Blue\n  'data-2': discreteRainbow[14],              // Green\n  'data-3': discreteRainbow[17],              // Yellow\n  'data-4': discreteRainbow[25],              // Red\n  'data-5': discreteRainbow[8],               // Purple\n  'data-6': discreteRainbow[20],              // Orange\n  'data-7': discreteRainbow[13],              // Light Blue\n  'data-8': discreteRainbow[15],              // Light Green\n  'data-9': discreteRainbow[3],               // Lavender\n  'data-10': discreteRainbow[22],             // Dark Orange\n\n  // Text colors (text-*)\n  'text-primary': '#121828',\n  'text-secondary': '#65748B',\n  'text-tertiary': p.neutral[400],\n  'text-disabled': 'rgba(55, 65, 81, 0.48)',\n  'text-inverse': p.white,\n  'text-link': p.blue[600],\n  'text-link-hover': p.blue[700],\n\n  // Surface colors (surface-*) - for elevated containers\n  'surface-base': p.white,\n  'surface-elevated': p.neutral[50],          // slightly off-white for elevated cards\n  'surface-raised': p.neutral[100],           // light gray for raised cards\n  'surface-overlay': p.white,\n  'surface-input': p.neutral[50],             // Input field background (filled variant)\n\n  // Background colors (background-*)\n  'background-base': '#EBEBEB',\n  'background-default': p.white,\n  'background-subtle': p.neutral[50],\n\n  // Border colors (border-*)\n  'border-default': '#E8E9EB',\n  'border-subtle': p.neutral[100],\n  'border-strong': p.neutral[300],\n  'border-prominent': p.neutral[400],        // high-visibility divider\n  'border-focus': p.blue[600],\n  'border-input': p.neutral[300],             // Input field border\n  'border-input-hover': p.neutral[400],       // Input field border on hover\n  'border-input-focus': p.blue[600],          // Input field border on focus\n  'border-input-error': p.red[600],           // Input field border on error\n\n  // Interactive states (interactive-*)\n  'interactive-hover': 'rgba(55, 65, 81, 0.04)',\n  'interactive-focus': 'rgba(55, 65, 81, 0.12)',\n  'interactive-active': 'rgba(55, 65, 81, 0.16)',\n  'interactive-selected': 'rgba(55, 65, 81, 0.08)',\n  'interactive-disabled': 'rgba(55, 65, 81, 0.12)',\n  'interactive-disabled-text': 'rgba(55, 65, 81, 0.26)',\n\n  // Divider\n  'divider': '#E8E9EB',\n\n  // Avatar default\n  'avatar-background': p.neutral[500],\n  'avatar-text': p.white,\n} as const\n\n// Dark mode semantic colors\nexport const semanticColorsDark = {\n  // Brand colors stay the same in dark mode\n  'brand-primary': ramp.orange[400],\n  'brand-primary-light': ramp.orange[300],\n  'brand-primary-dark': ramp.orange[500],\n  'brand-primary-subtle': 'rgba(255, 121, 0, 0.12)',\n  'brand-primary-hover': ramp.orange[300],\n  'brand-primary-active': ramp.orange[200],\n\n  'brand-secondary': ramp.cyan[600],\n  'brand-secondary-light': ramp.cyan[500],\n  'brand-secondary-dark': ramp.cyan[700],\n  'brand-secondary-subtle': 'rgba(48, 123, 155, 0.12)',\n  'brand-secondary-hover': ramp.cyan[500],\n  'brand-secondary-active': ramp.cyan[400],\n\n  // Text on brand backgrounds\n  'on-brand-primary': p.white,\n  'on-brand-secondary': p.white,\n\n  // Status colors\n  'status-success': ramp.green[300],\n  'status-success-light': ramp.green[200],\n  'status-success-dark': ramp.green[600],\n  'status-success-subtle': 'rgba(46, 213, 115, 0.12)',\n\n  'status-error': ramp.red[600],\n  'status-error-light': ramp.red[500],\n  'status-error-dark': ramp.red[700],\n  'status-error-subtle': 'rgba(209, 67, 67, 0.12)',\n\n  'status-error-vivid': p.redVivid[500],\n  'status-error-vivid-light': p.redVivid[400],\n  'status-error-vivid-dark': p.redVivid[700],\n  'status-error-vivid-subtle': 'rgba(255, 71, 87, 0.12)',\n\n  'status-warning': ramp.amber[300],\n  'status-warning-light': ramp.amber[200],\n  'status-warning-dark': ramp.amber[500],\n  'status-warning-subtle': 'rgba(249, 180, 21, 0.12)',\n\n  'status-info': ramp.blue[500],\n  'status-info-light': ramp.blue[300],\n  'status-info-dark': ramp.blue[600],\n  'status-info-subtle': 'rgba(33, 150, 243, 0.12)',\n\n  // Text on status backgrounds\n  'on-status-success': p.white,\n  'on-status-error': p.white,\n  'on-status-warning': p.white,\n  'on-status-info': p.white,\n\n  // Result/outcome indicators (result-*)\n  'result-improve': '#4caf50',\n  'result-improve-light': 'rgba(76, 175, 80, 0.16)',\n  'result-improve-dark': '#248a24',\n  'result-degrade': '#ef5350',\n  'result-degrade-light': 'rgba(239, 83, 80, 0.16)',\n  'result-degrade-dark': '#b30000',\n  'result-inconclusive': '#9E9A97',\n  'result-inconclusive-light': 'rgba(158, 154, 151, 0.16)',\n  'result-neutral': p.neutral[400],\n\n  // Text on result backgrounds\n  'on-result-improve': p.white,\n  'on-result-degrade': p.white,\n  'on-result-inconclusive': p.white,\n\n  // Data visualization colors (same in dark mode for consistency)\n  'data-1': discreteRainbow[9],\n  'data-2': discreteRainbow[14],\n  'data-3': discreteRainbow[17],\n  'data-4': discreteRainbow[25],\n  'data-5': discreteRainbow[8],\n  'data-6': discreteRainbow[20],\n  'data-7': discreteRainbow[13],\n  'data-8': discreteRainbow[15],\n  'data-9': discreteRainbow[3],\n  'data-10': discreteRainbow[22],\n\n  // Text colors - inverted for dark mode\n  'text-primary': p.neutral[100],\n  'text-secondary': p.neutral[400],\n  'text-tertiary': p.neutral[500],\n  'text-disabled': 'rgba(255, 255, 255, 0.38)',\n  'text-inverse': p.neutral[900],\n  'text-link': '#828DF8',\n  'text-link-hover': p.blue[400],\n\n  // Surface colors - dark backgrounds\n  'surface-base': p.charcoal[700],         // main surface\n  'surface-elevated': p.charcoal[600],     // elevated surface\n  'surface-raised': p.charcoal[500],       // raised surface\n  'surface-overlay': p.charcoal[600],      // overlay surface\n  'surface-input': p.charcoal[600],        // input surface\n\n  // Background colors\n  'background-base': p.charcoal[900],      // darkest charcoal\n  'background-default': p.charcoal[700],    // main background\n  'background-subtle': p.charcoal[500],     // subtle background\n\n  // Border colors\n  'border-default': p.charcoal[400],       // default border\n  'border-subtle': p.charcoal[500],        // subtle border\n  'border-strong': p.charcoal[300],        // strong border\n  'border-prominent': p.charcoal[200],     // high-visibility divider\n  'border-focus': '#828DF8',\n  'border-input': p.neutral[600],\n  'border-input-hover': p.neutral[500],\n  'border-input-focus': '#828DF8',\n  'border-input-error': p.red[500],\n\n  // Interactive states\n  'interactive-hover': 'rgba(255, 255, 255, 0.04)',\n  'interactive-focus': 'rgba(255, 255, 255, 0.12)',\n  'interactive-active': 'rgba(255, 255, 255, 0.16)',\n  'interactive-selected': 'rgba(255, 255, 255, 0.08)',\n  'interactive-disabled': 'rgba(255, 255, 255, 0.12)',\n  'interactive-disabled-text': 'rgba(255, 255, 255, 0.26)',\n\n  // Divider\n  'divider': p.charcoal[400],              // divider color\n\n  // Avatar default\n  'avatar-background': p.neutral[600],\n  'avatar-text': p.white,\n} as const\n\n// Typography tokens matching existing app\nexport const semanticTypography = {\n  // Headings (Space Grotesk)\n  h1: {\n    fontFamily: 'heading',\n    fontSize: '3.5rem',\n    fontWeight: 700,\n    lineHeight: 1.375,\n  },\n  h2: {\n    fontFamily: 'heading',\n    fontSize: '3rem',\n    fontWeight: 700,\n    lineHeight: 1.375,\n  },\n  h3: {\n    fontFamily: 'heading',\n    fontSize: '2.25rem',\n    fontWeight: 700,\n    lineHeight: 1.375,\n  },\n  h4: {\n    fontFamily: 'heading',\n    fontSize: '2rem',\n    fontWeight: 700,\n    lineHeight: 1.375,\n  },\n  h5: {\n    fontFamily: 'heading',\n    fontSize: '1.5rem',\n    fontWeight: 600,\n    lineHeight: 1.375,\n  },\n  h6: {\n    fontFamily: 'heading',\n    fontSize: '1.125rem',\n    fontWeight: 600,\n    lineHeight: 1.375,\n  },\n\n  // Body text (Nunito Sans)\n  body1: {\n    fontFamily: 'body',\n    fontSize: '1rem',\n    fontWeight: 400,\n    lineHeight: 1.5,\n  },\n  body2: {\n    fontFamily: 'body',\n    fontSize: '0.875rem',\n    fontWeight: 400,\n    lineHeight: 1.57,\n  },\n  subtitle1: {\n    fontFamily: 'body',\n    fontSize: '1rem',\n    fontWeight: 500,\n    lineHeight: 1.75,\n  },\n  subtitle2: {\n    fontFamily: 'body',\n    fontSize: '0.875rem',\n    fontWeight: 500,\n    lineHeight: 1.57,\n  },\n  caption: {\n    fontFamily: 'body',\n    fontSize: '0.75rem',\n    fontWeight: 400,\n    lineHeight: 1.66,\n  },\n  overline: {\n    fontFamily: 'body',\n    fontSize: '0.75rem',\n    fontWeight: 600,\n    lineHeight: 2.5,\n    letterSpacing: '0.5px',\n    textTransform: 'uppercase' as const,\n  },\n  button: {\n    fontFamily: 'sans',\n    fontSize: '0.875rem',\n    fontWeight: 600,\n    lineHeight: 1.75,\n  },\n} as const\n\n// Button size tokens\nexport const buttonSizes = {\n  sm: {\n    paddingX: '16px',\n    paddingY: '6px',\n    fontSize: '0.875rem',\n  },\n  md: {\n    paddingX: '20px',\n    paddingY: '8px',\n    fontSize: '0.875rem',\n  },\n  lg: {\n    paddingX: '24px',\n    paddingY: '11px',\n    fontSize: '1rem',\n  },\n} as const\n\n// Export type for theme mode\nexport type ThemeMode = 'light' | 'dark'\n\n// Helper to get semantic colors based on mode\nexport function getSemanticColors(mode: ThemeMode) {\n  return mode === 'dark' ? semanticColorsDark : semanticColorsLight\n}\n","/**\n * Theme Configuration\n *\n * Maps semantic tokens to CSS custom properties for runtime theming.\n * Dark mode is the default theme.\n */\n\nimport { semanticColorsLight, semanticColorsDark, type ThemeMode } from './tokens/semantic'\n\n// Theme-independent custom properties: identical in light and dark in\n// global.css (RGB glow decompositions, font families, animation tokens). Kept\n// as literals since they are not part of the semantic COLOR maps, and spread\n// into both theme maps so codegen mirrors global.css exactly.\nconst themeIndependentCSSVars = {\n  // RGB decomposed values for glow shadows\n  '--color-brand-primary-rgb': '255, 121, 0',\n  '--color-brand-secondary-rgb': '48, 123, 155',\n  '--color-status-success-rgb': '46, 213, 115',\n  '--color-status-error-rgb': '209, 67, 67',\n  '--color-status-error-vivid-rgb': '255, 71, 87',\n  '--color-status-warning-rgb': '249, 180, 21',\n  '--color-status-info-rgb': '33, 150, 243',\n  '--color-background-base-rgb': '16, 16, 16',\n\n  // Font families\n  '--font-family-sans': \"'Inter'\",\n  '--font-family-body': \"'Nunito Sans'\",\n  '--font-family-heading': \"'Space Grotesk'\",\n  '--font-family-mono': \"'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace\",\n\n  // Animation tokens\n  '--ease-out': 'cubic-bezier(0.22, 1, 0.36, 1)',\n  '--ease-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',\n  '--ease-spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n  '--duration-fast': '150ms',\n  '--duration-normal': '250ms',\n  '--duration-slow': '400ms',\n} as const\n\n// CSS custom properties for light mode\nexport const lightThemeCSSVars = {\n  '--color-brand-primary': semanticColorsLight['brand-primary'],\n  '--color-brand-primary-light': semanticColorsLight['brand-primary-light'],\n  '--color-brand-primary-dark': semanticColorsLight['brand-primary-dark'],\n  '--color-brand-primary-subtle': semanticColorsLight['brand-primary-subtle'],\n  '--color-brand-secondary': semanticColorsLight['brand-secondary'],\n  '--color-brand-secondary-light': semanticColorsLight['brand-secondary-light'],\n  '--color-brand-secondary-dark': semanticColorsLight['brand-secondary-dark'],\n  '--color-brand-secondary-subtle': semanticColorsLight['brand-secondary-subtle'],\n\n  '--color-on-brand-primary': semanticColorsLight['on-brand-primary'],\n  '--color-on-brand-secondary': semanticColorsLight['on-brand-secondary'],\n\n  '--color-status-success': semanticColorsLight['status-success'],\n  '--color-status-success-subtle': semanticColorsLight['status-success-subtle'],\n  '--color-status-error': semanticColorsLight['status-error'],\n  '--color-status-error-subtle': semanticColorsLight['status-error-subtle'],\n  '--color-status-warning': semanticColorsLight['status-warning'],\n  '--color-status-warning-subtle': semanticColorsLight['status-warning-subtle'],\n  '--color-status-info': semanticColorsLight['status-info'],\n  '--color-status-info-subtle': semanticColorsLight['status-info-subtle'],\n\n  '--color-status-error-vivid': semanticColorsLight['status-error-vivid'],\n  '--color-status-error-vivid-light': semanticColorsLight['status-error-vivid-light'],\n  '--color-status-error-vivid-dark': semanticColorsLight['status-error-vivid-dark'],\n  '--color-status-error-vivid-subtle': semanticColorsLight['status-error-vivid-subtle'],\n\n  '--color-text-primary': semanticColorsLight['text-primary'],\n  '--color-text-secondary': semanticColorsLight['text-secondary'],\n  '--color-text-tertiary': semanticColorsLight['text-tertiary'],\n  '--color-text-disabled': semanticColorsLight['text-disabled'],\n  '--color-text-inverse': semanticColorsLight['text-inverse'],\n  '--color-text-link': semanticColorsLight['text-link'],\n\n  '--color-surface-base': semanticColorsLight['surface-base'],\n  '--color-surface-elevated': semanticColorsLight['surface-elevated'],\n  '--color-surface-raised': semanticColorsLight['surface-raised'],\n\n  '--color-background-base': semanticColorsLight['background-base'],\n  '--color-background-default': semanticColorsLight['background-default'],\n  '--color-background-subtle': semanticColorsLight['background-subtle'],\n\n  '--color-border-default': semanticColorsLight['border-default'],\n  '--color-border-subtle': semanticColorsLight['border-subtle'],\n  '--color-border-strong': semanticColorsLight['border-strong'],\n  '--color-border-prominent': semanticColorsLight['border-prominent'],\n  '--color-border-focus': semanticColorsLight['border-focus'],\n\n  '--color-interactive-hover': semanticColorsLight['interactive-hover'],\n  '--color-interactive-focus': semanticColorsLight['interactive-focus'],\n  '--color-interactive-active': semanticColorsLight['interactive-active'],\n  '--color-interactive-selected': semanticColorsLight['interactive-selected'],\n  '--color-interactive-disabled': semanticColorsLight['interactive-disabled'],\n\n  '--color-divider': semanticColorsLight['divider'],\n\n  '--color-brand-primary-hover': semanticColorsLight['brand-primary-hover'],\n  '--color-brand-primary-active': semanticColorsLight['brand-primary-active'],\n  '--color-brand-secondary-hover': semanticColorsLight['brand-secondary-hover'],\n  '--color-brand-secondary-active': semanticColorsLight['brand-secondary-active'],\n\n  '--color-status-success-light': semanticColorsLight['status-success-light'],\n  '--color-status-success-dark': semanticColorsLight['status-success-dark'],\n  '--color-status-error-light': semanticColorsLight['status-error-light'],\n  '--color-status-error-dark': semanticColorsLight['status-error-dark'],\n  '--color-status-warning-light': semanticColorsLight['status-warning-light'],\n  '--color-status-warning-dark': semanticColorsLight['status-warning-dark'],\n  '--color-status-info-light': semanticColorsLight['status-info-light'],\n  '--color-status-info-dark': semanticColorsLight['status-info-dark'],\n\n  '--color-on-status-success': semanticColorsLight['on-status-success'],\n  '--color-on-status-error': semanticColorsLight['on-status-error'],\n  '--color-on-status-warning': semanticColorsLight['on-status-warning'],\n  '--color-on-status-info': semanticColorsLight['on-status-info'],\n\n  '--color-result-improve': semanticColorsLight['result-improve'],\n  '--color-result-improve-light': semanticColorsLight['result-improve-light'],\n  '--color-result-improve-dark': semanticColorsLight['result-improve-dark'],\n  '--color-result-degrade': semanticColorsLight['result-degrade'],\n  '--color-result-degrade-light': semanticColorsLight['result-degrade-light'],\n  '--color-result-degrade-dark': semanticColorsLight['result-degrade-dark'],\n  '--color-result-inconclusive': semanticColorsLight['result-inconclusive'],\n  '--color-result-inconclusive-light': semanticColorsLight['result-inconclusive-light'],\n  '--color-result-neutral': semanticColorsLight['result-neutral'],\n\n  '--color-on-result-improve': semanticColorsLight['on-result-improve'],\n  '--color-on-result-degrade': semanticColorsLight['on-result-degrade'],\n  '--color-on-result-inconclusive': semanticColorsLight['on-result-inconclusive'],\n\n  '--color-data-1': semanticColorsLight['data-1'],\n  '--color-data-2': semanticColorsLight['data-2'],\n  '--color-data-3': semanticColorsLight['data-3'],\n  '--color-data-4': semanticColorsLight['data-4'],\n  '--color-data-5': semanticColorsLight['data-5'],\n  '--color-data-6': semanticColorsLight['data-6'],\n  '--color-data-7': semanticColorsLight['data-7'],\n  '--color-data-8': semanticColorsLight['data-8'],\n  '--color-data-9': semanticColorsLight['data-9'],\n  '--color-data-10': semanticColorsLight['data-10'],\n\n  '--color-text-link-hover': semanticColorsLight['text-link-hover'],\n\n  '--color-surface-overlay': semanticColorsLight['surface-overlay'],\n  '--color-surface-input': semanticColorsLight['surface-input'],\n\n  '--color-border-input': semanticColorsLight['border-input'],\n  '--color-border-input-hover': semanticColorsLight['border-input-hover'],\n  '--color-border-input-focus': semanticColorsLight['border-input-focus'],\n  '--color-border-input-error': semanticColorsLight['border-input-error'],\n\n  '--color-interactive-disabled-text': semanticColorsLight['interactive-disabled-text'],\n\n  '--color-avatar-background': semanticColorsLight['avatar-background'],\n  '--color-avatar-text': semanticColorsLight['avatar-text'],\n\n  ...themeIndependentCSSVars,\n} as const\n\n// CSS custom properties for dark mode (default)\nexport const darkThemeCSSVars = {\n  '--color-brand-primary': semanticColorsDark['brand-primary'],\n  '--color-brand-primary-light': semanticColorsDark['brand-primary-light'],\n  '--color-brand-primary-dark': semanticColorsDark['brand-primary-dark'],\n  '--color-brand-primary-subtle': semanticColorsDark['brand-primary-subtle'],\n  '--color-brand-secondary': semanticColorsDark['brand-secondary'],\n  '--color-brand-secondary-light': semanticColorsDark['brand-secondary-light'],\n  '--color-brand-secondary-dark': semanticColorsDark['brand-secondary-dark'],\n  '--color-brand-secondary-subtle': semanticColorsDark['brand-secondary-subtle'],\n\n  '--color-on-brand-primary': semanticColorsDark['on-brand-primary'],\n  '--color-on-brand-secondary': semanticColorsDark['on-brand-secondary'],\n\n  '--color-status-success': semanticColorsDark['status-success'],\n  '--color-status-success-subtle': semanticColorsDark['status-success-subtle'],\n  '--color-status-error': semanticColorsDark['status-error'],\n  '--color-status-error-subtle': semanticColorsDark['status-error-subtle'],\n  '--color-status-warning': semanticColorsDark['status-warning'],\n  '--color-status-warning-subtle': semanticColorsDark['status-warning-subtle'],\n  '--color-status-info': semanticColorsDark['status-info'],\n  '--color-status-info-subtle': semanticColorsDark['status-info-subtle'],\n\n  '--color-status-error-vivid': semanticColorsDark['status-error-vivid'],\n  '--color-status-error-vivid-light': semanticColorsDark['status-error-vivid-light'],\n  '--color-status-error-vivid-dark': semanticColorsDark['status-error-vivid-dark'],\n  '--color-status-error-vivid-subtle': semanticColorsDark['status-error-vivid-subtle'],\n\n  '--color-text-primary': semanticColorsDark['text-primary'],\n  '--color-text-secondary': semanticColorsDark['text-secondary'],\n  '--color-text-tertiary': semanticColorsDark['text-tertiary'],\n  '--color-text-disabled': semanticColorsDark['text-disabled'],\n  '--color-text-inverse': semanticColorsDark['text-inverse'],\n  '--color-text-link': semanticColorsDark['text-link'],\n\n  '--color-surface-base': semanticColorsDark['surface-base'],\n  '--color-surface-elevated': semanticColorsDark['surface-elevated'],\n  '--color-surface-raised': semanticColorsDark['surface-raised'],\n\n  '--color-background-base': semanticColorsDark['background-base'],\n  '--color-background-default': semanticColorsDark['background-default'],\n  '--color-background-subtle': semanticColorsDark['background-subtle'],\n\n  '--color-border-default': semanticColorsDark['border-default'],\n  '--color-border-subtle': semanticColorsDark['border-subtle'],\n  '--color-border-strong': semanticColorsDark['border-strong'],\n  '--color-border-prominent': semanticColorsDark['border-prominent'],\n  '--color-border-focus': semanticColorsDark['border-focus'],\n\n  '--color-interactive-hover': semanticColorsDark['interactive-hover'],\n  '--color-interactive-focus': semanticColorsDark['interactive-focus'],\n  '--color-interactive-active': semanticColorsDark['interactive-active'],\n  '--color-interactive-selected': semanticColorsDark['interactive-selected'],\n  '--color-interactive-disabled': semanticColorsDark['interactive-disabled'],\n\n  '--color-divider': semanticColorsDark['divider'],\n\n  '--color-brand-primary-hover': semanticColorsDark['brand-primary-hover'],\n  '--color-brand-primary-active': semanticColorsDark['brand-primary-active'],\n  '--color-brand-secondary-hover': semanticColorsDark['brand-secondary-hover'],\n  '--color-brand-secondary-active': semanticColorsDark['brand-secondary-active'],\n\n  '--color-status-success-light': semanticColorsDark['status-success-light'],\n  '--color-status-success-dark': semanticColorsDark['status-success-dark'],\n  '--color-status-error-light': semanticColorsDark['status-error-light'],\n  '--color-status-error-dark': semanticColorsDark['status-error-dark'],\n  '--color-status-warning-light': semanticColorsDark['status-warning-light'],\n  '--color-status-warning-dark': semanticColorsDark['status-warning-dark'],\n  '--color-status-info-light': semanticColorsDark['status-info-light'],\n  '--color-status-info-dark': semanticColorsDark['status-info-dark'],\n\n  '--color-on-status-success': semanticColorsDark['on-status-success'],\n  '--color-on-status-error': semanticColorsDark['on-status-error'],\n  '--color-on-status-warning': semanticColorsDark['on-status-warning'],\n  '--color-on-status-info': semanticColorsDark['on-status-info'],\n\n  '--color-result-improve': semanticColorsDark['result-improve'],\n  '--color-result-improve-light': semanticColorsDark['result-improve-light'],\n  '--color-result-improve-dark': semanticColorsDark['result-improve-dark'],\n  '--color-result-degrade': semanticColorsDark['result-degrade'],\n  '--color-result-degrade-light': semanticColorsDark['result-degrade-light'],\n  '--color-result-degrade-dark': semanticColorsDark['result-degrade-dark'],\n  '--color-result-inconclusive': semanticColorsDark['result-inconclusive'],\n  '--color-result-inconclusive-light': semanticColorsDark['result-inconclusive-light'],\n  '--color-result-neutral': semanticColorsDark['result-neutral'],\n\n  '--color-on-result-improve': semanticColorsDark['on-result-improve'],\n  '--color-on-result-degrade': semanticColorsDark['on-result-degrade'],\n  '--color-on-result-inconclusive': semanticColorsDark['on-result-inconclusive'],\n\n  '--color-data-1': semanticColorsDark['data-1'],\n  '--color-data-2': semanticColorsDark['data-2'],\n  '--color-data-3': semanticColorsDark['data-3'],\n  '--color-data-4': semanticColorsDark['data-4'],\n  '--color-data-5': semanticColorsDark['data-5'],\n  '--color-data-6': semanticColorsDark['data-6'],\n  '--color-data-7': semanticColorsDark['data-7'],\n  '--color-data-8': semanticColorsDark['data-8'],\n  '--color-data-9': semanticColorsDark['data-9'],\n  '--color-data-10': semanticColorsDark['data-10'],\n\n  '--color-text-link-hover': semanticColorsDark['text-link-hover'],\n\n  '--color-surface-overlay': semanticColorsDark['surface-overlay'],\n  '--color-surface-input': semanticColorsDark['surface-input'],\n\n  '--color-border-input': semanticColorsDark['border-input'],\n  '--color-border-input-hover': semanticColorsDark['border-input-hover'],\n  '--color-border-input-focus': semanticColorsDark['border-input-focus'],\n  '--color-border-input-error': semanticColorsDark['border-input-error'],\n\n  '--color-interactive-disabled-text': semanticColorsDark['interactive-disabled-text'],\n\n  '--color-avatar-background': semanticColorsDark['avatar-background'],\n  '--color-avatar-text': semanticColorsDark['avatar-text'],\n\n  ...themeIndependentCSSVars,\n} as const\n\n// Helper to get CSS vars for a theme mode\nexport function getThemeCSSVars(mode: ThemeMode) {\n  return mode === 'dark' ? darkThemeCSSVars : lightThemeCSSVars\n}\n\n// Gluestack UI theme configuration\nexport const gluestackConfig = {\n  tokens: {\n    colors: {\n      // Map to our semantic colors via CSS vars\n      primary500: 'var(--color-brand-primary)',\n      primary600: 'var(--color-brand-primary-dark)',\n      primary400: 'var(--color-brand-primary-light)',\n\n      secondary500: 'var(--color-brand-secondary)',\n      secondary600: 'var(--color-brand-secondary-dark)',\n      secondary400: 'var(--color-brand-secondary-light)',\n\n      success500: 'var(--color-status-success)',\n      error500: 'var(--color-status-error)',\n      warning500: 'var(--color-status-warning)',\n      info500: 'var(--color-status-info)',\n\n      textLight: 'var(--color-text-primary)',\n      textDark: 'var(--color-text-inverse)',\n\n      backgroundLight: 'var(--color-background-default)',\n      backgroundDark: 'var(--color-surface-base)',\n    },\n    space: {\n      '0': 0,\n      '1': 4,\n      '2': 8,\n      '3': 12,\n      '4': 16,\n      '5': 20,\n      '6': 24,\n      '8': 32,\n      '10': 40,\n      '12': 48,\n      '16': 64,\n      '20': 80,\n      '24': 96,\n    },\n    radii: {\n      none: 0,\n      sm: 4,\n      md: 8,\n      lg: 12,\n      xl: 16,\n      '2xl': 24,\n      full: 9999,\n    },\n    fontSizes: {\n      xs: 12,\n      sm: 14,\n      md: 16,\n      lg: 18,\n      xl: 20,\n      '2xl': 24,\n      '3xl': 30,\n      '4xl': 36,\n      '5xl': 48,\n    },\n  },\n  aliases: {\n    bg: 'backgroundColor',\n    p: 'padding',\n    px: 'paddingHorizontal',\n    py: 'paddingVertical',\n    m: 'margin',\n    mx: 'marginHorizontal',\n    my: 'marginVertical',\n    h: 'height',\n    w: 'width',\n    rounded: 'borderRadius',\n  },\n} as const\n\nexport type ThemeConfig = typeof gluestackConfig\n","/**\n * Token CSS Generator\n *\n * Emits a static `:root {}` CSS block from the canonical theme token maps\n * (`darkThemeCSSVars` / `lightThemeCSSVars`). Those maps mirror every `:root`\n * custom property in `theme/global.css` — completeness and value parity are\n * enforced by `config.completeness.test.ts`, so HTML prototypes that import the\n * generated stylesheet resolve to the exact same values as the design system.\n * Pure codegen: deterministic and diffable against source.\n *\n * Dark mode is the default (`:root`); light mode is activated with `.light`,\n * matching the convention in `theme/global.css`.\n */\n\nimport { darkThemeCSSVars, lightThemeCSSVars } from './config'\n\ntype CSSVarMap = Record<string, string>\n\nconst GENERATED_HEADER = '/* Generated from theme token maps. Do not edit by hand. */'\n\nfunction formatBlock(selector: string, vars: CSSVarMap): string {\n  const declarations = Object.entries(vars)\n    .map(([name, value]) => `  ${name}: ${value};`)\n    .join('\\n')\n  return `${selector} {\\n${declarations}\\n}`\n}\n\n/**\n * Build the full `tokens.css` contents: a default (dark) `:root` block plus a\n * `.light` override block, driven entirely by the exported token maps.\n */\nexport function generateTokensCss(): string {\n  const root = formatBlock(':root', darkThemeCSSVars)\n  const light = formatBlock('.light, :root.light', lightThemeCSSVars)\n  return `${GENERATED_HEADER}\\n\\n${root}\\n\\n${light}\\n`\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titan-design/react-ui",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Cross-platform design system built on Gluestack UI",
   "author": "Henry Jewkes",
   "license": "MIT",
@@ -31,6 +31,12 @@
       "import": "./dist/bodymap.mjs",
       "require": "./dist/bodymap.js"
     },
+    "./pages": {
+      "react-native": "./src/pages.ts",
+      "types": "./dist/pages.d.ts",
+      "import": "./dist/pages.mjs",
+      "require": "./dist/pages.js"
+    },
     "./theme": {
       "react-native": "./src/theme/index.ts",
       "types": "./dist/theme/index.d.ts",
@@ -61,12 +67,14 @@
     "specimen": "vite --config specimen/vite.config.ts",
     "specimen:compare": "vite --config specimen/vite.config.ts --open /comparison.html",
     "test:visual:compare": "playwright test --config playwright.comparison.config.ts",
+    "test:visual:baseline": "playwright test --config playwright.baseline.config.ts",
+    "test:visual:baseline:update": "playwright test --config playwright.baseline.config.ts --update-snapshots",
     "test:visual:tokens": "playwright test --config playwright.tokens.config.ts",
+    "test:visual:stories": "playwright test stories.spec.ts",
+    "test:visual:stories:update": "playwright test stories.spec.ts --update-snapshots",
     "prepublishOnly": "tsup && vitest --run"
   },
   "peerDependencies": {
-    "lucide-react": ">=0.400.0",
-    "lucide-react-native": ">=0.400.0",
     "nativewind": "^4.2.1",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
@@ -76,9 +84,6 @@
     "react-native-web": ">=0.19.0"
   },
   "peerDependenciesMeta": {
-    "lucide-react-native": {
-      "optional": true
-    },
     "nativewind": {
       "optional": true
     },
@@ -123,7 +128,6 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "jest-axe": "^9.0.0",
     "jsdom": "^25.0.0",
-    "lucide-react": "^0.469.0",
     "nativewind": "^4.2.1",
     "prettier": "^3.8.1",
     "react": "^18.3.0",

package/src/components/custom/DateTime/DateTime.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
-import { DateTime } from './DateTime'
+import { DateTime, type DateTimeFormat } from './DateTime'
 
 const meta: Meta<typeof DateTime> = {
   title: 'Custom/DateTime',
@@ -25,9 +25,6 @@ export default meta
 type Story = StoryObj<typeof DateTime>
 
 const now = Date.now()
-const yesterday = now - 24 * 60 * 60 * 1000
-const lastWeek = now - 7 * 24 * 60 * 60 * 1000
-const nextWeek = now + 7 * 24 * 60 * 60 * 1000
 
 export const Default: Story = {
   args: {
@@ -53,7 +50,15 @@ export const AllFormats: Story = {
   },
 }
 
-function Row({ label, value, format }: { label: string; value: any; format: any }) {
+function Row({
+  label,
+  value,
+  format,
+}: {
+  label: string
+  value: number | Date | string
+  format: DateTimeFormat
+}) {
   return (
     <View className="flex-row items-center">
       <Text className="w-24 text-text-secondary text-sm">{label}:</Text>
@@ -62,6 +67,74 @@ function Row({ label, value, format }: { label: string; value: any; format: any
   )
 }
 
+/** Self-ticking clock (`live`), 24h, via the `mono` Typography variant — the substrate the shell TopBar uses. */
+export const LiveClock: Story = {
+  render: () => (
+    <View className="gap-4 p-6 bg-surface-elevated rounded-xl items-start">
+      <DateTime
+        live
+        format="time"
+        hour12={false}
+        variant="mono"
+        className="text-4xl text-text-primary"
+      />
+      <View className="flex-row items-center gap-3">
+        <DateTime live format="time" hour12={false} variant="mono" color="secondary" />
+        <Text className="text-text-tertiary text-xs">← ticks every second, 24h, mono</Text>
+      </View>
+    </View>
+  ),
+}
+
+/** With and without seconds (`seconds`). */
+export const Seconds: Story = {
+  render: () => {
+    const at = new Date(2024, 0, 1, 16, 12, 7)
+    return (
+      <View className="gap-3">
+        <View className="flex-row items-center">
+          <Text className="w-32 text-text-secondary text-sm">no seconds:</Text>
+          <DateTime value={at} format="time" hour12={false} variant="mono" color="primary" />
+        </View>
+        <View className="flex-row items-center">
+          <Text className="w-32 text-text-secondary text-sm">with seconds:</Text>
+          <DateTime
+            value={at}
+            format="time"
+            hour12={false}
+            seconds
+            variant="mono"
+            color="primary"
+          />
+        </View>
+        <View className="flex-row items-center">
+          <Text className="w-32 text-text-secondary text-sm">live w/ seconds:</Text>
+          <DateTime live format="time" hour12={false} seconds variant="mono" color="primary" />
+        </View>
+      </View>
+    )
+  },
+}
+
+/** 24h vs 12h for the same moment (`hour12`). */
+export const HourCycle: Story = {
+  render: () => {
+    const at = new Date(2024, 0, 1, 16, 12)
+    return (
+      <View className="gap-3">
+        <View className="flex-row items-center">
+          <Text className="w-24 text-text-secondary text-sm">24h:</Text>
+          <DateTime value={at} format="time" hour12={false} className="text-text-primary" />
+        </View>
+        <View className="flex-row items-center">
+          <Text className="w-24 text-text-secondary text-sm">12h:</Text>
+          <DateTime value={at} format="time" hour12 className="text-text-primary" />
+        </View>
+      </View>
+    )
+  },
+}
+
 export const RelativeTime: Story = {
   render: () => {
     const now = Date.now()
@@ -169,7 +242,10 @@ export const UsageExample: Story = {
       <View className="gap-2 p-4 bg-surface-elevated rounded-lg max-w-md">
         <Text className="text-lg font-semibold text-text-primary mb-2">Upcoming Events</Text>
         {items.map((item, index) => (
-          <View key={index} className="flex-row justify-between items-center py-2 border-b border-border">
+          <View
+            key={index}
+            className="flex-row justify-between items-center py-2 border-b border-border"
+          >
             <Text className="text-text-primary">{item.title}</Text>
             <DateTime value={item.date} format="relative" color="secondary" className="text-sm" />
           </View>

package/src/components/custom/DateTime/DateTime.test.tsx

@@ -39,6 +39,34 @@ describe('DateTime', () => {
     expect(screen.getByText('N/A')).toBeInTheDocument()
   })
 
+  it('forces 24h time with hour12={false}', () => {
+    render(<DateTime value={new Date(2024, 0, 1, 16, 12)} format="time" hour12={false} />)
+    expect(screen.getByText('16:12')).toBeInTheDocument()
+  })
+
+  it('forces 12h time with hour12={true}', () => {
+    render(<DateTime value={new Date(2024, 0, 1, 16, 12)} format="time" hour12 />)
+    expect(screen.getByText(/4:12/)).toBeInTheDocument()
+  })
+
+  it('renders a live clock (ignores value, shows current time)', () => {
+    const { container } = render(<DateTime live format="time" hour12={false} />)
+    // renders a HH:MM string without crashing
+    expect(container.textContent).toMatch(/^\d{1,2}:\d{2}/)
+  })
+
+  it('includes seconds when seconds is set', () => {
+    render(<DateTime value={new Date(2024, 0, 1, 16, 12, 7)} format="time" hour12={false} seconds />)
+    expect(screen.getByText('16:12:07')).toBeInTheDocument()
+  })
+
+  it('renders through Typography when a variant is given', () => {
+    render(
+      <DateTime value={new Date(2024, 0, 1, 16, 12)} format="time" hour12={false} variant="mono" />
+    )
+    expect(screen.getByText('16:12')).toBeInTheDocument()
+  })
+
   it('renders Invalid Date for bad input', () => {
     render(<DateTime value="not-a-date" />)
     expect(screen.getByText('Invalid Date')).toBeInTheDocument()
@@ -136,9 +164,7 @@ describe('DateTime', () => {
 
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
-      const { container } = render(
-        <DateTime value={testDate} format="medium" isUTC />
-      )
+      const { container } = render(<DateTime value={testDate} format="medium" isUTC />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/custom/DateTime/DateTime.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
 import { Text, type TextProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Typography, type TypographyVariant } from '../Typography'
 
-export type DateTimeFormat = 
+export type DateTimeFormat =
   | 'date' // 2024-01-15
   | 'time' // 14:30
   | 'datetime' // 2024-01-15 14:30
@@ -13,14 +14,24 @@ export type DateTimeFormat =
   | 'full' // Monday, January 15, 2024
 
 export interface DateTimeProps extends TextProps {
-  /** Date value (timestamp in ms, Date object, or ISO string) */
-  value: number | Date | string | null | undefined
+  /** Date value (timestamp in ms, Date object, or ISO string). Optional when `live`. */
+  value?: number | Date | string | null | undefined
   /** Display format */
   format?: DateTimeFormat
   /** Custom format string (overrides format) */
   customFormat?: string
   /** Whether to show in UTC */
   isUTC?: boolean
+  /** Force 12h (true) or 24h (false) for time/datetime formats; locale default when omitted. */
+  hour12?: boolean
+  /** Include seconds in time/datetime formats. */
+  seconds?: boolean
+  /** Render through Typography with this variant (e.g. 'mono'); plain inheriting Text when omitted. */
+  variant?: TypographyVariant
+  /** Track the current time and re-render on an interval (ignores `value`). For clocks / relative time. */
+  live?: boolean
+  /** Refresh interval in ms when `live` (default 1000). */
+  refreshMs?: number
   /** Fallback text when value is null/undefined */
   fallback?: string
   /** Text color */
@@ -42,10 +53,12 @@ const colorStyles = {
 function formatDate(
   value: number | Date | string,
   format: DateTimeFormat,
-  isUTC: boolean
+  isUTC: boolean,
+  hour12?: boolean,
+  seconds?: boolean
 ): string {
   const date = value instanceof Date ? value : new Date(value)
-  
+
   if (isNaN(date.getTime())) {
     return 'Invalid Date'
   }
@@ -57,7 +70,7 @@ function formatDate(
 
   // Use Intl.DateTimeFormat for locale-aware formatting
   const options: Intl.DateTimeFormatOptions = {}
-  
+
   switch (format) {
     case 'date':
       options.year = 'numeric'
@@ -101,6 +114,14 @@ function formatDate(
     options.timeZone = 'UTC'
   }
 
+  if (hour12 !== undefined && (options.hour !== undefined || options.minute !== undefined)) {
+    options.hour12 = hour12
+  }
+
+  if (seconds && options.hour !== undefined) {
+    options.second = '2-digit'
+  }
+
   return new Intl.DateTimeFormat(undefined, options).format(date)
 }
 
@@ -121,7 +142,7 @@ function getRelativeTime(date: Date): string {
   // Use Intl.RelativeTimeFormat if available
   if (typeof Intl !== 'undefined' && Intl.RelativeTimeFormat) {
     const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
-    
+
     if (Math.abs(diffSecs) < 60) {
       return rtf.format(diffSecs, 'second')
     }
@@ -197,24 +218,43 @@ export function DateTime({
   format = 'datetime',
   customFormat,
   isUTC = false,
+  hour12,
+  seconds,
+  variant,
+  live = false,
+  refreshMs = 1000,
   fallback = '-',
   color = 'inherit',
   className,
   ...props
 }: DateTimeProps) {
-  if (value === null || value === undefined) {
+  // When live, track "now" and re-render on an interval (the value prop is ignored).
+  const [now, setNow] = useState(() => Date.now())
+  useEffect(() => {
+    if (!live) return
+    const id = setInterval(() => setNow(Date.now()), refreshMs)
+    return () => clearInterval(id)
+  }, [live, refreshMs])
+
+  const effectiveValue = live ? now : value
+  const text =
+    effectiveValue === null || effectiveValue === undefined
+      ? fallback
+      : formatDate(effectiveValue, format, isUTC, hour12, seconds)
+
+  // Route through Typography (shared text substrate) when a variant is given;
+  // otherwise render a plain inheriting Text (backward-compatible default).
+  if (variant) {
     return (
-      <Text className={cn(colorStyles[color], className)} {...props}>
-        {fallback}
-      </Text>
+      <Typography variant={variant} color={color} className={className} {...props}>
+        {text}
+      </Typography>
     )
   }
 
-  const formattedDate = formatDate(value, format, isUTC)
-
   return (
     <Text className={cn(colorStyles[color], className)} {...props}>
-      {formattedDate}
+      {text}
     </Text>
   )
 }

package/src/components/custom/Gauge/Gauge.test.tsx

@@ -20,9 +20,9 @@ describe('Gauge', () => {
     const { rerender } = render(<Gauge value={30} />)
     expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#D14343' })
     rerender(<Gauge value={70} />)
-    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#FFB020' })
+    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#F9B415' })
     rerender(<Gauge value={90} />)
-    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#14B8A6' })
+    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#2ED573' })
   })
 
   it('honors a single-color override over thresholds', () => {

package/src/components/custom/Gauge/Gauge.tsx

@@ -1,5 +1,8 @@
 import { View, Text, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const sem = getSemanticColors('dark')
 
 export interface GaugeThreshold {
   /** Band start, in the gauge's value units. */
@@ -30,9 +33,9 @@ export interface GaugeProps extends Omit<ViewProps, 'children'> {
   className?: string
 }
 
-const STATUS_SUCCESS = '#14B8A6'
-const STATUS_WARNING = '#FFB020'
-const STATUS_ERROR = '#D14343'
+const STATUS_SUCCESS = sem['status-success']
+const STATUS_WARNING = sem['status-warning']
+const STATUS_ERROR = sem['status-error']
 const TRACK = 'rgba(255,255,255,0.08)'
 
 /** Titan status-token bands for a 0–100 score. */

package/src/components/custom/Scatter/Scatter.tsx

@@ -1,5 +1,6 @@
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { DATAVIZ_CATEGORICAL_PALETTE } from '../../../theme/extracted-colors-dataviz'
 
 export interface ScatterDatum {
   /** Stable identity — returned by onPress and used as the React key. */
@@ -45,11 +46,8 @@ export interface ScatterProps extends Omit<ViewProps, 'children'> {
   className?: string
 }
 
-/** Titan categorical fallback palette (data-1..data-8). */
-const PALETTE = [
-  '#5B9BD5', '#14B8A6', '#F4A736', '#F83030',
-  '#823CA0', '#D4A520', '#406D87', '#43C6B7',
-]
+/** Titan categorical fallback palette (see extracted-colors-dataviz). */
+const PALETTE = DATAVIZ_CATEGORICAL_PALETTE
 
 const GRID_LINE = 'rgba(255,255,255,0.07)'
 const AXIS_LINE = 'rgba(255,255,255,0.18)'

package/src/components/custom/Treemap/Treemap.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { DATAVIZ_CATEGORICAL_PALETTE } from '../../../theme/extracted-colors-dataviz'
 
 export interface TreemapDatum {
   /** Stable identity — returned by onPress and used as the React key. */
@@ -35,11 +36,8 @@ export interface TreemapProps extends Omit<ViewProps, 'children'> {
   className?: string
 }
 
-/** Titan categorical fallback palette (data-1..data-8). */
-const PALETTE = [
-  '#5B9BD5', '#14B8A6', '#F4A736', '#F83030',
-  '#823CA0', '#D4A520', '#406D87', '#43C6B7',
-]
+/** Titan categorical fallback palette (see extracted-colors-dataviz). */
+const PALETTE = DATAVIZ_CATEGORICAL_PALETTE
 
 interface Rect {
   x: number