The scoop family chip cast its box-shadow INTO the concave notches and the 1px border seamed at the concave corners (native corner-shape, not clip-path) — looked broken. Flat-filled chips render every family cleanly and are the right home for cut/scoop (chips/badges), matching the per-component idea below. Add pendiente.md: per-component shape family (chips/badges differentiator), general shape adoption, corner-shape support (canon = degrade to arc, no polyfill), depth scrim cue. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>active-uix
parent
2ef4f4427e
commit
05a775c072
@ -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 (`<Badge shape="cut">`,
|
||||
`<Chip shape="scoop">`) → 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.
|
||||
Loading…
Reference in new issue