Component Semantic Groups
design-system specs/design-system/component-semantic-groups.kmd
Nomeia e governa a camada de **estilo/anatomia de componente** de um Design System — o que fica ENTRE os tokens primitivos (DTCG) e o widget imperativo do Kroma. Essa camada NÃO cabe no DTCG primitivo (cor/espaço/raio como escala) nem deve virar código por-DS: ela vive como **grupos `*.semantic` na camada overlay do DTCG** do próprio DS (ex.: `radius.semantic.button = pill`). É o degrau 2 da escada de `policies/language-and-format-creation.kmd` — convenção sobre um padrão externo (DTCG), não formato nem linguagem nova. Emergente: gov.br é o 1º e único consumidor; um EXTRATOR automatizado fica deferido até o 2º DS externo (R2).
When this spec applies
All triggers
- Representar estilo/forma/anatomia de componente que varia entre design systems
- Importar de um DS externo dados de componente que não estão no token primitivo (raio por-componente, densidade, mapa de estados)
Specification body
Spec — Component Semantic Groups
A camada que faltava tinha nome errado. Um Design System na Koder Stack tem duas metades de representação: (1) tokens — resolvida por DTCG +
dsimport+design-gen; e (2) estilo/anatomia de componente — qual raio o botão usa, se o card tem elevação por sombra ou por borda, qual densidade, quais estados. A metade (2) não está no token primitivo e, até esta spec, não tinha lugar declarado: virava CSS lido à mão e widget Rust portado à mão. Esta spec nomeia essa camada e diz onde ela mora.
1. Posição na escada (por que NÃO é formato nem linguagem nova)
policies/language-and-format-creation.kmd manda escolher o degrau mais baixo
que resolve. Aplicado aqui:
- R6 — padrão externo antes de inventar. DTCG (W3C Design Tokens) é o padrão adotado da Stack. Estilo de componente que é escalar/valor (raio, espaço, cor, sombra por-papel) cabe em DTCG como um grupo semântico. Logo, a camada é convenção sobre DTCG (degrau 1–2), não um formato (4) nem uma linguagem (5).
- R1#1 — vocabulário fechado? O vocabulário de papéis de componente
(
button,field,card,tag, …) é semi-aberto e ainda está se descobrindo — cada DS externo importado revela papéis novos. Vocabulário não fechado proíbe subir pra formato/linguagem dedicada; obriga ficar no degrau 2. - R2 — dois consumidores. Um artefato de degrau ≥4 exige dois consumidores independentes já identificados. Hoje há um: gov.br. Enquanto for um, a camada é estrutura interna do import do gov.br, não formato próprio da Stack.
Conclusão normativa: estilo de componente por-DS SHALL ser expresso como
grupos *.semantic no DTCG overlay do DS. Criar linguagem/formato dedicado pra
isso está vetado até o gatilho de promoção da §4 disparar.
2. Onde mora e quem é a autoridade (R3 — um caminho por verdade)
tools/design-gen/design-systems/<slug>/
tokens.upstream.dtcg.json # snapshot externo (primitivos) — importado, read-only
tokens.overlay.dtcg.json # curadoria local — AQUI vivem os grupos *.semantic
tokens.dtcg.json # publicado = upstream ⊕ overlay (gerado, nunca à mão)
- Fonte da verdade do estilo de componente = o grupo
*.semanticemtokens.overlay.dtcg.jsondo DS. É curadoria local (não vem do upstream primitivo), então mora no overlay por definição do modelo de proveniência (design-RFC-007/014). - O CSS de componente do DS externo (ex.:
@govbr-ds/corecore.min.css) é evidência upstream, não autoridade: dele se extrai o valor (medido, nunca adivinhado), e o valor extraído é gravado no overlay. Divergência entre o CSS externo e o overlay resolve-se a favor do overlay (é a decisão de curadoria Koder), e registra-se a extração. - A prosa em
specs/components/<slug>.kmddescreve o componente para humano/IA; o valor efetivo de estilo por-DS é o*.semantic. Não duplicar o número na prosa.
3. Vocabulário emergente (estado atual — cresce com evidência)
Papéis já descobertos (extraídos MEDIDOS do gov.br v3.7 — épico #219, 2026-07-16):
| grupo semântico | papel | valor gov.br | valor Verge | observação |
|---|---|---|---|---|
radius.semantic | button | pill (100em) | sm (6) | exigiu o conceito pill/full — raio escalar não representa |
radius.semantic | field / checkbox | sm (4) | sm | |
radius.semantic | card | none (0) | md (12) | gov.br: elevação por sombra, card quadrado |
radius.semantic | tag | pill (100em) | — | |
color.semantic | (vários) | — | — | grupo já pré-existente; mesmo mecanismo |
pill/fullé a lição de escopo: um papel de componente pode exigir um valor conceitual (pill = "totalmente arredondado") que a escala numérica de token não expressa. Novos papéis/valores conceituais entram AQUI conforme o import de cada DS os revelar — é exatamente essa descoberta incremental que a §4 está coletando antes de investir num extrator.
4. Deferral — o extrator automatizado é gated pelo 2º DS externo
Hoje a extração CSS de componente → grupo *.semantic no overlay é manual, por
componente, dentro do épico do gov.br (#219 + govbr-ds-parity). Isso é correto
por ora: é a instância deliberada de coleta de evidência que fecha o
vocabulário da §3.
SHALL NOT construir um extrator/importador automatizado de estilo de componente
enquanto gov.br for o único consumidor (R2 não satisfeito; "regra dos 3" de
Meta-First). O trabalho fica especificado-não-construído no ticket
tools/design-gen#249 (gated_by: evidence-soak).
Gatilho de promoção (quando construir): o 2º DS externo que exija a mesma
extração (candidatos: Material 3, USWDS, Fluent) — nele, o custo de porte manual se
repete, R2 passa, e o extrator (degrau 2: estender dsimport para popular
grupos *.semantic a partir do CSS/tokens de componente externos) ganha
justificativa. Teto: degrau 2 — mesmo então, não se inaugura linguagem.
R4 — registro: quando o extrator (ou qualquer artefato consumível novo) nascer,
registrá-lo em registries/languages-and-formats.md no mesmo PR. Esta camada, por
ser convenção sobre a linha "Design tokens" já inventariada, não abre linha nova
enquanto for só convenção.
5. Relação com o manifesto de DS
O manifesto (specs/design-system/manifest.kmd) já tem [components].provides —
os slugs de componente que um DS provê/override. Esta spec diz o que é o
override no nível de estilo: os grupos *.semantic do overlay. kind = "look-only"
⇒ sem *.semantic próprios (herda Verge); kind = "full" com diferença estrutural
⇒ *.semantic próprios no overlay. gov.br (kind = full, maturity = preview) é o
caso de referência.
References
meta/docs/stack/specs/design-system/manifest.kmdmeta/docs/stack/policies/language-and-format-creation.kmdmeta/docs/stack/rfcs/design-RFC-014-design-systems-framework.kmdmeta/docs/stack/rfcs/design-RFC-007-token-hierarchy-seed-map-alias.kmdtools/design-gen/backlog/pending/219-govbr-ds-import-epic.kmdtools/design-gen/backlog/pending/249-component-semantic-extractor-gated.kmd