6.4 KiB
context-menu — alcance de tema: análisis y propuesta
Generado por
node --import tsx/esm scripts/theming-census.ts --report. Lo medido y la propuesta se regeneran; el Veredicto (§5) se conserva. Vista de conjunto: README · método y protocolo:PLAN-theming.md§1, §2, §7.
- Medido: 2026-08-25 · Alcance: 87% — 26 de 30 knobs por token público
- Knobs de apariencia: 33 — público 26 · privado 0 · global 1 · literal 3 · sistema 3 · excepción 0 · estructural 0 · puente 0 · canal 0 (los cinco últimos, fuera del ratio)
- Contrato hoy (
lib/recipes/base.ts): 28 pública(s) —content-fg,item-fg,item-line-height,chevron-stroke,heading-fg,heading-font-weight,heading-letter-spacing,open-trigger-outline-width,open-trigger-outline,open-trigger-radius,content-min-width,content-max-height,content-padding,content-radius,content-font-size,item-gap,item-height,item-padding-inline,item-padding-block,item-radius,hover-item-bg,hover-item-fg,item-disabled-opacity,heading-padding-inline,heading-padding-block,heading-font-size,separator-bg,separator-margin-block - Eje
size: no · ficheros:context-menu.css
1. Knobs fuera de alcance
1.1 Directo a primitivo global (1)
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | context-menu.css:36 |
[data-context-menu-content], [data-context-menu-sub-content] |
font-family |
var(--style-label-font-family) |
1.2 A través de un privado (0)
Ninguno.
1.3 Literales (3)
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | context-menu.css:130 |
[data-context-menu-sub-trigger]::after |
inline-size |
0.625rem |
| 2 | context-menu.css:131 |
[data-context-menu-sub-trigger]::after |
block-size |
0.625rem |
| 3 | context-menu.css:156 |
[data-context-menu-separator] |
block-size |
1px |
1.4 Excepciones firmadas (0) — 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.
2. Sistema transversal (3) — 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 | context-menu.css:135 |
[data-context-menu-sub-trigger]::after |
opacity |
var(--opacity-muted) |
| 2 | context-menu.css:197 |
[data-context-menu-arrow] polygon |
fill |
var(--depth-overlay-surface) |
| 3 | context-menu.css:206 |
[data-context-menu-arrow] path |
stroke |
var(--depth-overlay-border) |
3. Privados de la receta — ¿de dónde sale su valor?
La receta no declara privados propios en su CSS.
4. Propuesta de corrección
- Consume la capa compartida
list-surface. Un eje que la capa posee se consume comovar(--_x, var(--x)); el consumidor no acuña--context-menu-{eje}para él — sería un vocabulario paralelo (README deeidos/components, «Capas compartidas» regla 2). - Consume la capa compartida
menu-indicator. Un eje que la capa posee se consume comovar(--_x, var(--x)); el consumidor no acuña--context-menu-{eje}para él — sería un vocabulario paralelo (README deeidos/components, «Capas compartidas» regla 2).
4.1 Tokens a declarar en lib/recipes/base.ts (4)
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
al final) y theming §6.7 (slots de color, modificador delante). Un token con
DOS valores distintos es una colisión de nombre: son dos knobs, o el nombre
no distingue lo que debería — se marca ⚠.
token (--context-menu-…) |
scope TSC | valor propuesto | usos |
|---|---|---|---|
content-font-family |
root |
var(--style-label-font-family) |
1 |
sub-trigger-width |
root |
0.625rem |
1 |
sub-trigger-height |
root |
0.625rem |
1 |
separator-height |
root |
1px |
1 |
4.4 Lo que hay que comprobar a mano (PLAN-theming §1.3 · §7.4)
- Privado que no deriva de un público — §3 lo marca; el privado debe leer el público o desaparecer.
- Velo o acento en el nodo equivocado (
archetype: 'item'en un envoltorio, unbackgrounden shorthand que mata la capa de estado) — se mide desde el píxel hacia arriba. - Doble animación al mover un sello a una superficie con animación propia — registro de
animationstart/animationend. - Diff de computed = 0 en reposo · hover · abierto · disabled · foco, por talla, antes y después.
- Centinela por token nuevo: valor imposible en el root → el nodo lo sigue. Si no, el token miente.
5. Veredicto
EJECUTADO 2026-08-22 — 53 % → 90 %, 11 claves. global a CERO.
Cosido el cromo propio del panel y del disparador: tipografía y tinta del
contenido, tinta e interlineado de la fila, el galón del submenú (dos bordes
girados 45°, un solo trazo), el encabezado de grupo (tinta, peso y tracking de
versalitas) y el contorno DISCONTINUO que marca el disparador abierto — el
estilo dashed es identidad de la afordancia; el grosor y el color son knobs.
Dos limpiezas de paso: el font-family leía
var(--style-label-font-family, var(--style-label-font-family)) —respaldo de
sí mismo— y el peso del encabezado llevaba un 500 muerto detrás de un token
que ya vale 500.
El instrumento no sabía abrir un menú contextual: se abre con clic DERECHO
y con nada más, así que sonda y guard medían UN nodo. Los dos aprenden el modo
(openBy: 'contextmenu' en el guard, clic derecho en la sonda): 14 nodos en el
estado abierto, y el guard pasa de un baremo ciego a 27/29.
Dos adjudicaciones medidas, y una es la TERCERA ocurrencia del mismo
hallazgo: content-font-family no puede ganar porque el plano overlay
impone la tipografía del panel (§12.9, pendiente de firma — ya medido en
popover y en float-panel). La otra es el ítem deshabilitado, que la demo no
monta.
Sonda antes/después: 0 diffs en 600 valores (8 estados).