svelte-kit-vice/docs/audit/theming/image-adjustments.md

image-adjustments — 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-25 · Alcance: 100% — 14 de 14 knobs por token público
• Knobs de apariencia: 17 — público 14 · privado 0 · global 0 · literal 0 · sistema 3 · excepción 1 · estructural 0 · puente 0 · canal 0 (los cinco últimos, fuera del ratio)
• Contrato hoy (lib/recipes/base.ts): 16 pública(s) — gap, row-gap, head-gap, label-fg, label-font-size, label-font-weight, label-line-height, value-fg, value-font-size, value-font-family, reset-gap, reset-fg, reset-font-size, hover-reset-fg, focus-reset-radius, hue-track
• Eje size: no · ficheros: image-adjustments.css

1. Knobs fuera de alcance

1.1 Directo a primitivo global (0)

Ninguno.

1.2 A través de un privado (0)

Ninguno.

1.3 Literales (0)

Ninguno.

1.4 Excepciones firmadas (1) — 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.

#	fichero:línea	selector	propiedad	valor
1	image-adjustments.css:95	[data-image-adjustments-reset]:focus-visible	outline-color	Highlight

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

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

#	fichero:línea	selector	propiedad	valor
1	image-adjustments.css:19	[data-image-adjustments][data-disabled]	opacity	var(--opacity-disabled)
2	image-adjustments.css:71	[data-image-adjustments-reset]:focus-visible	outline	var(--focus-ring-width) solid var(--focus-ring-color)
3	image-adjustments.css:77	[data-image-adjustments-reset][disabled]	opacity	var(--opacity-disabled)

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

La receta no declara privados propios en su CSS.

4. Propuesta de corrección

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

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 (--image-adjustments-…)	scope TSC	valor propuesto	usos

4.2 Sin nombre mecánico (1)

• foco: lo posee el sistema (--focus-ring-*, theming §32) — no acuñar token propio — 1: outline-color.

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

Ejecutado 2026-08-24 · 67 % → 100 %. Contrato 12 → 16 claves. Censo: público 10 → 14, global 4 → 0, literal 1 → 0 (pasa a exception), privado 0, sistema 3. Diff de computed VACÍO (5.440 valores, 7 estados, 26 nodos); capturas 2× antes/después idénticas. Centinela 15/16, 1 adjudicada.

Las cuatro que entran son LA COSTURA (PLAN §2-A), no cuatro inventos. Los cuatro knobs fuera de alcance leían un primitivo del sistema a pelo, que es media doctrina: el valor se queda donde está y el KNOB pasa a ser del componente. head-gap (--space-2) y label-line-height (--leading-ui) dejan de obligar a mover un primitivo global para apretar una línea de cabecera; hover-reset-fg (--color-content-primary) y focus-reset-radius (--radius-sm) hacen lo propio con el cromo del reset. Los nombres los decide el catálogo, no la §4 generada: ésta proponía item-label-line-height cuando el bloque ya habla label-* para esa misma parte, y reset-radius cuando el radio sólo existe bajo :focus-visible — focus-reset-radius es la forma del precedente rating-group.focus-radius, acuñada un día antes sobre la misma declaración dentro de la misma regla.

El hover del reset NO es una invención por componente. Es TINTA, y el velo del sistema es background-image: un control sin superficie que velar no puede recibir la capa de archetypes.css. Verificado desde el píxel hacia arriba (§7.4-12, obligatorio porque el commit toca una regla :hover): el píxel bajo el puntero ES el <button data-image-adjustments-reset>, el hover mueve color y sólo color en ese nodo (oklch(0.5032 0 0) → oklch(0.2435 0 0)), y ni él ni un solo ancestro tienen background-image en reposo ni en hover.

El canal de VALOR no se acuña, y aquí no había ninguno que confundir. Un panel de ajustes escribe valores por instancia (brillo, contraste, tono), pero en éste esa salida es la CADENA filter que soma calcula y entrega al consumidor por onFilterChange — nunca toca el CSS de la receta. Lo único que la receta re-apunta a otro componente es --slider-track-bg en la fila hue, y eso ya era un token público (hue-track) desde que nació.

El único literal que queda está FIRMADO: outline-color: Highlight bajo @media (forced-colors: active). La paleta del SO manda en ese modo; un token ahí sería un knob que el navegador ignora.

Dos lecciones del instrumento, las dos medidas:

1. hue-track leía muerto (11/12) y estaba vivísimo. Su pintura cae en el ::before del <Slider> COMPUESTO, cuyo nodo lleva data-slider* y no data-image-adjustments-*: el filtro del centinela nunca lo veía. Es la clase de waveform (su playhead es el thumb de un Slider embebido). Se arregla con extraNodes.
2. El selector de extraNodes apunta SÓLO a la fila hue, y esa precisión es funcional. Con [data-image-adjustments-item] [data-slider] —las seis filas— el conjunto medido pasó a 32 nodos y el reset se convirtió en el nº 32, fuera del tope de 30 del pase de hover: hover-reset-fg leía muerto por una razón que no tenía NADA que ver con el token. Acotando el selector a la fila que la receta realmente re-tinta, el reset vuelve al rango y la clave lee viva. Un instrumento que mide de más puede medir menos.

La única adjudicación es de estado, no deuda: focus-reset-radius sólo pinta bajo :focus-visible y el guard desenfoca a propósito (el arreglo F2-A contra el envenenamiento por clic-foco). Medido a mano sobre el reset real, con :focus-visible confirmado: 4px → 1234px.