Customizando Temas

Você não precisa modificar os arquivos do tema para personalizar componentes. O Seed carrega componentes em camadas — o que você colocar em src/components/ sempre tem prioridade sobre o tema.

Como funciona a sobreposição

Quando o Seed carrega os componentes, ele segue esta ordem:

```
1. themes/<nome>/components/   ← base (tema)
2. src/components/             ← suas customizações (sempre vence)
```

Se você criar um componente com o mesmo nome em src/components/, ele substitui silenciosamente o do tema. O tema original não é alterado — o Seed simplesmente usa a sua versão.

Alterando o visual de um componente

A forma mais comum de customizar é criar uma versão do componente em src/components/ com as classes que você quer. Por exemplo, para deixar os botões com bordas arredondadas:

```yaml
# themes/seed-theme/components/button/button.yaml (original — não mexa)
button:
  tag: button
  class: inline-flex items-center px-4 py-2 rounded-lg font-medium
  variant:
    primary: bg-indigo-600 text-white hover:bg-indigo-700
```

```yaml
# src/components/button/button.yaml (sua versão)
button:
  tag: button
  class: inline-flex items-center px-4 py-2 rounded-full font-bold
  variant:
    primary: bg-emerald-600 text-white hover:bg-emerald-700
    secondary: bg-gray-100 text-gray-900 hover:bg-gray-200
```

O .template do botão original continua sendo usado — você só sobrescreveu as classes e variantes. Se quiser também mudar a estrutura HTML, crie um button.template junto.

Adicionando componentes novos

Componentes criados em src/components/ ficam disponíveis junto com os do tema. Não há conflito — o nome é único no projeto.

```
src/components/
  destaque/
    destaque.yaml       ← novo componente exclusivo do seu projeto
    destaque.template
```

Sobrescrevendo assets do tema

Arquivos em src/assets/ têm prioridade sobre os do tema. Se o tema tem themes/seed-theme/assets/seed-ui.css e você criar src/assets/seed-ui.css, o Seed usa o seu arquivo.

Útil para sobrescrever variáveis CSS ou adicionar estilos globais sem modificar o tema:

```
src/assets/
  seed-ui.css    ← substitui o CSS do tema com o mesmo nome
  extras.css     ← arquivo adicional (inclua no front matter do layout)
```

Quando fazer fork do tema

Sobreposição local (src/components/) é ideal para ajustes pontuais — um componente aqui, outro ali. Se você precisar mudar a maioria dos componentes ou a identidade visual completa, vale mais a pena fazer um fork:

• Copie a pasta do tema para outro lugar
• Edite livremente os arquivos
• Instale como tema local: seed theme-install meu-projeto /caminho/meu-fork

Com fork, você tem controle total. A desvantagem é que atualizações do tema original precisam ser aplicadas manualmente.

Feito com ❤️ e Seed