Sistema de diseño de Skeleton.

Fundamentos y capas del framework del sistema de diseño de Skeleton CSS

Elige la capa que realmente se ejecuta

El escritorio de lectura usa @skeletonlabs/skeleton 5.0.1, sus utilidades de Tailwind CSS y tres temas incluidos. No carga skeleton-svelte ni skeleton-react. Los botones, la insignia, la etiqueta, la tarjeta y la presentación del elemento de apertura usan utilidades auténticas de CSS; el selector de tema y la lógica del estado guardado son originales de JavaScript. Esta separación permite ejecutar el ejemplo completo como una pequeña página de Vite, sin dar a entender que se ejecuta un framework de componentes.

Compila las utilidades en lugar de importar CSS sin procesar en el navegador

El código fuente de Skeleton contiene directivas de Tailwind como @utility y @variant. La configuración de Vite proporcionada incluye @tailwindcss/vite, y la hoja de estilos importa Tailwind antes de Skeleton y de los temas elegidos. Un enlace directo al paquete fuente no reproduciría los estilos compilados. Se incluye el código fuente completo de compilación para que la vista previa no dependa de archivos CSS generados que estén ocultos.

1. Importa Tailwind CSS.
2. Importa las utilidades de Skeleton.
3. Importa cada tema que quieras seleccionar.
4. Compila la hoja de estilos con el complemento de Vite de Tailwind.

Selección de tema y valores reales del sistema de diseño de Skeleton

Importa explícitamente cada tema disponible

Cerberus, Mint y Rose se importan individualmente desde la ruta de temas del paquete. Al seleccionar un nombre, cambia data-theme en la raíz y se seleccionan las declaraciones de variables correspondientes. La referencia muestra muestras reales de la paleta principal, extremos de superficie, espaciado, radio y declaraciones de fuentes para cada tema. Estos valores se leen de los archivos fijados, en lugar de generarse cambiando un único color de acento.

• Cerberus es la presentación inicial.
• Mint y Rose son temas independientes que se importan por separado.
• La selección de tema cambia data-theme, no una copia del árbol de contenido.

Mantén intacto todo el contenido durante la comparación

La tarjeta de lectura, la lista de verificación y el estado guardado permanecen intactos cuando cambia el tema. Después de cada selección, el panel lateral lee las variables calculadas de la raíz y muestra los valores que el navegador resolvió realmente. Esto hace que la comparación sea útil: la tipografía, las formas y la paleta pueden cambiar mientras el lector evalúa el mismo contenido y estado.

Apariencia oscura y esquema de color del sistema de diseño de Skeleton

Vincula la variante oscura al control real

La hoja de estilos define una variante oscura basada en clases que coincide con .dark en la raíz o en sus elementos descendientes. Las reglas globales de Skeleton usan esa variante para establecer color-scheme. Por tanto, el botón de apariencia cambia las condiciones utilizadas por las combinaciones de superficies light-dark(). Un control que cambia una clase, pero deja intacta la variante predeterminada de Tailwind, basada en el modo del sistema, puede indicar «Oscuro» mientras las superficies reales siguen siendo claras.

Usa un ajuste predefinido que conserve la legibilidad

La acción de apariencia usa preset-tonal-primary y la acción de lectura usa preset-filled-primary-500. Los ajustes predefinidos controlan la relación entre la superficie y el primer plano; un token de color por sí solo no garantiza un contraste legible. Se inspeccionó el estado oscuro renderizado real después de cambiar a Rose, incluido el texto del control y el elemento de apertura, en lugar de dar por sentado que un cambio de clase correcto demostraba una presentación visual adecuada.

Tipografía, forma y disposición del sistema de diseño de Skeleton

Separa las declaraciones del tema de la jerarquía original

Cerberus declara una fuente del sistema, mientras que Rose incluye una pila de fuentes alternativas distinta. Este ejemplo no descarga fuentes remotas; el navegador usa las fuentes disponibles en la pila seleccionada. El diseño original asigna explícitamente 36px al encabezado de página y 28px al encabezado de lectura. Estas decisiones de composición son independientes de la familia y el peso tipográfico propios del tema.

Deja que el radio y el espaciado provengan del tema

Skeleton Estado de lectura y restablecimiento de la presentación del sistema de diseño

Mantén el guardado local y reversible

La acción de lectura alterna aria-pressed, cambia su etiqueta y actualiza un mensaje de estado legible. Solo guarda un valor booleano en memoria para esta página. No hay cuenta, persistencia ni solicitud de red. El mismo estado sigue visible al cambiar de tema, lo que permite comparar un estado activo entre distintas paletas.

Restablece la presentación sin borrar el estado de lectura

Restablecer la presentación vuelve a Cerberus y al aspecto claro, pero deja deliberadamente intacto el valor booleano guardado. La etiqueta indica ese alcance. Una acción independiente puede quitar la tarjeta de lectura del espacio local. Combinar estas dos acciones haría que un restablecimiento visual inofensivo descartara inesperadamente la elección actual del usuario.

Skeleton Divulgación nativa y contenido real del sistema de diseño

Usa un elemento details del navegador

La explicación complementaria utiliza una estructura real de details/summary con la utilidad de divulgación. El navegador permite abrirla con el teclado y el puntero, mientras que Skeleton define su presentación. No se trata del componente Accordion de Svelte de Skeleton, y no se inventa ningún componente API ni evento. El párrafo explica concretamente qué cambia y qué permanece fijo.

Inspecciona el estado abierto después de la transición

La hoja de estilos puede animar el tamaño del contenido desplegable. La comprobación visual espera a que termine la transición antes de capturar el estado abierto; una captura inmediata puede mostrar el contenido a medio expandir. La validación del diseño incluye el párrafo abierto y la larga pila de fuentes calculada, para que el panel lateral no se considere correcto solo mientras su contenido sustancial está oculto.

Skeleton Inspección adaptable de temas del sistema de diseño

Mantén los valores legibles en pantallas estrechas

El espacio de trabajo se apila por debajo de 720px y el relleno exterior se reduce a 16px. Cada nombre y valor de token calculado ocupa su propia fila, de modo que las pilas de fuentes largas y las cadenas OKLCH puedan ajustarse sin provocar desplazamiento horizontal. Las cinco muestras de color siguen visibles en una cuadrícula compacta y los controles de tema se distribuyen en varias líneas.

Prueba combinaciones de temas y estados

La prueba del navegador guarda la tarjeta de lectura, cambia entre Mint y Rose, activa el aspecto oscuro, abre el contenido desplegable y luego restablece la presentación. El estado guardado debe mantenerse durante todo el proceso. Esta secuencia se verificó hasta los 280px, por lo que la prueba abarca los valores largos reales y el contenido expandido, en lugar de limitarse a una captura del tema inicial.

Skeleton Código fuente completo de Vite para el sistema de diseño

Guarda los cuatro archivos de código fuente

El ejemplo incluye index.html, style.css, main.js y vite.config.mjs. Instala las dependencias fijadas de Skeleton, Tailwind y Vite, y luego ejecuta Vite en ese directorio. La directiva @source explícita apunta a HTML, que contiene las clases de utilidad, para garantizar que la salida compilada incluya las clases que usa el espacio de lectura. No falta ningún andamiaje de framework.

Elige los componentes del framework por separado cuando sea necesario

Skeleton Ejemplos de componentes del sistema de diseño

<!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}});