Theming

Onde ficam os tokens

Em vendor/shadwire/shadwire.css. O shadwire init instala esse arquivo e o importa no entrypoint do Tailwind do app, cujo caminho aparece em tailwind.css no bin/shadwire status --json.

O arquivo tem três camadas:

@custom-variant dark (&:is(.dark *));   /* class-based dark mode */

@theme inline {                         /* maps tokens to utilities */
  --color-background: var(--background);
  --color-primary: var(--primary);
  /* ... */
}

@custom-variant dark (&:is(.dark *));   /* class-based dark mode */

@theme inline {                         /* maps tokens to utilities */
  --color-background: var(--background);
  --color-primary: var(--primary);
  /* ... */
}

:root { --background: oklch(1 0 0); }      /* light theme values */
.dark { --background: oklch(0.145 0 0); }  /* dark theme values */

O @theme inline transforma --primary nos utilitários bg-primary e text-primary. As cores estão em OKLCH.

Os tokens

Cada token de fundo tem um token -foreground para o texto que vai por cima. Use os dois juntos, como em bg-muted text-muted-foreground, em vez de bg-muted com a cor de texto padrão.

Trocando a cor da marca

Defina --primary e --primary-foreground nos dois blocos, e todo componente que usa bg-primary passa a usar a nova cor.

:root {
  --primary: oklch(0.55 0.22 264);
  --primary-foreground: oklch(0.98 0 0);
}

.dark {
  --primary: oklch(0.7 0.19 264);
  --primary-foreground: oklch(0.15 0 0);

:root {
  --primary: oklch(0.55 0.22 264);
  --primary-foreground: oklch(0.98 0 0);
}

.dark {
  --primary: oklch(0.7 0.19 264);
  --primary-foreground: oklch(0.15 0 0);
}

Escolha um foreground com contraste suficiente sobre a nova cor primária e confira nos modos claro e escuro.

Adicionando um token

Declare a variável nos dois blocos e mapeie no @theme inline para o Tailwind gerar os utilitários:

@theme inline {
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
}

:root {
  --success: oklch(0.72 0.19 145);
  --success-foreground: oklch(0.98 0 0);

@theme inline {
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
}

:root {
  --success: oklch(0.72 0.19 145);
  --success-foreground: oklch(0.98 0 0);
}

.dark {
  --success: oklch(0.65 0.17 145);
  --success-foreground: oklch(0.15 0 0);
}

A partir daí bg-success e text-success-foreground funcionam como qualquer outro token.

Raio de canto

radius-sm, radius-md e radius-lg são calculados a partir de --radius, então mudar esse valor muda os cantos de cards, inputs, botões e popovers de uma vez.

:root { --radius: 0.75rem; }

Adicionando uma variante

As variantes são hashes Ruby congelados dentro da classe do componente. Como o arquivo é seu, criar uma variante é só acrescentar uma chave:

# app/components/ui/button_component.rb
VARIANTS = {
  default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
  success: "bg-success text-success-foreground shadow-xs hover:bg-success/90",
  # ...
}.freeze

<%= ui_button(variant: :success) { "Publicar" } %>

Isso conta como edição local: o bin/shadwire diff vai marcar o arquivo como modified, e o bin/shadwire update sobrescreveria a mudança.

Mantendo suas edições

1. bin/shadwire diff <nome>: veja o que você mudou.
2. bin/shadwire update <nome> sem --yes: ele pergunta arquivo por arquivo e mostra o diff de cada um.
3. Refaça suas edições em cima da versão nova.

bin/shadwire diff button      # see what you changed
bin/shadwire update button    # without --yes: asks per file and shows the diff

Sempre que der, acrescente (uma variante nova, um token novo) em vez de reescrever classes que já existem. Acréscimos são bem mais fáceis de manter quando você atualiza.