# color-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](./README.md) · método y protocolo:
> [`PLAN-theming.md`](../../process/PLAN-theming.md) §1, §2, §7.

- **Medido**: 2026-08-23 · **Alcance**: **93%** — 14 de 15 knobs por token público
- **Knobs de apariencia**: 15 — público 14 · privado 0 · global 1 · literal 0 · sistema 0 · excepción 1 _(los dos últimos, fuera del ratio)_
- **Contrato hoy** (`lib/recipes/base.ts`): 26 pública(s) — `segment-padding-inline-xs`, `segment-padding-inline-sm`, `segment-padding-inline-md`, `segment-padding-inline-lg`, `segment-padding-inline-xl`, `placeholder-fg`, `literal-fg`, `segment-radius`, `segment-fg`, `segment-invalid-fg`, `segment-readonly-bg`, `segment-readonly-fg`, `segment-readonly-decoration`, `swatch-size-xs`, `swatch-size-sm`, `swatch-size-md`, `swatch-size-lg`, `swatch-size-xl`, `format-select-fg`, `transition-duration`, `transition-ease`, `disabled-opacity`, `separator-bg`, `separator-thickness`, `segment-min-width`, `hex-segment-min-width`
- **Eje `size`**: sí · **ficheros**: `color-field.css`

## 1. Knobs fuera de alcance

### 1.1 Directo a primitivo global (1)

| # | fichero:línea | selector | propiedad | valor |
| ---: | --- | --- | --- | --- |
| 1 | `color-field.css:122` | `[data-color-field-swatch][data-color-swatch]` | `border-radius` | `var(--field-control-radius)` ⤴ prestado de `field` |

### 1.2 A través de un privado (0)

_Ninguno._

### 1.3 Literales (0)

_Ninguno._

### 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 | `color-field.css:158` | `[data-color-field-format-select][data-select]` | `inline-size` | `fit-content` |
## 2. Sistema transversal (0) — informativo, fuera del ratio

Un tema los alcanza **a nivel de sistema**, por diseño (recipe-contract §2).

_Ninguno._

## 3. Privados de la receta — ¿de dónde sale su valor?

| privado | declaraciones | valor(es) | origen | ¿deriva de un público? |
| --- | ---: | --- | --- | :-: |
| `--_color-field-segment-padding-inline` | 5 | `var(--color-field-segment-padding-inline-md)`, `var(--color-field-segment-padding-inline-xs)`, `var(--color-field-segment-padding-inline-sm)`, `var(--color-field-segment-padding-inline-lg)`, `var(--color-field-segment-padding-inline-xl)` | public | **sí** |
| `--_color-field-swatch-size` | 5 | `var(--color-field-swatch-size-md)`, `var(--color-field-swatch-size-xs)`, `var(--color-field-swatch-size-sm)`, `var(--color-field-swatch-size-lg)`, `var(--color-field-swatch-size-xl)` | public | **sí** |

## 4. Propuesta de corrección

- **Consume la capa compartida `list-surface`.** Un eje que la capa posee se consume como `var(--_x, var(--x))`; el consumidor **no acuña** `--color-field-{eje}` para él — sería un vocabulario paralelo (README de `eidos/components`, «Capas compartidas» regla 2).
- **Consume la capa compartida `field-segment-state`.** Un eje que la capa posee se consume como `var(--_x, var(--x))`; el consumidor **no acuña** `--color-field-{eje}` para él — sería un vocabulario paralelo (README de `eidos/components`, «Capas compartidas» regla 2).
- **Consume tokens públicos de `field`.** Un token prestado importa la semántica de su dueño: la corrección no es duplicarlo con prefijo propio, sino la decisión de familia que la auditoría de fase 1 dejó registrada (`theming-audit.md` §B, familia calendar).
- **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` (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
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 (`--color-field-…`) | scope TSC | valor propuesto | usos |
| --- | --- | --- | ---: |
| `swatch-radius` | `root` | `var(--field-control-radius)` | 1 |
| `format-select-width` | `root` | `fit-content` | 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, un `background` en 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

<!-- veredicto:start -->

**EJECUTADO 2026-08-23 — 56 % → 93 %.** Cuatro claves nuevas (22 → 26), un
literal firmado, un préstamo adjudicado **y TRECE tokens preexistentes medidos
uno a uno**: el componente nunca había pasado por R-5.4. Diff de computed **0
sobre 2.336 valores en 8 estados**.

**Las cuatro claves.** El componente es un Field y no realiasa nada suyo, así
que lo que faltaba era pequeño y muy concreto:

- **`separator-bg` + `separator-thickness`** — los separadores de canal («,»,
  « / ») se pintan como líneas verticales de un pelo, y ni su tinta
  (`--color-border-default`) ni su grosor (`1px`) eran alcanzables. El `1px` ES
  `--border-width`: es un filete, y `dropdown-menu.separator-thickness` lee la
  misma familia. El mismo nodo renderizado como GLIFO («#», «%») ya tenía su
  `literal-fg` — una parte, dos tratamientos, y ahora los dos con mando.
- **`segment-min-width` (3ch) + `hex-segment-min-width` (6ch)** — el ancho fijo
  por número de caracteres, que impide el reflujo al teclear (99 → 100). Los
  gemelos `date-field` y `time-field` cargan el mismo hecho DENTRO de un
  `calc(2ch + 2 * var(--…-segment-padding-inline))`, así que el suyo ya viajaba
  con un token y el censo lo daba por alcanzable; aquí iba a pelo. Precedentes
  de unidad `ch` en el catálogo: `editable.area-min-inline-size` (12ch) y
  `tags-input.input-min-inline-size` (8ch).

**El 7 % que queda es una fila, y es doctrina.** El chip de color lee
`var(--field-control-radius)` porque IGUALA el radio del control — el comentario
del CSS lo dice: «so the chip tracks the control». Qué DECIDE ese token: el
radio del control de campo. Un `swatch-radius` propio daría un segundo mando
para una decisión ajena y permitiría desincronizar el chip del campo que lo
contiene. Préstamo con dueño, se tema en la ficha de `field` — la misma lectura
que el `--slider-disabled-opacity` de `waveform`, el mismo día.

**Y el `fit-content` del conmutador es identidad**: el trigger se mide POR su
contenido, no contra una longitud. Firmado con su anotación, fuera del ratio.

**Las trece adjudicaciones, todas PROBADAS forzando sobre nodos reales.** La
demo arranca con valor, en `md`, editable y con tres formatos: cada estado y
cada paso de talla que no monta no tiene nodo que pintar. Seis de estado
(`placeholder`, `invalid`, los tres de `readonly`, `disabled`), cuatro de la
escala del chip (14 → 77, 16 → 77, 20 → 77, 32 → 77 px), la etiqueta del formato
BLOQUEADO —que sólo existe con un único formato permitido, así que se midió
desmarcando `rgb` y `hsl` **con los chips de la propia demo**, no fabricando el
nodo— y las dos de transición.

**Las dos de transición costaron dos diagnósticos falsos, y el segundo es nuevo.**
El primero es la ley ya escrita: el guard congela `transition` para hacer
medible todo lo demás, así que los tokens que SON la transición no se pueden
mover bajo él. El segundo fue mío: midiéndolas a mano leí `0s` y sospeché del
`@media (prefers-reduced-motion: reduce)` del final del fichero — lo comprobé
corriendo con `reducedMotion: 'no-preference'` y **seguía dando 0s**, porque el
nodo que había cogido (`querySelector('[data-color-field-segment]')`) es el
PRIMER segmento, que es un `literal` y declara `transition: none` de su propia
cosecha. Sobre un segmento editable: `0.12s → 11.5s` y
`cubic-bezier(0.4,0,0.2,1) → steps(7)`. **Mide el nodo que pinta, no el primero
que casa el selector.**

**Verificación**: sonda antes/después **0 diffs** (2.336 valores · 8 estados · 10
nodos) · R-5.4 13/26 con las trece restantes adjudicadas y medidas, cero STALE ·
`component:audit` PASS · censo 93 % · `eidos-lint` 14 morfo-backed / 14
eidos-only / **0 invalid, 0 class-hooks**.

<!-- veredicto:end -->