orn-ui 0.1.0 → 0.2.0

package/src/organisms/Toast.tsx

@@ -1,7 +1,8 @@
-import React, { memo, useEffect, useRef } from 'react';
-import { Animated, Pressable, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import React, { memo } from 'react';
+import { Pressable, Text, View, type StyleProp, type ViewStyle } from 'react-native';
 import { createStyles } from '../theme/createStyles';
 import { useAllowFontScaling, useColors } from '../theme/UIProvider';
+import { Transition } from '../atoms/Transition';
 import { Icon } from '../icons/Icon';
 import type { IconName } from '../icons/types';
 
@@ -70,17 +71,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}
@@ -112,24 +121,10 @@ Toast.displayName = 'Toast';
 
 /** Envuelve un Toast con su animación de entrada/salida. Uso interno del provider. */
 export const AnimatedToast = memo(
-  ({ children, onHeight }: { children: React.ReactNode; onHeight?: (h: number) => void }) => {
-    const progress = useRef(new Animated.Value(0)).current;
-
-    useEffect(() => {
-      Animated.spring(progress, { toValue: 1, useNativeDriver: true, speed: 14, bounciness: 4 }).start();
-    }, [progress]);
-
-    return (
-      <Animated.View
-        onLayout={(e) => onHeight?.(e.nativeEvent.layout.height)}
-        style={{
-          opacity: progress,
-          transform: [{ translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [-16, 0] }) }],
-        }}
-      >
-        {children}
-      </Animated.View>
-    );
-  }
+  ({ children, onHeight }: { children: React.ReactNode; onHeight?: (h: number) => void }) => (
+    <Transition preset={['fade', 'slide-down']} distance={16} spring>
+      <View onLayout={(e) => onHeight?.(e.nativeEvent.layout.height)}>{children}</View>
+    </Transition>
+  )
 );
 AnimatedToast.displayName = 'AnimatedToast';

package/src/organisms/ToastProvider.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { AnimatedToast, Toast, type ToastVariant } from './Toast';
 import { useInsets } from '../theme/UIProvider';
 import { createStyles } from '../theme/createStyles';
+import { createImperativeBridge } from './imperativeBridge';
 
 export interface ToastOptions {
   title: string;
@@ -26,6 +27,24 @@ interface ToastContextValue {
 }
 
 const ToastContext = createContext<ToastContextValue | undefined>(undefined);
+const bridge = createImperativeBridge<ToastContextValue>('ToastProvider');
+
+/**
+ * Muestra un toast desde fuera del árbol de React —un servicio, un
+ * interceptor— sin pasar por el hook. Devuelve el id, o '' si no hay
+ * <ToastProvider> montado.
+ */
+export function showToast(options: ToastOptions): string {
+  return bridge.get()?.show(options) ?? '';
+}
+
+export function hideToast(id: string): void {
+  bridge.get()?.hide(id);
+}
+
+export function hideAllToasts(): void {
+  bridge.get()?.hideAll();
+}
 
 const useStyles = createStyles((theme) => ({
   host: { position: 'absolute', left: 0, right: 0, paddingHorizontal: theme.tokens.spacing.lg, gap: theme.tokens.spacing.sm },
@@ -122,6 +141,11 @@ export function ToastProvider({
 
   const value = useMemo<ToastContextValue>(() => ({ show, hide, hideAll }), [show, hide, hideAll]);
 
+  useEffect(() => {
+    bridge.set(value);
+    return () => bridge.set(null);
+  }, [value]);
+
   const hostPosition =
     position === 'top'
       ? { top: insets.top + 8 }

package/src/organisms/Wizard.tsx

@@ -1,8 +1,9 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ScrollView, View, type StyleProp, type ViewStyle } from 'react-native';
 import { createStyles } from '../theme/createStyles';
 import { Steps, type StepItem } from '../molecules/Steps';
 import { Button } from '../atoms/Button';
+import { Transition } from '../atoms/Transition';
 
 export interface WizardStep extends StepItem {
   content: React.ReactNode;
@@ -31,6 +32,12 @@ export interface WizardProps {
    * @default true
    */
   scrollableContent?: boolean;
+  /**
+   * El contenido del paso entra deslizándose en el sentido de la navegación.
+   * Sólo opacity y transform, así que la animación corre en el hilo nativo.
+   * @default true
+   */
+  animated?: boolean;
   style?: StyleProp<ViewStyle>;
 }
 
@@ -61,6 +68,7 @@ export function Wizard({
   nextLabel = 'Next',
   finishLabel = 'Finish',
   scrollableContent = true,
+  animated = true,
   style,
 }: WizardProps) {
   const styles = useStyles();
@@ -82,6 +90,15 @@ export function Wizard({
     [steps]
   );
 
+  // El ref todavía guarda el paso anterior durante el render que trae el nuevo.
+  const previous = useRef(current);
+  const forward = current >= previous.current;
+  const entered = useRef(false);
+  useEffect(() => {
+    previous.current = current;
+    entered.current = true;
+  }, [current]);
+
   const activeStep = steps[current];
   const isFirst = current === 0;
   const isLast = current === steps.length - 1;
@@ -92,6 +109,22 @@ export function Wizard({
     else goTo(current + 1);
   };
 
+  // El paso saliente no se anima: mantener los dos montados a la vez duplicaría
+  // los formularios y su estado.
+  const renderContent = () =>
+    animated ? (
+      <Transition
+        key={current}
+        testID="wizard-step"
+        preset={['fade', forward ? 'slide-left' : 'slide-right']}
+        appear={entered.current}
+      >
+        {activeStep?.content}
+      </Transition>
+    ) : (
+      activeStep?.content
+    );
+
   return (
     <View style={[styles.container, style]}>
       <Steps
@@ -115,10 +148,10 @@ export function Wizard({
           automaticallyAdjustKeyboardInsets
           showsVerticalScrollIndicator={false}
         >
-          {activeStep?.content}
+          {renderContent()}
         </ScrollView>
       ) : (
-        <View style={styles.content}>{activeStep?.content}</View>
+        <View style={styles.content}>{renderContent()}</View>
       )}
 
       <View style={styles.footer}>

package/src/organisms/imperativeBridge.ts

@@ -0,0 +1,28 @@
+/**
+ * Puente entre el proveedor montado y el código que no es un componente
+ * (servicios, capa de API, interceptores). El proveedor se registra al montar y
+ * se borra al desmontar, así que fuera del árbol nunca queda una referencia
+ * viva a un contexto muerto.
+ */
+export interface ImperativeBridge<T> {
+  set: (value: T | null) => void;
+  get: () => T | null;
+}
+
+export function createImperativeBridge<T>(providerName: string): ImperativeBridge<T> {
+  let current: T | null = null;
+
+  return {
+    set: (value) => {
+      current = value;
+    },
+    get: () => {
+      if (!current && __DEV__) {
+        console.warn(
+          `orn-ui: se llamó a la API imperativa sin un <${providerName}> montado. La llamada se ignoró.`
+        );
+      }
+      return current;
+    },
+  };
+}

package/src/organisms/index.ts

@@ -1,12 +1,12 @@
 export { Modal } from './Modal';
 export type { ModalProps, ModalVariant } from './Modal';
 export { BottomSheet } from './BottomSheet';
-export type { BottomSheetProps } from './BottomSheet';
+export type { BottomSheetProps, FooterPlacement } from './BottomSheet';
 export { Select } from './Select';
 export type { SelectProps, SelectOption } from './Select';
 export { Alert } from './Alert';
 export type { AlertProps, AlertButton, AlertType } from './Alert';
-export { AlertProvider, useAlert } from './AlertProvider';
+export { AlertProvider, useAlert, showAlert, showConfirm, hideAlert } from './AlertProvider';
 export type { AlertOptions, ConfirmOptions } from './AlertProvider';
 export { Screen } from './Screen';
 export type { ScreenProps, ScreenEdge } from './Screen';
@@ -16,7 +16,7 @@ export { SearchList } from './SearchList';
 export type { SearchListProps } from './SearchList';
 export { Toast } from './Toast';
 export type { ToastProps, ToastVariant } from './Toast';
-export { ToastProvider, useToast } from './ToastProvider';
+export { ToastProvider, useToast, showToast, hideToast, hideAllToasts } from './ToastProvider';
 export type { ToastProviderProps, ToastOptions } from './ToastProvider';
 export { DatePicker, buildMonthGrid, DEFAULT_MONTH_NAMES, DEFAULT_WEEKDAY_NAMES } from './DatePicker';
 export type { DatePickerProps, DateRange } from './DatePicker';
@@ -24,3 +24,7 @@ export { DateField } from './DateField';
 export type { DateFieldProps } from './DateField';
 export { Wizard } from './Wizard';
 export type { WizardProps, WizardStep } from './Wizard';
+export { ThemeToggle } from './ThemeToggle';
+export type { ThemeToggleProps } from './ThemeToggle';
+export { NavigationBar } from './NavigationBar';
+export type { NavigationBarProps, NavigationBarItem } from './NavigationBar';

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/colors.ts

@@ -0,0 +1,175 @@
+/**
+ * Utilidades de color sin dependencias, usadas para derivar una familia de
+ * roles (relleno / encima / tenue / legible) a partir de un solo hex de marca.
+ */
+
+/** Contraste mínimo AA para texto normal. */
+export const AA_CONTRAST = 4.5;
+
+export interface Rgb {
+  r: number;
+  g: number;
+  b: number;
+}
+
+export interface Hsl {
+  h: number;
+  s: number;
+  l: number;
+}
+
+/** Roles que necesita un acento del theme, en un esquema concreto. */
+export interface AccentRoles {
+  /** Relleno pleno: fondo de botón, círculo del paso actual. */
+  base: string;
+  /** Texto/ícono que va encima del relleno. */
+  on: string;
+  /** Fondo tenue: badges, pill del indicador activo. */
+  soft: string;
+  /** El acento legible sobre `surface`: labels, links. */
+  text: string;
+}
+
+const HEX = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i;
+
+export function hexToRgb(hex: string): Rgb {
+  const match = HEX.exec(hex.trim());
+  if (!match) {
+    throw new Error(`orn-ui: se esperaba un color hex como "#7c3aed", se recibió "${hex}".`);
+  }
+  const digits = match[1]!;
+  const full = digits.length === 3 ? digits.replace(/./g, (c) => c + c) : digits;
+  return {
+    r: parseInt(full.slice(0, 2), 16),
+    g: parseInt(full.slice(2, 4), 16),
+    b: parseInt(full.slice(4, 6), 16),
+  };
+}
+
+const toHexPair = (value: number) => Math.round(clamp(value, 0, 255)).toString(16).padStart(2, '0');
+
+export function rgbToHex({ r, g, b }: Rgb): string {
+  return `#${toHexPair(r)}${toHexPair(g)}${toHexPair(b)}`;
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function rgbToHsl({ r, g, b }: Rgb): Hsl {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const delta = max - min;
+  const l = (max + min) / 2;
+
+  if (delta === 0) return { h: 0, s: 0, l };
+
+  const s = delta / (1 - Math.abs(2 * l - 1));
+  let h: number;
+  if (max === rn) h = ((gn - bn) / delta) % 6;
+  else if (max === gn) h = (bn - rn) / delta + 2;
+  else h = (rn - gn) / delta + 4;
+
+  h *= 60;
+  return { h: h < 0 ? h + 360 : h, s, l };
+}
+
+export function hslToRgb({ h, s, l }: Hsl): Rgb {
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const hp = (((h % 360) + 360) % 360) / 60;
+  const x = c * (1 - Math.abs((hp % 2) - 1));
+  const [r1, g1, b1] =
+    hp < 1 ? [c, x, 0] : hp < 2 ? [x, c, 0] : hp < 3 ? [0, c, x] : hp < 4 ? [0, x, c] : hp < 5 ? [x, 0, c] : [c, 0, x];
+  const m = l - c / 2;
+  return { r: (r1 + m) * 255, g: (g1 + m) * 255, b: (b1 + m) * 255 };
+}
+
+export function toHsl(hex: string): Hsl {
+  return rgbToHsl(hexToRgb(hex));
+}
+
+export function toHex(hsl: Hsl): string {
+  return rgbToHex(hslToRgb({ ...hsl, s: clamp(hsl.s, 0, 1), l: clamp(hsl.l, 0, 1) }));
+}
+
+function channelLuminance(value: number) {
+  const c = value / 255;
+  return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+
+/** Luminancia relativa WCAG de un hex. */
+export function luminance(hex: string): number {
+  const { r, g, b } = hexToRgb(hex);
+  return 0.2126 * channelLuminance(r) + 0.7152 * channelLuminance(g) + 0.0722 * channelLuminance(b);
+}
+
+/** Ratio de contraste WCAG entre dos hex: 1 (igual) a 21 (blanco sobre negro). */
+export function contrast(a: string, b: string): number {
+  const la = luminance(a);
+  const lb = luminance(b);
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+
+/**
+ * Blanco si alcanza el contraste AA —es lo que se espera encima de un relleno
+ * de color— y si no, el extremo que más contraste dé.
+ */
+function bestOnColor(background: string, light: string, dark: string): string {
+  if (contrast(background, light) >= AA_CONTRAST) return light;
+  return contrast(background, dark) >= contrast(background, light) ? dark : light;
+}
+
+/**
+ * Mueve la luminosidad del tono hasta alcanzar el contraste pedido contra
+ * `against`. Si ni el extremo llega —un amarillo puro sobre blanco, por
+ * ejemplo— devuelve el más contrastado que encontró en el camino.
+ */
+function reachContrast(hsl: Hsl, against: string, target: number, direction: 'darker' | 'lighter'): string {
+  const step = direction === 'darker' ? -0.02 : 0.02;
+  let best = toHex(hsl);
+  let bestRatio = contrast(best, against);
+
+  for (let l = hsl.l; l >= 0 && l <= 1; l += step) {
+    const candidate = toHex({ ...hsl, l });
+    const ratio = contrast(candidate, against);
+    if (ratio > bestRatio) {
+      best = candidate;
+      bestRatio = ratio;
+    }
+    if (ratio >= target) return candidate;
+  }
+
+  return best;
+}
+
+/**
+ * Deriva los cuatro roles de un acento a partir de un hex, para un esquema.
+ * `surface` es el fondo sobre el que tiene que leerse el rol `text`, así que
+ * cada esquema pasa el suyo.
+ */
+export function deriveAccent(hex: string, scheme: 'light' | 'dark', surface: string): AccentRoles {
+  const hsl = toHsl(hex);
+
+  if (scheme === 'light') {
+    const base = toHex(hsl);
+    return {
+      base,
+      on: bestOnColor(base, '#ffffff', '#1a1a1a'),
+      soft: toHex({ h: hsl.h, s: Math.min(hsl.s, 0.85), l: 0.94 }),
+      text: reachContrast({ ...hsl, l: Math.min(hsl.l, 0.38) }, surface, AA_CONTRAST, 'darker'),
+    };
+  }
+
+  // En oscuro el acento sube de luminosidad y lo que va encima baja: un
+  // #004cef sobre #1e1e1e no se distingue del fondo.
+  const base = toHex({ ...hsl, l: 0.72 });
+  return {
+    base,
+    on: bestOnColor(base, '#ffffff', toHex({ ...hsl, s: Math.min(hsl.s, 0.9), l: 0.16 })),
+    soft: toHex({ h: hsl.h, s: Math.min(hsl.s, 0.35), l: 0.18 }),
+    text: reachContrast({ ...hsl, l: Math.max(hsl.l, 0.74) }, surface, AA_CONTRAST, 'lighter'),
+  };
+}

package/src/theme/createTheme.ts

@@ -1,6 +1,7 @@
-import { lightPalette, darkPalette } from './palettes';
+import { lightPalette, darkPalette, type ThemeColors } from './palettes';
 import { tokens as defaultTokens } from './tokens';
-import type { Theme, ThemeOverrides, ThemePair } from './types';
+import { deriveAccent } from './colors';
+import type { BrandAccent, Theme, ThemeOverrides, ThemePair } from './types';
 
 function mergeDeep<T extends Record<string, any>>(base: T, patch?: Partial<T>): T {
   if (!patch) return base;
@@ -23,22 +24,55 @@ function mergeDeep<T extends Record<string, any>>(base: T, patch?: Partial<T>):
   return out as T;
 }
 
+const capitalize = <T extends string>(name: T) => (name.charAt(0).toUpperCase() + name.slice(1)) as Capitalize<T>;
+
+/** Expande cada hex de `brand` a los cuatro roles del acento en un esquema. */
+function brandColors(
+  brand: ThemeOverrides['brand'],
+  scheme: 'light' | 'dark',
+  palette: ThemeColors
+): Partial<ThemeColors> {
+  if (!brand) return {};
+  const accents = typeof brand === 'string' ? { primary: brand } : brand;
+  const out: Partial<ThemeColors> = {};
+
+  for (const [name, hex] of Object.entries(accents) as [BrandAccent, string | undefined][]) {
+    if (!hex) continue;
+    const roles = deriveAccent(hex, scheme, palette.surface);
+    out[name] = roles.base;
+    out[`on${capitalize(name)}`] = roles.on;
+    out[`${name}Soft`] = roles.soft;
+    out[`${name}Text`] = roles.text;
+  }
+
+  return out;
+}
+
 /**
  * Construye el par de themes light/dark que consume <UIProvider theme={...}>.
  * Nunca muta los defaults: cada llamada produce objetos nuevos, seguros de
  * compartir entre providers distintos (tests, multi-brand en el mismo árbol).
+ *
+ * `brand` se aplica antes que `colors`, así que un rol escrito a mano siempre
+ * gana sobre el derivado.
  */
 export function createTheme(overrides?: ThemeOverrides): ThemePair {
   const tokens = mergeDeep(defaultTokens, overrides?.tokens as any);
 
   const light: Theme = {
-    colors: mergeDeep(lightPalette, overrides?.colors?.light),
+    colors: mergeDeep(
+      mergeDeep(lightPalette, brandColors(overrides?.brand, 'light', lightPalette)),
+      overrides?.colors?.light
+    ),
     tokens,
     scheme: 'light',
   };
 
   const dark: Theme = {
-    colors: mergeDeep(darkPalette, overrides?.colors?.dark),
+    colors: mergeDeep(
+      mergeDeep(darkPalette, brandColors(overrides?.brand, 'dark', darkPalette)),
+      overrides?.colors?.dark
+    ),
     tokens,
     scheme: 'dark',
   };

package/src/theme/index.ts

@@ -3,7 +3,9 @@ export type { Tokens } from './tokens';
 export { lightPalette, darkPalette } from './palettes';
 export type { ThemeColors } from './palettes';
 export { createTheme, defaultTheme } from './createTheme';
-export type { Theme, ThemePair, ThemeOverrides, DeepPartial } from './types';
+export type { Theme, ThemePair, ThemeOverrides, BrandAccent, DeepPartial } from './types';
+export { deriveAccent, contrast, luminance, AA_CONTRAST } from './colors';
+export type { AccentRoles } from './colors';
 export { defaultLabels } from './labels';
 export type { Labels } from './labels';
 export { zeroInsets } from './insets';