@titan-design/react-ui 0.3.0 → 0.4.0

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

@@ -16,14 +16,10 @@ import {
 import { ExerciseCard, type ExerciseCardProps } from './ExerciseCard'
 import { type SetRowProps } from './SetRow'
 import { VelocityStrip, calculateMeanVelocity, calculateVelocityLoss } 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
@@ -190,7 +186,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 +209,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 +240,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 +268,6 @@ function StatStrip({ stats, unit }: { stats: ExerciseDetailStats; unit: 'lbs' |
                 fontWeight: '600',
                 letterSpacing: 0.4,
                 textTransform: 'uppercase',
-                color: TEXT_TERTIARY,
               }}
             >
               {label}
@@ -295,10 +290,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 +300,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 +328,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}
@@ -367,12 +362,12 @@ 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}
@@ -381,11 +376,11 @@ function VbtBreakdown({ sets }: { sets: ExerciseVbtSet[] }) {
               <VelocityStrip velocities={set.velocities} 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 +402,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 +429,6 @@ function VbtSummaryRow({ summary }: { summary: VbtSummary }) {
               fontWeight: '600',
               letterSpacing: 0.4,
               textTransform: 'uppercase',
-              color: TEXT_TERTIARY,
             }}
           >
             {cell.label}
@@ -488,8 +482,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 +498,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 +533,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

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"
         >

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

@@ -9,10 +9,6 @@ const BRAND_PRIMARY = '#FF7900'
 const BRAND_PRIMARY_DARK = '#C45E00'
 const BRAND_PRIMARY_LIGHT = '#FFB066'
 const BORDER_DEFAULT = '#1F1F1F'
-// Theme-aware foregrounds: resolve to a readable color in both light and dark
-// (react-native-web passes the CSS var through to the inline style).
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
 
 /** Gradient stops for the 3px top accent: dark -> primary -> light. */
 const ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY, BRAND_PRIMARY_LIGHT]
@@ -119,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"
         >
@@ -135,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/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 = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
-const TEXT_TERTIARY = 'var(--color-text-tertiary)'
 
 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: elevated -> raised at 135deg (theme-aware). */
-const CARD_GRADIENT =
-  'linear-gradient(135deg, var(--color-surface-elevated) 0%, var(--color-surface-raised) 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

@@ -18,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: 'var(--color-border-strong)',
           borderRadius: 1,
           opacity: 0.5,
         },
@@ -60,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: 'var(--color-border-strong)',
             borderRadius: 1,
             minWidth: 4,
           }}