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.
13 KiB
13 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-20 · Alcance: 51% — 35 de 68 knobs por token público
- Knobs de apariencia: 73 — público 35 · privado 15 · global 7 · literal 11 · sistema 5 (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-color,label-color-invalid,label-color-disabled,floating-label-top,layout-column-gap,required-color,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,control-border-hover,control-border-focus,control-border-invalid,control-bg,control-ghost-border,control-ghost-bg,control-bg-readonly,control-bg-disabled,control-color,control-placeholder-color,affix-color,segment-active-bg,segment-active-text,message-line-height,helper-color,error-color,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 (15)
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | field.css:12 |
[data-field] |
gap |
var(--_field-gap) |
| 2 | field.css:76 |
[data-field][data-orientation='horizontal'] |
row-gap |
var(--_field-gap) |
| 3 | field.css:80 |
[data-field][data-orientation='horizontal'] > [data-field-label] |
min-block-size |
var(--_field-control-height) |
| 4 | field.css:99 |
[data-field][data-orientation='responsive'] |
row-gap |
var(--_field-gap) |
| 5 | field.css:103 |
[data-field][data-orientation='responsive'] > [data-field-label] |
min-block-size |
var(--_field-control-height) |
| 6 | field.css:122 |
[data-field-label] |
font-size |
calc(var(--_field-control-font-size) - (var(--font-size-md) - var(--font-size-sm))) |
| 7 | field.css:158 |
[data-field-control] |
gap |
var(--_field-control-gap) |
| 8 | field.css:161 |
[data-field-control] |
min-block-size |
var(--_field-control-height) |
| 9 | field.css:162 |
[data-field-control] |
padding-inline |
var(--_field-control-padding-inline) |
| 10 | field.css:165 |
[data-field-control] |
background |
var(--_field-control-bg) |
| 11 | field.css:168 |
[data-field-control] |
font-size |
var(--_field-control-font-size) |
| 12 | field.css:240 |
[data-field-helper-text], [data-field-error-text] |
font-size |
calc(var(--_field-control-font-size) - (var(--font-size-md) - var(--font-size-sm))) |
| 13 | field.css:285 |
[data-field][data-floating-label] > [data-field-label] |
font-size |
var(--_field-control-font-size) |
| 14 | field.css:315 |
[data-field][data-floating-label]:focus-within > [data-field-label], [data-field][data-floating-label]:has(:is(input, textarea):not([type='hidden']):not(:placeholder-shown)) > [data-field-label] |
background |
var(--_field-control-bg) |
| 15 | field.css:320 |
[data-field][data-floating-label]:focus-within > [data-field-label] |
color |
var(--_field-palette-text) |
1.3 Literales (11)
| # | 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:144 |
[data-field-optional-indicator] |
font-size |
0.85em |
| 8 | field.css:146 |
[data-field-optional-indicator] |
line-height |
1 |
| 9 | field.css:159 |
[data-field-control] |
inline-size |
100% |
| 10 | field.css:208 |
[data-field-input] |
inline-size |
100% |
| 11 | field.css:299 |
[data-field][data-floating-label] > [data-field-control] |
inline-size |
100% |
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 (21)
- ya alcanzable: el privado
--_field-gapderiva de un público (var(--field-gap-md),var(--field-gap-xs),var(--field-gap-sm),var(--field-gap-lg)) — sin acción; el censo lo cuenta como no alcanzable por el límite del regex — 3:gap,row-gap. - ⚠ 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. - ya alcanzable: el privado
--_field-control-heightderiva de un público (var(--field-control-height-md),var(--field-control-height-xs),var(--field-control-height-sm),var(--field-control-height-lg)) — sin acción; el censo lo cuenta como no alcanzable por el límite del regex — 3:min-block-size. - ya alcanzable: el privado
--_field-control-font-sizederiva de un público (var(--field-control-font-size-md),var(--field-control-font-size-xs),var(--field-control-font-size-sm),var(--field-control-font-size-lg)) — sin acción; el censo lo cuenta como no alcanzable por el límite del regex — 4:font-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. - ya alcanzable: el privado
--_field-control-gapderiva de un público (var(--field-control-gap-md),var(--field-control-gap-xs),var(--field-control-gap-sm),var(--field-control-gap-lg)) — sin acción; el censo lo cuenta como no alcanzable por el límite del regex — 1:gap. - ya alcanzable: el privado
--_field-control-padding-inlinederiva de un público (var(--field-control-padding-inline-md),var(--field-control-padding-inline-xs),var(--field-control-padding-inline-sm),var(--field-control-padding-inline-lg)) — sin acción; el censo lo cuenta como no alcanzable por el límite del regex — 1:padding-inline. - ya alcanzable: el privado
--_field-control-bgderiva de un público (var(--field-control-bg),var(--field-control-ghost-bg)) — sin acción; el censo lo cuenta como no alcanzable por el límite del regex — 2:background. - ⚠ 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)