@titan-design/react-ui 0.5.0 → 0.6.0

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

@@ -3,6 +3,9 @@ import { useEffect, useState } from 'react'
 import { View, Text, Animated, Easing, type ViewProps } from 'react-native'
 import { StarIcon } from './icons'
 import { BaseBadge } from './BaseBadge'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 
 export type PRType = 'e1rm' | 'weight' | 'reps' | 'volume' | 'velocity'
 
@@ -66,7 +69,7 @@ export function PrBadge({
       testID="pr-badge-star"
       {...props}
     >
-      <StarIcon size={14} color="#FF7900" fill="#FF7900" strokeWidth={2} />
+      <StarIcon size={14} color={BRAND_PRIMARY} fill={BRAND_PRIMARY} strokeWidth={2} />
     </View>
   ) : (
     <BaseBadge
@@ -78,7 +81,7 @@ export function PrBadge({
       <Text
         style={{
           fontSize: 12,
-          color: '#FF7900',
+          color: BRAND_PRIMARY,
           fontWeight: '700',
           fontFamily: 'Inter, sans-serif',
         }}

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

@@ -3,10 +3,11 @@ import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { StarIcon } from './icons'
 import { Drawer, DrawerBody } from '../../ui/drawer'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const BRAND_PRIMARY = '#FF7900'
-const RECENT_BORDER = 'rgba(255,176,32,0.3)'
-const RECENT_GLOW = '0 0 12px rgba(255,176,32,0.06)'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
+const RECENT_BORDER = 'rgba(249,180,21,0.3)'
+const RECENT_GLOW = '0 0 12px rgba(249,180,21,0.06)'
 // Native-safe fallback for the conditional row border (recent uses a computed
 // rgba, so className can't express both branches).
 const BORDER_DEFAULT = resolveColor('border-default')

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

@@ -8,8 +8,9 @@ import { WorkoutCard, type WorkoutStatus, type WorkoutMuscleGroup } from './Work
 import { type WorkoutPillStatus } from './WorkoutPill'
 import { type ExerciseCardProps } from './ExerciseCard'
 import { cn } from '../../../utils/cn'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const BRAND_PRIMARY = '#FF7900'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 
 /** A single workout within a planned week, plus its exercise breakdown. */
 export interface PlanWorkout {

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

@@ -2,12 +2,15 @@
 import { View, Text, Pressable } from 'react-native'
 import { Card } from '../../ui/card'
 import { Badge, type BadgeColor } from '../../ui/badge'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const BRAND_PRIMARY = '#FF7900'
+const t = getSemanticColors('dark')
+
+const BRAND_PRIMARY = t['brand-primary']
 const BRAND_PRIMARY_SUBTLE = 'rgba(255,121,0,0.12)'
-const STATUS_SUCCESS = '#14B8A6'
-const STATUS_WARNING = '#FFB020'
-const STATUS_ERROR = '#D14343'
+const STATUS_SUCCESS = t['status-success']
+const STATUS_WARNING = t['status-warning']
+const STATUS_ERROR = t['status-error']
 
 /** Emoji option sets per known factor, keyed by lowercase id/label. */
 const EMOJI_SETS: Record<string, readonly string[]> = {

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

@@ -1,8 +1,9 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text, Pressable } from 'react-native'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const BRAND_PRIMARY = '#FF7900'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 
 export interface RestTimerProps {
   totalSeconds: number

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

@@ -3,6 +3,7 @@ import { View, Text } from 'react-native'
 import { VelocityStrip, type VelocityZoneBandProp } from './VelocityStrip'
 import { PrBadge, type PRType } from './PrBadge'
 import { roundRpe, rpeColor, roundWeight } from '../../../utils/workout-format'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 
 export type SetRowMode = 'active' | 'completed' | 'history'
 
@@ -100,7 +101,7 @@ export function SetRow({
               fontSize: 10,
               fontWeight: '700',
               fontFamily: 'Inter, sans-serif',
-              color: '#ffa502',
+              color: WORKOUT_TOKENS.scale.orange,
               backgroundColor: 'rgba(255,165,2,0.12)',
               paddingVertical: 1,
               paddingHorizontal: 5,

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

@@ -2,8 +2,9 @@
 import React from 'react'
 import { View, Text, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const BRAND_PRIMARY = '#FF7900'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 
 export interface SparklineProps extends ViewProps {
   data: number[]

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

@@ -103,13 +103,13 @@ describe('StatusDot', () => {
     it('applies a box-shadow when glow is set on a solid variant', () => {
       render(<StatusDot variant="success" glow />)
       const dot = screen.getByTestId('status-dot')
-      expect(dot.style.boxShadow).toContain('rgba(20,184,166,0.4)')
+      expect(dot.style.boxShadow).toContain('rgba(46,213,115,0.4)')
     })
 
     it('applies a box-shadow when glow is set on a ring variant', () => {
       render(<StatusDot variant="on-track" glow />)
       const dot = screen.getByTestId('status-dot')
-      expect(dot.style.boxShadow).toContain('rgba(20,184,166,0.4)')
+      expect(dot.style.boxShadow).toContain('rgba(46,213,115,0.4)')
     })
 
     it('applies a gray box-shadow when glow is set on the future variant', () => {

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

@@ -1,5 +1,8 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text, type ViewProps } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 export type StatusDotVariant =
   | 'success'
@@ -22,17 +25,17 @@ export interface StatusDotProps extends ViewProps {
 }
 
 const solidVariantColors: Record<string, string> = {
-  success: '#14B8A6',
-  warning: '#FFB020',
-  error: '#D14343',
+  success: t['status-success'],
+  warning: t['status-warning'],
+  error: t['status-error'],
   neutral: '#6B7280',
 }
 
 const ringVariantStyles: Record<string, Record<string, unknown>> = {
   'on-track': {
-    backgroundColor: 'rgba(20,184,166,0.15)',
+    backgroundColor: 'rgba(46,213,115,0.15)',
     borderWidth: 1,
-    borderColor: 'rgba(20,184,166,0.3)',
+    borderColor: 'rgba(46,213,115,0.3)',
   },
   deviation: {
     backgroundColor: 'rgba(245,158,11,0.15)',
@@ -48,11 +51,11 @@ const ringVariantStyles: Record<string, Record<string, unknown>> = {
 }
 
 const glowStyles: Record<StatusDotVariant, Record<string, unknown>> = {
-  success: { boxShadow: '0 0 4px rgba(20,184,166,0.4)' },
+  success: { boxShadow: '0 0 4px rgba(46,213,115,0.4)' },
   warning: { boxShadow: '0 0 4px rgba(245,158,11,0.4)' },
   error: { boxShadow: '0 0 4px rgba(239,68,68,0.4)' },
   neutral: { boxShadow: '0 0 4px rgba(107,114,128,0.4)' },
-  'on-track': { boxShadow: '0 0 4px rgba(20,184,166,0.4)' },
+  'on-track': { boxShadow: '0 0 4px rgba(46,213,115,0.4)' },
   deviation: { boxShadow: '0 0 4px rgba(245,158,11,0.4)' },
   future: { boxShadow: '0 0 4px rgba(107,114,128,0.4)' },
 }
@@ -69,8 +72,8 @@ const iconColors: Record<StatusDotVariant, string> = {
   warning: '#6B4000',
   error: '#5C1A1A',
   neutral: '#D1D5DB',
-  'on-track': '#14B8A6',
-  deviation: '#FFB020',
+  'on-track': t['status-success'],
+  deviation: t['status-warning'],
   future: '#6B7280',
 }
 

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

@@ -3,17 +3,20 @@ import { useEffect, useMemo, useState } from 'react'
 import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const BRAND_PRIMARY = '#FF7900'
+const sem = getSemanticColors('dark')
+
+const BRAND_PRIMARY = sem['brand-primary']
 // Line/border color for the dashed projection, used where a className cannot
 // apply (passed as a prop into an inline style, and a per-edge borderTopColor).
 const PROJECTION_LINE_COLOR = resolveColor('text-tertiary')
-const STATUS_SUCCESS = '#14B8A6'
-const STATUS_ERROR = '#D14343'
-const STATUS_WARNING = '#FFB020'
+const STATUS_SUCCESS = sem['status-success']
+const STATUS_ERROR = sem['status-error']
+const STATUS_WARNING = sem['status-warning']
 const GRID_LINE = 'rgba(255,255,255,0.06)'
-const SUCCESS_PILL_BG = 'rgba(20,184,166,0.10)'
-const SUCCESS_PILL_BORDER = 'rgba(20,184,166,0.20)'
+const SUCCESS_PILL_BG = 'rgba(46,213,115,0.10)'
+const SUCCESS_PILL_BORDER = 'rgba(46,213,115,0.20)'
 const ERROR_PILL_BG = 'rgba(209,67,67,0.10)'
 const ERROR_PILL_BORDER = 'rgba(209,67,67,0.20)'
 

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

@@ -1,6 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import React from 'react'
 import { View, Text } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
 export interface SupersetWrapperProps {
   label?: string
@@ -10,7 +11,7 @@ export interface SupersetWrapperProps {
 
 const DEFAULTS = {
   label: 'SS',
-  color: '#FF7900',
+  color: getSemanticColors('dark')['brand-primary'],
   bgBase: '#101010',
 } as const
 

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

@@ -3,8 +3,11 @@ import { useState, useCallback } from 'react'
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { roundTempo } from '../../../utils/workout-format'
 import { alpha } from '../../../utils/colors'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { getTempoFillPct, getTempoPacingState } from './TempoBar'
 
+const t = getSemanticColors('dark')
+
 /** The four tempo phases, in the order the display renders them. */
 export type TempoLivePhase = 'eccentric' | 'pauseBottom' | 'concentric' | 'pauseTop'
 
@@ -40,13 +43,13 @@ export interface TempoDisplayProps extends ViewProps {
 
 const INTER = 'Inter, sans-serif'
 const TEXT_TERTIARY = '#6B7280'
-const STATUS_ERROR = '#D14343' // status-error (red), shown when a phase runs behind pace
+const STATUS_ERROR = t['status-error'] // shown when a phase runs behind pace
 
 // Phase colors: [eccentric, pauseBottom, concentric, pauseTop]
 const phaseColors = {
-  eccentric: '#FFB020', // status-warning (amber)
+  eccentric: t['status-warning'],
   pauseBottom: TEXT_TERTIARY,
-  concentric: '#14B8A6', // status-success (teal)
+  concentric: t['status-success'],
   pauseTop: TEXT_TERTIARY,
   dash: TEXT_TERTIARY,
 }

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

@@ -266,8 +266,8 @@ describe('VelocityStrip zones prop', () => {
   it('colors bars from the supplied bands (mini)', () => {
     render(<VelocityStrip velocities={[1.1, 0.45]} zones={compoundBands} variant="mini" />)
     // 1.1 -> speed -> green; 0.45 -> maximalStrength -> red (shared with grinding).
-    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: '#2ed573' })
-    expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ backgroundColor: '#ff4757' })
+    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: '#2ED573' })
+    expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ backgroundColor: '#D14343' })
   })
 
   it('labels the summary row with the band containing the mean velocity', () => {
@@ -278,7 +278,7 @@ describe('VelocityStrip zones prop', () => {
 
   it('falls back to the default scale when zones is absent', () => {
     render(<VelocityStrip velocities={[1.1]} variant="mini" />)
-    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: '#2ed573' })
+    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: '#2ED573' })
   })
 })
 

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

@@ -2,8 +2,9 @@
 import { View, Text, type ViewProps } from 'react-native'
 import { WorkoutPill, type WorkoutPillStatus } from './WorkoutPill'
 import { IntensityBar } from './IntensityBar'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const BRAND_PRIMARY = '#FF7900'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 
 export interface WeekRowWorkout {
   name: string
@@ -66,7 +67,7 @@ export function WeekRow({
   }
 
   if (isDeload) {
-    rowStyle.backgroundColor = 'rgba(147,51,234,0.06)'
+    rowStyle.backgroundColor = 'rgba(186,41,150,0.06)'
   }
 
   if (isCurrent) {

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

@@ -7,6 +7,7 @@ import {
   type BaseBadgeSize,
   type BaseBadgeProps,
 } from './BaseBadge'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
 export type WeightBadgeSize = BaseBadgeSize
 
@@ -42,7 +43,7 @@ export function WeightBadge({
   ...props
 }: WeightBadgeProps) {
   const config = baseBadgeSizeConfig[size]
-  const textColor = isPr ? '#FF7900' : '#9CA3AF'
+  const textColor = isPr ? getSemanticColors('dark')['brand-primary'] : '#9CA3AF'
   // Dumbbell reads clearly as a weight/strength metric and is unit-agnostic
   // across estimated-1RM and N-rep-max contexts (vs. TrendingUp which implies
   // change/trend rather than a load value).
@@ -100,7 +101,10 @@ export function WeightBadge({
             fontFamily: '"Space Grotesk", sans-serif',
             fontSize: config.fontSize,
             marginLeft: 4,
-            color: delta >= 0 ? '#4caf50' : '#ef5350',
+            color:
+              delta >= 0
+                ? getSemanticColors('dark')['result-improve']
+                : getSemanticColors('dark')['result-degrade'],
           }}
           testID="weight-badge-delta"
         >

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

@@ -6,6 +6,9 @@ import {
   MuscleGroupChip,
   type VolumeStatus,
 } from './MuscleGroupChip'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 export type WorkoutStatus = 'completed' | 'today' | 'upcoming'
 
@@ -43,8 +46,8 @@ export interface WorkoutCardProps extends ViewProps {
 }
 
 const COLORS = {
-  statusSuccess: '#14B8A6',
-  brandPrimary: '#FF7900',
+  statusSuccess: t['status-success'],
+  brandPrimary: t['brand-primary'],
   borderDefault: '#1F1F1F',
   brandPrimarySubtle: 'rgba(255,121,0,0.06)',
 }

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

@@ -1,6 +1,10 @@
 // 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 { getSemanticColors } from '../../../theme/tokens/semantic'
+import { WORKOUT_PILL_DELOAD } from '../../../theme/extracted-colors-dataviz'
+
+const t = getSemanticColors('dark')
 
 /**
  * Spec statuses: completed | current | upcoming | deload.
@@ -19,30 +23,30 @@ export interface WorkoutPillProps extends ViewProps {
 }
 
 const statusBgColors: Record<WorkoutPillStatus, string> = {
-  completed: 'rgba(20,184,166,0.15)',
+  completed: 'rgba(46,213,115,0.15)',
   current: 'rgba(255,121,0,0.15)',
   next: 'transparent',
   upcoming: '#1C1C1C',
   missed: 'rgba(209,67,67,0.1)',
-  deload: 'rgba(147,51,234,0.15)',
+  deload: 'rgba(186,41,150,0.15)',
 }
 
 const statusBorderStyles: Record<WorkoutPillStatus, Record<string, unknown>> = {
-  completed: { borderWidth: 1, borderColor: 'rgba(20,184,166,0.3)' },
+  completed: { borderWidth: 1, borderColor: 'rgba(46,213,115,0.3)' },
   current: { borderWidth: 1, borderColor: 'rgba(255,121,0,0.3)' },
   next: { borderWidth: 1, borderColor: 'rgba(255,121,0,0.4)' },
   upcoming: { borderWidth: 1, borderColor: '#1F1F1F' },
   missed: { borderWidth: 1, borderColor: 'rgba(209,67,67,0.25)' },
-  deload: { borderWidth: 1, borderColor: 'rgba(147,51,234,0.3)' },
+  deload: { borderWidth: 1, borderColor: 'rgba(186,41,150,0.3)' },
 }
 
 const textColors: Record<WorkoutPillStatus, string> = {
-  completed: '#14B8A6',
-  current: '#FF7900',
-  next: '#FF7900',
+  completed: t['status-success'],
+  current: t['brand-primary'],
+  next: t['brand-primary'],
   upcoming: '#6B7280',
   missed: 'rgba(209,67,67,0.7)',
-  deload: '#9333ea',
+  deload: WORKOUT_PILL_DELOAD,
 }
 
 function usePulse(enabled: boolean) {

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

@@ -1,68 +1,7 @@
-// Inline SVG icons for the Workout badges — replaces the `lucide-react`
-// dependency (dep hygiene, titan 0.5.0). The paths mirror lucide-react's
-// `Dumbbell` and `Star` glyphs verbatim so rendering is pixel-identical to the
-// previous `<Dumbbell>` / `<Star>` output (same viewBox, stroke, fill, and
-// round line caps). Rendered as raw `<svg>` DOM elements — the same web-SVG
-// mechanism `Progress.tsx` uses, and the same surface `lucide-react` produced
-// (both are web-only SVG; native icon rendering was never wired here).
+// Workout icons were promoted to the shared icon primitive
+// (`components/icons`). This shim re-exports them so existing Workout consumers
+// keep their local `./icons` import unchanged.
+export { DumbbellIcon, StarIcon } from '../../icons'
 
-export interface WorkoutIconProps {
-  /** Rendered width/height in px (viewBox is fixed 24×24). */
-  size?: number
-  /** Stroke color. */
-  color?: string
-  /** Fill color; defaults to `none` (outline only). */
-  fill?: string
-  /** Stroke width. */
-  strokeWidth?: number
-}
-
-/** Dumbbell glyph (mirrors lucide-react `Dumbbell`). Outline-only by default. */
-export function DumbbellIcon({
-  size = 24,
-  color = 'currentColor',
-  fill = 'none',
-  strokeWidth = 2,
-}: WorkoutIconProps) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill={fill}
-      stroke={color}
-      strokeWidth={strokeWidth}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M14.4 14.4 9.6 9.6" />
-      <path d="M18.657 21.485a2 2 0 1 1-2.829-2.828l-1.767 1.768a2 2 0 1 1-2.829-2.829l6.364-6.364a2 2 0 1 1 2.829 2.829l-1.768 1.767a2 2 0 1 1 2.828 2.829z" />
-      <path d="m21.5 21.5-1.4-1.4" />
-      <path d="M3.9 3.9 2.5 2.5" />
-      <path d="M6.404 12.768a2 2 0 1 1-2.829-2.829l1.768-1.767a2 2 0 1 1-2.828-2.829l2.828-2.828a2 2 0 1 1 2.829 2.828l1.767-1.768a2 2 0 1 1 2.829 2.829z" />
-    </svg>
-  )
-}
-
-/** Star glyph (mirrors lucide-react `Star`). Pass `fill` for a solid star. */
-export function StarIcon({
-  size = 24,
-  color = 'currentColor',
-  fill = 'none',
-  strokeWidth = 2,
-}: WorkoutIconProps) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill={fill}
-      stroke={color}
-      strokeWidth={strokeWidth}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />
-    </svg>
-  )
-}
+/** @deprecated Use `IconProps` from `components/icons`. */
+export type { IconProps as WorkoutIconProps } from '../../icons'