svelte-kit-vice/docs/audit/theming/skeleton.md

skeleton — alcance de tema: análisis y propuesta

Generado por node --import tsx/esm scripts/theming-census.ts --report. Lo medido y la propuesta se regeneran; el Veredicto (§5) se conserva. Vista de conjunto: README · método y protocolo: PLAN-theming.md §1, §2, §7.

• Medido: 2026-08-23 · Alcance: 45% — 5 de 11 knobs por token público
• Knobs de apariencia: 11 — público 5 · privado 5 · global 0 · literal 1 · sistema 0 · excepción 0 (los dos últimos, fuera del ratio)
• Contrato hoy (lib/recipes/base.ts): 9 pública(s) — size-xs, size-sm, size-md, size-lg, size-xl, size, radius, line-radius, duration · 1 privada(s) forward — _palette-track
• Eje size: no · ficheros: skeleton.css

1. Knobs fuera de alcance

1.1 Directo a primitivo global (0)

Ninguno.

1.2 A través de un privado (5)

#	fichero:línea	selector	propiedad	valor
1	skeleton.css:20	[data-skeleton]	background	var(--_skeleton-bg)
2	skeleton.css:21	[data-skeleton]	border-radius	var(--_skeleton-radius)
3	skeleton.css:56	[data-skeleton-line]	background	var(--_skeleton-bg)
4	skeleton.css:76	[data-skeleton][data-animated]	background-image	linear-gradient( var(--gradient-angle-to-r), var(--_skeleton-bg) 0%, var(--_skeleton-highlight) 50%, var(--_skeleton-bg) 100% )
5	skeleton.css:92	[data-skeleton][data-shape='text'][data-animated] [data-skeleton-line]	background-image	linear-gradient( var(--gradient-angle-to-r), var(--_skeleton-bg) 0%, var(--_skeleton-highlight) 50%, var(--_skeleton-bg) 100% )

1.3 Literales (1)

#	fichero:línea	selector	propiedad	valor
1	skeleton.css:22	[data-skeleton]	inline-size	100%

1.4 Excepciones firmadas (0) — fuera del ratio

Literales que llevan su anotación /* literal: <razón> */ en la propia declaración: la válvula de recipe-contract §3, la misma que honra component-audit. Una desviación firmada no es deuda — se listan para que la razón se lea, no para acuñarlas.

Ninguno.

2. Sistema transversal (0) — informativo, fuera del ratio

Un tema los alcanza a nivel de sistema, por diseño (recipe-contract §2).

Ninguno.

3. Privados de la receta — ¿de dónde sale su valor?

privado	declaraciones	valor(es)	origen	¿deriva de un público?
--_skeleton-bg	2	color-mix(in oklab, var(--color-neutral-track), var(--color-neutral-solid) 16%), color-mix(in srgb, var(--_skeleton-palette-track) 50%, transparent)	global, private	no
--_skeleton-highlight	2	color-mix(in oklab, var(--color-neutral-track), var(--color-neutral-solid) 7%), color-mix(in srgb, var(--_skeleton-palette-track) 90%, white 8%)	global, private	no
--_skeleton-radius	3	var(--skeleton-radius), 50%	literal, public	no

Consumidos y no declarados en el CSS (vienen de base.ts o de un estilo inline del wrapper): --_skeleton-palette-track.

4. Propuesta de corrección

4.1 Tokens a declarar en lib/recipes/base.ts (5)

Valor verbatim del CSS de hoy: el default no se mueve, sólo cambia quién puede moverlo. Nombres derivados de recipe-contract §1 (ejes lógicos, talla al final) y theming §6.7 (slots de color, modificador delante). Un token con DOS valores distintos es una colisión de nombre: son dos knobs, o el nombre no distingue lo que debería — se marca ⚠.

token (--skeleton-…)	scope TSC	valor propuesto	usos
radius (ya existe)	root	⚠ var(--skeleton-radius) / 50%	3
bg	root	⚠ color-mix(in oklab, var(--color-neutral-track), var(--color-neutral-solid) 16%) / color-mix(in srgb, var(--_skeleton-palette-track) 50%, transparent)	2
line-bg	root	⚠ color-mix(in oklab, var(--color-neutral-track), var(--color-neutral-solid) 16%) / color-mix(in srgb, var(--_skeleton-palette-track) 50%, transparent)	2
bg-image	root	⚠ color-mix(in oklab, var(--color-neutral-track), var(--color-neutral-solid) 16%) / color-mix(in srgb, var(--_skeleton-palette-track) 50%, transparent)	2
line-bg-image	root	⚠ color-mix(in oklab, var(--color-neutral-track), var(--color-neutral-solid) 16%) / color-mix(in srgb, var(--_skeleton-palette-track) 50%, transparent)	2

4.2 Sin nombre mecánico (1)

• ⚠ decisión: 100% es un valor identidad o geometría de layout, no un knob de tema — el perímetro de «knob» es D-TH.2, sin firmar — 1: inline-size.

4.3 Avisos sobre los tokens propuestos (2)

• el privado --_skeleton-bg debe pasar a leer este público (o desaparecer) — --skeleton-bg, --skeleton-line-bg, --skeleton-bg-image, --skeleton-line-bg-image
• el privado --_skeleton-radius debe pasar a leer este público (o desaparecer) — --skeleton-radius

4.4 Lo que hay que comprobar a mano (PLAN-theming §1.3 · §7.4)

• Privado que no deriva de un público — §3 lo marca; el privado debe leer el público o desaparecer.
• Velo o acento en el nodo equivocado (archetype: 'item' en un envoltorio, un background en shorthand que mata la capa de estado) — se mide desde el píxel hacia arriba.
• Doble animación al mover un sello a una superficie con animación propia — registro de animationstart/animationend.
• Diff de computed = 0 en reposo · hover · abierto · disabled · foco, por talla, antes y después.
• Centinela por token nuevo: valor imposible en el root → el nodo lo sigue. Si no, el token miente.

5. Veredicto

Medido 2026-08-22. Nueve de sus once knobs pasan por privado, y la lectura correcta es que dos de esos privados NO son deuda: son conmutadores.

1. --_skeleton-bg y --_skeleton-highlight se quedan privados. Cada uno tiene DOS fuentes según haya data-color: la mezcla neutra cross-mode (color-mix hacia neutral-solid, para que el placeholder siga siendo un gris visible en los dos modos — el neutral-track desnudo desaparece sobre una superficie clara) o el forward de paleta. Aplanarlos exigiría duplicar cada regla por color. Mismo patrón que el borde de foco de textarea y la tinta de spinner, y son el ~18 % que no alcanza.
2. --_skeleton-size es la coordenada por talla y gobierna el alto del bloque, el diámetro del círculo (via aspect-ratio) y el hueco entre líneas de la forma text — ese hueco es calc(size * 0.5), una PROPORCIÓN, o sea construcción, no un knob.
3. --_skeleton-radius no es una coordenada por talla sino por FORMA: radius-md en rect, 50% en circle. El 50% es identidad (un círculo es redondo), así que el knob es sólo el del rectángulo. La línea de la forma text tiene el suyo propio, más pequeño.
4. duration entra al contrato en vez de quedarse en 1.4s a pelo — mismo criterio que se aplicó al spinner (next-features.md §13).