You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
10 KiB
10 KiB
field — 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-22 · Alcance: 73% — 49 de 67 knobs por token público
- Knobs de apariencia: 72 — público 49 · privado 1 · global 7 · literal 10 · sistema 5 · excepción 1 (los dos últimos, fuera del ratio)
- Contrato hoy (
lib/recipes/base.ts): 60 pública(s) —gap-xs,gap-sm,gap-md,gap-lg,gap-xl,font-family,label-gap,label-font-weight,label-line-height,label-fg,invalid-label-fg,disabled-label-fg,floating-label-top,layout-column-gap,required-fg,control-height-xs,control-height-sm,control-height-md,control-height-lg,control-height-xl,segment-height,control-padding-inline-xs,control-padding-inline-sm,control-padding-inline-md,control-padding-inline-lg,control-padding-inline-xl,control-gap-xs,control-gap-sm,control-gap-md,control-gap-lg,control-gap-xl,control-font-size-xs,control-font-size-sm,control-font-size-md,control-font-size-lg,control-font-size-xl,control-line-height,control-font-weight,control-radius,control-border-width,control-border,hover-control-border,focus-control-border,invalid-control-border,control-bg,control-ghost-border,control-ghost-bg,control-bg-readonly,disabled-control-bg,control-fg,control-placeholder-fg,affix-fg,segment-active-bg,segment-active-text,message-line-height,helper-fg,error-fg,transition-duration,transition-ease,disabled-opacity· 1 privada(s) forward —_palette-text - Eje
size: sí · ficheros:field-control-trigger.css,field-segment-state.css,field.css
1. Knobs fuera de alcance
1.1 Directo a primitivo global (7)
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | field-control-trigger.css:34 |
[data-field-control-trigger] |
border-radius |
var(--radius-sm) |
| 2 | field-control-trigger.css:36 |
[data-field-control-trigger] |
color |
var(--color-content-secondary) |
| 3 | field-control-trigger.css:51 |
[data-field-control-trigger]:hover:not([data-disabled]):not(:disabled) |
color |
var(--color-content-primary) |
| 4 | field-control-trigger.css:57 |
[data-field-control-trigger]:focus-visible |
color |
var(--color-content-primary) |
| 5 | field.css:143 |
[data-field-optional-indicator] |
color |
var(--color-content-muted) |
| 6 | field.css:145 |
[data-field-optional-indicator] |
font-weight |
var(--font-weight-regular) |
| 7 | field.css:284 |
[data-field][data-floating-label] > [data-field-label] |
padding-inline |
var(--space-1) |
1.2 A través de un privado (1)
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | field.css:320 |
[data-field][data-floating-label]:focus-within > [data-field-label] |
color |
var(--_field-palette-text) |
1.3 Literales (10)
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | field-control-trigger.css:30 |
[data-field-control-trigger] |
inline-size |
1.75em |
| 2 | field-control-trigger.css:31 |
[data-field-control-trigger] |
block-size |
1.75em |
| 3 | field-control-trigger.css:45 |
[data-field-control-trigger] :is(svg, [data-icon]) |
inline-size |
1em |
| 4 | field-control-trigger.css:46 |
[data-field-control-trigger] :is(svg, [data-icon]) |
block-size |
1em |
| 5 | field.css:13 |
[data-field] |
inline-size |
100% |
| 6 | field.css:139 |
[data-field-required-indicator] |
line-height |
1 |
| 7 | field.css:146 |
[data-field-optional-indicator] |
line-height |
1 |
| 8 | field.css:159 |
[data-field-control] |
inline-size |
100% |
| 9 | field.css:208 |
[data-field-input] |
inline-size |
100% |
| 10 | field.css:299 |
[data-field][data-floating-label] > [data-field-control] |
inline-size |
100% |
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.
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | field.css:144 |
[data-field-optional-indicator] |
font-size |
0.85em |
2. Sistema transversal (5) — 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 | field-control-trigger.css:50 |
[data-field-control-trigger]:hover:not([data-disabled]):not(:disabled) |
background-image |
linear-gradient(var(--state-hover), var(--state-hover)) |
| 2 | field-control-trigger.css:55 |
[data-field-control-trigger]:focus-visible |
outline |
var(--focus-ring-width) solid var(--focus-ring-color) |
| 3 | field-control-trigger.css:63 |
[data-field-control-trigger][data-disabled], [data-field-control-trigger]:disabled |
opacity |
var(--opacity-disabled) |
| 4 | field-segment-state.css:33 |
[data-field-segment]:not([data-segment='literal']):not([data-readonly]):not([data-disabled]):not( :focus ):not(:focus-visible):hover |
background-image |
linear-gradient(var(--state-hover), var(--state-hover)) |
| 5 | field.css:187 |
[data-field-control]:focus-within |
outline |
var(--focus-ring-width) solid var(--focus-ring-color) |
3. Privados de la receta — ¿de dónde sale su valor?
| privado | declaraciones | valor(es) | origen | ¿deriva de un público? |
|---|---|---|---|---|
--_field-gap |
5 | var(--field-gap-md), var(--field-gap-xs), var(--field-gap-sm), var(--field-gap-lg), var(--field-gap-xl) |
public | sí |
--_field-control-height |
5 | var(--field-control-height-md), var(--field-control-height-xs), var(--field-control-height-sm), var(--field-control-height-lg), var(--field-control-height-xl) |
public | sí |
--_field-control-padding-inline |
5 | var(--field-control-padding-inline-md), var(--field-control-padding-inline-xs), var(--field-control-padding-inline-sm), var(--field-control-padding-inline-lg), var(--field-control-padding-inline-xl) |
public | sí |
--_field-control-gap |
5 | var(--field-control-gap-md), var(--field-control-gap-xs), var(--field-control-gap-sm), var(--field-control-gap-lg), var(--field-control-gap-xl) |
public | sí |
--_field-control-font-size |
5 | var(--field-control-font-size-md), var(--field-control-font-size-xs), var(--field-control-font-size-sm), var(--field-control-font-size-lg), var(--field-control-font-size-xl) |
public | sí |
--_field-control-border |
2 | var(--field-control-border), var(--field-control-ghost-border) |
public | sí |
--_field-control-bg |
4 | var(--field-control-bg), var(--field-control-ghost-bg) |
public | sí |
Consumidos y no declarados en el CSS (vienen de base.ts o de un estilo inline del wrapper): --_field-palette-text.
4. Propuesta de corrección
- Tiene eje
size: los tokens dimensionales van por talla ({part}-{eje}-{k}) apuntando al bundle--size-{k}-*, nunca al primitivo crudo (theming §5; el guardrecipe-css-contractprohíbe el primitivo).
4.1 Tokens a declarar en lib/recipes/base.ts (9)
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 (--field-…) |
scope TSC | valor propuesto | usos |
|---|---|---|---|
control-trigger-width |
root |
⚠ 1.75em / 1em |
2 |
control-trigger-height |
root |
⚠ 1.75em / 1em |
2 |
control-trigger-fg |
root |
⚠ var(--color-content-secondary) / var(--color-content-primary) |
2 |
control-trigger-radius |
root |
var(--radius-sm) |
1 |
hover-control-trigger-fg |
root |
var(--color-content-primary) |
1 |
optional-indicator-fg |
root |
var(--color-content-muted) |
1 |
optional-indicator-font-size |
root |
0.85em |
1 |
optional-indicator-font-weight |
root |
var(--font-weight-regular) |
1 |
label-padding-inline |
root |
var(--space-1) |
1 |
4.2 Sin nombre mecánico (7)
- ⚠ decisión:
100%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 — 4:inline-size. - ⚠ decisión:
1es un valor identidad o geometría de layout, no un knob de tema — el perímetro de «knob» es D-TH.2, sin firmar — 2:line-height. - ⚠ 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:color.
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
(pendiente — lo escribe el autor; se conserva al regenerar)