@titan-design/react-ui 0.3.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.3.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/ActiveWorkoutPage.tsx

@@ -6,14 +6,9 @@ import { InputBar } from './InputBar'
 import { RestTimer } from './RestTimer'
 import { SupersetWrapper } from './SupersetWrapper'
 import { type SetRowProps } from './SetRow'
+import { resolveColor } from '../../../theme/resolve-color'
 
-const SURFACE_ELEVATED = 'var(--color-surface-elevated)'
-const BORDER_DEFAULT = 'var(--color-border-default)'
 const BRAND_PRIMARY = '#FF7900'
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
-const TEXT_TERTIARY = 'var(--color-text-tertiary)'
-const PAGE_BG = 'var(--color-background-base)'
 
 /** Where an exercise sits in the during-workout flow. */
 export type ActiveExerciseStatus = 'completed' | 'active' | 'upcoming'
@@ -232,11 +227,11 @@ function WorkoutHeader({
         <View style={{ flexShrink: 1 }}>
           <Text
             accessibilityRole="header"
+            className="text-text-primary"
             style={{
               fontSize: 20,
               fontFamily: '"Space Grotesk", sans-serif',
               fontWeight: '700',
-              color: TEXT_PRIMARY,
             }}
             testID="active-workout-page-title"
           >
@@ -244,11 +239,11 @@ function WorkoutHeader({
           </Text>
           {subtitle != null && (
             <Text
+              className="text-text-secondary"
               style={{
                 marginTop: 2,
                 fontSize: 12,
                 fontFamily: 'Inter, sans-serif',
-                color: TEXT_SECONDARY,
               }}
               testID="active-workout-page-subtitle"
             >
@@ -269,13 +264,13 @@ function WorkoutHeader({
             {`${progress.completedExercises}/${progress.totalExercises}`}
           </Text>
           <Text
+            className="text-text-tertiary"
             style={{
               fontSize: 10,
               fontFamily: 'Inter, sans-serif',
               fontWeight: '600',
               letterSpacing: 0.4,
               textTransform: 'uppercase',
-              color: TEXT_TERTIARY,
             }}
           >
             {`${progress.completedSets}/${progress.totalSets} sets`}
@@ -283,7 +278,8 @@ function WorkoutHeader({
         </View>
       </View>
       <View
-        style={{ height: 4, backgroundColor: BORDER_DEFAULT, borderRadius: 2 }}
+        className="bg-border"
+        style={{ height: 4, borderRadius: 2 }}
         testID="active-workout-page-progress-track"
       >
         <View
@@ -314,10 +310,9 @@ function ExerciseList({ groups, focusedId, onToggle }: ExerciseListProps) {
           return (
             <View
               key={group.exercise.id}
+              className="bg-surface-elevated border-border"
               style={{
-                backgroundColor: SURFACE_ELEVATED,
                 borderWidth: 1,
-                borderColor: BORDER_DEFAULT,
                 borderRadius: 12,
               }}
             >
@@ -395,8 +390,8 @@ export function ActiveWorkoutPage({
 
   return (
     <View
-      className={className}
-      style={{ position: 'relative', width: 390, backgroundColor: PAGE_BG }}
+      className={['bg-background-base', className].filter(Boolean).join(' ')}
+      style={{ position: 'relative', width: 390 }}
       accessibilityRole={'main' as ViewProps['accessibilityRole']}
       aria-label={title}
       testID="active-workout-page"
@@ -409,7 +404,7 @@ export function ActiveWorkoutPage({
 
       {(showRest || showInput) && (
         <View
-          style={{ borderTopWidth: 1, borderTopColor: BORDER_DEFAULT }}
+          style={{ borderTopWidth: 1, borderTopColor: resolveColor('border-default') }}
           testID="active-workout-page-bottom-bar"
         >
           {showRest && rest != null ? (

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/BodyMap.tsx

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
 import BodyHighlighter, { type ExtendedBodyPart, type Slug } from 'react-native-body-highlighter'
 import { cn } from '../../../utils/cn'
+import { resolveColor } from '../../../theme/resolve-color'
 import {
   MuscleGroup,
   SimpleMuscleGroup,
@@ -27,8 +28,6 @@ const Body = ((BodyHighlighter as unknown as { default?: typeof BodyHighlighter
 const OUTLINE_FILL = 'rgba(255,255,255,0.08)'
 const OUTLINE_BORDER = 'rgba(255,255,255,0.12)'
 const BODY_SCALE = 0.8 // 200x400 intrinsic -> ~160x320 px
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
 
 export interface BodyMapData {
   muscleGroup: MuscleGroup
@@ -217,10 +216,10 @@ export function BodyMap({
 
       {legend.length === 0 ? (
         <Text
+          className="text-text-secondary"
           style={{
             marginTop: 8,
             fontSize: 12,
-            color: TEXT_SECONDARY,
             textAlign: 'center',
             fontFamily: 'Inter, sans-serif',
           }}
@@ -276,7 +275,7 @@ function ViewToggle({ view, onViewChange }: ViewToggleProps) {
               borderRadius: 9999,
               backgroundColor: active ? 'rgba(255,121,0,0.16)' : 'transparent',
               borderWidth: 1,
-              borderColor: active ? '#FF7900' : 'var(--color-border-strong)',
+              borderColor: active ? '#FF7900' : resolveColor('border-strong'),
             }}
             testID={`body-map-toggle-${side}`}
           >
@@ -285,7 +284,7 @@ function ViewToggle({ view, onViewChange }: ViewToggleProps) {
                 fontSize: 12,
                 fontFamily: 'Inter, sans-serif',
                 fontWeight: active ? '700' : '500',
-                color: active ? '#FF7900' : TEXT_SECONDARY,
+                color: active ? '#FF7900' : resolveColor('text-secondary'),
                 textTransform: 'capitalize',
               }}
             >
@@ -313,6 +312,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }: MuscleButtonProps)
       accessibilityRole="button"
       accessibilityLabel={label}
       aria-pressed={highlighted}
+      className="bg-surface-raised"
       style={{
         flexDirection: 'row',
         alignItems: 'center',
@@ -321,8 +321,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }: MuscleButtonProps)
         paddingVertical: 3,
         borderRadius: 9999,
         borderWidth: 1,
-        borderColor: highlighted ? '#FF7900' : 'var(--color-border-default)',
-        backgroundColor: 'var(--color-surface-raised)',
+        borderColor: highlighted ? '#FF7900' : resolveColor('border-default'),
       }}
       testID={`body-map-muscle-${entry.key}`}
     >
@@ -332,11 +331,11 @@ function MuscleButton({ entry, highlighted, onMusclePress }: MuscleButtonProps)
         testID={`body-map-muscle-dot-${entry.key}`}
       />
       <Text
+        className="text-text-primary"
         style={{
           fontSize: 11,
           fontFamily: 'Inter, sans-serif',
           fontWeight: '500',
-          color: TEXT_PRIMARY,
         }}
         accessibilityElementsHidden
       >

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

@@ -19,14 +19,7 @@ import {
   type VolumeStatus,
 } from './muscleTaxonomy'
 
-const SURFACE_ELEVATED = 'var(--color-surface-elevated)'
-const SURFACE_RAISED = 'var(--color-surface-raised)'
-const BORDER_STRONG = 'var(--color-border-strong)'
-const BORDER_DEFAULT = 'var(--color-border-default)'
 const BRAND_PRIMARY = '#FF7900'
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
-const TEXT_TERTIARY = 'var(--color-text-tertiary)'
 
 /** Volume track gradient: status-info (blue) -> result-improve (teal) -> status-error (red). */
 const VOLUME_GRADIENT = 'linear-gradient(90deg, #2196F3 0%, #14B8A6 50%, #D14343 100%)'
@@ -205,8 +198,8 @@ export function BodyMapDetailPanel({
         accessibilityRole={'dialog' as ViewProps['accessibilityRole']}
         accessibilityLabel={dialogLabel}
         aria-label={dialogLabel}
+        className="bg-surface-elevated"
         style={{
-          backgroundColor: SURFACE_ELEVATED,
           borderTopLeftRadius: 16,
           borderTopRightRadius: 16,
           maxHeight: '88%',
@@ -224,7 +217,8 @@ export function BodyMapDetailPanel({
           testID="body-map-detail-panel-handle"
         >
           <View
-            style={{ width: 40, height: 4, borderRadius: 2, backgroundColor: BORDER_STRONG }}
+            className="bg-border-strong"
+            style={{ width: 40, height: 4, borderRadius: 2 }}
             accessibilityElementsHidden
           />
         </Pressable>
@@ -242,11 +236,11 @@ export function BodyMapDetailPanel({
             <View className="flex-row items-center" style={{ gap: 8, flexShrink: 1 }}>
               <Text
                 accessibilityRole="header"
+                className="text-text-primary"
                 style={{
                   fontSize: 16,
                   fontFamily: '"Space Grotesk", sans-serif',
                   fontWeight: '700',
-                  color: TEXT_PRIMARY,
                 }}
                 testID="body-map-detail-panel-title"
               >
@@ -269,13 +263,14 @@ export function BodyMapDetailPanel({
               style={{ padding: 4, margin: -4 }}
               testID="body-map-detail-panel-close"
             >
-              <Text style={{ fontSize: 22, lineHeight: 22, color: TEXT_SECONDARY }}>{'×'}</Text>
+              <Text className="text-text-secondary" style={{ fontSize: 22, lineHeight: 22 }}>{'×'}</Text>
             </Pressable>
           </View>
 
           {lastTrained != null && (
             <Text
-              style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+              className="text-text-secondary"
+              style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}
               testID="body-map-detail-panel-last-trained"
             >
               {`Last trained ${lastTrained}`}
@@ -288,10 +283,10 @@ export function BodyMapDetailPanel({
               style={{ marginBottom: 6 }}
               accessibilityElementsHidden
             >
-              <Text style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600', color: TEXT_TERTIARY }}>
+              <Text className="text-text-tertiary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}>
                 {`MEV ${landmarks.mev}`}
               </Text>
-              <Text style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600', color: TEXT_TERTIARY }}>
+              <Text className="text-text-tertiary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}>
                 {`MRV ${landmarks.mrv}`}
               </Text>
             </View>
@@ -310,6 +305,7 @@ export function BodyMapDetailPanel({
                 accessibilityElementsHidden
               />
               <View
+                className="border-text-primary bg-surface-elevated"
                 style={{
                   position: 'absolute',
                   left: `${markerLeft}%`,
@@ -318,8 +314,6 @@ export function BodyMapDetailPanel({
                   height: 14,
                   borderRadius: 7,
                   borderWidth: 2,
-                  borderColor: TEXT_PRIMARY,
-                  backgroundColor: SURFACE_ELEVATED,
                   boxShadow: '0 0 4px rgba(0,0,0,0.5)',
                 }}
                 accessibilityElementsHidden
@@ -330,18 +324,19 @@ export function BodyMapDetailPanel({
 
           <View className="flex-row items-baseline" style={{ marginTop: 14, gap: 4 }}>
             <Text
+              className="text-text-primary"
               style={{
                 fontSize: 24,
                 fontFamily: '"Space Grotesk", sans-serif',
                 fontWeight: '700',
-                color: TEXT_PRIMARY,
               }}
               testID="body-map-detail-panel-set-count"
             >
               {weeklySets}
             </Text>
             <Text
-              style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+              className="text-text-secondary"
+              style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}
               testID="body-map-detail-panel-mrv-suffix"
             >
               {`/ ${landmarks.mrv} MRV`}
@@ -351,11 +346,11 @@ export function BodyMapDetailPanel({
           {weeklyHistory != null && weeklyHistory.length > 0 && (
             <View style={{ marginTop: 14 }} testID="body-map-detail-panel-sparkline">
               <Text
+                className="text-text-tertiary"
                 style={{
                   fontSize: 10,
                   fontFamily: 'Inter, sans-serif',
                   fontWeight: '600',
-                  color: TEXT_TERTIARY,
                   marginBottom: 6,
                 }}
                 accessibilityElementsHidden
@@ -369,11 +364,11 @@ export function BodyMapDetailPanel({
           {hasContributing && (
             <View style={{ marginTop: 16 }} testID="body-map-detail-panel-contributing">
               <Text
+                className="text-text-tertiary"
                 style={{
                   fontSize: 10,
                   fontFamily: 'Inter, sans-serif',
                   fontWeight: '600',
-                  color: TEXT_TERTIARY,
                   marginBottom: 8,
                 }}
               >
@@ -382,27 +377,27 @@ export function BodyMapDetailPanel({
               {contributingExercises!.map((exercise, index) => (
                 <View
                   key={`${exercise.name}-${index}`}
-                  className="flex-row items-center justify-between"
+                  className="flex-row items-center justify-between bg-surface-raised border-border"
                   style={{
                     gap: 10,
                     paddingVertical: 8,
                     paddingHorizontal: 12,
                     marginBottom: 6,
                     borderRadius: 8,
-                    backgroundColor: SURFACE_RAISED,
                     borderWidth: 1,
-                    borderColor: BORDER_DEFAULT,
                   }}
                   testID={`body-map-detail-panel-contributing-${index}`}
                 >
                   <Text
-                    style={{ flex: 1, fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '600', color: TEXT_PRIMARY }}
+                    className="text-text-primary"
+                    style={{ flex: 1, fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}
                     testID={`body-map-detail-panel-contributing-${index}-name`}
                   >
                     {exercise.name}
                   </Text>
                   <Text
-                    style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+                    className="text-text-secondary"
+                    style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}
                     testID={`body-map-detail-panel-contributing-${index}-detail`}
                   >
                     {`${exercise.sets} sets · ${Math.round(exercise.contributionWeight * 100)}%`}
@@ -415,11 +410,11 @@ export function BodyMapDetailPanel({
           {hasUpcoming && (
             <View style={{ marginTop: 16 }} testID="body-map-detail-panel-upcoming">
               <Text
+                className="text-text-tertiary"
                 style={{
                   fontSize: 10,
                   fontFamily: 'Inter, sans-serif',
                   fontWeight: '600',
-                  color: TEXT_TERTIARY,
                   marginBottom: 8,
                 }}
               >
@@ -433,13 +428,15 @@ export function BodyMapDetailPanel({
                   testID={`body-map-detail-panel-upcoming-${index}`}
                 >
                   <Text
-                    style={{ flex: 1, fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '600', color: TEXT_PRIMARY }}
+                    className="text-text-primary"
+                    style={{ flex: 1, fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}
                     testID={`body-map-detail-panel-upcoming-${index}-name`}
                   >
                     {exercise.name}
                   </Text>
                   <Text
-                    style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_TERTIARY }}
+                    className="text-text-tertiary"
+                    style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}
                     testID={`body-map-detail-panel-upcoming-${index}-detail`}
                   >
                     {`${exercise.workoutName} · ${exercise.sets} sets`}