diff --git a/docs/audit/theming/README.md b/docs/audit/theming/README.md index be9da8380..44e5ee82b 100644 --- a/docs/audit/theming/README.md +++ b/docs/audit/theming/README.md @@ -10,8 +10,8 @@ - **Medido**: 2026-08-23 · **162 recetas** con CSS + **8 componentes sin receta** = 170 fichas, el árbol entero de `eidos/components/` - **La pregunta**: ¿cuánto de la apariencia de cada componente puede cambiar un tema **sin tocar el sistema ni la receta**? -- **Alcance global**: **65%** — 2988 de 4619 knobs pasan por un token público del componente -- **Reparto**: público 2988 · privado 321 · global 861 · literal 449 · sistema transversal 509 · excepción firmada 93 _(los dos últimos, fuera del ratio)_ +- **Alcance global**: **65%** — 2992 de 4618 knobs pasan por un token público del componente +- **Reparto**: público 2992 · privado 320 · global 858 · literal 448 · sistema transversal 509 · excepción firmada 94 _(los dos últimos, fuera del ratio)_ - **Sin token público propio**: 24 · **alcance < 20 %**: 14 · **alcance 100 %**: 22 · **con eje `size`**: 58 ## Cómo se lee @@ -138,7 +138,6 @@ La columna «contrato» cuenta las claves **públicas** del bloque del component | [skeleton](./skeleton.md) | 45% | 11 | 5 | 5 | 0 | 1 | 0 | 9 | – | | [text-scramble](./text-scramble.md) | 50% | 4 | 2 | 0 | 0 | 2 | 0 | 0 | – | | [split-button](./split-button.md) | 50% | 2 | 1 | 0 | 1 | 0 | 0 | 1 | y | -| [tooltip](./tooltip.md) | 52% | 22 | 11 | 6 | 3 | 1 | 1 | 20 | y | | [waveform](./waveform.md) | 55% | 11 | 6 | 0 | 1 | 4 | 0 | 10 | y | | [sidebar](./sidebar.md) | 55% | 45 | 23 | 0 | 14 | 5 | 3 | 50 | – | | [color-field](./color-field.md) | 56% | 16 | 9 | 0 | 2 | 5 | 0 | 22 | y | @@ -175,6 +174,7 @@ La columna «contrato» cuenta las claves **públicas** del bloque del component | [color-picker](./color-picker.md) | 75% | 82 | 59 | 7 | 2 | 11 | 3 | 71 | y | | [editable](./editable.md) | 75% | 44 | 30 | 7 | 1 | 2 | 4 | 56 | y | | [avatar](./avatar.md) | 75% | 36 | 27 | 3 | 0 | 6 | 0 | 0 | y | +| [tooltip](./tooltip.md) | 75% | 21 | 15 | 5 | 0 | 0 | 1 | 23 | y | | [switch](./switch.md) | 76% | 22 | 16 | 4 | 1 | 0 | 1 | 51 | y | | [file-upload](./file-upload.md) | 76% | 61 | 45 | 9 | 1 | 4 | 2 | 98 | y | | [timeline](./timeline.md) | 77% | 47 | 36 | 10 | 0 | 1 | 0 | 45 | y | diff --git a/docs/audit/theming/tooltip.md b/docs/audit/theming/tooltip.md index d51d061b1..f457df542 100644 --- a/docs/audit/theming/tooltip.md +++ b/docs/audit/theming/tooltip.md @@ -5,22 +5,18 @@ > Vista de conjunto: [README](./README.md) · método y protocolo: > [`PLAN-theming.md`](../../process/PLAN-theming.md) §1, §2, §7. -- **Medido**: 2026-08-23 · **Alcance**: **52%** — 11 de 21 knobs por token público -- **Knobs de apariencia**: 22 — público 11 · privado 6 · global 3 · literal 1 · sistema 1 · excepción 0 _(los dos últimos, fuera del ratio)_ -- **Contrato hoy** (`lib/recipes/base.ts`): 20 pública(s) — `content-z`, `max-width`, `padding-block-sm`, `padding-inline-sm`, `padding-block-md`, `padding-inline-md`, `padding-block-lg`, `padding-inline-lg`, `font-size-sm`, `font-size-md`, `font-size-lg`, `font-family`, `font-weight`, `line-height`, `radius`, `border-width`, `bg`, `fg`, `border`, `shadow` +- **Medido**: 2026-08-23 · **Alcance**: **75%** — 15 de 20 knobs por token público +- **Knobs de apariencia**: 21 — público 15 · privado 5 · global 0 · literal 0 · sistema 1 · excepción 1 _(los dos últimos, fuera del ratio)_ +- **Contrato hoy** (`lib/recipes/base.ts`): 23 pública(s) — `content-z`, `max-width`, `padding-block-sm`, `padding-inline-sm`, `padding-block-md`, `padding-inline-md`, `padding-block-lg`, `padding-inline-lg`, `font-size-sm`, `font-size-md`, `font-size-lg`, `font-family`, `font-weight`, `line-height`, `radius`, `border-width`, `bg`, `fg`, `border`, `shadow`, `ghost-blur`, `outline-arrow-bg`, `outline-arrow-border` - **Eje `size`**: sí · **ficheros**: `tooltip.css` ## 1. Knobs fuera de alcance -### 1.1 Directo a primitivo global (3) +### 1.1 Directo a primitivo global (0) -| # | fichero:línea | selector | propiedad | valor | -| ---: | --- | --- | --- | --- | -| 1 | `tooltip.css:77` | `[data-tooltip-content][data-variant='ghost']` | `backdrop-filter` | `blur(var(--blur-md))` | -| 2 | `tooltip.css:127` | `[data-tooltip-content][data-variant='outline'] ~ [data-tooltip-arrow] polygon, [data-tooltip-content][data-variant='outline'] [data-tooltip-arrow] polygon` | `fill` | `var(--color-surface-default)` | -| 3 | `tooltip.css:131` | `[data-tooltip-content][data-variant='outline'] ~ [data-tooltip-arrow] path, [data-tooltip-content][data-variant='outline'] [data-tooltip-arrow] path` | `stroke` | `var(--color-border-strong)` | +_Ninguno._ -### 1.2 A través de un privado (6) +### 1.2 A través de un privado (5) | # | fichero:línea | selector | propiedad | valor | | ---: | --- | --- | --- | --- | @@ -29,29 +25,28 @@ | 3 | `tooltip.css:26` | `[data-tooltip-content]` | `block-size` | `var(--_tooltip-content-height-override, auto)` | | 4 | `tooltip.css:27` | `[data-tooltip-content]` | `min-block-size` | `var(--_tooltip-content-min-height-override, auto)` | | 5 | `tooltip.css:38` | `[data-tooltip-content]` | `background` | `var(--_tooltip-bg)` | -| 6 | `tooltip.css:40` | `[data-tooltip-content]` | `box-shadow` | `var(--_tooltip-shadow)` | -### 1.3 Literales (1) +### 1.3 Literales (0) -| # | fichero:línea | selector | propiedad | valor | -| ---: | --- | --- | --- | --- | -| 1 | `tooltip.css:152` | `[data-tooltip-content][data-state='instant-open']` | `opacity` | `1` | +_Ninguno._ -### 1.4 Excepciones firmadas (0) — fuera del ratio +### 1.4 Excepciones firmadas (1) — fuera del ratio Literales que llevan su anotación `/* literal: */` en la propia declaración: la válvula de recipe-contract §3, la misma que honra `component-audit`. **Una desviación firmada no es deuda** — se listan para que la razón se lea, no para acuñarlas. -_Ninguno._ +| # | fichero:línea | selector | propiedad | valor | +| ---: | --- | --- | --- | --- | +| 1 | `tooltip.css:155` | `[data-tooltip-content][data-state='instant-open']` | `opacity` | `1` | ## 2. Sistema transversal (1) — informativo, fuera del ratio Un tema los alcanza **a nivel de sistema**, por diseño (recipe-contract §2). | # | fichero:línea | selector | propiedad | valor | | ---: | --- | --- | --- | --- | -| 1 | `tooltip.css:181` | `[data-tooltip-trigger]:focus-visible` | `outline` | `var(--focus-ring-width) solid var(--focus-ring-color)` | +| 1 | `tooltip.css:184` | `[data-tooltip-trigger]:focus-visible` | `outline` | `var(--focus-ring-width) solid var(--focus-ring-color)` | ## 3. Privados de la receta — ¿de dónde sale su valor? @@ -60,9 +55,9 @@ Un tema los alcanza **a nivel de sistema**, por diseño (recipe-contract §2). | `--_tooltip-padding-block` | 3 | `var(--tooltip-padding-block-md)`, `var(--tooltip-padding-block-sm)`, `var(--tooltip-padding-block-lg)` | public | **sí** | | `--_tooltip-padding-inline` | 3 | `var(--tooltip-padding-inline-md)`, `var(--tooltip-padding-inline-sm)`, `var(--tooltip-padding-inline-lg)` | public | **sí** | | `--_tooltip-font-size` | 3 | `var(--tooltip-font-size-md)`, `var(--tooltip-font-size-sm)`, `var(--tooltip-font-size-lg)` | public | **sí** | -| `--_tooltip-bg` | 3 | `var(--tooltip-bg)`, `transparent`, `color-mix(in srgb, var(--color-surface-overlay) 70%, transparent)` | global, literal, public | no | +| `--_tooltip-bg` | 3 | `var(--tooltip-bg)`, `transparent`, `color-mix(in srgb, var(--color-surface-overlay) 70%, transparent)` | exception, global, public | no | | `--_tooltip-border` | 3 | `var(--tooltip-border)`, `var(--color-border-strong)`, `transparent` | global, literal, public | no | -| `--_tooltip-shadow` | 3 | `var(--tooltip-shadow)`, `none` | literal, public | no | +| `--_tooltip-shadow` | 3 | `var(--tooltip-shadow)`, `none` | exception, public | no | | `--_tooltip-width` | 1 | `var(--_tooltip-content-width-override, var(--_tooltip-match-anchor-width, auto))` | private | no | | `--_tooltip-max-width` | 1 | `var(--_tooltip-content-max-width-override, var(--tooltip-max-width))` | public | **sí** | | `--_tooltip-max-height` | 1 | `var( --_tooltip-content-max-height-override, var(--floating-available-height, calc(100dvh - var(--space-4))) )` | global | no | @@ -73,7 +68,7 @@ Consumidos y **no declarados en el CSS** (vienen de `base.ts` o de un estilo inl - **Tiene eje `size`**: los tokens dimensionales van por talla (`{part}-{eje}-{k}`) apuntando al bundle `--size-{k}-*`, nunca al primitivo crudo (theming §5; el guard `recipe-css-contract` prohíbe el primitivo). -### 4.1 Tokens a declarar en `lib/recipes/base.ts` (6) +### 4.1 Tokens a declarar en `lib/recipes/base.ts` (2) Valor **verbatim** del CSS de hoy: el default no se mueve, sólo cambia quién puede moverlo. Nombres derivados de recipe-contract §1 (ejes lógicos, talla @@ -84,22 +79,17 @@ no distingue lo que debería — se marca `⚠`. | token (`--tooltip-…`) | scope TSC | valor propuesto | usos | | --- | --- | --- | ---: | | `content-bg` | `root` | ⚠ `var(--tooltip-bg)` / `transparent` / `color-mix(in srgb, var(--color-surface-overlay) 70%, transparent)` | 3 | -| `content-shadow` | `root` | ⚠ `var(--tooltip-shadow)` / `none` | 3 | | `content-width` | `root` | `var(--_tooltip-content-width-override, var(--_tooltip-match-anchor-width, auto))` | 1 | -| `ghost-content-backdrop-filter` | `root` | `blur(var(--blur-md))` | 1 | -| `outline-content-fill` | `root` | `var(--color-surface-default)` | 1 | -| `outline-content-stroke` | `root` | `var(--color-border-strong)` | 1 | ### 4.2 Sin nombre mecánico (4) - **⚠ decisión: el privado que alimenta este knob no se declara en el CSS (viene de `base.ts` o de un estilo inline) — hay que resolverlo antes de nombrarlo** — 3: `min-inline-size`, `block-size`, `min-block-size`. - **⚠ decisión: `1` es un valor identidad o geometría de layout, no un knob de tema — el perímetro de «knob» es D-TH.2, sin firmar** — 1: `opacity`. -### 4.3 Avisos sobre los tokens propuestos (3) +### 4.3 Avisos sobre los tokens propuestos (2) - **el privado `--_tooltip-width` debe pasar a leer este público (o desaparecer)** — `--tooltip-content-width` - **el privado `--_tooltip-bg` debe pasar a leer este público (o desaparecer)** — `--tooltip-content-bg` -- **el privado `--_tooltip-shadow` debe pasar a leer este público (o desaparecer)** — `--tooltip-content-shadow` ### 4.4 Lo que hay que comprobar a mano (PLAN-theming §1.3 · §7.4) @@ -113,6 +103,46 @@ no distingue lo que debería — se marca `⚠`. -_(pendiente — lo escribe el autor; se conserva al regenerar)_ +**EJECUTADO 2026-08-23 — 52 % → 75 %**, 3 claves nuevas y 4 literales anotados. +Subiría más, pero **medir destapó que cinco de sus claves no pintan: el plano +`overlay` le gana la superficie ENTERA**. + +Lo acuñado: el desenfoque del velo `ghost` (`ghost-blur`) y las dos tintas de la +flecha en `outline` (relleno y trazo), que se pintan por selector HERMANO desde +el contenido. + +**⚠⚠ EL PLANO NO SÓLO SE QUEDA LA TIPOGRAFÍA: SE QUEDA EL FONDO, EL BORDE Y LA +SOMBRA.** `[data-depth='overlay']` declara las tres con la misma especificidad +que `[data-tooltip-content]` y más tarde en la cascada. Medido: escribir +`--tooltip-bg`, `--tooltip-border` o `--tooltip-shadow` no mueve NADA, mientras +`--depth-overlay-surface` / `-border` / `-shadow` repintan el panel. Con +`font-family` y `line-height`, son **cinco públicos que no alcanzan**. + +**Y la consecuencia visual es peor que la contable: las tres variantes son la +misma.** Medidas `solid`, `outline` y `ghost` con el panel abierto: fondo, borde +y sombra IDÉNTICOS en las tres. `outline` es indistinguible de `solid`; `ghost` +sólo se diferencia por un `backdrop-filter` que no se ve porque la superficie +que tiene delante es opaca. La máquina de variantes existe, alimenta privados y +el plano la anula entera. → §13. + +Por eso **no se acuñó `ghost-bg`**: lo intenté, el centinela lo delató y se +retiró antes de commitear. Las cinco que ya estaban quedan **adjudicadas por +escrito, no retiradas**: son la FUENTE de esa máquina de variantes, y borrarlas +dejaría inválidos los privados sin arreglar nada. La corrección de fondo es la +precedencia del plano — la misma firma §12.9 que arrastran menubar, dropdown-menu +y combobox. + +**`content-z` sí está vivo, pero en otro nodo**: aterriza en el ENVOLTORIO +flotante (90 → 4321), que no lleva ningún `data-tooltip-*` y por eso queda fuera +del conjunto medido. + +**Instrumento**: un tooltip abre por HOVER, no por clic —`openBy: 'hover'`, como +link-preview—, y con eso pasó de 0/24 a 14/24. El resto se midió con el +interruptor `open` de la demo: un panel abierto por puntero exige el ratón +quieto sobre el disparador toda la pasada, y no es medida fiable. + +Verificación: **diff de computed = 0** sobre 256 valores en 8 estados · +centinela **15/23** con las ocho adjudicadas · censo 75 % · suite eidos con el +rojo conocido ajeno · `rtl:check` 0 · `docs:check` 0. diff --git a/docs/next-features.md b/docs/next-features.md index 5da533895..1ebdbc9e3 100644 --- a/docs/next-features.md +++ b/docs/next-features.md @@ -1223,5 +1223,23 @@ Lo que `chart` destapó (2026-08-22): (`urls` en el override)—, pero la solución de fondo es que un componente del canon tenga su demo. +- **⚠⚠ EL PLANO `overlay` ANULA LAS TRES VARIANTES DE `tooltip`** (medido + 2026-08-23). No es sólo la tipografía de §12.9: `[data-depth='overlay']` + declara `background`, `border` y `box-shadow` con la misma especificidad que + `[data-tooltip-content]` y más tarde en la cascada, así que gana. Medido con el + panel abierto: `--tooltip-bg` / `-border` / `-shadow` no mueven nada, + `--depth-overlay-surface` / `-border` / `-shadow` repintan. + + **Consecuencia visual**: `solid`, `outline` y `ghost` computan el MISMO fondo, + el MISMO borde y la MISMA sombra. `outline` es indistinguible de `solid`; + `ghost` sólo aporta un `backdrop-filter` invisible tras una superficie opaca. + La receta tiene una máquina de variantes completa (privados por variante) que + el plano neutraliza entera. + + Las cinco claves afectadas quedan ADJUDICADAS, no retiradas: son la fuente de + esa máquina y borrarlas dejaría los privados inválidos sin arreglar el fondo. + La decisión es la de §12.9 —qué manda, el plano o la receta— y aquí ya no es + sólo tipografía: es la superficie. + **Deps**: ninguna. Son mejoras del instrumental del eje, ejecutables cuando estorben. diff --git a/docs/process/PLAN-theming.md b/docs/process/PLAN-theming.md index 5e9188230..16b656ed6 100644 --- a/docs/process/PLAN-theming.md +++ b/docs/process/PLAN-theming.md @@ -455,6 +455,24 @@ de commit. Sin artefacto, el paso no se ha hecho. ## 8. Registro +- 2026-08-23 — **`tooltip` 52 % → 75 %** (3 claves, 4 literales anotados) **y el + plano `overlay` ANULA SUS TRES VARIANTES**. Global 65 %. + + Acuñados el desenfoque del velo `ghost` y las dos tintas de la flecha + `outline`. **No se acuñó `ghost-bg`**: lo intenté, el centinela lo delató y se + retiró antes de commitear. + + **⚠⚠ El plano no sólo se queda la tipografía: se queda el fondo, el borde y la + sombra.** Medido: `--tooltip-bg`/`-border`/`-shadow` no mueven nada, + `--depth-overlay-*` repinta. Y la consecuencia visual es peor que la contable: + `solid`, `outline` y `ghost` computan lo MISMO — `outline` es indistinguible + de `solid`. → §13. Las cinco claves quedan adjudicadas, no retiradas: son la + fuente de la máquina de variantes. + + Instrumento: el tooltip abre por HOVER (`openBy: 'hover'`, como link-preview) — + 0/24 → 14/24—, y el resto se midió con el interruptor `open` de la demo, porque + un panel abierto por puntero exige el ratón quieto toda la pasada. + - 2026-08-23 — **`time-range-field` 29 % → 100 %** (4 claves), gemelo exacto de `date-range-field` **defecto incluido**: la misma clave `row-gap` alimentando el `column-gap`. Global **64 % → 65 %**. diff --git a/scripts/theming-sentinel-exceptions.ts b/scripts/theming-sentinel-exceptions.ts index c21e02cae..f4a21a161 100644 --- a/scripts/theming-sentinel-exceptions.ts +++ b/scripts/theming-sentinel-exceptions.ts @@ -619,6 +619,19 @@ export const SENTINEL_EXCEPTIONS: Record> = { 'link-radius': 'the link only rounds under :focus-visible (the ring corner), and the guard blurs on purpose; focused from the keyboard 2026-08-23 -> reaches (4px -> 1234px)' }, + tooltip: { + // Measured 2026-08-23 with the demo's `open` switch (a hover-opened panel is + // not reliable enough to measure: it needs the pointer parked on the trigger + // for the whole pass). + 'content-z': 'it lands on the floating WRAPPER, which carries no data-tooltip-* attr and so is outside the measured set; read on the wrapper -> reaches (90 -> 4321)', + 'bg': 'SUPERSEDED by the overlay plane: [data-depth=overlay] declares background at the same specificity and later in the cascade, so the recipe loses. Measured: --tooltip-bg moves nothing, --depth-overlay-surface repaints the panel. Registered in next-features 13 with the variant fallout', + 'border': 'same supersession: --depth-overlay-border repaints it, --tooltip-border does not', + 'shadow': 'same supersession: --depth-overlay-shadow repaints it, --tooltip-shadow does not', + 'font-family': 'same plane, the typography half of it (PLAN 12.9, unsigned)', + 'line-height': 'same plane, same open decision', + 'outline-arrow-bg': 'the arrow is painted through a SIBLING selector that needs the content carrying data-variant=outline AND the panel open; measured with the demo switch -> reaches (oklch(0.9911 0 0) -> rgb(1,2,3))', + 'outline-arrow-border': 'same sibling rule; measured -> reaches (oklch(0.7921 0 0) -> rgb(1,2,3))' + }, button: { // Measured one by one 2026-08-23. The icon scale needs a real child, // the radius scale is an OPT-IN prop the demo does not set, and the four diff --git a/scripts/theming-sentinel.ts b/scripts/theming-sentinel.ts index fbbcbc18d..5a1157d52 100644 --- a/scripts/theming-sentinel.ts +++ b/scripts/theming-sentinel.ts @@ -168,6 +168,13 @@ const COMPONENT_OVERRIDES: Record< // (an ``) navigates instead of revealing the panel, so the portaled // content never enters the document and 32 of its 35 tokens read dead. 'link-preview': { openBy: 'hover' }, + // A tooltip opens on POINTER-OVER too: clicking its trigger does nothing and + // the panel never enters the document — 24 of its 24 tokens read dead + // (measured 2026-08-23). + tooltip: { + openBy: 'hover', + sweepAttr: { attr: 'data-variant', values: ['solid', 'outline', 'ghost'] } + }, // Not a panel to open but a VARIANT to switch on: the demo boots with // `showBorder=false`, and the frame owns three of the seven tokens. The // chip is outside the component, so clicking it cannot poison a hover diff --git a/src/uix/eidos/components/tooltip/tooltip.css b/src/uix/eidos/components/tooltip/tooltip.css index 47346ddae..0169eb566 100644 --- a/src/uix/eidos/components/tooltip/tooltip.css +++ b/src/uix/eidos/components/tooltip/tooltip.css @@ -65,16 +65,19 @@ /* `solid` is the default surface — the base block already paints it. */ [data-tooltip-content][data-variant='outline'] { - --_tooltip-bg: transparent; + --_tooltip-bg: transparent; /* literal: the outline variant IS transparent — identity, not a knob */ --_tooltip-border: var(--color-border-strong); - --_tooltip-shadow: none; + --_tooltip-shadow: none; /* literal: this variant IS shadowless — identity, not a knob */ } [data-tooltip-content][data-variant='ghost'] { + /* El plano `overlay` pinta la superficie y gana a esta declaración: se deja + con su valor literal porque acuñar un token aquí sería acuñar una mentira + (medido 2026-08-23; §12.9). */ --_tooltip-bg: color-mix(in srgb, var(--color-surface-overlay) 70%, transparent); --_tooltip-border: transparent; - --_tooltip-shadow: none; - backdrop-filter: blur(var(--blur-md)); + --_tooltip-shadow: none; /* literal: this variant IS shadowless — identity, not a knob */ + backdrop-filter: blur(var(--tooltip-ghost-blur)); } /* ── Arrow ──────────────────────────────────────────────────────────────── */ @@ -124,11 +127,11 @@ /* Outline variant: transparent bg → fill with the surface, stroke the edges. */ [data-tooltip-content][data-variant='outline'] ~ [data-tooltip-arrow] polygon, [data-tooltip-content][data-variant='outline'] [data-tooltip-arrow] polygon { - fill: var(--color-surface-default); + fill: var(--tooltip-outline-arrow-bg); } [data-tooltip-content][data-variant='outline'] ~ [data-tooltip-arrow] path, [data-tooltip-content][data-variant='outline'] [data-tooltip-arrow] path { - stroke: var(--color-border-strong); + stroke: var(--tooltip-outline-arrow-border); } /* ── Entrance / exit ───────────────────────────────────────────────────────── @@ -149,7 +152,7 @@ /* instant-open: no entrance — element appears at final position. */ [data-tooltip-content][data-state='instant-open'] { - opacity: 1; + opacity: 1; /* literal: an open tooltip is fully visible — identity, not a knob */ transform: none; } diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index af1d3ca0e..373bb62d2 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -3900,6 +3900,9 @@ --tooltip-fg: var(--color-content-primary); --tooltip-border: color-mix( in srgb, var(--color-border-default) 84%, var(--tooltip-bg) ); --tooltip-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo); + --tooltip-ghost-blur: var(--blur-md); + --tooltip-outline-arrow-bg: var(--color-surface-default); + --tooltip-outline-arrow-border: var(--color-border-strong); --box-display: revert-layer; --box-position: revert-layer; --box-width: revert-layer; diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts index 5e8ba2bc2..7ec6da08c 100644 --- a/src/uix/eidos/lib/recipes/base.ts +++ b/src/uix/eidos/lib/recipes/base.ts @@ -6147,7 +6147,17 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({ bg: 'var(--color-surface-overlay)', fg: 'var(--color-content-primary)', border: 'color-mix( in srgb, var(--color-border-default) 84%, var(--tooltip-bg) )', - shadow: 'var(--depth-overlay-shadow), var(--depth-overlay-halo)' + shadow: 'var(--depth-overlay-shadow), var(--depth-overlay-halo)', + // La variante `ghost`: un velo translúcido sobre lo que haya detrás. Su + // superficie y su desenfoque son suyos — la sólida usa `bg`. + // NO `ghost-bg`: la superficie del panel la pinta el PLANO `overlay` + // (misma especificidad, más tarde en la cascada), así que un token de fondo + // aquí mentiría — medido 2026-08-23, igual que `bg`/`border`/`shadow`. + 'ghost-blur': 'var(--blur-md)', + // La flecha de la variante `outline`: se rellena con la superficie y se + // perfila, porque el panel es transparente y el caret no puede serlo. + 'outline-arrow-bg': 'var(--color-surface-default)', + 'outline-arrow-border': 'var(--color-border-strong)', }, // ─────────────────────────────────────────────────────────────────────