@titan-design/react-ui 0.4.0 → 0.5.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  // 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 * 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, discreteRainbow } from './primitives'\n\n// Light mode semantic colors (default)\nexport const semanticColorsLight = {\n  // Brand colors (brand-*)\n  'brand-primary': p.accent[400],              // #FF7900\n  'brand-primary-light': p.accent[200],        // #FF9630\n  'brand-primary-dark': p.accent[700],         // #D0620C\n  'brand-primary-subtle': 'rgba(255, 121, 0, 0.08)',\n  'brand-primary-hover': p.accent[500],\n  'brand-primary-active': p.accent[600],\n\n  'brand-secondary': p.steel[500],           // #406D87\n  'brand-secondary-light': p.steel[300],     // #678498\n  'brand-secondary-dark': p.steel[700],      // #32556D\n  'brand-secondary-subtle': 'rgba(64, 109, 135, 0.08)',\n  'brand-secondary-hover': p.steel[600],\n  'brand-secondary-active': p.steel[700],\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': p.teal[500],             // #14B8A6\n  'status-success-light': p.teal[400],       // #43C6B7\n  'status-success-dark': p.teal[700],        // #0E8074\n  'status-success-subtle': p.teal[50],\n\n  'status-error': p.red[600],                // #D14343\n  'status-error-light': p.red[400],          // #DA6868\n  'status-error-dark': p.red[700],           // #922E2E\n  'status-error-subtle': p.red[50],\n\n  'status-warning': p.amber[500],            // #FFB020\n  'status-warning-light': p.amber[400],      // #FFBF4C\n  'status-warning-dark': p.amber[600],       // #B27B16\n  'status-warning-subtle': p.amber[50],\n\n  'status-info': p.sky[500],                 // #2196F3\n  'status-info-light': p.sky[400],           // #64B6F7\n  'status-info-dark': p.sky[700],            // #0B79D0\n  'status-info-subtle': p.sky[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],               // #1965B0 - Blue\n  'data-2': discreteRainbow[14],              // #4EB265 - Green\n  'data-3': discreteRainbow[17],              // #F7F056 - Yellow\n  'data-4': discreteRainbow[25],              // #DC050C - Red\n  'data-5': discreteRainbow[8],               // #882E72 - Purple\n  'data-6': discreteRainbow[20],              // #F4A736 - Orange\n  'data-7': discreteRainbow[13],              // #7BAFDE - Light Blue\n  'data-8': discreteRainbow[15],              // #90C987 - Light Green\n  'data-9': discreteRainbow[3],               // #CAACCB - Lavender\n  'data-10': discreteRainbow[22],             // #EE8026 - 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],          // #FAFAFA - slightly off-white for elevated cards\n  'surface-raised': p.neutral[100],           // #F3F4F6 - 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-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': p.accent[400],\n  'brand-primary-light': p.accent[200],\n  'brand-primary-dark': p.accent[700],\n  'brand-primary-subtle': 'rgba(255, 121, 0, 0.12)',\n  'brand-primary-hover': p.accent[300],\n  'brand-primary-active': p.accent[200],\n\n  'brand-secondary': p.steel[500],\n  'brand-secondary-light': p.steel[300],\n  'brand-secondary-dark': p.steel[700],\n  'brand-secondary-subtle': 'rgba(64, 109, 135, 0.12)',\n  'brand-secondary-hover': p.steel[400],\n  'brand-secondary-active': p.steel[300],\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': p.teal[500],\n  'status-success-light': p.teal[400],\n  'status-success-dark': p.teal[700],\n  'status-success-subtle': 'rgba(20, 184, 166, 0.12)',\n\n  'status-error': p.red[600],\n  'status-error-light': p.red[400],\n  'status-error-dark': p.red[700],\n  'status-error-subtle': 'rgba(209, 67, 67, 0.12)',\n\n  'status-warning': p.amber[500],\n  'status-warning-light': p.amber[400],\n  'status-warning-dark': p.amber[600],\n  'status-warning-subtle': 'rgba(255, 176, 32, 0.12)',\n\n  'status-info': p.sky[500],\n  'status-info-light': p.sky[400],\n  'status-info-dark': p.sky[700],\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],         // #161616 - main surface\n  'surface-elevated': p.charcoal[600],     // #191919 - elevated surface\n  'surface-raised': p.charcoal[500],       // #1C1C1C - raised surface\n  'surface-overlay': p.charcoal[600],      // #191919 - overlay surface\n  'surface-input': p.charcoal[600],        // #191919 - input surface\n\n  // Background colors\n  'background-base': p.charcoal[900],      // #101010 - darkest charcoal\n  'background-default': p.charcoal[700],    // #161616 - main background\n  'background-subtle': p.charcoal[500],     // #1C1C1C - subtle background\n\n  // Border colors\n  'border-default': p.charcoal[400],       // #1F1F1F - default border\n  'border-subtle': p.charcoal[500],        // #1C1C1C - subtle border\n  'border-strong': p.charcoal[300],        // #2C2C2C - strong border\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],              // #1F1F1F - 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': '64, 109, 135',\n  '--color-status-success-rgb': '20, 184, 166',\n  '--color-status-error-rgb': '209, 67, 67',\n  '--color-status-warning-rgb': '255, 176, 32',\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-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-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-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-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.5.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,12 @@
     "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",
     "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 +82,6 @@
     "react-native-web": ">=0.19.0"
   },
   "peerDependenciesMeta": {
-    "lucide-react-native": {
-      "optional": true
-    },
     "nativewind": {
       "optional": true
     },
@@ -123,7 +126,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/Workout/BaseBadge.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
-import { Dumbbell } from 'lucide-react'
+import { DumbbellIcon } from './icons'
 import { BaseBadge } from './BaseBadge'
 
 const meta: Meta<typeof BaseBadge> = {
@@ -47,7 +47,7 @@ export const Pr: Story = {
 export const WithIcon: Story = {
   args: {
     variant: 'plain',
-    icon: <Dumbbell size={12} color="#9CA3AF" strokeWidth={2} />,
+    icon: <DumbbellIcon size={12} color="#9CA3AF" strokeWidth={2} />,
     children: <Label>225 lbs</Label>,
   },
 }
@@ -66,7 +66,7 @@ export const AllVariants: Story = {
         <BaseBadge variant="pr" size="lg"><Label color="#FF7900">PR</Label></BaseBadge>
       </View>
       <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
-        <BaseBadge icon={<Dumbbell size={12} color="#9CA3AF" strokeWidth={2} />}>
+        <BaseBadge icon={<DumbbellIcon size={12} color="#9CA3AF" strokeWidth={2} />}>
           <Label>225 lbs</Label>
         </BaseBadge>
       </View>

package/src/components/custom/Workout/BaseBadge.test.tsx

@@ -22,7 +22,7 @@ describe('BaseBadge', () => {
       </BaseBadge>,
     )
     expect(screen.getByTestId('bb')).toHaveStyle({
-      borderTopColor: 'rgba(255, 121, 0, 0.12)',
+      borderTopColor: 'rgba(255, 121, 0, 0.3)',
     })
   })
 

package/src/components/custom/Workout/BaseBadge.tsx

@@ -33,7 +33,7 @@ const variantColors: Record<
   plain: { backgroundColor: '#1C1C1C', borderColor: '#1F1F1F' },
   pr: {
     backgroundColor: 'rgba(255, 121, 0, 0.12)',
-    borderColor: 'rgba(255, 121, 0, 0.12)',
+    borderColor: 'rgba(255, 121, 0, 0.3)',
   },
 }
 

package/src/components/custom/Workout/ExerciseCard.tsx

@@ -1,7 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useState } from 'react'
 import { View, Text, Pressable } from 'react-native'
-import { VelocityStrip } from './VelocityStrip'
+import { VelocityStrip, type VelocityZoneBandProp } from './VelocityStrip'
 import { PlaceholderStrip } from './PlaceholderStrip'
 import { WeightBadge } from './WeightBadge'
 import { PrBadge } from './PrBadge'
@@ -26,6 +26,8 @@ export interface ExerciseCardProps {
   e1rm?: { value: number; unit: 'lbs' | 'kg' }
   isPR?: boolean
   setVelocities?: number[][]
+  /** Optional velocity-zone bands shared across this exercise's sets (WA bands). */
+  velocityZones?: readonly VelocityZoneBandProp[]
   totalPlannedSets?: number
   sets?: SetRowProps[]
   tempo?: [number, number, number, number]
@@ -106,6 +108,7 @@ function CollapsedCard({
   e1rm,
   isPR,
   setVelocities,
+  velocityZones,
   totalPlannedSets,
   supersetPosition,
 }: ExerciseCardProps) {
@@ -189,6 +192,7 @@ function CollapsedCard({
               <VelocityStrip
                 key={i}
                 velocities={velocities}
+                zones={velocityZones}
                 variant="mini"
                 testID={`exercise-card-velocity-strip-${i}`}
               />

package/src/components/custom/Workout/ExerciseDetailPage.tsx

@@ -15,7 +15,12 @@ import {
 } from './CapacityBandChart'
 import { ExerciseCard, type ExerciseCardProps } from './ExerciseCard'
 import { type SetRowProps } from './SetRow'
-import { VelocityStrip, calculateMeanVelocity, calculateVelocityLoss } from './VelocityStrip'
+import {
+  VelocityStrip,
+  calculateMeanVelocity,
+  calculateVelocityLoss,
+  type VelocityZoneBandProp,
+} from './VelocityStrip'
 import { resolveColor } from '../../../theme/resolve-color'
 import { cn } from '../../../utils/cn'
 
@@ -97,6 +102,8 @@ export interface ExerciseVbt {
   projection?: CapacityBandProjection
   /** Per-set velocity traces for the most recent session. */
   sets: ExerciseVbtSet[]
+  /** Optional velocity-zone bands for this exercise (WA `VelocityZones.bands`). */
+  zones?: readonly VelocityZoneBandProp[]
 }
 
 /** Page-level roll-up of the logged sessions. */
@@ -348,7 +355,13 @@ function EntryList({ entries, expandedId, onToggle, emptyLabel, testID }: EntryL
   )
 }
 
-function VbtBreakdown({ sets }: { sets: ExerciseVbtSet[] }) {
+function VbtBreakdown({
+  sets,
+  zones,
+}: {
+  sets: ExerciseVbtSet[]
+  zones?: readonly VelocityZoneBandProp[]
+}) {
   return (
     <View style={{ gap: 10 }} testID="exercise-detail-page-vbt-breakdown">
       {sets.map((set) => {
@@ -373,7 +386,7 @@ function VbtBreakdown({ sets }: { sets: ExerciseVbtSet[] }) {
               {set.label}
             </Text>
             <View className="flex-1" style={{ height: 8, justifyContent: 'center' }}>
-              <VelocityStrip velocities={set.velocities} variant="mini" />
+              <VelocityStrip velocities={set.velocities} zones={zones} variant="mini" />
             </View>
             <Text
               className="text-text-tertiary"
@@ -614,7 +627,7 @@ export function ExerciseDetailPage({
             </SectionCard>
             <VbtSummaryRow summary={vbtSummary} />
             <SectionCard title="Velocity Breakdown" testID="exercise-detail-page-velocity">
-              <VbtBreakdown sets={vbt.sets} />
+              <VbtBreakdown sets={vbt.sets} zones={vbt.zones} />
             </SectionCard>
           </View>
         )}

package/src/components/custom/Workout/IntensityBar.test.tsx

@@ -3,6 +3,8 @@ import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { IntensityBar } from './IntensityBar'
 
+const AT_TARGET_GLOW = '0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)'
+
 describe('IntensityBar', () => {
   it('renders the bar', () => {
     render(<IntensityBar level={0.5} />)
@@ -14,98 +16,148 @@ describe('IntensityBar', () => {
     expect(screen.getByTestId('intensity-fill')).toBeInTheDocument()
   })
 
-  it('renders threshold line when threshold is provided', () => {
-    render(<IntensityBar level={0.5} threshold={0.85} />)
-    expect(screen.getByTestId('intensity-threshold')).toBeInTheDocument()
-  })
-
-  it('does not render threshold line when threshold is omitted', () => {
+  it('has correct accessibility role', () => {
     render(<IntensityBar level={0.5} />)
-    expect(screen.queryByTestId('intensity-threshold')).not.toBeInTheDocument()
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
   })
 
-  it('shows MRV label when showThresholdLabel is true and threshold set', () => {
-    render(<IntensityBar level={0.6} threshold={0.85} showThresholdLabel />)
-    expect(screen.getByText('MRV')).toBeInTheDocument()
-  })
+  describe('numeric percentage label', () => {
+    it('renders the level as a percentage under the bar', () => {
+      render(<IntensityBar level={0.2} />)
+      expect(screen.getByTestId('intensity-label')).toHaveTextContent('20%')
+    })
 
-  it('hides MRV label when showThresholdLabel is false', () => {
-    render(<IntensityBar level={0.6} threshold={0.85} />)
-    expect(screen.queryByTestId('intensity-threshold-label')).not.toBeInTheDocument()
-  })
+    it('renders over-target percentages above 100', () => {
+      render(<IntensityBar level={1.3} />)
+      expect(screen.getByTestId('intensity-label')).toHaveTextContent('130%')
+    })
 
-  it('hides MRV label when threshold is omitted even if showThresholdLabel is true', () => {
-    render(<IntensityBar level={0.6} showThresholdLabel />)
-    expect(screen.queryByTestId('intensity-threshold-label')).not.toBeInTheDocument()
-  })
+    it('mirrors the label in the accessibility value', () => {
+      render(<IntensityBar level={1.1} />)
+      expect(screen.getByLabelText('Intensity level: 110%')).toBeInTheDocument()
+    })
 
-  it('has correct accessibility role', () => {
-    render(<IntensityBar level={0.5} />)
-    expect(screen.getByRole('progressbar')).toBeInTheDocument()
+    it('floors a negative level to 0%', () => {
+      render(<IntensityBar level={-0.5} />)
+      expect(screen.getByTestId('intensity-label')).toHaveTextContent('0%')
+    })
   })
 
-  it('maps level 0-1 to percentage in accessibility label', () => {
-    render(<IntensityBar level={0.75} />)
-    expect(screen.getByLabelText('Intensity level: 75%')).toBeInTheDocument()
-  })
+  describe('zone colors graded by true percentage', () => {
+    it('renders teal below the target ramp (< 75%)', () => {
+      render(<IntensityBar level={0.2} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#14B8A6' })
+    })
 
-  it('clamps level above 1 to 100%', () => {
-    render(<IntensityBar level={1.5} />)
-    expect(screen.getByLabelText('Intensity level: 100%')).toBeInTheDocument()
-  })
+    it('stays teal just under the amber boundary', () => {
+      render(<IntensityBar level={0.74} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#14B8A6' })
+    })
 
-  it('clamps level below 0 to 0%', () => {
-    render(<IntensityBar level={-0.5} />)
-    expect(screen.getByLabelText('Intensity level: 0%')).toBeInTheDocument()
+    it('renders amber approaching the target (75-99%)', () => {
+      render(<IntensityBar level={0.75} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#FFB020' })
+    })
+
+    it('renders the brand target color exactly at 100%', () => {
+      render(<IntensityBar level={1} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#FF7900' })
+    })
+
+    it('renders over-1 red just past target (110%)', () => {
+      render(<IntensityBar level={1.1} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#D14343' })
+    })
+
+    it('renders over-2 deep red at 120%', () => {
+      render(<IntensityBar level={1.2} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#A62626' })
+    })
+
+    it('renders over-3 darkest red at 130%', () => {
+      render(<IntensityBar level={1.3} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#7A1C1C' })
+    })
   })
 
-  it('renders horizontal orientation', () => {
-    render(<IntensityBar level={0.5} orientation="horizontal" />)
-    expect(screen.getByTestId('intensity-fill')).toBeInTheDocument()
+  describe('over-target bulge', () => {
+    it('renders a bulge when the level exceeds target', () => {
+      render(<IntensityBar level={1.1} />)
+      expect(screen.getByTestId('intensity-bulge')).toBeInTheDocument()
+    })
+
+    it('colors the bulge to match the over-target zone', () => {
+      render(<IntensityBar level={1.2} />)
+      expect(screen.getByTestId('intensity-bulge')).toHaveStyle({ backgroundColor: '#A62626' })
+    })
+
+    it('does not render a bulge at or below target', () => {
+      render(<IntensityBar level={1} />)
+      expect(screen.queryByTestId('intensity-bulge')).not.toBeInTheDocument()
+    })
   })
 
-  it('accepts custom size and thickness', () => {
-    render(<IntensityBar level={0.5} size={32} thickness={8} />)
-    expect(screen.getByTestId('intensity-bar')).toBeInTheDocument()
+  describe('target line', () => {
+    it('renders the target line when threshold is provided', () => {
+      render(<IntensityBar level={0.5} threshold={0.5} />)
+      expect(screen.getByTestId('intensity-target')).toBeInTheDocument()
+    })
+
+    it('does not render the target line when threshold is omitted', () => {
+      render(<IntensityBar level={0.5} />)
+      expect(screen.queryByTestId('intensity-target')).not.toBeInTheDocument()
+    })
   })
 
-  describe('fill zones', () => {
-    it('renders teal fill for low levels (0-0.4)', () => {
-      render(<IntensityBar level={0.3} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#14B8A6' })
+  describe('at-target glow', () => {
+    it('applies the blue glow when the level rests on the target', () => {
+      render(<IntensityBar level={0.5} threshold={0.5} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ boxShadow: AT_TARGET_GLOW })
+    })
+
+    it('does not glow when the level is away from the target', () => {
+      render(<IntensityBar level={0.2} threshold={0.85} />)
+      expect(screen.getByTestId('intensity-fill')).not.toHaveStyle({ boxShadow: AT_TARGET_GLOW })
     })
 
-    it('renders amber fill for moderate levels (0.4-0.7)', () => {
+    it('does not glow when no threshold is provided', () => {
       render(<IntensityBar level={0.5} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#FFB020' })
+      expect(screen.getByTestId('intensity-fill')).not.toHaveStyle({ boxShadow: AT_TARGET_GLOW })
     })
+  })
 
-    it('renders red fill for high levels (0.7-1.0)', () => {
-      render(<IntensityBar level={0.85} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#D14343' })
+  describe('MRV threshold label', () => {
+    it('shows MRV when showThresholdLabel is true and threshold set', () => {
+      render(<IntensityBar level={0.6} threshold={0.85} showThresholdLabel />)
+      expect(screen.getByText('MRV')).toBeInTheDocument()
     })
 
-    it('uses teal at the lower zone boundary', () => {
-      render(<IntensityBar level={0.39} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#14B8A6' })
+    it('hides MRV when showThresholdLabel is false', () => {
+      render(<IntensityBar level={0.6} threshold={0.85} />)
+      expect(screen.queryByTestId('intensity-threshold-label')).not.toBeInTheDocument()
     })
 
-    it('uses amber at the 0.4 boundary', () => {
-      render(<IntensityBar level={0.4} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#FFB020' })
+    it('hides MRV when threshold is omitted even if showThresholdLabel is true', () => {
+      render(<IntensityBar level={0.6} showThresholdLabel />)
+      expect(screen.queryByTestId('intensity-threshold-label')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('geometry', () => {
+    it('renders horizontal orientation', () => {
+      render(<IntensityBar level={0.5} orientation="horizontal" />)
+      expect(screen.getByTestId('intensity-fill')).toBeInTheDocument()
     })
 
-    it('uses red at the 0.7 boundary', () => {
-      render(<IntensityBar level={0.7} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#D14343' })
+    it('accepts custom size and thickness', () => {
+      render(<IntensityBar level={0.5} size={36} thickness={8} />)
+      expect(screen.getByTestId('intensity-bar')).toBeInTheDocument()
     })
   })
 
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
-      const { container } = render(
-        <IntensityBar level={0.5} threshold={0.85} showThresholdLabel />,
-      )
+      const { container } = render(<IntensityBar level={0.5} threshold={0.85} showThresholdLabel />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })