6.8 KiB

Raw Blame History Unescape Escape

CONTINUAR — Escala de iconos ↔ tipografía (correlación 1:1)

Sesión pausada 2026-06-13 "al límite". Retomar el próximo domingo. Este archivo es el contexto completo para continuar SIN re-litigar decisiones.

✅ RESUELTO 2026-06-13 (continuación)

Se eligió la opción (1), NO la "1:1 total" que describía el plan de abajo:

NO se sube el font de los controles. El "bajón" del font (un control md muestra font-sm) resultó ser la convención generalizada (~20 recipes, densidad de controles) — deliberada y correcta. NO se toca STATIC_SIZE.
Regla final: el icono acompaña el font que el componente realmente usa (no el nombre del size). icon = icon-{name} del font-{name} que muestra.
button: icon-size-sm corregido icon-xs→icon-sm (sigue su font). Render ahora 14/16/16/18/20. Verificado visual.
radio-cards: iconos siguen el font del título → 16/16/18/18/20 (antes 18-32 inflados a mano). Verificado visual.
Bug pre-existente arreglado (button.css): el <svg> del Icon lleva width: var(--icon-size) inline, que vencía al [data-button] svg { inline-size } → el icono del button quedaba fijo en 18, NO respondía al size. Fix: el button alimenta --icon-size: var(--_button-icon-size). Ahora responde.

Pendiente (menor, futuro)

Auditar si OTROS componentes tienen el mismo bug del icono (dimensionan el svg por CSS externo y el inline width:var(--icon-size) del Icon lo vence). radio-cards NO lo tiene (responde bien). Patrón de fix: --icon-size: var(--_x-icon-size).
Decidir si se borra el banco de pruebas /uix/icon-scale-study.

(Plan original abajo — premisa "1:1 total" SUPERADA por la opción 1.)

Dónde estamos (committeado en este punto)

La escala de iconos se ata a la tipografía. Decisión firme: font-{name} ↔ icon-{name} 1:1 por nombre (el icono acompaña al texto, no se infla ni se hardcodea).

Ya hecho y committeado (punto de reversión):

Escala de iconos ajustada (lib/primitives/static.ts → STATIC_ICON.size): xl 24→32, xxl 48→52. Validado por ojo en el banco de pruebas. create-icon.ts ICON_SIZE_PX_MAP actualizado igual. Impacto 0 (nadie consumía esos steps).
button: icon-size-{size} del recipe pasó de px hardcodeado a var(--icon-size-X) mapeado por valor (cero cambio visual, ya escalable). ⚠️ ESTO ES INTERMEDIO — se va a re-hacer a 1:1 (ver abajo).
Docs: THEMING.md §5 "Escala tipográfica ↔ escala de iconos" + comentario en static.ts.
Banco de pruebas: /uix/icon-scale-study (web/routes/uix/icon-scale-study/+page.svelte). Compara modelos icon/font. Pendiente decidir si se borra o se deja.

Tabla de correlación canónica (LA referencia)

size	font (px)	line-height	icon (px)	icon − font
xxs	10	15	12	+2
xs	12	18	14	+2
sm	14	20	16	+2
md	16	23	18	+2
lg	20	27	20	0
xl	24→28	34	32	+4
xxl	32→48	50	52	+4

(headings lg–xxl fluidos clamp(); col font = max desktop. Salto icon 20→32 es fiel al salto del texto 20→28: la tipografía tampoco tiene nada entre medias.)

SIGUIENTE PASO — lo que estábamos a punto de hacer (NO implementado)

1:1 TOTAL (opción A, confirmada por el usuario): size md = font-md (16) = icon-md (18), sin "bajones".

El problema a resolver: hoy el size canon (STATIC_SIZE en lib/primitives/static.ts) y varios recipes (button incluido) bajan el font un escalón:

STATIC_SIZE: md → fontSize 'sm', lg → 'md', xl → 'lg', xxl → 'xl'.
button recipe: font-size-md: var(--font-size-sm), lg→md, xl→lg.

Para 1:1 hay que quitar ese bajón → md → font-md, etc. Consecuencia: el texto de los controles SUBE (button/input md: 14→16px). Cambio visual amplio.

Tareas concretas para retomar

MEDIR el impacto primero (el grep se quedó sin ejecutar). Saber:
- Qué recipes bajan su font a mano ('font-size-(md|lg|xl)': 'var(--font-size-(xs|sm|md|lg))').
- Quién consume var(--size-{name}-font-size) (heredan del canon).
- → dimensionar si el cambio es 5 recipes o 40.
Implementar 1:1:
- STATIC_SIZE: cada size → fontSize del MISMO nombre (md→'md', lg→'lg', xl→'xl', xxl→'xxl').
- button recipe: font-size-{size} → var(--font-size-{size}) (1:1) + icon-size-{size} → var(--icon-size-{size}) (1:1). Resultado button: xs/sm/md/lg/xl = font 12/14/16/18-20/24-28 + icon 14/16/18/20/32. ⚠️ button xl queda GRANDE (font 24-28 + icon 32) — MIRAR si convence; quizá button no debe llegar a xl tan grande.
- Demás recipes que bajan: alinear a 1:1.
radio-cards (recipes/base.ts ~1975): migrar a la correlación. Hoy usa iconos PROMINENTES hardcodeados (18/20/24/28/32) más grandes que sus títulos (14/14/16/16/18-20). Bajo la regla "sin inflar", el icono acompaña el título → 16/16/18/18/20 (ENCOGEN). Si una card quiere icono grande, la vía canónica es subir el font del título (el icono lo sigue), NO inflar el icono.
Regenerar (npm run generate:eidos-css) + verificar visual dark/light (button gallery /uix/components/button, radio-cards, varios controles) + commitear.

Decisiones de la sesión (NO re-litigar)

❌ NO más escalas ni steps prominentes (24/28/40). "No vamos a meter más escalas que suban o bajen ni que el diseñador lo hardcodee."
❌ NO Fluent puro (14/16/20/24/32/40/48/64). Se ajustó la escala actual atada a texto (solo xl→32, xxl→52).
✅ Regla única: el icono SIEMPRE acompaña al texto del componente (icon = icon-{name} del font que el componente muestra). 1:1.
✅ Coherencia total: size = font = icon por nombre (sin bajones). El usuario prefiere subir el font de los controles a mantener el bajón.

Archivos clave

Archivo	Qué
`src/uix/eidos/lib/primitives/static.ts`	`STATIC_ICON.size` (escala iconos) + `STATIC_SIZE` (size canon que BAJA el font — a corregir)
`src/uix/eidos/lib/primitives/typography.ts`	escala tipográfica (`sizes`: 10/12/14/16/20/28/48...)
`src/uix/eidos/components/icon/create-icon.ts`	`ICON_SIZE_PX_MAP` (espejo de la escala)
`src/uix/eidos/lib/recipes/base.ts`	button ~1470 · radio-cards ~1975
`src/uix/eidos/THEMING.md §5`	doc de la correlación
`web/routes/uix/icon-scale-study/+page.svelte`	banco de pruebas visual

Regenerar siempre tras tocar la escala: npm run generate:eidos-css.

Estado git al pausar

Rama active-uix. Excluir SIEMPRE de commits: palabras/**, .claude/launch.json, y lo ajeno del usuario en el árbol (ogl en package.json, web/routes/demos/animations/, web/routes/demos/+page.svelte).

6.8 KiB Raw Blame History Unescape Escape