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

card — 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: 80% — 28 de 35 knobs por token público
• Knobs de apariencia: 36 — público 28 · privado 7 · global 0 · literal 0 · sistema 1 · excepción 0 (los dos últimos, fuera del ratio)
• Contrato hoy (lib/recipes/base.ts): 97 pública(s) — padding-inline-xs, padding-inline-sm, padding-inline-md, padding-inline-lg, padding-inline-xl, padding-block-xs, padding-block-sm, padding-block-md, padding-block-lg, padding-block-xl, gap-xs, gap-sm, gap-md, gap-lg, gap-xl, font-family, line-height, title-font-family, title-font-size-xs, title-font-size-sm, title-font-size-md, title-font-size-lg, title-font-size-xl, title-font-weight, title-line-height, title-letter-spacing, description-font-family, description-font-size-xs, description-font-size-sm, description-font-size-md, description-font-size-lg, description-font-size-xl, description-line-height, description-fg, body-font-size-xs, body-font-size-sm, body-font-size-md, body-font-size-lg, body-font-size-xl, body-line-height, border-width, radius-sm, radius-md, radius-lg, header-gap, footer-gap, footer-padding-start, footer-border-fg, emerge-duration, emerge-ease, emerge-distance, hover-lift, hover-shadow, press-scale, press-duration, selected-ring-width, disabled-opacity, primary-solid, primary-text, primary-contrast, secondary-solid, secondary-text, secondary-contrast, neutral-solid, neutral-text, neutral-contrast, affirm-solid, affirm-text, affirm-contrast, fulfill-track, fulfill-border, fulfill-solid, fulfill-text, fulfill-contrast, risk-solid, risk-text, risk-contrast, threat-solid, threat-text, threat-contrast, loss-track, loss-border, loss-solid, loss-text, loss-contrast, 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-track, _palette-border, _palette-solid, _palette-text, _palette-contrast
• Eje size: sí · ficheros: card.css

1. Knobs fuera de alcance

1.1 Directo a primitivo global (0)

Ninguno.

1.2 A través de un privado (7)

#	fichero:línea	selector	propiedad	valor
1	card.css:60	[data-card]	background	var(--_card-bg)
2	card.css:61	[data-card]	color	var(--_card-fg)
3	card.css:198	[data-card][data-lift][data-variant='ghost']:hover:not([data-disabled])	background	var(--_card-palette-track)
4	card.css:202	[data-card][data-lift][data-variant='outline']:hover:not([data-disabled])	background	var(--_card-palette-track)
5	card.css:293	[data-card-title]	color	var(--_card-fg)
6	card.css:309	[data-card][data-variant='solid'] [data-card-description]	color	color-mix(in srgb, var(--_card-palette-contrast) 80%, transparent)
7	card.css:317	[data-card-body]	color	var(--_card-fg)

1.3 Literales (0)

Ninguno.

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 (1) — 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	card.css:226	[data-card][data-interactive]:focus-visible	outline	var(--focus-ring-width) solid var(--focus-ring-color)

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

privado	declaraciones	valor(es)	origen	¿deriva de un público?
--_card-padding-inline	5	var(--card-padding-inline-md), var(--card-padding-inline-xs), var(--card-padding-inline-sm), var(--card-padding-inline-lg), var(--card-padding-inline-xl)	public	sí
--_card-padding-block	5	var(--card-padding-block-md), var(--card-padding-block-xs), var(--card-padding-block-sm), var(--card-padding-block-lg), var(--card-padding-block-xl)	public	sí
--_card-gap	5	var(--card-gap-md), var(--card-gap-xs), var(--card-gap-sm), var(--card-gap-lg), var(--card-gap-xl)	public	sí
--_card-title-font-size	5	var(--card-title-font-size-md), var(--card-title-font-size-xs), var(--card-title-font-size-sm), var(--card-title-font-size-lg), var(--card-title-font-size-xl)	public	sí
--_card-description-font-size	5	var(--card-description-font-size-md), var(--card-description-font-size-xs), var(--card-description-font-size-sm), var(--card-description-font-size-lg), var(--card-description-font-size-xl)	public	sí
--_card-body-font-size	5	var(--card-body-font-size-md), var(--card-body-font-size-xs), var(--card-body-font-size-sm), var(--card-body-font-size-lg), var(--card-body-font-size-xl)	public	sí
--_card-radius	3	var(--card-radius-md), var(--card-radius-sm), var(--card-radius-lg)	public	sí
--_card-bg	5	var(--_card-palette-track), var(--_card-palette-solid), var(--color-surface-default), transparent	global, literal, private	no
--_card-fg	5	var(--_card-palette-text), var(--_card-palette-contrast)	private	no
--_card-border-color	5	transparent, var(--_card-palette-border)	literal, private	no

Consumidos y no declarados en el CSS (vienen de base.ts o de un estilo inline del wrapper): --_card-palette-border, --_card-palette-contrast, --_card-palette-solid, --_card-palette-text, --_card-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 (4)

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 (--card-…)	scope TSC	valor propuesto	usos
bg	root	⚠ var(--_card-palette-track) / var(--_card-palette-solid) / var(--color-surface-default) / transparent	5
fg	root	⚠ var(--_card-palette-text) / var(--_card-palette-contrast)	5
title-fg	root	⚠ var(--_card-palette-text) / var(--_card-palette-contrast)	5
body-fg	root	⚠ var(--_card-palette-text) / var(--_card-palette-contrast)	5

4.2 Sin nombre mecánico (3)

• ⚠ 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 — 3: background, color.

4.3 Avisos sobre los tokens propuestos (2)

• el privado --_card-bg debe pasar a leer este público (o desaparecer) — --card-bg
• el privado --_card-fg debe pasar a leer este público (o desaparecer) — --card-fg, --card-title-fg, --card-body-fg

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)