svelte-kit-vice/CONTINUE-icon-type-scale.md

# 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

1. **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.
2. **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.
3. **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.
4. **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`).