@titan-design/react-ui 0.2.7 → 0.4.0

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

@@ -0,0 +1,171 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import {
+  ActiveWorkoutPage,
+  countCompletedSets,
+  deriveWorkoutProgress,
+  findActiveExercise,
+  statusToCardState,
+  groupExercises,
+  type ActiveWorkoutExercise,
+  type ActiveWorkoutPageProps,
+} from './ActiveWorkoutPage'
+
+const exercises: ActiveWorkoutExercise[] = [
+  {
+    id: 'warmup',
+    name: 'Band Pull-Apart',
+    status: 'completed',
+    unit: 'lbs',
+    totalPlannedSets: 2,
+    summary: { sets: 2, reps: 15, weight: 0, unit: 'lbs' },
+    setVelocities: [[0.9], [0.88]],
+  },
+  {
+    id: 'bench',
+    name: 'Barbell Bench Press',
+    status: 'active',
+    unit: 'lbs',
+    totalPlannedSets: 4,
+    setVelocities: [[0.72], [0.68]],
+    sets: [
+      { mode: 'completed', setNumber: 1, reps: 8, weight: 195, rpe: 8, unit: 'lbs' },
+      { mode: 'active', setNumber: 3, reps: null, weight: null, unit: 'lbs', isNextSet: true },
+    ],
+  },
+  {
+    id: 'incline',
+    name: 'Incline DB Press',
+    status: 'upcoming',
+    unit: 'lbs',
+    totalPlannedSets: 3,
+    prescription: '3 × 10',
+    supersetId: 'ss1',
+  },
+  {
+    id: 'lateral',
+    name: 'Cable Lateral Raise',
+    status: 'upcoming',
+    unit: 'lbs',
+    totalPlannedSets: 3,
+    prescription: '3 × 15',
+    supersetId: 'ss1',
+  },
+]
+
+const baseProps: ActiveWorkoutPageProps = {
+  title: 'Push Day A',
+  subtitle: 'Week 6 of 8',
+  exercises,
+  supersets: [{ id: 'ss1', label: 'SS1', color: '#22D3EE' }],
+  input: { reps: '8', weight: '195' },
+  rest: { totalSeconds: 120, elapsedMs: 30_000, nextSetInfo: 'Set 3' },
+}
+
+describe('countCompletedSets', () => {
+  it('uses logged velocities when present', () => {
+    expect(countCompletedSets(exercises[1])).toBe(2)
+  })
+
+  it('falls back to the full plan for a completed exercise without velocities', () => {
+    expect(countCompletedSets({ ...exercises[0], setVelocities: undefined })).toBe(2)
+  })
+
+  it('counts zero for an upcoming exercise', () => {
+    expect(countCompletedSets(exercises[2])).toBe(0)
+  })
+})
+
+describe('deriveWorkoutProgress', () => {
+  it('rolls up completed exercises, sets, and the fraction', () => {
+    const progress = deriveWorkoutProgress(exercises)
+    expect(progress.completedExercises).toBe(1)
+    expect(progress.totalExercises).toBe(4)
+    expect(progress.completedSets).toBe(4)
+    expect(progress.totalSets).toBe(12)
+    expect(progress.fraction).toBeCloseTo(1 / 3)
+  })
+
+  it('is zeroed for an empty workout', () => {
+    expect(deriveWorkoutProgress([])).toEqual({
+      completedExercises: 0,
+      totalExercises: 0,
+      completedSets: 0,
+      totalSets: 0,
+      fraction: 0,
+    })
+  })
+})
+
+describe('findActiveExercise', () => {
+  it('returns the active exercise', () => {
+    expect(findActiveExercise(exercises)?.id).toBe('bench')
+  })
+
+  it('returns null when none are active', () => {
+    expect(findActiveExercise([exercises[0]])).toBeNull()
+  })
+})
+
+describe('statusToCardState', () => {
+  it('keeps upcoming exercises upcoming regardless of focus', () => {
+    expect(statusToCardState('upcoming', true)).toBe('upcoming')
+    expect(statusToCardState('upcoming', false)).toBe('upcoming')
+  })
+
+  it('expands only the focused active/completed exercise', () => {
+    expect(statusToCardState('active', true)).toBe('expanded')
+    expect(statusToCardState('active', false)).toBe('collapsed')
+    expect(statusToCardState('completed', true)).toBe('expanded')
+  })
+})
+
+describe('groupExercises', () => {
+  it('folds consecutive same-superset exercises into one group', () => {
+    const groups = groupExercises(exercises, baseProps.supersets ?? [])
+    expect(groups).toHaveLength(3)
+    expect(groups[0]).toEqual({ type: 'single', exercise: exercises[0] })
+    expect(groups[2].type).toBe('superset')
+    if (groups[2].type === 'superset') {
+      expect(groups[2].exercises).toHaveLength(2)
+      expect(groups[2].superset.label).toBe('SS1')
+    }
+  })
+})
+
+describe('ActiveWorkoutPage', () => {
+  it('renders the header, progress, and the focused active exercise expanded', () => {
+    render(<ActiveWorkoutPage {...baseProps} />)
+    expect(screen.getByTestId('active-workout-page')).toBeInTheDocument()
+    expect(screen.getByTestId('active-workout-page-title')).toHaveTextContent('Push Day A')
+    expect(screen.getByTestId('active-workout-page-progress-count')).toHaveTextContent('1/4')
+    expect(screen.getByTestId('exercise-card-sets')).toBeInTheDocument()
+    expect(screen.getByTestId('superset-wrapper')).toBeInTheDocument()
+  })
+
+  it('shows the input bar and hides it once a set is recorded (starts rest)', () => {
+    render(<ActiveWorkoutPage {...baseProps} />)
+    expect(screen.getByTestId('input-bar')).toBeInTheDocument()
+    expect(screen.getByTestId('input-bar-set-info')).toHaveTextContent('Set 3/4')
+
+    fireEvent.click(screen.getByTestId('input-bar-record'))
+    expect(screen.queryByTestId('input-bar')).not.toBeInTheDocument()
+    expect(screen.getByTestId('rest-timer')).toBeInTheDocument()
+  })
+
+  it('zoom-toggles focus: collapsing the active card hides its sets', () => {
+    render(<ActiveWorkoutPage {...baseProps} />)
+    expect(screen.getByTestId('exercise-card-sets')).toBeInTheDocument()
+
+    fireEvent.click(screen.getAllByTestId('exercise-card-header')[0])
+    expect(screen.queryByTestId('exercise-card-sets')).not.toBeInTheDocument()
+  })
+
+  it('skipping rest restores the input bar', () => {
+    render(<ActiveWorkoutPage {...baseProps} initialResting />)
+    expect(screen.getByTestId('rest-timer')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByTestId('rest-timer-skip'))
+    expect(screen.getByTestId('input-bar')).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,442 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useMemo, useState } from 'react'
+import { View, Text, type ViewProps } from 'react-native'
+import { ExerciseCard, type ExerciseCardProps, type ExerciseCardState } from './ExerciseCard'
+import { InputBar } from './InputBar'
+import { RestTimer } from './RestTimer'
+import { SupersetWrapper } from './SupersetWrapper'
+import { type SetRowProps } from './SetRow'
+import { resolveColor } from '../../../theme/resolve-color'
+
+const BRAND_PRIMARY = '#FF7900'
+
+/** Where an exercise sits in the during-workout flow. */
+export type ActiveExerciseStatus = 'completed' | 'active' | 'upcoming'
+
+/**
+ * One exercise in the running workout. Projected onto an `ExerciseCard`, whose
+ * visual state is driven by `status` and the page's zoom focus: completed and
+ * active exercises collapse/expand, upcoming ones stay dimmed.
+ */
+export interface ActiveWorkoutExercise {
+  /** Stable id for zoom-focus selection. */
+  id: string
+  /** Exercise name, e.g. "Barbell Bench Press". */
+  name: string
+  /** Position in the workout flow. */
+  status: ActiveExerciseStatus
+  /** Unit used for this exercise's loads. */
+  unit: 'lbs' | 'kg'
+  /** Total sets prescribed for this exercise. */
+  totalPlannedSets: number
+  /** Collapsed summary (sets × reps @ weight) for a completed exercise. */
+  summary?: ExerciseCardProps['summary']
+  /** Estimated one-rep max badge. */
+  e1rm?: ExerciseCardProps['e1rm']
+  /** Flags a personal-record exercise. */
+  isPR?: boolean
+  /** Prescribed tempo, revealed when expanded. */
+  tempo?: ExerciseCardProps['tempo']
+  /** Per-rep velocities for each logged set (drives collapsed strips + set count). */
+  setVelocities?: number[][]
+  /** Per-set breakdown revealed when expanded. */
+  sets?: SetRowProps[]
+  /** One-line prescription for an upcoming exercise. */
+  prescription?: string
+  /** Previous-best hint for an upcoming exercise. */
+  previousBest?: string
+  /** Groups consecutive exercises under a shared `SupersetWrapper`. */
+  supersetId?: string
+}
+
+/** A superset grouping consecutive exercises that share its id. */
+export interface ActiveWorkoutSuperset {
+  /** Matches `ActiveWorkoutExercise.supersetId`. */
+  id: string
+  /** Corner badge label, e.g. "SS1". */
+  label: string
+  /** Accent color for the wrapper rail + label. */
+  color?: string
+}
+
+/** Live-set inputs shown in the bottom `InputBar`. */
+export interface ActiveWorkoutInput {
+  /** Current reps field value. */
+  reps: string
+  /** Current weight field value. */
+  weight: string
+}
+
+/** Rest-timer inputs shown in the bottom `RestTimer`. */
+export interface ActiveWorkoutRest {
+  /** Prescribed rest length, seconds. */
+  totalSeconds: number
+  /** Elapsed rest, milliseconds. */
+  elapsedMs: number
+  /** Next-set hint, e.g. "Set 3 · 8 × 195 lbs". */
+  nextSetInfo?: string
+}
+
+/** Derived, page-level roll-up of workout progress. */
+export interface WorkoutProgress {
+  /** Number of exercises marked completed. */
+  completedExercises: number
+  /** Total exercises in the workout. */
+  totalExercises: number
+  /** Sets logged so far across all exercises. */
+  completedSets: number
+  /** Total sets prescribed across all exercises. */
+  totalSets: number
+  /** Fraction of prescribed sets logged, 0-1. */
+  fraction: number
+}
+
+/** An ordered render group: a lone exercise or a superset of exercises. */
+export type WorkoutGroup =
+  | { type: 'single'; exercise: ActiveWorkoutExercise }
+  | { type: 'superset'; superset: ActiveWorkoutSuperset; exercises: ActiveWorkoutExercise[] }
+
+export interface ActiveWorkoutPageProps extends ViewProps {
+  /** Workout name shown in the header. */
+  title?: string
+  /** Context line under the title, e.g. "Push Day A · Week 6". */
+  subtitle?: string
+  /** Exercises in flow order. */
+  exercises: ActiveWorkoutExercise[]
+  /** Superset groupings referenced by `exercise.supersetId`. */
+  supersets?: ActiveWorkoutSuperset[]
+  /** Seed reps/weight for the live `InputBar`. */
+  input?: ActiveWorkoutInput
+  /** Rest-timer state; when resting, the timer replaces the input bar. */
+  rest?: ActiveWorkoutRest
+  /** Start the page in the resting state (timer showing). */
+  initialResting?: boolean
+  className?: string
+}
+
+/** Count the sets logged for an exercise (pure). */
+export function countCompletedSets(exercise: ActiveWorkoutExercise): number {
+  if (exercise.setVelocities != null) return exercise.setVelocities.length
+  if (exercise.status === 'completed') return exercise.totalPlannedSets
+  return 0
+}
+
+/** Roll up the exercises into the header progress readout (pure, testable). */
+export function deriveWorkoutProgress(exercises: ActiveWorkoutExercise[]): WorkoutProgress {
+  let completedExercises = 0
+  let completedSets = 0
+  let totalSets = 0
+  for (const exercise of exercises) {
+    if (exercise.status === 'completed') completedExercises += 1
+    completedSets += countCompletedSets(exercise)
+    totalSets += exercise.totalPlannedSets
+  }
+  return {
+    completedExercises,
+    totalExercises: exercises.length,
+    completedSets,
+    totalSets,
+    fraction: totalSets === 0 ? 0 : completedSets / totalSets,
+  }
+}
+
+/** The active exercise anchors the bottom bar; find it, or null (pure). */
+export function findActiveExercise(
+  exercises: ActiveWorkoutExercise[]
+): ActiveWorkoutExercise | null {
+  return exercises.find((exercise) => exercise.status === 'active') ?? null
+}
+
+/** Map an exercise's status + focus onto an `ExerciseCard` visual state (pure). */
+export function statusToCardState(
+  status: ActiveExerciseStatus,
+  focused: boolean
+): ExerciseCardState {
+  if (status === 'upcoming') return 'upcoming'
+  return focused ? 'expanded' : 'collapsed'
+}
+
+/** Project an exercise onto ExerciseCard props, wiring zoom focus (pure). */
+export function toActiveCardProps(
+  exercise: ActiveWorkoutExercise,
+  focused: boolean,
+  onToggle: () => void,
+  supersetPosition: ExerciseCardProps['supersetPosition'] = null,
+  supersetColor?: string
+): ExerciseCardProps {
+  const state = statusToCardState(exercise.status, focused)
+  return {
+    name: exercise.name,
+    state,
+    onToggle,
+    summary: exercise.summary,
+    e1rm: exercise.e1rm,
+    isPR: exercise.isPR,
+    tempo: exercise.tempo,
+    setVelocities: exercise.setVelocities,
+    totalPlannedSets: exercise.totalPlannedSets,
+    sets: state === 'expanded' ? exercise.sets : undefined,
+    prescription: exercise.prescription,
+    previousBest: exercise.previousBest,
+    supersetPosition,
+    supersetColor,
+  }
+}
+
+/** Fold consecutive same-superset exercises into render groups (pure). */
+export function groupExercises(
+  exercises: ActiveWorkoutExercise[],
+  supersets: ActiveWorkoutSuperset[]
+): WorkoutGroup[] {
+  const byId = new Map(supersets.map((superset) => [superset.id, superset]))
+  const groups: WorkoutGroup[] = []
+  for (const exercise of exercises) {
+    const superset = exercise.supersetId != null ? byId.get(exercise.supersetId) : undefined
+    const last = groups[groups.length - 1]
+    if (superset != null && last?.type === 'superset' && last.superset.id === superset.id) {
+      last.exercises.push(exercise)
+    } else if (superset != null) {
+      groups.push({ type: 'superset', superset, exercises: [exercise] })
+    } else {
+      groups.push({ type: 'single', exercise })
+    }
+  }
+  return groups
+}
+
+/** Position of an exercise within its superset, for corner-radius stitching. */
+function supersetPositionAt(index: number, length: number): ExerciseCardProps['supersetPosition'] {
+  if (length === 1) return null
+  if (index === 0) return 'first'
+  if (index === length - 1) return 'last'
+  return 'middle'
+}
+
+function WorkoutHeader({
+  title,
+  subtitle,
+  progress,
+}: {
+  title: string
+  subtitle?: string
+  progress: WorkoutProgress
+}) {
+  return (
+    <View style={{ gap: 10 }} testID="active-workout-page-header">
+      <View className="flex-row items-start justify-between" style={{ gap: 8 }}>
+        <View style={{ flexShrink: 1 }}>
+          <Text
+            accessibilityRole="header"
+            className="text-text-primary"
+            style={{
+              fontSize: 20,
+              fontFamily: '"Space Grotesk", sans-serif',
+              fontWeight: '700',
+            }}
+            testID="active-workout-page-title"
+          >
+            {title}
+          </Text>
+          {subtitle != null && (
+            <Text
+              className="text-text-secondary"
+              style={{
+                marginTop: 2,
+                fontSize: 12,
+                fontFamily: 'Inter, sans-serif',
+              }}
+              testID="active-workout-page-subtitle"
+            >
+              {subtitle}
+            </Text>
+          )}
+        </View>
+        <View style={{ alignItems: 'flex-end' }} testID="active-workout-page-progress-count">
+          <Text
+            style={{
+              fontSize: 15,
+              fontFamily: '"Space Grotesk", sans-serif',
+              fontWeight: '700',
+              color: BRAND_PRIMARY,
+              fontVariant: ['tabular-nums'],
+            }}
+          >
+            {`${progress.completedExercises}/${progress.totalExercises}`}
+          </Text>
+          <Text
+            className="text-text-tertiary"
+            style={{
+              fontSize: 10,
+              fontFamily: 'Inter, sans-serif',
+              fontWeight: '600',
+              letterSpacing: 0.4,
+              textTransform: 'uppercase',
+            }}
+          >
+            {`${progress.completedSets}/${progress.totalSets} sets`}
+          </Text>
+        </View>
+      </View>
+      <View
+        className="bg-border"
+        style={{ height: 4, borderRadius: 2 }}
+        testID="active-workout-page-progress-track"
+      >
+        <View
+          style={{
+            height: '100%',
+            width: `${Math.round(progress.fraction * 100)}%`,
+            backgroundColor: BRAND_PRIMARY,
+            borderRadius: 2,
+          }}
+          testID="active-workout-page-progress-fill"
+        />
+      </View>
+    </View>
+  )
+}
+
+interface ExerciseListProps {
+  groups: WorkoutGroup[]
+  focusedId: string | null
+  onToggle: (id: string) => void
+}
+
+function ExerciseList({ groups, focusedId, onToggle }: ExerciseListProps) {
+  return (
+    <View style={{ gap: 10 }} testID="active-workout-page-exercises">
+      {groups.map((group) => {
+        if (group.type === 'single') {
+          return (
+            <View
+              key={group.exercise.id}
+              className="bg-surface-elevated border-border"
+              style={{
+                borderWidth: 1,
+                borderRadius: 12,
+              }}
+            >
+              <ExerciseCard
+                {...toActiveCardProps(group.exercise, group.exercise.id === focusedId, () =>
+                  onToggle(group.exercise.id)
+                )}
+              />
+            </View>
+          )
+        }
+        return (
+          <SupersetWrapper
+            key={group.superset.id}
+            label={group.superset.label}
+            color={group.superset.color}
+          >
+            {group.exercises.map((exercise, index) => (
+              <ExerciseCard
+                key={exercise.id}
+                {...toActiveCardProps(
+                  exercise,
+                  exercise.id === focusedId,
+                  () => onToggle(exercise.id),
+                  supersetPositionAt(index, group.exercises.length),
+                  group.superset.color
+                )}
+              />
+            ))}
+          </SupersetWrapper>
+        )
+      })}
+    </View>
+  )
+}
+
+/**
+ * ActiveWorkoutPage — the during-workout screen, built as a zoom hierarchy over
+ * `ExerciseCard`s. A header progress bar rolls up completed sets; the flow list
+ * dims upcoming exercises, collapses finished ones to their velocity strips, and
+ * expands exactly one focused exercise to its `SetRow` breakdown. Consecutive
+ * superset exercises stitch together inside a `SupersetWrapper`. A pinned bottom
+ * bar toggles between the live `InputBar` (log the next set) and the `RestTimer`.
+ * Focus and rest are page-level state; children keep their own styles.
+ *
+ * @example
+ * <ActiveWorkoutPage title="Push Day A" exercises={exercises} />
+ */
+export function ActiveWorkoutPage({
+  title = 'Active Workout',
+  subtitle,
+  exercises,
+  supersets = [],
+  input,
+  rest,
+  initialResting = false,
+  className,
+  ...props
+}: ActiveWorkoutPageProps) {
+  const active = findActiveExercise(exercises)
+  const [focusedId, setFocusedId] = useState<string | null>(active?.id ?? null)
+  const [resting, setResting] = useState(initialResting)
+  const [reps, setReps] = useState(input?.reps ?? '')
+  const [weight, setWeight] = useState(input?.weight ?? '')
+
+  const progress = useMemo(() => deriveWorkoutProgress(exercises), [exercises])
+  const groups = useMemo(() => groupExercises(exercises, supersets), [exercises, supersets])
+
+  const toggleFocus = (id: string) => setFocusedId((current) => (current === id ? null : id))
+
+  const nextSetNumber = active != null ? countCompletedSets(active) + 1 : 1
+  const canRecord = reps.trim() !== '' && weight.trim() !== ''
+  const showRest = resting && rest != null
+  const showInput = !showRest && active != null
+
+  return (
+    <View
+      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"
+      {...props}
+    >
+      <View style={{ padding: 16, gap: 14 }} testID="active-workout-page-content">
+        <WorkoutHeader title={title} subtitle={subtitle} progress={progress} />
+        <ExerciseList groups={groups} focusedId={focusedId} onToggle={toggleFocus} />
+      </View>
+
+      {(showRest || showInput) && (
+        <View
+          style={{ borderTopWidth: 1, borderTopColor: resolveColor('border-default') }}
+          testID="active-workout-page-bottom-bar"
+        >
+          {showRest && rest != null ? (
+            <RestTimer
+              totalSeconds={rest.totalSeconds}
+              elapsedMs={rest.elapsedMs}
+              nextSetInfo={rest.nextSetInfo}
+              onSkip={() => setResting(false)}
+              onAddTime={() => undefined}
+              visible
+            />
+          ) : (
+            active != null && (
+              <InputBar
+                exerciseName={active.name}
+                setNumber={nextSetNumber}
+                totalSets={active.totalPlannedSets}
+                reps={reps}
+                weight={weight}
+                unit={active.unit}
+                onRepsChange={setReps}
+                onWeightChange={setWeight}
+                onRecord={() => {
+                  if (rest != null) setResting(true)
+                }}
+                canRecord={canRecord}
+                visible
+              />
+            )
+          )}
+        </View>
+      )}
+    </View>
+  )
+}

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

@@ -3,7 +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 { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+import { resolveColor } from '../../../theme/resolve-color'
 import {
   MuscleGroup,
   SimpleMuscleGroup,
@@ -28,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 = '#F3F4F6'
-const TEXT_SECONDARY = '#9CA3AF'
 
 export interface BodyMapData {
   muscleGroup: MuscleGroup
@@ -218,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',
           }}
@@ -277,7 +275,7 @@ function ViewToggle({ view, onViewChange }: ViewToggleProps) {
               borderRadius: 9999,
               backgroundColor: active ? 'rgba(255,121,0,0.16)' : 'transparent',
               borderWidth: 1,
-              borderColor: active ? '#FF7900' : WORKOUT_TOKENS.border.strong,
+              borderColor: active ? '#FF7900' : resolveColor('border-strong'),
             }}
             testID={`body-map-toggle-${side}`}
           >
@@ -286,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',
               }}
             >
@@ -314,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',
@@ -322,8 +321,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }: MuscleButtonProps)
         paddingVertical: 3,
         borderRadius: 9999,
         borderWidth: 1,
-        borderColor: highlighted ? '#FF7900' : WORKOUT_TOKENS.border.default,
-        backgroundColor: WORKOUT_TOKENS.surface.raised,
+        borderColor: highlighted ? '#FF7900' : resolveColor('border-default'),
       }}
       testID={`body-map-muscle-${entry.key}`}
     >
@@ -333,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
       >