From 4356020e374ddba169e57a7bc1f61e917a686425 Mon Sep 17 00:00:00 2001 From: dev Date: Sat, 1 Aug 2026 19:29:25 +0200 Subject: [PATCH] feat(audio-player): la caratula de `card` sale a token, como sus dos hermanas MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `row` y `bar` tenian tope publico (--audio-player-artwork-size-{row,bar}) y `card` lo llevaba clavado en la receta como `calc(var(--space-8) * 8)`: un tema podia retocar dos de las tres caratulas y la tercera no. Ahora son tres. El valor se preserva EXACTO — 256px a densidad 1x / zoom 1x, verificado resolviendo la custom prop en el navegador (el viewport del panel es 0, asi que se mide la cascada y no el valor usado). Cero cambio visual. Se conserva tambien la asimetria de FORMA, que no es un descuido y queda escrita: `card` va sobre la escala de espacios (--space-8 ya trae densidad x zoom compuestos) para que la caratula heroica respire con la fundacion, mientras `row` y `bar` son rem planos a proposito — una fila de lista y una barra de app no deben crecer con la densidad o dejan de casar con las filas y barras de alrededor. Verificado: recipe-css-contract 31 verdes (el guard de huerfanos exige que un token declarado se consuma), eidos-lint media-player 0 invalidos, component:audit --only media-player PASS, docs:check 0, check 75 = baseline. Co-Authored-By: Claude Opus 5 --- .../components/audio-player/audio-player.css | 2 +- src/uix/eidos/components/media-player/README.md | 8 +++++++- src/uix/eidos/generated/base.css | 1 + src/uix/eidos/lib/recipes/base.ts | 15 +++++++++++---- 4 files changed, 20 insertions(+), 6 deletions(-) diff --git a/src/uix/eidos/components/audio-player/audio-player.css b/src/uix/eidos/components/audio-player/audio-player.css index 0cda1b1f9..922f1a300 100644 --- a/src/uix/eidos/components/audio-player/audio-player.css +++ b/src/uix/eidos/components/audio-player/audio-player.css @@ -78,7 +78,7 @@ } [data-media-player][data-variant='card'] [data-media-player-artwork] { inline-size: 100%; - max-inline-size: calc(var(--space-8) * 8); + max-inline-size: var(--audio-player-artwork-size-card); } [data-media-player][data-variant='card'] [data-media-player-controls] { flex-wrap: wrap; diff --git a/src/uix/eidos/components/media-player/README.md b/src/uix/eidos/components/media-player/README.md index 54bb0145e..2463a74eb 100644 --- a/src/uix/eidos/components/media-player/README.md +++ b/src/uix/eidos/components/media-player/README.md @@ -86,7 +86,13 @@ El modo audio dejó de ser «vídeo colapsado» (las 3 reglas CSS de v1): `inline` nota de voz), scoped a `[data-variant]` — componer `` a mano sigue sin opinar. Una variante decide QUÉ se ve y cómo fluye, nunca comportamiento (regla espejo de blocks). - Tokens públicos: `--audio-player-{gap,artwork-radius,artwork-size-row,artwork-size-bar}`. + Tokens públicos: `--audio-player-{gap,artwork-radius,artwork-size-card,artwork-size-row,artwork-size-bar}`. + Las tres carátulas son retocables por tema. `card` es un TOPE (la carátula va + al 100% hasta él) y va sobre la escala de espacios (`--space-8`, que ya trae + densidad × zoom compuestos) para que la carátula heroica respire con la + fundación; `row` y `bar` son rem planos a propósito — una fila de lista y una + barra de app NO deben crecer con la densidad, o dejan de casar con las filas y + barras de alrededor. - **Dogfooding**: `Artwork` compone `AspectRatio`+`Image`; `RateButton` compone `Button` (ghost) con `{data-rate}×`; el badge live usa el text localizado del morfo vía soma. Decisión declarada: la recipe hermana (`audio-player.css`) diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index 87b81d768..0f2150a66 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -2759,6 +2759,7 @@ --media-player-accent-strong: var(--scale-amber-10); --audio-player-gap: var(--space-3); --audio-player-artwork-radius: var(--radius-md); + --audio-player-artwork-size-card: calc(var(--space-8) * 8); --audio-player-artwork-size-row: 3.5rem; --audio-player-artwork-size-bar: 2.5rem; --waveform-height-xs: 1.5rem; diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts index 3f28ab13a..670af71b1 100644 --- a/src/uix/eidos/lib/recipes/base.ts +++ b/src/uix/eidos/lib/recipes/base.ts @@ -3724,12 +3724,19 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({ }, 'audio-player': { // The audio variants' public knobs (F5, PLAN-audio-player-v2.md). Artwork - // sizes are design values of the compact identities: `row` matches a list - // entry (SoundCloud-track scale), `bar` a persistent app bar (Spotify - // scale) — public tokens, so a theme retunes them like the slider's - // `track-size-*`. + // sizes are design values of each identity: `card` is the hero cap, `row` + // matches a list entry (SoundCloud-track scale), `bar` a persistent app bar + // (Spotify scale) — public tokens, so a theme retunes them like the + // slider's `track-size-*`. gap: 'var(--space-3)', 'artwork-radius': 'var(--radius-md)', + // `card` is a CAP (the artwork is `inline-size: 100%` up to this), and it + // is deliberately expressed on the space scale rather than as a flat rem: + // `--space-8` already carries density × scaling composed, so the hero + // artwork breathes with the foundation while the two compact sizes below + // stay fixed — a list row and an app bar must NOT grow with density, or + // they stop matching the rows and bars around them. 256px at 1×/1×. + 'artwork-size-card': 'calc(var(--space-8) * 8)', 'artwork-size-row': '3.5rem', 'artwork-size-bar': '2.5rem' },