orn-ui 0.1.0 → 0.1.1

package/registry/toast.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "organisms/Toast.tsx",
-      "content": "import React, { memo, useEffect, useRef } from 'react';\nimport { Animated, Pressable, Text, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\n\nexport type ToastVariant = 'success' | 'error' | 'warning' | 'info';\n\nexport interface ToastProps {\n  title: string;\n  message?: string;\n  variant?: ToastVariant;\n  /** Se dispara al tocar el toast (además de cerrarlo). */\n  onPress?: () => void;\n  onDismiss?: () => void;\n  /** Oculta la X de cerrar. El toast igual se auto-descarta por tiempo. */\n  hideCloseButton?: boolean;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\nconst ICON_BY_VARIANT: Record<ToastVariant, IconName> = {\n  success: 'check',\n  error: 'alert',\n  warning: 'warning',\n  info: 'info',\n};\n\nconst useStyles = createStyles((theme) => ({\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: theme.tokens.spacing.md,\n    backgroundColor: theme.colors.surface,\n    borderRadius: theme.tokens.radius.lg,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    paddingVertical: theme.tokens.spacing.md,\n    paddingHorizontal: theme.tokens.spacing.lg,\n    ...theme.tokens.shadow.lg,\n  },\n  accent: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    bottom: 0,\n    width: 4,\n    borderTopLeftRadius: theme.tokens.radius.lg,\n    borderBottomLeftRadius: theme.tokens.radius.lg,\n  },\n  text: { flex: 1, gap: 2 },\n  title: {\n    fontSize: theme.tokens.fontSize.md,\n    fontWeight: theme.tokens.fontWeight.semibold,\n    color: theme.colors.text,\n  },\n  message: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.textLight, lineHeight: theme.tokens.lineHeight.sm },\n}));\n\n/**\n * Toast\n * Notificación efímera. Normalmente no se usa directo: `ToastProvider` +\n * `useToast()` la montan y la descartan por vos. Se expone igual por si\n * querés colocarla vos mismo dentro de una pantalla concreta.\n */\nexport const Toast = memo(\n  ({ title, message, variant = 'info', onPress, onDismiss, hideCloseButton, style, testID }: ToastProps) => {\n    const colors = useColors();\n    const styles = useStyles();\n    const allowFontScaling = useAllowFontScaling();\n\n    const accentColor: Record<ToastVariant, string> = {\n      success: colors.success,\n      error: colors.error,\n      warning: colors.warning,\n      info: colors.secondary,\n    };\n\n    const body = (\n      <View style={[styles.container, style]} testID={testID} accessibilityRole=\"alert\">\n        <View style={[styles.accent, { backgroundColor: accentColor[variant] }]} />\n        <Icon name={ICON_BY_VARIANT[variant]} size={22} color={accentColor[variant]} />\n        <View style={styles.text}>\n          <Text allowFontScaling={allowFontScaling} style={styles.title}>\n            {title}\n          </Text>\n          {!!message && (\n            <Text allowFontScaling={allowFontScaling} style={styles.message}>\n              {message}\n            </Text>\n          )}\n        </View>\n        {!hideCloseButton && !!onDismiss && (\n          <Pressable onPress={onDismiss} accessibilityRole=\"button\" accessibilityLabel=\"Dismiss\" hitSlop={8}>\n            <Icon name=\"close\" size={18} color={colors.textLight} />\n          </Pressable>\n        )}\n      </View>\n    );\n\n    if (!onPress) return body;\n\n    return (\n      <Pressable onPress={onPress} accessibilityRole=\"button\" accessibilityLabel={title}>\n        {body}\n      </Pressable>\n    );\n  }\n);\nToast.displayName = 'Toast';\n\n/** Envuelve un Toast con su animación de entrada/salida. Uso interno del provider. */\nexport const AnimatedToast = memo(\n  ({ children, onHeight }: { children: React.ReactNode; onHeight?: (h: number) => void }) => {\n    const progress = useRef(new Animated.Value(0)).current;\n\n    useEffect(() => {\n      Animated.spring(progress, { toValue: 1, useNativeDriver: true, speed: 14, bounciness: 4 }).start();\n    }, [progress]);\n\n    return (\n      <Animated.View\n        onLayout={(e) => onHeight?.(e.nativeEvent.layout.height)}\n        style={{\n          opacity: progress,\n          transform: [{ translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [-16, 0] }) }],\n        }}\n      >\n        {children}\n      </Animated.View>\n    );\n  }\n);\nAnimatedToast.displayName = 'AnimatedToast';\n"
+      "content": "import React, { memo, useEffect, useRef } from 'react';\nimport { Animated, Pressable, Text, View, type StyleProp, type ViewStyle } from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\n\nexport type ToastVariant = 'success' | 'error' | 'warning' | 'info';\n\nexport interface ToastProps {\n  title: string;\n  message?: string;\n  variant?: ToastVariant;\n  /** Se dispara al tocar el toast (además de cerrarlo). */\n  onPress?: () => void;\n  onDismiss?: () => void;\n  /** Oculta la X de cerrar. El toast igual se auto-descarta por tiempo. */\n  hideCloseButton?: boolean;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\nconst ICON_BY_VARIANT: Record<ToastVariant, IconName> = {\n  success: 'check',\n  error: 'alert',\n  warning: 'warning',\n  info: 'info',\n};\n\nconst useStyles = createStyles((theme) => ({\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: theme.tokens.spacing.md,\n    backgroundColor: theme.colors.surface,\n    borderRadius: theme.tokens.radius.lg,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    paddingVertical: theme.tokens.spacing.md,\n    paddingHorizontal: theme.tokens.spacing.lg,\n    ...theme.tokens.shadow.lg,\n  },\n  accent: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    bottom: 0,\n    width: 4,\n    borderTopLeftRadius: theme.tokens.radius.lg,\n    borderBottomLeftRadius: theme.tokens.radius.lg,\n  },\n  text: { flex: 1, gap: 2 },\n  title: {\n    fontSize: theme.tokens.fontSize.md,\n    fontWeight: theme.tokens.fontWeight.semibold,\n    color: theme.colors.text,\n  },\n  message: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.textLight, lineHeight: theme.tokens.lineHeight.sm },\n}));\n\n/**\n * Toast\n * Notificación efímera. Normalmente no se usa directo: `ToastProvider` +\n * `useToast()` la montan y la descartan por vos. Se expone igual por si\n * querés colocarla vos mismo dentro de una pantalla concreta.\n */\nexport const Toast = memo(\n  ({ title, message, variant = 'info', onPress, onDismiss, hideCloseButton, style, testID }: ToastProps) => {\n    const colors = useColors();\n    const styles = useStyles();\n    const allowFontScaling = useAllowFontScaling();\n\n    // La barra lateral es relleno (acento pleno); el ícono es contenido\n    // sobre la superficie del toast y necesita el rol `*Text`.\n    const barColor: Record<ToastVariant, string> = {\n      success: colors.success,\n      error: colors.error,\n      warning: colors.warning,\n      info: colors.secondary,\n    };\n    const iconColor: Record<ToastVariant, string> = {\n      success: colors.successText,\n      error: colors.errorText,\n      warning: colors.warningText,\n      info: colors.secondaryText,\n    };\n\n    const body = (\n      <View style={[styles.container, style]} testID={testID} accessibilityRole=\"alert\">\n        <View style={[styles.accent, { backgroundColor: barColor[variant] }]} />\n        <Icon name={ICON_BY_VARIANT[variant]} size={22} color={iconColor[variant]} />\n        <View style={styles.text}>\n          <Text allowFontScaling={allowFontScaling} style={styles.title}>\n            {title}\n          </Text>\n          {!!message && (\n            <Text allowFontScaling={allowFontScaling} style={styles.message}>\n              {message}\n            </Text>\n          )}\n        </View>\n        {!hideCloseButton && !!onDismiss && (\n          <Pressable onPress={onDismiss} accessibilityRole=\"button\" accessibilityLabel=\"Dismiss\" hitSlop={8}>\n            <Icon name=\"close\" size={18} color={colors.textLight} />\n          </Pressable>\n        )}\n      </View>\n    );\n\n    if (!onPress) return body;\n\n    return (\n      <Pressable onPress={onPress} accessibilityRole=\"button\" accessibilityLabel={title}>\n        {body}\n      </Pressable>\n    );\n  }\n);\nToast.displayName = 'Toast';\n\n/** Envuelve un Toast con su animación de entrada/salida. Uso interno del provider. */\nexport const AnimatedToast = memo(\n  ({ children, onHeight }: { children: React.ReactNode; onHeight?: (h: number) => void }) => {\n    const progress = useRef(new Animated.Value(0)).current;\n\n    useEffect(() => {\n      Animated.spring(progress, { toValue: 1, useNativeDriver: true, speed: 14, bounciness: 4 }).start();\n    }, [progress]);\n\n    return (\n      <Animated.View\n        onLayout={(e) => onHeight?.(e.nativeEvent.layout.height)}\n        style={{\n          opacity: progress,\n          transform: [{ translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [-16, 0] }) }],\n        }}\n      >\n        {children}\n      </Animated.View>\n    );\n  }\n);\nAnimatedToast.displayName = 'AnimatedToast';\n"
     }
   ],
   "registryDependencies": [

package/src/atoms/Avatar.tsx

@@ -28,7 +28,7 @@ export const Avatar = memo(({ size = 44, backgroundColor, children, style }: Ava
           width: size,
           height: size,
           borderRadius: size / 2,
-          backgroundColor: backgroundColor || colors.primary + '15',
+          backgroundColor: backgroundColor || colors.primarySoft,
         },
         style,
       ]}

package/src/atoms/Badge.tsx

@@ -37,10 +37,12 @@ export const Badge = memo(({ label, variant = 'neutral', backgroundColor, textCo
   const { colors } = theme;
 
   const palette: Record<BadgeVariant, { bg: string; fg: string }> = {
-    success: { bg: colors.success + '20', fg: colors.success },
-    error: { bg: colors.error + '20', fg: colors.error },
-    warning: { bg: colors.warning + '20', fg: colors.warning },
-    info: { bg: colors.secondary + '20', fg: colors.secondary },
+    // fg es el rol `*Text`, no el acento pleno: el acento sobre su propio
+    // tinte da ~2.2:1 en light — el label quedaba ilegible.
+    success: { bg: colors.successSoft, fg: colors.successText },
+    error: { bg: colors.errorSoft, fg: colors.errorText },
+    warning: { bg: colors.warningSoft, fg: colors.warningText },
+    info: { bg: colors.secondarySoft, fg: colors.secondaryText },
     neutral: { bg: colors.inputBackground, fg: colors.textLight },
   };
 

package/src/atoms/Button.tsx

@@ -65,19 +65,21 @@ function resolveColors(variant: ButtonVariant, disabled: boolean, colors: Return
     return { background: colors.inputBackground, text: colors.textLight, border: 'transparent' };
   }
   switch (variant) {
+    // Las variantes sin relleno pintan texto sobre el fondo de la pantalla:
+    // van con el rol `*Text`. Las rellenas van con `on*` sobre el acento.
     case 'outline':
-      return { background: 'transparent', text: colors.primary, border: colors.primary };
+      return { background: 'transparent', text: colors.primaryText, border: colors.primary };
     case 'ghost':
-      return { background: 'transparent', text: colors.primary, border: 'transparent' };
+      return { background: 'transparent', text: colors.primaryText, border: 'transparent' };
     case 'link':
-      return { background: 'transparent', text: colors.primary, border: 'transparent' };
+      return { background: 'transparent', text: colors.primaryText, border: 'transparent' };
     case 'secondary':
-      return { background: colors.secondary, text: colors.white, border: 'transparent' };
+      return { background: colors.secondary, text: colors.onSecondary, border: 'transparent' };
     case 'destructive':
-      return { background: colors.error, text: colors.white, border: 'transparent' };
+      return { background: colors.error, text: colors.onError, border: 'transparent' };
     case 'primary':
     default:
-      return { background: colors.primary, text: colors.white, border: 'transparent' };
+      return { background: colors.primary, text: colors.onPrimary, border: 'transparent' };
   }
 }
 

package/src/atoms/Checkbox.tsx

@@ -32,6 +32,9 @@ export const Checkbox = memo(({ value, onValueChange, label, color, disabled, te
   const styles = useStyles();
   const allowFontScaling = useAllowFontScaling();
   const activeColor = color || colors.primary;
+  // El check va encima del relleno: con `color` propio no sabemos qué tono
+  // contrasta, así que ahí seguimos con blanco (decisión del consumidor).
+  const checkColor = color ? colors.white : colors.onPrimary;
   const progress = useRef(new Animated.Value(value ? 1 : 0)).current;
   const checkScale = useRef(new Animated.Value(value ? 1 : 0)).current;
 
@@ -61,7 +64,7 @@ export const Checkbox = memo(({ value, onValueChange, label, color, disabled, te
     >
       <Animated.View style={[styles.box, { backgroundColor, borderColor, opacity: disabled ? 0.5 : 1 }]}>
         <Animated.View style={{ transform: [{ scale: checkScale }] }}>
-          <Icon name="check" size={16} color={colors.white} />
+          <Icon name="check" size={16} color={checkColor} />
         </Animated.View>
       </Animated.View>
       {label && (

package/src/atoms/Fab.tsx

@@ -55,7 +55,7 @@ export const Fab = memo(
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel}
       >
-        {icon ?? <Icon name={iconName} size={size * 0.5} color={colors.white} />}
+        {icon ?? <Icon name={iconName} size={size * 0.5} color={colors.onPrimary} />}
       </PressableScale>
     );
   }

package/src/atoms/Image.tsx

@@ -40,9 +40,9 @@ export interface ImageProps {
 }
 
 const useStyles = createStyles((theme) => ({
-  container: { overflow: 'hidden', backgroundColor: theme.colors.border + '30' },
+  container: { overflow: 'hidden', backgroundColor: theme.colors.skeleton },
   overlay: { alignItems: 'center', justifyContent: 'center' },
-  fallback: { flex: 1, backgroundColor: theme.colors.border + '30' },
+  fallback: { flex: 1, backgroundColor: theme.colors.skeleton },
 }));
 
 function sourceUri(source: ImageSourcePropType): string | undefined {

package/src/atoms/Input.tsx

@@ -37,7 +37,7 @@ const useStyles = createStyles((theme) => ({
     fontWeight: theme.tokens.fontWeight.medium,
     color: theme.colors.text,
   },
-  required: { color: theme.colors.error },
+  required: { color: theme.colors.errorText },
   inputWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -55,7 +55,7 @@ const useStyles = createStyles((theme) => ({
   },
   leftIcon: { marginLeft: theme.tokens.spacing.lg, marginRight: -theme.tokens.spacing.xs },
   rightIcon: { padding: theme.tokens.spacing.sm + 2, marginRight: theme.tokens.spacing.xs },
-  errorText: { marginTop: theme.tokens.spacing.xs, fontSize: theme.tokens.fontSize.sm, color: theme.colors.error },
+  errorText: { marginTop: theme.tokens.spacing.xs, fontSize: theme.tokens.fontSize.sm, color: theme.colors.errorText },
 }));
 
 /**

package/src/molecules/AvatarHeader.tsx

@@ -22,12 +22,12 @@ const useStyles = createStyles((theme) => ({
     width: 80,
     height: 80,
     borderRadius: 40,
-    backgroundColor: theme.colors.primary + '20',
+    backgroundColor: theme.colors.primarySoft,
     justifyContent: 'center',
     alignItems: 'center',
     marginBottom: theme.tokens.spacing.md,
   },
-  initials: { fontSize: theme.tokens.fontSize.xxl, fontWeight: theme.tokens.fontWeight.bold, color: theme.colors.primary },
+  initials: { fontSize: theme.tokens.fontSize.xxl, fontWeight: theme.tokens.fontWeight.bold, color: theme.colors.primaryText },
   title: { fontSize: theme.tokens.fontSize.xl, fontWeight: theme.tokens.fontWeight.bold, textAlign: 'center', color: theme.colors.text, marginBottom: theme.tokens.spacing.xs },
   subtitle: { fontSize: theme.tokens.fontSize.md, color: theme.colors.textLight },
 }));

package/src/molecules/OptionCard.tsx

@@ -29,14 +29,14 @@ const useStyles = createStyles((theme) => ({
   cardVertical: { width: '31%', padding: theme.tokens.spacing.sm, gap: 5, minHeight: 100 },
   cardSelected: {
     borderColor: theme.colors.primary,
-    backgroundColor: theme.colors.primary + '15',
+    backgroundColor: theme.colors.primarySoft,
     borderWidth: 1.5,
     elevation: 0,
     shadowOpacity: 0,
   },
   label: { color: theme.colors.textLight, fontWeight: theme.tokens.fontWeight.medium },
   labelVertical: { fontSize: theme.tokens.fontSize.xs, textAlign: 'center' },
-  labelSelected: { color: theme.colors.primary },
+  labelSelected: { color: theme.colors.primaryText },
 }));
 
 /**

package/src/molecules/Steps.tsx

@@ -82,8 +82,8 @@ export const Steps = memo(
     const isVertical = orientation === 'vertical';
 
     const colorsFor = (status: StepStatus) => {
-      if (status === 'completed') return { bg: colors.primary, border: colors.primary, fg: colors.white };
-      if (status === 'current') return { bg: 'transparent', border: colors.primary, fg: colors.primary };
+      if (status === 'completed') return { bg: colors.primary, border: colors.primary, fg: colors.onPrimary };
+      if (status === 'current') return { bg: 'transparent', border: colors.primary, fg: colors.primaryText };
       return { bg: 'transparent', border: colors.border, fg: colors.textLight };
     };
 

package/src/molecules/ThemeToggle.tsx

@@ -26,7 +26,7 @@ const useStyles = createStyles((theme) => ({
   },
   segmentActive: { backgroundColor: theme.colors.surface, ...theme.tokens.shadow.sm },
   label: { fontSize: theme.tokens.fontSize.sm, fontWeight: theme.tokens.fontWeight.medium, color: theme.colors.textLight },
-  labelActive: { color: theme.colors.primary, fontWeight: theme.tokens.fontWeight.semibold },
+  labelActive: { color: theme.colors.primaryText, fontWeight: theme.tokens.fontWeight.semibold },
 }));
 
 /**

package/src/organisms/Alert.tsx

@@ -91,11 +91,12 @@ export const Alert = memo((props: AlertProps) => {
   if (!visible) return null;
 
   const iconColor: Record<AlertType, string> = {
-    success: colors.success,
-    error: colors.error,
-    warning: colors.warning,
-    question: colors.primary,
-    info: colors.secondary,
+    // Íconos sobre la superficie del diálogo: rol `*Text`, no el acento pleno.
+    success: colors.successText,
+    error: colors.errorText,
+    warning: colors.warningText,
+    question: colors.primaryText,
+    info: colors.secondaryText,
   };
 
   const effectiveButtons = resolveButtons(props, { confirm: labels.confirm, cancel: labels.cancel, close: labels.close });

package/src/organisms/DateField.tsx

@@ -30,7 +30,7 @@ function defaultFormat(date: Date, monthNames: string[]): string {
 const useStyles = createStyles((theme) => ({
   container: { marginBottom: theme.tokens.spacing.lg, width: '100%', gap: theme.tokens.spacing.sm },
   label: { fontSize: theme.tokens.fontSize.md, fontWeight: theme.tokens.fontWeight.medium, color: theme.colors.text },
-  required: { color: theme.colors.error },
+  required: { color: theme.colors.errorText },
   field: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -45,7 +45,7 @@ const useStyles = createStyles((theme) => ({
   fieldError: { borderColor: theme.colors.error },
   fieldText: { fontSize: theme.tokens.fontSize.lg, color: theme.colors.text },
   placeholder: { color: theme.colors.textLight },
-  errorText: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.error },
+  errorText: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.errorText },
 }));
 
 /**

package/src/organisms/DatePicker.tsx

@@ -110,13 +110,13 @@ const useStyles = createStyles((theme) => ({
   dayButton: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center' },
   dayText: { fontSize: theme.tokens.fontSize.md, color: theme.colors.text },
   daySelected: { backgroundColor: theme.colors.primary },
-  dayTextSelected: { color: theme.colors.white, fontWeight: theme.tokens.fontWeight.bold },
+  dayTextSelected: { color: theme.colors.onPrimary, fontWeight: theme.tokens.fontWeight.bold },
   // El resaltado del tramo intermedio va en la celda (cuadrada, sin gaps) y
   // no en el botón redondo, así la barra del rango se ve continua.
-  cellInRange: { backgroundColor: theme.colors.primary + '1f' },
+  cellInRange: { backgroundColor: theme.colors.primarySoft },
   cellRangeStart: { borderTopLeftRadius: 18, borderBottomLeftRadius: 18 },
   cellRangeEnd: { borderTopRightRadius: 18, borderBottomRightRadius: 18 },
-  dayTextInRange: { color: theme.colors.primary, fontWeight: theme.tokens.fontWeight.semibold },
+  dayTextInRange: { color: theme.colors.primaryText, fontWeight: theme.tokens.fontWeight.semibold },
   dayToday: { borderWidth: 1, borderColor: theme.colors.primary },
   dayTextDisabled: { color: theme.colors.textLight, opacity: 0.4 },
 }));

package/src/organisms/List.tsx

@@ -54,7 +54,7 @@ const useStyles = createStyles((theme) => ({
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: theme.colors.background + 'CC',
+    backgroundColor: theme.colors.scrim,
     zIndex: 10,
     justifyContent: 'center',
     alignItems: 'center',

package/src/organisms/SearchList.tsx

@@ -57,7 +57,7 @@ const useStyles = createStyles((theme) => ({
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: theme.colors.surface + 'B3',
+    backgroundColor: theme.colors.scrim,
     zIndex: 10,
     justifyContent: 'center',
     alignItems: 'center',
@@ -147,7 +147,7 @@ export function SearchList<T>({
           <IconButton
             iconName="search"
             onPress={onScanPress}
-            color={colors.white}
+            color={colors.onPrimary}
             style={styles.scanButton}
             accessibilityLabel={scanAccessibilityLabel}
           />

package/src/organisms/Select.tsx

@@ -25,7 +25,7 @@ const useStyles = createStyles((theme) => ({
   container: { gap: theme.tokens.spacing.sm },
   containerOpen: { zIndex: 20, elevation: 20 },
   label: { fontWeight: theme.tokens.fontWeight.bold, fontSize: theme.tokens.fontSize.md, color: theme.colors.text },
-  required: { color: theme.colors.error },
+  required: { color: theme.colors.errorText },
   field: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -64,10 +64,10 @@ const useStyles = createStyles((theme) => ({
     borderBottomColor: theme.colors.border,
   },
   optionRowLast: { borderBottomWidth: 0 },
-  optionRowSelected: { backgroundColor: theme.colors.primary + '15' },
+  optionRowSelected: { backgroundColor: theme.colors.primarySoft },
   optionText: { fontSize: theme.tokens.fontSize.lg - 1, color: theme.colors.text },
-  optionTextSelected: { fontWeight: theme.tokens.fontWeight.semibold, color: theme.colors.primary },
-  errorText: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.error },
+  optionTextSelected: { fontWeight: theme.tokens.fontWeight.semibold, color: theme.colors.primaryText },
+  errorText: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.errorText },
 }));
 
 /**

package/src/organisms/Toast.tsx

@@ -70,17 +70,25 @@ export const Toast = memo(
     const styles = useStyles();
     const allowFontScaling = useAllowFontScaling();
 
-    const accentColor: Record<ToastVariant, string> = {
+    // La barra lateral es relleno (acento pleno); el ícono es contenido
+    // sobre la superficie del toast y necesita el rol `*Text`.
+    const barColor: Record<ToastVariant, string> = {
       success: colors.success,
       error: colors.error,
       warning: colors.warning,
       info: colors.secondary,
     };
+    const iconColor: Record<ToastVariant, string> = {
+      success: colors.successText,
+      error: colors.errorText,
+      warning: colors.warningText,
+      info: colors.secondaryText,
+    };
 
     const body = (
       <View style={[styles.container, style]} testID={testID} accessibilityRole="alert">
-        <View style={[styles.accent, { backgroundColor: accentColor[variant] }]} />
-        <Icon name={ICON_BY_VARIANT[variant]} size={22} color={accentColor[variant]} />
+        <View style={[styles.accent, { backgroundColor: barColor[variant] }]} />
+        <Icon name={ICON_BY_VARIANT[variant]} size={22} color={iconColor[variant]} />
         <View style={styles.text}>
           <Text allowFontScaling={allowFontScaling} style={styles.title}>
             {title}

package/src/safe-area/SafeAreaUIProvider.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { UIProvider, type UIProviderProps } from '../theme/UIProvider';
+
+export interface SafeAreaUIProviderProps extends Omit<UIProviderProps, 'insets'> {
+  /**
+   * Insets explícitos. Ganan sobre los medidos — útil para tests, storybook o
+   * una pantalla embebida que no ocupa la ventana entera.
+   */
+  insets?: UIProviderProps['insets'];
+  /**
+   * Montar también el `<SafeAreaProvider>`. Ponelo en false si tu app ya tiene
+   * uno arriba (React Navigation lo monta solo en algunas plantillas):
+   * un provider anidado mide el frame de *su* View, no el de la ventana, así
+   * que ahí adentro los insets darían cero.
+   * @default true
+   */
+  mountSafeAreaProvider?: boolean;
+}
+
+function Measured({ insets: override, children, ...rest }: SafeAreaUIProviderProps) {
+  const measured = useSafeAreaInsets();
+  return (
+    <UIProvider insets={override ?? measured} {...rest}>
+      {children}
+    </UIProvider>
+  );
+}
+
+/**
+ * SafeAreaUIProvider
+ * `UIProvider` con los insets ya cableados desde `react-native-safe-area-context`.
+ *
+ * Vive en su propio subpath (`orn-ui/safe-area`) a propósito: es el único
+ * archivo de la librería que importa un paquete de terceros. Nada del entry
+ * principal lo referencia, así que quien hace `import { Button } from 'orn-ui'`
+ * nunca lo resuelve y el bundle sigue sin dependencias de runtime.
+ *
+ * ```tsx
+ * import { SafeAreaUIProvider } from 'orn-ui/safe-area';
+ *
+ * export default function App() {
+ *   return (
+ *     <SafeAreaUIProvider defaultMode="system">
+ *       <RootNavigator />
+ *     </SafeAreaUIProvider>
+ *   );
+ * }
+ * ```
+ *
+ * El equivalente a mano — pasarle `insets={useSafeAreaInsets()}` a `UIProvider`
+ * desde un componente que ya esté dentro de `<SafeAreaProvider>` — sigue
+ * siendo válido. Esto sólo evita el error silencioso de olvidarlo: `insets`
+ * por defecto es `{0,0,0,0}`, y con ceros el bottom sheet queda pegado contra
+ * la barra de gestos y el modal `full` se mete abajo del notch.
+ */
+export function SafeAreaUIProvider({
+  mountSafeAreaProvider = true,
+  ...props
+}: SafeAreaUIProviderProps) {
+  if (!mountSafeAreaProvider) return <Measured {...props} />;
+  return (
+    <SafeAreaProvider>
+      <Measured {...props} />
+    </SafeAreaProvider>
+  );
+}

package/src/safe-area/index.ts

@@ -0,0 +1,2 @@
+export { SafeAreaUIProvider } from './SafeAreaUIProvider';
+export type { SafeAreaUIProviderProps } from './SafeAreaUIProvider';

package/src/theme/UIProvider.tsx

@@ -21,6 +21,9 @@ interface UIContextValue {
 
 const UIContext = createContext<UIContextValue | undefined>(undefined);
 
+/** Una sola vez por sesión: en un re-render el aviso no aporta nada nuevo. */
+let warnedAboutInsets = false;
+
 export interface UIProviderProps {
   children: React.ReactNode;
   /** Par light/dark. Por defecto el theme de marca de la librería (créalo con createTheme()). */
@@ -70,6 +73,18 @@ export function UIProvider({
     [isControlled, onModeChange]
   );
 
+  // Olvidar `insets` no rompe nada visible al montar: el default de ceros
+  // recién se nota cuando abrís un Modal `full` (se mete abajo del notch) o un
+  // BottomSheet (queda pegado a la barra de gestos). El aviso llega antes.
+  if (__DEV__ && insets === zeroInsets && !warnedAboutInsets) {
+    warnedAboutInsets = true;
+    console.warn(
+      'orn-ui: <UIProvider> sin `insets`, se usan {top:0,bottom:0,left:0,right:0}. ' +
+        'Los modales y el Screen quedan sin safe area. Pasá `insets={useSafeAreaInsets()}` ' +
+        "o usá <SafeAreaUIProvider> de 'orn-ui/safe-area', que lo cablea solo."
+    );
+  }
+
   const scheme: 'light' | 'dark' =
     mode === 'system' ? (systemScheme === 'dark' ? 'dark' : 'light') : mode;
 

package/src/theme/palettes.ts

@@ -2,15 +2,49 @@
  * Cada color es `string`, no un literal (`as const`): light y dark tienen
  * valores distintos para la misma clave, y createTheme() debe poder
  * aceptar cualquier hex/rgba en los overrides — literal typing lo impediría.
+ *
+ * Cada acento viene en cuatro roles, y no son intercambiables:
+ *
+ *   `primary`      relleno sólido (fondo de botón, día seleccionado, FAB).
+ *   `onPrimary`    texto/ícono *encima* de ese relleno.
+ *   `primarySoft`  fondo teñido para estados seleccionados y pills.
+ *   `primaryText`  texto/ícono del acento sobre `surface`, `background`
+ *                  o sobre su propio `primarySoft`.
+ *
+ * El motivo es el contraste: un acento que se lee bien como relleno no se
+ * lee como texto. Antes los componentes usaban `colors.primary` para las dos
+ * cosas y lo teñían concatenando alpha al hex (`colors.primary + '15'`), lo
+ * que en dark daba 2.6:1 sobre la superficie — muy por debajo del 4.5:1 de
+ * WCAG AA. Todos los pares de esta paleta pasan AA en ambos esquemas.
  */
 export interface ThemeColors {
   primary: string;
+  onPrimary: string;
+  primarySoft: string;
+  primaryText: string;
+
   secondary: string;
-  white: string;
-  black: string;
-  error: string;
+  onSecondary: string;
+  secondarySoft: string;
+  secondaryText: string;
+
   success: string;
+  onSuccess: string;
+  successSoft: string;
+  successText: string;
+
+  error: string;
+  onError: string;
+  errorSoft: string;
+  errorText: string;
+
   warning: string;
+  onWarning: string;
+  warningSoft: string;
+  warningText: string;
+
+  white: string;
+  black: string;
   background: string;
   surface: string;
   text: string;
@@ -18,20 +52,45 @@ export interface ThemeColors {
   border: string;
   inputBackground: string;
   overlay: string;
+  /** Velo semitransparente sobre contenido propio (footer de carga de List). */
+  scrim: string;
+  /** Fondo de placeholder mientras carga una imagen. */
+  skeleton: string;
 }
 
-const shared = {
-  primary: '#004cef',
-  secondary: '#00cae1',
+const neutral = {
   white: '#ffffff',
   black: '#000000',
-  error: '#ff3b30',
-  success: '#34c759',
-  warning: '#f59e0b',
 };
 
 export const lightPalette: ThemeColors = {
-  ...shared,
+  ...neutral,
+
+  primary: '#004cef',
+  onPrimary: '#ffffff',
+  primarySoft: '#e6edfe',
+  primaryText: '#00369f',
+
+  secondary: '#00cae1',
+  onSecondary: '#00363d',
+  secondarySoft: '#dcf6f9',
+  secondaryText: '#00707d',
+
+  success: '#34c759',
+  onSuccess: '#00320f',
+  successSoft: '#e3f6e9',
+  successText: '#116a30',
+
+  error: '#ff3b30',
+  onError: '#3d0300',
+  errorSoft: '#fdeaea',
+  errorText: '#c62222',
+
+  warning: '#f59e0b',
+  onWarning: '#3d2600',
+  warningSoft: '#fdf1de',
+  warningText: '#8a4b00',
+
   background: '#f8f9fa',
   surface: '#ffffff',
   text: '#333333',
@@ -39,10 +98,43 @@ export const lightPalette: ThemeColors = {
   border: '#e5e7eb',
   inputBackground: '#f5f7fa',
   overlay: 'rgba(0,0,0,0.5)',
+  scrim: 'rgba(248,249,250,0.8)',
+  skeleton: '#eceef1',
 };
 
+/**
+ * Los acentos de dark NO son los de light: sobre `#1e1e1e` hay que subir la
+ * luminosidad del acento y bajar la del texto que va encima (por eso
+ * `onPrimary` es azul oscuro acá y blanco en light).
+ */
 export const darkPalette: ThemeColors = {
-  ...shared,
+  ...neutral,
+
+  primary: '#7ba4ff',
+  onPrimary: '#00205c',
+  primarySoft: '#1b2740',
+  primaryText: '#a9c3ff',
+
+  secondary: '#4dd8e8',
+  onSecondary: '#00363d',
+  secondarySoft: '#12333a',
+  secondaryText: '#7fe6f2',
+
+  success: '#5ddb84',
+  onSuccess: '#003514',
+  successSoft: '#13301e',
+  successText: '#7fe6a1',
+
+  error: '#ff7b72',
+  onError: '#4d0500',
+  errorSoft: '#3a1c1a',
+  errorText: '#ffa9a3',
+
+  warning: '#f0b458',
+  onWarning: '#3d2600',
+  warningSoft: '#33260f',
+  warningText: '#f5c97e',
+
   background: '#121212',
   surface: '#1e1e1e',
   text: '#ecedee',
@@ -50,4 +142,6 @@ export const darkPalette: ThemeColors = {
   border: '#2a2a2e',
   inputBackground: '#232326',
   overlay: 'rgba(0,0,0,0.6)',
+  scrim: 'rgba(18,18,18,0.8)',
+  skeleton: '#26262a',
 };