Motor de cor CSS

O que é

Com o atributo sw-cor, você escolhe uma cor e o SW Core monta o resto sozinho: a cor dos botões, o texto na cor da marca, as bordas, o brilho, o degradê, o link e até um leve tom da marca no fundo e nos cards. Serve uma cor pronta por nome (sw-cor="azul", "pink", "dourado"…) ou qualquer cor por número, de 0 a 360 (--sw-h), que é o que o painel de um cliente guarda no banco. Cada cliente ganha identidade própria sem escrever CSS nenhum.

É só CSS. O número --sw-h é a posição da cor numa roda (0 = vermelho, 120 = verde, 250 = azul, 330 = rosa…). O motor usa um formato de cor moderno (oklch) que separa a luz da cor: no tema claro ele só troca a luz, então dia e noite têm a mesma cor, só mais clara ou mais escura, e o texto continua legível em qualquer cor. É opcional: sem sw-cor nada muda no seu site. Vale no <html> (site inteiro) ou num bloco (só aquele pedaço). As cores de aviso (sucesso, erro, alerta, info) ficam fixas de propósito: verde é sempre "deu certo".

Quando usar

• Site de cliente com a cor dele: <html sw-cor="pink"> e pronto.
• Sistema com vários clientes (SWSIS, AcheMe): o painel salva um número (0–360) e a página aplica no <html>.
• Uma seção de outra cor (área "Infantil" laranja num site azul): <section sw-cor="laranja">.
• Pré-visualizar a cor antes de salvar, no painel: troque o atributo ou o número por JavaScript.
• Marca mais sóbria ou mais viva sem trocar a cor: sw-cor-intensidade.

Comece aqui

1. 1

   Coloque o SW Core no <head>. O motor de cor já vem dentro (versão 2.1.0 ou mais nova).

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

2. 2

   Coloque sw-cor com o nome da cor no <html>. O site inteiro muda. (O quadro mostra o mesmo atributo num bloco.)

   Agendar agoraVer serviçosNovo

   <html lang="pt-BR" sw-cor="azul">

3. 3

   Quer um tom exato? Ligue o motor com sw-cor sem nome e diga o número da cor no seu CSS.

   <html lang="pt-BR" sw-cor>
   
   <style>
     html[sw-cor] { --sw-h: 330; }   /* 0 a 360 — aqui, um rosa */
   </style>

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.

<!-- o painel salvou um número de 0 a 360 em $cliente['cor'] -->
<html lang="pt-BR" sw-cor>
<head>
  <link rel="stylesheet" href="swcore/swcore.min.css">
  <style>html[sw-cor] { --sw-h: <?= (int) $cliente['cor'] ?>; }</style>
</head>

<section sw-cor="laranja">
  <span class="t-pp t-upp ls-ww t-pri fw6">Área kids</span>
  <strong class="t-txt t-gg">Festa infantil completa</strong>
  <p>Buffet, decoração e monitores. Tudo num lugar só.</p>
  <button sw-btn="pri">Pedir orçamento</button>
</section>

<!-- cada botão fica dentro de um <span sw-cor> para aparecer na própria cor -->
<span sw-cor="vermelho" class="p-pp r-p"><button sw-btn="pri p" data-cor="vermelho">Vermelho</button></span>
<span sw-cor="dourado" class="p-pp r-p"><button sw-btn="pri p" data-cor="dourado">Dourado</button></span>
<span sw-cor="azul" class="p-pp r-p"><button sw-btn="pri p" data-cor="azul">Azul</button></span>
<!-- … -->

<div id="previa" sw-cor="esmeralda" class="p-m r-m bd">
  Prévia do site do cliente <button sw-btn="pri">Agendar</button>
</div>

<script>
  const previa = document.getElementById('previa');
  document.querySelectorAll('[data-cor]').forEach((b) => {
    b.addEventListener('click', () => previa.setAttribute('sw-cor', b.dataset.cor));
  });
  // com número livre: previa.style.setProperty('--sw-h', 330);
</script>

<div class="l l-3 gap-m">
  <div sw-cor="lima" class="p-m r-m bd"><strong class="t-pri">Hortifruti</strong><p>Entrega no mesmo dia.</p></div>
  <div sw-cor="magenta" class="p-m r-m bd"><strong class="t-pri">Beleza</strong><p>Salões perto de você.</p></div>
  <div sw-cor="ciano" class="p-m r-m bd"><strong class="t-pri">Pets</strong><p>Banho e tosa.</p></div>
</div>

API (JavaScript)

Precisa de quê

• swcore.min.css 2.1.0 ou mais novo.
• swcore.min.js — só para o botão de trocar tema (SW.Day) e para os exemplos com JavaScript.

Cuidados — erros comuns

• Sem sw-cor o --sw-h não faz nada: o número só vale com o motor ligado (<html sw-cor>).
• Escreva o nome sem acento: ambar, petroleo, medio, sobrio. Com acento o SW Core não reconhece.
• Para dar a cor pelo seu CSS, use html[sw-cor] { --sw-h: … } (ou .sua-classe[sw-cor] num bloco). Só :root { --sw-h: … } perde para o padrão do motor.
• Um bloco com sw-cor ganha fundo próprio (o fundo da marca). Se não quiser o fundo, aplique o motor no <html> em vez do bloco.
• Colocar sw-cor direto num botão dá ao botão também o fundo e a cor de letra de "bloco". Para mostrar um botão numa cor, envolva-o: <span sw-cor="azul"><button sw-btn="pri">…</button></span>.
• Não misture com --sw-pri trocado na mão: com o motor ligado, quem manda na cor principal é o --sw-h.

O que ele não faz

• A cor secundária (--sw-sec) e as de aviso (sucesso, erro, alerta, info) não seguem a cor — de propósito.
• Num bloco interno, mudam cor, fundo, card, borda, texto e link; os grupos tonais antigos (sw-bg--, sw-bl*, Tsw-color*, sw-border*) continuam seguindo a cor do <html>.