Temas

Um tema é um conjunto de valores para os mesmos tokens, em claro e em escuro. Os componentes usam só os tokens (bg-primary, text-link, border-border). Trocar o tema troca a marca inteira sem editar nenhum componente.

ExperimenteCopy Anchor Link

Clique em um tema para aplicar ao site inteiro, inclusive a esta documentação. Os exemplos são temas reais do registry, gerados a partir de uma a três cores.

Como os tokens funcionamCopy Anchor Link

Cada token é uma variável CSS (--primary) que o lenstech-base expõe como cor do Tailwind (bg-primary, text-primary, border-primary, ring-primary…). Os nomes seguem o shadcn/ui, então qualquer componente shadcn funciona com um tema Lens. Acrescentamos surface, link, os estados success, warning e info, focus e overlay.

<div className="rounded-lg border bg-card p-6 text-card-foreground">
  <h3 className="font-heading">Plano mensal</h3>
  <p className="text-muted-foreground">Cobrança todo dia 10.</p>
  <a className="text-link underline">Ver contrato</a>
</div>

SuperfíciesCopy Anchor Link

AçãoCopy Anchor Link

EstadosCopy Anchor Link

Linhas e focoCopy Anchor Link

DadosCopy Anchor Link

SidebarCopy Anchor Link

Pares de fundo e textoCopy Anchor Link

Todo token com par -foreground funciona assim: o token sem sufixo é o fundo, o -foreground é o texto que vai sobre ele. Use sempre os dois juntos.

<span className="bg-success text-success-foreground">Pago</span>

O gerador garante contraste AA entre cada par. Misturar pares (bg-primary text-muted-foreground) não tem garantia.

A regra do linkCopy Anchor Link

primary foi feito para ser fundo. Uma primária clara, como um amarelo, passa com texto escuro por cima, mas some como texto sobre branco. Por isso existe link: a cor da marca ajustada para ser lida sobre background e card.

• Texto na cor da marca sobre fundo neutro: text-link.
• Nunca text-primary sobre fundo neutro.

Fontes e raioCopy Anchor Link

Estes tokens não mudam entre claro e escuro.

Valores no tema ativoCopy Anchor Link

Todos os tokens do contrato, com o valor calculado agora. Mude o tema ou o modo e a tabela acompanha.

Criar o tema de um clienteCopy Anchor Link

Temas são criados neste repositório, com o CLI do pacote @lenstech/tokens. Uma cor basta:

pnpm theme --name clinica-sorriso --primary "#0EA5E9"

Com mais informações da marca:

pnpm theme --name clinica-sorriso --label "Clínica Sorriso" \
  --primary "#0EA5E9" --secondary "#F97316" --neutral "#334155" \
  --focus "#22D3EE" --radius 0.75rem --font-display "'Poppins', sans-serif"

Rodar de novo com o mesmo --name atualiza o tema e mantém o que não foi passado.

Ajustes finos no JSONCopy Anchor Link

O comando grava packages/tokens/themes/<name>.theme.json. Para fixar um token específico, use overrides, por modo. É assim que o tema lenstech segue o manual de marca.

{
  "name": "clinica-sorriso",
  "label": "Clínica Sorriso",
  "primary": "#0EA5E9",
  "secondary": "#F97316",
  "radius": "0.75rem",
  "fonts": { "display": "'Poppins', sans-serif" },
  "overrides": {
    "light": { "surface": "#F0F9FF" },
    "dark": { "background": "#0B1220" }
  }
}

Depois de editar o JSON, gere de novo:

pnpm tokens:build

O que é geradoCopy Anchor Link

Não edite esses arquivos à mão. Eles são sobrescritos a cada build.

Garantia de contrasteCopy Anchor Link

Todo tema precisa passar no nível AA da WCAG 2.2:

Para chegar lá, o gerador:

• escolhe texto claro ou escuro para cada cor de fundo;
• ajusta a luminosidade da primária quando nenhum texto atinge 4.5:1, e avisa no terminal;
• escurece ou clareia link até ele funcionar como texto.

Testamos o gerador com 500 cores primárias aleatórias: nenhuma falha de contraste. Tudo é calculado em OKLCH, então o ajuste muda a luminosidade e preserva o tom da marca.

O relatório não cobre texto sobre imagens, cores fora dos tokens e combinações novas (como bg-primary/10 com text-link). Nesses casos, confira manualmente.

Entregar ao projeto do clienteCopy Anchor Link

Envie o tema para a branch main. O deploy publica o item theme-<name> no registry (veja Registry). No projeto do cliente:

npx shadcn@latest add @lenstech/lenstech-base @lenstech/theme-clinica-sorriso

<html lang="pt-BR" data-theme="clinica-sorriso">

O CLI grava as cores do tema no CSS do projeto, em :root (claro) e .dark (escuro). Carregue as fontes do tema como na instalação.