Guia

Tokens

Cores, raios, sombras e tipografia expostos por CSS variables.

CSS variables

Os temas viram variáveis CSS no documentElement. Use esses tokens em CSS próprio quando quiser que extensões do app acompanhem o tema atual.

background: var(--color-background);
color: var(--color-foreground);
border-color: var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
font-family: var(--font-family);

Cores

Cada chave de ThemeConfig.colors vira --color-* em kebab-case. Tokens com Foreground devem ser usados sobre o token base correspondente.

--color-background
--color-foreground
--color-muted
--color-muted-foreground
--color-card
--color-card-foreground
--color-popover
--color-popover-foreground
--color-primary
--color-primary-foreground
--color-secondary
--color-secondary-foreground
--color-accent
--color-accent-foreground
--color-success
--color-success-foreground
--color-warning
--color-warning-foreground
--color-danger
--color-danger-foreground
--color-info
--color-info-foreground
--color-border
--color-input
--color-ring
--color-selection
--color-selection-foreground
--color-overlay

Tipografia, raios e sombras

A tipografia expõe família principal, família monoespaçada, tamanho base e escala. Raios e sombras usam a mesma escala xs, sm, md, lg e xl.

--font-family
--font-mono
--font-base
--font-scale

--radius-xs
--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-full

--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl

Relação com tema customizado

Ao criar um ThemeConfig próprio, preencha todas as chaves tipadas. O helper interno themeToCSSVars converte camelCase para kebab-case, então mutedForeground vira --color-muted-foreground.

import { themeToCSSVars, type ThemeConfig } from "cosmemilton-ui";

const vars = themeToCSSVars(myTheme);
// vars["--color-primary"]
// vars["--radius-md"]
// vars["--font-family"]

Stylesheet público

Importe o CSS distribuído pela biblioteca uma vez no app. A aplicação consumidora não precisa configurar geração de classes para os componentes.

import "cosmemilton-ui/styles.css";