From 9c01c124023ab73ead2d9ce67e373540a2647861 Mon Sep 17 00:00:00 2001 From: dev Date: Sun, 17 May 2026 01:19:06 +0200 Subject: [PATCH] Move Eidos wrapper font sizes to recipes --- continue.md | 20 +++++++++++++++++--- src/uix/eidos/components/dialog/dialog.css | 2 +- src/uix/eidos/components/popover/popover.css | 8 ++++---- src/uix/eidos/generated/base.css | 3 +++ src/uix/eidos/lib/recipes/base.ts | 3 +++ 5 files changed, 28 insertions(+), 8 deletions(-) diff --git a/continue.md b/continue.md index 28cd73a97..a3b985aa8 100644 --- a/continue.md +++ b/continue.md @@ -36,9 +36,23 @@ Actualizacion Eidos components audit 2026-05-17: - `npx vitest run src/uix/eidos` -> 7 archivos, 79 tests OK. - `npm run check` -> 0 errores, 0 warnings. - Pendiente deliberado: - - Revisar tokens/recipes antes de cambiar `font-size: 0.9rem/0.85rem` en - `dialog.css` y `popover.css`; no se toco ahora para no mezclarlo con el - problema visual de tipografia observado en `/routes/uix`. + - Ninguno del bloque auditado. Los `font-size: 0.9rem/0.85rem` restantes + quedaron migrados despues de esta nota a tokens de recipe canónicos. + +Actualizacion Eidos recipe typography 2026-05-17: + +- Cerrado el ultimo hallazgo P3 de la auditoria de componentes: + - `dialog.css` ya no usa `font-size: 0.9rem`; consume + `--dialog-trigger-font-size`. + - `popover.css` ya no usa `font-size: 0.9rem` ni `0.85rem`; consume + `--popover-trigger-font-size` y `--popover-close-font-size`. + - Los nuevos tokens viven en `THEME_BASE_RECIPE_TOKENS` y se regenero + `src/uix/eidos/generated/base.css` con `npm run generate:eidos-css`. +- Validado: + - `npx vitest run src/uix/eidos/recipe-css-contract.test.ts src/uix/eidos/generated-css.test.ts` + -> 2 archivos, 4 tests OK. + - `npx vitest run src/uix/eidos` -> 7 archivos, 79 tests OK. + - `npm run check` -> 0 errores, 0 warnings. Actualizacion Eidos config audit 2026-05-17: diff --git a/src/uix/eidos/components/dialog/dialog.css b/src/uix/eidos/components/dialog/dialog.css index 7d3e52ea8..649611d88 100644 --- a/src/uix/eidos/components/dialog/dialog.css +++ b/src/uix/eidos/components/dialog/dialog.css @@ -30,7 +30,7 @@ background: var(--color-surface-raised); color: var(--color-content-primary); font: inherit; - font-size: 0.9rem; + font-size: var(--dialog-trigger-font-size); cursor: pointer; transition: background var(--duration-fast) var(--ease-default), diff --git a/src/uix/eidos/components/popover/popover.css b/src/uix/eidos/components/popover/popover.css index a05c439ca..8982604b1 100644 --- a/src/uix/eidos/components/popover/popover.css +++ b/src/uix/eidos/components/popover/popover.css @@ -14,7 +14,7 @@ background: var(--color-surface-raised); color: var(--color-content-primary); font: inherit; - font-size: 0.9rem; + font-size: var(--popover-trigger-font-size); cursor: pointer; transition: background var(--duration-fast) var(--ease-default), @@ -48,8 +48,8 @@ * z-index unless the content provides one via `getComputedStyle().zIndex`, * which only works for positioned elements. When modal=true, the overlay * (z=60) would otherwise paint over the wrapper, hiding the panel and -* making it unclickable. Soma exposes a public floating wrapper marker for -* cross-layer styling, so Eidos does not depend on Soma internals here. */ + * making it unclickable. Soma exposes a public floating wrapper marker for + * cross-layer styling, so Eidos does not depend on Soma internals here. */ [data-floating-wrapper]:has(> [data-popover-content]) { z-index: var(--popover-content-z); } @@ -227,7 +227,7 @@ color: var(--popover-close-color); box-shadow: none; font: inherit; - font-size: 0.85rem; + font-size: var(--popover-close-font-size); cursor: pointer; transition: background var(--popover-transition-duration) var(--popover-transition-ease), diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index 1391aa04e..679931260 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -471,6 +471,7 @@ --collapsible-transition-duration: var(--duration-normal); --collapsible-transition-ease: var(--ease-default); --collapsible-disabled-opacity: 0.5; + --dialog-trigger-font-size: var(--font-size-sm); --dialog-overlay-bg: var(--color-overlay); --dialog-overlay-opacity: 62%; --dialog-overlay-blur: 10px; @@ -591,6 +592,7 @@ --icon-stroke-width: var(--icon-stroke-width-md); --popover-content-z: 75; --popover-overlay-z: 60; + --popover-trigger-font-size: var(--font-size-sm); --popover-gap: var(--space-3); --popover-max-width: 32rem; --popover-min-width-sm: 14rem; @@ -618,6 +620,7 @@ --popover-transition-duration: var(--duration-fast); --popover-transition-ease: var(--ease-default); --popover-close-size: var(--control-height-xs); + --popover-close-font-size: var(--font-size-sm); --popover-close-radius: var(--radius-md); --popover-close-border-width: var(--border-width); --popover-close-bg: transparent; diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts index 0fd7a9809..16574a0be 100644 --- a/src/uix/eidos/lib/recipes/base.ts +++ b/src/uix/eidos/lib/recipes/base.ts @@ -208,6 +208,7 @@ export const THEME_BASE_RECIPE_TOKENS = { 'disabled-opacity': '0.5' }, dialog: { + 'trigger-font-size': 'var(--font-size-sm)', 'overlay-bg': 'var(--color-overlay)', 'overlay-opacity': '62%', 'overlay-blur': '10px', @@ -335,6 +336,7 @@ export const THEME_BASE_RECIPE_TOKENS = { popover: { 'content-z': '75', 'overlay-z': '60', + 'trigger-font-size': 'var(--font-size-sm)', gap: 'var(--space-3)', 'max-width': '32rem', 'min-width-sm': '14rem', @@ -362,6 +364,7 @@ export const THEME_BASE_RECIPE_TOKENS = { 'transition-duration': 'var(--duration-fast)', 'transition-ease': 'var(--ease-default)', 'close-size': 'var(--control-height-xs)', + 'close-font-size': 'var(--font-size-sm)', 'close-radius': 'var(--radius-md)', 'close-border-width': 'var(--border-width)', 'close-bg': 'transparent',