Ir ao conteúdo
SEED engenhariaDesign System

Tokens

3. Camada 2 — Semânticos

seed-tokens.md v1.23 · §03seção 4 de 1703-camada-2-semanticos-light-dark.md · MD5 ba0667bc

Título completo no canon: Camada 2 — Semânticos (light + dark)

Grupos entregues (valores completos no JSON/CSS): surface (page, subtle, raised, sunken, overlay, brand, brand-deep, inverse) · text (primary, secondary, muted, disabled, brand, inverse, on-brand, link) · border (subtle, default, strong, focus, interactive — v1.12) · action (primary±hover/active, secondary, ghost, destructive) · feedback (success/warning/danger/info × bg/text/border/solid) · chart (cat-1…6, positive, negative, grid, axis).

Decisões dignas de registro:

  • action-primary light = turquesa-600 (verde institucional). Dark = turquesa-300 com texto turquesa-900 (7.39:1) — padrão moderno de "fill claro + texto escuro" no dark, em vez de escurecer o botão.
  • **text-primary = #0B3330 (v1.9 — SUPERSEDE de cinza-900 #242E34). A v1.0 superseava o #2a3942 ad-hoc do HTML v1; a v1.9 tinge a tinta na família da marca.

NORMALIZAÇÃO DO focus-ring — v1.10 (2026-08-14)#

O que muda: nada de valor. O --seed-focus-ring do tema claro deixa de consumir o primitivo --seed-branco e passa a consumir o semântico --seed-surface-page, que é o que o bloco escuro já fazia. surface-page claro é #FFFFFF, então a cor renderizada é idêntica — o que muda é a EXPRESSÃO.

Por que importa, e o achado veio de fora: os previews componentes e tokens já usavam surface-page nos DOIS temas, e a guarda paridade-previews.py os acusou de divergir do gêmeo. Ao apurar, eles estavam mais corretos que o canônico: um token semântico composto não deve depender de primitivo, e ter expressão diferente por tema para o mesmo papel é a porta por onde um tema envelhece sem o outro. Quem se ajustou foi o gêmeo.

Efeito colateral bom: o --seed-branco deixa de ser exigido por qualquer preview que embuta o focus-ring. A pendência de --seed-branco sem definição em formfield fecha por consequência, sem precisar acrescentar token.

COMPOSIÇÃO E CHROME — v1.11 (2026-08-14 · CP-P3, executa o SUP-6 em escopo mínimo)#

Contexto para leitor novo: o gate visual da Fase 2 da composição (2026-08-14, vereditos G1–G5 registrados no seed-composicao.md §11) adotou o gradiente do rail (CP20, G2), aprovou a paleta de entidade (CP23, G3) e o marcador de "agora" (CP24, G4). A adoção do gradiente disparou o gatilho do SUP-6 (hover/pressed em cinza sólido falham sobre superfície gradiente), resolvido aqui em escopo mínimo: dois tokens de overlay, não a rampa alpha completa do C27 (custo declarado dela: valores a olho, reauditados a cada superfície — e o CP20 proíbe gradiente fora do chrome, então só existe UMA superfície gradiente no sistema).

Os quatro grupos são INVARIANTES DE TEMA — nenhum se redeclara no bloco dark dos gêmeos, e cada um declara aqui o seu par light/dark (que é o mesmo valor) com o porquê:

Token Valor (light = dark) Por quê invariante Medido
--seed-rail-background linear-gradient(180deg, #006C62 0%, #005048 100%) (turquesa-700 → turquesa-800) Por DECISÃO — SH15: chrome não segue o tema; CP20 exige semântico próprio, senão o tema escuro vira regra manual (o ClickUp escreveu 22 regras à mão) Branco sobre os dois extremos, não na média: 6,32 e 9,37 (≥4,5)
--seed-chrome-overlay-hover rgba(255, 255, 255, 0.12) Por CONSTRUÇÃO — compõe sobre superfície invariante (o rail) Rótulo branco sobre a COMPOSIÇÃO (overlay composto sobre cada extremo): 4,88 e 6,82 (≥4,5)
--seed-chrome-overlay-active rgba(255, 255, 255, 0.14) Idem. É o estado pressionado; o item ATIVO (aria-current) segue sendo a pílula clara do SH15-b Branco sobre a composição: 4,68 e 6,50 (≥4,5)
--seed-entity-1…6 + --seed-entity-N-ink E1 #11B0A0+#242E34 · E2 #D49400+#242E34 · E3 #01B3E0+#242E34 · E4 #005048+#FFFFFF · E5 #006783+#FFFFFF · E6 #7B5500+#FFFFFF Por CONSTRUÇÃO — o par medido é interno ao chip (fundo × tinta) e não inverte com o tema; o CP23 define um hex por posição Admissão CP22 (≥4,5 com a tinta declarada): 5,11 · 5,30 · 5,63 · 9,37 · 6,43 · 6,68
--seed-marker-now #098475 (turquesa-600) Por DECISÃO — CP24: terceiro membro nomeado da classe invariante de tema (SH15 · DG12 · CP24) ≥3,0 (non-text) contra as cinco superfícies canônicas: 4,60 · 4,23 · 4,05 · 3,72 · 3,31

Decisões de forma, com as alternativas descartadas: (a) Tinta POR POSIÇÃO (entity-N-ink), não só o par ink-dark/ink-light com mapa em prosa: consumidor que precisa saber um mapeamento de cor é exatamente a classe de defeito que produziu a E-CP-01 (artefato consumindo a escala errada). Custo: 6 tokens a mais; ganho: o consumo vira background: var(--seed-entity-3); color: var(--seed-entity-3-ink) sem decisão local. (b) NÃO redeclarar os invariantes no bloco dark (nem no espelho prefers-color-scheme): redeclarar valor idêntico é duplicação, e duplicação é o vetor de deriva que os gêmeos existem para matar — quem editar um bloco e esquecer o outro criaria divergência silenciosa. No JSON, os quatro grupos ficam sem seed.mode de propósito (a ausência declara a invariância; a guarda paridade-tokens.py G2 pula a exigência de bloco dark exatamente nesse caso). (c) Overlays em vez da rampa alpha do C27: veredito do gate registrado no MANIFESTO v6.7 — a rampa completa segue adiada porque só o chrome admite gradiente. (d) Os alphas .12/.14 não foram inventados: são os dois valores que os artefatos aprovados já praticavam (o shell no hover; o preview da composição no ativo do gate), fixados depois da medição em composição — a quinta camada existe porque par isolado verde já escondeu 1,48.

Fronteira (mesma do CP23/PN7): o DS declara o MECANISMO de identidade; qual entidade usa qual posição vem do PRODUTO, via data-ident="1..6". Acima de 6 entidades repete-se a cor e distingue-se pelo glifo (nunca letra — decisão do MANIFESTO v6.4, mantida); nunca nasce uma sétima cor.

border-interactive — v1.12 (2026-08-14 · FECHA A PENDÊNCIA SH-P1/PN-P5)#

Contexto para leitor novo: a SH-P1 nasceu no bloco 6A (2026-08-11), achada pelo contraste-shell.py: nenhum token semântico de borda passava 3:1 contra surface-raised no tema claroborder-default mede 1,49 e border-strong 2,53 — e o campo de busca do shell consumia o primitivo cinza-500 por empréstimo declarado, violando a lei "componente consome semântico". O CP17 já havia fechado a metade "separação de peça" da pendência (separação virou tarefa do par sombra+anel); restava a metade menor: fronteira de componente interativo (SC 1.4.11, piso 3:1). A regra GI2 mandava fechá-la "quando a camada 2 fosse editada por outro motivo" — o motivo foi a CP-P3 (v1.11), e o Rafael decidiu fechar na mesma janela (2026-08-14: "vamos resolver logo").

O token: --seed-border-interactive = cinza-500 #788F9D, nos dois temas, medido contra as seis superfícies onde borda de componente aparece: raised/page/subtle claro 3,38 / 3,38 / 3,11 · raised/page/subtle escuro 4,50 / 5,51 / 5,05 — todos ≥3,0. Não é invariante de tema: o slot dark fica declarado (o valor idêntico hoje é coincidência medida, não lei — o dark pode divergir no futuro sem mudar a expressão), diferente dos quatro grupos da v1.11, invariantes por decisão ou construção.

Alternativa descartada, com o número: cinza-600 #617683 também passa as seis (3,21–4,74) — mas mudaria a cor renderizada que o gate visual do shell já aprovou, sem nenhum motivo além da troca: a pendência pedia promoção de expressão (primitivo → semântico), não de valor. Mesma lógica da normalização do focus-ring na v1.10.

row-selected-* — v1.13 (2026-08-15 · F7.2 · fecha uma lacuna que o sistema já vivia)#

Contexto para leitor novo: ao produzir o gabarito A2 (tela-lista.html), a linha selecionada foi pintada com o primitivo turquesa-100. O contraste-f72.py reprovou: 1,57 no tema escuro. A causa é estrutural, não de escolha — um primitivo é fixo, e realce de seleção precisa virar por tema, senão reprova sempre em um dos dois lados.

Ao procurar o semântico certo, o achado: a bancada banco-dados.html já consumia --seed-row-selected-bg, -text e -border desde a Fase 3 — com definição LOCAL, dentro do próprio arquivo, ausente deste gêmeo. O nome existia no sistema sem dono no canônico. Não era drift de valor, era drift de PROPRIEDADE: enquanto o token não é do gêmeo, cada artefato que precisar dele reinventa o valor, e ninguém mede o par.

Os tokens (adição pura — nenhum valor anterior muda; os hex são exatamente os que a bancada já usava, para que a promoção não altere um pixel do que o gate já aprovou):

Token Claro Escuro Papel
--seed-row-selected-bg #E8FBF7 (turquesa-50) #00352F (turquesa-900) fundo da linha selecionada
--seed-row-selected-text #242E34 (cinza-900) #E3EBF0 (cinza-100) tinta sobre o realce
--seed-row-selected-border #098475 (turquesa-600) #66D1C2 (turquesa-300) marcador de 3px na borda da linha

Medido: bg × text = 12,53 claro / 11,12 escuro (piso 4,5) · border × bg = 3,42 / 4,64 (piso 3,0 — o marcador é elemento de interface, SC 1.4.11).

Alternativa descartada: manter o realce como primitivo e escrever a exceção do tema à mão em cada artefato — que é literalmente o que o CP20 alerta e o que a tela-lista.html fazia antes desta edição. Guarda: paridade-tokens.py ganhou quatro verificações, incluindo uma que exige que o bg mude entre os temas — realce fixo é o defeito, não a ausência do token. A guarda foi provada real: rodada contra o CSS v1.12, reprova em 7.

SUPERSEDE DA TINTA DE TEXTO — v1.9 (2026-08-13)#

O que muda: os três tokens de tinta de CONTEÚDO passam da família cinza para a família turquesa da marca, nos dois temas. Bordas, superfícies e a régua de ação NÃO mudam.

Token Antes (claro/escuro) Agora (claro/escuro) Croma Pior contraste
text-primary #242E34 / #E3EBF0 #0B3330 / #DDECE8 0,063 → 0,157 11,49 → 11.37
text-secondary #4D606C / #ACBECA #2F5A54 / #A3C4BE 0,122 → 0,169 5,43 → 6.42
text-muted #788F9D / #90A6B3 #40706A / #8FB5AD 0,145 → 0,188 2,80 (reprovava)4.65

POR QUÊ. O estudo-viver-de-ia.md §2.1 mede a tinta de texto da plataforma em #0A1F3B — croma 0,192, declarada como "navy-tinta, não preto puro, MESMA FAMÍLIA do escuro estrutural". Como texto e borda ocupam a maior parte da área de qualquer tela, tinta neutra faz a tela inteira ler cinza mesmo com a âncora colorida — foi o achado do gate do Rafael em 2026-08-13. Os valores adotados ficam em 82% e 88% do croma da referência: mesma família, na mesma intensidade, sem exagero.

O QUE FOI DESCARTADO, com o número que descartou. (a) Usar primitivos existentes da escala (turquesa-900 + turquesa-700): o secundário daria croma 0,424 — 2,2× o da referência. Deixaria de ser tinta discreta e viraria verde forte; serve a título, não a corpo de texto. (b) Esverdear BORDAS e SUPERFÍCIES, como a 1ª redação da proposta previa: a plataforma não faz isso — as bordas dela medem croma 0,027/0,031 e a página é branco puro; o próprio estudo diz que "a sensação de cinza claro vem só das bordas e sombras". E há razão nossa, medida: a âncora do painel é cromática, e o mecanismo P4 (ritmo neutro↔cromático) depende de a página ser neutra. Contra surface-sunken esverdeada a âncora cairia de 2,71 para 2,21, e a série chart-cat-1 cairia junto — perderíamos contraste de saturação exatamente no único elemento que precisa dele.

SUPERSEDE FORMAL DA RESTRIÇÃO "NENHUM HEX NOVO". Os quatro valores de tinta não existem na escala de primitivos. Eles entram como valores SEMÂNTICOS — nunca como primitivos —, e os 8 hex canônicos da paleta 2018 seguem intocados, que é a lei do marca-seed.md. Precedente exato: a escala categórica estendida fez este mesmo supersede na v1.6 destes gêmeos.

ERRATA FECHADA NA MESMA EDIÇÃO (regra GI2): o text-muted REPROVAVA no canônico vigente. #788F9D (cinza-500) é declarado para "metadados, placeholders, captions" — texto pequeno, piso 4,5 — e media 3,38 contra page/raised, 3,11 contra subtle e 2,80 contra sunken: reprovava nas quatro superfícies do tema claro. O defeito é anterior a esta rodada e não foi introduzido por ela; foi encontrado na medição que precedeu esta edição. cinza-600 #617683 também reprovaria (3,93). O valor adotado é o único candidato medido que fecha os dois requisitos ao mesmo tempo — família e piso nas quatro superfícies.

A RÉGUA DE AÇÃO NÃO MUDA, E ISSO É O REGISTRO MAIS IMPORTANTE DESTA EDIÇÃO. Conferido nos gêmeos: action-primary já era #098475 (turquesa-600) no claro e #66D1C2 (turquesa-300) no escuro. A camada de tokens nunca saiu do §3.5 do marca-seed.md — só o preview do painel havia desviado, com o azul, e o desvio foi retirado. Nenhuma linha de token de ação precisou mudar.

  • surface-brand-subtle = #E8FBF7 no claro / #1A3833 no escuro (NOVO em 2026-08-17). É a superfície de marca sutil: balão de mensagem própria, faixa de destaque leve — coisas que precisam de tinta de marca sem virar surface-brand. Nasceu de um defeito, e o defeito era DESTA camada, não do artefato. A tela-chat.html pintava o balão da mensagem própria com a primitiva --seed-turquesa-50 porque não existia semântico para isso — e primitiva não inverte com o tema, enquanto o texto (--seed-text-primary) inverte: no tema escuro o par media 1,14 contra o piso 3,00, ou seja, mensagem branca sobre branca (defeito BT-P6, achado pela validacao/guarda-gi2.mjs na primeira varredura da pasta inteira). O artefato alcançou a primitiva porque era a única coisa disponível — culpar o artefato aqui seria culpar o sintoma. Alternativas descartadas: (a) reusar --seed-row-selected-bg ou --seed-action-secondary-bg, que já carregam #E8FBF7 no claro — recusado porque o semântico estaria mentindo: balão de mensagem não é linha selecionada nem fundo de botão secundário; (b) usar --seed-surface-subtle como o balão alheio já usa — recusado porque apagaria a distinção de tinta entre mensagem própria e alheia, que é desenho aprovado. O valor escuro #1A3833 não é valor novo: é o que esta camada já escolheu para superfície de marca que assenta na página (--seed-action-secondary-bg no escuro), então a coerência é com decisão existente. Medido contra --seed-text-primary: 12,79 no claro e 10,40 no escuro, piso de texto 4,50. E era o único consumo de --seed-turquesa-50 no acervo inteiro — medido por comando em 29 artefatos.
  • surface-brand-deep = turquesa-700/800. Supersede formalmente a "variante não-oficial tolerada #0d8f82" registrada no marca-seed.md v4 — a necessidade (fundo de capa profundo) agora tem resposta oficial dentro da rampa.
  • feedback-success usa a família turquesa/verde institucional. Alternativa descartada: criar rampa verde-folha nova (adicionaria cor fora da marca para resolver ambiguidade que ícone+contexto já resolvem; na SEED, êxito É verde da marca).
  • chart: sequência categórica de ordem fixacat-1 turquesa-400, cat-2 dourado-300, cat-3 azul-500, cat-4 turquesa-800, cat-5 cinza-400, cat-6 dourado-700 SUPERSEDIDA na v1.5 pela categórica ESTENDIDA da §3c (2 matizes exclusivos de dado; sequência turquesa → dourado → magenta → azul → violeta → azul-800; o cinza sai da categórica e fica exclusivo de "sem dado"). Positivo/negativo = turquesa-500/vermelho-500 (inalterado). Regra de acompanhamento inalterada: diferenciar séries também por forma e espessura (acessibilidade).
Esc