# Sistema de diseño de Skeleton ## Vista previa de la interfaz del sistema de diseño de Skeleton Cambia el tema y la apariencia sin perder el estado de lectura guardado; inspecciona los valores resultantes. ## Referencia de diseño del sistema de diseño de Skeleton Archivos de tema fijados de Skeleton 5.0.1, comportamiento compilado de utilidades de CSS y decisiones de composición originales explícitas. ### Valores del tema Cerberus | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --spacing | 0.25rem | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --radius-base | 0.5rem | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --typo-base--font-family | system-ui | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --typo-heading--font-weight | bold | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-primary-100 | oklch(0.84 0.08 254.62) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-primary-300 | oklch(0.7 0.15 254.36) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-primary-500 | oklch(0.57 0.21 258.29) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-primary-700 | oklch(0.46 0.17 257.78) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-primary-900 | oklch(0.34 0.11 257.14) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-surface-50 | oklch(0.99 0 0) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-surface-950 | oklch(0.18 0 0) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | ### Valores del tema Mint | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --spacing | 0.25rem | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --radius-base | 0.375rem | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --typo-base--font-family | system-ui, sans-serif | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --typo-heading--font-weight | normal | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-primary-100 | oklch(89.8% 0.08 156.34deg) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-primary-300 | oklch(86.28% 0.13 151.76deg) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-primary-500 | oklch(83.57% 0.18 148.98deg) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-primary-700 | oklch(71.28% 0.15 148.61deg) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-primary-900 | oklch(58.17% 0.13 148.16deg) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-surface-50 | oklch(89.13% 0.03 155.27deg) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-surface-950 | oklch(21.88% 0.02 186.33deg) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | ### Valores del tema Rose | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --spacing | 0.25rem | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --radius-base | 0.375rem | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --typo-base--font-family | Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --typo-heading--font-weight | normal | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-primary-100 | oklch(92.93% 0.03 340.64deg) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-primary-300 | oklch(81.16% 0.08 345.32deg) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-primary-500 | oklch(69.89% 0.13 348.12deg) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-primary-700 | oklch(57.25% 0.1 346.44deg) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-primary-900 | oklch(43.55% 0.07 343deg) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-surface-50 | oklch(96.76% 0.01 318.08deg) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | | --color-surface-950 | oklch(25.82% 0.01 304.87deg) | Declaración de tema real. Estos valores cambian en conjunto cuando data-theme selecciona este tema importado; el estado de lectura original permanece intacto. | ### Integración y combinaciones semánticas de CSS | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Foundation import | @import "@skeletonlabs/skeleton" | Cárgalo después de Tailwind para que se compilen las definiciones de utilidades. | | Theme selection | data-theme="cerberus" / "mint" / "rose" | Solo los temas importados pueden proporcionar sus variables. | | Class-based appearance | @custom-variant dark (&:where(.dark, .dark *)) | Hace que el botón de apariencia original afecte a la variante oscura compilada real. | | Surface pairings | light-dark(light value, dark value) | Los estilos globales de Skeleton establecen color-scheme; cambiar una clase sin una variante correspondiente no basta. | | Filled action | btn preset-filled-primary-500 | Combina la geometría de un botón nativo con un ajuste predefinido que se adapta al tema. | | Supporting action | btn preset-tonal-primary | Usa una combinación tonal adecuada para la apariencia actual. | | Disclosure | details.disclosure > summary | Estado abierto nativo del navegador con Skeleton CSS; no interviene la inicialización de un componente Svelte. | ## Guía completa del sistema de diseño de Skeleton Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## 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 Las muestras de la paleta usan --radius-base, por lo que la forma de sus esquinas cambia según el tema seleccionado. La referencia completa también expone --spacing. El diseño exterior de dos columnas usa un espacio de 24px y pasa a una sola columna por debajo de 720px; estas son decisiones de composición originales. Un tema no determina la arquitectura de la información ni obliga a que todas las páginas compartan una cuadrícula idéntica. ## 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 Un producto que requiera un componente de Svelte Skeleton o de React debe usar el paquete correspondiente del framework y seguir las instrucciones documentadas de configuración. Este ejemplo basado en CSS sigue siendo útil para entender los temas compartidos y la capa de utilidades, pero no afirma ofrecer el mismo API que esos componentes. Mantén esa distinción al adaptar la guía proporcionada para un agente. ## Skeleton Ejemplos de componentes del sistema de diseño ### index.html Contenido de lectura completo, componentes nativos CSS y controles originales. ``` 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.

``` Referencia de código - Guarda los cuatro archivos de código fuente en un mismo directorio del proyecto. ### style.css Importaciones de temas, variante oscura basada en clases y composición adaptable. ``` @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} ``` Referencia de código - Guarda los cuatro archivos de código fuente en un mismo directorio del proyecto. ### main.js Inspección de tokens calculados y estados independientes de lectura y presentación. ``` 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(); ``` Referencia de código - Guarda los cuatro archivos de código fuente en un mismo directorio del proyecto. ### vite.config.mjs Integración real del compilador de Tailwind. ``` import{defineConfig}from'vite';import tailwindcss from'@tailwindcss/vite';export default defineConfig({plugins:[tailwindcss()],base:'./',build:{cssCodeSplit:false}}); ``` Referencia de código - Guarda los cuatro archivos de código fuente en un mismo directorio del proyecto. ## Skeleton Configuración del agente para el sistema de diseño ### Punto de partida para la implementación Guarda primero los cuatro archivos proporcionados. Esta es la capa de utilidades de CSS y no requiere Svelte ni el entorno de ejecución 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 ``` ### Una instrucción para tu proyecto ``` Implementa el espacio de lectura completo de Skeleton 5.0.1 con sus utilidades reales de CSS e importaciones de temas Cerberus/Mint/Rose. Conserva el esquema de colores oscuro basado en clases, las filas legibles de tokens calculados, el contenido completo, el estado guardado localmente y el restablecimiento de la presentación sin borrar dicho estado. Mantén separada la capa de CSS de las API de componentes del framework. ``` ## Skeleton Fuentes y alcance del sistema de diseño Utilidades reales de Skeleton Tailwind CSS y temas incluidos, con el comportamiento original de la página en JavaScript simple. No se carga ningún entorno de ejecución de Svelte Skeleton ni de React. - Instalación CSS y opciones de integración con frameworks. - Temas Composición y selección de temas. - Colores Combinaciones de paleta y contraste. - Apariencia oscura Comportamiento del esquema de color y sus variantes. - Contenidos desplegables Capa nativa details/summary CSS. ## Skeleton Recursos relacionados con el sistema de diseño ### Tabler Un diario de proyecto nativo de Tabler con variables de tema reales de 1.6, tarjetas de cronología, contexto de datagrid, validación modal y una composición clara/oscura que admite puntos de control locales. ### Tamagui Explora las categorías reales de tokens v5 de Tamagui y sus temas azules claro y oscuro mediante un panel de hábitos completo con componentes nativos, validación, progreso y recuperación de estados vacíos. ### UIkit UIkit combina un framework de CSS, personalización con Less y componentes de JavaScript controlados por atributos. En el planificador de talleres siguiente, Switcher, Accordion y la cuadrícula adaptable funcionan en conjunto para ilustrar dónde termina el comportamiento nativo de los componentes y dónde empieza el estado de selección de la aplicación. - [Referencia de implementación](https://www.skeleton.dev/docs/svelte/design/themes) - [Fuente](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/cerberus.css) - [Fuente](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/mint.css) - [Fuente](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/rose.css) - [Fuente](https://www.skeleton.dev/docs/svelte/get-started/fundamentals) - [Referencia de código](https://www.skeleton.dev/docs/svelte/get-started/installation) - [Instalación CSS y opciones de integración con frameworks.](https://www.skeleton.dev/docs/svelte/get-started/installation) - [Temas Composición y selección de temas.](https://www.skeleton.dev/docs/svelte/design/themes) - [Colores Combinaciones de paleta y contraste.](https://www.skeleton.dev/docs/svelte/design/colors) - [Apariencia oscura Comportamiento del esquema de color y sus variantes.](https://www.skeleton.dev/docs/svelte/guides/mode) - [Contenidos desplegables Capa nativa details/summary CSS.](https://www.skeleton.dev/docs/svelte/tailwind-components/disclosures)