@titan-design/react-ui 0.3.0 → 0.4.0

package/dist/theme/index.mjs

@@ -1,4 +1,4 @@
-export { applyThemePreset, audiobookPreset, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darken, defaultPreset, elevationSystem, getBaseSurfaceColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getValidatedElevation, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lighten, neumorphicShadows, rgbToHex, rgbToHsv, shadowColors, validateCssPropertyManifest } from '../chunk-P7TSQUN6.mjs';
+export { ThemeProvider, applyThemePreset, audiobookPreset, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darken, defaultPreset, elevationSystem, getBaseSurfaceColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getValidatedElevation, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lighten, neumorphicShadows, resolveColor, rgbToHex, rgbToHsv, shadowColors, validateCssPropertyManifest } from '../chunk-SNVKL5WZ.mjs';
 export { buttonSizes, darkThemeCSSVars, discreteRainbow, getDiscreteRainbowColor, getSemanticColors, getThemeCSSVars, gluestackConfig, lightThemeCSSVars, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, semanticColorsDark, semanticColorsLight, semanticTypography } from '../chunk-7XPB4NAO.mjs';
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titan-design/react-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Cross-platform design system built on Gluestack UI",
   "author": "Henry Jewkes",
   "license": "MIT",

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

@@ -6,14 +6,9 @@ import { InputBar } from './InputBar'
 import { RestTimer } from './RestTimer'
 import { SupersetWrapper } from './SupersetWrapper'
 import { type SetRowProps } from './SetRow'
+import { resolveColor } from '../../../theme/resolve-color'
 
-const SURFACE_ELEVATED = 'var(--color-surface-elevated)'
-const BORDER_DEFAULT = 'var(--color-border-default)'
 const BRAND_PRIMARY = '#FF7900'
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
-const TEXT_TERTIARY = 'var(--color-text-tertiary)'
-const PAGE_BG = 'var(--color-background-base)'
 
 /** Where an exercise sits in the during-workout flow. */
 export type ActiveExerciseStatus = 'completed' | 'active' | 'upcoming'
@@ -232,11 +227,11 @@ function WorkoutHeader({
         <View style={{ flexShrink: 1 }}>
           <Text
             accessibilityRole="header"
+            className="text-text-primary"
             style={{
               fontSize: 20,
               fontFamily: '"Space Grotesk", sans-serif',
               fontWeight: '700',
-              color: TEXT_PRIMARY,
             }}
             testID="active-workout-page-title"
           >
@@ -244,11 +239,11 @@ function WorkoutHeader({
           </Text>
           {subtitle != null && (
             <Text
+              className="text-text-secondary"
               style={{
                 marginTop: 2,
                 fontSize: 12,
                 fontFamily: 'Inter, sans-serif',
-                color: TEXT_SECONDARY,
               }}
               testID="active-workout-page-subtitle"
             >
@@ -269,13 +264,13 @@ function WorkoutHeader({
             {`${progress.completedExercises}/${progress.totalExercises}`}
           </Text>
           <Text
+            className="text-text-tertiary"
             style={{
               fontSize: 10,
               fontFamily: 'Inter, sans-serif',
               fontWeight: '600',
               letterSpacing: 0.4,
               textTransform: 'uppercase',
-              color: TEXT_TERTIARY,
             }}
           >
             {`${progress.completedSets}/${progress.totalSets} sets`}
@@ -283,7 +278,8 @@ function WorkoutHeader({
         </View>
       </View>
       <View
-        style={{ height: 4, backgroundColor: BORDER_DEFAULT, borderRadius: 2 }}
+        className="bg-border"
+        style={{ height: 4, borderRadius: 2 }}
         testID="active-workout-page-progress-track"
       >
         <View
@@ -314,10 +310,9 @@ function ExerciseList({ groups, focusedId, onToggle }: ExerciseListProps) {
           return (
             <View
               key={group.exercise.id}
+              className="bg-surface-elevated border-border"
               style={{
-                backgroundColor: SURFACE_ELEVATED,
                 borderWidth: 1,
-                borderColor: BORDER_DEFAULT,
                 borderRadius: 12,
               }}
             >
@@ -395,8 +390,8 @@ export function ActiveWorkoutPage({
 
   return (
     <View
-      className={className}
-      style={{ position: 'relative', width: 390, backgroundColor: PAGE_BG }}
+      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"
@@ -409,7 +404,7 @@ export function ActiveWorkoutPage({
 
       {(showRest || showInput) && (
         <View
-          style={{ borderTopWidth: 1, borderTopColor: BORDER_DEFAULT }}
+          style={{ borderTopWidth: 1, borderTopColor: resolveColor('border-default') }}
           testID="active-workout-page-bottom-bar"
         >
           {showRest && rest != null ? (

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

@@ -3,6 +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 { resolveColor } from '../../../theme/resolve-color'
 import {
   MuscleGroup,
   SimpleMuscleGroup,
@@ -27,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 = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
 
 export interface BodyMapData {
   muscleGroup: MuscleGroup
@@ -217,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',
           }}
@@ -276,7 +275,7 @@ function ViewToggle({ view, onViewChange }: ViewToggleProps) {
               borderRadius: 9999,
               backgroundColor: active ? 'rgba(255,121,0,0.16)' : 'transparent',
               borderWidth: 1,
-              borderColor: active ? '#FF7900' : 'var(--color-border-strong)',
+              borderColor: active ? '#FF7900' : resolveColor('border-strong'),
             }}
             testID={`body-map-toggle-${side}`}
           >
@@ -285,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',
               }}
             >
@@ -313,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',
@@ -321,8 +321,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }: MuscleButtonProps)
         paddingVertical: 3,
         borderRadius: 9999,
         borderWidth: 1,
-        borderColor: highlighted ? '#FF7900' : 'var(--color-border-default)',
-        backgroundColor: 'var(--color-surface-raised)',
+        borderColor: highlighted ? '#FF7900' : resolveColor('border-default'),
       }}
       testID={`body-map-muscle-${entry.key}`}
     >
@@ -332,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
       >

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

@@ -19,14 +19,7 @@ import {
   type VolumeStatus,
 } from './muscleTaxonomy'
 
-const SURFACE_ELEVATED = 'var(--color-surface-elevated)'
-const SURFACE_RAISED = 'var(--color-surface-raised)'
-const BORDER_STRONG = 'var(--color-border-strong)'
-const BORDER_DEFAULT = 'var(--color-border-default)'
 const BRAND_PRIMARY = '#FF7900'
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
-const TEXT_TERTIARY = 'var(--color-text-tertiary)'
 
 /** Volume track gradient: status-info (blue) -> result-improve (teal) -> status-error (red). */
 const VOLUME_GRADIENT = 'linear-gradient(90deg, #2196F3 0%, #14B8A6 50%, #D14343 100%)'
@@ -205,8 +198,8 @@ export function BodyMapDetailPanel({
         accessibilityRole={'dialog' as ViewProps['accessibilityRole']}
         accessibilityLabel={dialogLabel}
         aria-label={dialogLabel}
+        className="bg-surface-elevated"
         style={{
-          backgroundColor: SURFACE_ELEVATED,
           borderTopLeftRadius: 16,
           borderTopRightRadius: 16,
           maxHeight: '88%',
@@ -224,7 +217,8 @@ export function BodyMapDetailPanel({
           testID="body-map-detail-panel-handle"
         >
           <View
-            style={{ width: 40, height: 4, borderRadius: 2, backgroundColor: BORDER_STRONG }}
+            className="bg-border-strong"
+            style={{ width: 40, height: 4, borderRadius: 2 }}
             accessibilityElementsHidden
           />
         </Pressable>
@@ -242,11 +236,11 @@ export function BodyMapDetailPanel({
             <View className="flex-row items-center" style={{ gap: 8, flexShrink: 1 }}>
               <Text
                 accessibilityRole="header"
+                className="text-text-primary"
                 style={{
                   fontSize: 16,
                   fontFamily: '"Space Grotesk", sans-serif',
                   fontWeight: '700',
-                  color: TEXT_PRIMARY,
                 }}
                 testID="body-map-detail-panel-title"
               >
@@ -269,13 +263,14 @@ export function BodyMapDetailPanel({
               style={{ padding: 4, margin: -4 }}
               testID="body-map-detail-panel-close"
             >
-              <Text style={{ fontSize: 22, lineHeight: 22, color: TEXT_SECONDARY }}>{'×'}</Text>
+              <Text className="text-text-secondary" style={{ fontSize: 22, lineHeight: 22 }}>{'×'}</Text>
             </Pressable>
           </View>
 
           {lastTrained != null && (
             <Text
-              style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+              className="text-text-secondary"
+              style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}
               testID="body-map-detail-panel-last-trained"
             >
               {`Last trained ${lastTrained}`}
@@ -288,10 +283,10 @@ export function BodyMapDetailPanel({
               style={{ marginBottom: 6 }}
               accessibilityElementsHidden
             >
-              <Text style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600', color: TEXT_TERTIARY }}>
+              <Text className="text-text-tertiary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}>
                 {`MEV ${landmarks.mev}`}
               </Text>
-              <Text style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600', color: TEXT_TERTIARY }}>
+              <Text className="text-text-tertiary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}>
                 {`MRV ${landmarks.mrv}`}
               </Text>
             </View>
@@ -310,6 +305,7 @@ export function BodyMapDetailPanel({
                 accessibilityElementsHidden
               />
               <View
+                className="border-text-primary bg-surface-elevated"
                 style={{
                   position: 'absolute',
                   left: `${markerLeft}%`,
@@ -318,8 +314,6 @@ export function BodyMapDetailPanel({
                   height: 14,
                   borderRadius: 7,
                   borderWidth: 2,
-                  borderColor: TEXT_PRIMARY,
-                  backgroundColor: SURFACE_ELEVATED,
                   boxShadow: '0 0 4px rgba(0,0,0,0.5)',
                 }}
                 accessibilityElementsHidden
@@ -330,18 +324,19 @@ export function BodyMapDetailPanel({
 
           <View className="flex-row items-baseline" style={{ marginTop: 14, gap: 4 }}>
             <Text
+              className="text-text-primary"
               style={{
                 fontSize: 24,
                 fontFamily: '"Space Grotesk", sans-serif',
                 fontWeight: '700',
-                color: TEXT_PRIMARY,
               }}
               testID="body-map-detail-panel-set-count"
             >
               {weeklySets}
             </Text>
             <Text
-              style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+              className="text-text-secondary"
+              style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}
               testID="body-map-detail-panel-mrv-suffix"
             >
               {`/ ${landmarks.mrv} MRV`}
@@ -351,11 +346,11 @@ export function BodyMapDetailPanel({
           {weeklyHistory != null && weeklyHistory.length > 0 && (
             <View style={{ marginTop: 14 }} testID="body-map-detail-panel-sparkline">
               <Text
+                className="text-text-tertiary"
                 style={{
                   fontSize: 10,
                   fontFamily: 'Inter, sans-serif',
                   fontWeight: '600',
-                  color: TEXT_TERTIARY,
                   marginBottom: 6,
                 }}
                 accessibilityElementsHidden
@@ -369,11 +364,11 @@ export function BodyMapDetailPanel({
           {hasContributing && (
             <View style={{ marginTop: 16 }} testID="body-map-detail-panel-contributing">
               <Text
+                className="text-text-tertiary"
                 style={{
                   fontSize: 10,
                   fontFamily: 'Inter, sans-serif',
                   fontWeight: '600',
-                  color: TEXT_TERTIARY,
                   marginBottom: 8,
                 }}
               >
@@ -382,27 +377,27 @@ export function BodyMapDetailPanel({
               {contributingExercises!.map((exercise, index) => (
                 <View
                   key={`${exercise.name}-${index}`}
-                  className="flex-row items-center justify-between"
+                  className="flex-row items-center justify-between bg-surface-raised border-border"
                   style={{
                     gap: 10,
                     paddingVertical: 8,
                     paddingHorizontal: 12,
                     marginBottom: 6,
                     borderRadius: 8,
-                    backgroundColor: SURFACE_RAISED,
                     borderWidth: 1,
-                    borderColor: BORDER_DEFAULT,
                   }}
                   testID={`body-map-detail-panel-contributing-${index}`}
                 >
                   <Text
-                    style={{ flex: 1, fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '600', color: TEXT_PRIMARY }}
+                    className="text-text-primary"
+                    style={{ flex: 1, fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}
                     testID={`body-map-detail-panel-contributing-${index}-name`}
                   >
                     {exercise.name}
                   </Text>
                   <Text
-                    style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+                    className="text-text-secondary"
+                    style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}
                     testID={`body-map-detail-panel-contributing-${index}-detail`}
                   >
                     {`${exercise.sets} sets · ${Math.round(exercise.contributionWeight * 100)}%`}
@@ -415,11 +410,11 @@ export function BodyMapDetailPanel({
           {hasUpcoming && (
             <View style={{ marginTop: 16 }} testID="body-map-detail-panel-upcoming">
               <Text
+                className="text-text-tertiary"
                 style={{
                   fontSize: 10,
                   fontFamily: 'Inter, sans-serif',
                   fontWeight: '600',
-                  color: TEXT_TERTIARY,
                   marginBottom: 8,
                 }}
               >
@@ -433,13 +428,15 @@ export function BodyMapDetailPanel({
                   testID={`body-map-detail-panel-upcoming-${index}`}
                 >
                   <Text
-                    style={{ flex: 1, fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '600', color: TEXT_PRIMARY }}
+                    className="text-text-primary"
+                    style={{ flex: 1, fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}
                     testID={`body-map-detail-panel-upcoming-${index}-name`}
                   >
                     {exercise.name}
                   </Text>
                   <Text
-                    style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_TERTIARY }}
+                    className="text-text-tertiary"
+                    style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}
                     testID={`body-map-detail-panel-upcoming-${index}-detail`}
                   >
                     {`${exercise.workoutName} · ${exercise.sets} sets`}

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

@@ -8,7 +8,6 @@ const STATUS_INFO = '#2196F3'
 /** Dot outline: near-white ring so load dots read on the band fill and any
  *  surface (matches the MesoStatusCard gauge-marker convention). */
 const DOT_BORDER = '#F3F4F6'
-const TEXT_TERTIARY = 'var(--color-text-tertiary)'
 const BAND_FILL = 'rgba(20,184,166,0.1)'
 const BAND_EDGE = 'rgba(20,184,166,0.45)'
 const PROJECTION_FILL = 'rgba(20,184,166,0.05)'
@@ -398,6 +397,7 @@ export function CapacityBandChart({
 
       {/* Y axis conceptual label (no numbers). */}
       <Text
+        className="text-text-tertiary"
         style={{
           position: 'absolute',
           left: PADDING_LEFT / 2 - 14,
@@ -406,7 +406,6 @@ export function CapacityBandChart({
           textAlign: 'center',
           fontSize: 9,
           fontFamily: 'Inter, sans-serif',
-          color: TEXT_TERTIARY,
           transform: [{ rotate: '-90deg' }],
         }}
         accessibilityElementsHidden
@@ -422,6 +421,7 @@ export function CapacityBandChart({
         return (
           <Text
             key={`x-${point.date}`}
+            className="text-text-tertiary"
             style={{
               position: 'absolute',
               left: toX(point.date) - 14,
@@ -430,7 +430,6 @@ export function CapacityBandChart({
               textAlign: 'center',
               fontSize: 10,
               fontFamily: 'Inter, sans-serif',
-              color: TEXT_TERTIARY,
             }}
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"

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

@@ -8,6 +8,7 @@ import { PrBadge } from './PrBadge'
 import { TempoDisplay } from './TempoDisplay'
 import { SetRow, type SetRowProps } from './SetRow'
 import { roundWeight } from '../../../utils/workout-format'
+import { resolveColor } from '../../../theme/resolve-color'
 
 export type ExerciseCardState = 'collapsed' | 'expanded' | 'upcoming'
 
@@ -34,21 +35,6 @@ export interface ExerciseCardProps {
   supersetColor?: string
 }
 
-const COLORS = {
-  // Theme-aware tokens: text foregrounds and this card's own surfaces/borders
-  // must flip together so text stays readable in both light and dark. The
-  // expanded/pressed surfaces are self-owned here (not from a themed Card), so
-  // hardcoding dark values would leave dark-on-dark once the text flips.
-  // react-native-web passes the CSS var through to the inline style.
-  textPrimary: 'var(--color-text-primary)',
-  textSecondary: 'var(--color-text-secondary)',
-  textTertiary: 'var(--color-text-tertiary)',
-  brandPrimary: '#FF7900',
-  surfaceRaised: 'var(--color-surface-raised)',
-  surfaceElevated: 'var(--color-surface-elevated)',
-  borderDefault: 'var(--color-border-default)',
-}
-
 /** Column headers; the weight column reflects the card's unit (LBS / KG). */
 function buildColumnHeaders(unit: 'lbs' | 'kg'): string[] {
   return ['SET', 'PREV', 'REPS', unit.toUpperCase(), 'RPE']
@@ -139,11 +125,11 @@ function CollapsedCard({
       testID="exercise-card"
     >
       <View
+        className={pressed ? 'bg-surface-raised' : undefined}
         style={{
           padding: 12,
           paddingHorizontal: 14,
           cursor: 'pointer',
-          backgroundColor: pressed ? COLORS.surfaceRaised : 'transparent',
           ...borderRadius,
           ...supersetMargin,
         }}
@@ -153,11 +139,11 @@ function CollapsedCard({
           testID="exercise-card-header"
         >
           <Text
+            className="text-text-primary"
             style={{
               fontSize: 14,
               fontFamily: '"Space Grotesk", sans-serif',
               fontWeight: '700',
-              color: COLORS.textPrimary,
             }}
             testID="exercise-card-name"
           >
@@ -166,10 +152,10 @@ function CollapsedCard({
           <View className="flex-1" />
           {summary && (
             <Text
+              className="text-text-secondary"
               style={{
                 fontSize: 12,
                 fontFamily: 'Inter, sans-serif',
-                color: COLORS.textSecondary,
                 marginRight: 8,
               }}
               testID="exercise-card-summary"
@@ -239,10 +225,9 @@ function ExpandedCard({
 
   return (
     <View
+      className="bg-surface-elevated border-border"
       style={{
-        backgroundColor: COLORS.surfaceElevated,
         borderWidth: 1,
-        borderColor: COLORS.borderDefault,
         ...borderRadius,
         ...supersetMargin,
       }}
@@ -262,15 +247,15 @@ function ExpandedCard({
             paddingHorizontal: 14,
             paddingBottom: 10,
             borderBottomWidth: 1,
-            borderBottomColor: COLORS.borderDefault,
+            borderBottomColor: resolveColor('border-default'),
           }}
         >
           <Text
+            className="text-text-primary"
             style={{
               fontSize: 14,
               fontFamily: '"Space Grotesk", sans-serif',
               fontWeight: '700',
-              color: COLORS.textPrimary,
             }}
             testID="exercise-card-name"
           >
@@ -279,10 +264,10 @@ function ExpandedCard({
           <View className="flex-1" />
           {summary && (
             <Text
+              className="text-text-secondary"
               style={{
                 fontSize: 12,
                 fontFamily: 'Inter, sans-serif',
-                color: COLORS.textSecondary,
                 marginRight: 8,
               }}
               testID="exercise-card-summary"
@@ -339,13 +324,13 @@ function ExpandedCard({
               {...(isFlex ? { className: 'flex-1' } : {})}
             >
               <Text
+                className="text-text-tertiary"
                 style={{
                   fontSize: 10,
                   fontWeight: '600',
                   fontFamily: 'Inter, sans-serif',
                   textTransform: 'uppercase',
                   letterSpacing: 0.8,
-                  color: COLORS.textTertiary,
                 }}
               >
                 {header}
@@ -389,11 +374,11 @@ function UpcomingCard({
     >
       <View className="flex-row items-center">
         <Text
+          className="text-text-primary"
           style={{
             fontSize: 14,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: COLORS.textPrimary,
           }}
           testID="exercise-card-name"
         >
@@ -401,10 +386,10 @@ function UpcomingCard({
         </Text>
         {prescription && (
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 12,
               fontFamily: 'Inter, sans-serif',
-              color: COLORS.textSecondary,
               marginLeft: 8,
             }}
             testID="exercise-card-prescription"
@@ -415,10 +400,10 @@ function UpcomingCard({
         <View className="flex-1" />
         {previousBest && (
           <Text
+            className="text-text-tertiary"
             style={{
               fontSize: 11,
               fontFamily: 'Inter, sans-serif',
-              color: COLORS.textTertiary,
             }}
             testID="exercise-card-previous-best"
           >