Aula 3: Cor, Contraste e Modo Escuro — Um Tema, Dois Modos
O PM pede modo escuro, e você descobre que cada componente precisa do seu próprio `dark:bg-gray-900 dark:text-white`. Esta aula ensina você a definir `tokens de cor semânticos` com variáveis CSS — assim o modo escuro vira uma troca de valor em um só lugar, e não um `dark:` duplicado em cada elemento
Um token de cor semântico é como dizer 'cor da parede' em vez de 'este bege exato'. Você muda para o modo noturno e tudo marcado como 'cor da parede' é repintado de uma vez — sem tocar em cada parede separadamente.
- semantic color token
- Um token nomeado por um papel — `surface`, `on-surface`, `border` — não por um tom. O componente pede o papel, e o theme decide qual tom cabe em cada modo.
- CSS-variable theming
- Definir os valores de cor como variáveis CSS (`--surface`) em `:root` e sobrescrevê-las sob `.dark`. Os componentes referenciam a variável, então trocar o valor muda todos eles de uma vez.
- contrast ratio
- Uma medida de legibilidade entre a cor do texto e o fundo. O WCAG AA exige pelo menos 4.5:1 para texto normal — e um token semântico precisa cumprir isso nos dois modos.
- dark mode strategy
- A escolha de como implementar o modo escuro: duplicar `dark:` em cada elemento (insustentável) versus trocar valores de token em um só lugar via uma classe `.dark` (sustentável).
