Aula 1: Design Tokens — de valores fixos a um sistema de tokens
Cada tela pode escolher por conta própria uma cor, um valor de espaçamento e uma fonte que 'parecem certos' — mas depois de dezenas de telas essas pequenas diferenças se acumulam: um azul um pouco diferente aqui, um espaçamento um pouco diferente ali, até que o produto inteiro pareça inconsistente.
Um token é como uma ficha de receita para uma cor em um laboratório: você escreve uma vez 'roxo da marca = esta mistura', e depois todo mundo que precisar da cor pede a ficha em vez de adivinhar a mistura de novo.
- design token
- Uma decisão de design com nome — uma cor, um espaçamento ou um raio — guardada em um único lugar e referenciada em todo lugar, em vez de um valor fixo repetido manualmente.
- Tailwind theme
- O objeto `theme` dentro de `tailwind.config.ts` onde você define os tokens do projeto — o Tailwind gera as utility classes a partir deles.
- semantic color
- Um token nomeado pelo seu papel, e não pelo seu tom — `brand` ou `danger` em vez de `purple-500` — assim, trocar o tom nunca exige renomear coisas no código.
- arbitrary value
- Uma sintaxe do Tailwind como `bg-[#6c5ce7]` que ignora o theme e injeta um valor fixo direto em uma class — o atalho que te leva de volta ao problema que os tokens resolvem.
