@titan-design/react-ui 0.3.0 → 0.5.0

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

@@ -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 { VelocityStrip } from './VelocityStrip'
+import { VelocityStrip, type VelocityZoneBandProp } 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'
 
@@ -25,6 +26,8 @@ export interface ExerciseCardProps {
   e1rm?: { value: number; unit: 'lbs' | 'kg' }
   isPR?: boolean
   setVelocities?: number[][]
+  /** Optional velocity-zone bands shared across this exercise's sets (WA bands). */
+  velocityZones?: readonly VelocityZoneBandProp[]
   totalPlannedSets?: number
   sets?: SetRowProps[]
   tempo?: [number, number, number, number]
@@ -34,21 +37,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']
@@ -120,6 +108,7 @@ function CollapsedCard({
   e1rm,
   isPR,
   setVelocities,
+  velocityZones,
   totalPlannedSets,
   supersetPosition,
 }: ExerciseCardProps) {
@@ -139,11 +128,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 +142,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 +155,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"
@@ -203,6 +192,7 @@ function CollapsedCard({
               <VelocityStrip
                 key={i}
                 velocities={velocities}
+                zones={velocityZones}
                 variant="mini"
                 testID={`exercise-card-velocity-strip-${i}`}
               />
@@ -239,10 +229,9 @@ function ExpandedCard({
 
   return (
     <View
+      className="bg-surface-elevated border-border"
       style={{
-        backgroundColor: COLORS.surfaceElevated,
         borderWidth: 1,
-        borderColor: COLORS.borderDefault,
         ...borderRadius,
         ...supersetMargin,
       }}
@@ -262,15 +251,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 +268,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 +328,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 +378,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 +390,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 +404,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"
           >

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

@@ -15,15 +15,16 @@ import {
 } from './CapacityBandChart'
 import { ExerciseCard, type ExerciseCardProps } from './ExerciseCard'
 import { type SetRowProps } from './SetRow'
-import { VelocityStrip, calculateMeanVelocity, calculateVelocityLoss } from './VelocityStrip'
+import {
+  VelocityStrip,
+  calculateMeanVelocity,
+  calculateVelocityLoss,
+  type VelocityZoneBandProp,
+} from './VelocityStrip'
+import { resolveColor } from '../../../theme/resolve-color'
+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_SECONDARY = 'var(--color-text-secondary)'
-const TEXT_TERTIARY = 'var(--color-text-tertiary)'
-const PAGE_BG = 'var(--color-background-base)'
 
 /** Inner plot width: page width 390 − 16 page padding − 12 card padding on each side. */
 const CHART_WIDTH = 326
@@ -101,6 +102,8 @@ export interface ExerciseVbt {
   projection?: CapacityBandProjection
   /** Per-set velocity traces for the most recent session. */
   sets: ExerciseVbtSet[]
+  /** Optional velocity-zone bands for this exercise (WA `VelocityZones.bands`). */
+  zones?: readonly VelocityZoneBandProp[]
 }
 
 /** Page-level roll-up of the logged sessions. */
@@ -190,7 +193,7 @@ function TabBar({ active, onSelect }: TabBarProps) {
       className="flex-row"
       style={{
         borderBottomWidth: 1,
-        borderBottomColor: BORDER_DEFAULT,
+        borderBottomColor: resolveColor('border-default'),
       }}
       accessibilityRole={'tablist' as ViewProps['accessibilityRole']}
       testID="exercise-detail-page-tabs"
@@ -213,11 +216,11 @@ function TabBar({ active, onSelect }: TabBarProps) {
             testID={`exercise-detail-page-tab-${key}`}
           >
             <Text
+              className={isActive ? 'text-text-primary' : 'text-text-tertiary'}
               style={{
                 fontSize: 13,
                 fontFamily: 'Inter, sans-serif',
                 fontWeight: isActive ? '700' : '500',
-                color: isActive ? TEXT_PRIMARY : TEXT_TERTIARY,
               }}
             >
               {label}
@@ -244,27 +247,27 @@ function StatStrip({ stats, unit }: { stats: ExerciseDetailStats; unit: 'lbs' |
         return (
           <View
             key={key}
+            className="bg-surface-elevated border-border"
             style={{
               flex: 1,
               padding: 12,
               borderRadius: 10,
-              backgroundColor: SURFACE_ELEVATED,
               borderWidth: 1,
-              borderColor: BORDER_DEFAULT,
             }}
             testID={`exercise-detail-page-stat-${key}`}
           >
             <Text
+              className="text-text-primary"
               style={{
                 fontSize: 18,
                 fontFamily: '"Space Grotesk", sans-serif',
                 fontWeight: '700',
-                color: TEXT_PRIMARY,
               }}
             >
               {value}
             </Text>
             <Text
+              className="text-text-tertiary"
               style={{
                 marginTop: 2,
                 fontSize: 10,
@@ -272,7 +275,6 @@ function StatStrip({ stats, unit }: { stats: ExerciseDetailStats; unit: 'lbs' |
                 fontWeight: '600',
                 letterSpacing: 0.4,
                 textTransform: 'uppercase',
-                color: TEXT_TERTIARY,
               }}
             >
               {label}
@@ -295,10 +297,9 @@ function SectionCard({
 }) {
   return (
     <View
+      className="bg-surface-elevated border-border"
       style={{
-        backgroundColor: SURFACE_ELEVATED,
         borderWidth: 1,
-        borderColor: BORDER_DEFAULT,
         borderRadius: 12,
         padding: 12,
         gap: 10,
@@ -306,13 +307,13 @@ function SectionCard({
       testID={testID}
     >
       <Text
+        className="text-text-tertiary"
         style={{
           fontSize: 11,
           fontFamily: 'Inter, sans-serif',
           fontWeight: '600',
           letterSpacing: 0.6,
           textTransform: 'uppercase',
-          color: TEXT_TERTIARY,
         }}
       >
         {title}
@@ -334,7 +335,8 @@ function EntryList({ entries, expandedId, onToggle, emptyLabel, testID }: EntryL
   if (entries.length === 0) {
     return (
       <Text
-        style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_TERTIARY }}
+        className="text-text-tertiary"
+        style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}
         testID={`${testID}-empty`}
       >
         {emptyLabel}
@@ -353,7 +355,13 @@ function EntryList({ entries, expandedId, onToggle, emptyLabel, testID }: EntryL
   )
 }
 
-function VbtBreakdown({ sets }: { sets: ExerciseVbtSet[] }) {
+function VbtBreakdown({
+  sets,
+  zones,
+}: {
+  sets: ExerciseVbtSet[]
+  zones?: readonly VelocityZoneBandProp[]
+}) {
   return (
     <View style={{ gap: 10 }} testID="exercise-detail-page-vbt-breakdown">
       {sets.map((set) => {
@@ -367,25 +375,25 @@ function VbtBreakdown({ sets }: { sets: ExerciseVbtSet[] }) {
             testID="exercise-detail-page-vbt-set"
           >
             <Text
+              className="text-text-secondary"
               style={{
                 width: 44,
                 fontSize: 11,
                 fontFamily: 'Inter, sans-serif',
                 fontWeight: '600',
-                color: TEXT_SECONDARY,
               }}
             >
               {set.label}
             </Text>
             <View className="flex-1" style={{ height: 8, justifyContent: 'center' }}>
-              <VelocityStrip velocities={set.velocities} variant="mini" />
+              <VelocityStrip velocities={set.velocities} zones={zones} variant="mini" />
             </View>
             <Text
+              className="text-text-tertiary"
               style={{
                 fontSize: 11,
                 fontFamily: 'Inter, sans-serif',
                 fontVariant: ['tabular-nums'],
-                color: TEXT_TERTIARY,
               }}
             >
               {`${mean.toFixed(2)} · -${loss}%`}
@@ -407,26 +415,26 @@ function VbtSummaryRow({ summary }: { summary: VbtSummary }) {
       {cells.map((cell) => (
         <View
           key={cell.label}
+          className="bg-surface-elevated border-border"
           style={{
             flex: 1,
             padding: 12,
             borderRadius: 10,
-            backgroundColor: SURFACE_ELEVATED,
             borderWidth: 1,
-            borderColor: BORDER_DEFAULT,
           }}
         >
           <Text
+            className="text-text-primary"
             style={{
               fontSize: 16,
               fontFamily: '"Space Grotesk", sans-serif',
               fontWeight: '700',
-              color: TEXT_PRIMARY,
             }}
           >
             {cell.value}
           </Text>
           <Text
+            className="text-text-tertiary"
             style={{
               marginTop: 2,
               fontSize: 10,
@@ -434,7 +442,6 @@ function VbtSummaryRow({ summary }: { summary: VbtSummary }) {
               fontWeight: '600',
               letterSpacing: 0.4,
               textTransform: 'uppercase',
-              color: TEXT_TERTIARY,
             }}
           >
             {cell.label}
@@ -488,8 +495,8 @@ export function ExerciseDetailPage({
 
   return (
     <View
-      className={className}
-      style={{ width: 390, backgroundColor: PAGE_BG }}
+      className={cn('bg-background-base', className)}
+      style={{ width: 390 }}
       accessibilityRole={'main' as ViewProps['accessibilityRole']}
       aria-label={exercise.name}
       testID="exercise-detail-page"
@@ -504,22 +511,22 @@ export function ExerciseDetailPage({
           <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="exercise-detail-page-title"
             >
               {exercise.name}
             </Text>
             <Text
+              className="text-text-secondary"
               style={{
                 marginTop: 2,
                 fontSize: 12,
                 fontFamily: 'Inter, sans-serif',
-                color: TEXT_SECONDARY,
               }}
               testID="exercise-detail-page-subtitle"
             >
@@ -539,13 +546,13 @@ export function ExerciseDetailPage({
               testID="exercise-detail-page-e1rm"
             >
               <Text
+                className="text-text-tertiary"
                 style={{
                   fontSize: 9,
                   fontFamily: 'Inter, sans-serif',
                   fontWeight: '600',
                   letterSpacing: 0.4,
                   textTransform: 'uppercase',
-                  color: TEXT_TERTIARY,
                 }}
               >
                 e1RM
@@ -620,7 +627,7 @@ export function ExerciseDetailPage({
             </SectionCard>
             <VbtSummaryRow summary={vbtSummary} />
             <SectionCard title="Velocity Breakdown" testID="exercise-detail-page-velocity">
-              <VbtBreakdown sets={vbt.sets} />
+              <VbtBreakdown sets={vbt.sets} zones={vbt.zones} />
             </SectionCard>
           </View>
         )}

package/src/components/custom/Workout/InputBar.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, Pressable, TextInput } from 'react-native'
+import { resolveColor } from '../../../theme/resolve-color'
 
 export interface InputBarProps {
   exerciseName: string
@@ -17,19 +18,15 @@ export interface InputBarProps {
 }
 
 const BRAND_PRIMARY = '#FF7900'
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_TERTIARY = 'var(--color-text-tertiary)'
+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: 'var(--color-surface-raised)',
   borderWidth: 1,
-  borderColor: 'var(--color-border-strong)',
   borderRadius: 6,
   textAlign: 'center' as const,
-  color: TEXT_PRIMARY,
   paddingVertical: 5,
   paddingHorizontal: 2,
 }
@@ -53,11 +50,11 @@ export function InputBar({
 
   return (
     <View
+      className="bg-surface-elevated"
       style={{
         width: '100%',
-        backgroundColor: 'var(--color-surface-elevated)',
         borderTopWidth: 1,
-        borderTopColor: 'var(--color-border-default)',
+        borderTopColor: resolveColor('border-default'),
         paddingTop: 10,
         paddingHorizontal: 16,
         paddingBottom: 12,
@@ -70,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}
@@ -82,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"
         >
@@ -97,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'}
@@ -114,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"
         >