@titan-design/react-ui 0.3.0 → 0.4.0

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

@@ -2,15 +2,14 @@
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { Star } from 'lucide-react'
 import { Drawer, DrawerBody } from '../../ui/drawer'
+import { resolveColor } from '../../../theme/resolve-color'
 
 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 SURFACE_RAISED = 'var(--color-surface-raised)'
-const BORDER_DEFAULT = 'var(--color-border-default)'
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
-const TEXT_TERTIARY = 'var(--color-text-tertiary)'
+// 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')
 
 export type PrRecordType = 'e1rm' | 'weight' | 'reps' | 'volume' | 'velocity'
 
@@ -72,14 +71,13 @@ function PrRecordRow({ record, index }: { record: PrRecord; index: number }) {
     <View
       accessibilityRole="text"
       accessibilityLabel={a11yLabel}
-      className="flex-row items-center"
+      className="flex-row items-center bg-surface-raised"
       style={{
         gap: 10,
         paddingVertical: 10,
         paddingHorizontal: 12,
         marginBottom: 8,
         borderRadius: 8,
-        backgroundColor: SURFACE_RAISED,
         borderWidth: 1,
         borderColor: record.isRecent ? RECENT_BORDER : BORDER_DEFAULT,
         ...(record.isRecent ? { boxShadow: RECENT_GLOW } : {}),
@@ -88,35 +86,35 @@ function PrRecordRow({ record, index }: { record: PrRecord; index: number }) {
     >
       <Star size={16} color={BRAND_PRIMARY} fill={BRAND_PRIMARY} strokeWidth={2} />
       <Text
+        className="text-text-secondary"
         style={{
           flex: 1,
           fontSize: 13,
           fontFamily: 'Inter, sans-serif',
           fontWeight: '600',
-          color: TEXT_SECONDARY,
         }}
         testID={`pr-history-modal-record-${index}-type`}
       >
         {label}
       </Text>
       <Text
+        className="text-text-primary"
         style={{
           fontSize: 14,
           fontFamily: '"Space Grotesk", sans-serif',
           fontWeight: '700',
-          color: TEXT_PRIMARY,
         }}
         testID={`pr-history-modal-record-${index}-value`}
       >
         {valueText}
       </Text>
       <Text
+        className="text-text-tertiary"
         style={{
           minWidth: 64,
           textAlign: 'right',
           fontSize: 11,
           fontFamily: 'Inter, sans-serif',
-          color: TEXT_TERTIARY,
         }}
         testID={`pr-history-modal-record-${index}-date`}
       >
@@ -173,13 +171,13 @@ export function PrHistoryModal({
     >
       <View
         accessibilityElementsHidden
+        className="bg-border"
         style={{
           alignSelf: 'center',
           width: 40,
           height: 4,
           borderRadius: 2,
           marginTop: 8,
-          backgroundColor: BORDER_DEFAULT,
         }}
         testID="pr-history-modal-handle"
       />
@@ -191,11 +189,11 @@ export function PrHistoryModal({
       >
         <Text
           accessibilityRole="header"
+          className="text-text-primary"
           style={{
             fontSize: 16,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: TEXT_PRIMARY,
           }}
           testID="pr-history-modal-title"
         >
@@ -209,7 +207,7 @@ export function PrHistoryModal({
           style={{ padding: 4, margin: -4 }}
           testID="pr-history-modal-close"
         >
-          <Text style={{ fontSize: 22, lineHeight: 22, color: TEXT_SECONDARY }}>
+          <Text className="text-text-secondary" style={{ fontSize: 22, lineHeight: 22 }}>
             {'×'}
           </Text>
         </Pressable>
@@ -219,11 +217,11 @@ export function PrHistoryModal({
         {records.length === 0 ? (
           <View style={{ paddingVertical: 24 }} testID="pr-history-modal-empty">
             <Text
+              className="text-text-tertiary"
               style={{
                 textAlign: 'center',
                 fontSize: 13,
                 fontFamily: 'Inter, sans-serif',
-                color: TEXT_TERTIARY,
               }}
             >
               No personal records yet

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

@@ -7,13 +7,9 @@ import { type WeekRowProps, type WeekRowWorkout } from './WeekRow'
 import { WorkoutCard, type WorkoutStatus, type WorkoutMuscleGroup } from './WorkoutCard'
 import { type WorkoutPillStatus } from './WorkoutPill'
 import { type ExerciseCardProps } from './ExerciseCard'
+import { cn } from '../../../utils/cn'
 
-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_TERTIARY = 'var(--color-text-tertiary)'
-const PAGE_BG = 'var(--color-background-base)'
 
 /** A single workout within a planned week, plus its exercise breakdown. */
 export interface PlanWorkout {
@@ -157,7 +153,7 @@ function Breadcrumbs({ crumbs, onNavigate }: BreadcrumbsProps) {
         const isLast = index === crumbs.length - 1
         return (
           <View key={crumb.key} className="flex-row items-center" style={{ gap: 4 }}>
-            {index > 0 && <Text style={{ fontSize: 12, color: TEXT_TERTIARY }}>{'›'}</Text>}
+            {index > 0 && <Text className="text-text-tertiary" style={{ fontSize: 12 }}>{'›'}</Text>}
             <Pressable
               onPress={() => onNavigate(crumb.level)}
               disabled={isLast}
@@ -165,11 +161,12 @@ function Breadcrumbs({ crumbs, onNavigate }: BreadcrumbsProps) {
               testID={`program-planning-page-crumb-${crumb.key}`}
             >
               <Text
+                className={isLast ? 'text-text-primary' : undefined}
                 style={{
                   fontSize: 12,
                   fontFamily: 'Inter, sans-serif',
                   fontWeight: isLast ? '700' : '500',
-                  color: isLast ? TEXT_PRIMARY : BRAND_PRIMARY,
+                  color: isLast ? undefined : BRAND_PRIMARY,
                 }}
               >
                 {crumb.label}
@@ -351,8 +348,8 @@ export function ProgramPlanningPage({
 
   return (
     <View
-      className={className}
-      style={{ width: 390, backgroundColor: PAGE_BG }}
+      className={cn(className, 'bg-background-base')}
+      style={{ width: 390 }}
       accessibilityRole={'main' as ViewProps['accessibilityRole']}
       aria-label={title}
       testID="program-planning-page"
@@ -361,11 +358,11 @@ export function ProgramPlanningPage({
       <View style={{ padding: 16, gap: 14 }} testID="program-planning-page-content">
         <Text
           accessibilityRole="header"
+          className="text-text-primary"
           style={{
             fontSize: 20,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: TEXT_PRIMARY,
           }}
           testID="program-planning-page-title"
         >
@@ -388,10 +385,9 @@ export function ProgramPlanningPage({
         )}
 
         <View
+          className="bg-surface-elevated border-border"
           style={{
-            backgroundColor: SURFACE_ELEVATED,
             borderWidth: 1,
-            borderColor: BORDER_DEFAULT,
             borderRadius: 12,
             padding: 12,
           }}

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

@@ -8,8 +8,6 @@ const BRAND_PRIMARY_SUBTLE = 'rgba(255,121,0,0.12)'
 const STATUS_SUCCESS = '#14B8A6'
 const STATUS_WARNING = '#FFB020'
 const STATUS_ERROR = '#D14343'
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
 
 /** Emoji option sets per known factor, keyed by lowercase id/label. */
 const EMOJI_SETS: Record<string, readonly string[]> = {
@@ -91,7 +89,8 @@ function EmojiSlider({ factor }: EmojiSliderProps) {
   return (
     <View style={{ marginTop: 14 }} testID={`readiness-check-factor-${factor.id}`}>
       <Text
-        style={{ fontSize: 12, fontWeight: '500', fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+        className="text-text-secondary"
+        style={{ fontSize: 12, fontWeight: '500', fontFamily: 'Inter, sans-serif' }}
         testID="readiness-check-factor-label"
       >
         {factor.label}
@@ -114,14 +113,15 @@ function EmojiSlider({ factor }: EmojiSliderProps) {
               accessibilityLabel={`${factor.label} level ${level} of 5`}
               aria-checked={selected}
               testID="readiness-check-emoji"
+              className={selected ? undefined : 'border-border bg-surface-raised'}
               style={({ pressed }) => ({
                 flex: 1,
                 alignItems: 'center',
                 paddingVertical: 8,
                 borderRadius: 8,
                 borderWidth: 1,
-                borderColor: selected ? BRAND_PRIMARY : 'var(--color-border-default)',
-                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : 'var(--color-surface-raised)',
+                borderColor: selected ? BRAND_PRIMARY : undefined,
+                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : undefined,
                 opacity: selected ? 1 : pressed ? 0.8 : 0.55,
                 transform: [{ scale: selected ? 1.06 : 1 }],
               })}
@@ -143,13 +143,13 @@ function ScoreGauge({ score }: { score: number }) {
       accessibilityRole="image"
       accessibilityLabel={`Readiness score: ${score} out of 100`}
       testID="readiness-check-score"
+      className="bg-surface-raised"
       style={{
         width: 60,
         height: 60,
         borderRadius: 30,
         borderWidth: 4,
         borderColor: color,
-        backgroundColor: 'var(--color-surface-raised)',
         alignItems: 'center',
         justifyContent: 'center',
       }}
@@ -169,19 +169,19 @@ function WarmUpCard({ validation }: { validation: WarmUpValidation }) {
   const badge = WARMUP_BADGE[validation.status]
   return (
     <View
+      className="border-border bg-surface-raised"
       style={{
         marginTop: 16,
         padding: 12,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: 'var(--color-border-default)',
-        backgroundColor: 'var(--color-surface-raised)',
       }}
       testID="readiness-check-warmup"
     >
       <View className="flex-row items-center justify-between" style={{ gap: 8 }}>
         <Text
-          style={{ fontSize: 12, fontWeight: '600', fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+          className="text-text-secondary"
+          style={{ fontSize: 12, fontWeight: '600', fontFamily: 'Inter, sans-serif' }}
           testID="readiness-check-warmup-deficit"
         >
           {velocityDeficitText(validation.velocityDeficit)}
@@ -191,7 +191,8 @@ function WarmUpCard({ validation }: { validation: WarmUpValidation }) {
         </Badge>
       </View>
       <Text
-        style={{ marginTop: 6, fontSize: 13, fontFamily: 'Inter, sans-serif', color: TEXT_PRIMARY }}
+        className="text-text-primary"
+        style={{ marginTop: 6, fontSize: 13, fontFamily: 'Inter, sans-serif' }}
         testID="readiness-check-warmup-recommendation"
       >
         {validation.recommendation}
@@ -226,7 +227,8 @@ export function ReadinessCheck({
       <View style={{ padding: 16 }}>
         <View className="flex-row items-center justify-between" style={{ gap: 12 }}>
           <Text
-            style={{ fontSize: 18, fontWeight: '700', fontFamily: '"Space Grotesk", sans-serif', color: TEXT_PRIMARY }}
+            className="text-text-primary"
+            style={{ fontSize: 18, fontWeight: '700', fontFamily: '"Space Grotesk", sans-serif' }}
             testID="readiness-check-title"
           >
             How are you feeling?

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

@@ -1,5 +1,6 @@
 // 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'
 
 const BRAND_PRIMARY = '#FF7900'
 
@@ -34,11 +35,11 @@ export function RestTimer({
 
   return (
     <View
+      className="bg-surface-raised"
       style={{
         width: '100%',
-        backgroundColor: 'var(--color-surface-raised)',
         borderTopWidth: 1,
-        borderTopColor: 'var(--color-border-default)',
+        borderTopColor: resolveColor('border-default'),
         paddingVertical: 12,
         paddingHorizontal: 16,
       }}
@@ -58,13 +59,13 @@ export function RestTimer({
         {/* Left side */}
         <View style={{ flexDirection: 'column' }}>
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 11,
               fontFamily: 'Inter, sans-serif',
               fontWeight: '600',
               textTransform: 'uppercase',
               letterSpacing: 1,
-              color: 'var(--color-text-secondary)',
             }}
             testID="rest-timer-label"
           >
@@ -72,10 +73,10 @@ export function RestTimer({
           </Text>
           {nextSetInfo != null && (
             <Text
+              className="text-text-tertiary"
               style={{
                 fontSize: 11,
                 fontFamily: 'Inter, sans-serif',
-                color: 'var(--color-text-tertiary)',
                 marginTop: 2,
               }}
               testID="rest-timer-next-set"
@@ -87,11 +88,11 @@ export function RestTimer({
 
         {/* Right side - time display */}
         <Text
+          className="text-text-primary"
           style={{
             fontSize: 28,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: 'var(--color-text-primary)',
             fontVariant: ['tabular-nums'],
             letterSpacing: -0.5,
           }}
@@ -103,9 +104,9 @@ export function RestTimer({
 
       {/* Progress bar */}
       <View
+        className="bg-border"
         style={{
           height: 3,
-          backgroundColor: 'var(--color-border-default)',
           borderRadius: 2,
           marginBottom: 12,
         }}
@@ -137,11 +138,11 @@ export function RestTimer({
           testID="rest-timer-add-time"
         >
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 11,
               fontFamily: 'Inter, sans-serif',
               fontWeight: '600',
-              color: 'var(--color-text-secondary)',
             }}
           >
             +30s

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

@@ -106,11 +106,11 @@ export function SetRow({
           </Text>
         ) : (
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 13,
               fontWeight: '600',
               fontFamily: 'Inter, sans-serif',
-              color: 'var(--color-text-secondary)',
             }}
           >
             {setNumber}
@@ -123,10 +123,10 @@ export function SetRow({
         testID="set-row-previous"
       >
         <Text
+          className="text-text-secondary"
           style={{
             fontSize: 12,
             fontFamily: 'Inter, sans-serif',
-            color: 'var(--color-text-secondary)',
           }}
         >
           {previous
@@ -141,11 +141,11 @@ export function SetRow({
       >
         {isActive && reps == null && targets ? (
           <Text
+            className="text-text-tertiary"
             style={{
               fontSize: 13,
               fontStyle: 'italic',
               fontFamily: 'Inter, sans-serif',
-              color: 'var(--color-text-tertiary)',
             }}
             testID="set-row-target-reps"
           >
@@ -153,11 +153,11 @@ export function SetRow({
           </Text>
         ) : (
           <Text
+            className={reps != null ? 'text-text-primary' : 'text-text-tertiary'}
             style={{
               fontSize: 14,
               fontWeight: '600',
               fontFamily: 'Inter, sans-serif',
-              color: reps != null ? 'var(--color-text-primary)' : 'var(--color-text-tertiary)',
             }}
           >
             {reps != null ? reps : '\u2014'}
@@ -171,11 +171,11 @@ export function SetRow({
       >
         {isActive && weight == null && targets ? (
           <Text
+            className="text-text-tertiary"
             style={{
               fontSize: 13,
               fontStyle: 'italic',
               fontFamily: 'Inter, sans-serif',
-              color: 'var(--color-text-tertiary)',
             }}
             testID="set-row-target-weight"
           >
@@ -183,11 +183,11 @@ export function SetRow({
           </Text>
         ) : (
           <Text
+            className={weight != null ? 'text-text-primary' : 'text-text-tertiary'}
             style={{
               fontSize: 14,
               fontWeight: '600',
               fontFamily: 'Inter, sans-serif',
-              color: weight != null ? 'var(--color-text-primary)' : 'var(--color-text-tertiary)',
             }}
           >
             {weight != null ? roundWeight(weight) : '\u2014'}
@@ -200,11 +200,14 @@ export function SetRow({
         testID="set-row-rpe"
       >
         <Text
+          className={rpe != null ? undefined : 'text-text-tertiary'}
           style={{
             fontSize: 13,
             fontWeight: '600',
             fontFamily: 'Inter, sans-serif',
-            color: rpe != null ? rpeColor(rpe) : 'var(--color-text-tertiary)',
+            // rpeColor returns a concrete hex (native-safe); only the tertiary
+            // fallback needs the className token.
+            color: rpe != null ? rpeColor(rpe) : undefined,
           }}
         >
           {rpe != null ? roundRpe(rpe) : '\u2014'}

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

@@ -2,17 +2,16 @@
 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'
 
 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 BORDER_STRONG = 'var(--color-border-strong)'
+// 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 GRID_LINE = 'rgba(255,255,255,0.06)'
-const TOOLTIP_BG = 'var(--color-surface-elevated)'
 const SUCCESS_PILL_BG = 'rgba(20,184,166,0.10)'
 const SUCCESS_PILL_BORDER = 'rgba(20,184,166,0.20)'
 const ERROR_PILL_BG = 'rgba(209,67,67,0.10)'
@@ -312,7 +311,7 @@ export function StrengthTrendChart({
             justifyContent: 'center',
           }}
         >
-          <Text style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_TERTIARY }}>
+          <Text className="text-text-tertiary" style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}>
             No strength data yet
           </Text>
         </View>
@@ -358,6 +357,7 @@ export function StrengthTrendChart({
               }}
             >
               <Text
+                className="text-text-tertiary"
                 style={{
                   position: 'absolute',
                   left: -PLOT_LEFT,
@@ -366,7 +366,6 @@ export function StrengthTrendChart({
                   textAlign: 'right',
                   fontSize: 9,
                   fontFamily: 'Inter, sans-serif',
-                  color: TEXT_TERTIARY,
                 }}
               >
                 {line.label}
@@ -406,7 +405,7 @@ export function StrengthTrendChart({
             <View style={{ width, height, position: 'absolute', top: 0, left: 0 }}>
               <ChartLine
                 coords={geometry.projection}
-                color={TEXT_TERTIARY}
+                color={PROJECTION_LINE_COLOR}
                 strokeWidth={2}
                 dashed
                 testID="strength-trend-chart-projection-segment"
@@ -475,6 +474,7 @@ export function StrengthTrendChart({
           <View
             testID="strength-trend-chart-tooltip"
             accessibilityElementsHidden
+            className="bg-surface-elevated border-border-strong"
             style={{
               position: 'absolute',
               left: Math.max(
@@ -483,30 +483,28 @@ export function StrengthTrendChart({
               ),
               top: Math.max(0, selectedCoord.y - 52),
               maxWidth: TOOLTIP_WIDTH,
-              backgroundColor: TOOLTIP_BG,
               borderWidth: 1,
-              borderColor: BORDER_STRONG,
               borderRadius: 8,
               paddingVertical: 8,
               paddingHorizontal: 10,
             }}
           >
             <Text
+              className="text-text-tertiary"
               style={{
                 fontSize: 10,
                 fontFamily: 'Inter, sans-serif',
-                color: TEXT_TERTIARY,
               }}
             >
               {selectedCoord.point.sessionLabel ?? selectedCoord.point.date}
             </Text>
             <Text
+              className="text-text-primary"
               style={{
                 marginTop: 2,
                 fontSize: 13,
                 fontFamily: 'Inter, sans-serif',
                 fontWeight: '700',
-                color: TEXT_PRIMARY,
               }}
             >
               {`${formatValue(selectedCoord.point.e1rm)} ${unit}`}
@@ -547,6 +545,7 @@ export function StrengthTrendChart({
             <Text
               key={`axis-${i}`}
               testID="strength-trend-chart-axis-label"
+              className="text-text-tertiary"
               style={{
                 position: 'absolute',
                 left: boundary.x - 24,
@@ -554,7 +553,6 @@ export function StrengthTrendChart({
                 textAlign: 'center',
                 fontSize: 10,
                 fontFamily: 'Inter, sans-serif',
-                color: TEXT_TERTIARY,
               }}
             >
               {boundary.label}
@@ -598,7 +596,7 @@ export function StrengthTrendChart({
       >
         <View className="flex-row items-center" style={{ gap: 5 }}>
           <View style={{ width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY }} />
-          <Text style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}>
+          <Text className="text-text-secondary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}>
             Actual
           </Text>
         </View>
@@ -609,16 +607,16 @@ export function StrengthTrendChart({
               height: 0,
               borderTopWidth: 2,
               borderStyle: 'dashed',
-              borderTopColor: TEXT_TERTIARY,
+              borderTopColor: PROJECTION_LINE_COLOR,
             }}
           />
-          <Text style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}>
+          <Text className="text-text-secondary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}>
             Projected
           </Text>
         </View>
         <View className="flex-row items-center" style={{ gap: 5 }}>
           <Text style={{ fontSize: 12, color: STATUS_WARNING }}>★</Text>
-          <Text style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}>
+          <Text className="text-text-secondary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}>
             PR
           </Text>
         </View>