@titan-design/react-ui 0.2.6 → 0.2.7

package/src/components/custom/Workout/index.ts

@@ -1,2 +1,115 @@
+export {
+  BaseBadge,
+  type BaseBadgeProps,
+  type BaseBadgeVariant,
+  type BaseBadgeSize,
+} from './BaseBadge'
+export {
+  WeightBadge,
+  type WeightBadgeProps,
+  type WeightBadgeSize,
+} from './WeightBadge'
+export { PrBadge, type PrBadgeProps, type PRType } from './PrBadge'
+export { StatusDot, type StatusDotVariant, type StatusDotProps } from './StatusDot'
+export { PlaceholderStrip, type PlaceholderStripProps } from './PlaceholderStrip'
+export { TempoDisplay, type TempoDisplayProps } from './TempoDisplay'
+export { DeviationBar, type DeviationBarProps } from './DeviationBar'
+export { IntensityBar, type IntensityBarProps } from './IntensityBar'
+export { WorkoutPill, type WorkoutPillProps, type WorkoutPillStatus } from './WorkoutPill'
+export {
+  VelocityStrip,
+  type VelocityStripProps,
+  getVelocityZoneColor,
+  getVelocityZoneName,
+  calculateVelocityLoss,
+  calculateMeanVelocity,
+} from './VelocityStrip'
+export {
+  MuscleGroupChip,
+  type MuscleGroupChipProps,
+  type VolumeStatus,
+} from './MuscleGroupChip'
+export { Sparkline, type SparklineProps } from './Sparkline'
+export { SetRow, type SetRowProps, type SetRowMode } from './SetRow'
+export { InputBar, type InputBarProps } from './InputBar'
 export { RestTimer, type RestTimerProps } from './RestTimer'
+export { ExerciseCard, type ExerciseCardProps, type ExerciseCardState } from './ExerciseCard'
 export { SupersetWrapper, type SupersetWrapperProps } from './SupersetWrapper'
+export {
+  MesoProgressBar,
+  type MesoProgressBarProps,
+  type Meso,
+  type MesoStatus,
+} from './MesoProgressBar'
+export { WeekRow, type WeekRowProps, type WeekRowWorkout } from './WeekRow'
+export {
+  WorkoutCard,
+  type WorkoutCardProps,
+  type WorkoutStatus,
+  type WorkoutMuscleGroup,
+  type WorkoutMuscleVolumeStatus,
+} from './WorkoutCard'
+export {
+  MesoCard,
+  type MesoCardProps,
+  type MesoVolumeHeatmapEntry,
+} from './MesoCard'
+export {
+  PrHistoryModal,
+  type PrHistoryModalProps,
+  type PrRecord,
+  type PrRecordType,
+} from './PrHistoryModal'
+export {
+  ReadinessCheck,
+  type ReadinessCheckProps,
+  type ReadinessFactor,
+  type WarmUpValidation,
+  type WarmUpStatus,
+} from './ReadinessCheck'
+export {
+  MesoStatusCard,
+  type MesoStatusCardProps,
+  type MesoStatusBadge,
+  type MesoStatusBadgeVariant,
+  type MesoStatusMetric,
+  type MesoStatusGauge,
+  type MesoStatusCoaching,
+  type MesoStatusNextTarget,
+} from './MesoStatusCard'
+export {
+  StrengthTrendChart,
+  type StrengthTrendChartProps,
+  type StrengthTrendDataPoint,
+  type StrengthTrendChartMesoBoundary,
+} from './StrengthTrendChart'
+export {
+  CapacityBandChart,
+  type CapacityBandChartProps,
+  type CapacityBandDataPoint,
+  type CapacityBandProjection,
+  type WorkoutDot,
+  type WorkoutDotStatus,
+} from './CapacityBandChart'
+export { BodyMap, type BodyMapProps, type BodyMapData } from './BodyMap'
+export {
+  BodyMapDetailPanel,
+  type BodyMapDetailPanelProps,
+  type ContributingExercise,
+  type UpcomingExercise,
+} from './BodyMapDetailPanel'
+export {
+  MuscleGroup,
+  SimpleMuscleGroup,
+  SIMPLE_TO_DETAILED,
+  DETAILED_TO_SIMPLE,
+  MUSCLE_TO_SVG_SLUGS,
+  MUSCLE_TO_CATEGORY,
+  MUSCLE_DISPLAY_NAMES,
+  SIMPLE_DISPLAY_NAMES,
+  DEFAULT_VOLUME_LANDMARKS,
+  VOLUME_STATUS_LABELS,
+  getHeatmapColor,
+  type MovementCategory,
+  type VolumeLandmarks,
+} from './muscleTaxonomy'

package/src/components/custom/Workout/muscleTaxonomy.ts

@@ -0,0 +1,252 @@
+/**
+ * Muscle grouping taxonomy for volume tracking, exercise mapping, and the
+ * BodyMap visualization. Ported from the Voltras muscle-taxonomy design doc.
+ *
+ * Level 2 (15 groups) is the primary volume-tracking unit; SimpleMuscleGroup
+ * (8 groups) is the beginner-facing aggregation. MUSCLE_TO_SVG_SLUGS maps each
+ * group to react-native-body-highlighter slugs using the closest-slug approach
+ * (Phase 1: combined colors, no sub-region splitting — deltoids is a single
+ * slug, lats and upper back share `upper-back`).
+ */
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+
+/**
+ * Full muscle group taxonomy for volume tracking and exercise mapping.
+ * 15 groups — the primary unit for volume accounting.
+ */
+export enum MuscleGroup {
+  // Push
+  CHEST = 'chest',
+  FRONT_DELTS = 'front_delts',
+  SIDE_DELTS = 'side_delts',
+  TRICEPS = 'triceps',
+
+  // Pull
+  LATS = 'lats',
+  UPPER_BACK = 'upper_back',
+  REAR_DELTS = 'rear_delts',
+  BICEPS = 'biceps',
+  FOREARMS = 'forearms',
+
+  // Legs
+  QUADS = 'quads',
+  HAMSTRINGS = 'hamstrings',
+  GLUTES = 'glutes',
+  CALVES = 'calves',
+
+  // Core
+  ABS = 'abs',
+  OBLIQUES = 'obliques',
+}
+
+/**
+ * Simplified muscle group view for beginners. Maps to one or more MuscleGroup.
+ */
+export enum SimpleMuscleGroup {
+  CHEST = 'chest',
+  BACK = 'back',
+  SHOULDERS = 'shoulders',
+  BICEPS = 'biceps',
+  TRICEPS = 'triceps',
+  LEGS = 'legs',
+  CORE = 'core',
+  FOREARMS = 'forearms',
+}
+
+/** Mapping from simplified groups to the full taxonomy. */
+export const SIMPLE_TO_DETAILED: Record<SimpleMuscleGroup, MuscleGroup[]> = {
+  [SimpleMuscleGroup.CHEST]: [MuscleGroup.CHEST],
+  [SimpleMuscleGroup.BACK]: [MuscleGroup.LATS, MuscleGroup.UPPER_BACK],
+  [SimpleMuscleGroup.SHOULDERS]: [
+    MuscleGroup.FRONT_DELTS,
+    MuscleGroup.SIDE_DELTS,
+    MuscleGroup.REAR_DELTS,
+  ],
+  [SimpleMuscleGroup.BICEPS]: [MuscleGroup.BICEPS],
+  [SimpleMuscleGroup.TRICEPS]: [MuscleGroup.TRICEPS],
+  [SimpleMuscleGroup.LEGS]: [
+    MuscleGroup.QUADS,
+    MuscleGroup.HAMSTRINGS,
+    MuscleGroup.GLUTES,
+    MuscleGroup.CALVES,
+  ],
+  [SimpleMuscleGroup.CORE]: [MuscleGroup.ABS, MuscleGroup.OBLIQUES],
+  [SimpleMuscleGroup.FOREARMS]: [MuscleGroup.FOREARMS],
+}
+
+/** Reverse map: detailed MuscleGroup -> its SimpleMuscleGroup. */
+export const DETAILED_TO_SIMPLE: Record<MuscleGroup, SimpleMuscleGroup> = Object.entries(
+  SIMPLE_TO_DETAILED
+).reduce(
+  (acc, [simple, groups]) => {
+    for (const group of groups) {
+      acc[group] = simple as SimpleMuscleGroup
+    }
+    return acc
+  },
+  {} as Record<MuscleGroup, SimpleMuscleGroup>
+)
+
+/** Movement category for training split organization. */
+export type MovementCategory = 'push' | 'pull' | 'legs' | 'core'
+
+export const MUSCLE_TO_CATEGORY: Record<MuscleGroup, MovementCategory> = {
+  [MuscleGroup.CHEST]: 'push',
+  [MuscleGroup.FRONT_DELTS]: 'push',
+  [MuscleGroup.SIDE_DELTS]: 'push',
+  [MuscleGroup.TRICEPS]: 'push',
+  [MuscleGroup.LATS]: 'pull',
+  [MuscleGroup.UPPER_BACK]: 'pull',
+  [MuscleGroup.REAR_DELTS]: 'pull',
+  [MuscleGroup.BICEPS]: 'pull',
+  [MuscleGroup.FOREARMS]: 'pull',
+  [MuscleGroup.QUADS]: 'legs',
+  [MuscleGroup.HAMSTRINGS]: 'legs',
+  [MuscleGroup.GLUTES]: 'legs',
+  [MuscleGroup.CALVES]: 'legs',
+  [MuscleGroup.ABS]: 'core',
+  [MuscleGroup.OBLIQUES]: 'core',
+}
+
+/**
+ * react-native-body-highlighter slug(s) per muscle group. Phase 1 uses the
+ * closest available slug; deltoids share one path and lats/upper-back share
+ * `upper-back` (see doc Level 4 "Recommended approach").
+ */
+export const MUSCLE_TO_SVG_SLUGS: Record<MuscleGroup, string[]> = {
+  [MuscleGroup.CHEST]: ['chest'],
+  [MuscleGroup.FRONT_DELTS]: ['deltoids'],
+  [MuscleGroup.SIDE_DELTS]: ['deltoids'],
+  [MuscleGroup.REAR_DELTS]: ['deltoids'],
+  [MuscleGroup.TRICEPS]: ['triceps'],
+  [MuscleGroup.LATS]: ['upper-back'],
+  [MuscleGroup.UPPER_BACK]: ['upper-back', 'trapezius'],
+  [MuscleGroup.BICEPS]: ['biceps'],
+  [MuscleGroup.FOREARMS]: ['forearm'],
+  [MuscleGroup.QUADS]: ['quadriceps'],
+  [MuscleGroup.HAMSTRINGS]: ['hamstring'],
+  [MuscleGroup.GLUTES]: ['gluteal'],
+  [MuscleGroup.CALVES]: ['calves'],
+  [MuscleGroup.ABS]: ['abs'],
+  [MuscleGroup.OBLIQUES]: ['obliques'],
+}
+
+/** Human-readable name per muscle group (used in a11y labels). */
+export const MUSCLE_DISPLAY_NAMES: Record<MuscleGroup, string> = {
+  [MuscleGroup.CHEST]: 'Chest',
+  [MuscleGroup.FRONT_DELTS]: 'Front Delts',
+  [MuscleGroup.SIDE_DELTS]: 'Side Delts',
+  [MuscleGroup.REAR_DELTS]: 'Rear Delts',
+  [MuscleGroup.TRICEPS]: 'Triceps',
+  [MuscleGroup.LATS]: 'Lats',
+  [MuscleGroup.UPPER_BACK]: 'Upper Back',
+  [MuscleGroup.BICEPS]: 'Biceps',
+  [MuscleGroup.FOREARMS]: 'Forearms',
+  [MuscleGroup.QUADS]: 'Quads',
+  [MuscleGroup.HAMSTRINGS]: 'Hamstrings',
+  [MuscleGroup.GLUTES]: 'Glutes',
+  [MuscleGroup.CALVES]: 'Calves',
+  [MuscleGroup.ABS]: 'Abs',
+  [MuscleGroup.OBLIQUES]: 'Obliques',
+}
+
+/** Human-readable name per simple group. */
+export const SIMPLE_DISPLAY_NAMES: Record<SimpleMuscleGroup, string> = {
+  [SimpleMuscleGroup.CHEST]: 'Chest',
+  [SimpleMuscleGroup.BACK]: 'Back',
+  [SimpleMuscleGroup.SHOULDERS]: 'Shoulders',
+  [SimpleMuscleGroup.BICEPS]: 'Biceps',
+  [SimpleMuscleGroup.TRICEPS]: 'Triceps',
+  [SimpleMuscleGroup.LEGS]: 'Legs',
+  [SimpleMuscleGroup.CORE]: 'Core',
+  [SimpleMuscleGroup.FOREARMS]: 'Forearms',
+}
+
+/** Volume landmarks per muscle group (weekly working sets). */
+export interface VolumeLandmarks {
+  mev: number // Minimum Effective Volume
+  mav: number // Maximum Adaptive Volume
+  mrv: number // Maximum Recoverable Volume
+}
+
+export const DEFAULT_VOLUME_LANDMARKS: Record<MuscleGroup, VolumeLandmarks> = {
+  [MuscleGroup.CHEST]: { mev: 8, mav: 14, mrv: 20 },
+  [MuscleGroup.LATS]: { mev: 8, mav: 14, mrv: 20 },
+  [MuscleGroup.UPPER_BACK]: { mev: 6, mav: 12, mrv: 18 },
+  [MuscleGroup.FRONT_DELTS]: { mev: 2, mav: 6, mrv: 10 },
+  [MuscleGroup.SIDE_DELTS]: { mev: 6, mav: 14, mrv: 22 },
+  [MuscleGroup.REAR_DELTS]: { mev: 6, mav: 12, mrv: 18 },
+  [MuscleGroup.BICEPS]: { mev: 4, mav: 10, mrv: 18 },
+  [MuscleGroup.TRICEPS]: { mev: 4, mav: 8, mrv: 14 },
+  [MuscleGroup.FOREARMS]: { mev: 2, mav: 6, mrv: 12 },
+  [MuscleGroup.QUADS]: { mev: 6, mav: 12, mrv: 18 },
+  [MuscleGroup.HAMSTRINGS]: { mev: 4, mav: 10, mrv: 16 },
+  [MuscleGroup.GLUTES]: { mev: 4, mav: 10, mrv: 16 },
+  [MuscleGroup.CALVES]: { mev: 6, mav: 10, mrv: 16 },
+  [MuscleGroup.ABS]: { mev: 0, mav: 8, mrv: 16 },
+  [MuscleGroup.OBLIQUES]: { mev: 0, mav: 6, mrv: 12 },
+}
+
+/** Weekly-volume status relative to MEV/MAV/MRV landmarks. */
+export type VolumeStatus = 'under' | 'maintenance' | 'productive' | 'over'
+
+/** Readable label per status for a11y descriptions. */
+export const VOLUME_STATUS_LABELS: Record<VolumeStatus, string> = {
+  under: 'under-trained',
+  maintenance: 'maintenance',
+  productive: 'productive',
+  over: 'over-reaching',
+}
+
+/** Severity ranking — higher wins when several groups share an SVG slug. */
+const STATUS_SEVERITY: Record<VolumeStatus, number> = {
+  under: 1,
+  maintenance: 2,
+  productive: 3,
+  over: 4,
+}
+
+/**
+ * Maps a volume status (and intensity, 0-1) to a heatmap fill color. The
+ * `approaching` token is used when a productive muscle nears its MRV.
+ */
+export function getHeatmapColor(status: VolumeStatus | null | undefined, intensity = 0): string {
+  const heatmap = WORKOUT_TOKENS.heatmap
+  switch (status) {
+    case 'under':
+      return heatmap.under
+    case 'maintenance':
+      return heatmap.maintenance
+    case 'productive':
+      return intensity >= 0.85 ? heatmap.approaching : heatmap.productive
+    case 'over':
+      return heatmap.over
+    default:
+      return heatmap.none
+  }
+}
+
+/** True when one status is at least as severe as another. */
+export function isMoreSevere(a: VolumeStatus, b: VolumeStatus): boolean {
+  return STATUS_SEVERITY[a] >= STATUS_SEVERITY[b]
+}
+
+/**
+ * Representative MuscleGroup for each SVG slug, used to resolve taps on shared
+ * paths (e.g. `deltoids`, `upper-back`) back to a single group.
+ */
+export const SLUG_TO_PRIMARY_MUSCLE: Record<string, MuscleGroup> = {
+  chest: MuscleGroup.CHEST,
+  deltoids: MuscleGroup.SIDE_DELTS,
+  triceps: MuscleGroup.TRICEPS,
+  'upper-back': MuscleGroup.LATS,
+  trapezius: MuscleGroup.UPPER_BACK,
+  biceps: MuscleGroup.BICEPS,
+  forearm: MuscleGroup.FOREARMS,
+  quadriceps: MuscleGroup.QUADS,
+  hamstring: MuscleGroup.HAMSTRINGS,
+  gluteal: MuscleGroup.GLUTES,
+  calves: MuscleGroup.CALVES,
+  abs: MuscleGroup.ABS,
+  obliques: MuscleGroup.OBLIQUES,
+}

package/src/components/custom/index.ts

@@ -7,3 +7,6 @@ export * from './stepper'
 export * from './DateTime'
 export * from './Metric'
 export * from './Workout'
+export * from './Treemap'
+export * from './Scatter'
+export * from './Gauge'

package/src/components/custom/stepper/Stepper.stories.tsx

@@ -137,7 +137,7 @@ export const VerticalWithContent: Story = {
             <Text className="text-text-secondary text-sm">
               Fill in your profile details to continue.
             </Text>
-            <View className="bg-surface-inset border border-border-default rounded-md px-3 py-2">
+            <View className="bg-surface-input border border-border rounded-md px-3 py-2">
               <Text className="text-text-secondary text-sm">Display Name</Text>
             </View>
           </View>

package/src/components/custom/stepper/Stepper.tsx

@@ -91,7 +91,7 @@ function StepConnector({ index }: StepConnectorProps) {
       <View
         className={cn(
           'flex-1 h-0.5 mx-2',
-          isCompleted ? 'bg-brand-primary' : 'bg-border-default'
+          isCompleted ? 'bg-brand-primary' : 'bg-border'
         )}
       />
     )
@@ -101,7 +101,7 @@ function StepConnector({ index }: StepConnectorProps) {
     <View
       className={cn(
         'w-0.5 h-8 ml-4 my-1',
-        isCompleted ? 'bg-brand-primary' : 'bg-border-default'
+        isCompleted ? 'bg-brand-primary' : 'bg-border'
       )}
     />
   )

package/src/components/ui/autocomplete/Autocomplete.stories.tsx

@@ -287,7 +287,7 @@ export const FormExample: Story = {
           isRequired
         />
 
-        <View className="pt-2 border-t border-border-default">
+        <View className="pt-2 border-t border-border">
           <Text className="text-sm text-text-secondary">
             Selected: {country ? `${countryOptions.find(c => c.value === country)?.label}` : '-'}
             {city ? `, ${cityOptions[country!]?.find(c => c.value === city)?.label}` : ''}

package/src/components/ui/autocomplete/Autocomplete.tsx

@@ -238,7 +238,7 @@ export function Autocomplete<T extends string = string>({
           <View
             className={cn(
               'absolute z-50 top-full left-0 right-0 mt-1',
-              'bg-surface-elevated rounded-md shadow-lg border border-border-default',
+              'bg-surface-elevated rounded-md shadow-lg border border-border',
               'max-h-60 overflow-hidden'
             )}
           >

package/src/components/ui/card/Card.tsx

@@ -47,7 +47,7 @@ const variantStyles: Record<CardVariant, string> = {
   elevated: '', // Will be set dynamically via elevation system
   outline: 'border-2 border-border-strong',  // Thicker border with stronger contrast
   filled: '', // Will be set dynamically via elevation system
-  accent: 'border border-border-default',
+  accent: 'border border-border',
   subtle: 'border border-border-subtle',
 }
 

package/src/components/ui/checkbox/Checkbox.tsx

@@ -91,7 +91,7 @@ export const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox(
           styles.box,
           isChecked || isIndeterminate
             ? 'bg-brand-primary border-brand-primary'
-            : 'bg-transparent border-border-default',
+            : 'bg-transparent border-border',
           isInvalid && 'border-status-error',
           !isDisabled && 'web:hover:border-brand-primary'
         )}

package/src/components/ui/collapse/Collapse.tsx

@@ -180,7 +180,7 @@ export function Accordion({
 
   return (
     <AccordionContext.Provider value={{ openIndices, toggleIndex, allowMultiple }}>
-      <View className={cn('w-full divide-y divide-border-default', className)} {...props}>
+      <View className={cn('w-full divide-y divide-border', className)} {...props}>
         {React.Children.map(children, (child, index) => {
           if (React.isValidElement(child)) {
             return React.cloneElement(child as React.ReactElement<any>, { index })

package/src/components/ui/data-row/DataRow.stories.tsx

@@ -73,6 +73,6 @@ export const CustomClassName: Story = {
   args: {
     label: 'Bordered Row',
     value: 'With custom styles',
-    className: 'border-b border-border-primary px-4',
+    className: 'border-b border-border px-4',
   },
 }

package/src/components/ui/drawer/Drawer.tsx

@@ -125,7 +125,7 @@ export function Drawer({
         >
           {/* Header */}
           {(title || showCloseButton) && (
-            <View className="flex-row items-center justify-between px-4 py-3 border-b border-border-default">
+            <View className="flex-row items-center justify-between px-4 py-3 border-b border-border">
               {title && (
                 <Text className="text-lg font-semibold text-text-primary">
                   {title}
@@ -165,7 +165,7 @@ export interface DrawerHeaderProps extends ViewProps {
 export function DrawerHeader({ className, children, ...props }: DrawerHeaderProps) {
   return (
     <View
-      className={cn('px-4 py-3 border-b border-border-default', className)}
+      className={cn('px-4 py-3 border-b border-border', className)}
       {...props}
     >
       {children}
@@ -217,7 +217,7 @@ export function DrawerFooter({ className, children, ...props }: DrawerFooterProp
     <View
       className={cn(
         'flex-row items-center justify-end gap-3',
-        'px-4 py-3 border-t border-border-default',
+        'px-4 py-3 border-t border-border',
         className
       )}
       {...props}

package/src/components/ui/form-field/FormField.tsx

@@ -253,7 +253,7 @@ export function FormActions({
     <View
       className={cn(
         'flex-row items-center gap-3 pt-4',
-        'border-t border-border-default mt-4',
+        'border-t border-border mt-4',
         alignStyles[align],
         className
       )}

package/src/components/ui/help-tip/HelpTip.tsx

@@ -155,7 +155,7 @@ export function HelpTip({
           className={cn(
             'absolute z-50',
             'bg-surface-elevated rounded-lg shadow-lg',
-            'border border-border-default',
+            'border border-border',
             'px-3 py-2',
             placementStyles[placement],
             tooltipClassName

package/src/components/ui/menu/Menu.tsx

@@ -116,7 +116,7 @@ export function MenuList({ children, className }: MenuListProps) {
       <View
         className={cn(
           'absolute z-50 top-full left-0 mt-1 min-w-[160px]',
-          'bg-surface-elevated rounded-lg shadow-lg border border-border-default',
+          'bg-surface-elevated rounded-lg shadow-lg border border-border',
           'py-1 overflow-hidden',
           className
         )}
@@ -195,7 +195,7 @@ export interface MenuDividerProps {
  * Divider between menu items.
  */
 export function MenuDivider({ className }: MenuDividerProps) {
-  return <View className={cn('h-px bg-border-default my-1', className)} />
+  return <View className={cn('h-px bg-border my-1', className)} />
 }
 
 export interface MenuGroupProps {

package/src/components/ui/pill/Pill.tsx

@@ -36,7 +36,7 @@ const variantColorStyles: Record<PillVariant, Record<PillColor, string>> = {
     info: 'bg-status-info/10 border-status-info/25 text-status-info',
   },
   outline: {
-    default: 'border-border-default text-text-secondary',
+    default: 'border-border text-text-secondary',
     primary: 'border-brand-primary text-brand-primary',
     secondary: 'border-brand-secondary text-brand-secondary',
     success: 'border-status-success text-status-success',

package/src/components/ui/popover/Popover.stories.tsx

@@ -152,12 +152,12 @@ export const WithFormContent: Story = {
           <Text className="text-text-secondary text-xs">
             Enter your new display name below.
           </Text>
-          <View className="bg-surface-inset border border-border-default rounded-md px-3 py-2">
+          <View className="bg-surface-input border border-border rounded-md px-3 py-2">
             <Text className="text-text-secondary text-sm">John Doe</Text>
           </View>
           <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
             <PopoverCloseButton>
-              <View className="px-3 py-1.5 rounded-md bg-surface-elevated border border-border-default">
+              <View className="px-3 py-1.5 rounded-md bg-surface-elevated border border-border">
                 <Text className="text-text-primary text-sm">Cancel</Text>
               </View>
             </PopoverCloseButton>

package/src/components/ui/popover/Popover.tsx

@@ -188,7 +188,7 @@ export function PopoverContent({ children, className }: PopoverContentProps) {
       <View
         className={cn(
           'absolute z-50 min-w-[200px]',
-          'bg-surface-elevated rounded-lg shadow-lg border border-border-default',
+          'bg-surface-elevated rounded-lg shadow-lg border border-border',
           'p-4',
           placementStyles[placement],
           className

package/src/components/ui/radio/Radio.stories.tsx

@@ -188,7 +188,7 @@ export const FormExample: Story = {
           <Radio value="yearly">Yearly (save 20%)</Radio>
         </RadioGroup>
         
-        <View className="pt-4 border-t border-border-default">
+        <View className="pt-4 border-t border-border">
           <Text className="text-sm text-text-secondary">
             Selected: {plan} plan, billed {billing}
           </Text>

package/src/components/ui/section/Section.stories.tsx

@@ -62,7 +62,7 @@ export const FullExample: Story = {
           <Text style={{ color: '#6366f1', fontSize: 13 }}>Details</Text>
         }
       />
-      <SectionContent className="rounded-lg bg-surface-secondary p-4">
+      <SectionContent className="rounded-lg bg-surface-elevated p-4">
         <Text style={{ color: '#a0a0a0' }}>Chart or data visualization</Text>
       </SectionContent>
     </Section>
@@ -74,7 +74,7 @@ export const MultipleSections: Story = {
     <View>
       <Section>
         <SectionHeader title="Today" subtitle="3 exercises" />
-        <SectionContent className="rounded-lg bg-surface-secondary p-4">
+        <SectionContent className="rounded-lg bg-surface-elevated p-4">
           <Text style={{ color: '#a0a0a0' }}>Today&apos;s workout data</Text>
         </SectionContent>
       </Section>
@@ -87,14 +87,14 @@ export const MultipleSections: Story = {
             <Text style={{ color: '#6366f1', fontSize: 13 }}>See All</Text>
           }
         />
-        <SectionContent className="rounded-lg bg-surface-secondary p-4">
+        <SectionContent className="rounded-lg bg-surface-elevated p-4">
           <Text style={{ color: '#a0a0a0' }}>Weekly summary</Text>
         </SectionContent>
       </Section>
 
       <Section>
         <SectionHeader title="Personal Records" />
-        <SectionContent className="rounded-lg bg-surface-secondary p-4">
+        <SectionContent className="rounded-lg bg-surface-elevated p-4">
           <Text style={{ color: '#a0a0a0' }}>PR list</Text>
         </SectionContent>
       </Section>

package/src/components/ui/select/Select.tsx

@@ -187,7 +187,7 @@ export function Select<T extends string = string>({
             <View
               className={cn(
                 'absolute z-50 top-full left-0 right-0 mt-1',
-                'bg-surface-elevated rounded-md shadow-lg border border-border-default',
+                'bg-surface-elevated rounded-md shadow-lg border border-border',
                 'max-h-60 overflow-hidden'
               )}
             >

package/src/components/ui/stack/Stack.stories.tsx

@@ -34,7 +34,7 @@ type Story = StoryObj<typeof Stack>
 
 function Box({ children }: { children: string }) {
   return (
-    <View className="rounded bg-primary-500 px-4 py-2">
+    <View className="rounded bg-brand-primary px-4 py-2">
       <Text className="text-sm text-white">{children}</Text>
     </View>
   )
@@ -85,13 +85,13 @@ export const WithAlignment: Story = {
 
       <Text className="text-sm font-medium text-neutral-400">align=&quot;center&quot;</Text>
       <HStack gap={2} align="center">
-        <View className="rounded bg-primary-500 px-4 py-1">
+        <View className="rounded bg-brand-primary px-4 py-1">
           <Text className="text-sm text-white">Short</Text>
         </View>
-        <View className="rounded bg-primary-500 px-4 py-4">
+        <View className="rounded bg-brand-primary px-4 py-4">
           <Text className="text-sm text-white">Tall</Text>
         </View>
-        <View className="rounded bg-primary-500 px-4 py-2">
+        <View className="rounded bg-brand-primary px-4 py-2">
           <Text className="text-sm text-white">Medium</Text>
         </View>
       </HStack>

package/src/components/ui/tabs/Tabs.tsx

@@ -100,8 +100,8 @@ export function TabList({ children, className }: TabListProps) {
 
   const variantStyles = {
     line: orientation === 'horizontal'
-      ? 'border-b border-border-default'
-      : 'border-r border-border-default',
+      ? 'border-b border-border'
+      : 'border-r border-border',
     enclosed: 'bg-surface-raised rounded-lg p-1',
     'soft-rounded': 'bg-surface-raised rounded-full p-1',
   }