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-19 · Alcance: 0% — 0 de 11 knobs por token público
• Knobs de apariencia: 11 — público 0 · privado 9 · global 1 · literal 1 · sistema 0 (fuera del ratio)
• Contrato hoy (lib/recipes/base.ts): 0 pública(s) · 1 privada(s) forward — _palette-track
• Eje size: sí · ficheros: skeleton.css

1. Knobs fuera de alcance

1.1 Directo a primitivo global (1)

#	fichero:línea	selector	propiedad	valor
1	skeleton.css:71	[data-skeleton-line]	border-radius	var(--radius-sm)

1.2 A través de un privado (9)

#	fichero:línea	selector	propiedad	valor
1	skeleton.css:22	[data-skeleton]	background	var(--_skeleton-bg)
2	skeleton.css:23	[data-skeleton]	border-radius	var(--_skeleton-radius)
3	skeleton.css:25	[data-skeleton]	block-size	var(--_skeleton-size)
4	skeleton.css:56	[data-skeleton][data-shape='circle']	inline-size	var(--_skeleton-size)
5	skeleton.css:62	[data-skeleton][data-shape='text']	gap	calc(var(--_skeleton-size) * 0.5)
6	skeleton.css:70	[data-skeleton-line]	block-size	var(--_skeleton-size, 1rem)
7	skeleton.css:72	[data-skeleton-line]	background	var(--_skeleton-bg)
8	skeleton.css:92	[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% )
9	skeleton.css:108	[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:24	[data-skeleton]	inline-size	100%

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-size	6	1rem, 0.5rem, 0.75rem, 1.5rem, 2rem	literal	no
--_skeleton-radius	3	var(--radius-md), 50%	global, literal	no
--_skeleton-duration	1	1.4s	literal	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

• Tiene eje size: los tokens dimensionales van por talla ({part}-{eje}-{k}) apuntando al bundle --size-{k}-*, nunca al primitivo crudo (theming §5; el guard recipe-css-contract prohíbe el primitivo).

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

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	root	⚠ var(--radius-md) / 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
height	root	1rem	1
height-xs	size:xs	0.5rem	1
height-sm	size:sm	0.75rem	1
height-md	size:md	1rem	1
height-lg	size:lg	1.5rem	1
height-xl	size:xl	2rem	1
width	root	1rem	1
width-xs	size:xs	0.5rem	1
width-sm	size:sm	0.75rem	1
width-md	size:md	1rem	1
width-lg	size:lg	1.5rem	1
width-xl	size:xl	2rem	1
gap	root	1rem	1
gap-xs	size:xs	0.5rem	1
gap-sm	size:sm	0.75rem	1
gap-md	size:md	1rem	1
gap-lg	size:lg	1.5rem	1
gap-xl	size:xl	2rem	1
line-height	root	1rem	1
line-height-xs	size:xs	0.5rem	1
line-height-sm	size:sm	0.75rem	1
line-height-md	size:md	1rem	1
line-height-lg	size:lg	1.5rem	1
line-height-xl	size:xl	2rem	1
line-radius	root	var(--radius-sm)	1

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 (3)

• 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
• el privado --_skeleton-size debe pasar a leer este público (o desaparecer) — --skeleton-height, --skeleton-height-xs, --skeleton-height-sm, --skeleton-height-md, --skeleton-height-lg, --skeleton-height-xl, --skeleton-width, --skeleton-width-xs, --skeleton-width-sm, --skeleton-width-md, --skeleton-width-lg, --skeleton-width-xl, --skeleton-gap, --skeleton-gap-xs, --skeleton-gap-sm, --skeleton-gap-md, --skeleton-gap-lg, --skeleton-gap-xl, --skeleton-line-height, --skeleton-line-height-xs, --skeleton-line-height-sm, --skeleton-line-height-md, --skeleton-line-height-lg, --skeleton-line-height-xl

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

(pendiente — lo escribe el autor; se conserva al regenerar)