SWCore / CSS / Paleta estendida

Paleta estendida CSS

30 famílias × 16 tons cada — uma cor ESPECÍFICA que não muda com o tema, pra quando você precisa exatamente daquele tom.

O que é

Camada de cor separada da semântica: cada classe é uma cor fixa (família + tom de 1 a 16), sempre a mesma independente de dia/noite.

Como funciona

Vem no pacote complementar (swcore.compl.min.css), não no núcleo — 30×16 = 480 combinações geram CSS demais pra incluir em toda página.

Exemplos

Onde cada classe entra: fundo, texto, borda Ao vivo

fundo — Bverd9 texto — Tazul9

borda — Lroxo

<!-- fundo: vai no background, classe B + família + tom 1-16 -->
<div class="Bverd9">fundo verde, tom 9</div>

<!-- texto: vai na cor da fonte, classe T + família + tom 1-16 -->
<p class="Tazul11">texto azul, tom 11</p>

<!-- borda: vai no border-color, classe L + família (SEM número — 1 tom só) -->
<div style="border:2px solid" class="Lroxo">borda roxa</div>

<!-- todas são cor ESPECÍFICA: não mudam com o tema dia/noite
     (quem muda sozinho é a cor SEMÂNTICA — --sw-pri etc.) -->
<!-- direto no CSS: background: var(--sw-verd9); color: var(--sw-azul11); border-color: var(--sw-roxo-l, ...) -->

Degradê da própria família — fundo e texto Ao vivo

BazulD BroxoD TazulD TverdD

<!-- B{fam}D: fundo em degradê claro → escuro, DA MESMA família -->
<span class="BazulD">fundo com degradê azul</span>
<span class="BroxoD">fundo com degradê roxo</span>

<!-- T{fam}D: o degradê fica RECORTADO no formato da letra
     (background-clip: text) — bom pra título de destaque -->
<h2 class="TazulD">Título com degradê azul no texto</h2>
<h2 class="TverdD">Título com degradê verde no texto</h2>

.DG1…DG20 — 20 camadas de degradê, sobre qualquer cor Ao vivo

<!-- .DG1–.DG20 são CAMADAS (background-image), entram por cima
     de qualquer .B{fam}{n} — combine cor + direção livremente -->
<div class="Bazul7 DG4">fundo azul 7 + camada DG4</div>
<div class="Bverd9 DG12">fundo verde 9 + camada DG12</div>

<!-- DG1–DG8: linear, uma volta completa de 45 em 45 graus (escuro) -->
<!-- DG9: linear branca (brilho por cima) -->
<!-- DG10–DG12: radial (centro / canto sup-esq / canto inf-dir) -->
<!-- DG13–DG16: linear em faixa (escurece as duas pontas ou diagonal) -->
<!-- DG17: cônica (gira ao redor) -->
<!-- DG18–DG19: listrada, repetindo (textura diagonal) -->
<!-- DG20: escurece só a base (bom pra legenda em cima de imagem/cor) -->

<!-- os atalhos nomeados .grad .grad-diag .grad-spot .grad-glass
     .grad-deep .grad-tone (08-utilities.css) fazem o mesmo, com nome fácil -->

Clique num tom pra copiar o nome da classe Ao vivo

<button type="button" class="Bazul9" data-color-class="Bazul9"><span>9</span></button>
<!-- clique copia "Bazul9" pra área de transferência -->

A paleta inteira — 30 famílias × 16 tons Ao vivo

<!-- gerado ao vivo a partir das variáveis reais --sw-{fam}{1-16} -->

<!-- Marca — as 5 cores do framework como família cheia -->
prin · secu · suce · aler · info

<!-- Espectro — 17 matizes do Tailwind + periwinkle -->
verm · lara · amba · amar · lima · verd · esme · agua · cian
ceu · azul · indi · peri · viol · roxo · fuch · rosa · rose

<!-- Neutras — slate / gray / zinc / neutral / stone -->
arde · cinz · zinc · neut · pedr

<!-- Especiais — escala de luminância própria -->
pret · bran

Atributos

Nenhum.

Variantes

B{fam}{1-16}

fundo (background) — ex.: Bverd9 · aceita qualquer tom de 1 (claro) a 16 (escuro)

T{fam}{1-16}

texto (color) — ex.: Tazul11 · no tema claro, os tons 1–12 escurecem sozinhos pra manter contraste AA

L{fam}

borda/linha (border-color) — ex.: Lverd · SÓ 1 tom médio fixo por família, não tem escala 1–16

B{fam}D

fundo com degradê da própria cor (claro → escuro, mesma família) — ex.: BazulD

T{fam}D

texto com degradê recortado na própria letra (background-clip: text) — ex.: TazulD

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Precisa do pacote swcore.compl.min.css.

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

Nenhuma.

← AnteriorCores semânticas Próximo →Ícones