@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -1,6 +1,8 @@
 import React, { useState, useRef, useCallback, createContext, useContext } from 'react'
 import { View, Pressable, Modal, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Surface } from '../surface'
+import { TriggerSurface } from '../trigger'
 
 export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right'
 
@@ -68,12 +70,15 @@ export function Popover({
   const isOpen = controlledIsOpen ?? internalIsOpen
   const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  const setIsOpen = useCallback((open: boolean) => {
-    if (controlledIsOpen === undefined) {
-      setInternalIsOpen(open)
-    }
-    onOpenChange?.(open)
-  }, [controlledIsOpen, onOpenChange])
+  const setIsOpen = useCallback(
+    (open: boolean) => {
+      if (controlledIsOpen === undefined) {
+        setInternalIsOpen(open)
+      }
+      onOpenChange?.(open)
+    },
+    [controlledIsOpen, onOpenChange]
+  )
 
   const handleHoverIn = useCallback(() => {
     if (triggerMode !== 'hover') return
@@ -126,15 +131,14 @@ export function PopoverTrigger({ children, className }: PopoverTriggerProps) {
       : {}
 
   return (
-    <Pressable
-      onPress={() => setIsOpen(!isOpen)}
+    <TriggerSurface
+      handlers={{ onPress: () => setIsOpen(!isOpen), ...hoverProps }}
       accessibilityRole="button"
       accessibilityState={{ expanded: isOpen }}
       className={className}
-      {...hoverProps}
     >
       {children}
-    </Pressable>
+    </TriggerSurface>
   )
 }
 
@@ -184,12 +188,13 @@ export function PopoverContent({ children, className }: PopoverContentProps) {
         className="fixed inset-0 z-40"
         style={{ position: 'absolute' }}
       />
-      {/* Content */}
-      <View
+      {/* Content — floating: overlay plane + lift, no ring. */}
+      <Surface
+        elevation={4}
+        rounded={false}
         className={cn(
           'absolute z-50 min-w-[200px]',
-          'bg-surface-elevated rounded-lg shadow-lg border border-hairline',
-          'p-4',
+          'rounded-lg p-4',
           placementStyles[placement],
           className
         )}
@@ -208,7 +213,7 @@ export function PopoverContent({ children, className }: PopoverContentProps) {
           />
         )}
         {children}
-      </View>
+      </Surface>
     </>
   )
 }

package/src/components/ui/popover/index.ts

@@ -1,2 +1,8 @@
 export { Popover, PopoverTrigger, PopoverContent, PopoverCloseButton } from './Popover'
-export type { PopoverProps, PopoverTriggerProps, PopoverContentProps, PopoverCloseButtonProps, PopoverPlacement } from './Popover'
+export type {
+  PopoverProps,
+  PopoverTriggerProps,
+  PopoverContentProps,
+  PopoverCloseButtonProps,
+  PopoverPlacement,
+} from './Popover'

package/src/components/ui/progress/Progress.stories.tsx

@@ -5,7 +5,7 @@ import { Progress, CircularProgress, ProgressSteps } from './Progress'
 const meta: Meta<typeof Progress> = {
   title: 'Components/Molecules/Progress',
   component: Progress,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     value: {
       control: { type: 'range', min: 0, max: 100, step: 1 },
@@ -131,11 +131,7 @@ export const Steps: Story = {
         color="success"
         labels={['Step 1', 'Step 2', 'Step 3', 'Step 4']}
       />
-      <ProgressSteps
-        currentStep={0}
-        totalSteps={5}
-        size="lg"
-      />
+      <ProgressSteps currentStep={0} totalSteps={5} size="lg" />
     </View>
   ),
 }
@@ -152,12 +148,7 @@ export const UsageExamples: Story = {
       {/* Storage quota */}
       <View className="p-4 bg-surface-elevated rounded-lg">
         <Text className="text-text-primary font-medium mb-3">Storage</Text>
-        <Progress
-          value={8.5}
-          max={10}
-          color="warning"
-          label="8.5 GB of 10 GB used"
-        />
+        <Progress value={8.5} max={10} color="warning" label="8.5 GB of 10 GB used" />
       </View>
 
       {/* Checkout steps */}

package/src/components/ui/progress/Progress.test.tsx

@@ -154,11 +154,7 @@ describe('Progress', () => {
 
     it('renders labels', () => {
       render(
-        <ProgressSteps
-          currentStep={1}
-          totalSteps={3}
-          labels={['Step 1', 'Step 2', 'Step 3']}
-        />
+        <ProgressSteps currentStep={1} totalSteps={3} labels={['Step 1', 'Step 2', 'Step 3']} />
       )
       expect(screen.getByText('Step 1')).toBeInTheDocument()
       expect(screen.getByText('Step 2')).toBeInTheDocument()

package/src/components/ui/progress/Progress.tsx

@@ -56,13 +56,16 @@ const colorStyles: Record<ProgressColor, string> = {
   info: 'bg-status-info',
 }
 
+// `-muted` rather than `-subtle`: the track is structural — it has to show the
+// bar's full extent behind the fill — and the lightest rung disappears on the
+// dark base. Replaces a `/20` modifier that emitted no rule (VW-308).
 const trackColorStyles: Record<ProgressColor, string> = {
-  primary: 'bg-brand-primary/20',
-  secondary: 'bg-brand-secondary/20',
-  success: 'bg-status-success/20',
-  error: 'bg-status-error/20',
-  warning: 'bg-status-warning/20',
-  info: 'bg-status-info/20',
+  primary: 'bg-brand-primary-muted',
+  secondary: 'bg-brand-secondary-muted',
+  success: 'bg-status-success-muted',
+  error: 'bg-status-error-muted',
+  warning: 'bg-status-warning-muted',
+  info: 'bg-status-info-muted',
 }
 
 /**

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

@@ -6,7 +6,7 @@ import { Radio, RadioGroup } from './Radio'
 const meta: Meta<typeof RadioGroup> = {
   title: 'Components/Molecules/Radio',
   component: RadioGroup,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     size: {
       control: 'select',
@@ -60,12 +60,7 @@ export const Horizontal: Story = {
   render: function Render() {
     const [value, setValue] = useState<string | null>('monthly')
     return (
-      <RadioGroup
-        value={value}
-        onChange={setValue}
-        orientation="horizontal"
-        label="Billing Cycle"
-      >
+      <RadioGroup value={value} onChange={setValue} orientation="horizontal" label="Billing Cycle">
         <Radio value="monthly">Monthly</Radio>
         <Radio value="quarterly">Quarterly</Radio>
         <Radio value="yearly">Yearly</Radio>
@@ -79,7 +74,7 @@ export const AllSizes: Story = {
     const [small, setSmall] = useState<string | null>('a')
     const [medium, setMedium] = useState<string | null>('a')
     const [large, setLarge] = useState<string | null>('a')
-    
+
     return (
       <View className="gap-6">
         <View>
@@ -114,22 +109,46 @@ export const AllColors: Story = {
     const [secondary, setSecondary] = useState<string | null>('a')
     const [success, setSuccess] = useState<string | null>('a')
     const [error, setError] = useState<string | null>('a')
-    
+
     return (
       <View className="gap-6">
-        <RadioGroup value={primary} onChange={setPrimary} color="primary" orientation="horizontal" label="Primary">
+        <RadioGroup
+          value={primary}
+          onChange={setPrimary}
+          color="primary"
+          orientation="horizontal"
+          label="Primary"
+        >
           <Radio value="a">Option A</Radio>
           <Radio value="b">Option B</Radio>
         </RadioGroup>
-        <RadioGroup value={secondary} onChange={setSecondary} color="secondary" orientation="horizontal" label="Secondary">
+        <RadioGroup
+          value={secondary}
+          onChange={setSecondary}
+          color="secondary"
+          orientation="horizontal"
+          label="Secondary"
+        >
           <Radio value="a">Option A</Radio>
           <Radio value="b">Option B</Radio>
         </RadioGroup>
-        <RadioGroup value={success} onChange={setSuccess} color="success" orientation="horizontal" label="Success">
+        <RadioGroup
+          value={success}
+          onChange={setSuccess}
+          color="success"
+          orientation="horizontal"
+          label="Success"
+        >
           <Radio value="a">Option A</Radio>
           <Radio value="b">Option B</Radio>
         </RadioGroup>
-        <RadioGroup value={error} onChange={setError} color="error" orientation="horizontal" label="Error">
+        <RadioGroup
+          value={error}
+          onChange={setError}
+          color="error"
+          orientation="horizontal"
+          label="Error"
+        >
           <Radio value="a">Option A</Radio>
           <Radio value="b">Option B</Radio>
         </RadioGroup>
@@ -154,7 +173,9 @@ export const Disabled: Story = {
           <Text className="text-text-secondary text-sm mb-2">Individual option disabled</Text>
           <RadioGroup value={value} onChange={setValue}>
             <Radio value="option1">Option 1 (enabled)</Radio>
-            <Radio value="option2" isDisabled>Option 2 (disabled)</Radio>
+            <Radio value="option2" isDisabled>
+              Option 2 (disabled)
+            </Radio>
             <Radio value="option3">Option 3 (enabled)</Radio>
           </RadioGroup>
         </View>
@@ -167,27 +188,27 @@ export const FormExample: Story = {
   render: function Render() {
     const [plan, setPlan] = useState<string | null>('pro')
     const [billing, setBilling] = useState<string | null>('monthly')
-    
+
     return (
       <View className="gap-6 p-4 bg-surface-base rounded-lg max-w-md">
         <Text className="text-lg font-semibold text-text-primary">Subscription Settings</Text>
-        
+
         <RadioGroup value={plan} onChange={setPlan} label="Select Plan">
           <Radio value="free">Free - Basic features</Radio>
           <Radio value="pro">Pro - Advanced features</Radio>
           <Radio value="enterprise">Enterprise - Custom solutions</Radio>
         </RadioGroup>
-        
-        <RadioGroup 
-          value={billing} 
-          onChange={setBilling} 
+
+        <RadioGroup
+          value={billing}
+          onChange={setBilling}
           orientation="horizontal"
           label="Billing Frequency"
         >
           <Radio value="monthly">Monthly</Radio>
           <Radio value="yearly">Yearly (save 20%)</Radio>
         </RadioGroup>
-        
+
         <View className="pt-4 border-t border-hairline">
           <Text className="text-sm text-text-secondary">
             Selected: {plan} plan, billed {billing}

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

@@ -68,7 +68,9 @@ describe('Radio', () => {
     render(
       <RadioGroup value="a" onChange={onChange}>
         <Radio value="a">A</Radio>
-        <Radio value="b" isDisabled>B</Radio>
+        <Radio value="b" isDisabled>
+          B
+        </Radio>
       </RadioGroup>
     )
     const radios = screen.getAllByRole('radio')
@@ -134,7 +136,9 @@ describe('Radio', () => {
   it('allows Radio to override group size and color', () => {
     render(
       <RadioGroup value="a" onChange={() => {}} size="sm" color="primary">
-        <Radio value="a" size="lg" color="error">A</Radio>
+        <Radio value="a" size="lg" color="error">
+          A
+        </Radio>
       </RadioGroup>
     )
     expect(screen.getByRole('radio')).toBeInTheDocument()

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

@@ -78,11 +78,7 @@ export function RadioGroup({
         accessibilityLabel={label}
         {...props}
       >
-        {label && (
-          <Text className="text-sm font-medium text-text-primary mb-2">
-            {label}
-          </Text>
-        )}
+        {label && <Text className="text-sm font-medium text-text-primary mb-2">{label}</Text>}
         <View
           className={cn(
             orientation === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col',
@@ -117,9 +113,18 @@ const sizeConfig: Record<RadioSize, { outer: string; inner: string; text: string
 }
 
 const colorStyles: Record<RadioColor, { checked: string; unchecked: string }> = {
-  primary: { checked: 'border-brand-primary bg-brand-primary', unchecked: 'border-hairline-strong' },
-  secondary: { checked: 'border-brand-secondary bg-brand-secondary', unchecked: 'border-hairline-strong' },
-  success: { checked: 'border-status-success bg-status-success', unchecked: 'border-hairline-strong' },
+  primary: {
+    checked: 'border-brand-primary bg-brand-primary',
+    unchecked: 'border-hairline-strong',
+  },
+  secondary: {
+    checked: 'border-brand-secondary bg-brand-secondary',
+    unchecked: 'border-hairline-strong',
+  },
+  success: {
+    checked: 'border-status-success bg-status-success',
+    unchecked: 'border-hairline-strong',
+  },
   error: { checked: 'border-status-error bg-status-error', unchecked: 'border-hairline-strong' },
 }
 
@@ -144,7 +149,13 @@ export function Radio({
     throw new Error('Radio must be used within a RadioGroup')
   }
 
-  const { value: selectedValue, onChange, isDisabled: groupDisabled, size: groupSize, color: groupColor } = context
+  const {
+    value: selectedValue,
+    onChange,
+    isDisabled: groupDisabled,
+    size: groupSize,
+    color: groupColor,
+  } = context
 
   const isDisabled = radioDisabled ?? groupDisabled ?? false
   const size = radioSize ?? groupSize ?? 'md'
@@ -166,11 +177,7 @@ export function Radio({
       disabled={isDisabled}
       accessibilityRole="radio"
       accessibilityState={{ checked: isChecked, disabled: isDisabled }}
-      className={cn(
-        'flex-row items-center',
-        isDisabled && 'opacity-50',
-        className
-      )}
+      className={cn('flex-row items-center', isDisabled && 'opacity-50', className)}
       {...props}
     >
       {/* Radio circle */}
@@ -184,17 +191,11 @@ export function Radio({
         )}
       >
         {/* Inner dot */}
-        {isChecked && (
-          <View className={cn('rounded-full bg-white', inner)} />
-        )}
+        {isChecked && <View className={cn('rounded-full bg-on-brand-primary', inner)} />}
       </View>
 
       {/* Label */}
-      {children && (
-        <Text className={cn('ml-2 text-text-primary', text)}>
-          {children}
-        </Text>
-      )}
+      {children && <Text className={cn('ml-2 text-text-primary', text)}>{children}</Text>}
     </Pressable>
   )
 }

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

@@ -5,7 +5,7 @@ import { Section, SectionHeader, SectionContent } from './Section'
 const meta: Meta<typeof Section> = {
   title: 'Components/Atoms/Section',
   component: Section,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
 }
 
 export default meta
@@ -16,7 +16,7 @@ export const Default: Story = {
     <Section>
       <SectionHeader title="Recent Workouts" />
       <SectionContent>
-        <Text style={{ color: '#a0a0a0' }}>Workout items would go here</Text>
+        <Text style={{ color: 'var(--color-text-secondary)' }}>Workout items would go here</Text>
       </SectionContent>
     </Section>
   ),
@@ -25,12 +25,9 @@ export const Default: Story = {
 export const WithSubtitle: Story = {
   render: () => (
     <Section>
-      <SectionHeader
-        title="Workout Stats"
-        subtitle="Last 7 days"
-      />
+      <SectionHeader title="Workout Stats" subtitle="Last 7 days" />
       <SectionContent>
-        <Text style={{ color: '#a0a0a0' }}>Stats content</Text>
+        <Text style={{ color: 'var(--color-text-secondary)' }}>Stats content</Text>
       </SectionContent>
     </Section>
   ),
@@ -41,12 +38,10 @@ export const WithTrailingAction: Story = {
     <Section>
       <SectionHeader
         title="Exercises"
-        trailing={
-          <Text style={{ color: '#6366f1', fontSize: 13 }}>View All</Text>
-        }
+        trailing={<Text style={{ color: 'var(--color-text-link)', fontSize: 13 }}>View All</Text>}
       />
       <SectionContent>
-        <Text style={{ color: '#a0a0a0' }}>Exercise list</Text>
+        <Text style={{ color: 'var(--color-text-secondary)' }}>Exercise list</Text>
       </SectionContent>
     </Section>
   ),
@@ -58,12 +53,10 @@ export const FullExample: Story = {
       <SectionHeader
         title="Performance"
         subtitle="Average velocity by set"
-        trailing={
-          <Text style={{ color: '#6366f1', fontSize: 13 }}>Details</Text>
-        }
+        trailing={<Text style={{ color: 'var(--color-text-link)', fontSize: 13 }}>Details</Text>}
       />
       <SectionContent className="rounded-lg bg-surface-elevated p-4">
-        <Text style={{ color: '#a0a0a0' }}>Chart or data visualization</Text>
+        <Text style={{ color: 'var(--color-text-secondary)' }}>Chart or data visualization</Text>
       </SectionContent>
     </Section>
   ),
@@ -75,7 +68,7 @@ export const MultipleSections: Story = {
       <Section>
         <SectionHeader title="Today" subtitle="3 exercises" />
         <SectionContent className="rounded-lg bg-surface-elevated p-4">
-          <Text style={{ color: '#a0a0a0' }}>Today&apos;s workout data</Text>
+          <Text style={{ color: 'var(--color-text-secondary)' }}>Today&apos;s workout data</Text>
         </SectionContent>
       </Section>
 
@@ -83,19 +76,17 @@ export const MultipleSections: Story = {
         <SectionHeader
           title="This Week"
           subtitle="12 sets completed"
-          trailing={
-            <Text style={{ color: '#6366f1', fontSize: 13 }}>See All</Text>
-          }
+          trailing={<Text style={{ color: 'var(--color-text-link)', fontSize: 13 }}>See All</Text>}
         />
         <SectionContent className="rounded-lg bg-surface-elevated p-4">
-          <Text style={{ color: '#a0a0a0' }}>Weekly summary</Text>
+          <Text style={{ color: 'var(--color-text-secondary)' }}>Weekly summary</Text>
         </SectionContent>
       </Section>
 
       <Section>
         <SectionHeader title="Personal Records" />
         <SectionContent className="rounded-lg bg-surface-elevated p-4">
-          <Text style={{ color: '#a0a0a0' }}>PR list</Text>
+          <Text style={{ color: 'var(--color-text-secondary)' }}>PR list</Text>
         </SectionContent>
       </Section>
     </View>

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

@@ -42,12 +42,7 @@ describe('SectionHeader', () => {
   })
 
   it('renders trailing action when provided', () => {
-    render(
-      <SectionHeader
-        title="Title"
-        trailing={<Text>View All</Text>}
-      />
-    )
+    render(<SectionHeader title="Title" trailing={<Text>View All</Text>} />)
     expect(screen.getByText('View All')).toBeInTheDocument()
   })
 

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

@@ -29,9 +29,7 @@ export function SectionHeader({ title, subtitle, trailing, className }: SectionH
         <Text className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
           {title}
         </Text>
-        {subtitle && (
-          <Text className="text-xs text-text-tertiary mt-0.5">{subtitle}</Text>
-        )}
+        {subtitle && <Text className="text-xs text-text-tertiary mt-0.5">{subtitle}</Text>}
       </View>
       {trailing && <View>{trailing}</View>}
     </View>

package/src/components/ui/section/index.ts

@@ -1,6 +1,2 @@
 export { Section, SectionHeader, SectionContent } from './Section'
-export type {
-  SectionProps,
-  SectionHeaderProps,
-  SectionContentProps,
-} from './Section'
+export type { SectionProps, SectionHeaderProps, SectionContentProps } from './Section'

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

@@ -101,12 +101,7 @@ export const Disabled: Story = {
       </View>
       <View style={{ gap: 4 }}>
         <Text className="text-sm text-text-secondary">Disabled with value</Text>
-        <Select
-          value="banana"
-          onChange={() => {}}
-          options={basicOptions}
-          isDisabled
-        />
+        <Select value="banana" onChange={() => {}} options={basicOptions} isDisabled />
       </View>
     </View>
   ),
@@ -235,16 +230,11 @@ export const Controlled: Story = {
               </Text>
             </View>
           ))}
-          <Text
-            className="text-sm text-status-error underline"
-            onPress={() => setValue(null)}
-          >
+          <Text className="text-sm text-status-error underline" onPress={() => setValue(null)}>
             Clear
           </Text>
         </View>
-        <Text className="text-sm text-text-secondary">
-          Current value: {value ?? 'null'}
-        </Text>
+        <Text className="text-sm text-text-secondary">Current value: {value ?? 'null'}</Text>
       </View>
     )
   },

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

@@ -94,14 +94,7 @@ describe('Select', () => {
 
     it('calls onChangeMulti when toggling options', () => {
       const onChangeMulti = vi.fn()
-      render(
-        <Select
-          options={defaultOptions}
-          isMulti
-          values={[]}
-          onChangeMulti={onChangeMulti}
-        />
-      )
+      render(<Select options={defaultOptions} isMulti values={[]} onChangeMulti={onChangeMulti} />)
 
       fireEvent.click(screen.getByRole('combobox'))
       fireEvent.click(screen.getByText('Option 1'))
@@ -163,9 +156,7 @@ describe('Select', () => {
 
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
-      const { container } = render(
-        <Select options={defaultOptions} value="1" />
-      )
+      const { container } = render(<Select options={defaultOptions} value="1" />)
       const results = await axe(container, {
         rules: {
           'aria-input-field-name': { enabled: false },

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

@@ -1,6 +1,7 @@
 import React, { useState, createContext, useContext } from 'react'
 import { View, Text, Pressable, ScrollView, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Surface } from '../surface'
 
 export interface SelectOption<T = string> {
   value: T
@@ -91,9 +92,7 @@ export function Select<T extends string = string>({
 
   const selectValue = (val: T) => {
     if (isMulti) {
-      const newValues = values.includes(val)
-        ? values.filter((v) => v !== val)
-        : [...values, val]
+      const newValues = values.includes(val) ? values.filter((v) => v !== val) : [...values, val]
       onChangeMulti?.(newValues)
     } else {
       onChange?.(val)
@@ -141,6 +140,7 @@ export function Select<T extends string = string>({
           accessibilityState={{ expanded: isOpen, disabled: isDisabled }}
           className={cn(
             'flex-row items-center justify-between px-4 py-2.5 rounded-md border',
+            // VW-82: scrim-style fill, left raw (see Modal.tsx).
             variant === 'filled' ? 'bg-black/30' : 'bg-surface-base',
             isInvalid
               ? 'border-border-input-error'
@@ -152,12 +152,7 @@ export function Select<T extends string = string>({
             isDisabled && 'opacity-50 cursor-not-allowed'
           )}
         >
-          <Text
-            className={cn(
-              'flex-1',
-              hasValue ? 'text-text-primary' : 'text-text-tertiary'
-            )}
-          >
+          <Text className={cn('flex-1', hasValue ? 'text-text-primary' : 'text-text-tertiary')}>
             {getDisplayValue()}
           </Text>
           <View className="flex-row items-center gap-2">
@@ -184,11 +179,12 @@ export function Select<T extends string = string>({
               className="fixed inset-0 z-40"
               style={{ position: 'absolute' }}
             />
-            <View
+            <Surface
+              elevation={4}
+              rounded={false}
               className={cn(
                 'absolute z-50 top-full left-0 right-0 mt-1',
-                'bg-surface-elevated rounded-md shadow-lg border border-hairline',
-                'max-h-60 overflow-hidden'
+                'rounded-md max-h-60 overflow-hidden'
               )}
             >
               <ScrollView className="py-1">
@@ -196,7 +192,7 @@ export function Select<T extends string = string>({
                   <SelectOption key={option.value} option={option} />
                 ))}
               </ScrollView>
-            </View>
+            </Surface>
           </>
         )}
       </View>
@@ -232,10 +228,15 @@ function SelectOption<T>({ option }: SelectOptionComponentProps<T>) {
             selected ? 'bg-brand-primary border-brand-primary' : 'border-hairline-strong'
           )}
         >
-          {selected && <Text className="text-white text-xs text-center">✓</Text>}
+          {selected && <Text className="text-on-brand-primary text-xs text-center">✓</Text>}
         </View>
       )}
-      <Text className={cn('text-sm', selected && !isMulti ? 'text-brand-primary font-medium' : 'text-text-primary')}>
+      <Text
+        className={cn(
+          'text-sm',
+          selected && !isMulti ? 'text-brand-primary font-medium' : 'text-text-primary'
+        )}
+      >
         {option.label}
       </Text>
     </Pressable>