Motor de cor CSS
Um número vira a marca inteira — e a noite muda só a luz, nunca a cor. Novo na 2.1.0.
O que é
Com o atributo sw-cor, uma única matiz (--sw-h, de 0 a 360) gera a cor principal, o texto com contraste, a borda, o brilho, o degradê, o link e um leve tom da marca no fundo, nas superfícies e nas bordas. Serve uma cor pronta por nome (sw-cor="azul", "pink", "esmeralda"…) ou qualquer cor salva no banco (style="--sw-h:330"). Cada cliente do SWSIS/AcheMe ganha identidade própria com um número, sem CSS novo.
Como funciona
Tudo em oklch(): a luminosidade (L) é separada da cor (C = intensidade, H = matiz). Os tokens são escritos uma vez só como oklch(var(--_l-*) var(--sw-c) var(--sw-h)); o tema claro (html[sw-theme="light"], o mesmo do SW.Day) redefine só os números de luminosidade. Por isso dia e noite têm a mesma cor, só mais clara ou mais escura, e o contraste fica igual em qualquer matiz. Os nomes são os de sempre (--sw-pri, --sw-pri-txt, --sw-bg, --sw-sur, --sw-link…), então todo componente segue sozinho. É opcional: sem sw-cor nada muda. As cores de estado (sucesso, erro, alerta, info) ficam fixas de propósito.
Exemplos
Agende seu horário
Fundo, card, borda, texto e link tingidos pela marca. Ver serviços
<!-- site inteiro com uma cor pronta -->
<html sw-cor="pink">
<!-- qualquer cor: o número vem do banco (painel do cliente) -->
<html sw-cor style="--sw-h:<?= (int)$cliente['cor'] ?>">
<!-- só um pedaço da página com outra cor -->
<section sw-cor="laranja">...</section>
<!-- trocar ao vivo (pré-visualização) -->
<script>document.documentElement.style.setProperty('--sw-h', 330)</script><!-- página inteira: nada a fazer, o botão de tema de sempre ([sw-day] / SW.Day.toggle())
troca só os números de luminosidade; a matiz fica a mesma -->
<html sw-cor="pink" sw-theme="light">
<!-- um bloco claro dentro de página escura (ou o contrário) -->
<section sw-theme="light" sw-cor="pink">...</section>Fundo: quanto a marca tinge fundo, cards, bordas e texto secundário.
Intensidade: quão viva é a cor da marca.
<html sw-cor="azul" sw-cor-fundo="forte"> <!-- fundo bem tingido -->
<html sw-cor="azul" sw-cor-fundo="neutro"> <!-- fundo cinza -->
<html sw-cor="marinho" sw-cor-intensidade="sobrio"> <!-- cor discreta -->
<html sw-cor="laranja" sw-cor-intensidade="vivo"> <!-- cor forte -->
<!-- ajuste fino, se precisar -->
<html sw-cor style="--sw-h:250; --sw-c:.12; --sw-tint:.05">Atributos
sw-cor (no <html> ou em qualquer bloco)sw-cor="vermelho|laranja|ambar|bronze|dourado|lima|esmeralda|petroleo|ciano|azul|marinho|lavanda|roxo|magenta|nude|pink|grafite"style="--sw-h:0–360"style="--sw-c:.05–.22"sw-cor-fundo="neutro|leve|medio|forte"sw-cor-intensidade="sobrio|normal|vivo"style="--sw-tint:0–.06"Variantes
Nenhum.
Eventos
Nenhum.
API (JavaScript)
SW.Day.set("light"\|"dark") / SW.Day.toggle()el.style.setProperty("--sw-h", 330)Requisitos
- swcore.min.css 2.1.0 ou mais novo
Limitações — o que ele não faz
- Num bloco interno (
<section sw-cor>) mudam cor, fundo, superfície, borda, texto e link; os grupos tonais antigos (--sw-bg-,--sw-bl*,--sw-color*) seguem a cor do <html>. - A cor secundária (
--sw-sec) e as de estado não seguem a matiz — de propósito.
