@middag-io/helico-design-system

Tokens do Design System da Helico — a camada de tema do Tailwind v4: cores semânticas (fg-*, surface-*, fill-*, border…), tipografia, sombras, gradientes e o re-tema por classe (.theme-*). É só CSS, sem JS.

Os componentes ficam em @middag-io/helico-components, que dependem destes tokens.

Instalação

npm i @middag-io/helico-design-system

Peer: tailwindcss (v4).

Uso

No CSS global da app (Tailwind v4):

@import "tailwindcss";
@import "@middag-io/helico-design-system/theme.css";

Isso registra os tokens como utilitários (bg-surface, text-fg-subtle, border-focus, bg-fill-brand…) e os gradientes/animações do design.

Fontes

Os tokens de tipografia referenciam variáveis --ff-* (com fallback). Defina-as uma vez na app (ex.: next/font expondo as variable):

• --ff-inter-tight · --ff-inter · --ff-dm-sans · --ff-montserrat

Fonte serifada

data-font="serif" num contêiner troca as famílias de texto (font-tight, font-inter, font-sans) por Palatino (--ff-serif). Os números (DM Sans e Montserrat) não mudam. Para valer na página toda, ponha o atributo no <html> (<html data-font="serif">).

Sem o atributo, nada muda — dá para ligar e desligar por feature flag.

Re-tema

A marca troca por classe num contêiner:

<div class="theme-roxo"><!-- vira roxo --></div>

Inclusos: theme-roxo, theme-verde, theme-laranja (padrão = azul, sem classe).