# Sistema de design Skeleton ## Skeleton Prévia da interface do sistema de design Altere o tema e a aparência sem perder o estado de leitura salvo; consulte os valores resolvidos. ## Skeleton Referência de design do sistema de design Arquivos de tema Skeleton 5.0.1 fixados em versão, comportamento compilado dos utilitários CSS e escolhas explícitas de composição original. ### Valores do tema Cerberus | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --spacing | 0.25rem | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --radius-base | 0.5rem | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --typo-base--font-family | system-ui | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --typo-heading--font-weight | bold | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-primary-100 | oklch(0.84 0.08 254.62) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-primary-300 | oklch(0.7 0.15 254.36) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-primary-500 | oklch(0.57 0.21 258.29) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-primary-700 | oklch(0.46 0.17 257.78) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-primary-900 | oklch(0.34 0.11 257.14) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-surface-50 | oklch(0.99 0 0) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-surface-950 | oklch(0.18 0 0) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | ### Valores do tema Mint | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --spacing | 0.25rem | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --radius-base | 0.375rem | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --typo-base--font-family | system-ui, sans-serif | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --typo-heading--font-weight | normal | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-primary-100 | oklch(89.8% 0.08 156.34deg) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-primary-300 | oklch(86.28% 0.13 151.76deg) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-primary-500 | oklch(83.57% 0.18 148.98deg) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-primary-700 | oklch(71.28% 0.15 148.61deg) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-primary-900 | oklch(58.17% 0.13 148.16deg) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-surface-50 | oklch(89.13% 0.03 155.27deg) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-surface-950 | oklch(21.88% 0.02 186.33deg) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | ### Valores do tema Rose | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --spacing | 0.25rem | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --radius-base | 0.375rem | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --typo-base--font-family | Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --typo-heading--font-weight | normal | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-primary-100 | oklch(92.93% 0.03 340.64deg) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-primary-300 | oklch(81.16% 0.08 345.32deg) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-primary-500 | oklch(69.89% 0.13 348.12deg) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-primary-700 | oklch(57.25% 0.1 346.44deg) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-primary-900 | oklch(43.55% 0.07 343deg) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-surface-50 | oklch(96.76% 0.01 318.08deg) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | | --color-surface-950 | oklch(25.82% 0.01 304.87deg) | Declaração real do tema. Esses valores mudam em conjunto quando data-theme seleciona o tema importado; o estado de leitura original permanece inalterado. | ### CSS integração e combinações semânticas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Foundation import | @import "@skeletonlabs/skeleton" | Carregue após o Tailwind para que as definições dos utilitários sejam compiladas. | | Theme selection | data-theme="cerberus" / "mint" / "rose" | Somente os temas importados podem fornecer suas variáveis. | | Class-based appearance | @custom-variant dark (&:where(.dark, .dark *)) | Faz com que o botão de aparência original afete a variante escura compilada. | | Surface pairings | light-dark(light value, dark value) | As regras globais de Skeleton definem o esquema de cores; mudar apenas uma classe, sem uma variante correspondente, não é suficiente. | | Filled action | btn preset-filled-primary-500 | Combina a geometria de um botão nativo com uma predefinição compatível com o tema. | | Supporting action | btn preset-tonal-primary | Usa uma combinação tonal adequada à aparência atual. | | Disclosure | details.disclosure > summary | Estado aberto nativo do navegador com Skeleton CSS; não há inicialização de componente Svelte. | ## Guia completo do sistema de design Skeleton Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## 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 As amostras da paleta usam --radius-base, então o formato dos cantos muda com o tema selecionado. A referência completa também expõe --spacing. O layout externo de duas colunas usa um intervalo de 24px e passa a ter uma coluna abaixo de 720px; essas são decisões originais de composição. Um tema não define a arquitetura da informação nem obriga todas as páginas a usar a mesma grade. ## 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 Um produto que exija um componente Svelte de Skeleton ou um componente React deve usar o pacote de framework correspondente e seguir as instruções de configuração documentadas. Este exemplo baseado em CSS continua sendo útil para entender os temas compartilhados e a camada de utilitários, mas não afirma oferecer o mesmo API desses componentes. Mantenha essa distinção ao adaptar o guia fornecido para um agente de IA. ## Exemplos de componentes do sistema de design Skeleton ### index.html Conteúdo completo de leitura, componentes nativos de CSS e controles originais. ``` Theme reading desk

SKELETON / THEME READING DESK

The same content, three themes.

Inspect actual Skeleton 5.0.1 palettes, surface pairings and native CSS components while keeping a complete reading card in view.

Original OpenDesign study
Reading / 4 minutes

Make the next step easier to see

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.

  • Keep the heading clear in both appearances.
  • Use a supporting surface to group related information.
  • Repeat an important state in text, not color alone.

This reading card is not saved.

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.

``` Referência de código - Mantenha os quatro arquivos de origem no mesmo diretório do projeto. ### style.css Importações de temas, variante escura baseada em classe e composição responsiva. ``` @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} ``` Referência de código - Mantenha os quatro arquivos de origem no mesmo diretório do projeto. ### main.js Inspeção de tokens calculados e estados independentes de leitura e apresentação. ``` 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(); ``` Referência de código - Mantenha os quatro arquivos de origem no mesmo diretório do projeto. ### vite.config.mjs Integração real com o compilador do Tailwind. ``` import{defineConfig}from'vite';import tailwindcss from'@tailwindcss/vite';export default defineConfig({plugins:[tailwindcss()],base:'./',build:{cssCodeSplit:false}}); ``` Referência de código - Mantenha os quatro arquivos de origem no mesmo diretório do projeto. ## Configuração para agentes de IA do sistema de design Skeleton ### Ponto de partida para implementação Salve primeiro os quatro arquivos fornecidos. Esta é a camada de utilitários CSS e não requer runtime de Svelte nem de React. ``` npm init -y npm install @skeletonlabs/skeleton@5.0.1 npm install --save-dev tailwindcss@4.3.3 @tailwindcss/vite@4.3.3 vite@8.3.2 npx vite --host 127.0.0.1 ``` ### Um prompt para seu projeto ``` Implemente a mesa de leitura completa de Skeleton 5.0.1 usando os utilitários CSS reais e as importações dos temas Cerberus/Mint/Rose. Preserve o color-scheme escuro baseado em classe, as linhas legíveis dos tokens calculados, o conteúdo completo, o estado salvo local e a redefinição da apresentação sem excluir esse estado. Mantenha a camada CSS separada das APIs de componentes de framework. ``` ## Fontes e escopo do sistema de design Skeleton Utilitários reais CSS do Tailwind de Skeleton e temas incluídos no pacote, com comportamento original da página em JavaScript puro. Nenhum runtime Svelte de Skeleton nem runtime de React é carregado. - Instalação CSS e escolhas de integração com frameworks. - Temas Composição e seleção de temas. - Cores Combinações de paleta e contraste. - Aparência escura Comportamento de color-scheme e das variantes. - Elementos expansíveis Camada CSS nativa de details/summary. ## Recursos relacionados ao sistema de design Skeleton ### Tabler Um diário de projeto nativo do Tabler com variáveis reais do tema 1.6, cartões de linha do tempo, contexto de datagrid, validação em janela modal e uma composição clara/escura que aceita marcos locais. ### Tamagui Explore as categorias reais de tokens da v5 e os temas azuis claro e escuro do Tamagui em um painel completo de hábitos com componentes nativos, validação, progresso e recuperação para estados vazios. ### UIkit UIkit combina uma estrutura de CSS, personalização com Less e componentes JavaScript orientados por atributos. No planejador de oficina abaixo, Switcher, Accordion e a grade responsiva funcionam em conjunto, ilustrando onde termina o comportamento nativo dos componentes e começa o estado de seleção da aplicação. - [Referência de implementação](https://www.skeleton.dev/docs/svelte/design/themes) - [Fonte](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/cerberus.css) - [Fonte](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/mint.css) - [Fonte](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/rose.css) - [Fonte](https://www.skeleton.dev/docs/svelte/get-started/fundamentals) - [Referência de código](https://www.skeleton.dev/docs/svelte/get-started/installation) - [Instalação CSS e escolhas de integração com frameworks.](https://www.skeleton.dev/docs/svelte/get-started/installation) - [Temas Composição e seleção de temas.](https://www.skeleton.dev/docs/svelte/design/themes) - [Cores Combinações de paleta e contraste.](https://www.skeleton.dev/docs/svelte/design/colors) - [Aparência escura Comportamento de color-scheme e das variantes.](https://www.skeleton.dev/docs/svelte/guides/mode) - [Elementos expansíveis Camada CSS nativa de details/summary.](https://www.skeleton.dev/docs/svelte/tailwind-components/disclosures)