diff --git a/pendiente.md b/pendiente.md new file mode 100644 index 000000000..4b7fed66c --- /dev/null +++ b/pendiente.md @@ -0,0 +1,41 @@ +# Pendientes + +## Forma (shape) — asignar la familia de borde por componente + +Permitir que cada componente reciba la **familia de forma** (`rounded` · `continuous` · `cut` · +`scoop`) como prop / `data-attr`, además del default del tema. Diferenciador fuerte sobre todo +en **chips y badges** — p. ej. un badge `cut` o `scoop` para una categoría frente al chip +`continuous` por defecto, sin inventar variantes nuevas. + +- **API propuesta**: prop `shape` en el wrapper eidos (``, + ``) → emite `data-shape="{family}"` en el elemento. Hereda del tema si no + se especifica. (Mecánica ya existente: la regla `[data-shape='{family}']` está en el motor; + solo falta exponer la prop en las recipes.) +- **No** aplicar familias a círculos / píldoras (avatares): las deformaría (un avatar + `continuous` se vuelve squircle, un `cut` octágono). El default de esos componentes debe + quedarse en `rounded`. +- **scoop / cóncavo**: en Chromium actual, `corner-shape: scoop` con `border` + `box-shadow` + proyecta la sombra DENTRO de los entrantes y el borde de 1px hace costura en las esquinas + cóncavas → se ve sucio. Para chips/badges `scoop` (y `cut`), preferir **relleno plano** sin + borde/sombra fuerte, o gestionar la sombra en la recipe (p. ej. `filter: drop-shadow()` en + lugar de `box-shadow`, evaluando coste). Verificado en `/temas/forma` §Familias. + +## Forma — adopción general por componentes + +Que las superficies **rectangulares** reales (cards, dialogs, inputs, popovers, menús…) opten a +`data-shape="continuous"` desde sus recipes — como hicimos con el halo de depth. Cuidando de no +squircle-izar avatares / píldoras (círculos perfectos). Es una pasada de barrido aparte. + +## Forma — soporte de `corner-shape` (decisión de canon) + +La continuidad (squircle), `cut` y `scoop` dependen de `corner-shape` (Chromium 2025+). Donde no +hay soporte **degrada al arco** de `border-radius` (la magnitud siempre funciona) — decisión de +canon: **progressive enhancement, NO polyfill**. Un Houdini Paint Worklet no existe en Firefox y +las máscaras SVG por elemento recortan la sombra (mismo problema que `clip-path`). Revisar el +soporte de Safari/Firefox periódicamente y subir el listón cuando lleguen. + +## Depth — cue `scrim` + +`--depth-{plane}-scrim` existe como token pero sin regla cableada; el backdrop dim de los modales +lo gestiona hoy cada componente. Cablear una regla `[data-depth][data-scrim]` si emerge un +consumidor que lo necesite fuera de dialog/drawer. diff --git a/web/routes/temas/forma/+page.svelte b/web/routes/temas/forma/+page.svelte index 7ce285fa8..7f3ddd5f7 100644 --- a/web/routes/temas/forma/+page.svelte +++ b/web/routes/temas/forma/+page.svelte @@ -400,7 +400,10 @@ /* 3 · Familias */ .fam-row { display: flex; flex-wrap: wrap; gap: clamp(1rem, 4vw, 2.5rem); justify-content: center; } .fam { margin: 0; display: flex; flex-direction: column; gap: 0.9rem; align-items: center; } - .fam-chip { display: grid; place-items: center; min-inline-size: 6.5rem; padding: 1.1rem 1.5rem; border-radius: 18px; background: linear-gradient(145deg, var(--color-surface-raised), var(--color-surface-overlay)); border: 1px solid var(--rule); box-shadow: var(--depth-raised-shadow); font-family: var(--font-family-mono); font-size: var(--font-size-sm); color: var(--color-content-primary); } + /* filled chips (no border / drop-shadow): a concave `scoop` casts shadow INTO its notches and + a 1px border seams at the concave corners — both read as broken. Flat fills render every + family cleanly and are the right home for cut/scoop anyway (chips/badges). */ + .fam-chip { display: grid; place-items: center; min-inline-size: 6.5rem; padding: 0.9rem 1.6rem; border-radius: 16px; background: color-mix(in oklab, var(--color-primary-solid) 26%, var(--color-surface-overlay)); font-family: var(--font-family-mono); font-size: var(--font-size-sm); color: var(--color-content-primary); } .fam figcaption { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-content-muted); } /* 4 · Ocurre */