Cores

Visão ao vivo

📐 Quer entender de onde vêm esses valores (a fórmula da escala, como o par on-<tom> é escolhido, o pipeline de build) e usar o gerador acima? Veja Geração de Cores.

Todas as cores são CSS Custom Properties (--mds-colors-*), nunca hex fixo no HTML/CSS de consumo. Cada papel semântico tem 5 tons (lighter, light, main, dark, darker) + seu par de contraste — nomenclatura alinhada ao Figma (--mds-colors-<papel>-<tom> para o fundo, --mds-colors-<papel>-on-<tom> para o texto/ícone legível sobre ele, ex.: --mds-colors-primary-main + --mds-colors-primary-on-main).

Papéis semânticos (tema claro)

Papel	Token base	`lighter`	`light`	`main`	`dark`	`darker`	Quando usar
Primary	`--mds-colors-primary-*`	`#ecf3ff`	`#a0c4fd`	`#408afa`	`#3068bb`	`#20457d`	Ação principal, marca, item ativo/selecionado, foco de interação
Secondary	`--mds-colors-secondary-*`	`#e9ebf3`	`#939ac5`	`#27348b`	`#1d2768`	`#141a46`	Marca institucional, badges/destaques secundários, campo válido (borda)
Danger	`--mds-colors-danger-*`	`#fcebe6`	`#f29980`	`#e53200`	`#ac2600`	`#731900`	Erro, exclusão, bloqueio, ação irreversível
Warning	`--mds-colors-warning-*`	`#fef9e6`	`#f8e280`	`#f0c400`	`#b49300`	`#786200`	Atenção, campo obrigatório, dado pendente de revisão
Info	`--mds-colors-info-*`	`#e6f3fb`	`#80c3ed`	`#0087db`	`#0065a4`	`#00446e`	Mensagem neutra, dica, estado informativo sem urgência
Success	`--mds-colors-success-*`	`#e6f9e6`	`#80e381`	`#00c703`	`#009502`	`#006402`	Confirmação, conclusão, dado validado

on-<tom> é a cor de texto/ícone garantida legível sobre aquele fundo — sempre use o par (--mds-colors-<papel>-main + --mds-colors-<papel>-on-main), nunca aplique texto escuro fixo sobre um fundo de token.

✅ Checagem cruzada com o Figma (2026-09-22, Design System 2.0): Os fundos (lighter/main/dark/darker) batem exatamente com o Figma em todas as 12 famílias (primary, secondary, danger, warning, success, info, aqua, blue, green, orange, pink, red, teal, yellow) e na escala de cinza inteira.

Corrigido em src/scss/themes/_light.scss em 2026-09-22 (reproduzindo a fórmula de src/stories/foundations/TokenManager.stories.ts, generateScale: tom light = passo 200 = 50% de mistura da cor-base com branco): o tom light de Primary/Secondary estava desatualizado.

--mds-colors-primary-light: era #70a7fb, agora #a0c4fd.

--mds-colors-primary-on-light: era #020408, agora #060e19 (par de contraste do tom acima, ajustado junto para continuar legível).

--mds-colors-secondary-light: era #5d67a8, agora #939ac5.

--mds-colors-secondary-on-light: era #f9f9fc, agora #010204 (par de contraste do tom acima, ajustado junto para continuar legível).

Achado à parte, ainda em aberto (não corrigido): Figma: on-main/on-dark/on-darker = o próprio tom lighter do papel. CSS: um quase-branco específico do papel, próximo mas não idêntico ao lighter.

primary: CSS #f9fbff, Figma reaproveita o lighter (#ecf3ff).

secondary: CSS #f9f9fc, Figma reaproveita o lighter (#e9ebf3). Confiança: alta para primary/secondary (zoom dedicado); padrão, não confirmado byte a byte, nos demais papéis.

Background / Surface / Text (neutros)

Escala base: --mds-colors-gray-0 #fefefe … --mds-colors-gray-50 #fafbfc … --mds-colors-gray-100 #f3f4f6 … --mds-colors-gray-200 #e8eaee … --mds-colors-gray-300 #dcdfe5 … --mds-colors-gray-400 #d0d4dc … --mds-colors-gray-500 #9c9fa5 … --mds-colors-gray-600 #686a6e … --mds-colors-gray-700 #343537 … --mds-colors-gray-800 #151516 … --mds-colors-gray-900 #060607.

Uso	Token	Valor	Regra
Surface / Card	`--mds-dimmed-default`	`#fefefe`	Fundo padrão de card, modal, painel — “branco” do sistema
Background (página)	`--mds-colors-background-light`	`#fafbfc`	Fundo da aplicação por trás dos cards
Background (elemento)	`--mds-colors-background-main`	`#f3f4f6`	Fundo de blocos secundários (ex.: `.mds-box`)
Background (rebaixado)	`--mds-colors-background-dark`	`#e8eaee`	Hover neutro, divisores de área, estado “dimmed”
Border	`--mds-colors-border-main`	`#e8eaee`	Toda borda 1px de card, input, tabela
Text — corpo (padrão)	`--mds-colors-foreground-main`	`#686a6e`	Texto de parágrafo, valor de dado, corpo em geral
Text — ênfase/secundário	`--mds-colors-foreground-dark`	`#343537`	Título, rótulo em destaque, texto que precisa de mais peso que o corpo
Text — muted/apoio	`--mds-colors-foreground-light`	`#9c9fa5`	Placeholder, texto de ajuda, timestamp, metadado de baixa prioridade

Note a inversão de intuição: foreground-dark é o texto de MAIOR ênfase (mais escuro = mais peso), e foreground-light é o texto de MENOR ênfase (mais claro = apoio). Siga essa semântica, não o nome literal.

Destructive

Não existe token destructive isolado — Danger cobre esse papel (botão de exclusão = variant="danger" / .mds-btn--danger, --mds-colors-border-error = #e53200).

Overlay / Shadow

--mds-colors-background-shadow: rgba(22, 22, 23, 0.15) — base de toda sombra do sistema.
--mds-colors-background-transparency: rgba(52, 53, 55, 0.6) — backdrop de modal/drawer.

Multi-marca (`[data-primary="..."]`)

Tenant	Cor `main`
`brand-mobiis`	`#408afa`
`blue`	`#0087db`
`teal`	`#00dbdb`
`aqua`	`#00f0b8`
`green`	`#00c703`
`yellow`	`#f0c400`
`orange`	`#f07800`
`red`	`#e53200`
`pink`	`#ff0073`

Tema escuro

[data-theme="dark"] e :root aplicam-se ao mesmo elemento — uma prop não redeclarada em [data-theme="dark"] cai para o valor de :root (cascata normal do CSS); a maioria dos papéis redeclara os 5 tons com valores próprios para dark. Ex.: primary-main é #408afa no claro e #3068bb no escuro. Neutros do tema escuro: fundo #121c2b, texto de corpo #d1d8e2. Um agente de IA nunca deve ler valor de cor fixo: sempre referenciar o token, para funcionar nos dois temas automaticamente.

🌙 Tema escuro conferido no Figma ao vivo (2026-10-21, modo Mobiis-dark). Modelo: Mobiis Dark Blue (tema do VS Code em fretefy-vscode-theme). As paletas são geradas por npm run tokens com os passos do Figma; neutros e regras semânticas foram ajustados por legibilidade (src/scss/themes/_dark.scss).

Passos: lighter=700, light=600, main=500, dark=300, darker=200; secondary (brand): lighter=700, light=600, main=400, dark=200, darker=100.

Par	Lc claro	Lc escuro
Texto de corpo (`foreground-main`) / card	76	81
Texto de ênfase (`foreground-dark`) / card	97	97
Texto de apoio (`foreground-light`) / card	51	56
Borda de campo (`control-default-border`)	22	24
Texto de erro (`foreground-error`) / card	82	80
Link (`ui-interactive-text`) / card	99	53

Diferenças em relação ao Figma (o modo dark do Figma está incompleto):

Neutros (--mds-dimmed-* e --mds-colors-gray-*) azulados, na identidade do tema Dark Blue do VS Code, mas dessaturados (OKLCH croma 0,03 na matiz do primary, 258°): o navy saturado do VS Code (#001027) fica com aspecto de tinta em superfícies grandes e faz o texto “vibrar”. Página #08101c, bloco/menu #0b1421, card #121c2b, hover/borda #222d3e, corpo #d1d8e2, apoio #a2adbf. O Figma usa cinza neutro e, na camada semântica, texto e bordas escuros demais (ilegíveis/invisíveis).
Elevação pela luminosidade: página < bloco rebaixado (background-main, menu) < card < hover/borda. Sombra quase não aparece no escuro, então a superfície mais clara indica o que está acima.
Primary com main = #3068bb (passo 500, como o botão do VS Code); o Figma mantém #408afa. Secondary (navy) usa os passos de marca do Figma (main = #27348b), com lighter no 700 em vez do 900 (quase preto).
Texto em cor de papel (foreground-<papel>) usa o tom darker, como o Figma; borda/ícone de erro (border-error) usa o dark.
Contraste por paleta: partindo dos passos do Figma, o main clareia até o botão se destacar do card (WCAG ≥ 3) com texto Lc ≥ 60, e o dark até Lc ≥ 50 no card (link, item ativo, foco); o darker fica um passo acima. Ajusta blue, red e pink (main 400, dark 200, darker 100) e aqua/yellow (main 400) — vale para [data-primary] e para os papéis semânticos (danger, info, warning). Regra em DARK_CONTRAST (scripts/tokens/palettes.config.js).
Botões: hover e pressionado escurecem (light/lighter), porque no escuro dark/darker clareiam.
Variações de primary: _dark.scss tem os próprios blocos [data-primary] (gerados, mesmo modelo do claro) sobre as paletas escuras. Única diferença: o link desabilitado (ui-interactive-disabled-text) é o tom do link (dark) a 50% sobre o card, porque o light da paleta, usado no claro, é profundo no escuro e some (Lc ~20–31 em todas as variações).
Sombra e overlay em preto translúcido: o Figma usa um véu claro (#dcdfe5 a 20%/60%).
Variação [data-theme="dark-blue"] (_dark-blue.scss): neutros literais do tema Mobiis Dark Blue do VS Code (página #000814, card #001027, bloco/menu #000c1d, borda #0b2245, corpo #c3ccd9, apoio #8aa0bd). Paletas e blocos [data-primary] gerados pela mesma regra de contraste, medida contra o card navy; as sobrescritas semânticas são compartilhadas com o dark. Corpo Lc 75, apoio 49, borda de campo 26.