@titan-design/react-ui 0.2.7 → 0.4.0

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

@@ -1,7 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import React from 'react'
 import { View, Text, Pressable, TextInput } from 'react-native'
-import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+import { resolveColor } from '../../../theme/resolve-color'
 
 export interface InputBarProps {
   exerciseName: string
@@ -18,19 +18,15 @@ export interface InputBarProps {
 }
 
 const BRAND_PRIMARY = '#FF7900'
-const TEXT_PRIMARY = '#F3F4F6'
-const TEXT_TERTIARY = '#6B7280'
+const INPUT_CLASSNAME = 'bg-surface-raised border-border-strong text-text-primary'
 
 const inputStyle = {
   fontSize: 14,
   fontWeight: '600' as const,
   fontFamily: 'Inter, sans-serif',
-  backgroundColor: WORKOUT_TOKENS.surface.raised,
   borderWidth: 1,
-  borderColor: WORKOUT_TOKENS.border.strong,
   borderRadius: 6,
   textAlign: 'center' as const,
-  color: TEXT_PRIMARY,
   paddingVertical: 5,
   paddingHorizontal: 2,
 }
@@ -54,11 +50,11 @@ export function InputBar({
 
   return (
     <View
+      className="bg-surface-elevated"
       style={{
         width: '100%',
-        backgroundColor: WORKOUT_TOKENS.surface.elevated,
         borderTopWidth: 1,
-        borderTopColor: WORKOUT_TOKENS.border.default,
+        borderTopColor: resolveColor('border-default'),
         paddingTop: 10,
         paddingHorizontal: 16,
         paddingBottom: 12,
@@ -71,11 +67,11 @@ export function InputBar({
     >
       <View style={{ minWidth: 80, flexDirection: 'column' }}>
         <Text
+          className="text-text-primary"
           style={{
             fontSize: 12,
             fontWeight: '700',
             fontFamily: '"Space Grotesk", sans-serif',
-            color: TEXT_PRIMARY,
           }}
           testID="input-bar-exercise-name"
           numberOfLines={1}
@@ -83,10 +79,10 @@ export function InputBar({
           {exerciseName}
         </Text>
         <Text
+          className="text-text-tertiary"
           style={{
             fontSize: 10,
             fontFamily: 'Inter, sans-serif',
-            color: TEXT_TERTIARY,
           }}
           testID="input-bar-set-info"
         >
@@ -98,16 +94,17 @@ export function InputBar({
         <TextInput
           value={reps}
           onChangeText={onRepsChange}
+          className={INPUT_CLASSNAME}
           style={{ ...inputStyle, width: 36 }}
           accessibilityLabel="Reps"
           testID="input-bar-reps"
           keyboardType="numeric"
         />
         <Text
+          className="text-text-tertiary"
           style={{
             fontSize: 12,
             fontFamily: 'Inter, sans-serif',
-            color: TEXT_TERTIARY,
           }}
         >
           {'\u00D7'}
@@ -115,17 +112,18 @@ export function InputBar({
         <TextInput
           value={weight}
           onChangeText={onWeightChange}
+          className={INPUT_CLASSNAME}
           style={{ ...inputStyle, width: 52 }}
           accessibilityLabel={`Weight in ${unit}`}
           testID="input-bar-weight"
           keyboardType="numeric"
         />
         <Text
+          className="text-text-tertiary"
           style={{
             fontSize: 12,
             fontWeight: '500',
             fontFamily: 'Inter, sans-serif',
-            color: TEXT_TERTIARY,
           }}
           testID="input-bar-unit"
         >

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

@@ -9,8 +9,6 @@ const BRAND_PRIMARY = '#FF7900'
 const BRAND_PRIMARY_DARK = '#C45E00'
 const BRAND_PRIMARY_LIGHT = '#FFB066'
 const BORDER_DEFAULT = '#1F1F1F'
-const TEXT_PRIMARY = '#F3F4F6'
-const TEXT_SECONDARY = '#9CA3AF'
 
 /** Gradient stops for the 3px top accent: dark -> primary -> light. */
 const ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY, BRAND_PRIMARY_LIGHT]
@@ -117,11 +115,11 @@ export function MesoCard({
     <View style={{ paddingHorizontal: 14, paddingTop: 12, paddingBottom: 10 }} testID="meso-card-body">
       <View className="flex-row items-center" style={{ gap: 8 }} testID="meso-card-header">
         <Text
+          className="text-text-primary"
           style={{
             fontSize: 15,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: TEXT_PRIMARY,
           }}
           testID="meso-card-name"
         >
@@ -133,11 +131,11 @@ export function MesoCard({
       </View>
 
       <Text
+        className="text-text-secondary"
         style={{
           marginTop: 4,
           fontSize: 12,
           fontFamily: 'Inter, sans-serif',
-          color: TEXT_SECONDARY,
         }}
         testID="meso-card-subheader"
       >

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

@@ -139,3 +139,15 @@ describe('MesoProgressBar', () => {
     })
   })
 })
+
+describe('MesoProgressBar invalid weekCount (flex guard)', () => {
+  it('clamps zero and negative weekCount to a valid flex of 1', () => {
+    const edgeMesos: Meso[] = [
+      { id: 'z', name: 'Zero', weekCount: 0, status: 'upcoming' },
+      { id: 'n', name: 'Neg', weekCount: -3, status: 'upcoming' },
+    ]
+    render(<MesoProgressBar mesos={edgeMesos} activeMesoId={null} onMesoPress={vi.fn()} />)
+    expect(screen.getByTestId('meso-segment-z')).toHaveStyle({ flex: 1 })
+    expect(screen.getByTestId('meso-segment-n')).toHaveStyle({ flex: 1 })
+  })
+})

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

@@ -66,9 +66,13 @@ function MesoSegment({ meso, isActive, onPress }: SegmentProps) {
     ? clampProgress(meso.currentWeek, meso.weekCount)
     : 0
 
+  // weekCount drives the segment's flex width; guard 0 / negative so flex stays
+  // a valid positive value and the segment never collapses out of the layout.
+  const segmentFlex = Math.max(1, meso.weekCount)
+
   return (
     <Pressable
-      style={{ flex: meso.weekCount }}
+      style={{ flex: segmentFlex }}
       onPress={() => onPress(meso.id)}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}

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

@@ -3,13 +3,11 @@ import { Fragment, type ReactNode } from 'react'
 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'
 
 const BRAND_PRIMARY = '#FF7900'
 const BRAND_PRIMARY_DARK = '#C45E00'
 const BRAND_PRIMARY_LIGHT = '#FFB066'
-const TEXT_PRIMARY = '#F3F4F6'
-const TEXT_SECONDARY = '#9CA3AF'
-const TEXT_TERTIARY = '#6B7280'
 
 const SUCCESS = '#14B8A6'
 const WARNING = '#FFB020'
@@ -18,9 +16,12 @@ const ERROR = '#D14343'
 /** Gradient stops for the 3px top accent: dark -> primary -> light (matches MesoCard). */
 const ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY, BRAND_PRIMARY_LIGHT]
 
-/** Card surface gradient: surface-elevated -> near-black at 135deg. */
-const CARD_GRADIENT =
-  'linear-gradient(135deg, #191919 0%, rgba(25,25,25,0.95) 100%)'
+/**
+ * Card surface gradient: elevated -> raised at 135deg. Uses resolved dark-theme
+ * hexes (a gradient string can't carry a className token, and var() renders
+ * black on native).
+ */
+const CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor('surface-elevated')} 0%, ${resolveColor('surface-raised')} 100%)`
 
 /** Gauge track gradient (teal -> amber -> red) at 0.25 alpha. */
 const GAUGE_GRADIENT =
@@ -118,7 +119,8 @@ function renderCoachingText(text: string, highlights?: string[]): ReactNode {
     highlights.includes(part) ? (
       <Text
         key={`${part}-${index}`}
-        style={{ fontWeight: '700', color: TEXT_PRIMARY }}
+        className="text-text-primary"
+        style={{ fontWeight: '700' }}
       >
         {part}
       </Text>
@@ -166,24 +168,24 @@ function MetricCell({ metric }: { metric: MesoStatusMetric }) {
   return (
     <View style={{ width: '48%' }} testID="meso-status-card-metric">
       <Text
+        className="text-text-tertiary"
         style={{
           fontSize: 10,
           fontFamily: 'Inter, sans-serif',
           fontWeight: '600',
           letterSpacing: 0.5,
           textTransform: 'uppercase',
-          color: TEXT_TERTIARY,
         }}
       >
         {metric.label}
       </Text>
       <Text
+        className="text-text-primary"
         style={{
           marginTop: 2,
           fontSize: 13,
           fontFamily: 'Inter, sans-serif',
           fontWeight: '600',
-          color: TEXT_PRIMARY,
         }}
       >
         {metric.value}
@@ -212,24 +214,24 @@ function Gauge({ gauge }: { gauge: MesoStatusGauge }) {
         accessibilityElementsHidden
       >
         <Text
+          className="text-text-secondary"
           style={{
             fontSize: 10,
             fontFamily: 'Inter, sans-serif',
             fontWeight: '500',
             letterSpacing: 0.5,
             textTransform: 'uppercase',
-            color: TEXT_SECONDARY,
           }}
         >
           {gauge.label}
         </Text>
         {gauge.sublabel != null && (
           <Text
+            className="text-text-tertiary"
             style={{
               fontSize: 10,
               fontFamily: 'Inter, sans-serif',
               fontWeight: '500',
-              color: TEXT_TERTIARY,
             }}
           >
             {gauge.sublabel}
@@ -261,6 +263,7 @@ function Gauge({ gauge }: { gauge: MesoStatusGauge }) {
           testID="meso-status-card-gauge-center"
         />
         <View
+          className="border-text-primary"
           style={{
             position: 'absolute',
             left: `${percentage}%`,
@@ -270,7 +273,6 @@ function Gauge({ gauge }: { gauge: MesoStatusGauge }) {
             height: 14,
             borderRadius: 9999,
             borderWidth: 2,
-            borderColor: TEXT_PRIMARY,
             backgroundColor: markerColor,
             boxShadow: '0 0 4px rgba(0,0,0,0.5)',
           }}
@@ -349,12 +351,12 @@ export function MesoStatusCard({
             style={{ gap: 8 }}
           >
             <Text
+              className="text-text-primary"
               style={{
                 flexShrink: 1,
                 fontSize: 15,
                 fontFamily: '"Space Grotesk", sans-serif',
                 fontWeight: '700',
-                color: TEXT_PRIMARY,
               }}
               testID="meso-status-card-name"
             >
@@ -363,11 +365,11 @@ export function MesoStatusCard({
             <StatusPill badge={statusBadge} />
           </View>
           <Text
+            className="text-text-secondary"
             style={{
               marginTop: 4,
               fontSize: 12,
               fontFamily: 'Inter, sans-serif',
-              color: TEXT_SECONDARY,
             }}
             testID="meso-status-card-subtitle"
           >
@@ -408,11 +410,11 @@ export function MesoStatusCard({
             testID="meso-status-card-coaching"
           >
             <Text
+              className="text-text-secondary"
               style={{
                 fontSize: 12,
                 lineHeight: 17,
                 fontFamily: 'Inter, sans-serif',
-                color: TEXT_SECONDARY,
               }}
             >
               {renderCoachingText(coaching.text, coaching.highlights)}

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

@@ -34,16 +34,14 @@ export function MuscleGroupChip({
 
   const content = (
     <View
-      className={className}
+      className={['bg-surface-raised border-border', className].filter(Boolean).join(' ')}
       style={{
         flexDirection: 'row',
         alignItems: 'center',
         borderRadius: 9999,
         paddingHorizontal: 9,
         paddingVertical: 3,
-        backgroundColor: 'var(--color-surface-raised)',
         borderWidth: 1,
-        borderColor: 'var(--color-border-default)',
       }}
       accessibilityLabel={onPress ? undefined : `${name}, volume status: ${statusLabel}`}
       testID="muscle-group-chip"
@@ -62,11 +60,11 @@ export function MuscleGroupChip({
         testID="muscle-group-chip-dot"
       />
       <Text
+        className="text-text-secondary"
         style={{
           fontFamily: 'Inter, sans-serif',
           fontWeight: '500',
           fontSize: 11,
-          color: 'var(--color-text-secondary)',
         }}
         accessibilityElementsHidden
       >

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

@@ -1,7 +1,6 @@
 // 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
@@ -19,14 +18,13 @@ function SingleStrip({
 }: Omit<PlaceholderStripProps, 'mode' | 'segments'>) {
   return (
     <View
-      className={cn(className)}
+      className={cn('border-border-strong', className)}
       style={[
         {
           height: 3,
           backgroundColor: 'transparent',
           borderWidth: 1,
           borderStyle: 'dashed',
-          borderColor: WORKOUT_TOKENS.border.strong,
           borderRadius: 1,
           opacity: 0.5,
         },
@@ -61,13 +59,13 @@ 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',
-            borderColor: WORKOUT_TOKENS.border.strong,
             borderRadius: 1,
             minWidth: 4,
           }}

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 = '#1C1C1C'
-const BORDER_DEFAULT = '#1F1F1F'
-const TEXT_PRIMARY = '#F3F4F6'
-const TEXT_SECONDARY = '#9CA3AF'
-const TEXT_TERTIARY = '#6B7280'
+// 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