uix(tooltip): temable — 52 % → 75 %, y el plano ANULA SUS TRES VARIANTES

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.

Acuñados el desenfoque del velo `ghost` y las dos tintas de la flecha `outline`,
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, 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 queda fuera del conjunto
medido.

Instrumento: un tooltip abre por HOVER, no por clic (`openBy: 'hover'`, como
link-preview) — 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.

Gates: sonda 0 diffs en 256 valores × 8 estados · centinela 15/23 con las ocho
adjudicadas · censo 75 % · suite eidos con el rojo conocido ajeno · `rtl:check` 0
· `docs:check` 0.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
alpha-0.1-background
dev 2 months ago
parent 9476af6433
commit 6d199133c7

@ -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 |

@ -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: <razón> */` 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 `⚠`.
<!-- veredicto:start -->
_(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.
<!-- veredicto:end -->

@ -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.

@ -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 %**.

@ -619,6 +619,19 @@ export const SENTINEL_EXCEPTIONS: Record<string, Record<string, string>> = {
'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 <svg> child,
// the radius scale is an OPT-IN prop the demo does not set, and the four

@ -168,6 +168,13 @@ const COMPONENT_OVERRIDES: Record<
// (an `<a>`) 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

@ -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;
}

@ -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;

@ -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)',
},
// ─────────────────────────────────────────────────────────────────────

Loading…
Cancel
Save

Powered by TurnKey Linux.