Sistema de design Skeleton.

sistema de design Skeleton CSS: fundamentos e camadas de framework

Escolha a camada que realmente está em execução

A mesa de leitura usa @skeletonlabs/skeleton 5.0.1, seus utilitários CSS do Tailwind e três temas incluídos no pacote. Ela não carrega skeleton-svelte nem skeleton-react. Os botões, o selo, o chip, o cartão e a apresentação do elemento expansível usam utilitários CSS reais; o seletor de tema e a lógica do estado salvo são originais de JavaScript. Essa separação permite que o exemplo completo seja executado como uma pequena página Vite, sem sugerir que haja um runtime de componentes de framework.

Compile os utilitários em vez de importar CSS bruto para o navegador

O código-fonte de Skeleton contém diretivas do Tailwind, como @utility e @variant. A configuração do Vite fornecida inclui @tailwindcss/vite, e a folha de estilos importa o Tailwind antes de Skeleton e dos temas escolhidos. Um link direto para o pacote de origem não reproduziria os estilos compilados. O código-fonte completo da compilação está incluído para que a prévia não dependa de CSS gerados que ficam ocultos.

1. Importe CSS do Tailwind.
2. Importe os utilitários de Skeleton.
3. Importe cada tema que quiser selecionar.
4. Compile a folha de estilos com o plugin do Tailwind para Vite.

Seleção de temas e valores reais do sistema de design Skeleton

Importe explicitamente cada tema disponível

Cerberus, Mint e Rose são importados individualmente do caminho de temas do pacote. A seleção de um nome altera data-theme na raiz, que seleciona as declarações de variáveis correspondentes. A referência lista amostras reais da paleta primária, extremos das superfícies, espaçamento, raio e declarações de fontes de cada tema. Esses valores são lidos dos arquivos fixados, e não gerados pela substituição de uma única cor de destaque.

• Cerberus é o tema inicial.
• Mint e Rose são temas distintos, importados separadamente.
• A seleção de tema altera data-theme, não uma cópia da árvore de conteúdo.

Mantenha todo o conteúdo igual durante a comparação

O cartão de leitura, a lista de verificação e o estado salvo permanecem intactos quando o tema muda. Após cada seleção, o painel lateral lê as variáveis calculadas na raiz e mostra os valores efetivamente resolvidos pelo navegador. Assim, a comparação é útil: a tipografia, as formas e a paleta podem mudar enquanto a pessoa lê o mesmo conteúdo e estado.

Aparência escura e color-scheme no sistema de design Skeleton

Vincule a variante escura ao controle real

A folha de estilos define uma variante escura baseada em classe que corresponde a .dark na raiz ou em seus descendentes. As regras globais de Skeleton usam essa variante para definir color-scheme. Por isso, o botão de aparência altera as condições usadas pelas combinações de superfícies light-dark(). Um botão que muda uma classe, mas deixa intacta a variante padrão do Tailwind, baseada em mídia, pode indicar Escuro enquanto as superfícies continuam claras.

Use uma predefinição que mantenha a legibilidade

A ação de aparência usa preset-tonal-primary, e a ação de leitura usa preset-filled-primary-500. As predefinições controlam a relação entre a superfície e o primeiro plano; um token de cor, por si só, não garante contraste legível. Após mudar para Rose, o estado escuro renderizado foi inspecionado de fato, incluindo o texto do controle e o elemento expansível, em vez de presumir que a alteração de classe comprovava a correção visual.

Tipografia, formas e layout no sistema de design Skeleton

Separe as declarações do tema da hierarquia original

Cerberus declara uma fonte do sistema, enquanto Rose inclui uma pilha alternativa diferente. Este estudo não carrega fontes remotas; o navegador usa as fontes disponíveis na pilha selecionada. O layout original define explicitamente um título de página de 36px e um título de leitura de 28px. Essas escolhas de composição são independentes das declarações de família tipográfica e peso do próprio tema.

Use o raio e o espaçamento definidos pelo tema

Estado de leitura e redefinição da apresentação no sistema de design Skeleton

Mantenha o salvamento local e reversível

A ação de leitura alterna aria-pressed, muda o rótulo e atualiza uma mensagem de status legível. Ela salva apenas um valor booleano em memória para esta página. Não há conta, persistência nem solicitação de rede. O mesmo estado permanece visível após a troca de tema, permitindo comparar um estado ativo em diferentes paletas.

Redefina a apresentação sem excluir o estado de leitura

A redefinição da apresentação restaura Cerberus e a aparência clara, mas mantém intencionalmente o valor booleano salvo. O rótulo descreve esse escopo. Uma ação separada pode remover o cartão de leitura da mesa local. Confundir essas duas ações faria uma simples redefinição visual descartar inesperadamente a escolha atual da pessoa.

Elemento expansível nativo e conteúdo real no sistema de design Skeleton

Use um elemento details do navegador

A explicação complementar usa uma estrutura real de details/summary com o utilitário de elemento expansível. O navegador permite abrir com teclado e ponteiro, enquanto Skeleton define a apresentação. Este não é o componente Svelte Accordion de Skeleton, e nenhum API de componente nem evento é inventado. O parágrafo explica concretamente o que muda e o que permanece igual.

Inspecione o estado aberto depois da transição

A folha de estilos pode animar o tamanho do elemento expansível. A verificação visual aguarda o fim da transição antes de capturar o estado aberto; uma captura imediata pode registrar o conteúdo enquanto ainda está se expandindo. A validação do layout inclui o parágrafo aberto e a longa pilha de fontes calculada, para que o painel lateral não seja aprovado apenas quando seu conteúdo substancial está oculto.

Inspeção responsiva de temas no sistema de design Skeleton

Mantenha os valores legíveis em telas estreitas

A bancada passa a ter uma coluna abaixo de 720px, e o preenchimento externo diminui para 16px. Cada nome e valor de token calculado ocupa uma linha própria, permitindo que pilhas de fontes longas e valores OKLCH quebrem linha sem causar rolagem horizontal. As cinco amostras de cor continuam visíveis em uma grade compacta, e os controles de tema passam para linhas adicionais quando necessário.

Teste combinações de tema e estado

O teste no navegador salva o cartão de leitura, alterna entre Mint e Rose, ativa a aparência escura, abre o elemento expansível e, em seguida, redefine a apresentação. O estado salvo precisa permanecer durante todo o processo. Essa sequência foi verificada até 280px de largura, cobrindo valores longos reais e conteúdo expandido, em vez de apenas uma captura da tela inicial de um único tema.

Código-fonte completo do Vite para o sistema de design Skeleton

Salve os quatro arquivos de origem

O exemplo inclui index.html, style.css, main.js e vite.config.mjs. Instale as dependências fixadas de Skeleton, Tailwind e Vite e, em seguida, execute o Vite nesse diretório. A diretiva @source explícita aponta para o HTML que contém as classes utilitárias, garantindo que a saída compilada inclua as classes usadas pela mesa de leitura. Não falta nenhum esqueleto de framework.

Escolha componentes de framework separadamente quando necessário

Exemplos de componentes do sistema de design Skeleton

<!doctype html><html lang="en" data-theme="cerberus"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Theme reading desk</title></head><body><main><header><div><p class="text-sm font-bold">SKELETON / THEME READING DESK</p><h1>The same content, three themes.</h1><p class="intro">Inspect actual Skeleton 5.0.1 palettes, surface pairings and native CSS components while keeping a complete reading card in view.</p></div><span class="badge preset-tonal-primary">Original OpenDesign study</span></header><div class="controls"><label for="theme">Theme<select id="theme" class="select"><option value="cerberus">Cerberus</option><option value="mint">Mint</option><option value="rose">Rose</option></select></label><button id="mode" class="btn preset-tonal-primary">Use dark appearance</button><button id="reset" class="btn preset-tonal-surface">Reset presentation</button></div><div class="workbench"><article class="card preset-outlined-surface-200-800 reading"><span class="chip preset-tonal-primary">Reading / 4 minutes</span><h2 class="mt-6">Make the next step easier to see</h2><p>A useful interface explains the next action without making every detail compete for attention. Start with a complete piece of content, then inspect how its hierarchy survives a change of theme.</p><ul><li>Keep the heading clear in both appearances.</li><li>Use a supporting surface to group related information.</li><li>Repeat an important state in text, not color alone.</li></ul><button id="bookmark" class="btn preset-filled-primary-500 bookmark" aria-pressed="false">Save to this reading desk</button><p id="message" role="status">This reading card is not saved.</p></article><aside class="card preset-tonal-surface side"><h2 class="text-xl font-bold">Current theme values</h2><div class="palette" aria-label="Primary palette samples"><div class="swatch" style="background:var(--color-primary-100)"></div><div class="swatch" style="background:var(--color-primary-300)"></div><div class="swatch" style="background:var(--color-primary-500)"></div><div class="swatch" style="background:var(--color-primary-700)"></div><div class="swatch" style="background:var(--color-primary-900)"></div></div><dl class="tokens" id="tokens"></dl><details class="disclosure mt-6"><summary class="preset-tonal-primary">What changes with the theme?</summary><p>The imported theme changes palette, typography declarations and shape variables. The reading text and local saved state stay the same. Dark appearance changes surface pairings; it is not a second copy of the content.</p></details></aside></div><p class="scope">Uses Skeleton’s actual Tailwind CSS utilities and three shipped themes. The page logic is original plain JavaScript; no Skeleton Svelte or React component runtime is loaded. Saving changes this page only and sends nothing.</p></main><script type="module" src="./main.js"></script></body></html>

@import 'tailwindcss';
@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/themes/cerberus';
@import '@skeletonlabs/skeleton/themes/mint';
@import '@skeletonlabs/skeleton/themes/rose';
@source './index.html';
@custom-variant dark (&:where(.dark, .dark *));
body{margin:0}*{box-sizing:border-box}main{max-width:1080px;margin:auto;padding:32px}header{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}h1{font-size:36px;line-height:1.15;font-weight:700;margin:16px 0}.intro{max-width:66ch;line-height:1.6}.controls{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin:32px 0}.controls label{display:grid;gap:8px}.workbench{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}.reading{padding:32px}.reading h2{font-size:28px;line-height:1.25;font-weight:700}.reading p{line-height:1.7;margin:24px 0}.reading ul{list-style:disc;padding-left:24px}.reading li{margin:12px 0}.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:24px 0}.swatch{height:72px;border-radius:var(--radius-base)}.tokens{display:grid;gap:12px;font-size:13px}.tokens div{display:grid;gap:8px;padding-bottom:12px;border-bottom:1px solid currentColor}.tokens dd{overflow-wrap:anywhere}.side{padding:24px}.disclosure p{padding:16px;line-height:1.6}.scope{font-size:13px;line-height:1.6;margin-top:32px}.bookmark{margin-top:24px}#message{font-size:14px;margin-top:16px}:focus-visible{outline:3px solid var(--color-primary-500);outline-offset:3px}@media(max-width:720px){main{padding:16px}.workbench{grid-template-columns:1fr}.reading{padding:24px}.palette{gap:4px}.swatch{height:56px}}

.workbench>*{min-width:0}.bookmark{max-width:100%;white-space:normal;height:auto;min-height:2rem;text-align:center}.disclosure summary{white-space:normal}

import './style.css';
const root=document.documentElement;let saved=false;function inspect(){const style=getComputedStyle(root);const keys=['--color-primary-500','--radius-base','--spacing','--typo-base--font-family'];document.querySelector('#tokens').replaceChildren(...keys.map(key=>{const row=document.createElement('div'),dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=key;dd.textContent=style.getPropertyValue(key).trim();row.append(dt,dd);return row}));}document.querySelector('#theme').addEventListener('change',e=>{root.dataset.theme=e.target.value;inspect()});document.querySelector('#mode').addEventListener('click',e=>{let dark=root.classList.toggle('dark');e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance';inspect()});document.querySelector('#bookmark').addEventListener('click',e=>{saved=!saved;e.currentTarget.setAttribute('aria-pressed',String(saved));e.currentTarget.textContent=saved?'Remove from this reading desk':'Save to this reading desk';document.querySelector('#message').textContent=saved?'Saved in this preview only.':'This reading card is not saved.'});document.querySelector('#reset').addEventListener('click',()=>{root.dataset.theme='cerberus';root.classList.remove('dark');document.querySelector('#theme').value='cerberus';document.querySelector('#mode').textContent='Use dark appearance';inspect()});inspect();

import{defineConfig}from'vite';import tailwindcss from'@tailwindcss/vite';export default defineConfig({plugins:[tailwindcss()],base:'./',build:{cssCodeSplit:false}});