SWCore / Componentes / Cores

Cores Componentes

Paleta cromática completa do SWCore com API curta, transparências e módulo opcional.

O que é

O módulo swcore-colors.min.css recupera a praticidade da grade cromática do SW antigo. São 26 famílias, 11 tons por família e controles independentes de transparência para fundo, texto e borda, sem aumentar o arquivo principal do SWCore.

Como funciona

Cada cor existe como token primitivo (--sw-blue-500) e como utilitário curto: B aplica fundo, T texto, L borda, G degradê e S sombra. A transparência não duplica a paleta: os utilitários terminados em op ajustam cada efeito de 0 a 100 em passos de 10.

Exemplos

Instalação opcional Referência 
<link rel="stylesheet" href="dist/swcore.min.css">
<link rel="stylesheet" href="dist/swcore-colors.min.css">
Fundo, texto, borda, degradê, sombra e transparência Ao vivo
Fundo 30%
Borda 50%
Degradê
Sombra
<div class="Bazul500 Bop30">Fundo azul 500 com 30%</div>
<p class="Tverm600 Top60">Texto vermelho 600 com 60%</p>
<div class="Lcinz300 Lop50" style="border:2px solid">Borda cinza com 50%</div>
<div class="Gazul500 Gop90">Degradê azul</div>
<div class="Bbran Sazul500 Sop40">Sombra azul</div>
Grade completa — clique numa cor para copiar a classe Ao vivo

Bardo

Bcinz

Bzinc

Bneut

Bpedr

Bmauv

Boliv

Bmist

Btaup

Bverm

Blara

Bamba

Bamar

Blima

Bverd

Besme

Bteal

Bcian

Bceu

Bazul

Bindi

Bviol

Broxo

Bfuch

Brosa

Brose

Atributos

B{cor}{tom}
cor de fundo, por exemplo Bazul500
T{cor}{tom}
cor de texto, por exemplo Tverm600
L{cor}{tom}
cor da borda, por exemplo Lcinz300
G{cor}{tom}
degradê diagonal usando tons vizinhos, por exemplo Gazul500
S{cor}{tom}
sombra colorida, por exemplo Sazul500
Bop{0-100}
opacidade apenas do fundo, em passos de 10
Top{0-100}
opacidade apenas do texto, em passos de 10
Lop{0-100}
opacidade apenas da borda, em passos de 10
Gop{0-100}
opacidade apenas do degradê, em passos de 10
Sop{0-100}
opacidade apenas da sombra, em passos de 10

Variantes

Neutras
ardo (slate), cinz, zinc, neut, pedr (stone), mauv, oliv, mist e taup
Quentes
verm, lara, amba, amar, rosa e rose
Verdes e aquáticas
lima, verd, esme, teal, cian e ceu
Frias
azul, indi, viol, roxo e fuch
Especiais
Bpret, Bbran, Btrans e equivalentes T/L

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

  • Carregar swcore-colors.min.css depois de swcore.min.css.
  • Não precisa de JavaScript para aplicar cores ou transparências.

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

  • A paleta é opcional e não altera as cores semânticas do tema principal.
  • O color-mix() usado na transparência exige navegadores modernos.
← AnteriorTemas Próximo →Elementos