Tema

Cores

Troque o tema no botão do topo e veja os valores mudarem. Os componentes usam esses tokens em vez de cores fixas.

O amarelo funciona como um sinal: aparece em detalhes como foco, check, switch ligado e botão principal, sem tomar a tela toda.

Raios

--radius (0.75rem) é a base. A escala deriva dela: xs 4px, sm 6px, md 9px, lg 12px, xl 18px, 2xl 24px. Mudou o --radius, todos os tamanhos acompanham.

Botões e campos têm tokens próprios, --radius-button e --radius-field, os dois com padrão var(--radius). Sobrescreva um para arredondar só os botões (ou só os campos) sem mexer no resto:

:root {
  --radius-button: 9999px; /* botões em pílula */
  --radius-field: 0;       /* input, textarea e select retos */
}

Movimento

Um único conjunto de tokens controla todas as transições. Duas curvas dão o ritmo: ease-out para entradas e respostas, ease-in-out para elementos que se deslocam. As durações vão de 80 a 240ms.

Sobrescrever

Redefina um token no :root para ajustar todos os componentes de uma vez:

:root {
  --cd-duration-base: 200ms;
  --cd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

Para um único componente, defina o token por uma propriedade arbitrária do Tailwind no className:

<Switch className="[--cd-duration-base:300ms]" />

Com prefers-reduced-motion: reduce, um bloco no globals.css zera todas as durações (0.01ms) e põe --cd-scale-enter em 1. Ele mexe nos mesmos tokens, então mantenha-o depois dos seus overrides.

Personalizar

Quer outra paleta? Troque os valores no seu globals.css. Aqui, o destaque amarelo vira verde:

:root {
  --brand: #22c55e;
  --brand-foreground: #15803d;
  --brand-contrast: #052e16;
}