@titan-design/react-ui 0.2.7 → 0.4.0

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

@@ -11,7 +11,6 @@ import {
   type ViewStyle,
 } from 'react-native'
 import { Badge, type BadgeColor } from '../../ui/badge'
-import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 import { Sparkline } from './Sparkline'
 import {
   MuscleGroup,
@@ -20,14 +19,7 @@ import {
   type VolumeStatus,
 } from './muscleTaxonomy'
 
-const SURFACE_ELEVATED = WORKOUT_TOKENS.surface.elevated
-const SURFACE_RAISED = WORKOUT_TOKENS.surface.raised
-const BORDER_STRONG = WORKOUT_TOKENS.border.strong
-const BORDER_DEFAULT = WORKOUT_TOKENS.border.default
 const BRAND_PRIMARY = '#FF7900'
-const TEXT_PRIMARY = '#F3F4F6'
-const TEXT_SECONDARY = '#9CA3AF'
-const TEXT_TERTIARY = '#6B7280'
 
 /** Volume track gradient: status-info (blue) -> result-improve (teal) -> status-error (red). */
 const VOLUME_GRADIENT = 'linear-gradient(90deg, #2196F3 0%, #14B8A6 50%, #D14343 100%)'
@@ -206,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%',
@@ -225,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>
@@ -243,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"
               >
@@ -270,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}`}
@@ -289,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>
@@ -311,6 +305,7 @@ export function BodyMapDetailPanel({
                 accessibilityElementsHidden
               />
               <View
+                className="border-text-primary bg-surface-elevated"
                 style={{
                   position: 'absolute',
                   left: `${markerLeft}%`,
@@ -319,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
@@ -331,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`}
@@ -352,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
@@ -370,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,
                 }}
               >
@@ -383,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)}%`}
@@ -416,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,
                 }}
               >
@@ -434,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 = '#6B7280'
 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.test.tsx

@@ -100,6 +100,30 @@ describe('ExerciseCard', () => {
       expect(headers).toHaveTextContent('RPE')
     })
 
+    it('shows the KG weight header when the unit is kg', () => {
+      render(
+        <ExerciseCard
+          {...expandedProps}
+          summary={{ sets: 3, reps: 8, weight: 84, unit: 'kg' }}
+        />,
+      )
+      const headers = screen.getByTestId('exercise-card-column-headers')
+      expect(headers).toHaveTextContent('KG')
+      expect(headers).not.toHaveTextContent('LBS')
+    })
+
+    it('derives the weight header from the sets unit when summary is absent', () => {
+      render(
+        <ExerciseCard
+          name="Squat"
+          state="expanded"
+          onToggle={vi.fn()}
+          sets={[{ mode: 'completed', setNumber: 1, reps: 8, weight: 60, unit: 'kg' }]}
+        />,
+      )
+      expect(screen.getByTestId('exercise-card-column-headers')).toHaveTextContent('KG')
+    })
+
     it('renders SetRow components', () => {
       render(<ExerciseCard {...expandedProps} />)
       const setRows = screen.getAllByTestId('set-row')

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

@@ -1,13 +1,14 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useState } from 'react'
 import { View, Text, Pressable } from 'react-native'
-import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 import { VelocityStrip } from './VelocityStrip'
 import { PlaceholderStrip } from './PlaceholderStrip'
 import { WeightBadge } from './WeightBadge'
 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,15 +35,11 @@ export interface ExerciseCardProps {
   supersetColor?: string
 }
 
-const COLORS = {
-  textPrimary: '#F3F4F6',
-  textSecondary: '#9CA3AF',
-  textTertiary: '#6B7280',
-  brandPrimary: '#FF7900',
+/** 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']
 }
 
-const COLUMN_HEADERS = ['SET', 'PREV', 'REPS', 'LBS', 'RPE'] as const
-
 function getSupersetBorderRadius(
   position: ExerciseCardProps['supersetPosition'],
 ): Record<string, number> {
@@ -89,7 +86,7 @@ function getSupersetMargin(
 
 function formatSummary(summary: ExerciseCardProps['summary']): string {
   if (!summary) return ''
-  return `${summary.sets}\u00D7${summary.reps} @ ${summary.weight} ${summary.unit}`
+  return `${summary.sets}\u00D7${summary.reps} @ ${roundWeight(summary.weight)} ${summary.unit}`
 }
 
 function formatAccessibilityLabel(
@@ -128,13 +125,11 @@ function CollapsedCard({
       testID="exercise-card"
     >
       <View
+        className={pressed ? 'bg-surface-raised' : undefined}
         style={{
           padding: 12,
           paddingHorizontal: 14,
           cursor: 'pointer',
-          backgroundColor: pressed
-            ? WORKOUT_TOKENS.surface.raised
-            : 'transparent',
           ...borderRadius,
           ...supersetMargin,
         }}
@@ -144,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"
           >
@@ -157,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"
@@ -170,7 +165,7 @@ function CollapsedCard({
           )}
           {e1rm && (
             <WeightBadge
-              value={e1rm.value}
+              value={roundWeight(e1rm.value)}
               unit={e1rm.unit}
               size="sm"
               showIcon={false}
@@ -223,13 +218,16 @@ function ExpandedCard({
 }: ExerciseCardProps) {
   const borderRadius = getSupersetBorderRadius(supersetPosition)
   const supersetMargin = getSupersetMargin(supersetPosition)
+  // Summary is the card-level authority for the weight column; fall back to the
+  // first set's unit, then lbs. (Mixed per-set units keep the card-level label.)
+  const unit = summary?.unit ?? sets?.[0]?.unit ?? 'lbs'
+  const columnHeaders = buildColumnHeaders(unit)
 
   return (
     <View
+      className="bg-surface-elevated border-border"
       style={{
-        backgroundColor: WORKOUT_TOKENS.surface.elevated,
         borderWidth: 1,
-        borderColor: WORKOUT_TOKENS.border.default,
         ...borderRadius,
         ...supersetMargin,
       }}
@@ -249,15 +247,15 @@ function ExpandedCard({
             paddingHorizontal: 14,
             paddingBottom: 10,
             borderBottomWidth: 1,
-            borderBottomColor: WORKOUT_TOKENS.border.default,
+            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"
           >
@@ -266,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"
@@ -279,7 +277,7 @@ function ExpandedCard({
           )}
           {e1rm && (
             <WeightBadge
-              value={e1rm.value}
+              value={roundWeight(e1rm.value)}
               unit={e1rm.unit}
               size="sm"
               showIcon={false}
@@ -309,7 +307,7 @@ function ExpandedCard({
         }}
         testID="exercise-card-column-headers"
       >
-        {COLUMN_HEADERS.map((header, i) => {
+        {columnHeaders.map((header, i) => {
           const widths = [36, undefined, 44, 56, 36]
           const width = widths[i]
           const isFlex = width === undefined
@@ -326,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}
@@ -376,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"
         >
@@ -388,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"
@@ -402,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"
           >