5.6 KiB
drag-drop — 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-21 · Alcance: 89% — 8 de 9 knobs por token público
- Knobs de apariencia: 16 — público 8 · privado 1 · global 0 · literal 0 · sistema 7 (fuera del ratio)
- Contrato hoy (
lib/recipes/base.ts): 10 pública(s) —preview-padding-block,preview-padding-inline,preview-radius,preview-border-width,preview-bg,preview-fg,preview-font-family,preview-font-size,preview-shadow,preview-z· 2 privada(s) forward —_palette-solid,_palette-element - Eje
size: no · ficheros:drag-drop.css
1. Knobs fuera de alcance
1.1 Directo a primitivo global (0)
Ninguno.
1.2 A través de un privado (1)
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | drag-drop.css:68 |
[data-drag-drop-droppable][data-dragover] |
background |
var(--_drag-drop-palette-element) |
1.3 Literales (0)
Ninguno.
2. Sistema transversal (7) — 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 | drag-drop.css:38 |
[data-drag-drop-draggable][data-dragging] |
opacity |
var(--opacity-ghost) |
| 2 | drag-drop.css:43 |
[data-drag-drop-draggable][data-disabled] |
opacity |
var(--opacity-disabled) |
| 3 | drag-drop.css:47 |
[data-drag-drop-draggable]:focus-visible |
outline |
var(--focus-ring-width) solid var(--focus-ring-color) |
| 4 | drag-drop.css:63 |
[data-drag-drop-droppable][data-accepting] |
box-shadow |
inset 0 0 0 var(--ring-inset-width) var(--ring-inset-color, currentColor) |
| 5 | drag-drop.css:70 |
[data-drag-drop-droppable][data-dragover] |
box-shadow |
inset 0 0 0 var(--ring-inset-width) var(--ring-inset-color, currentColor) |
| 6 | drag-drop.css:75 |
[data-drag-drop-droppable][data-disabled] |
opacity |
var(--opacity-disabled) |
| 7 | drag-drop.css:79 |
[data-drag-drop-droppable]:focus-visible |
outline |
var(--focus-ring-width) solid var(--focus-ring-color) |
3. Privados de la receta — ¿de dónde sale su valor?
La receta no declara privados propios en su CSS.
Consumidos y no declarados en el CSS (vienen de base.ts o de un estilo inline del wrapper): --_drag-drop-palette-element, --_drag-drop-palette-solid.
4. Propuesta de corrección
4.1 Tokens a declarar en lib/recipes/base.ts (0)
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 (--drag-drop-…) |
scope TSC | valor propuesto | usos |
|---|
4.2 Sin nombre mecánico (1)
- ⚠ decisión: el privado que alimenta este knob no se declara en el CSS (viene de
base.tso de un estilo inline) — hay que resolverlo antes de nombrarlo — 1:background.
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
Medido 2026-08-21 (sonda ×2 = 0 diffs en 1.827 valores · 7 estados). Es un
componente pequeño con una anatomía clara: de sus 16 knobs, SIETE ya son
sistema (opacidades de fantasma y deshabilitado, anillos de foco, el anillo
inset de los droppables) y quedan nueve puntuables, seis de ellos en el
PREVIEW.
- Casi todo lo tokenizable vive en
[data-drag-drop-preview], el fantasma que sigue al puntero. Existe SÓLO durante el arrastre, así que ni la sonda ni el guard lo ven en reposo: se verifica forzando el nodo. - Los dos forwards de paleta se quedan privados (THM-2). El fondo del
[data-dragover]los lee a pelo y no admite un público sin duplicar la regla; elbordery elbox-shadowdel preview los combinan con una anchura y una sombra que SÍ son knobs, así que esas dos declaraciones pasan a alcance conpreview-border-widthypreview-shadow. - El
--ring-inset-*de los droppables no se toca: es el vocabulario del anillo del sistema, que la receta ALIMENTA con su acento (--ring-inset-color: var(--_drag-drop-palette-element)). Acuñar undroppable-ring-*sería vocabulario paralelo sobre un sistema transversal. preview-zya existía en el contrato — es el único público que este componente tenía, y se conserva tal cual.- El
paddingdel preview es un shorthand de dos valores → dos knobs lógicos (preview-padding-block+preview-padding-inline).