Skip to content

0020. Admin: Shadcn + tokens semánticos, prohibido hardcodear colores

Estado

Aceptada

Contexto

El admin necesita consistencia visual y soporte de tema sin reimplementar componentes base.

Decisión

Shadcn para todo lo base (no se crea UI desde cero). Color solo con tokens semánticos (bg-background, text-foreground, …); el tema vive en src/index.css. Prohibido hardcodear colores. Responsive es obligatorio: nav en drawer debajo de md, tablas con overflow-x-auto, diálogos w-[95vw] max-w-[95vw] sm:max-w-*. Formularios con Zod + React Hook Form, usando FormField / PasswordField / FormSelect / FormCombobox de shared/components/ en vez de repetir Label+control+error a mano. Identidad centralizada en src/shared/branding.ts (APP_NAME temporal "Camaroneras").

Consecuencias

Un cambio de tema no requiere tocar componentes individuales. <Select> crudo (sin estos helpers) solo se usa en ediciones inline de tabla sin label, no en formularios.