svelte-kit-vice/docs/audit/theming/file-upload.md

file-upload — 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-22 · Alcance: 76% — 45 de 59 knobs por token público
• Knobs de apariencia: 61 — público 45 · privado 9 · global 1 · literal 4 · sistema 2 · excepción 0 (los dos últimos, fuera del ratio)
• Contrato hoy (lib/recipes/base.ts): 98 pública(s) — gap-sm, gap-md, gap-lg, padding-sm, padding-md, padding-lg, control-height-sm, control-height-md, control-height-lg, font-size-sm, font-size-md, font-size-lg, preview-size-sm, preview-size-md, preview-size-lg, font-family, line-height, fg, label-fg, label-font-weight, dropzone-gap, dropzone-min-height, dropzone-border-width, dropzone-border, dropzone-radius, dropzone-bg, dropzone-fg, button-gap, button-padding-inline, button-border-width, button-border, hover-button-border, button-radius, button-bg, button-fg, hover-button-fg, button-solid-fg, list-gap, item-gap, item-padding, item-border-width, item-border, item-radius, item-bg, item-shadow, preview-radius, preview-bg, preview-fg, item-name-fg, item-name-font-weight, item-size-fg, item-size-font-size, progress-height, progress-radius, progress-track-bg, transition-duration, transition-ease, disabled-opacity, primary-solid, primary-solid-hover, primary-text, secondary-solid, secondary-solid-hover, secondary-text, neutral-solid, neutral-solid-hover, neutral-text, affirm-solid, affirm-solid-hover, affirm-text, fulfill-solid, fulfill-solid-hover, fulfill-track, fulfill-border, fulfill-text, risk-solid, risk-solid-hover, risk-text, threat-solid, threat-solid-hover, threat-text, loss-solid, loss-solid-hover, loss-track, loss-border, loss-text, primary-track, primary-border, secondary-track, secondary-border, neutral-track, neutral-border, affirm-track, affirm-border, risk-track, risk-border, threat-track, threat-border · 5 privada(s) forward — _palette-solid, _palette-solid-hover, _palette-track, _palette-border, _palette-text
• Eje size: sí · ficheros: file-upload.css

1. Knobs fuera de alcance

1.1 Directo a primitivo global (1)

#	fichero:línea	selector	propiedad	valor
1	file-upload.css:208	[data-file-upload][data-invalid] [data-file-upload-dropzone]	border-color	var(--color-risk-border)

1.2 A través de un privado (9)

#	fichero:línea	selector	propiedad	valor
1	file-upload.css:69	[data-file-upload-dropzone]:hover:not([data-disabled]), [data-file-upload-dropzone][data-dragging]	border-color	var(--_file-upload-palette-border)
2	file-upload.css:70	[data-file-upload-dropzone]:hover:not([data-disabled]), [data-file-upload-dropzone][data-dragging]	background	var(--_file-upload-palette-track)
3	file-upload.css:71	[data-file-upload-dropzone]:hover:not([data-disabled]), [data-file-upload-dropzone][data-dragging]	color	var(--_file-upload-palette-text)
4	file-upload.css:108	[data-file-upload-trigger]	border-color	var(--_file-upload-palette-solid)
5	file-upload.css:109	[data-file-upload-trigger]	background	var(--_file-upload-palette-solid)
6	file-upload.css:114	[data-file-upload-trigger]:hover:not([data-disabled])	border-color	var(--_file-upload-palette-solid-hover)
7	file-upload.css:115	[data-file-upload-trigger]:hover:not([data-disabled])	background	var(--_file-upload-palette-solid-hover)
8	file-upload.css:195	[data-file-upload-item-progress]::before	inline-size	calc(var(--_file-upload-progress-value, 0) * 1%)
9	file-upload.css:197	[data-file-upload-item-progress]::before	background	var(--_file-upload-palette-solid)

1.3 Literales (4)

#	fichero:línea	selector	propiedad	valor
1	file-upload.css:10	[data-file-upload]	inline-size	100%
2	file-upload.css:162	[data-file-upload-item-preview] :where(img, video)	inline-size	100%
3	file-upload.css:163	[data-file-upload-item-preview] :where(img, video)	block-size	100%
4	file-upload.css:184	[data-file-upload-item-progress]	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 (2) — 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	file-upload.css:78	[data-file-upload-dropzone]:focus-visible, [data-file-upload-trigger]:focus-visible, [data-file-upload-item-remove]:focus-visible, [data-file-upload-clear-trigger]:focus-visible	outline	var(--focus-ring-width) solid var(--focus-ring-color)
2	file-upload.css:126	[data-file-upload-item-remove]:hover:not([data-disabled]), [data-file-upload-clear-trigger]:hover:not([data-disabled])	background-image	linear-gradient(var(--state-hover), var(--state-hover))

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

privado	declaraciones	valor(es)	origen	¿deriva de un público?
--_file-upload-gap	3	var(--file-upload-gap-md), var(--file-upload-gap-sm), var(--file-upload-gap-lg)	public	sí
--_file-upload-padding	3	var(--file-upload-padding-md), var(--file-upload-padding-sm), var(--file-upload-padding-lg)	public	sí
--_file-upload-control-height	3	var(--file-upload-control-height-md), var(--file-upload-control-height-sm), var(--file-upload-control-height-lg)	public	sí
--_file-upload-font-size	3	var(--file-upload-font-size-md), var(--file-upload-font-size-sm), var(--file-upload-font-size-lg)	public	sí
--_file-upload-preview-size	3	var(--file-upload-preview-size-md), var(--file-upload-preview-size-sm), var(--file-upload-preview-size-lg)	public	sí

Consumidos y no declarados en el CSS (vienen de base.ts o de un estilo inline del wrapper): --_file-upload-palette-border, --_file-upload-palette-solid, --_file-upload-palette-solid-hover, --_file-upload-palette-text, --_file-upload-palette-track, --_file-upload-progress-value.

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

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 (--file-upload-…)	scope TSC	valor propuesto	usos
invalid-dropzone-border	root	var(--color-risk-border)	1

4.2 Sin nombre mecánico (13)

• ⚠ 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 — 4: inline-size, block-size.
• ⚠ decisión: el privado que alimenta este knob no se declara en el CSS (viene de base.ts o de un estilo inline) — hay que resolverlo antes de nombrarlo — 9: border-color, background, color, inline-size.

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)