Paleta estendida CSS

O que é

É uma cartela de cores pronta, como a de uma loja de tintas: 30 cores (azul, verde, laranja, rosa, cinzas…) e cada uma em 16 tons, do mais clarinho (1) ao mais escuro (16). Você pinta com classes curtas: B + cor + tom é fundo (Bazul7), T + cor + tom é texto (Tazul9), L + cor é borda (Lazul). Diferente das Cores semânticas (que mudam com a marca e com o tema), aqui cada classe é sempre o mesmo tom: azul 7 é azul 7 em qualquer site.

É só CSS e vem no pacote complementar (swcore.compl.min.css), não no principal — são quase 500 combinações, pesado demais para toda página. O fundo (B…) já coloca o texto em escuro nos tons 1–7 e em claro nos tons 8–16. O texto (T…1–12) fica claro no tema escuro e escurece sozinho no tema claro para continuar legível. Cada tom também existe como variável para o seu CSS: var(--sw-azul7).

Quando usar

• Cor de categoria (Hortifruti verde, Bebidas azul, Padaria laranja) que não é a da marca.
• Gráficos e legendas: várias cores diferentes e fixas lado a lado.
• Etiquetas coloridas num painel (cada status/setor com um tom).
• Título com degradê de destaque: TazulD.
• Faixa decorativa com textura ou degradê por cima: Broxo9 DG4.

Comece aqui

1. 1

   Coloque o SW Core e o pacote complementar no <head>. A paleta está no complementar.

   <link rel="stylesheet" href="swcore/swcore.min.css">
   <link rel="stylesheet" href="swcore/swcore.compl.min.css">

2. 2

   Escolha a cor e o tom: B para fundo, T para texto, L para borda.

   Fundo verde 9Texto azul 9Borda roxa

   <span class="Bverd9">Fundo verde 9</span>
   <span class="Tazul9">Texto azul 9</span>
   <span class="bd-2 Lroxo">Borda roxa</span>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<span class="Bverd3 px-p py-pp r-p t-p">Hortifruti</span>
<span class="Bazul3 px-p py-pp r-p t-p">Bebidas</span>
<span class="Blara3 px-p py-pp r-p t-p">Padaria</span>
<span class="Bfuch3 px-p py-pp r-p t-p">Higiene</span>
<span class="Bamar3 px-p py-pp r-p t-p">Mercearia</span>

<p class="TroxoD t-h2 fw7 t-ct">Black Friday</p>

<div class="Broxo10 DG18 p-g r-m flx j-sb alc gap-m f-wr">
  <strong>Semana do cliente: 15% em tudo</strong>
  <a href="/ofertas" sw-btn="lit p">Ver ofertas</a>
</div>

<span class="flx alc gap-p"><span class="Bazul8 p-p r-p"></span>Site</span>
<span class="flx alc gap-p"><span class="Bverd8 p-p r-p"></span>WhatsApp</span>
<span class="flx alc gap-p"><span class="Blara8 p-p r-p"></span>Instagram</span>
<span class="flx alc gap-p"><span class="Bcinz8 p-p r-p"></span>Outros</span>

<style>
  .barra-meta {
    background: var(--sw-cinz3);
    border-left: 4px solid var(--sw-verd9);
  }
</style>

Precisa de quê

• swcore.min.css + swcore.compl.min.css — a paleta está no pacote complementar.

Cuidados — erros comuns

• Sem o swcore.compl.min.css nenhuma classe B…/T…/L…/DG… funciona.
• Texto vai só até o tom 12: Tazul13…Tazul16 não existem. Fundo vai até 16.
• Borda não tem número: é Lazul, não Lazul7. E precisa de largura (bd-2 Lazul).
• Letra maiúscula importa: Bazul7 funciona, bazul7 não.
• Estas cores não mudam com a marca nem com o tema (menos a família prin, que segue a cor principal, e o texto T…, que escurece no claro). Para cor com significado (sucesso, erro…), use bg-suc/t-err.
• As camadas DG… são transparentes: sozinhas não aparecem. Sempre junto de um fundo (Bazul7 DG4).

O que ele não faz

• Os nomes são abreviações fixas de 4 letras (menos ceu); não existe Bazulclaro nem cor inventada.