# Registry shadcn do SEED Design System — como um produto passa a seguir o DS > Documento de CONSUMO, gerado por `06-validacao/geradores/gen-registry.py`. Público-alvo: a sessão (ou pessoa) que mantém um > produto React + Tailwind v4 + shadcn/ui da SEED — hoje o ERP SEED (`seed-engenharia/seed-erp`). > Decisão do decisor (2026-09-05, MANIFESTO §159): **quem aplica no ERP é a sessão do ERP, por PR.** > O que este registry faz: o produto roda um comando e todos os componentes shadcn que já usa > passam a ter a cara da SEED — sem tocar em componente nenhum. ## Os três itens | item | tipo | o que instala | MD5 do CSS | |---|---|---|---| | `@seed/tokens` | `registry:file` | `src/styles/seed-tokens.css` — o gêmeo do DS (575 variáveis `--seed-*`), com o seletor do escuro estendido a `.dark` | `a815c4a2b4d15052faa809bdc8aca16d` | | `@seed/fontes` | `registry:file` | `src/styles/seed-fontes.css` — `@font-face` de Montserrat e JetBrains Mono servidas por `https://ds.seed.eng.br` | `4d97ee059b4e0f9b8ae7092166fb9485` | | `@seed/theme` | `registry:theme` | os 32 apelidos de cor (+ radius) do shadcn em `:root` e `.dark`, todos `var(--seed-…)`; fontes e raio em `@theme` | — | ## Passo a passo (no repositório do produto) **1. Registrar o namespace** — em `components.json`, dentro de `"registries"`: ```json "registries": { "@seed": "https://ds.seed.eng.br/r/{name}.json" } ``` **2. Instalar os três itens** (a ordem importa: tokens antes do tema): ```bash npx shadcn@latest add @seed/tokens @seed/fontes @seed/theme ``` Sem namespace, o equivalente por URL: `npx shadcn@latest add https://ds.seed.eng.br/r/tokens.json https://ds.seed.eng.br/r/fontes.json https://ds.seed.eng.br/r/theme.json`. **3. Importar os dois CSS** no arquivo global (no ERP, `src/styles.css`), logo depois do `@import "tailwindcss"`: ```css @import "./styles/seed-tokens.css"; @import "./styles/seed-fontes.css"; ``` O CLI do shadcn escreve os apelidos do tema nos blocos `:root` e `.dark` do CSS global (substituindo os valores slate de mesmo nome) e registra `--font-sans`, `--font-mono` e `--radius-xl` no `@theme inline`. O `@theme inline` que já mapeia `--color-primary: var(--primary)` etc. **não muda**. **4. Provar** — o arquivo instalado é o publicado, byte a byte: ```bash md5sum src/styles/seed-tokens.css # tem de dar a815c4a2b4d15052faa809bdc8aca16d md5sum src/styles/seed-fontes.css # tem de dar 4d97ee059b4e0f9b8ae7092166fb9485 ``` e, no navegador, um botão primário tem de sair `#098475` no claro e `#66D1C2` no escuro (`getComputedStyle(botao).backgroundColor`). **5. Tema escuro** — o shadcn liga pela classe `dark` no ``; o DS, por `data-theme="dark"`. Os tokens instalados respondem aos dois (é a única linha que difere do gêmeo). Sem nenhum dos dois, vale a preferência do sistema (`prefers-color-scheme`). ## O que muda na tela, e de onde vem cada decisão | apelido do shadcn | passa a apontar para | |---|---| | `--background` | `var(--seed-surface-page)` | | `--foreground` | `var(--seed-text-primary)` | | `--card` | `var(--seed-card-bg)` | | `--card-foreground` | `var(--seed-text-primary)` | | `--popover` | `var(--seed-surface-overlay)` | | `--popover-foreground` | `var(--seed-text-primary)` | | `--primary` | `var(--seed-action-primary)` | | `--primary-foreground` | `var(--seed-text-on-action-primary)` | | `--secondary` | `var(--seed-action-secondary-bg)` | | `--secondary-foreground` | `var(--seed-action-secondary-text)` | | `--muted` | `var(--seed-surface-subtle)` | | `--muted-foreground` | `var(--seed-text-muted)` | | `--accent` | `var(--seed-list-hover)` | | `--accent-foreground` | `var(--seed-text-primary)` | | `--destructive` | `var(--seed-action-destructive)` | | `--destructive-foreground` | `var(--seed-text-on-action-destructive)` | | `--border` | `var(--seed-border-default)` | | `--input` | `var(--seed-field-border)` | | `--ring` | `var(--seed-border-focus)` | | `--chart-1` | `var(--seed-chart-cat-1)` | | `--chart-2` | `var(--seed-chart-cat-2)` | | `--chart-3` | `var(--seed-chart-cat-3)` | | `--chart-4` | `var(--seed-chart-cat-4)` | | `--chart-5` | `var(--seed-chart-cat-5)` | | `--sidebar` | `var(--seed-surface-brand-deep)` | | `--sidebar-foreground` | `var(--seed-text-on-brand-deep)` | | `--sidebar-primary` | `var(--seed-surface-brand)` | | `--sidebar-primary-foreground` | `var(--seed-text-on-brand)` | | `--sidebar-accent` | `var(--seed-chrome-overlay-hover)` | | `--sidebar-accent-foreground` | `var(--seed-text-on-brand-deep)` | | `--sidebar-border` | `var(--seed-chrome-overlay-active)` | | `--sidebar-ring` | `var(--seed-text-on-brand-deep)` | | `--radius` | `0.625rem` (botão e campo em 8 px, como §1.6 e §2.5) e `--radius-xl: var(--seed-card-radius)` (cartão em 12 px, §26) | Origem: `accent` neutro = §26-F/HV1 do `seed-componentes.md`; `sidebar` = rail da marca do shell (§46/§48, CP20); o restante é a leitura direta do papel de cada apelido (MANIFESTO §158). Nenhum hex: mudou o semântico no DS, o produto herda na próxima instalação. ## Atualizações O DS republica este registry a cada mudança de token. Para atualizar o produto: repita o passo 2 (o CLI sobrescreve os três arquivos) e o passo 4. O `seed-tokens.css` canônico, inteiro, está em https://ds.seed.eng.br/02-tokens/seed-tokens.css; a versão e o histórico, em https://ds.seed.eng.br/02-tokens/seed-tokens.md.