Arquitectura

HinataCSS separa las decisiones visuales de las implementaciones concretas. Esto permite modificar la identidad de un producto sin reescribir cada componente.

Tokens

Los tokens expresan decisiones de diseño con nombres semánticos. Colores, espacios, radios, sombras y tipografía deben definirse una vez y consumirse desde las capas superiores.

:root {
  --color-primary: #2563eb;
  --space-md: 1rem;
  --radius-md: 0.75rem;
}

El ejemplo muestra el patrón conceptual. Los nombres disponibles deben corresponder a la compilación utilizada por el proyecto.

Utilidades

Las utilidades representan una sola responsabilidad y sirven para ajustes locales. No deben sustituir un componente cuando existe un patrón de interfaz con estructura y estados propios.

Componentes

Los componentes combinan tokens y reglas de comportamiento visual. Cada componente debe documentar variantes, estados interactivos, adaptación responsive y requisitos de accesibilidad.

Personalización

La personalización debe ocurrir en este orden:

1. Sobrescribir tokens públicos.
2. Elegir variantes existentes.
3. Extender el componente desde la hoja del producto.
4. Modificar el núcleo solamente cuando la necesidad sea común a varios proyectos.

Este flujo evita bifurcaciones difíciles de mantener y conserva una ruta clara para futuras actualizaciones.