Theming

O @ag/ui usa CSS custom properties (variáveis CSS) para temas. Isso permite trocar completamente a aparência da aplicação com um único import, sem alterar nenhum componente.

Como funciona#

O arquivo base (@ag/ui/styles.css) define a infraestrutura do Tailwind e mapeia as variáveis CSS para os tokens do design system via @theme inline. Os temas definem os valores dessas variáveis para os modos claro e escuro.

/* Estrutura simplificada */
@ag/ui/styles.css   → infraestrutura + tema default
@ag/ui/themes/*     → substitui as variáveis de cor

Temas disponíveis#

Tema	Import	Descrição
`default`	`@ag/ui/themes/default`	Preto e branco neutro
`agelina`	`@ag/ui/themes/agelina`	Tons quentes com primário em laranja

Usando um tema#

Importe o styles.css e em seguida o tema desejado no seu CSS global. O tema deve vir depois do styles.css para sobrescrever as variáveis padrão.

@import "tailwindcss";
@import "@ag/ui/styles.css";
@import "@ag/ui/themes/agelina";

Criando um tema customizado#

Crie um arquivo CSS com as variáveis :root (modo claro) e .dark (modo escuro):

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.6 0.2 250);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.6 0.2 250);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --radius: 0.5rem;

  /* Sidebar */
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.6 0.2 250);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.7 0.2 250);
  --primary-foreground: oklch(0.145 0 0);
  /* ... demais variáveis */
}

Depois importe no seu CSS global:

@import "tailwindcss";
@import "@ag/ui/styles.css";
@import "./themes/meu-tema.css";

Referência de variáveis#

Cores base#

Variável	Descrição
`--background`	Fundo da página
`--foreground`	Texto principal
`--primary`	Cor de destaque principal (botões, links)
`--primary-foreground`	Texto sobre `primary`
`--secondary`	Cor secundária
`--secondary-foreground`	Texto sobre `secondary`
`--muted`	Fundo de elementos discretos
`--muted-foreground`	Texto discreto
`--accent`	Hover e estados ativos
`--accent-foreground`	Texto sobre `accent`
`--destructive`	Ações destrutivas (delete, erro)
`--border`	Bordas
`--input`	Fundo de inputs
`--ring`	Outline de foco

Variável	Descrição
`--card`	Fundo do card
`--card-foreground`	Texto do card
`--popover`	Fundo de popovers e dropdowns
`--popover-foreground`	Texto de popovers

Sidebar#

Variável	Descrição
`--sidebar`	Fundo da sidebar
`--sidebar-foreground`	Texto da sidebar
`--sidebar-accent`	Hover dos itens da sidebar
`--sidebar-accent-foreground`	Texto no hover
`--sidebar-border`	Borda da sidebar
`--sidebar-ring`	Outline de foco na sidebar

Forma e espaçamento#

Variável	Descrição
`--radius`	Raio base dos componentes