@titan-design/react-ui 0.12.0 → 0.13.0

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

@@ -1,7 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import type { ComponentType } from 'react'
 import { View, Pressable, type ViewProps } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { resolveColor } from '../../../theme/resolve-color'
 import {
   ScaleIcon,
   AlertTriangleIcon,
@@ -12,10 +12,6 @@ import {
   type IconProps,
 } from '../../icons'
 
-// Literal-hex status pins (getSemanticColors, not resolveColor) — `resolveColor()` yields a
-// `var(...)` under the RNW vitest alias, which breaks `toHaveStyle` in tests.
-const t = getSemanticColors('dark')
-
 /**
  * The LOCKED 6-kind indicator taxonomy (TD-03.51). One precedence-ranked slot is
  * ever shown per exercise, resolved by {@link resolveIndicator}. Glyph = the
@@ -31,21 +27,23 @@ export type ExerciseIndicatorKind =
   | 'pr'
   | 'info'
 
+type StatusToken = 'status-error' | 'status-warning' | 'status-success' | 'status-info'
+
 interface IndicatorConfig {
   Icon: ComponentType<IconProps>
-  /** Tier color — a titan status semantic token (literal hex on `t`). */
-  color: string
+  /** Tier token — resolved per theme by {@link resolveColor} at render. */
+  token: StatusToken
   /** Accessible description (also the intended tooltip subject). */
   label: string
 }
 
 const INDICATOR_CONFIG: Record<ExerciseIndicatorKind, IndicatorConfig> = {
-  imbalance: { Icon: ScaleIcon, color: t['status-error'], label: 'Left/right imbalance' },
-  overshoot: { Icon: AlertTriangleIcon, color: t['status-error'], label: 'Load overshoot' },
-  'velocity-loss': { Icon: TrendingDownIcon, color: t['status-warning'], label: 'Velocity loss' },
-  'missed-reps': { Icon: CircleSlashIcon, color: t['status-warning'], label: 'Missed reps' },
-  pr: { Icon: AwardIcon, color: t['status-success'], label: 'Personal record' },
-  info: { Icon: InfoIcon, color: t['status-info'], label: 'More info' },
+  imbalance: { Icon: ScaleIcon, token: 'status-error', label: 'Left/right imbalance' },
+  overshoot: { Icon: AlertTriangleIcon, token: 'status-error', label: 'Load overshoot' },
+  'velocity-loss': { Icon: TrendingDownIcon, token: 'status-warning', label: 'Velocity loss' },
+  'missed-reps': { Icon: CircleSlashIcon, token: 'status-warning', label: 'Missed reps' },
+  pr: { Icon: AwardIcon, token: 'status-success', label: 'Personal record' },
+  info: { Icon: InfoIcon, token: 'status-info', label: 'More info' },
 }
 
 /**
@@ -68,7 +66,7 @@ export const INDICATOR_PRECEDENCE: readonly ExerciseIndicatorKind[] = [
  * duplicates in `candidates` don't matter — {@link INDICATOR_PRECEDENCE} decides.
  */
 export function resolveIndicator(
-  candidates: ExerciseIndicatorKind[],
+  candidates: ExerciseIndicatorKind[]
 ): ExerciseIndicatorKind | undefined {
   return INDICATOR_PRECEDENCE.find((kind) => candidates.includes(kind))
 }
@@ -86,7 +84,8 @@ export interface ExerciseIndicatorProps extends Omit<ViewProps, 'children'> {
  * by the consumer.
  */
 export function ExerciseIndicator({ kind, onPress, className, ...props }: ExerciseIndicatorProps) {
-  const { Icon, color, label } = INDICATOR_CONFIG[kind]
+  const { Icon, token, label } = INDICATOR_CONFIG[kind]
+  const color = resolveColor(token)
 
   const chip = (
     <View

package/src/components/custom/Workout/FatigueMeter.stories.tsx

@@ -1,10 +1,10 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { FatigueMeter } from './FatigueMeter'
+import { Surface } from '../../ui/surface'
 
 const meta: Meta<typeof FatigueMeter> = {
-  title: 'Workout/DataViz/FatigueMeter',
+  title: 'Custom/Workout/DataViz/FatigueMeter',
   component: FatigueMeter,
   tags: ['autodocs'],
   argTypes: {
@@ -16,16 +16,16 @@ const meta: Meta<typeof FatigueMeter> = {
         component:
           '**Component.** The winning fatigue-visual lineage: a sliding needle over a fixed ' +
           'green→gold→orange→red velocity-loss gradient with VL10/VL20/VL30/stop markers. ' +
-          'Composes the [ZoneTrack](?path=/docs/workout-dataviz-zonetrack--docs) primitive. ' +
+          'Composes the [ZoneTrack](?path=/docs/custom-workout-dataviz-zonetrack--docs) primitive. ' +
           'Prop-driven: `value` plus overridable `thresholds` / `max` / `zoneColors` / `labels`.',
       },
     },
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 360, padding: 20, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ width: 360, padding: 20 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

package/src/components/custom/Workout/InputBar.stories.tsx

@@ -1,10 +1,9 @@
-import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { InputBar } from './InputBar'
+import { Surface } from '../../ui/surface'
 
 const meta: Meta<typeof InputBar> = {
-  title: 'Workout/InputBar',
+  title: 'Custom/Workout/InputBar',
   component: InputBar,
   tags: ['autodocs'],
   argTypes: {
@@ -24,9 +23,9 @@ const meta: Meta<typeof InputBar> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 400, backgroundColor: '#111111' }}>
+      <Surface level="base" style={{ width: 400 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { IntensityBar } from './IntensityBar'
 
 const meta: Meta<typeof IntensityBar> = {
-  title: 'Workout/DataViz/IntensityBar',
+  title: 'Custom/Workout/DataViz/IntensityBar',
   component: IntensityBar,
   tags: ['autodocs'],
   argTypes: {

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

@@ -2,8 +2,12 @@ import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { IntensityBar } from './IntensityBar'
+import { getGlowShadow } from '../../../theme/elevation'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const AT_TARGET_GLOW = '0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)'
+const AT_TARGET_GLOW = (
+  getGlowShadow(getSemanticColors('dark')['status-info'], 'subtle') as { boxShadow: string }
+).boxShadow
 
 describe('IntensityBar', () => {
   it('renders the bar', () => {

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

@@ -9,6 +9,7 @@ import {
   type DimensionValue,
 } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { getGlowShadow } from '../../../theme/elevation'
 import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 
 const t = getSemanticColors('dark')
@@ -34,7 +35,8 @@ export interface IntensityBarProps extends ViewProps {
 const TRACK_BG = '#333333'
 const LABEL_COLOR = '#6B7280'
 const TARGET_LINE_COLOR = 'rgba(33, 150, 243, 0.5)'
-const AT_TARGET_GLOW = '0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)'
+/** At-target is EMPHASIS, not depth: an info-toned glow through the shared builder. */
+const AT_TARGET_GLOW = getGlowShadow(t['status-info'], 'subtle')
 
 // Zone colors graded by TRUE percentage (level * 100).
 const ZONE = {
@@ -178,7 +180,7 @@ export function IntensityBar({
             borderRadius: 3,
             backgroundColor: zone.color,
             zIndex: 2,
-            ...(atTarget ? { boxShadow: AT_TARGET_GLOW } : null),
+            ...(atTarget ? AT_TARGET_GLOW : null),
           }}
           testID="intensity-fill"
         />

package/src/components/custom/Workout/LiveAuraFrame.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { LiveAuraFrame } from './LiveAuraFrame'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { Surface } from '../../ui/surface'
 
 const t = getSemanticColors('dark')
 
@@ -74,7 +75,7 @@ function LiveHero({ caption }: { caption: string }) {
 const PANEL = { width: 360, height: 620, borderRadius: 24, overflow: 'hidden' as const }
 
 const meta: Meta<typeof LiveAuraFrame> = {
-  title: 'Workout/LiveAuraFrame',
+  title: 'Custom/Workout/LiveAuraFrame',
   component: LiveAuraFrame,
   tags: ['autodocs'],
   parameters: {
@@ -100,17 +101,17 @@ const meta: Meta<typeof LiveAuraFrame> = {
   },
   decorators: [
     (Story) => (
-      <View
+      <Surface
+        level="base"
         style={{
           minHeight: 700,
-          backgroundColor: '#070707',
           alignItems: 'center',
           justifyContent: 'center',
           padding: 32,
         }}
       >
         <Story />
-      </View>
+      </Surface>
     ),
   ],
   render: (args) => (

package/src/components/custom/Workout/MesoCard.stories.tsx

@@ -48,8 +48,11 @@ const weeks: WeekRowProps[] = [
 ]
 
 const meta: Meta<typeof MesoCard> = {
-  title: 'Workout/MesoCard',
+  title: 'Custom/Workout/MesoCard',
   component: MesoCard,
+  parameters: {
+    docs: { description: { component: 'Composes **Card** · **Badge** · **WeekRow**.' } },
+  },
   tags: ['autodocs'],
   argTypes: {
     goal: {

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

@@ -39,15 +39,9 @@ describe('MesoCard', () => {
     it('renders name, goal badge, and sub-header', () => {
       render(<MesoCard {...baseProps} />)
       expect(screen.getByTestId('meso-card')).toBeInTheDocument()
-      expect(screen.getByTestId('meso-card-name')).toHaveTextContent(
-        'Accumulation',
-      )
-      expect(screen.getByTestId('meso-card-goal-badge')).toHaveTextContent(
-        'Hypertrophy',
-      )
-      expect(screen.getByTestId('meso-card-subheader')).toHaveTextContent(
-        'Upper/Lower · Weeks 1-4',
-      )
+      expect(screen.getByTestId('meso-card-name')).toHaveTextContent('Accumulation')
+      expect(screen.getByTestId('meso-card-goal-badge')).toHaveTextContent('Hypertrophy')
+      expect(screen.getByTestId('meso-card-subheader')).toHaveTextContent('Upper/Lower · Weeks 1-4')
     })
 
     it('renders the 3px gradient top accent', () => {
@@ -80,10 +74,7 @@ describe('MesoCard', () => {
     it('reflects expanded state via aria-expanded', () => {
       const onToggle = vi.fn()
       render(<MesoCard {...baseProps} onToggle={onToggle} expanded />)
-      expect(screen.getByTestId('meso-card-toggle')).toHaveAttribute(
-        'aria-expanded',
-        'true',
-      )
+      expect(screen.getByTestId('meso-card-toggle')).toHaveAttribute('aria-expanded', 'true')
     })
 
     it('renders a static container when not expandable', () => {
@@ -108,7 +99,7 @@ describe('MesoCard', () => {
             { group: 'back', percentage: 50 },
             { group: 'legs', percentage: 30 },
           ]}
-        />,
+        />
       )
       expect(screen.getByTestId('meso-card-heatmap')).toBeInTheDocument()
       expect(screen.getAllByTestId('meso-card-heatmap-cell')).toHaveLength(3)
@@ -132,9 +123,7 @@ describe('MesoCard', () => {
   describe('accessibility', () => {
     it('has an accessible label describing the meso', () => {
       render(<MesoCard {...baseProps} />)
-      expect(
-        screen.getByLabelText('Accumulation, Hypertrophy, Weeks 1-4'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Accumulation, Hypertrophy, Weeks 1-4')).toBeInTheDocument()
     })
 
     it('exposes the label on the button when expandable', () => {
@@ -161,7 +150,7 @@ describe('MesoCard', () => {
             { group: 'chest', percentage: 80 },
             { group: 'back', percentage: 50 },
           ]}
-        />,
+        />
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()

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

@@ -9,6 +9,7 @@ import {
   MESO_ACCENT_GRADIENT_DARK,
   MESO_ACCENT_GRADIENT_LIGHT,
 } from '../../../theme/extracted-colors-dataviz'
+import { getGlowShadow } from '../../../theme/elevation'
 
 const HAIRLINE_DEFAULT = getSemanticColors('dark')['hairline-default']
 
@@ -119,7 +120,10 @@ export function MesoCard({
   })
 
   const header = (
-    <View style={{ paddingHorizontal: 14, paddingTop: 12, paddingBottom: 10 }} testID="meso-card-body">
+    <View
+      style={{ paddingHorizontal: 14, paddingTop: 12, paddingBottom: 10 }}
+      testID="meso-card-body"
+    >
       <View className="flex-row items-center" style={{ gap: 8 }} testID="meso-card-header">
         <Text
           className="text-text-primary"
@@ -174,7 +178,10 @@ export function MesoCard({
   )
 
   return (
-    <Animated.View style={highlighted ? { transform: [{ scale: 1.0 }] } : undefined} testID="meso-card-wrapper">
+    <Animated.View
+      style={highlighted ? { transform: [{ scale: 1.0 }] } : undefined}
+      testID="meso-card-wrapper"
+    >
       <Card
         variant="outline"
         elevation={2}
@@ -182,9 +189,8 @@ export function MesoCard({
         className={className}
         style={[
           { borderColor: borderColor as unknown as string },
-          highlighted
-            ? { boxShadow: '0 0 12px 2px rgba(255,121,0,0.25)' }
-            : undefined,
+          // Highlight is emphasis, not depth: a brand glow through the shared builder.
+          highlighted ? getGlowShadow(BRAND_PRIMARY, 'subtle') : undefined,
         ]}
         testID="meso-card"
         {...props}
@@ -211,10 +217,7 @@ export function MesoCard({
             {header}
           </Pressable>
         ) : (
-          <View
-            accessibilityLabel={`${name}, ${goal}, ${weekRange}`}
-            testID="meso-card-static"
-          >
+          <View accessibilityLabel={`${name}, ${goal}, ${weekRange}`} testID="meso-card-static">
             {header}
           </View>
         )}

package/src/components/custom/Workout/MesoProgressBar.stories.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native'
 import { MesoProgressBar, type Meso } from './MesoProgressBar'
 
 const meta: Meta<typeof MesoProgressBar> = {
-  title: 'Workout/MesoProgressBar',
+  title: 'Custom/Workout/MesoProgressBar',
   component: MesoProgressBar,
   tags: ['autodocs'],
   argTypes: {

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

@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { MesoProgressBar, type Meso } from './MesoProgressBar'
+import { resolveColor } from '../../../theme/resolve-color'
 
 const mesos: Meso[] = [
   { id: 'm1', name: 'Accumulation', weekCount: 4, status: 'completed' },
@@ -37,26 +38,34 @@ describe('MesoProgressBar', () => {
   })
 
   describe('status colors', () => {
-    it('applies completed color at 0.3 alpha', () => {
+    it('tracks the completed segment on the success wash', () => {
       render(<MesoProgressBar mesos={mesos} activeMesoId={null} onMesoPress={vi.fn()} />)
       expect(screen.getByTestId('meso-segment-inner-m1')).toHaveStyle({
-        backgroundColor: 'rgba(46,213,115,0.3)',
+        backgroundColor: resolveColor('status-success-muted'),
       })
     })
 
-    it('applies current color at 0.5 alpha', () => {
+    it('tracks the current segment on the brand wash', () => {
       render(<MesoProgressBar mesos={mesos} activeMesoId={null} onMesoPress={vi.fn()} />)
       expect(screen.getByTestId('meso-segment-inner-m2')).toHaveStyle({
-        backgroundColor: 'rgba(255,121,0,0.5)',
+        backgroundColor: resolveColor('brand-primary-strong'),
       })
     })
 
-    it('applies upcoming color', () => {
+    it('tracks the upcoming segment on the neutral hairline wash', () => {
       render(<MesoProgressBar mesos={mesos} activeMesoId={null} onMesoPress={vi.fn()} />)
       expect(screen.getByTestId('meso-segment-inner-m3')).toHaveStyle({
-        backgroundColor: 'rgba(255,255,255,0.06)',
+        backgroundColor: resolveColor('hairline-subtle'),
       })
     })
+
+    it('gives each status a distinct track, so the three never collapse', () => {
+      render(<MesoProgressBar mesos={mesos} activeMesoId={null} onMesoPress={vi.fn()} />)
+      const tracks = ['m1', 'm2', 'm3'].map(
+        (id) => screen.getByTestId(`meso-segment-inner-${id}`).style.backgroundColor
+      )
+      expect(new Set(tracks).size).toBe(3)
+    })
   })
 
   describe('current week progress fill', () => {
@@ -74,9 +83,7 @@ describe('MesoProgressBar', () => {
     })
 
     it('does not render a fill when current meso has no currentWeek', () => {
-      const noProgress: Meso[] = [
-        { id: 'c', name: 'Current', weekCount: 3, status: 'current' },
-      ]
+      const noProgress: Meso[] = [{ id: 'c', name: 'Current', weekCount: 3, status: 'current' }]
       render(<MesoProgressBar mesos={noProgress} activeMesoId={null} onMesoPress={vi.fn()} />)
       expect(screen.queryByTestId('meso-segment-fill-c')).not.toBeInTheDocument()
     })
@@ -95,7 +102,7 @@ describe('MesoProgressBar', () => {
       render(<MesoProgressBar mesos={mesos} activeMesoId="m2" onMesoPress={vi.fn()} />)
       const style = screen.getByTestId('meso-segment-inner-m2').getAttribute('style') ?? ''
       expect(style).toContain('border-top-width: 2px')
-      expect(style).toContain('border-top-color: rgb(255, 121, 0)')
+      expect(style).toContain(`border-top-color: ${resolveColor('brand-primary')}`)
     })
 
     it('does not apply a border to inactive segments', () => {
@@ -132,7 +139,7 @@ describe('MesoProgressBar', () => {
 
     it('has no accessibility violations', async () => {
       const { container } = render(
-        <MesoProgressBar mesos={mesos} activeMesoId="m2" onMesoPress={vi.fn()} />,
+        <MesoProgressBar mesos={mesos} activeMesoId="m2" onMesoPress={vi.fn()} />
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()

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

@@ -1,9 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useState } from 'react'
 import { View, Pressable, Animated, type ViewProps } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-
-const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
+import { resolveColor } from '../../../theme/resolve-color'
 
 export type MesoStatus = 'completed' | 'current' | 'upcoming'
 
@@ -26,10 +24,15 @@ export interface MesoProgressBarProps extends ViewProps {
   className?: string
 }
 
-const segmentBgColors: Record<MesoStatus, string> = {
-  completed: 'rgba(46,213,115,0.3)',
-  current: 'rgba(255,121,0,0.5)',
-  upcoming: 'rgba(255,255,255,0.06)',
+// The segment track is a status wash, and the three states must stay a legible
+// ramp rather than one weight in three hues.
+const segmentTrackToken: Record<
+  MesoStatus,
+  'status-success-muted' | 'brand-primary-strong' | 'hairline-subtle'
+> = {
+  completed: 'status-success-muted',
+  current: 'brand-primary-strong',
+  upcoming: 'hairline-subtle',
 }
 
 function clampProgress(currentWeek: number | undefined, weekCount: number): number {
@@ -46,6 +49,7 @@ interface SegmentProps {
 
 function MesoSegment({ meso, isActive, onPress }: SegmentProps) {
   const [pressScale] = useState(() => new Animated.Value(1))
+  const brandPrimary = resolveColor('brand-primary')
 
   const handlePressIn = () => {
     Animated.timing(pressScale, {
@@ -63,9 +67,7 @@ function MesoSegment({ meso, isActive, onPress }: SegmentProps) {
     }).start()
   }
 
-  const progress = meso.status === 'current'
-    ? clampProgress(meso.currentWeek, meso.weekCount)
-    : 0
+  const progress = meso.status === 'current' ? clampProgress(meso.currentWeek, meso.weekCount) : 0
 
   // weekCount drives the segment's flex width; guard 0 / negative so flex stays
   // a valid positive value and the segment never collapses out of the layout.
@@ -87,13 +89,13 @@ function MesoSegment({ meso, isActive, onPress }: SegmentProps) {
             height: 8,
             borderRadius: 4,
             overflow: 'hidden',
-            backgroundColor: segmentBgColors[meso.status],
+            backgroundColor: resolveColor(segmentTrackToken[meso.status]),
             transform: [{ scale: pressScale }],
           },
           isActive
             ? {
                 borderWidth: 2,
-                borderColor: BRAND_PRIMARY,
+                borderColor: brandPrimary,
                 transform: [{ scale: 1.02 }, { scale: pressScale }],
               }
             : undefined,
@@ -108,7 +110,7 @@ function MesoSegment({ meso, isActive, onPress }: SegmentProps) {
               top: 0,
               bottom: 0,
               width: `${progress * 100}%`,
-              backgroundColor: BRAND_PRIMARY,
+              backgroundColor: brandPrimary,
             }}
             testID={`meso-segment-fill-${meso.id}`}
           />

package/src/components/custom/Workout/MesoStatusCard.stories.tsx

@@ -3,8 +3,9 @@ import { View } from 'react-native'
 import { MesoStatusCard } from './MesoStatusCard'
 
 const meta: Meta<typeof MesoStatusCard> = {
-  title: 'Workout/MesoStatusCard',
+  title: 'Custom/Workout/MesoStatusCard',
   component: MesoStatusCard,
+  parameters: { docs: { description: { component: 'Composes **Card** · **StatusDot**.' } } },
   tags: ['autodocs'],
   argTypes: {
     mesoName: {