Como o theme.css funciona, as 8 cores semânticas padrão do SWCore e o personalizador ao vivo.
O src/theme.css é a fonte única de verdade visual do SWCore. Ele combina a velocidade de compilação do Tailwind CSS v4 com o padrão global de Cores Semânticas da Web (primary, secondary, success, warning, error, info) somado a night e light para controle total de superfícies claras e escuras. Ao editar poucas linhas, todos os 67 componentes do ecossistema e todas as classes utilitárias do Tailwind recalculam suas cores, superfícies, bordas e tipografia automaticamente.
O theme.css é estruturado em 4 camadas de responsabilidade: 1. Imports Base (carrega o Tailwind v4, ícones swicons e fontes); 2. Bloco @theme (declara as cores semânticas padrão que viram classes Tailwind como bg-primary, text-success, bg-warning, bg-error, font-sans); 3. Superfícies Semânticas (variáveis --surface, --text, --border que invertem automaticamente no modo claro via html[sw-theme="light"]); 4. Componentes com @apply (regras CSS dos componentes consumindo as variáveis de tema).
/* ==========================================================================
src/theme.css — A ARQUITETURA EM 4 CAMADAS
========================================================================== */
/* ── CAMADA 1: Imports de Motor e Recursos ── */
@import "tailwindcss";
@import "./icons.css";
@import "./fonts.css";
/* ── CAMADA 2: Cores Semânticas Padrão no Tailwind v4 (@theme) ── */
@theme {
--color-primary: #38bdf8; /* Primary: bg-primary, text-primary, border-primary */
--color-secondary: #818cf8; /* Secondary: bg-secondary, text-secondary */
--color-success: #22c55e; /* Success: bg-success, text-success */
--color-warning: #f59e0b; /* Warning: bg-warning, text-warning (alias alert) */
--color-error: #ef4444; /* Error: bg-error, text-error (alias danger) */
--color-info: #0ea5e9; /* Info: bg-info, text-info */
--color-night: #0b0f19; /* Night: superfícies noturnas profundas */
--color-light: #f8fafc; /* Light: superfícies claras iluminadas */
--color-surface: var(--surface); /* gera: bg-surface */
--color-text: var(--text); /* gera: text-text */
--color-border: var(--border); /* gera: border-border */
--font-sans: "Plus Jakarta Sans", "Poppins", system-ui, sans-serif;
--font-mono: "Fira Code", monospace;
}
/* ── CAMADA 3: Superfícies Semânticas Dinâmicas ── */
:root {
--surface: #0d131d; /* Fundo escuro padrão */
--surface-hover: #1a2636; /* Fundo de cards elevados */
--text: #f3efdf; /* Texto com alto contraste */
--text-muted: #9fb2c7; /* Texto secundário */
--border: #3e5771; /* Bordas estruturais */
}
/* Inversão automática ao ativar modo claro: */
html[sw-theme="light"] {
--surface: #e9ebee; /* Fundo claro editorial */
--surface-hover: #f8f9fa; /* Fundo de cards claros */
--text: #1a1d23; /* Texto escuro nítido */
--text-muted: #5b6270; /* Texto secundário escuro */
--border: #d8dce2; /* Bordas claras suaves */
}
/* ── CAMADA 4: Componentes Consumindo os Tokens (@apply) ── */
.sw-modal-box {
@apply relative w-full max-w-md rounded-xl border p-6 shadow-2xl;
background: var(--surface);
border-color: var(--border);
color: var(--text);
}Veja como os botões e cartões respondem instantaneamente aos novos tokens das cores:
Recalculado com --color-primary
Recalculado com --color-secondary
Recalculado com --color-success
Recalculado com --color-warning
Recalculado com --color-error
Recalculado com --color-info
@theme {
--color-primary: #38bdf8;
--color-secondary: #818cf8;
--color-success: #22c55e;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-info: #0ea5e9;
--color-night: #0b0f19;
--color-light: #f8fafc;
--font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}<!-- Teste a personalização em tempo real alterando as cores semânticas padrão e a fonte -->
<div class="bg-surface border border-border p-6 rounded-xl">
<button class="bg-primary text-slate-950 font-bold px-4 py-2 rounded-lg">Primary</button>
<button class="bg-secondary text-white font-bold px-4 py-2 rounded-lg">Secondary</button>
<button class="bg-success text-white font-bold px-4 py-2 rounded-lg">Success</button>
<button class="bg-warning text-slate-950 font-bold px-4 py-2 rounded-lg">Warning</button>
<button class="bg-error text-white font-bold px-4 py-2 rounded-lg">Error</button>
<button class="bg-info text-white font-bold px-4 py-2 rounded-lg">Info</button>
</div>/* ── PASSO 1: Abra o arquivo src/theme.css ── */
/* ── PASSO 2: Edite o bloco @theme com as cores e fontes da sua marca: ── */
@theme {
--color-primary: #10b981; /* Cor principal de botões, links ativos e destaque */
--color-secondary: #06b6d4; /* Cor secundária para badges e efeitos visuais */
--color-success: #16a34a; /* Cor de confirmação */
--color-warning: #f59e0b; /* Cor de atenção e avisos */
--color-error: #dc2626; /* Cor de erro e perigo */
--color-info: #3b82f6; /* Cor de informação */
--color-night: #022c22; /* Fundo escuro profundo */
--color-light: #f0fdf4; /* Superfície clara iluminada */
--font-sans: "Inter", system-ui, sans-serif;
}
/* ── PASSO 3: Execute o build do SWCore no terminal: ── */
/* npm run build (ou: node build.js && node docs/_src/build-docs.js) */
/* ── RESULTADO:
O Tailwind CLI compila o dist/swcore.css minificado.
Todos os componentes (.sw-btn-pri, .sw-modal, .sw-dropdown, .sw-tabs)
e classes (bg-primary, text-primary, bg-warning, bg-error) já adotam as novas cores instantaneamente! */html[sw-theme="light"]<html> — ativa o modo claro (dia), recalculando todas as superfícies e contrastes--color-primary#38bdf8)--color-secondary#818cf8)--color-success#22c55e)--color-warning#f59e0b, com alias --color-alert)--color-error#ef4444, com alias --color-danger)--color-info#0ea5e9)--color-night#0b0f19)--color-light#f8fafc)--surface#0d131d / dia: #e9ebee)--surface-hover#1a2636 / dia: #f8f9fa)--text#f3efdf / dia: #1a1d23)--text-muted#9fb2c7 / dia: #5b6270)--border#3e5771 / dia: #d8dce2)Camada 1: Imports BaseCamada 2: Bloco @theme (Padrão Web)Camada 3: Superfícies SemânticasCamada 4: Classes de Componente (@apply)Laboratório de Customização ao VivoNenhum.
Nenhum.
src/theme.css em dist/swcore.css através de node build.js.tailwind.config.js — toda a configuração e tokens são definidos diretamente no CSS via diretiva @theme.--surface, --text, --border) são ajustadas em :root e html[sw-theme="light"] para garantir suporte impecável aos modos dia e noite.