diff --git a/docs/audit/theming/README.md b/docs/audit/theming/README.md index bad0edaad..be17d480d 100644 --- a/docs/audit/theming/README.md +++ b/docs/audit/theming/README.md @@ -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 | diff --git a/docs/audit/theming/time-range-picker.md b/docs/audit/theming/time-range-picker.md index cc55acbb9..337bf64a4 100644 --- a/docs/audit/theming/time-range-picker.md +++ b/docs/audit/theming/time-range-picker.md @@ -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. + diff --git a/src/uix/eidos/components/time-range-picker/README.md b/src/uix/eidos/components/time-range-picker/README.md index 10c1ab2e3..2bb6d67cc 100644 --- a/src/uix/eidos/components/time-range-picker/README.md +++ b/src/uix/eidos/components/time-range-picker/README.md @@ -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`. | diff --git a/src/uix/eidos/components/time-range-picker/context.svelte.ts b/src/uix/eidos/components/time-range-picker/context.svelte.ts index 5f420b1de..18a4b4451 100644 --- a/src/uix/eidos/components/time-range-picker/context.svelte.ts +++ b/src/uix/eidos/components/time-range-picker/context.svelte.ts @@ -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'); diff --git a/src/uix/eidos/components/time-range-picker/time-range-picker-hour-slider.svelte b/src/uix/eidos/components/time-range-picker/time-range-picker-hour-slider.svelte index 3dffa72ef..c8af869fd 100644 --- a/src/uix/eidos/components/time-range-picker/time-range-picker-hour-slider.svelte +++ b/src/uix/eidos/components/time-range-picker/time-range-picker-hour-slider.svelte @@ -27,10 +27,7 @@ const label = $derived(eidos.langs.ts('#?common.time.hour|Hour')); -
+
{#if showRuler} diff --git a/src/uix/eidos/components/time-range-picker/time-range-picker-input.svelte b/src/uix/eidos/components/time-range-picker/time-range-picker-input.svelte index 50afb48c2..90fc42117 100644 --- a/src/uix/eidos/components/time-range-picker/time-range-picker-input.svelte +++ b/src/uix/eidos/components/time-range-picker/time-range-picker-input.svelte @@ -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. diff --git a/src/uix/eidos/components/time-range-picker/time-range-picker.css b/src/uix/eidos/components/time-range-picker/time-range-picker.css index a3f813387..0c698e16a 100644 --- a/src/uix/eidos/components/time-range-picker/time-range-picker.css +++ b/src/uix/eidos/components/time-range-picker/time-range-picker.css @@ -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'] { diff --git a/src/uix/eidos/components/time-range-picker/types.ts b/src/uix/eidos/components/time-range-picker/types.ts index dda7c54e2..a2d4eca29 100644 --- a/src/uix/eidos/components/time-range-picker/types.ts +++ b/src/uix/eidos/components/time-range-picker/types.ts @@ -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; diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index 6f78b6714..de7b0bf47 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -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); diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts index f2b4aec9c..05145fb2a 100644 --- a/src/uix/eidos/lib/recipes/base.ts +++ b/src/uix/eidos/lib/recipes/base.ts @@ -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