🌱 Seed

Criando Temas

Um tema Seed é uma pasta com uma estrutura simples: componentes em YAML (e opcionalmente templates e scripts) mais arquivos de estilo. Qualquer pessoa pode criar e distribuir temas.

Estrutura obrigatória

```
meu-tema/
  components/     ← componentes do tema
  assets/         ← CSS, JS e outros arquivos estáticos
```

Apenas essas duas pastas são necessárias. O nome da pasta raiz vira o nome do tema — o que aparece no seed.yaml como theme: meu-tema.

Organizando os componentes

Cada componente pode ser definido de três formas, da mais simples para a mais completa:

1. Componente simples (só YAML)

Para componentes sem estrutura HTML complexa — botões, badges, pills, avatares:

```
components/
  forms.yaml      ← vários componentes simples num único arquivo
```
```yaml
# forms.yaml
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
    secondary: bg-gray-100 text-gray-900 hover:bg-gray-200
  size:
    sm: text-sm px-3 py-1.5
    lg: text-lg px-6 py-3

input:
  tag: input
  class: w-full border border-gray-300 rounded-lg px-3 py-2 text-sm
```

2. Componente com template

Para componentes que têm estrutura HTML interna com slots — cards, heroes, features. Cada um fica numa subpasta com o mesmo nome:

```
components/
  card/
    card.yaml
    card.template
```
```yaml
# card/card.yaml
card:
  tag: div
  class: bg-white rounded-xl border border-gray-200 p-6
  variant:
    elevated: shadow-lg border-0
```
```seed
// card/card.template
@h3 class=text-lg font-semibold mb-2
  {title}
@p class=text-gray-600 mb-4
  {?description}
@div class=flex gap-2
  {?actions}
```

3. Componente com JavaScript

Para componentes interativos como accordion, tabs ou dropdown. Coloque um arquivo .js com o mesmo nome na mesma pasta:

```
components/
  accordion/
    accordion.yaml
    accordion.template
    accordion.js     ← injetado automaticamente quando @accordion é usado
```

O script é injetado uma única vez por página, apenas nas páginas onde o componente aparece.

Arquivos de estilo e JavaScript globais

Coloque em assets/ os arquivos CSS e JS que devem estar disponíveis em todas as páginas:

```
assets/
  meu-tema.css    ← estilos globais do tema
  meu-tema.js     ← JavaScript global (ex: menu mobile, scroll)
```

Quem instalar o tema precisa referenciar esses arquivos no front matter do default.layout:

```seed
---
title: Meu Site
css: /static/meu-tema.css
js: /static/meu-tema.js
---

@div class=min-h-screen
  {content}
```

Convenções recomendadas

Prefixo nos nomes

Se o tema vai ser distribuído publicamente, considere usar um prefixo nos nomes dos componentes mais específicos para evitar conflito com outros temas:

```yaml
# Em vez de "hero", use "ada-hero" ou "meu-tema-hero"
ada-hero:
  tag: section
  class: ...
```

Componentes genéricos como button, card, input não precisam de prefixo — faz parte do contrato de um tema fornecer esses nomes padrão.

Documentando com description e example

Você pode adicionar description e example em qualquer componente no YAML. Eles aparecem no Component Explorer (tecla h no dev server) para quem usa o tema:

```yaml
card:
  tag: div
  class: bg-white rounded-xl border border-gray-200 p-6
  description: Card com título, descrição e ações opcionais
  example: |
    @card variant=elevated
      @title
        Título do card
      @description
        Texto descritivo.
      @actions
        @button variant=primary
          Saiba mais
  variant:
    elevated: shadow-lg border-0
```

Distribuindo o tema

Via GitHub

A forma mais simples é publicar a pasta do tema como um repositório Git. Quem quiser instalar usa:

```bash
seed theme-install meu-projeto https://github.com/voce/meu-tema
```

O Seed clona o repositório inteiro — então a raiz do repositório deve ser a raiz do tema (com as pastas components/ e assets/ diretamente na raiz).

Via pasta local

Para compartilhar sem publicar online, basta passar o caminho da pasta:

```bash
seed theme-install meu-projeto /caminho/para/meu-tema
```

Checklist antes de distribuir

Feito com ❤️ e Seed