@titan-design/react-ui 0.2.7 → 0.4.0

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

@@ -1,6 +1,8 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useEffect, useState } from 'react'
 import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+import { formatVelocity } from '../../../utils/workout-format'
 
 export interface VelocityStripProps extends ViewProps {
   velocities: number[]
@@ -12,12 +14,8 @@ export interface VelocityStripProps extends ViewProps {
   className?: string
 }
 
-const VEL_COLORS = {
-  green: '#2ed573',
-  yellow: '#ffd43b',
-  orange: '#ffa502',
-  red: '#ff4757',
-}
+// Canonical scale shared with SetRow's RPE color (see theme/workout-tokens.ts).
+const VEL_COLORS = WORKOUT_TOKENS.scale
 
 export function getVelocityZoneColor(velocity: number): string {
   if (velocity >= 1.0) return 'vel-green'
@@ -153,7 +151,9 @@ export function VelocityStrip({
 
   const stripContent = (
     <Animated.View
-      className={className}
+      className={[className, expanded ? 'bg-surface-raised' : 'bg-transparent']
+        .filter(Boolean)
+        .join(' ')}
       style={[
         {
           height: heightAnim,
@@ -164,7 +164,6 @@ export function VelocityStrip({
           paddingBottom: expanded ? 24 : 0,
           paddingHorizontal: expanded ? 6 : 0,
           paddingVertical: expanded ? undefined : 8,
-          backgroundColor: expanded ? '#1C1C1C' : 'transparent',
           overflow: expanded ? 'visible' : 'hidden',
         },
       ]}
@@ -178,7 +177,10 @@ export function VelocityStrip({
       >
         {velocities.map((v, i) => {
           const zone = getVelocityZoneColor(v)
-          const barHeightPct = Math.round((v / (maxVelocity * 1.15)) * 100)
+          // Guard all-zero velocities (idle / pre-rep): maxVelocity === 0 makes
+          // this 0 / 0 === NaN and emits height:'NaN%'. Flatten the bars instead.
+          const barHeightPct =
+            maxVelocity > 0 ? Math.round((v / (maxVelocity * 1.15)) * 100) : 0
 
           const bar = (
             <View
@@ -188,10 +190,11 @@ export function VelocityStrip({
               {expanded && (
                 <Animated.View style={{ opacity: labelOpacity, alignItems: 'center', position: 'absolute', top: -13, left: 0, right: 0 }} accessibilityElementsHidden>
                   <Text
-                    style={{ fontSize: 8, fontWeight: '600', color: '#9CA3AF' }}
+                    className="text-text-secondary"
+                    style={{ fontSize: 8, fontWeight: '600' }}
                     testID={`velocity-label-${i}`}
                   >
-                    {v.toFixed(2)}
+                    {formatVelocity(v)}
                   </Text>
                 </Animated.View>
               )}
@@ -210,7 +213,7 @@ export function VelocityStrip({
                 }
                 testID={`velocity-bar-${i}`}
                 accessibilityRole="image"
-                accessibilityLabel={`Rep ${i + 1}: ${v.toFixed(2)} meters per second`}
+                accessibilityLabel={`Rep ${i + 1}: ${formatVelocity(v)} meters per second`}
               />
             </View>
           )
@@ -222,7 +225,7 @@ export function VelocityStrip({
                 style={{ flex: 1, height: '100%' }}
                 onPress={() => onRepPress(i, v)}
                 accessibilityRole="button"
-                accessibilityLabel={`Rep ${i + 1}: ${v.toFixed(2)} meters per second, tap for details`}
+                accessibilityLabel={`Rep ${i + 1}: ${formatVelocity(v)} meters per second, tap for details`}
                 testID={`velocity-bar-pressable-${i}`}
               >
                 {bar}
@@ -247,18 +250,18 @@ export function VelocityStrip({
           testID="velocity-info-row"
         >
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 10,
-              color: '#9CA3AF',
               fontFamily: 'Inter, sans-serif',
             }}
           >
-            {meanZone} {'\u00B7'} {meanVelocity.toFixed(2)} m/s
+            {meanZone} {'\u00B7'} {formatVelocity(meanVelocity)} m/s
           </Text>
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 10,
-              color: '#9CA3AF',
               fontFamily: 'Inter, sans-serif',
               ...getLossStyle(loss),
             }}

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

@@ -100,11 +100,12 @@ export function WeekRow({
           />
         )}
         <Text
+          className={isCurrent ? undefined : 'text-text-primary'}
           style={{
             fontSize: 13,
             fontWeight: '700',
             fontFamily: 'Inter, sans-serif',
-            color: isCurrent ? BRAND_PRIMARY : '#F3F4F6',
+            color: isCurrent ? BRAND_PRIMARY : undefined,
           }}
           accessibilityElementsHidden
         >

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

@@ -43,9 +43,6 @@ export interface WorkoutCardProps extends ViewProps {
 }
 
 const COLORS = {
-  textPrimary: '#F3F4F6',
-  textSecondary: '#9CA3AF',
-  textTertiary: '#6B7280',
   statusSuccess: '#14B8A6',
   brandPrimary: '#FF7900',
   borderDefault: '#1F1F1F',
@@ -122,11 +119,11 @@ export function WorkoutCard({
     <View style={{ padding: 14 }} testID="workout-card-body">
       <View className="flex-row items-center" testID="workout-card-header">
         <Text
+          className="text-text-primary"
           style={{
             fontSize: 15,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: COLORS.textPrimary,
           }}
           testID="workout-card-name"
         >
@@ -134,10 +131,10 @@ export function WorkoutCard({
         </Text>
         <View className="flex-1" />
         <Text
+          className="text-text-tertiary"
           style={{
             fontSize: 11,
             fontFamily: 'Inter, sans-serif',
-            color: COLORS.textTertiary,
           }}
           testID="workout-card-date"
         >
@@ -146,11 +143,11 @@ export function WorkoutCard({
       </View>
 
       <Text
+        className="text-text-secondary"
         style={{
           marginTop: 4,
           fontSize: 12,
           fontFamily: 'Inter, sans-serif',
-          color: COLORS.textSecondary,
         }}
         testID="workout-card-stats"
       >

package/src/components/custom/Workout/index.ts

@@ -4,15 +4,20 @@ export {
   type BaseBadgeVariant,
   type BaseBadgeSize,
 } from './BaseBadge'
-export {
-  WeightBadge,
-  type WeightBadgeProps,
-  type WeightBadgeSize,
-} from './WeightBadge'
+export { WeightBadge, type WeightBadgeProps, type WeightBadgeSize } from './WeightBadge'
 export { PrBadge, type PrBadgeProps, type PRType } from './PrBadge'
 export { StatusDot, type StatusDotVariant, type StatusDotProps } from './StatusDot'
 export { PlaceholderStrip, type PlaceholderStripProps } from './PlaceholderStrip'
 export { TempoDisplay, type TempoDisplayProps } from './TempoDisplay'
+export {
+  TempoBar,
+  type TempoBarProps,
+  type TempoPhaseKey,
+  type TempoPacingState,
+  TEMPO_PACING,
+  getTempoPacingState,
+  getTempoFillPct,
+} from './TempoBar'
 export { DeviationBar, type DeviationBarProps } from './DeviationBar'
 export { IntensityBar, type IntensityBarProps } from './IntensityBar'
 export { WorkoutPill, type WorkoutPillProps, type WorkoutPillStatus } from './WorkoutPill'
@@ -24,11 +29,7 @@ export {
   calculateVelocityLoss,
   calculateMeanVelocity,
 } from './VelocityStrip'
-export {
-  MuscleGroupChip,
-  type MuscleGroupChipProps,
-  type VolumeStatus,
-} from './MuscleGroupChip'
+export { MuscleGroupChip, type MuscleGroupChipProps, type VolumeStatus } from './MuscleGroupChip'
 export { Sparkline, type SparklineProps } from './Sparkline'
 export { SetRow, type SetRowProps, type SetRowMode } from './SetRow'
 export { InputBar, type InputBarProps } from './InputBar'
@@ -49,11 +50,7 @@ export {
   type WorkoutMuscleGroup,
   type WorkoutMuscleVolumeStatus,
 } from './WorkoutCard'
-export {
-  MesoCard,
-  type MesoCardProps,
-  type MesoVolumeHeatmapEntry,
-} from './MesoCard'
+export { MesoCard, type MesoCardProps, type MesoVolumeHeatmapEntry } from './MesoCard'
 export {
   PrHistoryModal,
   type PrHistoryModalProps,
@@ -91,25 +88,76 @@ export {
   type WorkoutDot,
   type WorkoutDotStatus,
 } from './CapacityBandChart'
-export { BodyMap, type BodyMapProps, type BodyMapData } from './BodyMap'
-export {
-  BodyMapDetailPanel,
-  type BodyMapDetailPanelProps,
-  type ContributingExercise,
-  type UpcomingExercise,
+// BodyMap / BodyMapDetailPanel / TrainingStatusPage depend on
+// `react-native-body-highlighter` at runtime. Their VALUE exports live behind the
+// `@titan-design/react-ui/bodymap` subpath to keep this barrel body-highlighter-free.
+// Type-only re-exports stay here (erased at build, so no runtime pull).
+export type { BodyMapProps, BodyMapData } from './BodyMap'
+export type {
+  BodyMapDetailPanelProps,
+  ContributingExercise,
+  UpcomingExercise,
 } from './BodyMapDetailPanel'
+export type {
+  TrainingStatusPageProps,
+  TrainingStatusMuscle,
+  TrainingStatusSummary,
+} from './TrainingStatusPage'
+export {
+  ProgramPlanningPage,
+  deriveNavLevel,
+  toProgressBarMesos,
+  findMeso,
+  findWeek,
+  findWorkout,
+  buildBreadcrumbs,
+  type ProgramPlanningPageProps,
+  type PlanMeso,
+  type PlanWeek,
+  type PlanWorkout,
+  type ProgramNavLevel,
+  type ProgramSelection,
+  type ProgramBreadcrumb,
+} from './ProgramPlanningPage'
 export {
+  ExerciseDetailPage,
+  deriveExerciseStats,
+  toExerciseCardProps,
+  summarizeVbt,
+  EXERCISE_DETAIL_TABS,
+  type ExerciseDetailPageProps,
+  type ExerciseDetailTab,
+  type ExerciseDetailHeader,
+  type ExerciseDetailEntry,
+  type ExerciseTrend,
+  type ExerciseVbtSet,
+  type ExerciseVbt,
+  type ExerciseDetailStats,
+  type VbtSummary,
+} from './ExerciseDetailPage'
+// muscleTaxonomy imports `react-native-body-highlighter` at runtime. Its value
+// exports (incl. the MuscleGroup / SimpleMuscleGroup enums) live behind the
+// `@titan-design/react-ui/bodymap` subpath. Only type-only re-exports stay here.
+export type {
   MuscleGroup,
   SimpleMuscleGroup,
-  SIMPLE_TO_DETAILED,
-  DETAILED_TO_SIMPLE,
-  MUSCLE_TO_SVG_SLUGS,
-  MUSCLE_TO_CATEGORY,
-  MUSCLE_DISPLAY_NAMES,
-  SIMPLE_DISPLAY_NAMES,
-  DEFAULT_VOLUME_LANDMARKS,
-  VOLUME_STATUS_LABELS,
-  getHeatmapColor,
-  type MovementCategory,
-  type VolumeLandmarks,
+  MovementCategory,
+  VolumeLandmarks,
 } from './muscleTaxonomy'
+export {
+  ActiveWorkoutPage,
+  countCompletedSets,
+  deriveWorkoutProgress,
+  findActiveExercise,
+  statusToCardState,
+  toActiveCardProps,
+  groupExercises,
+  type ActiveWorkoutPageProps,
+  type ActiveWorkoutExercise,
+  type ActiveWorkoutSuperset,
+  type ActiveWorkoutInput,
+  type ActiveWorkoutRest,
+  type ActiveExerciseStatus,
+  type WorkoutProgress,
+  type WorkoutGroup,
+} from './ActiveWorkoutPage'

package/src/test/nativewind-stub.ts

@@ -0,0 +1,13 @@
+// Web test stub for `nativewind`.
+//
+// The real `nativewind` pulls react-native-css-interop → RN's Flow-typed
+// sources, which the jsdom/react-native-web test environment can't parse
+// ("Unexpected token 'typeof'"). Only `ThemeProvider` imports nativewind (for
+// `vars()`), and only for its NATIVE behavior — on web the color tokens resolve
+// from `global.css`, so an identity `vars()` is a faithful web stand-in.
+// Aliased in `vitest.config.ts`; the real package is used at build/native.
+
+/** Identity stand-in for nativewind's `vars()` — returns the token map as-is. */
+export function vars(values: Record<string, string>): Record<string, string> {
+  return values
+}

package/src/theme/ThemeProvider.test.tsx

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { Text } from 'react-native'
+import { ThemeProvider } from './ThemeProvider'
+
+describe('ThemeProvider', () => {
+  it('renders its children', () => {
+    render(
+      <ThemeProvider>
+        <Text>inside</Text>
+      </ThemeProvider>,
+    )
+    expect(screen.getByText('inside')).toBeInTheDocument()
+  })
+
+  it('accepts a light mode without error', () => {
+    render(
+      <ThemeProvider mode="light">
+        <Text>light</Text>
+      </ThemeProvider>,
+    )
+    expect(screen.getByText('light')).toBeInTheDocument()
+  })
+})

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,50 @@
+// Cross-platform theme provider (TD native-theming).
+//
+// Registers titan's semantic color tokens as runtime CSS variables via
+// nativewind's `vars()` so that className color tokens (`text-text-secondary`,
+// `bg-surface-raised`, `border-border`, …) resolve on NATIVE React Native — the
+// native equivalent of the `:root {}` block `global.css` provides on web.
+//
+// Why this exists: titan's Workout organisms reference semantic colors as CSS
+// variables. On web (the dashboard, react-native-web) those come from
+// `global.css`. On native (the mobile app) nothing defined them, so any titan
+// component using a `--color-*` token rendered with an unresolved (black) color.
+// Wrap the mobile app root in `<ThemeProvider>` and the tokens resolve on-device.
+//
+// The var maps are the SAME canonical `darkThemeCSSVars` / `lightThemeCSSVars`
+// that generate `global.css`, so native and web resolve to identical values.
+import { vars } from 'nativewind'
+import { View, type ViewProps } from 'react-native'
+import { darkThemeCSSVars, lightThemeCSSVars } from './config'
+
+export type ThemeProviderMode = 'dark' | 'light'
+
+// Precomputed once — `vars()` is pure, so the same style object is reused across
+// renders. Native == web because these are the maps `tokens-css` emits.
+const MODE_VARS = {
+  dark: vars(darkThemeCSSVars),
+  light: vars(lightThemeCSSVars),
+}
+
+export interface ThemeProviderProps extends ViewProps {
+  /** Theme mode to register. Mobile is dark-only today; defaults to `dark`. */
+  mode?: ThemeProviderMode
+}
+
+/**
+ * Wrap the app root so descendant titan components' `--color-*` className tokens
+ * resolve on native. Fills its parent (`flex: 1`) by default; pass `style` to
+ * override. On web it is harmless (the dashboard already loads `global.css`).
+ */
+export function ThemeProvider({
+  mode = 'dark',
+  style,
+  children,
+  ...props
+}: ThemeProviderProps): React.JSX.Element {
+  return (
+    <View style={[MODE_VARS[mode], { flex: 1 }, style]} {...props}>
+      {children}
+    </View>
+  )
+}

package/src/theme/config.completeness.test.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { darkThemeCSSVars, lightThemeCSSVars } from './config'
+
+/**
+ * Drift guard for the token codegen source (TD-05.08).
+ *
+ * `config.ts` (darkThemeCSSVars / lightThemeCSSVars) is the source that
+ * `tokens-css.ts` renders into `dist/tokens.css`. It must stay a complete,
+ * value-accurate mirror of the `:root` / `.light` custom properties in
+ * `global.css`; otherwise the generated stylesheet silently drifts from the
+ * design system (the exact gap this ticket closed). This test fails if
+ * global.css gains a `:root` var that config.ts does not cover, or if any
+ * shared var's value diverges.
+ */
+
+const themeDir = path.dirname(fileURLToPath(import.meta.url))
+const css = readFileSync(path.join(themeDir, 'global.css'), 'utf8')
+
+/**
+ * global.css :root vars intentionally excluded from the codegen source.
+ * Empty today — every :root var is mirrored. Add a var here (with a reason)
+ * only if it is genuinely prototype-irrelevant, rather than silently skipping.
+ */
+const CODEGEN_ALLOWLIST = new Set<string>([])
+
+function parseVarBlock(header: RegExp): Map<string, string> {
+  const match = css.match(header)
+  if (!match) throw new Error(`could not locate CSS block for ${header}`)
+  const vars = new Map<string, string>()
+  for (const line of match[1].split('\n')) {
+    const declaration = line.match(/^\s*(--[a-z0-9-]+):\s*(.+?);\s*$/i)
+    if (declaration) vars.set(declaration[1], declaration[2].trim())
+  }
+  return vars
+}
+
+const globalDark = parseVarBlock(/:root\s*\{([\s\S]*?)\n\s*\}/)
+const globalLight = parseVarBlock(/\.light,\s*\n?\s*:root\.light\s*\{([\s\S]*?)\n\s*\}/)
+
+const cases = [
+  ['dark', globalDark, darkThemeCSSVars as Record<string, string>],
+  ['light', globalLight, lightThemeCSSVars as Record<string, string>],
+] as const
+
+describe('token codegen completeness (config.ts vs global.css)', () => {
+  it('parses both global.css theme blocks', () => {
+    expect(globalDark.size).toBeGreaterThan(90)
+    expect(globalLight.size).toBe(globalDark.size)
+  })
+
+  for (const [mode, globalVars, cfg] of cases) {
+    it(`${mode}: config covers every global.css :root var with the exact value`, () => {
+      const missing: string[] = []
+      const mismatched: string[] = []
+      for (const [name, value] of globalVars) {
+        if (CODEGEN_ALLOWLIST.has(name)) continue
+        if (!(name in cfg)) {
+          missing.push(name)
+        } else if (cfg[name] !== value) {
+          mismatched.push(`${name}: global='${value}' config='${cfg[name]}'`)
+        }
+      }
+      expect(missing, 'global.css vars missing from config.ts codegen source').toEqual([])
+      expect(mismatched, 'value drift between config.ts and global.css').toEqual([])
+    })
+
+    it(`${mode}: config emits no var absent from global.css`, () => {
+      const extra = Object.keys(cfg).filter(
+        (name) => !globalVars.has(name) && !CODEGEN_ALLOWLIST.has(name),
+      )
+      expect(extra, 'config.ts vars not present in global.css :root').toEqual([])
+    })
+  }
+})

package/src/theme/config.ts

@@ -7,6 +7,35 @@
 
 import { semanticColorsLight, semanticColorsDark, type ThemeMode } from './tokens/semantic'
 
+// Theme-independent custom properties: identical in light and dark in
+// global.css (RGB glow decompositions, font families, animation tokens). Kept
+// as literals since they are not part of the semantic COLOR maps, and spread
+// into both theme maps so codegen mirrors global.css exactly.
+const themeIndependentCSSVars = {
+  // RGB decomposed values for glow shadows
+  '--color-brand-primary-rgb': '255, 121, 0',
+  '--color-brand-secondary-rgb': '64, 109, 135',
+  '--color-status-success-rgb': '20, 184, 166',
+  '--color-status-error-rgb': '209, 67, 67',
+  '--color-status-warning-rgb': '255, 176, 32',
+  '--color-status-info-rgb': '33, 150, 243',
+  '--color-background-base-rgb': '16, 16, 16',
+
+  // Font families
+  '--font-family-sans': "'Inter'",
+  '--font-family-body': "'Nunito Sans'",
+  '--font-family-heading': "'Space Grotesk'",
+  '--font-family-mono': "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
+
+  // Animation tokens
+  '--ease-out': 'cubic-bezier(0.22, 1, 0.36, 1)',
+  '--ease-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',
+  '--ease-spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+  '--duration-fast': '150ms',
+  '--duration-normal': '250ms',
+  '--duration-slow': '400ms',
+} as const
+
 // CSS custom properties for light mode
 export const lightThemeCSSVars = {
   '--color-brand-primary': semanticColorsLight['brand-primary'],
@@ -57,6 +86,67 @@ export const lightThemeCSSVars = {
   '--color-interactive-disabled': semanticColorsLight['interactive-disabled'],
 
   '--color-divider': semanticColorsLight['divider'],
+
+  '--color-brand-primary-hover': semanticColorsLight['brand-primary-hover'],
+  '--color-brand-primary-active': semanticColorsLight['brand-primary-active'],
+  '--color-brand-secondary-hover': semanticColorsLight['brand-secondary-hover'],
+  '--color-brand-secondary-active': semanticColorsLight['brand-secondary-active'],
+
+  '--color-status-success-light': semanticColorsLight['status-success-light'],
+  '--color-status-success-dark': semanticColorsLight['status-success-dark'],
+  '--color-status-error-light': semanticColorsLight['status-error-light'],
+  '--color-status-error-dark': semanticColorsLight['status-error-dark'],
+  '--color-status-warning-light': semanticColorsLight['status-warning-light'],
+  '--color-status-warning-dark': semanticColorsLight['status-warning-dark'],
+  '--color-status-info-light': semanticColorsLight['status-info-light'],
+  '--color-status-info-dark': semanticColorsLight['status-info-dark'],
+
+  '--color-on-status-success': semanticColorsLight['on-status-success'],
+  '--color-on-status-error': semanticColorsLight['on-status-error'],
+  '--color-on-status-warning': semanticColorsLight['on-status-warning'],
+  '--color-on-status-info': semanticColorsLight['on-status-info'],
+
+  '--color-result-improve': semanticColorsLight['result-improve'],
+  '--color-result-improve-light': semanticColorsLight['result-improve-light'],
+  '--color-result-improve-dark': semanticColorsLight['result-improve-dark'],
+  '--color-result-degrade': semanticColorsLight['result-degrade'],
+  '--color-result-degrade-light': semanticColorsLight['result-degrade-light'],
+  '--color-result-degrade-dark': semanticColorsLight['result-degrade-dark'],
+  '--color-result-inconclusive': semanticColorsLight['result-inconclusive'],
+  '--color-result-inconclusive-light': semanticColorsLight['result-inconclusive-light'],
+  '--color-result-neutral': semanticColorsLight['result-neutral'],
+
+  '--color-on-result-improve': semanticColorsLight['on-result-improve'],
+  '--color-on-result-degrade': semanticColorsLight['on-result-degrade'],
+  '--color-on-result-inconclusive': semanticColorsLight['on-result-inconclusive'],
+
+  '--color-data-1': semanticColorsLight['data-1'],
+  '--color-data-2': semanticColorsLight['data-2'],
+  '--color-data-3': semanticColorsLight['data-3'],
+  '--color-data-4': semanticColorsLight['data-4'],
+  '--color-data-5': semanticColorsLight['data-5'],
+  '--color-data-6': semanticColorsLight['data-6'],
+  '--color-data-7': semanticColorsLight['data-7'],
+  '--color-data-8': semanticColorsLight['data-8'],
+  '--color-data-9': semanticColorsLight['data-9'],
+  '--color-data-10': semanticColorsLight['data-10'],
+
+  '--color-text-link-hover': semanticColorsLight['text-link-hover'],
+
+  '--color-surface-overlay': semanticColorsLight['surface-overlay'],
+  '--color-surface-input': semanticColorsLight['surface-input'],
+
+  '--color-border-input': semanticColorsLight['border-input'],
+  '--color-border-input-hover': semanticColorsLight['border-input-hover'],
+  '--color-border-input-focus': semanticColorsLight['border-input-focus'],
+  '--color-border-input-error': semanticColorsLight['border-input-error'],
+
+  '--color-interactive-disabled-text': semanticColorsLight['interactive-disabled-text'],
+
+  '--color-avatar-background': semanticColorsLight['avatar-background'],
+  '--color-avatar-text': semanticColorsLight['avatar-text'],
+
+  ...themeIndependentCSSVars,
 } as const
 
 // CSS custom properties for dark mode (default)
@@ -109,6 +199,67 @@ export const darkThemeCSSVars = {
   '--color-interactive-disabled': semanticColorsDark['interactive-disabled'],
 
   '--color-divider': semanticColorsDark['divider'],
+
+  '--color-brand-primary-hover': semanticColorsDark['brand-primary-hover'],
+  '--color-brand-primary-active': semanticColorsDark['brand-primary-active'],
+  '--color-brand-secondary-hover': semanticColorsDark['brand-secondary-hover'],
+  '--color-brand-secondary-active': semanticColorsDark['brand-secondary-active'],
+
+  '--color-status-success-light': semanticColorsDark['status-success-light'],
+  '--color-status-success-dark': semanticColorsDark['status-success-dark'],
+  '--color-status-error-light': semanticColorsDark['status-error-light'],
+  '--color-status-error-dark': semanticColorsDark['status-error-dark'],
+  '--color-status-warning-light': semanticColorsDark['status-warning-light'],
+  '--color-status-warning-dark': semanticColorsDark['status-warning-dark'],
+  '--color-status-info-light': semanticColorsDark['status-info-light'],
+  '--color-status-info-dark': semanticColorsDark['status-info-dark'],
+
+  '--color-on-status-success': semanticColorsDark['on-status-success'],
+  '--color-on-status-error': semanticColorsDark['on-status-error'],
+  '--color-on-status-warning': semanticColorsDark['on-status-warning'],
+  '--color-on-status-info': semanticColorsDark['on-status-info'],
+
+  '--color-result-improve': semanticColorsDark['result-improve'],
+  '--color-result-improve-light': semanticColorsDark['result-improve-light'],
+  '--color-result-improve-dark': semanticColorsDark['result-improve-dark'],
+  '--color-result-degrade': semanticColorsDark['result-degrade'],
+  '--color-result-degrade-light': semanticColorsDark['result-degrade-light'],
+  '--color-result-degrade-dark': semanticColorsDark['result-degrade-dark'],
+  '--color-result-inconclusive': semanticColorsDark['result-inconclusive'],
+  '--color-result-inconclusive-light': semanticColorsDark['result-inconclusive-light'],
+  '--color-result-neutral': semanticColorsDark['result-neutral'],
+
+  '--color-on-result-improve': semanticColorsDark['on-result-improve'],
+  '--color-on-result-degrade': semanticColorsDark['on-result-degrade'],
+  '--color-on-result-inconclusive': semanticColorsDark['on-result-inconclusive'],
+
+  '--color-data-1': semanticColorsDark['data-1'],
+  '--color-data-2': semanticColorsDark['data-2'],
+  '--color-data-3': semanticColorsDark['data-3'],
+  '--color-data-4': semanticColorsDark['data-4'],
+  '--color-data-5': semanticColorsDark['data-5'],
+  '--color-data-6': semanticColorsDark['data-6'],
+  '--color-data-7': semanticColorsDark['data-7'],
+  '--color-data-8': semanticColorsDark['data-8'],
+  '--color-data-9': semanticColorsDark['data-9'],
+  '--color-data-10': semanticColorsDark['data-10'],
+
+  '--color-text-link-hover': semanticColorsDark['text-link-hover'],
+
+  '--color-surface-overlay': semanticColorsDark['surface-overlay'],
+  '--color-surface-input': semanticColorsDark['surface-input'],
+
+  '--color-border-input': semanticColorsDark['border-input'],
+  '--color-border-input-hover': semanticColorsDark['border-input-hover'],
+  '--color-border-input-focus': semanticColorsDark['border-input-focus'],
+  '--color-border-input-error': semanticColorsDark['border-input-error'],
+
+  '--color-interactive-disabled-text': semanticColorsDark['interactive-disabled-text'],
+
+  '--color-avatar-background': semanticColorsDark['avatar-background'],
+  '--color-avatar-text': semanticColorsDark['avatar-text'],
+
+  ...themeIndependentCSSVars,
 } as const
 
 // Helper to get CSS vars for a theme mode

package/src/theme/index.ts

@@ -4,6 +4,8 @@ export * from './config'
 export * from './shadows'
 export * from './elevation'
 export * from './manifest'
+export { ThemeProvider, type ThemeProviderProps, type ThemeProviderMode } from './ThemeProvider'
+export { resolveColor } from './resolve-color'
 
 // Re-export commonly used items
 export { getSemanticColors, type ThemeMode } from './tokens/semantic'