orn-ui 0.1.0 → 0.2.0

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,48 @@ 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',
+
+  // El rojo va con texto blanco, que es lo que la gente espera de un botón
+  // destructivo. #ff3b30 no llega a 4.5:1 con blanco y obligaba a texto casi
+  // negro sobre rojo; este tono sí, y sigue leyéndose como rojo de alerta.
+  error: '#dc2626',
+  onError: '#ffffff',
+  errorSoft: '#fdeaea',
+  errorText: '#c62222',
+
+  warning: '#f59e0b',
+  onWarning: '#3d2600',
+  warningSoft: '#fdf1de',
+  warningText: '#8a4b00',
+
   background: '#f8f9fa',
   surface: '#ffffff',
   text: '#333333',
@@ -39,10 +101,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 +145,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',
 };

package/src/theme/types.ts

@@ -18,7 +18,17 @@ export type DeepPartial<T> = {
   [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
 };
 
+/** Acentos que se pueden definir con un solo hex vía `brand`. */
+export type BrandAccent = 'primary' | 'secondary' | 'success' | 'error' | 'warning';
+
 export interface ThemeOverrides {
+  /**
+   * Un hex por acento; de cada uno se derivan sus cuatro roles (relleno, lo
+   * que va encima, el fondo tenue y la variante legible sobre `surface`) para
+   * light y para dark, con el contraste ya resuelto. Un string suelto define
+   * `primary`. Lo que se pase en `colors` gana sobre lo derivado.
+   */
+  brand?: string | Partial<Record<BrandAccent, string>>;
   colors?: {
     light?: Partial<ThemeColors>;
     dark?: Partial<ThemeColors>;

package/lib/commonjs/molecules/ThemeToggle.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_createStyles","_UIProvider","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MODES","DEFAULT_LABELS","system","light","dark","useStyles","createStyles","theme","track","flexDirection","backgroundColor","colors","inputBackground","borderRadius","tokens","radius","md","padding","segment","flex","paddingVertical","spacing","sm","alignItems","segmentActive","surface","shadow","label","fontSize","fontWeight","medium","color","textLight","labelActive","primary","semibold","ThemeToggle","exports","memo","style","labels","labelOverrides","mode","setMode","useThemeMode","useColors","styles","allowFontScaling","useAllowFontScaling","jsx","View","accessibilityRole","children","map","m","active","TouchableOpacity","onPress","accessibilityState","selected","accessibilityLabel","Text","displayName"],"sourceRoot":"../../../src","sources":["molecules/ThemeToggle.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/molecules/ThemeToggle.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","memo","Text","TouchableOpacity","View","createStyles","useAllowFontScaling","useColors","useThemeMode","jsx","_jsx","MODES","DEFAULT_LABELS","system","light","dark","useStyles","theme","track","flexDirection","backgroundColor","colors","inputBackground","borderRadius","tokens","radius","md","padding","segment","flex","paddingVertical","spacing","sm","alignItems","segmentActive","surface","shadow","label","fontSize","fontWeight","medium","color","textLight","labelActive","primary","semibold","ThemeToggle","style","labels","labelOverrides","mode","setMode","styles","allowFontScaling","accessibilityRole","children","map","m","active","onPress","accessibilityState","selected","accessibilityLabel","displayName"],"sourceRoot":"../../../src","sources":["molecules/ThemeToggle.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/molecules/ThemeToggle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../../src/molecules/ThemeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAAgC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE5F,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEnG,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;CAC7C;AAuBD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,gEAA4C,gBAAgB,uBA4BlF,CAAC"}

package/src/molecules/ThemeToggle.tsx

@@ -1,67 +0,0 @@
-import React, { memo } from 'react';
-import { Text, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';
-import { createStyles } from '../theme/createStyles';
-import { useAllowFontScaling, useColors, useThemeMode, type ThemeMode } from '../theme/UIProvider';
-
-export interface ThemeToggleProps {
-  style?: StyleProp<ViewStyle>;
-  labels?: Partial<Record<ThemeMode, string>>;
-}
-
-const MODES: ThemeMode[] = ['system', 'light', 'dark'];
-const DEFAULT_LABELS: Record<ThemeMode, string> = { system: 'Auto', light: 'Light', dark: 'Dark' };
-
-const useStyles = createStyles((theme) => ({
-  track: {
-    flexDirection: 'row',
-    backgroundColor: theme.colors.inputBackground,
-    borderRadius: theme.tokens.radius.md,
-    padding: 3,
-  },
-  segment: {
-    flex: 1,
-    paddingVertical: theme.tokens.spacing.sm,
-    borderRadius: theme.tokens.radius.sm,
-    alignItems: 'center',
-  },
-  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 },
-}));
-
-/**
- * ThemeToggle
- * Segmented control de 3 estados (system/light/dark) conectado a
- * UIProvider.setMode. Sin persistencia — el consumidor la resuelve vía
- * onModeChange en <UIProvider>.
- */
-export const ThemeToggle = memo(({ style, labels: labelOverrides }: ThemeToggleProps) => {
-  const { mode, setMode } = useThemeMode();
-  const colors = useColors();
-  const styles = useStyles();
-  const allowFontScaling = useAllowFontScaling();
-  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
-
-  return (
-    <View style={[styles.track, style]} accessibilityRole="tablist">
-      {MODES.map((m) => {
-        const active = mode === m;
-        return (
-          <TouchableOpacity
-            key={m}
-            style={[styles.segment, active && styles.segmentActive]}
-            onPress={() => setMode(m)}
-            accessibilityRole="tab"
-            accessibilityState={{ selected: active }}
-            accessibilityLabel={labels[m]}
-          >
-            <Text allowFontScaling={allowFontScaling} style={[styles.label, active && styles.labelActive]}>
-              {labels[m]}
-            </Text>
-          </TouchableOpacity>
-        );
-      })}
-    </View>
-  );
-});
-ThemeToggle.displayName = 'ThemeToggle';