You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 KiB
27 KiB
range-calendar — alcance de tema: análisis y propuesta
Generado por
node --import tsx/esm scripts/theming-census.ts --report. Lo medido y la propuesta se regeneran; el Veredicto (§5) se conserva. Vista de conjunto: README · método y protocolo:PLAN-theming.md§1, §2, §7.
- Medido: 2026-08-20 · Alcance: 0% — 0 de 95 knobs por token público
- Knobs de apariencia: 98 — público 0 · privado 7 · global 84 · literal 4 · sistema 3 (fuera del ratio)
- Contrato hoy (
lib/recipes/base.ts): 0 pública(s) · 5 privada(s) forward —_palette-solid,_palette-solid-hover,_palette-track,_palette-border,_palette-text - Eje
size: sí · ficheros:range-calendar.css
1. Knobs fuera de alcance
1.1 Directo a primitivo global (84)
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | range-calendar.css:51 |
[data-range-calendar] |
gap |
var(--calendar-gap) ⤴ prestado de calendar |
| 2 | range-calendar.css:54 |
[data-range-calendar] |
padding |
var(--_calendar-padding) |
| 3 | range-calendar.css:55 |
[data-range-calendar] |
border |
var(--calendar-border-width) solid var(--calendar-border) ⤴ prestado de calendar |
| 4 | range-calendar.css:56 |
[data-range-calendar] |
border-radius |
var(--calendar-radius) ⤴ prestado de calendar |
| 5 | range-calendar.css:57 |
[data-range-calendar] |
background |
var(--calendar-bg) ⤴ prestado de calendar |
| 6 | range-calendar.css:58 |
[data-range-calendar] |
box-shadow |
var(--calendar-shadow) ⤴ prestado de calendar |
| 7 | range-calendar.css:59 |
[data-range-calendar] |
color |
var(--calendar-fg) ⤴ prestado de calendar |
| 8 | range-calendar.css:60 |
[data-range-calendar] |
font-family |
var(--calendar-font-family) ⤴ prestado de calendar |
| 9 | range-calendar.css:61 |
[data-range-calendar] |
font-size |
var(--_calendar-font-size) |
| 10 | range-calendar.css:62 |
[data-range-calendar] |
line-height |
var(--calendar-line-height) ⤴ prestado de calendar |
| 11 | range-calendar.css:87 |
[data-range-calendar][data-variant='outline'] |
background |
var(--calendar-outline-bg) ⤴ prestado de calendar |
| 12 | range-calendar.css:88 |
[data-range-calendar][data-variant='outline'] |
box-shadow |
var(--calendar-outline-shadow) ⤴ prestado de calendar |
| 13 | range-calendar.css:116 |
[data-range-calendar-header] |
gap |
var(--calendar-header-gap) ⤴ prestado de calendar |
| 14 | range-calendar.css:125 |
[data-range-calendar-header-controls] |
gap |
var(--calendar-header-gap) ⤴ prestado de calendar |
| 15 | range-calendar.css:132 |
[data-range-calendar-heading] |
color |
var(--calendar-heading-fg) ⤴ prestado de calendar |
| 16 | range-calendar.css:133 |
[data-range-calendar-heading] |
font-weight |
var(--calendar-heading-font-weight) ⤴ prestado de calendar |
| 17 | range-calendar.css:150 |
[data-range-calendar-month-select], [data-range-calendar-year-select] |
block-size |
var(--_calendar-control-size) |
| 18 | range-calendar.css:151 |
[data-range-calendar-month-select], [data-range-calendar-year-select] |
padding-inline |
var(--calendar-select-padding-inline) ⤴ prestado de calendar |
| 19 | range-calendar.css:152 |
[data-range-calendar-month-select], [data-range-calendar-year-select] |
border |
var(--calendar-control-border-width) solid var(--calendar-control-border) ⤴ prestado de calendar |
| 20 | range-calendar.css:153 |
[data-range-calendar-month-select], [data-range-calendar-year-select] |
border-radius |
var(--calendar-control-radius) ⤴ prestado de calendar |
| 21 | range-calendar.css:154 |
[data-range-calendar-month-select], [data-range-calendar-year-select] |
background |
var(--calendar-control-bg) ⤴ prestado de calendar |
| 22 | range-calendar.css:155 |
[data-range-calendar-month-select], [data-range-calendar-year-select] |
color |
var(--calendar-control-fg) ⤴ prestado de calendar |
| 23 | range-calendar.css:166 |
[data-range-calendar-month-select] |
min-inline-size |
var(--calendar-select-min-width) ⤴ prestado de calendar |
| 24 | range-calendar.css:167 |
[data-range-calendar-month-select] |
inline-size |
calc(var(--_calendar-day-size) * 2.35) |
| 25 | range-calendar.css:171 |
[data-range-calendar-year-select] |
min-inline-size |
var(--calendar-select-min-width) ⤴ prestado de calendar |
| 26 | range-calendar.css:172 |
[data-range-calendar-year-select] |
inline-size |
calc(var(--_calendar-day-size) * 2.15) |
| 27 | range-calendar.css:177 |
[data-range-calendar-month-select]:hover, [data-range-calendar-year-select]:hover |
border-color |
var(--calendar-hover-control-border) ⤴ prestado de calendar |
| 28 | range-calendar.css:179 |
[data-range-calendar-month-select]:hover, [data-range-calendar-year-select]:hover |
color |
var(--calendar-hover-control-fg) ⤴ prestado de calendar |
| 29 | range-calendar.css:192 |
[data-range-calendar-months] |
gap |
var(--calendar-months-gap) ⤴ prestado de calendar |
| 30 | range-calendar.css:203 |
[data-range-calendar-month-panel] |
gap |
var(--calendar-grid-gap) ⤴ prestado de calendar |
| 31 | range-calendar.css:218 |
[data-range-calendar-head-cell] |
inline-size |
var(--_calendar-day-size) |
| 32 | range-calendar.css:219 |
[data-range-calendar-head-cell] |
block-size |
var(--calendar-weekday-size) ⤴ prestado de calendar |
| 33 | range-calendar.css:220 |
[data-range-calendar-head-cell] |
color |
var(--calendar-weekday-fg) ⤴ prestado de calendar |
| 34 | range-calendar.css:221 |
[data-range-calendar-head-cell] |
font-size |
var(--calendar-weekday-font-size) ⤴ prestado de calendar |
| 35 | range-calendar.css:222 |
[data-range-calendar-head-cell] |
font-weight |
var(--calendar-weekday-font-weight) ⤴ prestado de calendar |
| 36 | range-calendar.css:227 |
[data-range-calendar-week-number] |
color |
var(--calendar-weekday-fg) ⤴ prestado de calendar |
| 37 | range-calendar.css:232 |
[data-range-calendar-week-number][scope='row'] |
block-size |
var(--_calendar-day-size) |
| 38 | range-calendar.css:233 |
[data-range-calendar-week-number][scope='row'] |
font-size |
var(--calendar-weekday-font-size) ⤴ prestado de calendar |
| 39 | range-calendar.css:234 |
[data-range-calendar-week-number][scope='row'] |
font-weight |
var(--calendar-weekday-font-weight) ⤴ prestado de calendar |
| 40 | range-calendar.css:239 |
[data-range-calendar-cell] |
border-radius |
var(--calendar-day-radius) ⤴ prestado de calendar |
| 41 | range-calendar.css:254 |
[data-range-calendar-day] |
inline-size |
var(--_calendar-day-size) |
| 42 | range-calendar.css:255 |
[data-range-calendar-day] |
block-size |
var(--_calendar-day-size) |
| 43 | range-calendar.css:256 |
[data-range-calendar-day] |
border |
var(--calendar-day-border-width) solid var(--calendar-day-border) ⤴ prestado de calendar |
| 44 | range-calendar.css:257 |
[data-range-calendar-day] |
border-radius |
var(--calendar-day-radius) ⤴ prestado de calendar |
| 45 | range-calendar.css:258 |
[data-range-calendar-day] |
background |
var(--calendar-day-bg) ⤴ prestado de calendar |
| 46 | range-calendar.css:259 |
[data-range-calendar-day] |
color |
var(--calendar-day-fg) ⤴ prestado de calendar |
| 47 | range-calendar.css:261 |
[data-range-calendar-day] |
font-weight |
var(--calendar-day-font-weight) ⤴ prestado de calendar |
| 48 | range-calendar.css:273 |
[data-range-calendar-day]:hover |
border-color |
var(--calendar-hover-day-border) ⤴ prestado de calendar |
| 49 | range-calendar.css:275 |
[data-range-calendar-day]:hover |
color |
var(--calendar-hover-day-fg) ⤴ prestado de calendar |
| 50 | range-calendar.css:279 |
[data-range-calendar-day][data-selected] |
border-color |
var(--calendar-range-end-border) ⤴ prestado de calendar |
| 51 | range-calendar.css:280 |
[data-range-calendar-day][data-selected] |
background |
var(--calendar-range-end-solid) ⤴ prestado de calendar |
| 52 | range-calendar.css:281 |
[data-range-calendar-day][data-selected] |
color |
var(--calendar-day-selected-fg) ⤴ prestado de calendar |
| 53 | range-calendar.css:287 |
[data-range-calendar-day][data-range-start] |
border-color |
var(--calendar-range-start-border) ⤴ prestado de calendar |
| 54 | range-calendar.css:288 |
[data-range-calendar-day][data-range-start] |
background |
var(--calendar-range-start-solid) ⤴ prestado de calendar |
| 55 | range-calendar.css:289 |
[data-range-calendar-day][data-range-start] |
color |
var(--calendar-range-start-text) ⤴ prestado de calendar |
| 56 | range-calendar.css:290 |
[data-range-calendar-day][data-range-start] |
box-shadow |
inset 2px 0 0 0 var(--calendar-range-start-border) ⤴ prestado de calendar |
| 57 | range-calendar.css:291 |
[data-range-calendar-day][data-range-start] |
font-weight |
var(--font-weight-semibold) |
| 58 | range-calendar.css:296 |
[data-range-calendar-day][data-range-end] |
border-color |
var(--calendar-range-end-border) ⤴ prestado de calendar |
| 59 | range-calendar.css:297 |
[data-range-calendar-day][data-range-end] |
background |
var(--calendar-range-end-solid) ⤴ prestado de calendar |
| 60 | range-calendar.css:298 |
[data-range-calendar-day][data-range-end] |
color |
var(--calendar-range-end-text) ⤴ prestado de calendar |
| 61 | range-calendar.css:299 |
[data-range-calendar-day][data-range-end] |
box-shadow |
inset -2px 0 0 0 var(--calendar-range-end-border) ⤴ prestado de calendar |
| 62 | range-calendar.css:300 |
[data-range-calendar-day][data-range-end] |
font-weight |
var(--font-weight-semibold) |
| 63 | range-calendar.css:304 |
[data-range-calendar-day][data-range-start][data-range-end] |
border-color |
var(--calendar-range-end-border) ⤴ prestado de calendar |
| 64 | range-calendar.css:305 |
[data-range-calendar-day][data-range-start][data-range-end] |
background |
linear-gradient( 135deg, var(--calendar-range-start-solid) 0 50%, var(--calendar-range-end-solid) 50% 100% ) ⤴ prestado de calendar |
| 65 | range-calendar.css:310 |
[data-range-calendar-day][data-range-start][data-range-end] |
color |
var(--calendar-day-selected-fg) ⤴ prestado de calendar |
| 66 | range-calendar.css:314 |
[data-range-calendar-day][data-selected]:hover |
border-color |
var(--calendar-range-end-solid-hover) ⤴ prestado de calendar |
| 67 | range-calendar.css:315 |
[data-range-calendar-day][data-selected]:hover |
background |
var(--calendar-range-end-solid-hover) ⤴ prestado de calendar |
| 68 | range-calendar.css:319 |
[data-range-calendar-day][data-range-start]:hover |
border-color |
var(--calendar-range-start-solid-hover) ⤴ prestado de calendar |
| 69 | range-calendar.css:320 |
[data-range-calendar-day][data-range-start]:hover |
background |
var(--calendar-range-start-solid-hover) ⤴ prestado de calendar |
| 70 | range-calendar.css:324 |
[data-range-calendar-day][data-range-end]:hover |
border-color |
var(--calendar-range-end-solid-hover) ⤴ prestado de calendar |
| 71 | range-calendar.css:325 |
[data-range-calendar-day][data-range-end]:hover |
background |
var(--calendar-range-end-solid-hover) ⤴ prestado de calendar |
| 72 | range-calendar.css:329 |
[data-range-calendar-day][data-range-start][data-range-end]:hover |
background |
linear-gradient( 135deg, var(--calendar-range-start-solid-hover) 0 50%, var(--calendar-range-end-solid-hover) 50% 100% ) ⤴ prestado de calendar |
| 73 | range-calendar.css:357 |
[data-range-calendar-day][data-today]:not([data-selected]) |
border-color |
var(--calendar-day-today-border) ⤴ prestado de calendar |
| 74 | range-calendar.css:358 |
[data-range-calendar-day][data-today]:not([data-selected]) |
color |
var(--calendar-day-today-fg) ⤴ prestado de calendar |
| 75 | range-calendar.css:359 |
[data-range-calendar-day][data-today]:not([data-selected]) |
font-weight |
var(--calendar-day-today-font-weight) ⤴ prestado de calendar |
| 76 | range-calendar.css:363 |
[data-range-calendar-day][data-outside-month] |
color |
var(--calendar-day-outside-fg) ⤴ prestado de calendar |
| 77 | range-calendar.css:364 |
[data-range-calendar-day][data-outside-month] |
opacity |
var(--calendar-day-outside-opacity) ⤴ prestado de calendar |
| 78 | range-calendar.css:368 |
[data-range-calendar-day][data-weekend]:not([data-selected]) |
color |
var(--calendar-day-weekend-fg) ⤴ prestado de calendar |
| 79 | range-calendar.css:372 |
[data-range-calendar-day][data-holiday]:not([data-selected]) |
box-shadow |
var(--calendar-day-holiday-shadow) ⤴ prestado de calendar |
| 80 | range-calendar.css:377 |
[data-range-calendar-day][data-unavailable] |
text-decoration-color |
var(--calendar-day-unavailable-decoration) ⤴ prestado de calendar |
| 81 | range-calendar.css:383 |
[data-range-calendar-day][data-disabled], [data-range-calendar-day][data-unavailable] |
opacity |
var(--calendar-disabled-opacity) ⤴ prestado de calendar |
| 82 | range-calendar.css:387 |
[data-range-calendar][data-invalid] |
border-color |
var(--calendar-invalid-border) ⤴ prestado de calendar |
| 83 | range-calendar.css:391 |
[data-range-calendar][data-disabled] |
opacity |
var(--calendar-disabled-opacity) ⤴ prestado de calendar |
| 84 | range-calendar.css:407 |
[data-range-calendar-day][data-event], [data-range-calendar-prev-button][data-event], [data-range-calendar-next-button][data-event], [data-range-calendar-month-select][data-event], [data-range-calendar-year-select][data-event] |
box-shadow |
var(--calendar-event-shadow) ⤴ prestado de calendar |
1.2 A través de un privado (7)
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | range-calendar.css:246 |
[data-range-calendar-cell][data-in-range], [data-range-calendar-cell][data-in-preview-range] |
background |
var(--_range-calendar-palette-track) |
| 2 | range-calendar.css:339 |
[data-range-calendar-day][data-in-range]:not([data-selected]) |
color |
var(--_range-calendar-palette-text) |
| 3 | range-calendar.css:345 |
[data-range-calendar-day][data-preview-start], [data-range-calendar-day][data-preview-end], [data-range-calendar-day][data-in-preview-range]:not([data-selected]) |
border-color |
var(--_range-calendar-palette-border) |
| 4 | range-calendar.css:347 |
[data-range-calendar-day][data-preview-start], [data-range-calendar-day][data-preview-end], [data-range-calendar-day][data-in-preview-range]:not([data-selected]) |
color |
var(--_range-calendar-palette-text) |
| 5 | range-calendar.css:351 |
[data-range-calendar-day][data-focused]:not([data-selected]) |
border-color |
var(--_range-calendar-palette-border) |
| 6 | range-calendar.css:352 |
[data-range-calendar-day][data-focused]:not([data-selected]) |
background |
var(--_range-calendar-palette-track) |
| 7 | range-calendar.css:353 |
[data-range-calendar-day][data-focused]:not([data-selected]) |
color |
var(--_range-calendar-palette-text) |
1.3 Literales (4)
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | range-calendar.css:52 |
[data-range-calendar] |
inline-size |
max-content |
| 2 | range-calendar.css:117 |
[data-range-calendar-header] |
inline-size |
100% |
| 3 | range-calendar.css:204 |
[data-range-calendar-month-panel] |
min-inline-size |
max-content |
| 4 | range-calendar.css:209 |
[data-range-calendar-grid] |
inline-size |
max-content |
2. Sistema transversal (3) — informativo, fuera del ratio
Un tema los alcanza a nivel de sistema, por diseño (recipe-contract §2).
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | range-calendar.css:143 |
[data-range-calendar-day]:focus-visible |
outline |
var(--focus-ring-width) solid var(--focus-ring-color) |
| 2 | range-calendar.css:178 |
[data-range-calendar-month-select]:hover, [data-range-calendar-year-select]:hover |
background-image |
linear-gradient(var(--state-hover), var(--state-hover)) |
| 3 | range-calendar.css:274 |
[data-range-calendar-day]:hover |
background-image |
linear-gradient(var(--state-hover), var(--state-hover)) |
3. Privados de la receta — ¿de dónde sale su valor?
La receta no declara privados propios en su CSS.
Consumidos y no declarados en el CSS (vienen de base.ts o de un estilo inline del wrapper): --_range-calendar-palette-border, --_range-calendar-palette-solid, --_range-calendar-palette-solid-hover, --_range-calendar-palette-text, --_range-calendar-palette-track.
4. Propuesta de corrección
- Consume tokens públicos de
calendar. 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 guardrecipe-css-contractprohíbe el primitivo).
4.1 Tokens a declarar en lib/recipes/base.ts (59)
Valor verbatim del CSS de hoy: el default no se mueve, sólo cambia quién
puede moverlo. Nombres derivados de recipe-contract §1 (ejes lógicos, talla
al final) y theming §6.7 (slots de color, modificador delante). Un token con
DOS valores distintos es una colisión de nombre: son dos knobs, o el nombre
no distingue lo que debería — se marca ⚠.
token (--range-calendar-…) |
scope TSC | valor propuesto | usos |
|---|---|---|---|
day-fg |
root |
⚠ var(--calendar-day-fg) / var(--calendar-range-start-text) / var(--calendar-range-end-text) / var(--calendar-day-selected-fg) / var(--calendar-day-today-fg) / var(--calendar-day-outside-fg) / var(--calendar-day-weekend-fg) |
7 |
day-bg |
root |
⚠ var(--calendar-day-bg) / var(--calendar-range-start-solid) / var(--calendar-range-end-solid) / linear-gradient( 135deg, var(--calendar-range-start-solid) 0 50%, var(--calendar-range-end-solid) 50% 100% ) |
4 |
day-font-weight |
root |
⚠ var(--calendar-day-font-weight) / var(--font-weight-semibold) / var(--calendar-day-today-font-weight) |
4 |
day-border |
root |
⚠ var(--calendar-range-start-border) / var(--calendar-range-end-border) / var(--calendar-day-today-border) |
4 |
day-shadow |
root |
⚠ inset 2px 0 0 0 var(--calendar-range-start-border) / inset -2px 0 0 0 var(--calendar-range-end-border) / var(--calendar-day-holiday-shadow) / var(--calendar-event-shadow) |
4 |
hover-day-border |
root |
⚠ var(--calendar-hover-day-border) / var(--calendar-range-start-solid-hover) / var(--calendar-range-end-solid-hover) |
3 |
hover-day-bg |
root |
⚠ var(--calendar-range-start-solid-hover) / var(--calendar-range-end-solid-hover) / linear-gradient( 135deg, var(--calendar-range-start-solid-hover) 0 50%, var(--calendar-range-end-solid-hover) 50% 100% ) |
3 |
month-select-width |
root |
⚠ var(--calendar-select-min-width) / calc(var(--_calendar-day-size) * 2.35) |
2 |
year-select-width |
root |
⚠ var(--calendar-select-min-width) / calc(var(--_calendar-day-size) * 2.15) |
2 |
gap |
root |
var(--calendar-gap) |
1 |
width |
root |
max-content |
1 |
radius |
root |
var(--calendar-radius) |
1 |
bg |
root |
var(--calendar-bg) |
1 |
shadow |
root |
var(--calendar-shadow) |
1 |
fg |
root |
var(--calendar-fg) |
1 |
font-family |
root |
var(--calendar-font-family) |
1 |
font-size |
root |
var(--_calendar-font-size) |
1 |
line-height |
root |
var(--calendar-line-height) |
1 |
outline-bg |
root |
var(--calendar-outline-bg) |
1 |
outline-shadow |
root |
var(--calendar-outline-shadow) |
1 |
header-gap |
root |
var(--calendar-header-gap) |
1 |
header-controls-gap |
root |
var(--calendar-header-gap) |
1 |
heading-fg |
root |
var(--calendar-heading-fg) |
1 |
heading-font-weight |
root |
var(--calendar-heading-font-weight) |
1 |
month-select-height |
root |
var(--_calendar-control-size) |
1 |
month-select-padding-inline |
root |
var(--calendar-select-padding-inline) |
1 |
month-select-radius |
root |
var(--calendar-control-radius) |
1 |
month-select-bg |
root |
var(--calendar-control-bg) |
1 |
month-select-fg |
root |
var(--calendar-control-fg) |
1 |
hover-month-select-border |
root |
var(--calendar-hover-control-border) |
1 |
hover-month-select-fg |
root |
var(--calendar-hover-control-fg) |
1 |
months-gap |
root |
var(--calendar-months-gap) |
1 |
month-panel-gap |
root |
var(--calendar-grid-gap) |
1 |
month-panel-width |
root |
max-content |
1 |
grid-width |
root |
max-content |
1 |
head-cell-width |
root |
var(--_calendar-day-size) |
1 |
head-cell-height |
root |
var(--calendar-weekday-size) |
1 |
head-cell-fg |
root |
var(--calendar-weekday-fg) |
1 |
head-cell-font-size |
root |
var(--calendar-weekday-font-size) |
1 |
head-cell-font-weight |
root |
var(--calendar-weekday-font-weight) |
1 |
week-number-fg |
root |
var(--calendar-weekday-fg) |
1 |
week-number-height |
root |
var(--_calendar-day-size) |
1 |
week-number-font-size |
root |
var(--calendar-weekday-font-size) |
1 |
week-number-font-weight |
root |
var(--calendar-weekday-font-weight) |
1 |
cell-radius |
root |
var(--calendar-day-radius) |
1 |
day-width |
root |
var(--_calendar-day-size) |
1 |
day-height |
root |
var(--_calendar-day-size) |
1 |
day-radius |
root |
var(--calendar-day-radius) |
1 |
hover-day-fg |
root |
var(--calendar-hover-day-fg) |
1 |
selected-day-border |
root |
var(--calendar-range-end-border) |
1 |
selected-day-bg |
root |
var(--calendar-range-end-solid) |
1 |
selected-day-fg |
root |
var(--calendar-day-selected-fg) |
1 |
hover-selected-day-border |
root |
var(--calendar-range-end-solid-hover) |
1 |
hover-selected-day-bg |
root |
var(--calendar-range-end-solid-hover) |
1 |
day-opacity |
root |
var(--calendar-day-outside-opacity) |
1 |
day-underline |
root |
var(--calendar-day-unavailable-decoration) |
1 |
disabled-day-opacity |
root |
var(--calendar-disabled-opacity) |
1 |
invalid-border |
root |
var(--calendar-invalid-border) |
1 |
disabled-opacity |
root |
var(--calendar-disabled-opacity) |
1 |
4.2 Sin nombre mecánico (12)
- ⚠ decisión:
paddinges shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4) — 1:padding. - ⚠ decisión:
borderes shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4) — 3:border. - ⚠ 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 — 1:inline-size. - ⚠ decisión: el privado que alimenta este knob no se declara en el CSS (viene de
base.tso de un estilo inline) — hay que resolverlo antes de nombrarlo — 7:background,color,border-color.
4.3 Avisos sobre los tokens propuestos (1)
- ⚠ decisión: el valor es una expresión — el token puede llevar la expresión entera o sólo su término variable —
--range-calendar-month-select-width,--range-calendar-year-select-width
4.4 Lo que hay que comprobar a mano (PLAN-theming §1.3 · §7.4)
- Privado que no deriva de un público — §3 lo marca; el privado debe leer el público o desaparecer.
- Velo o acento en el nodo equivocado (
archetype: 'item'en un envoltorio, unbackgrounden shorthand que mata la capa de estado) — se mide desde el píxel hacia arriba. - Doble animación al mover un sello a una superficie con animación propia — registro de
animationstart/animationend. - Diff de computed = 0 en reposo · hover · abierto · disabled · foco, por talla, antes y después.
- Centinela por token nuevo: valor imposible en el root → el nodo lo sigue. Si no, el token miente.
5. Veredicto
Revisión 2026-08-20 — verificación previa a implementación (Opus).
Análisis (§1–§3): CORRECTO. Cifras reproducidas con --only range-calendar
(98 · 0 · 7 · 84 · 4 · 3); filas muestreadas contra el CSS (:51 gap, :54
padding vía privado ajeno, :55 border shorthand) — coinciden, y las marcas
«⤴ prestado de calendar» son reales: la receta consume ~80 tokens públicos
de calendar y hasta privados suyos (--_calendar-day-size,
--_calendar-font-size, --_calendar-padding), y a la inversa PISA públicos
de calendar con privados propios (range-calendar.css:30:
--calendar-range-end-solid: var(--_range-calendar-palette-solid)).
Propuesta (§4.1): NO IMPLEMENTAR. Dos defectos verificados:
- Acuña 59 alias de
--calendar-*— exactamente lo que la nota de §4 prohíbe («no duplicarlo con prefijo propio») y lo que la purga de alias mató en §39 del changelog («no quiero alias»). Un tema que moviera--range-calendar-day-bg=var(--calendar-day-bg)no ganaría nada: el knob real seguiría siendo del calendar. - Los nombres colisionan porque el lector de estados no conoce los del
día:
day-fgcon 7 valores mezcladata-range-start,data-range-end,data-today,data-outside,data-weekend,data-selected— estados de la familia calendar que la derivación genérica no parsea. Ademásfont-size/day-width/day-heightproponen valores sobre privados AJENOS (--_calendar-*): un tokenrootque referencia un privado es la clase eager-freeze que G1 existe para impedir.
Disposición: este componente NO se tokeniza en solitario. Su corrección es
la decisión de familia calendar registrada en theming-audit.md §B
(«la familia calendar se formaliza como capa compartida/arquetipo»; los
préstamos medidos: range-calendar 79 · month/year-grid 65 · drp 38) — una capa
calendar-surface con contrato propio que los cinco consumidores lean, con la
misma regla que las demás capas compartidas (var(--_x, var(--x)), el
consumidor no acuña). Orden: va en el bloque B7 de F2 (D-TH.4), DESPUÉS de esa
decisión. Lo único accionable aquí y ahora si el autor lo firma: partir los 3
border shorthand en ejes lógicos y anotar los 4 literales.
Bloqueos de firma: decisión de familia calendar (sin firmar) · D-TH.4
(orden) · D-TH.2 (los max-content/100% de layout quedan fuera del knob).