go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'f882e1b9d9'
${ noResults }
svelte-kit-vice/docs/audit/theming/time-range-picker.md

298 lines
28 KiB
Raw Blame History Escape

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

# time-range-picker — 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-24 · **Alcance**: **20%** — 17 de 84 knobs por token público
- **Knobs de apariencia**: 88 — público 17 · privado 19 · global 33 · literal 15 · sistema 4 · excepción 0 _(los dos últimos, fuera del ratio)_
- **Contrato hoy** (`lib/recipes/base.ts`): 22 pública(s) — `accent-border`, `accent-track`, `accent-text`, `clock-column-gap`, `clock-width`, `clock-fg`, `clock-font-family`, `clock-font-size`, `clock-line-height`, `clock-hand-hour`, `clock-hand-minute`, `clock-hand-second`, `day-period-toggle-gap`, `day-period-toggle-radius`, `day-period-toggle-bg`, `day-period-toggle-border`, `day-period-item-min-width`, `day-period-item-padding-inline`, `day-period-item-padding-block`, `day-period-item-font-size`, `day-period-item-font-weight`, `day-period-item-fg`
- **Eje `size`**: sí · **ficheros**: `time-range-picker.css`
## 1. Knobs fuera de alcance
### 1.1 Directo a primitivo global (33)
| # | fichero:línea | selector | propiedad | valor |
| ---: | --- | --- | --- | --- |
| 1 | `time-range-picker.css:23` | `[data-time-range-picker]` | `color` | `var(--field-control-fg)` ⤴ prestado de `field` |
| 2 | `time-range-picker.css:24` | `[data-time-range-picker]` | `font-family` | `var(--field-font-family)` ⤴ prestado de `field` |
| 3 | `time-range-picker.css:26` | `[data-time-range-picker]` | `line-height` | `var(--field-control-line-height)` ⤴ prestado de `field` |
| 4 | `time-range-picker.css:107` | `[data-time-range-picker-trigger]` | `border` | `var(--field-control-border-width) solid var(--field-control-border)` ⤴ prestado de `field` |
| 5 | `time-range-picker.css:108` | `[data-time-range-picker-trigger]` | `border-radius` | `var(--field-control-radius)` ⤴ prestado de `field` |
| 6 | `time-range-picker.css:109` | `[data-time-range-picker-trigger]` | `background` | `var(--field-control-bg)` ⤴ prestado de `field` |
| 7 | `time-range-picker.css:135` | `[data-time-range-picker-trigger][data-disabled], [data-time-range-picker-trigger]:disabled` | `opacity` | `var(--field-disabled-opacity)` ⤴ prestado de `field` |
| 8 | `time-range-picker.css:153` | `[data-time-range-field-input] [data-time-range-picker-trigger]` | `border-radius` | `var(--radius-sm)` |
| 9 | `time-range-picker.css:155` | `[data-time-range-field-input] [data-time-range-picker-trigger]` | `color` | `var(--field-control-fg)` ⤴ prestado de `field` |
| 10 | `time-range-picker.css:169` | `[data-time-range-field-input] [data-time-range-picker-trigger]:focus-visible` | `background` | `var(--field-segment-active-bg)` ⤴ prestado de `field` |
| 11 | `time-range-picker.css:170` | `[data-time-range-field-input] [data-time-range-picker-trigger]:focus-visible` | `color` | `var(--field-segment-active-text)` ⤴ prestado de `field` |
| 12 | `time-range-picker.css:191` | `[data-time-range-picker-clock]` | `padding` | `var(--space-2-5)` |
| 13 | `time-range-picker.css:262` | `[data-time-range-picker-clock] [data-time-range-picker-day-period-toggle] [data-toggle-group-item][data-state='on']:hover` | `background` | `var(--toggle-palette-solid)` ⤴ prestado de `toggle` |
| 14 | `time-range-picker.css:263` | `[data-time-range-picker-clock] [data-time-range-picker-day-period-toggle] [data-toggle-group-item][data-state='on']:hover` | `border-color` | `var(--toggle-palette-solid)` ⤴ prestado de `toggle` |
| 15 | `time-range-picker.css:272` | `.time-range-picker-endpoint` | `gap` | `var(--space-2)` |
| 16 | `time-range-picker.css:285` | `.time-range-picker-endpoint:first-child::after` | `inline-size` | `var(--border-width)` |
| 17 | `time-range-picker.css:289` | `.time-range-picker-endpoint:first-child::after` | `background` | `var(--color-border-strong)` |
| 18 | `time-range-picker.css:296` | `.time-range-picker-endpoint-label` | `font-weight` | `var(--font-weight-semibold)` |
| 19 | `time-range-picker.css:298` | `.time-range-picker-endpoint-label` | `letter-spacing` | `var(--tracking-wider)` |
| 20 | `time-range-picker.css:299` | `.time-range-picker-endpoint-label` | `color` | `var(--color-content-secondary)` |
| 21 | `time-range-picker.css:308` | `.time-range-picker-slider-label` | `color` | `var(--color-content-muted)` |
| 22 | `time-range-picker.css:309` | `.time-range-picker-slider-label` | `font-family` | `var(--style-label-font-family)` |
| 23 | `time-range-picker.css:312` | `.time-range-picker-slider-label` | `font-weight` | `var(--font-weight-medium)` |
| 24 | `time-range-picker.css:313` | `.time-range-picker-slider-label` | `letter-spacing` | `var(--tracking-caps)` |
| 25 | `time-range-picker.css:330` | `.time-range-picker-scale` | `padding-inline` | `calc(var(--_slider-thumb-size, 1rem) / 2)` |
| 26 | `time-range-picker.css:342` | `.time-range-picker-scale-tick` | `color` | `var(--color-content-muted)` |
| 27 | `time-range-picker.css:343` | `.time-range-picker-scale-tick` | `font-family` | `var(--font-family-mono, var(--style-label-font-family))` |
| 28 | `time-range-picker.css:345` | `.time-range-picker-scale-tick` | `font-size` | `var(--font-size-xxs)` |
| 29 | `time-range-picker.css:354` | `.time-range-picker-scale-mark` | `background` | `var(--color-border-default)` |
| 30 | `time-range-picker.css:389` | `[data-time-range-picker-clock] [data-slider-thumb]` | `box-shadow` | `var(--slider-thumb-shadow), 0 0 0 2px var(--color-surface-default)` ⤴ prestado de `slider` |
| 31 | `time-range-picker.css:395` | `[data-time-range-picker-clock] [data-slider-thumb]:focus-visible` | `box-shadow` | `var(--slider-thumb-shadow), 0 0 0 2px var(--color-surface-default)` ⤴ prestado de `slider` |
| 32 | `time-range-picker.css:468` | `[data-time-range-picker][data-invalid] [data-time-range-picker-trigger]` | `border-color` | `var(--color-threat-border)` |
| 33 | `time-range-picker.css:475` | `[data-time-range-picker][data-invalid] [data-time-range-picker-trigger]:hover` | `border-color` | `var(--color-threat-border)` |
### 1.2 A través de un privado (19)
| # | fichero:línea | selector | propiedad | valor |
| ---: | --- | --- | --- | --- |
| 1 | `time-range-picker.css:20` | `[data-time-range-picker]` | `gap` | `var(--space-1-5) var(--_time-range-picker-gap)` |
| 2 | `time-range-picker.css:25` | `[data-time-range-picker]` | `font-size` | `var(--_time-range-picker-font-size)` |
| 3 | `time-range-picker.css:104` | `[data-time-range-picker-trigger]` | `inline-size` | `var(--_time-range-picker-height)` |
| 4 | `time-range-picker.css:105` | `[data-time-range-picker-trigger]` | `block-size` | `var(--_time-range-picker-height)` |
| 5 | `time-range-picker.css:120` | `[data-time-range-picker-trigger]:hover` | `border-color` | `var(--_time-range-picker-accent-border)` |
| 6 | `time-range-picker.css:121` | `[data-time-range-picker-trigger]:hover` | `background` | `var(--_time-range-picker-accent-track)` |
| 7 | `time-range-picker.css:122` | `[data-time-range-picker-trigger]:hover` | `color` | `var(--_time-range-picker-accent-text)` |
| 8 | `time-range-picker.css:126` | `[data-time-range-picker-trigger]:focus-visible` | `border-color` | `var(--_time-range-picker-accent-border)` |
| 9 | `time-range-picker.css:148` | `[data-time-range-field-input] [data-time-range-picker-trigger]` | `inline-size` | `calc(var(--_time-range-picker-height) - var(--space-2))` |
| 10 | `time-range-picker.css:149` | `[data-time-range-field-input] [data-time-range-picker-trigger]` | `block-size` | `calc(var(--_time-range-picker-height) - var(--space-2))` |
| 11 | `time-range-picker.css:162` | `[data-time-range-field-input] [data-time-range-picker-trigger]:hover` | `background` | `var(--_time-range-picker-accent-track)` |
| 12 | `time-range-picker.css:163` | `[data-time-range-field-input] [data-time-range-picker-trigger]:hover` | `color` | `var(--_time-range-picker-accent-text)` |
| 13 | `time-range-picker.css:295` | `.time-range-picker-endpoint-label` | `font-size` | `var(--_time-range-picker-label-font, var(--font-size-sm))` |
| 14 | `time-range-picker.css:311` | `.time-range-picker-slider-label` | `font-size` | `var(--_time-range-picker-channel-font, var(--font-size-xxs))` |
| 15 | `time-range-picker.css:388` | `[data-time-range-picker-clock] [data-slider-thumb]` | `border-color` | `var(--_time-range-picker-slider-accent, var(--_time-range-picker-accent-border))` |
| 16 | `time-range-picker.css:403` | `[data-time-range-picker-clock] [data-slider-range]` | `background` | `var(--_time-range-picker-slider-accent, var(--_time-range-picker-accent-border))` |
| 17 | `time-range-picker.css:408` | `[data-time-range-picker-clock] [data-endpoint='end'] [data-slider-range]` | `background` | `color-mix( in oklch, var(--_time-range-picker-slider-accent, var(--_time-range-picker-accent-border)) 70%, var(--color-content-muted) )` |
| 18 | `time-range-picker.css:441` | `[data-time-range-picker-day-period-item][data-checked]` | `background` | `var(--_time-range-picker-accent-track)` |
| 19 | `time-range-picker.css:442` | `[data-time-range-picker-day-period-item][data-checked]` | `color` | `var(--_time-range-picker-accent-text)` |
### 1.3 Literales (15)
| # | fichero:línea | selector | propiedad | valor |
| ---: | --- | --- | --- | --- |
| 1 | `time-range-picker.css:21` | `[data-time-range-picker]` | `inline-size` | `100%` |
| 2 | `time-range-picker.css:226` | `[data-time-range-picker-clock]` | `min-inline-size` | `14rem` |
| 3 | `time-range-picker.css:239` | `[data-time-range-picker-clock] [data-slider]` | `inline-size` | `100%` |
| 4 | `time-range-picker.css:314` | `.time-range-picker-slider-label` | `line-height` | `1` |
| 5 | `time-range-picker.css:321` | `.time-range-picker-slider` | `gap` | `2px` |
| 6 | `time-range-picker.css:323` | `.time-range-picker-slider` | `inline-size` | `100%` |
| 7 | `time-range-picker.css:328` | `.time-range-picker-scale` | `block-size` | `0.875rem` |
| 8 | `time-range-picker.css:329` | `.time-range-picker-scale` | `inline-size` | `100%` |
| 9 | `time-range-picker.css:341` | `.time-range-picker-scale-tick` | `gap` | `1px` |
| 10 | `time-range-picker.css:346` | `.time-range-picker-scale-tick` | `line-height` | `1` |
| 11 | `time-range-picker.css:352` | `.time-range-picker-scale-mark` | `inline-size` | `1px` |
| 12 | `time-range-picker.css:353` | `.time-range-picker-scale-mark` | `block-size` | `4px` |
| 13 | `time-range-picker.css:420` | `[data-time-range-picker-day-period-toggle]` | `padding` | `2px` |
| 14 | `time-range-picker.css:447` | `[data-time-range-picker-day-period-item] input[type='radio']` | `inline-size` | `1px` |
| 15 | `time-range-picker.css:448` | `[data-time-range-picker-day-period-item] input[type='radio']` | `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 (4) — 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 | `time-range-picker.css:128` | `[data-time-range-picker-trigger]:focus-visible` | `outline` | `var(--focus-ring-width) solid var(--focus-ring-color)` |
| 2 | `time-range-picker.css:398` | `[data-time-range-picker-clock] [data-slider-thumb]:focus-visible` | `outline` | `var(--focus-ring-width) solid var(--focus-ring-color)` |
| 3 | `time-range-picker.css:463` | `[data-time-range-picker][data-readonly] [data-time-range-picker-trigger], [data-time-range-picker][data-readonly] [data-time-range-picker-clear]` | `opacity` | `var(--opacity-muted)` |
| 4 | `time-range-picker.css:469` | `[data-time-range-picker][data-invalid] [data-time-range-picker-trigger]` | `box-shadow` | `0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--color-threat-border)` |
## 3. Privados de la receta — ¿de dónde sale su valor?
| privado | declaraciones | valor(es) | origen | ¿deriva de un público? |
| --- | ---: | --- | --- | :-: |
| `--_time-range-picker-height` | 4 | `var(--field-control-height-md)`, `var(--field-control-height-xs)`, `var(--field-control-height-sm)`, `var(--field-control-height-lg)` | global | no |
| `--_time-range-picker-gap` | 4 | `var(--space-1)`, `var(--space-0-5)`, `var(--space-1-5)` | global | no |
| `--_time-range-picker-font-size` | 4 | `var(--field-control-font-size-md)`, `var(--field-control-font-size-xs)`, `var(--field-control-font-size-sm)`, `var(--field-control-font-size-lg)` | global | no |
| `--_time-range-picker-accent-border` | 8 | `var(--time-range-picker-accent-border)`, `var(--color-secondary-border)`, `var(--color-neutral-border)`, `var(--color-affirm-border)`, `var(--color-fulfill-border)`, `var(--color-risk-border)` …(+2) | global, public | no |
| `--_time-range-picker-accent-track` | 8 | `var(--time-range-picker-accent-track)`, `var(--color-secondary-track)`, `var(--color-neutral-track)`, `var(--color-affirm-track)`, `var(--color-fulfill-track)`, `var(--color-risk-track)` …(+2) | global, public | no |
| `--_time-range-picker-accent-text` | 8 | `var(--time-range-picker-accent-text)`, `var(--color-secondary-text)`, `var(--color-neutral-text)`, `var(--color-affirm-text)`, `var(--color-fulfill-text)`, `var(--color-risk-text)` …(+2) | global, public | no |
| `--_time-range-picker-column-gap` | 1 | `var(--time-range-picker-clock-column-gap)` | public | **sí** |
| `--_time-range-picker-label-font` | 4 | `var(--font-size-sm)`, `var(--font-size-xxs)`, `var(--font-size-xs)`, `var(--font-size-md)` | global | no |
| `--_time-range-picker-channel-font` | 4 | `var(--font-size-xxs)`, `var(--font-size-xs)` | global | no |
| `--_time-range-picker-slider-accent` | 3 | `var(--time-range-picker-clock-hand-hour)`, `var(--time-range-picker-clock-hand-minute)`, `var(--time-range-picker-clock-hand-second)` | public | **sí** |
## 4. Propuesta de corrección
- **Consume la capa compartida `picker-shell`.** Un eje que la capa posee se consume como `var(--_x, var(--x))`; el consumidor **no acuña** `--time-range-picker-{eje}` para él — sería un vocabulario paralelo (README de `eidos/components`, «Capas compartidas» regla 2).
- **Consume tokens públicos de `field`, `slider`, `toggle`.** 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` (45)
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 (`--time-range-picker-…`) | scope TSC | valor propuesto | usos |
| --- | --- | --- | ---: |
| `hover-trigger-bg` | `root` | ⚠ `var(--time-range-picker-accent-track)` / `var(--color-secondary-track)` / `var(--color-neutral-track)` / `var(--color-affirm-track)` / `var(--color-fulfill-track)` / `var(--color-risk-track)` / `var(--color-threat-track)` / `var(--color-loss-track)` | 16 |
| `hover-trigger-fg` | `root` | ⚠ `var(--time-range-picker-accent-text)` / `var(--color-secondary-text)` / `var(--color-neutral-text)` / `var(--color-affirm-text)` / `var(--color-fulfill-text)` / `var(--color-risk-text)` / `var(--color-threat-text)` / `var(--color-loss-text)` | 16 |
| `hover-trigger-border` | `root` | ⚠ `var(--time-range-picker-accent-border)` / `var(--color-secondary-border)` / `var(--color-neutral-border)` / `var(--color-affirm-border)` / `var(--color-fulfill-border)` / `var(--color-risk-border)` / `var(--color-threat-border)` / `var(--color-loss-border)` | 8 |
| `trigger-border` | `root` | ⚠ `var(--time-range-picker-accent-border)` / `var(--color-secondary-border)` / `var(--color-neutral-border)` / `var(--color-affirm-border)` / `var(--color-fulfill-border)` / `var(--color-risk-border)` / `var(--color-threat-border)` / `var(--color-loss-border)` | 8 |
| `on-day-period-item-bg` | `root` | ⚠ `var(--time-range-picker-accent-track)` / `var(--color-secondary-track)` / `var(--color-neutral-track)` / `var(--color-affirm-track)` / `var(--color-fulfill-track)` / `var(--color-risk-track)` / `var(--color-threat-track)` / `var(--color-loss-track)` | 8 |
| `on-day-period-item-fg` | `root` | ⚠ `var(--time-range-picker-accent-text)` / `var(--color-secondary-text)` / `var(--color-neutral-text)` / `var(--color-affirm-text)` / `var(--color-fulfill-text)` / `var(--color-risk-text)` / `var(--color-threat-text)` / `var(--color-loss-text)` | 8 |
| `fg` | `root` | ⚠ `var(--field-control-fg)` / `var(--color-content-secondary)` / `var(--color-content-muted)` | 4 |
| `font-family` | `root` | ⚠ `var(--field-font-family)` / `var(--style-label-font-family)` / `var(--font-family-mono, var(--style-label-font-family))` | 3 |
| `font-size-md` | `size:md` | ⚠ `var(--field-control-font-size-md)` / `var(--font-size-sm)` / `var(--font-size-xxs)` | 3 |
| `font-size-xs` | `size:xs` | ⚠ `var(--field-control-font-size-xs)` / `var(--font-size-xxs)` | 3 |
| `font-size-sm` | `size:sm` | ⚠ `var(--field-control-font-size-sm)` / `var(--font-size-xs)` / `var(--font-size-xxs)` | 3 |
| `font-size-lg` | `size:lg` | ⚠ `var(--field-control-font-size-lg)` / `var(--font-size-md)` / `var(--font-size-xs)` | 3 |
| `gap` | `root` | ⚠ `var(--space-2)` / `2px` / `1px` | 3 |
| `trigger-width-md` | `size:md` | `var(--field-control-height-md)` | 2 |
| `trigger-width-xs` | `size:xs` | `var(--field-control-height-xs)` | 2 |
| `trigger-width-sm` | `size:sm` | `var(--field-control-height-sm)` | 2 |
| `trigger-width-lg` | `size:lg` | `var(--field-control-height-lg)` | 2 |
| `trigger-height-md` | `size:md` | `var(--field-control-height-md)` | 2 |
| `trigger-height-xs` | `size:xs` | `var(--field-control-height-xs)` | 2 |
| `trigger-height-sm` | `size:sm` | `var(--field-control-height-sm)` | 2 |
| `trigger-height-lg` | `size:lg` | `var(--field-control-height-lg)` | 2 |
| `trigger-radius` | `root` | ⚠ `var(--field-control-radius)` / `var(--radius-sm)` | 2 |
| `trigger-bg` | `root` | ⚠ `var(--field-control-bg)` / `var(--field-segment-active-bg)` | 2 |
| `trigger-fg` | `root` | ⚠ `var(--field-control-fg)` / `var(--field-segment-active-text)` | 2 |
| `width` | `root` | ⚠ `var(--border-width)` / `1px` | 2 |
| `bg` | `root` | ⚠ `var(--color-border-strong)` / `var(--color-border-default)` | 2 |
| `font-weight` | `root` | ⚠ `var(--font-weight-semibold)` / `var(--font-weight-medium)` | 2 |
| `letter-spacing` | `root` | ⚠ `var(--tracking-wider)` / `var(--tracking-caps)` | 2 |
| `height` | `root` | ⚠ `0.875rem` / `4px` | 2 |
| `clock-shadow` | `root` | `var(--slider-thumb-shadow), 0 0 0 2px var(--color-surface-default)` | 2 |
| `gap-md` | `size:md` | `var(--space-1)` | 1 |
| `gap-xs` | `size:xs` | `var(--space-0-5)` | 1 |
| `gap-sm` | `size:sm` | `var(--space-0-5)` | 1 |
| `gap-lg` | `size:lg` | `var(--space-1-5)` | 1 |
| `line-height` | `root` | `var(--field-control-line-height)` | 1 |
| `disabled-trigger-opacity` | `root` | `var(--field-disabled-opacity)` | 1 |
| `clock-width` _(ya existe)_ | `root` | `14rem` | 1 |
| `hover-clock-bg` | `host` | `var(--toggle-palette-solid)` | 1 |
| `hover-clock-border` | `host` | `var(--toggle-palette-solid)` | 1 |
| `padding-inline` | `root` | `calc(var(--_slider-thumb-size, 1rem) / 2)` | 1 |
| `font-size` | `root` | `var(--font-size-xxs)` | 1 |
| `day-period-item-width` | `root` | `1px` | 1 |
| `day-period-item-height` | `root` | `1px` | 1 |
| `invalid-trigger-border` | `root` | `var(--color-threat-border)` | 1 |
| `hover-invalid-trigger-border` | `root` | `var(--color-threat-border)` | 1 |
### 4.2 Sin nombre mecánico (12)
- **⚠ 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: `border` es shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4)** — 1: `border`.
- **⚠ decisión: `padding` es shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4)** — 2: `padding`.
- **⚠ decisión: `1` 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** — 2: `line-height`.
- **ya alcanzable: el privado `--_time-range-picker-slider-accent` deriva de un público (`var(--time-range-picker-clock-hand-hour)`, `var(--time-range-picker-clock-hand-minute)`, `var(--time-range-picker-clock-hand-second)`) — sin acción; el censo lo cuenta como no alcanzable por el límite del regex** — 3: `border-color`, `background`.
### 4.3 Avisos sobre los tokens propuestos (9)
- **el privado `--_time-range-picker-gap` debe pasar a leer este público (o desaparecer)** — `--time-range-picker-gap-md`, `--time-range-picker-gap-xs`, `--time-range-picker-gap-sm`, `--time-range-picker-gap-lg`
- **el privado `--_time-range-picker-font-size` debe pasar a leer este público (o desaparecer)** — `--time-range-picker-font-size-md`, `--time-range-picker-font-size-xs`, `--time-range-picker-font-size-sm`, `--time-range-picker-font-size-lg`
- **el privado `--_time-range-picker-height` debe pasar a leer este público (o desaparecer)** — `--time-range-picker-trigger-width-md`, `--time-range-picker-trigger-width-xs`, `--time-range-picker-trigger-width-sm`, `--time-range-picker-trigger-width-lg`, `--time-range-picker-trigger-height-md`, `--time-range-picker-trigger-height-xs`, `--time-range-picker-trigger-height-sm`, `--time-range-picker-trigger-height-lg`
- **el privado `--_time-range-picker-accent-border` debe pasar a leer este público (o desaparecer)** — `--time-range-picker-hover-trigger-border`, `--time-range-picker-trigger-border`
- **el privado `--_time-range-picker-accent-track` debe pasar a leer este público (o desaparecer)** — `--time-range-picker-hover-trigger-bg`, `--time-range-picker-on-day-period-item-bg`
- **el privado `--_time-range-picker-accent-text` debe pasar a leer este público (o desaparecer)** — `--time-range-picker-hover-trigger-fg`, `--time-range-picker-on-day-period-item-fg`
- **el privado `--_time-range-picker-label-font` debe pasar a leer este público (o desaparecer)** — `--time-range-picker-font-size-md`, `--time-range-picker-font-size-xs`, `--time-range-picker-font-size-sm`, `--time-range-picker-font-size-lg`
- **el privado `--_time-range-picker-channel-font` debe pasar a leer este público (o desaparecer)** — `--time-range-picker-font-size-md`, `--time-range-picker-font-size-xs`, `--time-range-picker-font-size-sm`, `--time-range-picker-font-size-lg`
- **⚠ decisión: el valor es una expresión — el token puede llevar la expresión entera o sólo su término variable** — `--time-range-picker-padding-inline`
### 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 -->
**Revisión 2026-08-20 — verificación previa a implementación (Opus).**
**Análisis (§1–§3): CORRECTO en cifras** (88 · 0 · 6 · 61 · 17 · 4), **con un
hallazgo que el censo no podía ver**: los «privados ajenos» `--_time-field-*`
NO vienen de time-field — **los declara este mismo CSS con el prefijo
equivocado** (`time-range-picker.css:10-15`: `--_time-field-height`,
`--_time-field-gap`, `--_time-field-font-size`, `--_time-field-accent-*`).
Mal prefijo = el censo los clasifica `global`, y si un `time-field` real
convive cerca, los nombres se cruzan. Primer paso obligado: **renombrarlos a
`--_time-range-picker-*`** (mecánico, computed idéntico) — con `git ls-files`
por si algo más los toca.
**Propuesta (§4.1): NO APTA tal cual.** Tres causas verificadas:
1. **Colisiones por estado no parseado**: `clock-bg` mezcla los colores de
las DOS manecillas y los ticks (primary/secondary/neutral border) porque
la derivación no lee los attrs de manecilla; `width`/`height`/`bg`/`gap`
colapsan separadores y pistas. Las partes SÍ existen y están limpias
(`clock`, `trigger`, `day-period-toggle/-item`, `hour/minute/second-slider`,
`clear`) — el nombre correcto sale de parte+estado a mano.
2. **Es un COMPUESTO** (Field + Slider + Toggle + capa `picker-shell`): los
knobs que leen `--field-*`, `--slider-*` públicos se teman en las fichas de
SUS dueños, no aquí; `padding-inline:
calc(var(--_slider-thumb-size,…)/2)` consume un privado DE SLIDER
(geometría acoplada al thumb) — o slider publica ese eje o la expresión se
ancla de otro modo: decisión del dueño, no un token de este componente.
Es el mandato «Field composition» de `theming-audit.md` §5.3-3.
3. **`hover-clock-bg/border = var(--toggle-palette-solid)` con scope `host` es
inválido**: referencia la paleta de OTRO componente; si procede, es un
bloque `composition:` (tsc.md §cross-recipe), nunca un token propio.
**Lo genuinamente acuñable aquí** (válido de §4.1, con el patrón Sidebar):
la franja day-period (`day-period-toggle-*`, `day-period-item-*` — separando
el estado `on-`), la cara del reloj (`clock-gap/fg/font-*/shadow/width` —
partiendo las dos anchuras 22rem/14rem en `clock-width` y
`clock-rail-width` o análogo tras mirar el selector), y los acentos
`accent-border/track/text` **promovidos a públicos** que los privados
renombrados pasen a leer. Los `font-size-{k}` por talla: el root estampa
`data-size` ✓ pero hay DOS escalas mezcladas (la del campo y la del HUD
`xxs`) — separar por parte antes de nombrar. Los 17 literales: anotar o
tokenizar uno a uno (varios son geometría de manecilla: candidatos a
excepción con razón).
**Bloqueos de firma**: mandato field-composition (§B, sin ejecutar) ·
publicación del eje del thumb en `slider` · D-TH.4 (orden: familia tiempo va
en B7).
---
**EJECUTADO 2026-08-20 (parcial, como su gemelo).** Alcance **0 % → 19 %** ·
contrato **0 → 21 claves públicas**.
Hecho: renombradas las **56 referencias con prefijo ajeno** (`--_time-field-*`
declarado dentro de este CSS, y una mención en el wrapper) a
`--_time-range-picker-*`; acento a público; y a contrato el reloj de dos
columnas (`clock-column-gap`, `clock-width`, `clock-fg`, `clock-font-*`), las
tres manecillas y la franja AM/PM completa (`day-period-toggle-*`,
`day-period-item-*`).
Confirmado al ejecutar lo que la revisión anotó: el `hover-clock-bg/border` que
la propuesta quería acuñar lee `--toggle-palette-solid` — paleta de OTRO
componente —, así que NO se acuña: si procede, es un bloque `composition:`
(tsc.md), y eso es decisión. Igual el `padding-inline` que consume
`--_slider-thumb-size`: el eje lo publica su dueño o no se publica.
Verificación: **diff de computed = 0** sobre 725 valores en 8 estados ·
`component:audit` PASS · suite eidos sin rojos nuevos · `rtl:check` 0 ·
`docs:check` 0.
El 81 % restante es préstamo con dueño (Field, Slider, Toggle, `picker-shell`) y
espera el mandato de composición de Field, no este eje.
<!-- veredicto:end -->
Reference in new issue View Git Blame Copy Permalink

Powered by TurnKey Linux.