Tema e tokens no SWCore — documentação e exemplos

O que é

Todo componente do SWCore (botão, card, menu, formulário…) busca a cor, o espaçamento, o tamanho da fonte e a sombra num lugar só: uma lista de variáveis (a documentação chama de tokens). Uma variável é um nome com valor, tipo --sw-pri = "verde-esmeralda". Se você trocar o valor de --sw-pri para o azul da sua marca, todos os botões, links, destaques e barras de rolagem ficam azuis juntos — sem mexer em nenhum arquivo do SWCore.

As variáveis ficam no swcore.min.css. Você as troca no seu CSS, carregado depois do SWCore, dentro de :root { }. O tema padrão é escuro; o claro é ligado pelo atributo sw-theme="light" no <html>, e aí as variáveis de fundo, texto, borda e sombra trocam de valor sozinhas. O botão de trocar tema e a memória da escolha são da página Tema dia/noite; gerar a marca inteira a partir de um número é a página Motor de cor.

Quando usar

Colocar a cor da marca do cliente no site todo: troque --sw-pri (e, se quiser, --sw-sec).
Trocar a fonte do site: troque --sw-f-san (texto) e --sw-f-hd (títulos).
Deixar tudo maior ou menor (público mais velho, painel denso): troque só --sw-type-scale.
Escrever o CSS da sua página sem inventar cor solta: use var(--sw-sur), var(--sw-bor), var(--sw-s-m)… e ele já funciona no claro e no escuro.
Começar o site no tema claro: <html sw-theme="light">.

Comece aqui

1
Coloque o SWCore no <head>. As variáveis já vêm dentro dele — não precisa de mais nada para usar.
```
<link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
```

2

Logo depois, no seu CSS, troque o valor das variáveis que quiser. Aqui: a cor principal e a secundária da marca.

<link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
<style>
  :root {
    --sw-pri: #2563eb;   /* azul da marca */
    --sw-sec: #f97316;   /* laranja de apoio */
  }
</style>

3
Pronto: tudo que usa a cor principal segue a troca. O quadro abaixo tem a troca aplicada só nele, para você ver o efeito.

Link na cor da marca
```
<button sw-btn="pri">Quero meu site</button>
<button sw-btn="sec out">Ver planos</button>
<span class="t-pri">Link na cor da marca</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.

1. Cores da marca e de aviso

Oito variáveis de cor com nome de função. Cada quadro pinta um bloco com a classe pronta que lê aquela variável. pri e sec são as da marca (troque à vontade); suc, err, ale e inf são de aviso (verde = deu certo, vermelho = erro…), melhor deixar como estão.

Principal

--sw-pri — cor principal da marca <div class="bg-pri p-m r-p t-p w-fl t-ct">Principal</div>

Secundária

--sw-sec — cor secundária <div class="bg-sec p-m r-p t-p w-fl t-ct">Secundária</div>

Acento

--sw-acc — acento neutro (aço) <div class="bg-acc p-m r-p t-p w-fl t-ct">Acento</div>

Pedido enviado

--sw-suc — sucesso (verde) <div class="bg-suc p-m r-p t-p w-fl t-ct">Pedido enviado</div>

Pagamento recusado

--sw-err — erro / perigo (vermelho) <div class="bg-err p-m r-p t-p w-fl t-ct">Pagamento recusado</div>

Faltam 2 dias

--sw-ale — alerta (amarelo) <div class="bg-ale p-m r-p t-p w-fl t-ct">Faltam 2 dias</div>

Novidade

--sw-inf — informação (azul-claro) <div class="bg-inf p-m r-p t-p w-fl t-ct">Novidade</div>

2. Fundo, superfície, borda e texto

Estas mudam de valor sozinhas quando o tema troca de escuro para claro. Clique no botão de tema da página e veja os quadros acompanharem.

Fundo da página

--sw-bg — fundo da página <div class="bg-base bd p-m r-p t-p w-fl">Fundo da página</div>

Card

--sw-sur — superfície (card, painel) <div class="bg-sur bd p-m r-p t-p w-fl">Card</div>

Card com mouse em cima

--sw-sur-hover — superfície ao passar o mouse <div class="bg-sur-h bd p-m r-p t-p w-fl">Card com mouse em cima</div>

Borda padrão

--sw-bor — borda padrão <div class="bd-2 bd-mut p-m r-p t-p w-fl">Borda padrão</div>

Título do card

--sw-txt — texto forte (títulos) <span class="t-txt t-g">Título do card</span>

Texto corrido, mais suave

--sw-txt-mut — texto normal (parágrafos) <span class="t-mut t-p">Texto corrido, mais suave</span>

3. Variante de texto de cada cor

Cada cor tem uma versão para texto (--sw-pri-txt, --sw-suc-txt…). No tema claro ela fica mais escura sozinha, para a letra continuar fácil de ler. As classes t-pri, t-suc… já usam essa versão.

Ver serviços

--sw-pri-txt <span class="t-pri t-g">Ver serviços</span>

Planos

--sw-sec-txt <span class="t-sec t-g">Planos</span>

Pago

--sw-suc-txt <span class="t-suc t-g">Pago</span>

Vencido

--sw-err-txt <span class="t-err t-g">Vencido</span>

Pendente

--sw-ale-txt <span class="t-ale t-g">Pendente</span>

Em análise

--sw-inf-txt <span class="t-inf t-g">Em análise</span>

4. Tamanho, cantos, espaço e sombra

Além de cor, há variáveis para as medidas. Cada uma tem uma página própria com todos os valores: Tipografia, Espaçamento, Bordas, Sombras.

Texto no tamanho base

--sw-f-base — tamanho do texto normal (17 px) <span class="t-m">Texto no tamanho base</span>

Canto padrão

--sw-r-m — canto padrão (8 px) <div class="bg-sur bd r-m p-m t-p">Canto padrão</div>

Espaço médio em volta

--sw-s-m — espaço médio (16 px) <div class="bg-pri-soft p-m r-p t-p">Espaço médio em volta</div>

Sombra média

--sw-sha — sombra média <div class="bg-sur sha r-m p-m t-p">Sombra média</div>

Tabela de opções

Palavra	O que faz	Exemplo
Cores da marca
`--sw-pri`	Cor principal. Padrão: verde-esmeralda. Botões `pri`, links, destaques, barra de rolagem.	`:root { --sw-pri: #2563eb; }`
`--sw-pri-txt`	Versão da principal para texto (mais escura no tema claro).	`color: var(--sw-pri-txt);`
`--sw-pri-glow`	Brilho translúcido da principal (sombra colorida).
`--sw-pri-bd`	Principal escurecida para contorno fino.
`--sw-sec / --sw-sec-txt`	Cor secundária (padrão: violeta) e a versão de texto.	`:root { --sw-sec: #f97316; }`
`--sw-acc / --sw-acc-txt`	Acento neutro (cinza-aço) e a versão de texto.
`--sw-grad-pri … --sw-grad-inf`	Degradê pronto de cada cor (é o fundo dos botões). Se trocar a cor e quiser o degradê igual, troque também este.
Cores de aviso
`--sw-suc / --sw-suc-txt`	Sucesso — verde.
`--sw-err / --sw-err-txt`	Erro / perigo — vermelho.
`--sw-ale / --sw-ale-txt`	Alerta — âmbar.
`--sw-inf / --sw-inf-txt`	Informação — azul-claro.
Fundo e texto (mudam com o tema)
`--sw-bg`	Fundo da página.	`background: var(--sw-bg);`
`--sw-sur`	Superfície elevada: card, painel, menu.	`background: var(--sw-sur);`
`--sw-sur-hover`	Superfície com o mouse em cima.
`--sw-bor`	Borda padrão.	`border: 1px solid var(--sw-bor);`
`--sw-txt`	Texto forte (títulos).
`--sw-txt-mut`	Texto normal/suave — é a cor padrão do corpo do site.
`--sw-txt-inv`	Texto invertido, para usar sobre fundo da cor oposta ao tema.
`--sw-gls-bg / --sw-gls-bor`	Fundo e borda do efeito vidro.
`--sw-link`	Cor de link dos grupos tonais.
Fonte e tamanho do texto
`--sw-f-san`	Fonte do texto. Padrão: Geist.	`:root { --sw-f-san: "Inter", sans-serif; }`
`--sw-f-hd`	Fonte dos títulos h1–h6. Padrão: Geist.
`--sw-f-mon`	Fonte de código/números. Padrão: Geist Mono.
`--sw-f-base`	Tamanho do texto normal. Padrão: 1.7rem (17 px).
`--sw-type-scale`	Controle único de tamanho: 1 = normal. 1.1 deixa tudo 10% maior (texto, títulos e espaços).	`:root { --sw-type-scale: 1.1; }`
`--sw-f-h1 … --sw-f-h6`	Tamanho de cada título (cresce do celular ao PC sozinho).
Medidas
`--sw-s-pp … --sw-s-xxg`	Espaços: 4 · 8 · 16 · 24 · 48 · 80 · 120 px.	`padding: var(--sw-s-m);`
`--sw-r-p … --sw-r-fl · --sw-r`	Cantos: 4 · 8 · 12 · 18 · 24 px e cápsula. `--sw-r` = canto padrão (8 px).	`border-radius: var(--sw-r);`
`--sw-sha-p · --sw-sha · --sw-sha-g · --sw-sha-gg`	Sombras: pequena, média, grande, muito grande.	`box-shadow: var(--sw-sha);`
`--sw-z-bot · --sw-z-bas · --sw-z-nvb · --sw-z-m`	Camadas (quem fica por cima): -1 · 0 · 100 (menu) · 10000 (janela).
Tema (atributos no <html>)
`(sem atributo)`	Tema escuro — é o padrão.	`<html>`
`sw-theme="light"`	Tema claro.	`<html sw-theme="light">`
`sw-theme="dark"`	Tema escuro, escrito explicitamente.	`<html sw-theme="dark">`
`sw-theme num bloco`	Tema só naquele pedaço: faixa clara numa página escura, rodapé escuro numa página clara.	`<section sw-theme="light">`
`sw-day-default`	Tema da primeira visita (depois vale a escolha do visitante). Precisa do JS.	`<html sw-day-default="light">`
`sw-day-lock`	Trava um tema; o visitante não troca. Precisa do JS.	`<html sw-day-lock="dark">`

Receitas prontas — usos reais

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

Usar as variáveis no CSS da sua página Ao vivo

Corte + barba

Terça a sábado, com hora marcada.

<div class="servico">
  <strong>Corte + barba</strong>
  <p>Terça a sábado, com hora marcada.</p>
</div>

<style>
  .servico {
    background: var(--sw-sur);           /* cor de card, acompanha o tema */
    border: 1px solid var(--sw-bor);
    border-radius: var(--sw-r-m);
    padding: var(--sw-s-g);
    box-shadow: var(--sw-sha-p);
  }
</style>

Trocar a fonte do site inteiro Referência

<link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300..800&display=swap">
<style>
  :root {
    --sw-f-san: "Inter", system-ui, sans-serif;   /* texto */
    --sw-f-hd:  "Inter", system-ui, sans-serif;   /* títulos */
  }
</style>

Letra maior para o site todo (um controle só) Referência

<style>
  :root { --sw-type-scale: 1.1; }   /* 10% maior: texto, títulos e espaços juntos */
</style>

Site que começa no tema claro Referência

<!doctype html>
<html lang="pt-BR" sw-theme="light">
  ...
</html>

Botão para trocar claro/escuro Ao vivo

<button sw-btn="ghost" onclick="SW.Day.toggle()"><i class="swi-moon"></i> Trocar tema</button>

<!-- precisa do swcore.min.js no fim do <body>.
     Botão pronto com ícone que troca sozinho: veja a página "Tema dia/noite" (sw-day). -->

Eventos

sw:theme:change

Dispara no document quando o tema muda. Traz { theme: "light" | "dark" } em event.detail.

API (JavaScript)

SW.Day.set("light" | "dark")

Troca o tema e guarda a escolha.

SW.Day.toggle()

Alterna entre claro e escuro.

SW.Day.theme

Diz o tema atual ("light" ou "dark").

Precisa de quê

swcore.min.css — todas as variáveis e o tema claro/escuro.
swcore.min.js — só para trocar o tema por botão/código (SW.Day) e lembrar a escolha.

Cuidados — erros comuns

Seu CSS com as variáveis novas tem que vir depois do swcore.min.css. Antes, o SWCore passa por cima.
Trocar --sw-pri não muda o degradê dos botões cheios: ele vem de --sw-grad-pri. Troque os dois, ou use sw-btn="pri flat" (cor chapada), ou use o Motor de cor, que gera tudo junto.
sw-theme num bloco (<section sw-theme="light">, <footer sw-theme="dark">) troca as cores só ali dentro e pinta o fundo do bloco. Alguns componentes têm um ajuste fino a mais no tema claro que ainda só liga pelo <html> (vidro do botão e do card, bloco de código, cursor): dentro de um bloco eles usam o visual do tema da página.
Não edite os arquivos do SWCore (dist/) para mudar cor: na próxima atualização você perde tudo. Sempre troque no seu CSS.
Escreva a cor com var(--sw-sur) em vez de um código fixo (#1a2636): o código fixo não muda quando o tema troca.

O que ele não faz

Não gera a paleta sozinho a partir de uma cor: trocando --sw-pri na mão, a versão de texto, o brilho e o degradê continuam os antigos até você trocá-los também. Para gerar tudo de um número só, use o Motor de cor.

Tema e tokens CSS