go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

uix(time-range-picker): el reloj de dos columnas y la franja AM/PM pasan a tokens

Browse Source 
Sexto del eje theme-reach, y gemelo de time-picker: mismo reparto, mismas
razones. A contrato lo que el componente inventa — el reloj de dos columnas (su
separación, ancho, tinta y tipografía), los colores de las tres manecillas y la
franja AM/PM entera — y sin tocar el lado con forma de campo, que lee `--field-*`
porque compone Field.

Y el mismo defecto de prefijo que su gemelo: 56 referencias declaraban
`--_time-field-*` dentro de este CSS (más una mención en el wrapper). Renombradas
a `--_time-range-picker-*`, con el diff de computed en cero.

Dos cosas que la revisión había marcado como acuñables y NO lo son, confirmadas
al ejecutar: el realce del reloj al puntero lee `--toggle-palette-solid`, que es
la paleta de otro componente — si procede, es un bloque de composición cruzada,
y eso es decisión, no corrección; y el `padding-inline` del raíl consume el
tamaño del pulgar del Slider, un eje que publica su dueño o no se publica.

Verificación: diff de computed vacío sobre 725 valores en ocho estados ·
component:audit PASS · suite eidos sin rojos nuevos · rtl:check 0 · docs:check 0.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
alpha-0.1-background
dev 2 months ago
parent e4fcdd62ee
commit 68eb8af260
10 changed files with 320 additions and 235 deletions
Show Stats Download Patch File Download Diff File

20
docs/audit/theming/README.md
Unescape View File

@ -10,9 +10,9 @@
- **Medido**: 2026-08-20 · **162 recetas** con CSS + **8 componentes sin receta** = 170 fichas, el árbol entero de `eidos/components/`
- **La pregunta**: ¿cuánto de la apariencia de cada componente puede cambiar un tema **sin tocar el sistema ni la receta**?
- **Alcance global**: **36%** — 1803 de 4971 knobs pasan por un token público del componente
- **Reparto**: público 1803 · privado 871 · global 1691 · literal 606 · sistema transversal 232 _(fuera del ratio)_
- **Sin token público propio**: 58 · **alcance < 20 %**: 56 · **alcance 100 %**: 6 · **con eje `size`**: 79
- **Alcance global**: **37%** — 1819 de 4971 knobs pasan por un token público del componente
- **Reparto**: público 1819 · privado 885 · global 1663 · literal 604 · sistema transversal 232 _(fuera del ratio)_
- **Sin token público propio**: 57 · **alcance < 20 %**: 56 · **alcance 100 %**: 6 · **con eje `size`**: 79
## Cómo se lee
@ -73,10 +73,10 @@ theming §6.7 lo pone delante (`hover-bg`). Las fichas proponen la forma
| 1 | [palabras](./palabras.md) | 363 | 22% | 471 | 0 |
| 2 | [chronos](./chronos.md) | 236 | 1% | 245 | 9 |
| 3 | [range-calendar](./range-calendar.md) | 95 | 0% | 98 | 0 |
| 4 | [time-range-picker](./time-range-picker.md) | 84 | 0% | 88 | 0 |
| 5 | [chart](./chart.md) | 80 | 9% | 92 | 17 |
| 6 | [proof-of-human](./proof-of-human.md) | 78 | 14% | 95 | 20 |
| 7 | [prose](./prose.md) | 73 | 1% | 74 | 2 |
| 4 | [chart](./chart.md) | 80 | 9% | 92 | 17 |
| 5 | [proof-of-human](./proof-of-human.md) | 78 | 14% | 95 | 20 |
| 6 | [prose](./prose.md) | 73 | 1% | 74 | 2 |
| 7 | [time-range-picker](./time-range-picker.md) | 68 | 19% | 88 | 22 |
| 8 | [month-grid](./month-grid.md) | 58 | 0% | 61 | 0 |
| 9 | [year-grid](./year-grid.md) | 58 | 0% | 61 | 0 |
| 10 | [date-range-picker](./date-range-picker.md) | 52 | 0% | 55 | 0 |
@ -91,12 +91,12 @@ theming §6.7 lo pone delante (`hover-bg`). Las fichas proponen la forma
| 19 | [gradient-picker](./gradient-picker.md) | 35 | 0% | 38 | 0 |
| 20 | [listbox](./listbox.md) | 35 | 0% | 38 | 0 |
## Sin ningún token público propio (58)
## Sin ningún token público propio (57)
Ni una clave pública en `lib/recipes/base.ts` — alguno tiene privados forward
(`_palette-*`), que no son contrato: un tema no puede nombrarlos.
[`alert-dialog`](./alert-dialog.md) · [`announce`](./announce.md) · [`aspect-ratio`](./aspect-ratio.md) · [`auto-grid`](./auto-grid.md) · [`avatar`](./avatar.md) · [`card-group`](./card-group.md) · [`carousel`](./carousel.md) · [`cascade`](./cascade.md) · [`clipboard`](./clipboard.md) · [`code`](./code.md) · [`code-block`](./code-block.md) · [`command`](./command.md) · [`css-field`](./css-field.md) · [`date-picker`](./date-picker.md) · [`date-range-picker`](./date-range-picker.md) · [`display`](./display.md) · [`feed`](./feed.md) · [`field-langs`](./field-langs.md) · [`gradient-picker`](./gradient-picker.md) · [`grid-list`](./grid-list.md) · [`heading`](./heading.md) · [`highlight`](./highlight.md) · [`kbd`](./kbd.md) · [`knob`](./knob.md) · [`label`](./label.md) · [`link`](./link.md) · [`link-preview`](./link-preview.md) · [`listbox`](./listbox.md) · [`mark`](./mark.md) · [`mask-field`](./mask-field.md) · [`menu-dial`](./menu-dial.md) · [`mockup`](./mockup.md) · [`month-grid`](./month-grid.md) · [`motion`](./motion.md) · [`number-field`](./number-field.md) · [`palabras`](./palabras.md) · [`picker-shell`](./picker-shell.md) · [`range-calendar`](./range-calendar.md) · [`scroll-frames`](./scroll-frames.md) · [`skeleton`](./skeleton.md) · [`skin-media-player`](./skin-media-player.md) · [`spinner`](./spinner.md) · [`stack`](./stack.md) · [`table`](./table.md) · [`text`](./text.md) · [`text-blur`](./text-blur.md) · [`text-circular`](./text-circular.md) · [`text-focus`](./text-focus.md) · [`text-gradient`](./text-gradient.md) · [`text-scramble`](./text-scramble.md) · [`textarea`](./textarea.md) · [`time-range-picker`](./time-range-picker.md) · [`tree-grid`](./tree-grid.md) · [`tree-view`](./tree-view.md) · [`virtual-grid`](./virtual-grid.md) · [`virtual-list`](./virtual-list.md) · [`wrap`](./wrap.md) · [`year-grid`](./year-grid.md)
[`alert-dialog`](./alert-dialog.md) · [`announce`](./announce.md) · [`aspect-ratio`](./aspect-ratio.md) · [`auto-grid`](./auto-grid.md) · [`avatar`](./avatar.md) · [`card-group`](./card-group.md) · [`carousel`](./carousel.md) · [`cascade`](./cascade.md) · [`clipboard`](./clipboard.md) · [`code`](./code.md) · [`code-block`](./code-block.md) · [`command`](./command.md) · [`css-field`](./css-field.md) · [`date-picker`](./date-picker.md) · [`date-range-picker`](./date-range-picker.md) · [`display`](./display.md) · [`feed`](./feed.md) · [`field-langs`](./field-langs.md) · [`gradient-picker`](./gradient-picker.md) · [`grid-list`](./grid-list.md) · [`heading`](./heading.md) · [`highlight`](./highlight.md) · [`kbd`](./kbd.md) · [`knob`](./knob.md) · [`label`](./label.md) · [`link`](./link.md) · [`link-preview`](./link-preview.md) · [`listbox`](./listbox.md) · [`mark`](./mark.md) · [`mask-field`](./mask-field.md) · [`menu-dial`](./menu-dial.md) · [`mockup`](./mockup.md) · [`month-grid`](./month-grid.md) · [`motion`](./motion.md) · [`number-field`](./number-field.md) · [`palabras`](./palabras.md) · [`picker-shell`](./picker-shell.md) · [`range-calendar`](./range-calendar.md) · [`scroll-frames`](./scroll-frames.md) · [`skeleton`](./skeleton.md) · [`skin-media-player`](./skin-media-player.md) · [`spinner`](./spinner.md) · [`stack`](./stack.md) · [`table`](./table.md) · [`text`](./text.md) · [`text-blur`](./text-blur.md) · [`text-circular`](./text-circular.md) · [`text-focus`](./text-focus.md) · [`text-gradient`](./text-gradient.md) · [`text-scramble`](./text-scramble.md) · [`textarea`](./textarea.md) · [`tree-grid`](./tree-grid.md) · [`tree-view`](./tree-view.md) · [`virtual-grid`](./virtual-grid.md) · [`virtual-list`](./virtual-list.md) · [`wrap`](./wrap.md) · [`year-grid`](./year-grid.md)
## Tabla completa (162 recetas, por alcance ascendente)
@ -105,7 +105,6 @@ La columna «contrato» cuenta las claves **públicas** del bloque del component
| componente | alcance | knobs | público | privado | global | literal | sistema | contrato | size |
| --- | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: | :-: |
| [range-calendar](./range-calendar.md) | 0% | 98 | 0 | 7 | 84 | 4 | 3 | 0 | y |
| [time-range-picker](./time-range-picker.md) | 0% | 88 | 0 | 6 | 61 | 17 | 4 | 0 | y |
| [month-grid](./month-grid.md) | 0% | 61 | 0 | 13 | 40 | 5 | 3 | 0 | y |
| [year-grid](./year-grid.md) | 0% | 61 | 0 | 13 | 40 | 5 | 3 | 0 | y |
| [date-range-picker](./date-range-picker.md) | 0% | 55 | 0 | 0 | 49 | 3 | 3 | 0 | y |
@ -160,6 +159,7 @@ La columna «contrato» cuenta las claves **públicas** del bloque del component
| [proof-of-human](./proof-of-human.md) | 14% | 95 | 13 | 18 | 29 | 31 | 4 | 20 | – |
| [menubar](./menubar.md) | 15% | 27 | 4 | 6 | 16 | 0 | 1 | 5 | y |
| [time-picker](./time-picker.md) | 18% | 59 | 10 | 12 | 24 | 11 | 2 | 16 | y |
| [time-range-picker](./time-range-picker.md) | 19% | 88 | 16 | 20 | 33 | 15 | 4 | 22 | y |
| [anchor-nav](./anchor-nav.md) | 20% | 11 | 2 | 0 | 8 | 0 | 1 | 2 | – |
| [banner](./banner.md) | 20% | 10 | 2 | 6 | 1 | 1 | 0 | 42 | y |
| [button](./button.md) | 21% | 30 | 6 | 16 | 0 | 7 | 1 | 105 | y |

283
docs/audit/theming/time-range-picker.md
Unescape View File

@ -5,111 +5,95 @@
> Vista de conjunto: [README](./README.md) · método y protocolo:
> [`PLAN-theming.md`](../../process/PLAN-theming.md) §1, §2, §7.
- **Medido**: 2026-08-20 · **Alcance**: **0%** — 0 de 84 knobs por token público
- **Knobs de apariencia**: 88 — público 0 · privado 6 · global 61 · literal 17 · sistema 4 _(fuera del ratio)_
- **Contrato hoy** (`lib/recipes/base.ts`): **sin entrada en `base.ts`**
- **Medido**: 2026-08-20 · **Alcance**: **19%** — 16 de 84 knobs por token público
- **Knobs de apariencia**: 88 — público 16 · privado 20 · global 33 · literal 15 · sistema 4 _(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 (61)
### 1.1 Directo a primitivo global (33)
| # | fichero:línea | selector | propiedad | valor |
| ---: | --- | --- | --- | --- |
| 1 | `time-range-picker.css:20` | `[data-time-range-picker]` | `gap` | `var(--space-1-5) var(--_time-field-gap)` |
| 2 | `time-range-picker.css:23` | `[data-time-range-picker]` | `color` | `var(--field-control-color)` ⤴ prestado de `field` |
| 3 | `time-range-picker.css:24` | `[data-time-range-picker]` | `font-family` | `var(--field-font-family)` ⤴ prestado de `field` |
| 4 | `time-range-picker.css:25` | `[data-time-range-picker]` | `font-size` | `var(--_time-field-font-size)` |
| 5 | `time-range-picker.css:26` | `[data-time-range-picker]` | `line-height` | `var(--field-control-line-height)` ⤴ prestado de `field` |
| 6 | `time-range-picker.css:104` | `[data-time-range-picker-trigger]` | `inline-size` | `var(--_time-field-height)` |
| 7 | `time-range-picker.css:105` | `[data-time-range-picker-trigger]` | `block-size` | `var(--_time-field-height)` |
| 8 | `time-range-picker.css:107` | `[data-time-range-picker-trigger]` | `border` | `var(--field-control-border-width) solid var(--field-control-border)` ⤴ prestado de `field` |
| 9 | `time-range-picker.css:108` | `[data-time-range-picker-trigger]` | `border-radius` | `var(--field-control-radius)` ⤴ prestado de `field` |
| 10 | `time-range-picker.css:109` | `[data-time-range-picker-trigger]` | `background` | `var(--field-control-bg)` ⤴ prestado de `field` |
| 11 | `time-range-picker.css:120` | `[data-time-range-picker-trigger]:hover` | `border-color` | `var(--_time-field-accent-border)` |
| 12 | `time-range-picker.css:121` | `[data-time-range-picker-trigger]:hover` | `background` | `var(--_time-field-accent-track)` |
| 13 | `time-range-picker.css:122` | `[data-time-range-picker-trigger]:hover` | `color` | `var(--_time-field-accent-text)` |
| 14 | `time-range-picker.css:126` | `[data-time-range-picker-trigger]:focus-visible` | `border-color` | `var(--_time-field-accent-border)` |
| 15 | `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` |
| 16 | `time-range-picker.css:148` | `[data-time-range-field-input] [data-time-range-picker-trigger]` | `inline-size` | `calc(var(--_time-field-height) - var(--space-2))` |
| 17 | `time-range-picker.css:149` | `[data-time-range-field-input] [data-time-range-picker-trigger]` | `block-size` | `calc(var(--_time-field-height) - var(--space-2))` |
| 18 | `time-range-picker.css:153` | `[data-time-range-field-input] [data-time-range-picker-trigger]` | `border-radius` | `var(--radius-sm)` |
| 19 | `time-range-picker.css:155` | `[data-time-range-field-input] [data-time-range-picker-trigger]` | `color` | `var(--field-control-color)` ⤴ prestado de `field` |
| 20 | `time-range-picker.css:162` | `[data-time-range-field-input] [data-time-range-picker-trigger]:hover` | `background` | `var(--_time-field-accent-track)` |
| 21 | `time-range-picker.css:163` | `[data-time-range-field-input] [data-time-range-picker-trigger]:hover` | `color` | `var(--_time-field-accent-text)` |
| 22 | `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` |
| 23 | `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` |
| 24 | `time-range-picker.css:191` | `[data-time-range-picker-clock]` | `padding` | `var(--space-2-5)` |
| 25 | `time-range-picker.css:195` | `[data-time-range-picker-clock]` | `color` | `var(--color-content-primary)` |
| 26 | `time-range-picker.css:196` | `[data-time-range-picker-clock]` | `font-family` | `var(--style-label-font-family)` |
| 27 | `time-range-picker.css:197` | `[data-time-range-picker-clock]` | `font-size` | `var(--font-size-sm)` |
| 28 | `time-range-picker.css:198` | `[data-time-range-picker-clock]` | `line-height` | `var(--leading-ui)` |
| 29 | `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` |
| 30 | `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` |
| 31 | `time-range-picker.css:272` | `.time-range-picker-endpoint` | `gap` | `var(--space-2)` |
| 32 | `time-range-picker.css:285` | `.time-range-picker-endpoint:first-child::after` | `inline-size` | `var(--border-width)` |
| 33 | `time-range-picker.css:289` | `.time-range-picker-endpoint:first-child::after` | `background` | `var(--color-border-strong)` |
| 34 | `time-range-picker.css:296` | `.time-range-picker-endpoint-label` | `font-weight` | `var(--font-weight-semibold)` |
| 35 | `time-range-picker.css:298` | `.time-range-picker-endpoint-label` | `letter-spacing` | `var(--tracking-wider)` |
| 36 | `time-range-picker.css:299` | `.time-range-picker-endpoint-label` | `color` | `var(--color-content-secondary)` |
| 37 | `time-range-picker.css:308` | `.time-range-picker-slider-label` | `color` | `var(--color-content-muted)` |
| 38 | `time-range-picker.css:309` | `.time-range-picker-slider-label` | `font-family` | `var(--style-label-font-family)` |
| 39 | `time-range-picker.css:312` | `.time-range-picker-slider-label` | `font-weight` | `var(--font-weight-medium)` |
| 40 | `time-range-picker.css:313` | `.time-range-picker-slider-label` | `letter-spacing` | `var(--tracking-caps)` |
| 41 | `time-range-picker.css:330` | `.time-range-picker-scale` | `padding-inline` | `calc(var(--_slider-thumb-size, 1rem) / 2)` |
| 42 | `time-range-picker.css:342` | `.time-range-picker-scale-tick` | `color` | `var(--color-content-muted)` |
| 43 | `time-range-picker.css:343` | `.time-range-picker-scale-tick` | `font-family` | `var(--font-family-mono, var(--style-label-font-family))` |
| 44 | `time-range-picker.css:345` | `.time-range-picker-scale-tick` | `font-size` | `var(--font-size-xxs)` |
| 45 | `time-range-picker.css:354` | `.time-range-picker-scale-mark` | `background` | `var(--color-border-default)` |
| 46 | `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` |
| 47 | `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` |
| 48 | `time-range-picker.css:415` | `[data-time-range-picker-day-period-toggle]` | `gap` | `var(--space-1)` |
| 49 | `time-range-picker.css:417` | `[data-time-range-picker-day-period-toggle]` | `border` | `var(--border-width) solid var(--color-border-default)` |
| 50 | `time-range-picker.css:418` | `[data-time-range-picker-day-period-toggle]` | `border-radius` | `var(--radius-md)` |
| 51 | `time-range-picker.css:419` | `[data-time-range-picker-day-period-toggle]` | `background` | `var(--color-surface-default)` |
| 52 | `time-range-picker.css:427` | `[data-time-range-picker-day-period-item]` | `padding-inline` | `var(--space-2)` |
| 53 | `time-range-picker.css:428` | `[data-time-range-picker-day-period-item]` | `padding-block` | `var(--space-1)` |
| 54 | `time-range-picker.css:429` | `[data-time-range-picker-day-period-item]` | `border-radius` | `calc(var(--radius-md) - 2px)` |
| 55 | `time-range-picker.css:430` | `[data-time-range-picker-day-period-item]` | `font-size` | `var(--font-size-xs)` |
| 56 | `time-range-picker.css:431` | `[data-time-range-picker-day-period-item]` | `font-weight` | `var(--font-weight-semibold)` |
| 57 | `time-range-picker.css:432` | `[data-time-range-picker-day-period-item]` | `color` | `var(--color-content-muted)` |
| 58 | `time-range-picker.css:437` | `[data-time-range-picker-day-period-item][data-checked]` | `background` | `var(--_time-field-accent-track)` |
| 59 | `time-range-picker.css:438` | `[data-time-range-picker-day-period-item][data-checked]` | `color` | `var(--_time-field-accent-text)` |
| 60 | `time-range-picker.css:464` | `[data-time-range-picker][data-invalid] [data-time-range-picker-trigger]` | `border-color` | `var(--color-threat-border)` |
| 61 | `time-range-picker.css:471` | `[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 (6)
| 1 | `time-range-picker.css:23` | `[data-time-range-picker]` | `color` | `var(--field-control-color)` ⤴ 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-color)` ⤴ 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 (20)
| # | fichero:línea | selector | propiedad | valor |
| ---: | --- | --- | --- | --- |
| 1 | `time-range-picker.css:190` | `[data-time-range-picker-clock]` | `gap` | `var(--_time-range-picker-column-gap)` |
| 2 | `time-range-picker.css:295` | `.time-range-picker-endpoint-label` | `font-size` | `var(--_time-range-picker-label-font, var(--font-size-sm))` |
| 3 | `time-range-picker.css:311` | `.time-range-picker-slider-label` | `font-size` | `var(--_time-range-picker-channel-font, var(--font-size-xxs))` |
| 4 | `time-range-picker.css:388` | `[data-time-range-picker-clock] [data-slider-thumb]` | `border-color` | `var(--_time-range-picker-slider-accent, var(--_time-field-accent-border))` |
| 5 | `time-range-picker.css:403` | `[data-time-range-picker-clock] [data-slider-range]` | `background` | `var(--_time-range-picker-slider-accent, var(--_time-field-accent-border))` |
| 6 | `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-field-accent-border)) 70%, var(--color-content-muted))` |
### 1.3 Literales (17)
| 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:190` | `[data-time-range-picker-clock]` | `gap` | `var(--_time-range-picker-column-gap)` |
| 14 | `time-range-picker.css:295` | `.time-range-picker-endpoint-label` | `font-size` | `var(--_time-range-picker-label-font, var(--font-size-sm))` |
| 15 | `time-range-picker.css:311` | `.time-range-picker-slider-label` | `font-size` | `var(--_time-range-picker-channel-font, var(--font-size-xxs))` |
| 16 | `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))` |
| 17 | `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))` |
| 18 | `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) )` |
| 19 | `time-range-picker.css:441` | `[data-time-range-picker-day-period-item][data-checked]` | `background` | `var(--_time-range-picker-accent-track)` |
| 20 | `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:194` | `[data-time-range-picker-clock]` | `inline-size` | `22rem` |
| 3 | `time-range-picker.css:226` | `[data-time-range-picker-clock]` | `min-inline-size` | `14rem` |
| 4 | `time-range-picker.css:239` | `[data-time-range-picker-clock] [data-slider]` | `inline-size` | `100%` |
| 5 | `time-range-picker.css:314` | `.time-range-picker-slider-label` | `line-height` | `1` |
| 6 | `time-range-picker.css:321` | `.time-range-picker-slider` | `gap` | `2px` |
| 7 | `time-range-picker.css:323` | `.time-range-picker-slider` | `inline-size` | `100%` |
| 8 | `time-range-picker.css:328` | `.time-range-picker-scale` | `block-size` | `0.875rem` |
| 9 | `time-range-picker.css:329` | `.time-range-picker-scale` | `inline-size` | `100%` |
| 10 | `time-range-picker.css:341` | `.time-range-picker-scale-tick` | `gap` | `1px` |
| 11 | `time-range-picker.css:346` | `.time-range-picker-scale-tick` | `line-height` | `1` |
| 12 | `time-range-picker.css:352` | `.time-range-picker-scale-mark` | `inline-size` | `1px` |
| 13 | `time-range-picker.css:353` | `.time-range-picker-scale-mark` | `block-size` | `4px` |
| 14 | `time-range-picker.css:416` | `[data-time-range-picker-day-period-toggle]` | `padding` | `2px` |
| 15 | `time-range-picker.css:426` | `[data-time-range-picker-day-period-item]` | `min-inline-size` | `2.25rem` |
| 16 | `time-range-picker.css:443` | `[data-time-range-picker-day-period-item] input[type='radio']` | `inline-size` | `1px` |
| 17 | `time-range-picker.css:444` | `[data-time-range-picker-day-period-item] input[type='radio']` | `block-size` | `1px` |
| 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` |
## 2. Sistema transversal (4) — informativo, fuera del ratio
@ -119,17 +103,23 @@ Un tema los alcanza **a nivel de sistema**, por diseño (recipe-contract §2).
| ---: | --- | --- | --- | --- |
| 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:459` | `[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:465` | `[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 | `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-column-gap` | 1 | `var(--space-10)` | global | no |
| `--_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(--color-primary-border)`, `var(--color-secondary-border)`, `var(--color-neutral-border)` | 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
@ -137,7 +127,7 @@ Un tema los alcanza **a nivel de sistema**, por diseño (recipe-contract §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` (51)
### 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
@ -147,72 +137,72 @@ no distingue lo que debería — se marca `⚠`.
| token (`--time-range-picker-…`) | scope TSC | valor propuesto | usos |
| --- | --- | --- | ---: |
| `clock-bg` | `root` | ⚠ `var(--color-primary-border)` / `var(--color-secondary-border)` / `var(--color-neutral-border)` | 6 |
| `gap` | `root` | ⚠ `var(--space-1-5) var(--_time-field-gap)` / `var(--space-2)` / `2px` / `1px` | 4 |
| `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-color)` / `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 |
| `clock-border` | `root` | ⚠ `var(--color-primary-border)` / `var(--color-secondary-border)` / `var(--color-neutral-border)` | 3 |
| `font-size` | `root` | ⚠ `var(--_time-field-font-size)` / `var(--font-size-xxs)` | 2 |
| `trigger-width` | `root` | ⚠ `var(--_time-field-height)` / `calc(var(--_time-field-height) - var(--space-2))` | 2 |
| `trigger-height` | `root` | ⚠ `var(--_time-field-height)` / `calc(var(--_time-field-height) - var(--space-2))` | 2 |
| `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 |
| `hover-trigger-bg` | `root` | `var(--_time-field-accent-track)` | 2 |
| `hover-trigger-fg` | `root` | `var(--_time-field-accent-text)` | 2 |
| `trigger-fg` | `root` | ⚠ `var(--field-control-color)` / `var(--field-segment-active-text)` | 2 |
| `clock-width` | `root` | ⚠ `22rem` / `14rem` | 2 |
| `width` | `root` | ⚠ `var(--border-width)` / `1px` | 2 |
| `bg` | `root` | ⚠ `var(--color-border-strong)` / `var(--color-border-default)` | 2 |
| `font-size-md` | `size:md` | ⚠ `var(--font-size-sm)` / `var(--font-size-xxs)` | 2 |
| `font-size-xs` | `size:xs` | `var(--font-size-xxs)` | 2 |
| `font-size-sm` | `size:sm` | ⚠ `var(--font-size-xs)` / `var(--font-size-xxs)` | 2 |
| `font-size-lg` | `size:lg` | ⚠ `var(--font-size-md)` / `var(--font-size-xs)` | 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 |
| `day-period-item-width` | `root` | ⚠ `2.25rem` / `1px` | 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 |
| `hover-trigger-border` | `root` | `var(--_time-field-accent-border)` | 1 |
| `trigger-border` | `root` | `var(--_time-field-accent-border)` | 1 |
| `disabled-trigger-opacity` | `root` | `var(--field-disabled-opacity)` | 1 |
| `clock-gap` | `root` | `var(--space-10)` | 1 |
| `clock-fg` | `root` | `var(--color-content-primary)` | 1 |
| `clock-font-family` | `root` | `var(--style-label-font-family)` | 1 |
| `clock-font-size` | `root` | `var(--font-size-sm)` | 1 |
| `clock-line-height` | `root` | `var(--leading-ui)` | 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 |
| `day-period-toggle-gap` | `root` | `var(--space-1)` | 1 |
| `day-period-toggle-radius` | `root` | `var(--radius-md)` | 1 |
| `day-period-toggle-bg` | `root` | `var(--color-surface-default)` | 1 |
| `day-period-item-padding-inline` | `root` | `var(--space-2)` | 1 |
| `day-period-item-padding-block` | `root` | `var(--space-1)` | 1 |
| `day-period-item-radius` | `root` | `calc(var(--radius-md) - 2px)` | 1 |
| `day-period-item-font-size` | `root` | `var(--font-size-xs)` | 1 |
| `day-period-item-font-weight` | `root` | `var(--font-weight-semibold)` | 1 |
| `day-period-item-fg` | `root` | `var(--color-content-muted)` | 1 |
| `on-day-period-item-bg` | `root` | `var(--_time-field-accent-track)` | 1 |
| `on-day-period-item-fg` | `root` | `var(--_time-field-accent-text)` | 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 (10)
### 4.2 Sin nombre mecánico (13)
- **⚠ 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)** — 2: `border`.
- **⚠ 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`.
- **ya alcanzable: el privado `--_time-range-picker-column-gap` deriva de un público (`var(--time-range-picker-clock-column-gap)`) — sin acción; el censo lo cuenta como no alcanzable por el límite del regex** — 1: `gap`.
- **⚠ 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 (5)
### 4.3 Avisos sobre los tokens propuestos (9)
- **⚠ 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-trigger-width`, `--time-range-picker-trigger-height`, `--time-range-picker-padding-inline`, `--time-range-picker-day-period-item-radius`
- **el privado `--_time-range-picker-column-gap` debe pasar a leer este público (o desaparecer)** — `--time-range-picker-clock-gap`
- **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`
- **el privado `--_time-range-picker-slider-accent` debe pasar a leer este público (o desaparecer)** — `--time-range-picker-clock-border`, `--time-range-picker-clock-bg`
- **⚠ 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)
@ -273,4 +263,29 @@ excepción con razón).
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 -->

28
src/uix/eidos/components/time-range-picker/README.md
Unescape View File

@ -91,10 +91,28 @@ toggle acepta `type: 'start' | 'end'`.
- **Layout 2 columnas** — Start y End ocupan columnas independientes en
el popover. Por debajo de 40rem caen apiladas.
## Talla y tema (theme-reach 2026-08-20)
Mismo reparto que `time-picker`, su gemelo. Es contrato público
`--time-range-picker-*` lo que el componente inventa: el acento
(`accent-border` / `-track` / `-text`), el reloj de dos columnas
(`clock-column-gap`, `clock-width`, `clock-fg`, `clock-font-*`,
`clock-line-height`), los colores de las tres manecillas
(`clock-hand-{hour,minute,second}`) y la franja AM/PM (`day-period-toggle-*`,
`day-period-item-*`).
Sigue prestado el lado con forma de campo (`--field-*`) porque compone Field:
la corrección de fondo es el mandato de composición de Field
(`docs/audit/theming-audit.md` §5.3-3), no este eje.
Corregido de paso: 56 referencias `--_time-field-*` —prefijo de otro componente,
declarado aquí— renombradas a `--_time-range-picker-*`, con el diff de computed
en cero.
## Gaps
| Gap | Disposición | Detalle |
| --- | --- | --- |
| Vista "preset list" (Hoy, Última hora, Last 5 min…) | **diferir** | Se puede componer fuera con un Picker.Header + botones que llamen `setRange(a, b)`. Si emerge demanda recurrente, promover a parte canónica. |
| Swap automático visible cuando `end < start` | **diferir** | Hoy la validación vive en el `validate` opt y el `data-invalid` resultante. Auto-swap silencioso oculta intención del usuario — preferimos que el formulario muestre el error. |
| Estilado visual de `[data-readonly]` y `[data-invalid]` en el recipe | **implementar** | Audit `R-1.3` / `R-1.4`: las attrs se emiten desde el morfo pero el recipe no las consume. Pendiente añadir reglas en `time-range-picker.css`. |
| Gap | Disposición | Detalle |
| -------------------------------------------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Vista "preset list" (Hoy, Última hora, Last 5 min…) | **diferir** | Se puede componer fuera con un Picker.Header + botones que llamen `setRange(a, b)`. Si emerge demanda recurrente, promover a parte canónica. |
| Swap automático visible cuando `end < start` | **diferir** | Hoy la validación vive en el `validate` opt y el `data-invalid` resultante. Auto-swap silencioso oculta intención del usuario — preferimos que el formulario muestre el error. |
| Estilado visual de `[data-readonly]` y `[data-invalid]` en el recipe | **implementar** | Audit `R-1.3` / `R-1.4`: las attrs se emiten desde el morfo pero el recipe no las consume. Pendiente añadir reglas en `time-range-picker.css`. |

6
src/uix/eidos/components/time-range-picker/context.svelte.ts
Unescape View File

@ -1,9 +1,5 @@
import { getContext, setContext } from 'svelte';
import type {
TimeRangePickerColor,
TimeRangePickerSize,
TimeRangePickerVariant
} from './types';
import type { TimeRangePickerColor, TimeRangePickerSize, TimeRangePickerVariant } from './types';
const TIME_RANGE_PICKER_VISUAL_CONTEXT = Symbol('uix.eidos.time-range-picker.visual');

5
src/uix/eidos/components/time-range-picker/time-range-picker-hour-slider.svelte
Unescape View File

@ -27,10 +27,7 @@
const label = $derived(eidos.langs.ts('#?common.time.hour|Hour'));
</script>
<div
data-endpoint={type}
class="time-range-picker-slider time-range-picker-hour-slider"
>
<div data-endpoint={type} class="time-range-picker-slider time-range-picker-hour-slider">
<span class="time-range-picker-slider-label" aria-hidden="true">{label}</span>
{#if showRuler}
<TimeRangePicker.HourScale class="time-range-picker-scale">

2
src/uix/eidos/components/time-range-picker/time-range-picker-input.svelte
Unescape View File

@ -8,7 +8,7 @@
* Without this wrapper the endpoints defaulted to primary regardless of the
* picker's `color`: the field-family palette migration moved time-field's
* colour to `--_field-palette-text` (reset per `[data-field]`), orphaning the
* `--_time-field-accent-*` cascade `time-range-picker.css` still writes. Each
* `--_time-range-picker-accent-*` cascade `time-range-picker.css` still writes. Each
* endpoint carries its own `[data-field]`, so the picker's colour must reach it
* as `data-color` / `data-color-custom` (canonical → shared layer; raw value →
* `--color-custom` derivation), not by inheritance.

154
src/uix/eidos/components/time-range-picker/time-range-picker.css
Unescape View File

@ -7,77 +7,77 @@
*/
[data-time-range-picker] {
--_time-field-height: var(--field-control-height-md);
--_time-field-gap: var(--space-1);
--_time-field-font-size: var(--field-control-font-size-md);
--_time-field-accent-border: var(--color-primary-border);
--_time-field-accent-track: var(--color-primary-track);
--_time-field-accent-text: var(--color-primary-text);
--_time-range-picker-height: var(--field-control-height-md);
--_time-range-picker-gap: var(--space-1);
--_time-range-picker-font-size: var(--field-control-font-size-md);
--_time-range-picker-accent-border: var(--time-range-picker-accent-border);
--_time-range-picker-accent-track: var(--time-range-picker-accent-track);
--_time-range-picker-accent-text: var(--time-range-picker-accent-text);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1-5) var(--_time-field-gap);
gap: var(--space-1-5) var(--_time-range-picker-gap);
inline-size: 100%;
min-inline-size: 0;
color: var(--field-control-color);
font-family: var(--field-font-family);
font-size: var(--_time-field-font-size);
font-size: var(--_time-range-picker-font-size);
line-height: var(--field-control-line-height);
}
[data-time-range-picker][data-size='xs'] {
--_time-field-height: var(--field-control-height-xs);
--_time-field-gap: var(--space-0-5);
--_time-field-font-size: var(--field-control-font-size-xs);
--_time-range-picker-height: var(--field-control-height-xs);
--_time-range-picker-gap: var(--space-0-5);
--_time-range-picker-font-size: var(--field-control-font-size-xs);
}
[data-time-range-picker][data-size='sm'] {
--_time-field-height: var(--field-control-height-sm);
--_time-field-gap: var(--space-0-5);
--_time-field-font-size: var(--field-control-font-size-sm);
--_time-range-picker-height: var(--field-control-height-sm);
--_time-range-picker-gap: var(--space-0-5);
--_time-range-picker-font-size: var(--field-control-font-size-sm);
}
[data-time-range-picker][data-size='lg'] {
--_time-field-height: var(--field-control-height-lg);
--_time-field-gap: var(--space-1-5);
--_time-field-font-size: var(--field-control-font-size-lg);
--_time-range-picker-height: var(--field-control-height-lg);
--_time-range-picker-gap: var(--space-1-5);
--_time-range-picker-font-size: var(--field-control-font-size-lg);
}
[data-time-range-picker][data-color='secondary'] {
--_time-field-accent-border: var(--color-secondary-border);
--_time-field-accent-track: var(--color-secondary-track);
--_time-field-accent-text: var(--color-secondary-text);
--_time-range-picker-accent-border: var(--color-secondary-border);
--_time-range-picker-accent-track: var(--color-secondary-track);
--_time-range-picker-accent-text: var(--color-secondary-text);
}
[data-time-range-picker][data-color='neutral'] {
--_time-field-accent-border: var(--color-neutral-border);
--_time-field-accent-track: var(--color-neutral-track);
--_time-field-accent-text: var(--color-neutral-text);
--_time-range-picker-accent-border: var(--color-neutral-border);
--_time-range-picker-accent-track: var(--color-neutral-track);
--_time-range-picker-accent-text: var(--color-neutral-text);
}
[data-time-range-picker][data-color='affirm'] {
--_time-field-accent-border: var(--color-affirm-border);
--_time-field-accent-track: var(--color-affirm-track);
--_time-field-accent-text: var(--color-affirm-text);
--_time-range-picker-accent-border: var(--color-affirm-border);
--_time-range-picker-accent-track: var(--color-affirm-track);
--_time-range-picker-accent-text: var(--color-affirm-text);
}
[data-time-range-picker][data-color='fulfill'] {
--_time-field-accent-border: var(--color-fulfill-border);
--_time-field-accent-track: var(--color-fulfill-track);
--_time-field-accent-text: var(--color-fulfill-text);
--_time-range-picker-accent-border: var(--color-fulfill-border);
--_time-range-picker-accent-track: var(--color-fulfill-track);
--_time-range-picker-accent-text: var(--color-fulfill-text);
}
[data-time-range-picker][data-color='risk'] {
--_time-field-accent-border: var(--color-risk-border);
--_time-field-accent-track: var(--color-risk-track);
--_time-field-accent-text: var(--color-risk-text);
--_time-range-picker-accent-border: var(--color-risk-border);
--_time-range-picker-accent-track: var(--color-risk-track);
--_time-range-picker-accent-text: var(--color-risk-text);
}
[data-time-range-picker][data-color='threat'] {
--_time-field-accent-border: var(--color-threat-border);
--_time-field-accent-track: var(--color-threat-track);
--_time-field-accent-text: var(--color-threat-text);
--_time-range-picker-accent-border: var(--color-threat-border);
--_time-range-picker-accent-track: var(--color-threat-track);
--_time-range-picker-accent-text: var(--color-threat-text);
}
[data-time-range-picker][data-color='loss'] {
--_time-field-accent-border: var(--color-loss-border);
--_time-field-accent-track: var(--color-loss-track);
--_time-field-accent-text: var(--color-loss-text);
--_time-range-picker-accent-border: var(--color-loss-border);
--_time-range-picker-accent-track: var(--color-loss-track);
--_time-range-picker-accent-text: var(--color-loss-text);
}
/* ── Field row: label claims its own line; the paired endpoint inputs sit
@ -101,8 +101,8 @@
align-items: center;
justify-content: center;
flex: 0 0 auto;
inline-size: var(--_time-field-height);
block-size: var(--_time-field-height);
inline-size: var(--_time-range-picker-height);
block-size: var(--_time-range-picker-height);
padding: 0;
border: var(--field-control-border-width) solid var(--field-control-border);
border-radius: var(--field-control-radius);
@ -117,13 +117,13 @@
}
[data-time-range-picker-trigger]:hover {
border-color: var(--_time-field-accent-border);
background: var(--_time-field-accent-track);
color: var(--_time-field-accent-text);
border-color: var(--_time-range-picker-accent-border);
background: var(--_time-range-picker-accent-track);
color: var(--_time-range-picker-accent-text);
}
[data-time-range-picker-trigger]:focus-visible {
border-color: var(--_time-field-accent-border);
border-color: var(--_time-range-picker-accent-border);
/* Focus ring as a flush outline (no offset → no gap) — survives forced-colors. */
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: 0;
@ -138,15 +138,15 @@
/* Embedded trigger inside the input — flush affordance like time-picker. */
[data-time-range-field-input] [data-time-range-picker-trigger] {
flex: 0 0 auto;
/* Square icon button sized from the picker-local `--_time-field-height` (itself
/* Square icon button sized from the picker-local `--_time-range-picker-height` (itself
sourced from `--field-control-height-{k}`, scaling with the PICKER size). NOT
the Field-family `--field-segment-height`: the range endpoints are composed
TimeFields that do NOT carry their own `[data-size]` (only the picker root/clock
do), so `--field-segment-height` (declared per `[data-field][data-size]`) would
pin to md here. The picker-inherited private is the size-tracking source.
`font: inherit` so the 1em icon tracks the field font. */
inline-size: calc(var(--_time-field-height) - var(--space-2));
block-size: calc(var(--_time-field-height) - var(--space-2));
inline-size: calc(var(--_time-range-picker-height) - var(--space-2));
block-size: calc(var(--_time-range-picker-height) - var(--space-2));
margin-inline-start: auto;
padding: 0;
border: none;
@ -159,8 +159,8 @@
[data-time-range-field-input] [data-time-range-picker-trigger]:hover {
border: none;
background: var(--_time-field-accent-track);
color: var(--_time-field-accent-text);
background: var(--_time-range-picker-accent-track);
color: var(--_time-range-picker-accent-text);
}
[data-time-range-field-input] [data-time-range-picker-trigger]:focus-visible {
@ -186,16 +186,16 @@
breathing room on both sides. Tokenised so the divider centers in this very
gap; the clock width is fixed, so a wider gap narrows the columns rather than
the panel. */
--_time-range-picker-column-gap: var(--space-10);
--_time-range-picker-column-gap: var(--time-range-picker-clock-column-gap);
gap: var(--_time-range-picker-column-gap);
padding: var(--space-2-5);
/* Fixed width that drives the panel size; the sliders fill their columns, so
widening this lengthens the tracks while the canonical column-gap stays put. */
inline-size: 22rem;
color: var(--color-content-primary);
font-family: var(--style-label-font-family);
font-size: var(--font-size-sm);
line-height: var(--leading-ui);
inline-size: var(--time-range-picker-clock-width);
color: var(--time-range-picker-clock-fg);
font-family: var(--time-range-picker-clock-font-family);
font-size: var(--time-range-picker-clock-font-size);
line-height: var(--time-range-picker-clock-line-height);
/* Per-size label scale, keyed off the picker size:
- `label` (prominent) → the endpoint header (Start / End).
- `channel` (one step below) → the per-slider Hour / Minute caption. */
@ -365,27 +365,27 @@
/* ── Per-channel accent palette ───────────────────────────────────────────
Hour = primary, Minute = secondary, Second = neutral. Tokens resolved
at the clock root using global CSS vars (not the picker's inherited
`--_time-field-accent-*`) because the Popover content is portaled
`--_time-range-picker-accent-*`) because the Popover content is portaled
outside the picker scope — inherited custom properties do not cross
portal boundaries. End endpoint gets a slightly muted variant so the
pair stays distinguishable. */
[data-time-range-picker-clock] [data-time-range-picker-hour-slider] {
--_time-range-picker-slider-accent: var(--color-primary-border);
--_time-range-picker-slider-accent: var(--time-range-picker-clock-hand-hour);
}
[data-time-range-picker-clock] [data-time-range-picker-minute-slider] {
--_time-range-picker-slider-accent: var(--color-secondary-border);
--_time-range-picker-slider-accent: var(--time-range-picker-clock-hand-minute);
}
[data-time-range-picker-clock] [data-time-range-picker-second-slider] {
--_time-range-picker-slider-accent: var(--color-neutral-border);
--_time-range-picker-slider-accent: var(--time-range-picker-clock-hand-second);
}
/* ── Slider thumb / range emphasis inside the clock ──────────────────────── */
[data-time-range-picker-clock] [data-slider-thumb] {
border-color: var(--_time-range-picker-slider-accent, var(--_time-field-accent-border));
border-color: var(--_time-range-picker-slider-accent, var(--_time-range-picker-accent-border));
box-shadow:
var(--slider-thumb-shadow),
0 0 0 2px var(--color-surface-default);
@ -400,42 +400,46 @@
}
[data-time-range-picker-clock] [data-slider-range] {
background: var(--_time-range-picker-slider-accent, var(--_time-field-accent-border));
background: var(--_time-range-picker-slider-accent, var(--_time-range-picker-accent-border));
}
/* Visually distinguish end-endpoint sliders with a slightly muted track tint. */
[data-time-range-picker-clock] [data-endpoint='end'] [data-slider-range] {
background: color-mix(in oklch, var(--_time-range-picker-slider-accent, var(--_time-field-accent-border)) 70%, var(--color-content-muted));
background: color-mix(
in oklch,
var(--_time-range-picker-slider-accent, var(--_time-range-picker-accent-border)) 70%,
var(--color-content-muted)
);
}
/* ── Day period toggle ───────────────────────────────────────────────────── */
[data-time-range-picker-day-period-toggle] {
display: inline-flex;
gap: var(--space-1);
gap: var(--time-range-picker-day-period-toggle-gap);
padding: 2px;
border: var(--border-width) solid var(--color-border-default);
border-radius: var(--radius-md);
background: var(--color-surface-default);
border: var(--border-width) solid var(--time-range-picker-day-period-toggle-border);
border-radius: var(--time-range-picker-day-period-toggle-radius);
background: var(--time-range-picker-day-period-toggle-bg);
}
[data-time-range-picker-day-period-item] {
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 2.25rem;
padding-inline: var(--space-2);
padding-block: var(--space-1);
border-radius: calc(var(--radius-md) - 2px);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-content-muted);
min-inline-size: var(--time-range-picker-day-period-item-min-width);
padding-inline: var(--time-range-picker-day-period-item-padding-inline);
padding-block: var(--time-range-picker-day-period-item-padding-block);
border-radius: calc(var(--time-range-picker-day-period-toggle-radius) - 2px);
font-size: var(--time-range-picker-day-period-item-font-size);
font-weight: var(--time-range-picker-day-period-item-font-weight);
color: var(--time-range-picker-day-period-item-fg);
cursor: pointer;
}
[data-time-range-picker-day-period-item][data-checked] {
background: var(--_time-field-accent-track);
color: var(--_time-field-accent-text);
background: var(--_time-range-picker-accent-track);
color: var(--_time-range-picker-accent-text);
}
[data-time-range-picker-day-period-item] input[type='radio'] {

7
src/uix/eidos/components/time-range-picker/types.ts
Unescape View File

@ -19,7 +19,12 @@ import type {
PopoverArrowProps,
PopoverCloseProps
} from '../popover/types';
import type { ComponentColorProp, ControlVariant, ResponsiveProp, Size } from '$uix/eidos/lib/types';
import type {
ComponentColorProp,
ControlVariant,
ResponsiveProp,
Size
} from '$uix/eidos/lib/types';
import type { Snippet } from 'svelte';
export type TimeRangePickerSize = Extract<Size, 'sm' | 'md' | 'lg'>;

22
src/uix/eidos/generated/base.css
Unescape View File

@ -1657,6 +1657,28 @@
--button-loss-solid-hover: var(--color-loss-solid-hover);
--button-loss-text: var(--color-loss-text);
--button-loss-contrast: var(--color-loss-contrast);
--time-range-picker-accent-border: var(--color-primary-border);
--time-range-picker-accent-track: var(--color-primary-track);
--time-range-picker-accent-text: var(--color-primary-text);
--time-range-picker-clock-column-gap: var(--space-10);
--time-range-picker-clock-width: 22rem;
--time-range-picker-clock-fg: var(--color-content-primary);
--time-range-picker-clock-font-family: var(--style-label-font-family);
--time-range-picker-clock-font-size: var(--size-sm-font-size);
--time-range-picker-clock-line-height: var(--leading-ui);
--time-range-picker-clock-hand-hour: var(--color-primary-border);
--time-range-picker-clock-hand-minute: var(--color-secondary-border);
--time-range-picker-clock-hand-second: var(--color-neutral-border);
--time-range-picker-day-period-toggle-gap: var(--space-1);
--time-range-picker-day-period-toggle-radius: var(--radius-md);
--time-range-picker-day-period-toggle-bg: var(--color-surface-default);
--time-range-picker-day-period-toggle-border: var(--color-border-default);
--time-range-picker-day-period-item-min-width: 2.25rem;
--time-range-picker-day-period-item-padding-inline: var(--space-2);
--time-range-picker-day-period-item-padding-block: var(--space-1);
--time-range-picker-day-period-item-font-size: var(--size-xs-font-size);
--time-range-picker-day-period-item-font-weight: var(--font-weight-semibold);
--time-range-picker-day-period-item-fg: var(--color-content-muted);
--time-picker-accent-border: var(--color-primary-border);
--time-picker-accent-track: var(--color-primary-track);
--time-picker-accent-text: var(--color-primary-text);

28
src/uix/eidos/lib/recipes/base.ts
Unescape View File

@ -1989,6 +1989,34 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({
'_palette-element': { value: 'var(--color-primary-element)', scope: 'host' }
},
// ─────────────────────────────────────────────────────────────────────
// TimeRangePicker — same split as `time-picker`: the two-column clock and
// the AM/PM strip are its own, the field-shaped half stays on `--field-*`
// (it composes Field). Theme-reach 2026-08-20.
'time-range-picker': {
'accent-border': 'var(--color-primary-border)',
'accent-track': 'var(--color-primary-track)',
'accent-text': 'var(--color-primary-text)',
'clock-column-gap': 'var(--space-10)',
'clock-width': '22rem',
'clock-fg': 'var(--color-content-primary)',
'clock-font-family': 'var(--style-label-font-family)',
'clock-font-size': 'var(--size-sm-font-size)',
'clock-line-height': 'var(--leading-ui)',
'clock-hand-hour': 'var(--color-primary-border)',
'clock-hand-minute': 'var(--color-secondary-border)',
'clock-hand-second': 'var(--color-neutral-border)',
'day-period-toggle-gap': 'var(--space-1)',
'day-period-toggle-radius': 'var(--radius-md)',
'day-period-toggle-bg': 'var(--color-surface-default)',
'day-period-toggle-border': 'var(--color-border-default)',
'day-period-item-min-width': '2.25rem',
'day-period-item-padding-inline': 'var(--space-2)',
'day-period-item-padding-block': 'var(--space-1)',
'day-period-item-font-size': 'var(--size-xs-font-size)',
'day-period-item-font-weight': 'var(--font-weight-semibold)',
'day-period-item-fg': 'var(--color-content-muted)'
},
// ─────────────────────────────────────────────────────────────────────
// TimePicker — the CLOCK face and the day-period strip, which are its own
// invention; the field-shaped half keeps consuming `--field-*` because it
// composes Field (the field-composition mandate, theming-audit §5.3-3), and

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.