@acvl/mobile-components 0.0.0-stage → 0.0.1

package/src/pantallas/PantallaDeFicha.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import { ActivityIndicator, RefreshControl, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { AccionDelEncabezado } from "../componentes/AccionesDelEncabezado";
+import BotonGrande from "../componentes/BotonGrande";
+import CabeceraEmpujada from "../componentes/CabeceraEmpujada";
+import EstadoVacio from "../componentes/EstadoVacio";
+import { crearEstilos, usePaleta } from "../tema";
+
+/** Lo que la ficha lee de un `use…Query` de RTK Query. */
+interface ConsultaDeFicha {
+    isLoading: boolean;
+    isError: boolean;
+    isFetching: boolean;
+    refetch: () => unknown;
+    error?: unknown;
+}
+
+const esNoEncontrado = (error: unknown) =>
+    typeof error === "object" && error !== null && "status" in error && error.status === 404;
+
+/**
+ * Una ficha de solo lectura (un viaje, un tracto, un cliente): la cabecera con atrás, y lo suyo en
+ * un scroll que se refresca jalando hacia abajo. Mientras carga, o si falla, lo dice en vez de
+ * pintar vacía.
+ *
+ * `children` sólo se pinta con datos: quien la usa no tiene que preguntar si ya llegaron.
+ */
+export default function PantallaDeFicha({
+    eyebrow,
+    titulo,
+    consulta,
+    hayDatos,
+    acciones,
+    estado,
+    encima,
+    children,
+}: {
+    eyebrow: string;
+    titulo: string;
+    /** El estado de la ficha bajo su título (un `Chip`); sólo con datos. */
+    estado?: React.ReactNode;
+    /** Las acciones de la ficha, en su encabezado; sólo se ofrecen con datos. */
+    acciones?: AccionDelEncabezado[];
+    /**
+     * Lo que va encima de la ficha y no dentro de su scroll: sus hojas inferiores
+     * (`HojaInferior`) y diálogos. Sólo con datos.
+     */
+    encima?: React.ReactNode;
+    consulta: ConsultaDeFicha;
+    hayDatos: boolean;
+    children: React.ReactNode;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const insets = useSafeAreaInsets();
+
+    let cuerpo: React.ReactNode;
+    if (consulta.isLoading) {
+        cuerpo = <ActivityIndicator color={c.primary} size="large" style={styles.cargando} />;
+    } else if (!hayDatos) {
+        cuerpo = esNoEncontrado(consulta.error) ? (
+            <EstadoVacio
+                icono="file-hidden"
+                titulo="No existe"
+                texto="Puede que lo hayan borrado, o que no tengas permiso de verlo."
+            />
+        ) : (
+            <EstadoVacio
+                icono="cloud-off-outline"
+                titulo="No se pudo cargar"
+                texto="Revisa tu señal e intenta de nuevo."
+            >
+                <BotonGrande icono="refresh" onPress={() => consulta.refetch()}>
+                    Reintentar
+                </BotonGrande>
+            </EstadoVacio>
+        );
+    } else {
+        cuerpo = (
+            <ScrollView
+                contentContainerStyle={[styles.contenido, { paddingBottom: insets.bottom + 24 }]}
+                refreshControl={
+                    <RefreshControl
+                        refreshing={consulta.isFetching && !consulta.isLoading}
+                        onRefresh={() => consulta.refetch()}
+                        colors={[c.primary]}
+                        progressBackgroundColor={c.superficie}
+                    />
+                }
+            >
+                {children}
+            </ScrollView>
+        );
+    }
+
+    return (
+        <View style={styles.root}>
+            <CabeceraEmpujada
+                eyebrow={eyebrow}
+                titulo={titulo}
+                acciones={hayDatos ? acciones : undefined}
+                estado={hayDatos ? estado : undefined}
+            />
+            {cuerpo}
+            {hayDatos ? encima : null}
+        </View>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    root: { flex: 1, backgroundColor: c.fondo },
+    cargando: { marginTop: 40 },
+    contenido: { padding: 16, gap: 20 },
+}));

package/src/pantallas/PantallaDePerfil.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import { ScrollView, View } from "react-native";
+import { Avatar, Button, Card } from "react-native-paper";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import CabeceraEmpujada from "../componentes/CabeceraEmpujada";
+import ContenidoDePantalla from "../componentes/ContenidoDePantalla";
+import Pestanas, { type Pestana } from "../componentes/Pestanas";
+import {
+    crearEstilos,
+    renglon,
+    tipografia,
+    usePreferenciaDeTema,
+    type PreferenciaDeTema,
+} from "../tema";
+import { Text } from "../texto";
+
+/**
+ * La apariencia: **igual que el teléfono** por omisión, o fija. Tres opciones y no un interruptor de
+ * «modo oscuro», como el del portal: con un interruptor, quien lo toca una vez ya no vuelve a seguir
+ * al teléfono.
+ */
+const APARIENCIAS: Pestana<PreferenciaDeTema>[] = [
+    { key: "sistema", label: "Teléfono", icono: "cellphone" },
+    { key: "claro", label: "Claro", icono: "white-balance-sunny" },
+    { key: "oscuro", label: "Oscuro", icono: "weather-night" },
+];
+
+/**
+ * El perfil de una app, igual en todas: quién entró, cómo se ve la app y cerrar sesión. Va
+ * empujado encima de las pestañas (lo abre el avatar del header). Necesita `ProveedorDeTema`.
+ *
+ * Lo propio de cada app va por props: quién es, qué pasa al cerrar sesión (avisar si hay envíos
+ * pendientes, confirmar) y, en `children`, lo que vaya al final (la versión instalada).
+ */
+export default function PantallaDePerfil({
+    rotulo,
+    nombre,
+    subtitulo,
+    onCerrarSesion,
+    saliendo = false,
+    children,
+}: {
+    /** Qué tipo de sesión es («Operador», «Guardia de caseta»): el rótulo de la cabecera. */
+    rotulo: string;
+    nombre?: string | null;
+    /** El usuario, el número de empleado. */
+    subtitulo?: string | null;
+    onCerrarSesion: () => void;
+    saliendo?: boolean;
+    children?: React.ReactNode;
+}) {
+    const styles = useStyles();
+    const [tema, setTema] = usePreferenciaDeTema();
+    const insets = useSafeAreaInsets();
+
+    return (
+        <View style={styles.root}>
+            <CabeceraEmpujada eyebrow={rotulo} titulo="Perfil" />
+
+            <ContenidoDePantalla paddingBottom={insets.bottom + 20}>
+                <ScrollView
+                    contentContainerStyle={styles.contenido}
+                    keyboardShouldPersistTaps="handled"
+                >
+                    <Card mode={"outlined"} style={styles.card}>
+                        {/* Paper recorta título y subtítulo a un renglón por omisión: un nombre
+                            largo con la letra al 180% se perdía. */}
+                        <Card.Title
+                            title={nombre || "N/A"}
+                            titleVariant={"titleLarge"}
+                            titleStyle={{ fontWeight: "bold" }}
+                            titleNumberOfLines={0}
+                            subtitleNumberOfLines={0}
+                            subtitleStyle={renglon(tipografia.secundario)}
+                            subtitle={subtitulo || "N/A"}
+                            subtitleVariant={"bodySmall"}
+                            left={(props) => (
+                                <Avatar.Text
+                                    {...props}
+                                    label={(nombre || "?").charAt(0).toUpperCase()}
+                                    color="#ffffff"
+                                />
+                            )}
+                        />
+                    </Card>
+
+                    <View style={styles.apariencia}>
+                        <Text style={styles.rotulo}>Apariencia</Text>
+                        <Pestanas pestanas={APARIENCIAS} activa={tema} onSelect={setTema} />
+                    </View>
+
+                    {/* El tope de ancho vive en este View y no en el Button: el Surface de
+                        Paper reparte el estilo en dos capas anidadas en iOS y `maxWidth` cae
+                        en la de adentro, que queda pegada a la izquierda. */}
+                    <View style={styles.acciones}>
+                        <Button
+                            onPress={onCerrarSesion}
+                            mode={"contained"}
+                            icon={"logout"}
+                            loading={saliendo}
+                            disabled={saliendo}
+                        >
+                            Cerrar sesión
+                        </Button>
+                    </View>
+                    {children}
+                </ScrollView>
+            </ContenidoDePantalla>
+        </View>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    root: { flex: 1, backgroundColor: c.fondo },
+    contenido: { gap: 20, alignItems: "center" },
+    card: { width: "100%", backgroundColor: c.superficie, borderColor: c.secondaryLighter },
+    acciones: { width: "100%", maxWidth: 300, gap: 20 },
+    apariencia: { width: "100%", gap: 8 },
+    rotulo: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "800",
+        color: c.secondary,
+        textTransform: "uppercase",
+        letterSpacing: 0.8,
+    },
+}));

package/src/tema/ProveedorDeTema.tsx

@@ -0,0 +1,150 @@
+import { StatusBar } from "expo-status-bar";
+import React from "react";
+import { Appearance } from "react-native";
+import { configureFonts, MD3DarkTheme, MD3LightTheme, PaperProvider } from "react-native-paper";
+import { useEsOscuro, useFondoDeLaRaiz } from "./estilos";
+import { fontFamily } from "./fuentes";
+import { PALETA_CLARA, PALETA_OSCURA, type Paleta } from "./paleta";
+
+/**
+ * Cómo quiere ver la app quien la usa: **igual que el teléfono** (por omisión), o siempre clara, o
+ * siempre oscura. Es del teléfono y no de la cuenta: sobrevive al cerrar sesión.
+ */
+export type PreferenciaDeTema = "sistema" | "claro" | "oscuro";
+
+const PREFERENCIAS: readonly PreferenciaDeTema[] = ["sistema", "claro", "oscuro"];
+
+/**
+ * Dónde guarda cada app la preferencia (SecureStore, AsyncStorage…). `leer` puede devolver
+ * cualquier cosa: lo que no sea una preferencia válida cuenta como `"sistema"`.
+ */
+export interface AlmacenDelTema {
+    leer: () => Promise<string | null | undefined>;
+    guardar: (preferencia: PreferenciaDeTema) => Promise<unknown>;
+}
+
+/**
+ * Pone la preferencia **en toda la app nativa** (`Appearance.setColorScheme`), no sólo en lo que
+ * pinta React: así `useColorScheme` ya contesta la elegida, y lo nativo —un mapa de Google, el
+ * selector de fecha, la barra de estado— la sigue sin que nadie se la pase. «Igual que el teléfono»
+ * es quitar la imposición.
+ */
+const aplicar = (preferencia: PreferenciaDeTema) =>
+    Appearance.setColorScheme(
+        preferencia === "claro" ? "light" : preferencia === "oscuro" ? "dark" : "unspecified",
+    );
+
+// La escala tipográfica de Paper trae `System` en iOS y `sans-serif` en Android; en Android se
+// cambia la familia por Inter y se conservan tamaños y pesos de cada variante. Los `Text` de
+// React Native no leen el tema: esos van por `texto.tsx`.
+const fonts = fontFamily ? configureFonts({ config: { fontFamily } }) : MD3LightTheme.fonts;
+
+/**
+ * El tema de Paper de cada modo, con los colores de la paleta: los componentes de Paper (Card,
+ * Button, Avatar, Menu) no leen la paleta, leen esto.
+ */
+const temaDePaper = (base: typeof MD3LightTheme, c: Paleta) => ({
+    ...base,
+    fonts,
+    colors: {
+        ...base.colors,
+        primary: c.primary,
+        onPrimary: c.sobrePrimario,
+        primaryLight: c.primaryLight,
+        primaryLighter: c.primaryLighter,
+        primaryDark: c.primaryDark,
+
+        secondary: c.secondary,
+        secondaryLight: c.secondaryLight,
+        secondaryLighter: c.secondaryLighter,
+        secondaryDark: c.secondaryDark,
+
+        background: c.fondo,
+        surface: c.superficie,
+        onSurface: c.texto,
+        outline: c.secondaryLighter,
+        surfacePrimary: c.superficie,
+    },
+});
+
+const TEMA_CLARO = temaDePaper(MD3LightTheme, PALETA_CLARA);
+const TEMA_OSCURO = temaDePaper(MD3DarkTheme, PALETA_OSCURA);
+
+type ContextoDelTema = [PreferenciaDeTema, (preferencia: PreferenciaDeTema) => void];
+
+const Contexto = React.createContext<ContextoDelTema | null>(null);
+
+/**
+ * El tema de la app: lee la preferencia guardada, se la impone a lo nativo, y da el tema de Paper,
+ * la barra de estado y el fondo de la raíz de ahora. Va en el layout raíz, por encima de todo lo
+ * que pinta.
+ *
+ * **No pinta nada hasta leer la preferencia**: así no se asoma el claro un momento en quien eligió
+ * el oscuro. Leerla es una consulta local, no se nota.
+ */
+export function ProveedorDeTema({
+    almacen,
+    children,
+}: {
+    /** Sin almacén, la preferencia dura lo que dure la app abierta. */
+    almacen?: AlmacenDelTema;
+    children: React.ReactNode;
+}) {
+    const [preferencia, setPreferencia] = React.useState<PreferenciaDeTema | null>(
+        almacen ? null : "sistema",
+    );
+    const oscuro = useEsOscuro();
+    useFondoDeLaRaiz((oscuro ? PALETA_OSCURA : PALETA_CLARA).fondo);
+
+    React.useEffect(() => {
+        if (!almacen) return;
+        let vigente = true;
+        almacen
+            .leer()
+            .catch(() => null)
+            .then((guardada) => {
+                if (!vigente) return;
+                const valida = PREFERENCIAS.find((p) => p === guardada) ?? "sistema";
+                aplicar(valida);
+                setPreferencia(valida);
+            });
+        return () => {
+            vigente = false;
+        };
+        // Se lee una sola vez, al arrancar: un almacén nuevo en cada render no la vuelve a leer.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const valor = React.useMemo<ContextoDelTema | null>(
+        () =>
+            preferencia === null
+                ? null
+                : [
+                      preferencia,
+                      (nueva) => {
+                          aplicar(nueva);
+                          setPreferencia(nueva);
+                          almacen?.guardar(nueva).catch(() => {});
+                      },
+                  ],
+        [preferencia, almacen],
+    );
+
+    if (!valor) return null;
+
+    return (
+        <Contexto.Provider value={valor}>
+            <PaperProvider theme={oscuro ? TEMA_OSCURO : TEMA_CLARO}>
+                <StatusBar style={oscuro ? "light" : "dark"} />
+                {children}
+            </PaperProvider>
+        </Contexto.Provider>
+    );
+}
+
+/** La preferencia del tema y cómo cambiarla (el perfil). Sólo dentro de `ProveedorDeTema`. */
+export function usePreferenciaDeTema(): ContextoDelTema {
+    const valor = React.useContext(Contexto);
+    if (!valor) throw new Error("usePreferenciaDeTema va dentro de <ProveedorDeTema>.");
+    return valor;
+}

package/src/tema/estilos.ts

@@ -0,0 +1,51 @@
+import * as SystemUI from "expo-system-ui";
+import { useEffect } from "react";
+import { StyleSheet, useColorScheme } from "react-native";
+import { PALETA_CLARA, PALETA_OSCURA, type Paleta } from "./paleta";
+
+/**
+ * Si la app se ve oscura. Lee `useColorScheme` y no un contexto: `ProveedorDeTema` le impone la
+ * preferencia a toda la app nativa (`Appearance.setColorScheme`), así que contesta la elegida, o la
+ * del teléfono con «igual que el teléfono». Y así sirve también fuera de los proveedores, en la
+ * pantalla de error del layout raíz.
+ */
+export const useEsOscuro = (): boolean => useColorScheme() === "dark";
+
+/** Los colores de ahora (`paleta.ts`). */
+export const usePaleta = (): Paleta => (useEsOscuro() ? PALETA_OSCURA : PALETA_CLARA);
+
+/**
+ * Hojas de estilo que dependen del tema. Se declaran igual que un `StyleSheet.create`, pero con la
+ * paleta como argumento, y dan un hook:
+ *
+ * ```ts
+ * const useStyles = crearEstilos((c) => ({ caja: { backgroundColor: c.superficie } }));
+ * // en el componente:
+ * const styles = useStyles();
+ * ```
+ *
+ * Cada hoja se crea una vez por paleta y se guarda: cambiar de tema no la vuelve a crear en cada
+ * render.
+ */
+export function crearEstilos<T extends StyleSheet.NamedStyles<T>>(fabrica: (c: Paleta) => T) {
+    const hojas = new Map<Paleta, T>();
+    return function useEstilos(): T {
+        const c = usePaleta();
+        let hoja = hojas.get(c);
+        if (!hoja) {
+            hoja = StyleSheet.create(fabrica(c));
+            hojas.set(c, hoja);
+        }
+        return hoja;
+    };
+}
+
+/**
+ * El fondo de la raíz nativa (lo que se ve detrás de una transición) sigue al tema: sin esto, al
+ * empujar una pantalla en oscuro se asomaba un destello blanco.
+ */
+export function useFondoDeLaRaiz(fondo: string) {
+    useEffect(() => {
+        SystemUI.setBackgroundColorAsync(fondo).catch(() => {});
+    }, [fondo]);
+}

package/src/tema/fuentes.ts

@@ -0,0 +1,20 @@
+import { Platform } from "react-native";
+
+/**
+ * La tipografía de iOS es San Francisco —lo que React Native llama `System`— y no se puede
+ * llevar a Android: la licencia de Apple la limita a sus plataformas. Android se quedaba con
+ * `sans-serif` (Roboto), de ahí que las dos versiones no se parecieran.
+ *
+ * Inter es el sustituto libre (OFL) más cercano a San Francisco: misma altura de x, mismo
+ * aire de fuente de interfaz. Así que Android va con Inter e iOS se queda como está.
+ *
+ * Los seis cortes —de 400 a 900, que son los pesos que usan las pantallas— vienen en
+ * `assets/fonts/` de este paquete y **cada app los registra** como una sola familia en su
+ * `app.json` (plugin de expo-font, sección `android.fonts`; ver el README). Al declarar cada peso
+ * con su archivo, `fontWeight: "600"` toma el SemiBold de verdad en vez de una negrita sintética.
+ * Tocar esa lista obliga a reconstruir el binario, no basta con recargar.
+ */
+export const fontFamily = Platform.select({ android: "Inter", default: undefined });
+
+/** Familia lista para mezclar en un `style`; `null` donde vale la del sistema. */
+export const fuenteBase = fontFamily ? { fontFamily } : null;

package/src/tema/index.ts

@@ -0,0 +1,10 @@
+export { crearEstilos, useEsOscuro, useFondoDeLaRaiz, usePaleta } from "./estilos";
+export { fontFamily, fuenteBase } from "./fuentes";
+export { PALETA_CLARA, PALETA_OSCURA, type Paleta } from "./paleta";
+export {
+    ProveedorDeTema,
+    usePreferenciaDeTema,
+    type AlmacenDelTema,
+    type PreferenciaDeTema,
+} from "./ProveedorDeTema";
+export { renglon, tipografia } from "./tipografia";

package/src/tema/paleta.ts

@@ -0,0 +1,147 @@
+/**
+ * Los colores de las apps, **uno por cosa y no por tono**: el fondo, la superficie de una tarjeta,
+ * el texto, el aviso ámbar. Cada pantalla los toma de aquí (`usePaleta`, `crearEstilos`) y no
+ * escribe hexadecimales: así el modo oscuro es cambiar de paleta, no revisar cada pantalla.
+ *
+ * Los nombres `primary…`/`secondary…` son los del `colors` que traían las apps antes de la paleta,
+ * con el mismo sentido. Lo oscuro sigue al portal (`@acvl/frontend-components`, `v1/theme`): fondo
+ * `#121212`, papel `#1e1e1e` y el rojo más claro `#ff4a57`, que sobre negro se lee mejor que el de
+ * la marca.
+ *
+ * Lo que se pinta dentro de un mapa (los colores de estado de una flota, un pin) no sale de aquí:
+ * tiene que leerse igual sobre claro, oscuro y satélite, y lo escoge cada app.
+ */
+export interface Paleta {
+    esOscuro: boolean;
+
+    /** El fondo de la pantalla, detrás de las tarjetas. */
+    fondo: string;
+    /** Una tarjeta, un campo, una hoja, el header y la barra de pestañas. */
+    superficie: string;
+    /** Lo que va encima de una superficie y se tiene que distinguir de ella (un campo apagado). */
+    superficieTenue: string;
+    /** El texto normal. */
+    texto: string;
+    /** El texto que va sobre el rojo (un botón lleno, el chip «En curso»). */
+    sobrePrimario: string;
+    /** El velo detrás de un diálogo. */
+    velo: string;
+    /** La sombra: en oscuro casi no se ve, así que el borde hace su trabajo. */
+    sombra: string;
+
+    // Los de `colors`, con el mismo sentido.
+    primary: string;
+    primaryLight: string;
+    primaryLighter: string;
+    primaryDark: string;
+    /** El fondo de lo elegido. */
+    primaryWash: string;
+    /** El texto secundario. */
+    secondary: string;
+    /** El texto tenue: un placeholder, un icono apagado. */
+    secondaryLight: string;
+    /** Los bordes y separadores. */
+    secondaryLighter: string;
+    /** El gris fuerte: un título gris, el texto de un estado vacío. */
+    secondaryDark: string;
+    secondaryText: string;
+    /** El rótulo arriba del título del header. */
+    eyebrow: string;
+
+    /**
+     * Lo que pide atención sin ser error: pausas, pendientes, avisos. `acento` es el ámbar medio de
+     * un borde o una barra; `sobreFuerte`, la letra encima de un relleno `fuerte`.
+     */
+    aviso: {
+        fondo: string;
+        tinta: string;
+        fuerte: string;
+        acento: string;
+        sobreFuerte: string;
+        borde: string;
+    };
+    /** Lo cumplido. */
+    exito: { fondo: string; tinta: string };
+    /** Lo informativo. */
+    info: { fondo: string; tinta: string };
+    /** Lo que salió mal. */
+    error: { fondo: string; tinta: string };
+    /**
+     * Un escalón más de un avance que ya usa los otros: en wms, una orden de envío facturada
+     * (todavía no pagada, que es el verde) o un recibo entregado a medias. Es el morado que el
+     * portal le da a la orden de envío.
+     */
+    morado: { fondo: string; tinta: string };
+}
+
+export const PALETA_CLARA: Paleta = {
+    esOscuro: false,
+    fondo: "#f7f7f7",
+    superficie: "#ffffff",
+    superficieTenue: "#f1f1f1",
+    texto: "#1a1a1a",
+    sobrePrimario: "#ffffff",
+    velo: "rgba(0,0,0,0.45)",
+    sombra: "#000000",
+
+    primary: "#ea1b2b",
+    primaryLight: "rgb(242, 118, 127)",
+    primaryLighter: "rgb(250, 209, 212)",
+    primaryDark: "rgb(163, 18, 30)",
+    primaryWash: "rgba(234,27,43,0.08)",
+    secondary: "#606060",
+    secondaryLight: "rgb(159, 159, 159)",
+    secondaryLighter: "rgb(231, 231, 231)",
+    secondaryDark: "rgb(67, 67, 67)",
+    secondaryText: "#3a3d42",
+    eyebrow: "#4B5563",
+
+    aviso: {
+        fondo: "#fff8e1",
+        tinta: "#8a5300",
+        fuerte: "#b26a00",
+        acento: "#f5b955",
+        sobreFuerte: "#ffffff",
+        borde: "#ffe0a3",
+    },
+    exito: { fondo: "#e8f5e9", tinta: "#2e7d32" },
+    info: { fondo: "#e3f2fd", tinta: "#1565c0" },
+    error: { fondo: "#fdecea", tinta: "#c62828" },
+    morado: { fondo: "#f1e9fd", tinta: "#5b21b6" },
+};
+
+export const PALETA_OSCURA: Paleta = {
+    esOscuro: true,
+    fondo: "#121212",
+    superficie: "#1e1e1e",
+    superficieTenue: "#2a2a2a",
+    texto: "#f2f2f2",
+    sobrePrimario: "#ffffff",
+    velo: "rgba(0,0,0,0.65)",
+    sombra: "#000000",
+
+    primary: "#ff4a57",
+    primaryLight: "rgb(255, 128, 137)",
+    primaryLighter: "rgb(90, 24, 30)",
+    primaryDark: "#ea1b2b",
+    primaryWash: "rgba(255,74,87,0.16)",
+    secondary: "#b3b3b3",
+    secondaryLight: "#8c8c8c",
+    secondaryLighter: "#3a3a3a",
+    secondaryDark: "#d6d6d6",
+    secondaryText: "#c9ccd1",
+    eyebrow: "#a8b0bd",
+
+    aviso: {
+        fondo: "#3a2e12",
+        tinta: "#ffcc80",
+        fuerte: "#ffb74d",
+        acento: "#c9932f",
+        sobreFuerte: "#1e1e1e",
+        borde: "#6b5320",
+    },
+    exito: { fondo: "#1b3320", tinta: "#81c784" },
+    info: { fondo: "#132a40", tinta: "#90caf9" },
+    error: { fondo: "#3d1a1a", tinta: "#ff8a80" },
+    morado: { fondo: "#2a1d45", tinta: "#c4b5fd" },
+};

package/src/tema/tipografia.ts

@@ -0,0 +1,29 @@
+/**
+ * Los tamaños de letra de las apps. Son grandes a propósito: quien las usa lee de pie, con prisa, a
+ * veces con sol y sin lentes, y la letra chica es donde batalla. **Nada baja de `etiqueta`.** Una
+ * pantalla nueva toma de aquí en lugar de inventar su número.
+ */
+export const tipografia = {
+    /** La acción que toca completar: lo único que tiene que leerse de un vistazo. */
+    destacado: 32,
+    /** El folio y lo que identifica la pantalla. */
+    titulo: 24,
+    /** El nombre de un paso, el cliente: lo que se lee primero dentro de una tarjeta. */
+    subtitulo: 21,
+    /** El texto normal: valores, instrucciones, el lugar. */
+    cuerpo: 19,
+    /** Lo que acompaña: direcciones, el siguiente paso, horas. */
+    secundario: 17,
+    /** Rótulos en mayúsculas, chips y pestañas. El mínimo. */
+    etiqueta: 15,
+};
+
+/**
+ * Tamaño y alto de renglón explícito para un texto que lleva un icono al lado. `IconoDeRenglon`
+ * usa el mismo alto para centrarse contra el primer renglón; los dos crecen con la escala de
+ * letra del sistema.
+ */
+export const renglon = (fontSize: number) => ({
+    fontSize,
+    lineHeight: Math.round(fontSize * 1.3),
+});