@malga/theme

Tokens de design e tema (cores, tipografia, raio, dark mode) da Malga, escritos em CSS-first para Tailwind CSS v4. Este pacote é a fonte única da verdade do tema: qualquer projeto que use Tailwind v4 pode importá-lo diretamente, em vez de copiar colors.css/blocos @theme manualmente.

Instalação

pnpm add @malga/theme

Requer Tailwind CSS v4 instalado no projeto consumidor (tailwindcss >= 4).

Uso recomendado (tema completo)

No CSS de entrada do seu projeto, importe o tema no lugar do seu próprio @import "tailwindcss" (o theme.css já importa o Tailwind e o tw-animate-css internamente, então não duplique esses imports):

@import "@malga/theme";

Isso registra a paleta (--malprimary-*, --malblack-*, etc.), os tokens semânticos (--primary, --background, --border, modo dark via classe .dark, etc.), a fonte "Athletics" e o @layer base padrão da Malga. Classes utilitárias como bg-primary, text-malprimary-500, border-border ficam disponíveis para o Tailwind do seu próprio projeto gerar, olhando para o seu próprio código.

Sobrescrevendo tokens

Como os tokens são custom properties CSS, você pode sobrescrever qualquer um deles normalmente, sempre depois do @import. Isso nunca é bloqueado:

@import "@malga/theme";

:root {
  --primary: oklch(0.5 0.1 200);
}

.dark {
  --primary: oklch(0.7 0.1 200);
}

@theme inline {
  --color-minha-cor-extra: var(--minha-cor-extra);
}

Uso avançado (consumo granular)

Se você só precisa da paleta bruta da marca, ou já tem seus próprios tokens semânticos e não quer o @layer base/fontes opinativos do pacote completo, importe só a parte que precisa:

/* Só a paleta de cores (--malprimary-*, --malblack-*, etc.), já registrada como cores Tailwind */
@import "@malga/theme/colors";

/* Só os tokens semânticos light/dark (--primary, --background, --border, etc.), sem registro Tailwind */
@import "@malga/theme/tokens";

Uso com @malga/ui

@malga/theme (este pacote) e @malga/ui/theme (CSS já compilado) resolvem problemas diferentes e complementares:

• @malga/theme te dá os tokens vivos (@theme), pro Tailwind do seu próprio projeto gerar classes como bg-primary, text-malprimary-500 usadas no seu próprio código.
• @malga/ui/theme já vem com as classes utilitárias que os componentes do @malga/ui usam internamente (geradas em build-time dentro do design system). Sem ele, os componentes renderizam sem estilo, porque o Tailwind do seu projeto não tem como saber quais classes o código-fonte deles usa.

Por isso, se seu projeto renderiza componentes do @malga/ui e também usa Tailwind no seu próprio código, importe os dois, nessa ordem:

@import "@malga/ui/theme";
@import "@malga/theme";

Não é necessário importar tailwindcss/tw-animate-css separadamente — o @malga/theme já faz isso internamente.

Isso gera uma pequena duplicação de bytes (algumas classes utilitárias podem aparecer tanto no bundle compilado quanto na nova geração local), mas não é um bug visual — os valores vêm dos mesmos tokens. Se quiser evitar essa duplicação, existe uma alternativa mais avançada: usar @source apontando para o dist do @malga/ui, pra gerar tudo numa única passada do Tailwind (o mesmo padrão usado internamente em packages/ui/src/theme.css) — mas isso é opcional, a combinação simples acima já funciona bem e é a recomendada por padrão.

Se seu projeto não tem Tailwind configurado (só consome componentes prontos), use apenas o bundle compilado:

@import "@malga/ui/theme";