@titan-design/react-ui 0.4.0 → 0.6.0

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

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

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

@@ -1,13 +1,24 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useEffect, useState } from 'react'
-import { View, Text, Animated, type ViewProps, type ViewStyle } from 'react-native'
+import {
+  View,
+  Text,
+  Animated,
+  type ViewProps,
+  type ViewStyle,
+  type DimensionValue,
+} from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+
+const t = getSemanticColors('dark')
 
 export type IntensityBarOrientation = 'vertical' | 'horizontal'
 
 export interface IntensityBarProps extends ViewProps {
-  /** Current intensity level 0-1 */
+  /** Current intensity level; 1 == 100% of target. Values >1 render as over-target. */
   level: number
-  /** MRV/overexertion threshold position 0-1 */
+  /** Target position 0-1. When the level sits at this target the fill gains an at-target glow. */
   threshold?: number
   /** Orientation */
   orientation?: IntensityBarOrientation
@@ -15,28 +26,57 @@ export interface IntensityBarProps extends ViewProps {
   size?: number
   /** Width for vertical (default 6px) or height for horizontal */
   thickness?: number
-  /** Show threshold label ("MRV") */
+  /** Show the "MRV" threshold label under the bar */
   showThresholdLabel?: boolean
   className?: string
 }
 
-const TRACK_BG = 'rgba(255,255,255,0.06)'
-const THRESHOLD_COLOR = '#FFFFFF'
+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)'
+
+// Zone colors graded by TRUE percentage (level * 100).
+const ZONE = {
+  building: t['status-success'], // below target ramp-up
+  approaching: t['status-warning'], // nearing target
+  target: t['brand-primary'], // exactly at target
+  over1: t['status-error'], // mild over-target
+  over2: WORKOUT_TOKENS.intensity.over2, // moderate over-target
+  over3: WORKOUT_TOKENS.intensity.over3, // severe over-target
+} as const
+
+type OverTier = 0 | 1 | 2 | 3
 
-/** Fill color by intensity zone: teal 0-0.4, amber 0.4-0.7, red 0.7-1.0. */
-function getZoneColor(level: number): string {
-  if (level >= 0.7) return '#D14343'
-  if (level >= 0.4) return '#FFB020'
-  return '#14B8A6'
+interface Zone {
+  color: string
+  over: OverTier
 }
 
-function clamp01(value: number): number {
+const BULGE_SIZE: Record<Exclude<OverTier, 0>, number> = { 1: 8, 2: 10, 3: 11 }
+
+/** Map a true percentage to its fill color and over-target tier. */
+function zoneForPct(pct: number): Zone {
+  if (pct >= 125) return { color: ZONE.over3, over: 3 }
+  if (pct >= 115) return { color: ZONE.over2, over: 2 }
+  if (pct > 100) return { color: ZONE.over1, over: 1 }
+  if (pct === 100) return { color: ZONE.target, over: 0 }
+  if (pct >= 75) return { color: ZONE.approaching, over: 0 }
+  return { color: ZONE.building, over: 0 }
+}
+
+function clampFill(value: number): number {
   if (value < 0) return 0
   if (value > 1) return 1
   return value
 }
 
+/** True when the level rests on the supplied target (within 5%). */
+function isAtTarget(pct: number, threshold?: number): boolean {
+  if (threshold == null) return false
+  return Math.abs(pct - Math.round(threshold * 100)) <= 5
+}
+
 export function IntensityBar({
   level,
   threshold,
@@ -48,21 +88,22 @@ export function IntensityBar({
   ...props
 }: IntensityBarProps) {
   const isVertical = orientation === 'vertical'
-  const clampedLevel = clamp01(level)
-  const percentage = Math.round(clampedLevel * 100)
-  const zoneColor = getZoneColor(clampedLevel)
+  const fillLevel = clampFill(level)
+  const pct = Math.round(Math.max(0, level) * 100)
+  const zone = zoneForPct(pct)
+  const atTarget = isAtTarget(pct, threshold)
 
-  const [fillAnim] = useState(() => new Animated.Value(clampedLevel))
+  const [fillAnim] = useState(() => new Animated.Value(fillLevel))
 
   useEffect(() => {
     const animation = Animated.timing(fillAnim, {
-      toValue: clampedLevel,
+      toValue: fillLevel,
       duration: 250,
       useNativeDriver: false,
     })
     animation.start()
     return () => animation.stop()
-  }, [clampedLevel, fillAnim])
+  }, [fillLevel, fillAnim])
 
   const fillSizePercent = fillAnim.interpolate({
     inputRange: [0, 1],
@@ -74,51 +115,50 @@ export function IntensityBar({
     : { width: size, height: thickness }
 
   const fillStyle = isVertical
+    ? { position: 'absolute' as const, bottom: 0, left: 0, right: 0, height: fillSizePercent }
+    : { position: 'absolute' as const, top: 0, bottom: 0, left: 0, width: fillSizePercent }
+
+  const bulgeSize = zone.over === 0 ? 0 : BULGE_SIZE[zone.over]
+  const bulgeStyle: ViewStyle = {
+    position: 'absolute',
+    width: bulgeSize,
+    height: bulgeSize,
+    borderRadius: bulgeSize / 2,
+    backgroundColor: zone.color,
+    zIndex: 1,
+    ...(isVertical
+      ? { top: 0, left: '50%', transform: [{ translateX: -bulgeSize / 2 }] }
+      : { right: 0, top: '50%', transform: [{ translateY: -bulgeSize / 2 }] }),
+  }
+
+  const targetPct: DimensionValue = `${clampFill(threshold ?? 0) * 100}%`
+  const targetLineStyle: ViewStyle = isVertical
     ? {
-        position: 'absolute' as const,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: fillSizePercent,
+        position: 'absolute',
+        bottom: targetPct,
+        left: -3,
+        right: -3,
+        height: 1.5,
+        backgroundColor: TARGET_LINE_COLOR,
+        zIndex: 4,
       }
     : {
-        position: 'absolute' as const,
-        top: 0,
-        bottom: 0,
-        left: 0,
-        width: fillSizePercent,
+        position: 'absolute',
+        left: targetPct,
+        top: -3,
+        bottom: -3,
+        width: 1.5,
+        backgroundColor: TARGET_LINE_COLOR,
+        zIndex: 4,
       }
 
-  const thresholdLineStyle: ViewStyle | undefined =
-    threshold != null
-      ? isVertical
-        ? {
-            position: 'absolute' as const,
-            bottom: `${clamp01(threshold) * 100}%`,
-            left: -2,
-            right: -2,
-            height: 1,
-            backgroundColor: THRESHOLD_COLOR,
-            zIndex: 4,
-          }
-        : {
-            position: 'absolute' as const,
-            left: `${clamp01(threshold) * 100}%`,
-            top: -2,
-            bottom: -2,
-            width: 1,
-            backgroundColor: THRESHOLD_COLOR,
-            zIndex: 4,
-          }
-      : undefined
-
   return (
     <View
       className={className}
       style={{ alignItems: 'center' }}
       accessibilityRole="progressbar"
-      accessibilityValue={{ min: 0, max: 100, now: percentage }}
-      accessibilityLabel={`Intensity level: ${percentage}%`}
+      accessibilityValue={{ min: 0, max: 100, now: pct }}
+      accessibilityLabel={`Intensity level: ${pct}%`}
       testID="intensity-bar"
       {...props}
     >
@@ -136,16 +176,31 @@ export function IntensityBar({
           style={{
             ...fillStyle,
             borderRadius: 3,
-            backgroundColor: zoneColor,
+            backgroundColor: zone.color,
             zIndex: 2,
+            ...(atTarget ? { boxShadow: AT_TARGET_GLOW } : null),
           }}
           testID="intensity-fill"
         />
 
-        {threshold != null && (
-          <View style={thresholdLineStyle} testID="intensity-threshold" />
-        )}
+        {zone.over !== 0 && <View style={bulgeStyle} testID="intensity-bulge" />}
+
+        {threshold != null && <View style={targetLineStyle} testID="intensity-target" />}
       </View>
+
+      <Text
+        style={{
+          fontSize: 8,
+          color: LABEL_COLOR,
+          fontFamily: '"Nunito Sans", sans-serif',
+          marginTop: 6,
+        }}
+        accessibilityElementsHidden
+        testID="intensity-label"
+      >
+        {pct}%
+      </Text>
+
       {showThresholdLabel && threshold != null && (
         <Text
           style={{
@@ -153,7 +208,7 @@ export function IntensityBar({
             fontWeight: '500',
             color: LABEL_COLOR,
             fontFamily: 'Inter, sans-serif',
-            marginTop: 6,
+            marginTop: 2,
           }}
           accessibilityElementsHidden
           testID="intensity-threshold-label"

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

@@ -4,10 +4,15 @@ import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-n
 import { Card } from '../../ui/card'
 import { Badge } from '../../ui/badge'
 import { WeekRow, type WeekRowProps } from './WeekRow'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import {
+  MESO_ACCENT_GRADIENT_DARK,
+  MESO_ACCENT_GRADIENT_LIGHT,
+} from '../../../theme/extracted-colors-dataviz'
 
-const BRAND_PRIMARY = '#FF7900'
-const BRAND_PRIMARY_DARK = '#C45E00'
-const BRAND_PRIMARY_LIGHT = '#FFB066'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
+const BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK
+const BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT
 const BORDER_DEFAULT = '#1F1F1F'
 
 /** Gradient stops for the 3px top accent: dark -> primary -> light. */

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

@@ -40,7 +40,7 @@ describe('MesoProgressBar', () => {
     it('applies completed color at 0.3 alpha', () => {
       render(<MesoProgressBar mesos={mesos} activeMesoId={null} onMesoPress={vi.fn()} />)
       expect(screen.getByTestId('meso-segment-inner-m1')).toHaveStyle({
-        backgroundColor: 'rgba(20,184,166,0.3)',
+        backgroundColor: 'rgba(46,213,115,0.3)',
       })
     })
 

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

@@ -1,8 +1,9 @@
 // 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 = '#FF7900'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 
 export type MesoStatus = 'completed' | 'current' | 'upcoming'
 
@@ -26,7 +27,7 @@ export interface MesoProgressBarProps extends ViewProps {
 }
 
 const segmentBgColors: Record<MesoStatus, string> = {
-  completed: 'rgba(20,184,166,0.3)',
+  completed: 'rgba(46,213,115,0.3)',
   current: 'rgba(255,121,0,0.5)',
   upcoming: 'rgba(255,255,255,0.06)',
 }

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

@@ -4,14 +4,21 @@ import { View, Text, type ViewProps, type ViewStyle } from 'react-native'
 import { Card } from '../../ui/card'
 import { StatusDot } from './StatusDot'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import {
+  MESO_ACCENT_GRADIENT_DARK,
+  MESO_ACCENT_GRADIENT_LIGHT,
+} from '../../../theme/extracted-colors-dataviz'
 
-const BRAND_PRIMARY = '#FF7900'
-const BRAND_PRIMARY_DARK = '#C45E00'
-const BRAND_PRIMARY_LIGHT = '#FFB066'
+const t = getSemanticColors('dark')
 
-const SUCCESS = '#14B8A6'
-const WARNING = '#FFB020'
-const ERROR = '#D14343'
+const BRAND_PRIMARY = t['brand-primary']
+const BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK
+const BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT
+
+const SUCCESS = t['status-success']
+const WARNING = t['status-warning']
+const ERROR = t['status-error']
 
 /** Gradient stops for the 3px top accent: dark -> primary -> light (matches MesoCard). */
 const ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY, BRAND_PRIMARY_LIGHT]
@@ -25,7 +32,7 @@ const CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor('surface-elevated'
 
 /** Gauge track gradient (teal -> amber -> red) at 0.25 alpha. */
 const GAUGE_GRADIENT =
-  'linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(255,176,32,0.25) 50%, rgba(209,67,67,0.25) 100%)'
+  'linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)'
 
 export type MesoStatusBadgeVariant = 'success' | 'warning' | 'error'
 
@@ -33,8 +40,8 @@ const STATUS_VARIANTS: Record<
   MesoStatusBadgeVariant,
   { bg: string; border: string; text: string }
 > = {
-  success: { bg: 'rgba(20,184,166,0.15)', border: 'rgba(20,184,166,0.3)', text: SUCCESS },
-  warning: { bg: 'rgba(255,176,32,0.15)', border: 'rgba(255,176,32,0.3)', text: WARNING },
+  success: { bg: 'rgba(46,213,115,0.15)', border: 'rgba(46,213,115,0.3)', text: SUCCESS },
+  warning: { bg: 'rgba(249,180,21,0.15)', border: 'rgba(249,180,21,0.3)', text: WARNING },
   error: { bg: 'rgba(209,67,67,0.15)', border: 'rgba(209,67,67,0.25)', text: ERROR },
 }
 
@@ -400,9 +407,9 @@ export function MesoStatusCard({
         {coaching != null && (
           <View
             style={{
-              backgroundColor: 'rgba(255,176,32,0.06)',
+              backgroundColor: 'rgba(249,180,21,0.06)',
               borderWidth: 1,
-              borderColor: 'rgba(255,176,32,0.15)',
+              borderColor: 'rgba(249,180,21,0.15)',
               borderRadius: 8,
               paddingVertical: 10,
               paddingHorizontal: 12,
@@ -427,9 +434,9 @@ export function MesoStatusCard({
             className="flex-row items-center"
             style={{
               gap: 8,
-              backgroundColor: 'rgba(20,184,166,0.06)',
+              backgroundColor: 'rgba(46,213,115,0.06)',
               borderWidth: 1,
-              borderColor: 'rgba(20,184,166,0.2)',
+              borderColor: 'rgba(46,213,115,0.2)',
               borderRadius: 8,
               paddingVertical: 10,
               paddingHorizontal: 12,

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

@@ -1,5 +1,8 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 // Aliases for spec compatibility: under=behind, maintenance=ontrack, productive=target
 export type VolumeStatus = 'untrained' | 'behind' | 'ontrack' | 'target' | 'over'
@@ -13,10 +16,10 @@ export interface MuscleGroupChipProps extends ViewProps {
 
 const dotColorMap: Record<VolumeStatus, string> = {
   untrained: '#2C2C2C',
-  behind: '#406D87',
-  ontrack: '#14B8A6',
-  target: '#FF7900',
-  over: '#D14343',
+  behind: t['brand-secondary'],
+  ontrack: t['status-success'],
+  target: t['brand-primary'],
+  over: t['status-error'],
 }
 
 export function MuscleGroupChip({

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

@@ -1,6 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 
 export interface PlaceholderStripProps extends ViewProps {
   width?: number | string
@@ -18,14 +19,12 @@ function SingleStrip({
 }: Omit<PlaceholderStripProps, 'mode' | 'segments'>) {
   return (
     <View
-      className={cn('border-border-strong', className)}
+      className={className}
       style={[
         {
           height: 3,
-          backgroundColor: 'transparent',
-          borderWidth: 1,
-          borderStyle: 'dashed',
-          borderRadius: 1,
+          backgroundColor: WORKOUT_TOKENS.placeholder.fill,
+          borderRadius: 2,
           opacity: 0.5,
         },
         width != null ? { width: width as number } : { flex: 1 },
@@ -59,13 +58,10 @@ function SegmentedStrip({
       {Array.from({ length: segments }, (_, i) => (
         <View
           key={i}
-          className="border-border-strong"
           style={{
             flex: 1,
             height: 3,
-            backgroundColor: 'transparent',
-            borderWidth: 1,
-            borderStyle: 'dashed',
+            backgroundColor: WORKOUT_TOKENS.placeholder.fill,
             borderRadius: 1,
             minWidth: 4,
           }}