@higinio/design-css

Tokens y framework CSS de los dos design systems de Higinio, listos para consumir en cualquier proyecto: Celeste Clásica (light-first) y Nocturna Eléctrica (dark-first). Cada sistema trae cuatro formatos, para cubrir cualquier stack.

Propiedad de Higinio Sosa, todos los derechos reservados (ver LICENSE). Para uso en sus productos.

Instalación

npm i @higinio/design-css

Qué incluye

Por sistema (celeste/ y nocturna/):

| Archivo | Qué es | |---|---| | tokens.css | Solo las variables CSS (--surface, --accent, --text-primary…). | | framework.css | Variables + clases de componentes listas para usar (drop-in, tipo Bootstrap). | | tailwind.css | Bloque @theme + capa semántica para Tailwind v4. | | tokens.json | Tokens en formato W3C DTCG (Style Dictionary, Tokens Studio, Figma). |

Uso

Elige un archivo por sistema según tu stack. Los componentes consumen solo los aliases semánticos, así que cambiar de tema es cambiar un atributo, no refactorizar.

CSS vanilla (o cualquier framework)

/* solo variables */
@import "@higinio/design-css/celeste/tokens.css";

/* o variables + clases de componentes */
@import "@higinio/design-css/celeste/framework.css";

Con un bundler (Vite, webpack, esbuild…)

import "@higinio/design-css/nocturna/framework.css";

Tailwind v4

@import "@higinio/design-css/celeste/tailwind.css";

Pipelines de tokens

Apunta Style Dictionary / Tokens Studio / Figma a:

node_modules/@higinio/design-css/celeste/tokens.json
node_modules/@higinio/design-css/nocturna/tokens.json

Tema opuesto

Cada sistema incluye su modo contrario vía atributo: Celeste Clásica trae dark mode con data-theme="dark"; Nocturna Eléctrica trae light mode con data-theme="light".

Fuente de verdad

Este paquete se genera desde dist/<sistema>/ del repositorio principal (los DESIGN-*.md son la especificación autoritativa). No edites los CSS aquí: se regeneran con npm run sync.