Complete estados acessíveis, tema próprio e dark mode

Uma página pronta não tem apenas estado de repouso. Botão recebe hover e foco, campo pode ser inválido, ação pode ficar desabilitada e a superfície pode seguir tema escuro. Nesta aula, você reúne esses casos sob tokens com nomes de função, não espalha pares de cor por cada elemento.

Na versão 4, @theme cria tokens que também geram utilities:

@theme {
  --color-acao: oklch(52% 0.105 223);
  --color-acao-forte: oklch(45% 0.085 224);
  --font-display: "Archivo", sans-serif;
}

Agora bg-acao, hover:bg-acao-forte e font-display existem. O namespace é contrato: --cor-acao seria uma variável comum, mas não criaria a utility de cor. Use :root para valores que não precisam participar dessa API.

O botão combina estado base e variantes:

<button class="bg-acao text-white hover:bg-acao-forte
  focus-visible:outline-2 focus-visible:outline-offset-2
  disabled:cursor-not-allowed disabled:opacity-50">
  Ativar plano
</button>

Hover não substitui foco. Toque pode não oferecer hover, e teclado precisa de um indicador visível. Teste com Tab e Shift+Tab; clique do mouse não prova a experiência de foco.

Disabled também precisa do atributo:

<button disabled class="disabled:opacity-50">Processando</button>

A classe só muda a apresentação quando a pseudo-classe corresponde. O atributo altera o comportamento nativo. Em erro de formulário, use aria-invalid e mensagem ligada por aria-describedby; borda vermelha sozinha não explica nada para quem não percebe cor.

Para dark mode, primeiro escolha estratégia. O padrão segue prefers-color-scheme. Um seletor manual usa custom variant:

@custom-variant dark (&:where(.dark, .dark *));

O produto precisa considerar três preferências: claro, escuro e sistema. Se oferece só botão liga-desliga, a pessoa pode perder a opção de acompanhar o sistema. Um grupo de escolha comunica melhor três valores que aria-pressed, que representa booleano.

Repetir dark:bg-* dark:text-* em toda caixa funciona, mas aumenta esquecimento. Tokens semânticos podem mudar por classe e alimentar utilities com @theme inline:

:root { --surface: #fff; --ink: #0f172a; }
.dark { --surface: #0f172a; --ink: #f8fafc; }
@theme inline { --color-surface: var(--surface); --color-ink: var(--ink); }

Assim bg-surface text-ink acompanha o tema sem par repetido. Ainda revise sombras, bordas, logos, imagens e controles nativos. Defina color-scheme para que o navegador pinte inputs de acordo com o estado ativo.

O laboratório usa variáveis CSS para expor o mecanismo. Trocar tema-claro por tema-escuro muda os mesmos tokens; não é uma simulação de compilador. Depois, marque o segundo botão com disabled e navegue até o primeiro. O foco precisa aparecer nos dois temas.

Você conclui quando cada estado possui evidência semântica e visual: foco por outline, disabled por atributo e texto, erro por mensagem e tema por tokens. Anote os pares de contraste aprovados. Eles entram como critério de aceite do projeto final, não como retoque opcional.

Faça ainda um teste com preferência de movimento reduzido. Transições de cor curtas podem permanecer discretas, mas deslocamentos e animações decorativas devem respeitar a escolha do sistema. O tema não pode alterar apenas fundos e esquecer essas preferências. Verifique também seleção de texto, placeholder e contorno em superfícies aninhadas. Um estado aprovado no fundo principal pode sumir dentro de um cartão com luminosidade próxima.

Por fim, desligue as cores temporariamente ou observe a página em escala de cinza. Títulos, mensagens e atributos ainda precisam contar a história. Esse teste simples revela onde sucesso, erro ou desabilitado dependem de um matiz que parte do público não distingue.