SWCore / CSS / Cores semânticas

Cores semânticas CSS

Cor que muda sozinha no dia/noite — --sw-pri, --sw-suc, --sw-err… é o que os componentes usam.

O que é

A camada de cor que os componentes usam de verdade. Ao contrário da paleta cromática (fixa), a cor semântica TROCA de valor entre tema claro e escuro automaticamente.

Como funciona

Existem duas variantes por cor: a de PREENCHIMENTO (--sw-suc) e a de TEXTO (--sw-suc-txt) — a de texto escurece no tema claro pra manter contraste AA. .bg-suc-soft é um fundo translúcido bem discreto, bom pra rótulos.

Exemplos

Marca & estado — texto, fundo e borda Ao vivo

.bg-pri .bg-sec .bg-suc .bg-err .bg-ale .bg-inf

<!-- cada token var(--sw-x) tem uma classe com o mesmo nome -->
<span class="t-pri">texto primária</span>
<span class="bg-suc">fundo sucesso</span>
<span class="bd-err" style="border:2px solid">borda erro</span>

<!-- ou direto no CSS -->
<style>.minha-classe { color: var(--sw-pri); }</style>

Fundo suave (soft) — rótulos discretos Ao vivo

.bg-pri-soft .bg-suc-soft .bg-err-soft .bg-ale-soft

<span class="bg-suc-soft t-suc">aprovado</span>
<span class="bg-err-soft t-err">erro</span>
<!-- 14% de opacidade sobre a superfície — bom pra chip/badge -->

Fundo, superfície e borda Ao vivo

bg-base

bg-sur (card)

<div class="bg-base">fundo da página</div>
<div class="bg-sur sha">card / superfície elevada</div>
<div class="bg-sur-h">hover da superfície</div>
<hr class="bd-mut">

Degradê — 6 camadas, qualquer cor Ao vivo

grad grad-diag grad-spot grad-glass grad-deep grad-tone

<!-- degradê é uma CAMADA por cima da cor, não uma cor à parte —
     .grad* entra sobre o .bg-* que já está lá, combina com qualquer cor -->
<span class="bg-pri grad">brilho de cima → base → leve escuro embaixo</span>
<span class="bg-sec grad-diag">claro no canto sup-esq → escuro no inf-dir</span>
<span class="bg-suc grad-spot">foco de luz radial num canto</span>
<span class="bg-err grad-glass">faixa de vidro diagonal (reflexo)</span>
<span class="bg-ale grad-deep">escurece de cima pra baixo</span>
<span class="bg-inf grad-tone">2 tons DA própria cor, sem overlay branco</span>

<!-- atalho pronto (cor + camada), o mesmo que os botões usam -->
<span class="bg-g-pri">bg-g-pri</span>

Atributos

Nenhum.

Variantes

t-pri / bg-pri / bd-pri (idem sec, suc, err, ale, inf, acc)

marca & estado — texto / fundo / borda na cor semântica

bg-{cor}-soft

fundo SUAVE (tonal, 14% sobre a superfície) — chip/badge discreto

bg-base · bg-1 · bg-2 · bg-3

fundo da página e 1/2/3 tons acima

bg-sur (+ sha opcional) · bg-sur-h

superfície elevada (card) e seu hover

bd-mut / bd-alt

borda padrão / alternativa neutra

t-txt · t-mut · t-inv

texto forte / suave (padrão do <p>) / sobre cor sólida

grad · grad-diag · grad-spot · grad-glass · grad-deep · grad-tone

6 camadas de degradê, por cima de qualquer bg-{cor}

bg-g-pri (idem sec, suc, err, ale, inf, drk, lit)

atalho pronto: cor + camada, o mesmo que os botões usam

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.

← AnteriorTipografia Próximo →Paleta estendida