@sudobility/components-rn 1.0.41 → 1.0.43

package/src/ui/DashboardStatCard/DashboardStatCard.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens, getCardVariantColors } from '@sudobility/design';
 
 export interface DashboardStatCardProps {
   /** Stat title */
@@ -36,6 +37,22 @@ export interface DashboardStatCardProps {
  * />
  * ```
  */
+
+// Lazily derive card variant colors from DS to avoid ESM issues in tests.
+let _cardColors: Record<string, string> | null = null;
+function getDashboardCardColors() {
+  if (!_cardColors) {
+    _cardColors = {
+      default: getCardVariantColors('default'),
+      primary: getCardVariantColors('info'),
+      success: getCardVariantColors('success'),
+      warning: getCardVariantColors('warning'),
+      danger: getCardVariantColors('error'),
+    };
+  }
+  return _cardColors;
+}
+
 export const DashboardStatCard: React.FC<DashboardStatCardProps> = ({
   title,
   value,
@@ -45,13 +62,7 @@ export const DashboardStatCard: React.FC<DashboardStatCardProps> = ({
   variant = 'default',
   className,
 }) => {
-  const variantClasses = {
-    default: 'bg-white dark:bg-gray-900',
-    primary: 'bg-blue-50 dark:bg-blue-900/20',
-    success: 'bg-green-50 dark:bg-green-900/20',
-    warning: 'bg-yellow-50 dark:bg-yellow-900/20',
-    danger: 'bg-red-50 dark:bg-red-900/20',
-  };
+  const variantClasses = getDashboardCardColors();
 
   const isPositive = change !== undefined && change >= 0;
 
@@ -65,7 +76,9 @@ export const DashboardStatCard: React.FC<DashboardStatCardProps> = ({
     >
       {/* Header */}
       <View className='flex-row items-start justify-between mb-2'>
-        <Text className='text-sm font-medium text-gray-600 dark:text-gray-400'>
+        <Text
+          className={`${designTokens.typography.size.sm} ${designTokens.typography.weight.medium} text-gray-600 dark:text-gray-400`}
+        >
           {title}
         </Text>
         {icon && (
@@ -74,7 +87,9 @@ export const DashboardStatCard: React.FC<DashboardStatCardProps> = ({
       </View>
 
       {/* Value */}
-      <Text className='text-3xl font-bold text-gray-900 dark:text-white'>
+      <Text
+        className={`${designTokens.typography.size['3xl']} ${designTokens.typography.weight.bold} text-gray-900 dark:text-white`}
+      >
         {value}
       </Text>
 
@@ -83,7 +98,8 @@ export const DashboardStatCard: React.FC<DashboardStatCardProps> = ({
         <View className='flex-row items-center gap-1 mt-2'>
           <Text
             className={cn(
-              'text-sm font-medium',
+              designTokens.typography.size.sm,
+              designTokens.typography.weight.medium,
               isPositive
                 ? 'text-green-600 dark:text-green-400'
                 : 'text-red-600 dark:text-red-400'
@@ -91,7 +107,9 @@ export const DashboardStatCard: React.FC<DashboardStatCardProps> = ({
           >
             {isPositive ? '↑' : '↓'} {Math.abs(change)}%
           </Text>
-          <Text className='text-xs text-gray-500 dark:text-gray-400'>
+          <Text
+            className={`${designTokens.typography.size.xs} text-gray-500 dark:text-gray-400`}
+          >
             {changePeriod}
           </Text>
         </View>

package/src/ui/DataList/DataList.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, Pressable, FlatList } from 'react-native';
 import { cn } from '../../lib/utils';
+import { ui, designTokens } from '@sudobility/design';
 
 export interface DataListColumn<T> {
   /** Column key */
@@ -74,7 +75,13 @@ export function DataList<T extends Record<string, unknown>>({
     if (!showHeader) return null;
 
     return (
-      <View className='flex-row bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700'>
+      <View
+        className={cn(
+          'flex-row',
+          ui.table.thead,
+          'border-b border-gray-200 dark:border-gray-700'
+        )}
+      >
         {columns.map(column => (
           <View
             key={column.key}
@@ -84,7 +91,15 @@ export function DataList<T extends Record<string, unknown>>({
             )}
             style={{ flex: column.flex || 1 }}
           >
-            <Text className='text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider'>
+            <Text
+              className={cn(
+                designTokens.typography.size.xs,
+                designTokens.typography.weight.medium,
+                'text-gray-700 dark:text-gray-300',
+                designTokens.typography.transform.uppercase,
+                designTokens.typography.tracking.wider
+              )}
+            >
               {column.label}
             </Text>
           </View>
@@ -101,7 +116,7 @@ export function DataList<T extends Record<string, unknown>>({
         onPress={() => onRowPress?.(item, index)}
         className={cn(
           'flex-row border-b border-gray-200 dark:border-gray-700',
-          isOdd && 'bg-gray-50 dark:bg-gray-800/50',
+          isOdd && ui.table.trAlt,
           onRowPress && 'active:bg-gray-100 dark:active:bg-gray-800'
         )}
         disabled={!onRowPress}
@@ -121,7 +136,10 @@ export function DataList<T extends Record<string, unknown>>({
               column.render(item, index)
             ) : (
               <Text
-                className='text-sm text-gray-900 dark:text-white'
+                className={cn(
+                  designTokens.typography.size.sm,
+                  'text-gray-900 dark:text-white'
+                )}
                 numberOfLines={1}
               >
                 {String(item[column.key] ?? '')}
@@ -142,7 +160,7 @@ export function DataList<T extends Record<string, unknown>>({
   );
 
   return (
-    <View className={cn('bg-white dark:bg-gray-900', className)}>
+    <View className={cn(ui.table.tr, className)}>
       {renderHeader()}
       <FlatList
         data={data}

package/src/ui/Divider/Divider.tsx

@@ -3,6 +3,13 @@ import { View, Text, ViewProps } from 'react-native';
 import { cn } from '../../lib/utils';
 import { textVariants } from '@sudobility/design';
 
+// Divider line colors aligned with DS border tokens (colors.semantic.border)
+const lineVariantClasses = {
+  light: 'bg-gray-200 dark:bg-gray-700',
+  medium: 'bg-gray-300 dark:bg-gray-600',
+  dark: 'bg-gray-400 dark:bg-gray-500',
+} as const;
+
 export interface DividerProps extends ViewProps {
   /** Optional text label */
   label?: string;
@@ -81,20 +88,13 @@ export const Divider: React.FC<DividerProps> = ({
     thick: 4,
   };
 
-  // Color variant configurations
-  const variantClasses = {
-    light: 'bg-gray-200 dark:bg-gray-700',
-    medium: 'bg-gray-300 dark:bg-gray-600',
-    dark: 'bg-gray-400 dark:bg-gray-500',
-  };
-
   // Vertical divider
   if (orientation === 'vertical') {
     return (
       <View
         className={cn(
           'self-stretch',
-          variantClasses[variant],
+          lineVariantClasses[variant],
           spacingClasses.vertical[spacing],
           className
         )}
@@ -111,7 +111,7 @@ export const Divider: React.FC<DividerProps> = ({
       <View
         className={cn(
           'w-full',
-          variantClasses[variant],
+          lineVariantClasses[variant],
           spacingClasses.horizontal[spacing],
           lineClassName,
           className
@@ -143,21 +143,16 @@ export const Divider: React.FC<DividerProps> = ({
     >
       {labelPosition !== 'left' && (
         <View
-          className={cn('flex-1', variantClasses[variant], lineClassName)}
+          className={cn('flex-1', lineVariantClasses[variant], lineClassName)}
           style={{ height: thicknessValues[thickness] }}
         />
       )}
-      <Text
-        className={cn(
-          textVariants.body.sm(),
-          'px-3 text-gray-500 dark:text-gray-400'
-        )}
-      >
+      <Text className={cn(textVariants.caption.default(), 'px-3')}>
         {label}
       </Text>
       {labelPosition !== 'right' && (
         <View
-          className={cn('flex-1', variantClasses[variant], lineClassName)}
+          className={cn('flex-1', lineVariantClasses[variant], lineClassName)}
           style={{ height: thicknessValues[thickness] }}
         />
       )}

package/src/ui/Dropdown/Dropdown.tsx

@@ -8,6 +8,9 @@ import {
   TouchableWithoutFeedback,
 } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
 
 export interface DropdownItem {
   /** Unique identifier */
@@ -156,7 +159,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
                     {item.icon && <View className='w-5 h-5'>{item.icon}</View>}
                     <Text
                       className={cn(
-                        'text-sm',
+                        typography.size.sm,
                         item.disabled
                           ? 'text-gray-400 dark:text-gray-500'
                           : 'text-gray-700 dark:text-gray-200'

package/src/ui/ExternalLink/ExternalLink.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useCallback } from 'react';
 import { Text, Pressable, Linking } from 'react-native';
 import { cn } from '../../lib/utils';
+import { textVariants } from '@sudobility/design';
 
 export interface ExternalLinkProps {
   /** Link URL */
@@ -63,11 +64,11 @@ export const ExternalLink: React.FC<ExternalLinkProps> = ({
     lg: 'text-base',
   };
 
-  // Color variant configurations
+  // Color variant configurations using DS textVariants.link
   const variantClasses = {
-    default: 'text-blue-600 dark:text-blue-400',
-    primary: 'text-blue-700 dark:text-blue-300 font-semibold',
-    muted: 'text-gray-600 dark:text-gray-400',
+    default: textVariants.link.external(),
+    primary: `${textVariants.link.default()} font-semibold`,
+    muted: textVariants.link.muted(),
   };
 
   const handlePress = useCallback(async () => {

package/src/ui/FeatureCard/FeatureCard.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
 
 export type FeatureCardColor =
   | 'green'
@@ -69,57 +70,58 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
   borderColor = false,
   className,
 }) => {
-  // Color configurations
+  // Color configurations -- derived from colors.raw.* palette
+  // Each Tailwind class maps to a colors.raw hex value at the same shade
   const colorClasses: Record<FeatureCardColor, string> = {
-    blue: 'text-blue-600 dark:text-blue-400',
-    green: 'text-green-600 dark:text-green-400',
+    blue: 'text-blue-600 dark:text-blue-400', // colors.raw.blue[600] / [400]
+    green: 'text-green-600 dark:text-green-400', // colors.raw.green[600] / [400]
     purple: 'text-purple-600 dark:text-purple-400',
-    orange: 'text-orange-600 dark:text-orange-400',
+    orange: 'text-orange-600 dark:text-orange-400', // colors.raw.orange[600] / [400]
     pink: 'text-pink-600 dark:text-pink-400',
-    gray: 'text-gray-600 dark:text-gray-400',
-    red: 'text-red-600 dark:text-red-400',
+    gray: 'text-gray-600 dark:text-gray-400', // colors.raw.neutral[600] / [400]
+    red: 'text-red-600 dark:text-red-400', // colors.raw.red[600] / [400]
     indigo: 'text-indigo-600 dark:text-indigo-400',
     cyan: 'text-cyan-600 dark:text-cyan-400',
     emerald: 'text-emerald-600 dark:text-emerald-400',
   };
 
   const borderColorClasses: Record<FeatureCardColor, string> = {
-    green: 'border-l-4 border-l-green-500',
-    blue: 'border-l-4 border-l-blue-500',
-    purple: 'border-l-4 border-l-purple-500',
-    orange: 'border-l-4 border-l-orange-500',
-    red: 'border-l-4 border-l-red-500',
+    green: 'border-l-4 border-l-green-500', // colors.raw.green[500]
+    blue: 'border-l-4 border-l-blue-500', // colors.raw.blue[500]
+    purple: 'border-l-4 border-l-purple-500', // colors.raw.purple[500]
+    orange: 'border-l-4 border-l-orange-500', // colors.raw.orange[500]
+    red: 'border-l-4 border-l-red-500', // colors.raw.red[500]
     indigo: 'border-l-4 border-l-indigo-500',
     cyan: 'border-l-4 border-l-cyan-500',
     emerald: 'border-l-4 border-l-emerald-500',
     pink: 'border-l-4 border-l-pink-500',
-    gray: 'border-l-4 border-l-gray-500',
+    gray: 'border-l-4 border-l-gray-500', // colors.raw.neutral[500]
   };
 
   const iconBackgroundClasses: Record<FeatureCardColor, string> = {
-    green: 'bg-green-100 dark:bg-green-900/20',
-    blue: 'bg-blue-100 dark:bg-blue-900/20',
-    purple: 'bg-purple-100 dark:bg-purple-900/20',
-    orange: 'bg-orange-100 dark:bg-orange-900/20',
-    red: 'bg-red-100 dark:bg-red-900/20',
+    green: 'bg-green-100 dark:bg-green-900/20', // colors.raw.green[100] / [900]
+    blue: 'bg-blue-100 dark:bg-blue-900/20', // colors.raw.blue[100] / [900]
+    purple: 'bg-purple-100 dark:bg-purple-900/20', // colors.raw.purple[100] / [900]
+    orange: 'bg-orange-100 dark:bg-orange-900/20', // colors.raw.orange[100] / [900]
+    red: 'bg-red-100 dark:bg-red-900/20', // colors.raw.red[100] / [900]
     indigo: 'bg-indigo-100 dark:bg-indigo-900/20',
     cyan: 'bg-cyan-100 dark:bg-cyan-900/20',
     emerald: 'bg-emerald-100 dark:bg-emerald-900/20',
     pink: 'bg-pink-100 dark:bg-pink-900/20',
-    gray: 'bg-gray-100 dark:bg-gray-900/20',
+    gray: 'bg-gray-100 dark:bg-gray-900/20', // colors.raw.neutral[100] / [900]
   };
 
   const bulletColorClasses: Record<FeatureCardColor, string> = {
-    green: 'bg-green-500',
-    blue: 'bg-blue-500',
-    purple: 'bg-purple-500',
-    orange: 'bg-orange-500',
-    red: 'bg-red-500',
+    green: 'bg-green-500', // colors.raw.green[500]
+    blue: 'bg-blue-500', // colors.raw.blue[500]
+    purple: 'bg-purple-500', // colors.raw.purple[500]
+    orange: 'bg-orange-500', // colors.raw.orange[500]
+    red: 'bg-red-500', // colors.raw.red[500]
     indigo: 'bg-indigo-500',
     cyan: 'bg-cyan-500',
     emerald: 'bg-emerald-500',
     pink: 'bg-pink-500',
-    gray: 'bg-gray-500',
+    gray: 'bg-gray-500', // colors.raw.neutral[500]
   };
 
   const CardContent = () => (
@@ -139,12 +141,24 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
       )}
 
       {/* Title */}
-      <Text className='text-xl font-semibold text-gray-900 dark:text-white mb-3'>
+      <Text
+        className={cn(
+          designTokens.typography.size.xl,
+          designTokens.typography.weight.semibold,
+          'text-gray-900 dark:text-white mb-3'
+        )}
+      >
         {title}
       </Text>
 
       {/* Description */}
-      <Text className='text-gray-600 dark:text-gray-300 mb-4 leading-relaxed'>
+      <Text
+        className={cn(
+          designTokens.typography.size.base,
+          designTokens.typography.leading.relaxed,
+          'text-gray-600 dark:text-gray-300 mb-4'
+        )}
+      >
         {description}
       </Text>
 
@@ -162,7 +176,13 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
                   bulletColorClasses[color]
                 )}
               />
-              <Text className='flex-1 text-sm text-gray-600 dark:text-gray-400'>
+              <Text
+                className={cn(
+                  'flex-1',
+                  designTokens.typography.size.sm,
+                  'text-gray-600 dark:text-gray-400'
+                )}
+              >
                 {benefit}
               </Text>
             </View>
@@ -178,10 +198,21 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
               key={index}
               className='flex-1 min-w-[80px] items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg'
             >
-              <Text className={cn('text-lg font-bold', colorClasses[color])}>
+              <Text
+                className={cn(
+                  designTokens.typography.size.lg,
+                  designTokens.typography.weight.bold,
+                  colorClasses[color]
+                )}
+              >
                 {value}
               </Text>
-              <Text className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
+              <Text
+                className={cn(
+                  designTokens.typography.size.xs,
+                  'text-gray-500 dark:text-gray-400 mt-1'
+                )}
+              >
                 {key}
               </Text>
             </View>

package/src/ui/FeatureGrid/FeatureGrid.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors, getCardVariantColors } from '@sudobility/design';
 
 export interface Feature {
   /** Unique identifier */
@@ -72,13 +73,12 @@ export const FeatureGrid: React.FC<FeatureGridProps> = ({
     lg: 'w-20 h-20',
   };
 
+  // Badge variants using DS badge colors
   const badgeVariants = {
-    success:
-      'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300',
-    info: 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300',
-    warning:
-      'bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300',
-    default: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300',
+    success: `${colors.component.badge.success.base} ${colors.component.badge.success.dark}`,
+    info: `${colors.component.badge.primary.base} ${colors.component.badge.primary.dark}`,
+    warning: `${colors.component.badge.attention.base} ${colors.component.badge.attention.dark}`,
+    default: `${colors.component.badge.default.base} ${colors.component.badge.default.dark}`,
   };
 
   const renderFeature = (feature: Feature, index: number) => {
@@ -87,7 +87,7 @@ export const FeatureGrid: React.FC<FeatureGridProps> = ({
         className={cn(
           'items-center',
           cardVariant === 'card' &&
-            'bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg',
+            `${getCardVariantColors('elevated')} rounded-2xl p-6`,
           cardVariant === 'minimal' && 'gap-4'
         )}
       >

package/src/ui/GradientIconContainer/GradientIconContainer.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors } from '@sudobility/design';
 
 export interface GradientIconContainerProps {
   /** Icon element */
@@ -28,6 +29,36 @@ export interface GradientIconContainerProps {
  * </GradientIconContainer>
  * ```
  */
+
+// Lazily derive gradient icon colors from DS to avoid ESM issues in tests.
+let _gradientIconColors: Record<string, string> | null = null;
+function getGradientIconColors() {
+  if (!_gradientIconColors) {
+    const btn = colors.component.button;
+    // Extract the leading bg-* class from DS button base strings (solid colors)
+    function extractBg(base: string) {
+      return (
+        base
+          .split(' ')
+          .find(
+            c =>
+              c.startsWith('bg-') &&
+              !c.includes('hover:') &&
+              !c.includes('active:')
+          ) || ''
+      );
+    }
+    _gradientIconColors = {
+      blue: extractBg(btn.primary.base),
+      purple: 'bg-purple-600', // DS has no purple button; local fallback
+      green: extractBg(btn.success.base),
+      orange: 'bg-orange-600', // DS has no orange button; local fallback
+      gray: 'bg-gray-700 dark:bg-gray-600',
+    };
+  }
+  return _gradientIconColors;
+}
+
 export const GradientIconContainer: React.FC<GradientIconContainerProps> = ({
   children,
   size = 'md',
@@ -50,14 +81,8 @@ export const GradientIconContainer: React.FC<GradientIconContainerProps> = ({
     circle: 'rounded-full',
   };
 
-  // Color variants (solid colors approximating gradients)
-  const variantClasses = {
-    blue: 'bg-blue-600',
-    purple: 'bg-purple-600',
-    green: 'bg-green-600',
-    orange: 'bg-orange-600',
-    gray: 'bg-gray-700 dark:bg-gray-600',
-  };
+  // Color variants from DS (solid colors approximating gradients)
+  const variantClasses = getGradientIconColors();
 
   const config = sizeConfig[size];
 

package/src/ui/Heading/Heading.tsx

@@ -1,6 +1,16 @@
 import * as React from 'react';
 import { Text } from 'react-native';
 import { cn } from '../../lib/utils';
+import { designTokens } from '@sudobility/design';
+
+const { typography } = designTokens;
+
+// Heading colors aligned with the design system color architecture
+const colorClasses = {
+  default: 'text-gray-900 dark:text-gray-100',
+  muted: 'text-gray-700 dark:text-gray-300',
+  primary: 'text-blue-600 dark:text-blue-400',
+} as const;
 
 export interface HeadingProps {
   /** Heading content */
@@ -60,48 +70,15 @@ export const Heading: React.FC<HeadingProps> = ({
 
   const actualSize = size || defaultSizes[level];
 
-  // Size configurations
-  const sizeClasses = {
-    '4xl': 'text-4xl',
-    '3xl': 'text-3xl',
-    '2xl': 'text-2xl',
-    xl: 'text-xl',
-    lg: 'text-lg',
-    base: 'text-base',
-  };
-
-  // Weight configurations
-  const weightClasses = {
-    normal: 'font-normal',
-    medium: 'font-medium',
-    semibold: 'font-semibold',
-    bold: 'font-bold',
-    extrabold: 'font-extrabold',
-  };
-
-  // Color configurations
-  const colorClasses = {
-    default: 'text-gray-900 dark:text-gray-100',
-    muted: 'text-gray-700 dark:text-gray-300',
-    primary: 'text-blue-600 dark:text-blue-400',
-  };
-
-  // Alignment configurations
-  const alignClasses = align
-    ? {
-        left: 'text-left',
-        center: 'text-center',
-        right: 'text-right',
-      }[align]
-    : '';
-
   return (
     <Text
       className={cn(
-        sizeClasses[actualSize],
-        weightClasses[weight],
+        typography.size[actualSize],
+        typography.weight[weight],
+        typography.leading.heading,
+        typography.tracking.heading,
         colorClasses[color],
-        alignClasses,
+        align ? typography.align[align] : '',
         className
       )}
       accessibilityRole='header'

package/src/ui/HelperText/HelperText.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, TextProps } from 'react-native';
 import { cn } from '../../lib/utils';
+import { colors, designTokens } from '@sudobility/design';
 
 export interface HelperTextProps extends TextProps {
   /** Helper text content */
@@ -43,10 +44,10 @@ export const HelperText: React.FC<HelperTextProps> = ({
   className,
   ...textProps
 }) => {
-  // Size configurations
+  // Size configurations using design tokens
   const sizeClasses = {
-    sm: 'text-sm',
-    base: 'text-base',
+    sm: designTokens.typography.size.sm,
+    base: designTokens.typography.size.base,
   };
 
   const iconSize = {
@@ -54,22 +55,22 @@ export const HelperText: React.FC<HelperTextProps> = ({
     base: 'w-5 h-5',
   };
 
-  // Variant configurations
+  // Variant configurations using DS alert icon colors and semantic text
   const variantConfig = {
     default: {
-      text: 'text-gray-600 dark:text-gray-400',
+      text: colors.component.alert.info.icon,
       icon: 'ℹ',
     },
     error: {
-      text: 'text-red-600 dark:text-red-400',
+      text: colors.component.alert.error.icon,
       icon: '⚠',
     },
     success: {
-      text: 'text-green-600 dark:text-green-400',
+      text: colors.component.alert.success.icon,
       icon: '✓',
     },
     warning: {
-      text: 'text-yellow-600 dark:text-yellow-400',
+      text: colors.component.alert.warning.icon,
       icon: '⚠',
     },
   };