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.
38 KiB
38 KiB
chronos — 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-25 · Alcance: 1% — 3 de 226 knobs por token público
- Knobs de apariencia: 240 — público 3 · privado 14 · global 198 · literal 11 · sistema 7 · excepción 1 · estructural 0 · puente 0 · canal 7 (los cinco últimos, fuera del ratio)
- Contrato hoy (
lib/recipes/base.ts): 9 pública(s) —cell-min-block-sm,cell-min-block-md,cell-min-block-lg,num-row,lane-height-sm,lane-height-md,lane-height-lg,timegrid-block-size,disabled-opacity - Eje
size: sí · ficheros:chronos.css
1. Knobs fuera de alcance
NOTA 2026-08-25 — las filas 68-71 de §1.1 citan una regla RETIRADA. El pin
[data-popover-trigger][data-chronos-more-link]:not(…)(chronos.css:417-423, propiedadespadding-inline·border·border-radius·background) se retiró con la firma «el velo del sistema no muere por un atajo». Existía sólo para ganarle al sobre de trigger depopover.csscuando estaba a (0,2,0); §55 bajó ese sobre al SUELO (0,0,0), donde[data-button](0,1,0) ya le gana, y cuatro de las cinco declaraciones del pin eran copias literales de[data-button]. Medido con la regla desactivada en vivo: 0 diffs en 20 combinacionesvariant×size, reposo y hover. El censo baja de 202 a 198 (verificado:--only chronos→ knobs 240 · global 198); las cuatro filas desaparecen al regenerar la ficha.
1.1 Directo a primitivo global (198)
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | chronos.css:28 |
[data-chronos] |
gap |
var(--space-3) |
| 2 | chronos.css:30 |
[data-chronos] |
color |
var(--color-content-primary) |
| 3 | chronos.css:31 |
[data-chronos] |
font-family |
var(--style-label-font-family) |
| 4 | chronos.css:32 |
[data-chronos] |
font-size |
var(--font-size-sm) |
| 5 | chronos.css:33 |
[data-chronos] |
line-height |
var(--leading-ui) |
| 6 | chronos.css:38 |
[data-chronos][data-size='sm'] |
font-size |
var(--font-size-xs) |
| 7 | chronos.css:43 |
[data-chronos][data-size='lg'] |
font-size |
var(--font-size-md) |
| 8 | chronos.css:91 |
[data-chronos-toolbar] |
gap |
var(--space-3) |
| 9 | chronos.css:103 |
.chronos-date-badge |
min-inline-size |
var(--space-12) |
| 10 | chronos.css:104 |
.chronos-date-badge |
padding |
var(--space-1) var(--space-2) |
| 11 | chronos.css:105 |
.chronos-date-badge |
border |
var(--border-width) solid var(--color-border-subtle) |
| 12 | chronos.css:106 |
.chronos-date-badge |
border-radius |
var(--radius-md) |
| 13 | chronos.css:107 |
.chronos-date-badge |
line-height |
var(--leading-tight) |
| 14 | chronos.css:110 |
.chronos-date-badge-month |
font-size |
var(--font-size-xs) |
| 15 | chronos.css:111 |
.chronos-date-badge-month |
font-weight |
var(--font-weight-semibold) |
| 16 | chronos.css:113 |
.chronos-date-badge-month |
color |
var(--color-content-muted) |
| 17 | chronos.css:116 |
.chronos-date-badge-day |
font-size |
var(--font-size-lg) |
| 18 | chronos.css:117 |
.chronos-date-badge-day |
font-weight |
var(--font-weight-semibold) |
| 19 | chronos.css:118 |
.chronos-date-badge-day |
color |
var(--color-content-primary) |
| 20 | chronos.css:124 |
.chronos-title-block |
gap |
var(--space-0-5) |
| 21 | chronos.css:129 |
.chronos-title-row |
gap |
var(--space-2) |
| 22 | chronos.css:132 |
[data-chronos-heading] |
font-size |
var(--font-size-xl) |
| 23 | chronos.css:133 |
[data-chronos-heading] |
font-weight |
var(--font-weight-semibold) |
| 24 | chronos.css:134 |
[data-chronos-heading] |
color |
var(--color-content-primary) |
| 25 | chronos.css:137 |
.chronos-week-badge |
padding |
0 var(--space-1-5) |
| 26 | chronos.css:138 |
.chronos-week-badge |
border |
var(--border-width) solid var(--color-border-subtle) |
| 27 | chronos.css:139 |
.chronos-week-badge |
border-radius |
var(--radius-full) |
| 28 | chronos.css:140 |
.chronos-week-badge |
font-size |
var(--font-size-xs) |
| 29 | chronos.css:141 |
.chronos-week-badge |
color |
var(--color-content-subtle) |
| 30 | chronos.css:144 |
.chronos-range |
font-size |
var(--font-size-sm) |
| 31 | chronos.css:145 |
.chronos-range |
color |
var(--color-content-muted) |
| 32 | chronos.css:153 |
.chronos-nav-group |
border |
var(--border-width) solid var(--color-border-subtle) |
| 33 | chronos.css:154 |
.chronos-nav-group |
border-radius |
var(--radius-md) |
| 34 | chronos.css:158 |
.chronos-nav-group > :not(:first-child) |
border-inline-start |
var(--border-width) solid var(--color-border-subtle) |
| 35 | chronos.css:166 |
[data-chronos-grid] |
border |
var(--border-width) solid var(--color-border-subtle) |
| 36 | chronos.css:167 |
[data-chronos-grid] |
border-radius |
var(--radius-lg) |
| 37 | chronos.css:169 |
[data-chronos-grid] |
background |
var(--color-surface-raised) |
| 38 | chronos.css:174 |
[data-chronos-grid-head] |
border-block-end |
var(--border-width) solid var(--color-border-subtle) |
| 39 | chronos.css:177 |
[data-chronos-head-cell] |
padding-block |
var(--space-2) |
| 40 | chronos.css:179 |
[data-chronos-head-cell] |
font-size |
var(--font-size-xs) |
| 41 | chronos.css:180 |
[data-chronos-head-cell] |
font-weight |
var(--font-weight-medium) |
| 42 | chronos.css:181 |
[data-chronos-head-cell] |
color |
var(--color-content-muted) |
| 43 | chronos.css:195 |
[data-chronos-grid-row]:not(:last-child) |
border-block-end |
var(--border-width) solid var(--color-border-subtle) |
| 44 | chronos.css:199 |
[data-chronos-day-cell] |
padding |
var(--space-1) var(--space-1-5) |
| 45 | chronos.css:200 |
[data-chronos-day-cell] |
border-inline-end |
var(--border-width) solid var(--color-border-subtle) |
| 46 | chronos.css:208 |
[data-chronos-day-cell][data-weekend], [data-chronos-day-cell][data-outside-month] |
background |
var(--color-surface-default) |
| 47 | chronos.css:211 |
[data-chronos-day-cell][data-outside-month] [data-chronos-day-number] |
color |
var(--color-content-muted) |
| 48 | chronos.css:237 |
.chronos-day-cell-head |
gap |
var(--space-1) |
| 49 | chronos.css:257 |
[data-chronos-day-number] |
min-inline-size |
var(--space-6) |
| 50 | chronos.css:258 |
[data-chronos-day-number] |
block-size |
var(--space-6) |
| 51 | chronos.css:259 |
[data-chronos-day-number] |
font-size |
var(--font-size-sm) |
| 52 | chronos.css:260 |
[data-chronos-day-number] |
color |
var(--color-content-primary) |
| 53 | chronos.css:264 |
[data-chronos-day-cell][data-today] [data-chronos-day-number] |
color |
var(--color-content-on-solid) |
| 54 | chronos.css:265 |
[data-chronos-day-cell][data-today] [data-chronos-day-number] |
border-radius |
var(--radius-full) |
| 55 | chronos.css:266 |
[data-chronos-day-cell][data-today] [data-chronos-day-number] |
font-weight |
var(--font-weight-semibold) |
| 56 | chronos.css:279 |
.chronos-overlay |
gap |
var(--space-0-5) |
| 57 | chronos.css:286 |
[data-chronos-event-chip] |
gap |
var(--space-1-5) |
| 58 | chronos.css:288 |
[data-chronos-event-chip] |
padding-inline |
var(--space-1-5) |
| 59 | chronos.css:289 |
[data-chronos-event-chip] |
border-radius |
var(--radius-sm) |
| 60 | chronos.css:293 |
[data-chronos-event-chip] |
font-size |
var(--font-size-xs) |
| 61 | chronos.css:316 |
.chronos-resize-handle |
inline-size |
var(--space-2) |
| 62 | chronos.css:325 |
.chronos-resize-handle-b |
block-size |
var(--space-2) |
| 63 | chronos.css:383 |
.chronos-chip-title |
font-weight |
var(--font-weight-medium) |
| 64 | chronos.css:394 |
.chronos-tooltip |
gap |
var(--space-0-5) |
| 65 | chronos.css:397 |
.chronos-tooltip-meta |
color |
var(--color-content-muted) |
| 66 | chronos.css:398 |
.chronos-tooltip-meta |
font-size |
var(--font-size-xs) |
| 67 | chronos.css:404 |
.chronos-drag-preview |
box-shadow |
var(--shadow-overlay) |
| 68 | chronos.css:428 |
.chronos-legend |
gap |
var(--space-3) |
| 69 | chronos.css:429 |
.chronos-legend |
padding-block-start |
var(--space-1) |
| 70 | chronos.css:434 |
.chronos-legend-item |
gap |
var(--space-1-5) |
| 71 | chronos.css:435 |
.chronos-legend-item |
font-size |
var(--font-size-xs) |
| 72 | chronos.css:436 |
.chronos-legend-item |
color |
var(--color-content-subtle) |
| 73 | chronos.css:439 |
.chronos-legend-swatch |
inline-size |
var(--space-2-5) |
| 74 | chronos.css:440 |
.chronos-legend-swatch |
block-size |
var(--space-2-5) |
| 75 | chronos.css:441 |
.chronos-legend-swatch |
border-radius |
var(--radius-sm) |
| 76 | chronos.css:471 |
.chronos-editor-fields |
gap |
var(--space-3) |
| 77 | chronos.css:478 |
.chronos-field |
gap |
var(--space-1) |
| 78 | chronos.css:512 |
.chronos-when |
gap |
var(--space-3) |
| 79 | chronos.css:513 |
.chronos-when |
padding |
var(--space-3) |
| 80 | chronos.css:514 |
.chronos-when |
background |
var(--color-surface-subtle) |
| 81 | chronos.css:515 |
.chronos-when |
border |
var(--border-width) solid var(--color-border-subtle) |
| 82 | chronos.css:516 |
.chronos-when |
border-radius |
var(--radius-lg) |
| 83 | chronos.css:521 |
.chronos-when-field |
gap |
var(--space-1-5) |
| 84 | chronos.css:525 |
.chronos-when-label |
font-size |
var(--font-size-xs) |
| 85 | chronos.css:526 |
.chronos-when-label |
font-weight |
var(--font-weight-medium) |
| 86 | chronos.css:527 |
.chronos-when-label |
color |
var(--color-content-subtle) |
| 87 | chronos.css:531 |
.chronos-when-hint |
font-size |
var(--font-size-xs) |
| 88 | chronos.css:532 |
.chronos-when-hint |
color |
var(--color-content-muted) |
| 89 | chronos.css:538 |
.chronos-when-warn |
gap |
var(--space-1-5) |
| 90 | chronos.css:540 |
.chronos-when-warn |
font-size |
var(--font-size-xs) |
| 91 | chronos.css:541 |
.chronos-when-warn |
color |
var(--color-risk-text) |
| 92 | chronos.css:548 |
.chronos-pair, .chronos-band-row |
gap |
var(--space-2) |
| 93 | chronos.css:553 |
.chronos-pair-sep |
color |
var(--color-content-muted) |
| 94 | chronos.css:572 |
.chronos-when [data-time-range-picker] |
gap |
var(--space-2) |
| 95 | chronos.css:584 |
.chronos-bands |
gap |
var(--space-2) |
| 96 | chronos.css:592 |
.chronos-clock-endpoint |
gap |
var(--space-1-5) |
| 97 | chronos.css:614 |
.chronos-field-label |
font-family |
var(--style-label-font-family) |
| 98 | chronos.css:615 |
.chronos-field-label |
font-size |
var(--font-size-md) |
| 99 | chronos.css:616 |
.chronos-field-label |
font-weight |
var(--font-weight-medium) |
| 100 | chronos.css:617 |
.chronos-field-label |
color |
var(--color-content-subtle) |
| 101 | chronos.css:626 |
.chronos-editor-error |
gap |
var(--space-1-5) |
| 102 | chronos.css:628 |
.chronos-editor-error |
font-size |
var(--font-size-sm) |
| 103 | chronos.css:629 |
.chronos-editor-error |
color |
var(--color-threat-text) |
| 104 | chronos.css:634 |
.chronos-swatches |
gap |
var(--space-1-5) |
| 105 | chronos.css:637 |
.chronos-swatch |
inline-size |
var(--space-5) |
| 106 | chronos.css:638 |
.chronos-swatch |
block-size |
var(--space-5) |
| 107 | chronos.css:639 |
.chronos-swatch |
border-radius |
var(--radius-full) |
| 108 | chronos.css:640 |
.chronos-swatch |
border |
var(--border-width) solid var(--color-border-subtle) |
| 109 | chronos.css:644 |
.chronos-swatch[data-selected] |
box-shadow |
0 0 0 var(--border-width) var(--color-surface-raised), 0 0 0 calc(var(--border-width) * 3) var(--color-content-primary) |
| 110 | chronos.css:651 |
.chronos-type-option |
gap |
var(--space-1-5) |
| 111 | chronos.css:655 |
.chronos-type-swatch |
inline-size |
var(--space-2) |
| 112 | chronos.css:656 |
.chronos-type-swatch |
block-size |
var(--space-2) |
| 113 | chronos.css:657 |
.chronos-type-swatch |
border-radius |
var(--radius-full) |
| 114 | chronos.css:666 |
[data-chronos-time-view] |
border |
var(--border-width) solid var(--color-border-subtle) |
| 115 | chronos.css:667 |
[data-chronos-time-view] |
border-radius |
var(--radius-lg) |
| 116 | chronos.css:671 |
[data-chronos-time-view] |
background |
var(--color-surface-raised) |
| 117 | chronos.css:678 |
.chronos-tg-sticky |
background |
var(--color-surface-raised) |
| 118 | chronos.css:684 |
.chronos-tg-head, .chronos-tg-allday |
border-block-end |
var(--border-width) solid var(--color-border-subtle) |
| 119 | chronos.css:694 |
.chronos-tg-dayhead |
gap |
var(--space-1-5) |
| 120 | chronos.css:695 |
.chronos-tg-dayhead |
padding-block |
var(--space-2) |
| 121 | chronos.css:696 |
.chronos-tg-dayhead |
border-inline-start |
var(--border-width) solid var(--color-border-subtle) |
| 122 | chronos.css:697 |
.chronos-tg-dayhead |
font-size |
var(--font-size-sm) |
| 123 | chronos.css:698 |
.chronos-tg-dayhead |
color |
var(--color-content-subtle) |
| 124 | chronos.css:707 |
.chronos-tg-dayhead[data-today] .chronos-tg-daynum |
min-inline-size |
var(--space-6) |
| 125 | chronos.css:708 |
.chronos-tg-dayhead[data-today] .chronos-tg-daynum |
block-size |
var(--space-6) |
| 126 | chronos.css:710 |
.chronos-tg-dayhead[data-today] .chronos-tg-daynum |
color |
var(--color-content-on-solid) |
| 127 | chronos.css:711 |
.chronos-tg-dayhead[data-today] .chronos-tg-daynum |
border-radius |
var(--radius-full) |
| 128 | chronos.css:712 |
.chronos-tg-dayhead[data-today] .chronos-tg-daynum |
font-weight |
var(--font-weight-semibold) |
| 129 | chronos.css:718 |
.chronos-tg-railcell |
font-size |
var(--font-size-xs) |
| 130 | chronos.css:719 |
.chronos-tg-railcell |
color |
var(--color-content-muted) |
| 131 | chronos.css:724 |
.chronos-tg-alldaycol |
gap |
var(--space-0-5) |
| 132 | chronos.css:725 |
.chronos-tg-alldaycol |
padding |
var(--space-0-5) |
| 133 | chronos.css:726 |
.chronos-tg-alldaycol |
border-inline-start |
var(--border-width) solid var(--color-border-subtle) |
| 134 | chronos.css:735 |
.chronos-tg-body |
padding-block-start |
var(--space-3) |
| 135 | chronos.css:744 |
.chronos-tg-hour |
font-size |
var(--font-size-xs) |
| 136 | chronos.css:745 |
.chronos-tg-hour |
color |
var(--color-content-muted) |
| 137 | chronos.css:761 |
.chronos-tg-col |
border-inline-start |
var(--border-width) solid var(--color-border-subtle) |
| 138 | chronos.css:767 |
.chronos-tg-slot |
border-block-end |
var(--border-width) solid var(--color-border-subtle) |
| 139 | chronos.css:785 |
[data-chronos-event-chip][data-timed] |
padding-block |
var(--space-0-5) |
| 140 | chronos.css:802 |
.chronos-tg-now::before |
inline-size |
var(--space-2) |
| 141 | chronos.css:803 |
.chronos-tg-now::before |
block-size |
var(--space-2) |
| 142 | chronos.css:805 |
.chronos-tg-now::before |
border-radius |
var(--radius-full) |
| 143 | chronos.css:818 |
[data-chronos-peek-panel] |
min-inline-size |
var(--popover-min-width-sm) ⤴ prestado de popover |
| 144 | chronos.css:822 |
[data-chronos-peek-panel] |
min-block-size |
var(--space-16) |
| 145 | chronos.css:843 |
.chronos-peek-resize |
inline-size |
var(--space-2) |
| 146 | chronos.css:849 |
.chronos-peek-resize::after |
inline-size |
var(--border-width) |
| 147 | chronos.css:850 |
.chronos-peek-resize::after |
block-size |
var(--space-6) |
| 148 | chronos.css:851 |
.chronos-peek-resize::after |
border-radius |
var(--radius-full) |
| 149 | chronos.css:852 |
.chronos-peek-resize::after |
background |
var(--color-border-default) |
| 150 | chronos.css:859 |
.chronos-peek-resize:hover::after, .chronos-peek-resize:active::after |
background |
var(--color-primary-solid) |
| 151 | chronos.css:860 |
.chronos-peek-resize:hover::after, .chronos-peek-resize:active::after |
block-size |
var(--space-8) |
| 152 | chronos.css:874 |
[data-chronos-day-peek] |
gap |
var(--space-2) |
| 153 | chronos.css:880 |
.chronos-peek-head |
gap |
var(--space-2-5) |
| 154 | chronos.css:881 |
.chronos-peek-head |
padding-block-end |
var(--space-1-5) |
| 155 | chronos.css:882 |
.chronos-peek-head |
border-block-end |
var(--border-width) solid var(--color-border-subtle) |
| 156 | chronos.css:885 |
.chronos-peek-daynum |
font-size |
var(--font-size-xl) |
| 157 | chronos.css:886 |
.chronos-peek-daynum |
font-weight |
var(--font-weight-semibold) |
| 158 | chronos.css:887 |
.chronos-peek-daynum |
line-height |
var(--leading-none) |
| 159 | chronos.css:888 |
.chronos-peek-daynum |
color |
var(--color-content-primary) |
| 160 | chronos.css:894 |
.chronos-peek-daynum[data-today] |
min-inline-size |
var(--space-8) |
| 161 | chronos.css:895 |
.chronos-peek-daynum[data-today] |
block-size |
var(--space-8) |
| 162 | chronos.css:896 |
.chronos-peek-daynum[data-today] |
background |
var(--color-primary-solid) |
| 163 | chronos.css:897 |
.chronos-peek-daynum[data-today] |
color |
var(--color-content-on-solid) |
| 164 | chronos.css:898 |
.chronos-peek-daynum[data-today] |
border-radius |
var(--radius-full) |
| 165 | chronos.css:906 |
.chronos-peek-weekday |
font-size |
var(--font-size-sm) |
| 166 | chronos.css:907 |
.chronos-peek-weekday |
font-weight |
var(--font-weight-medium) |
| 167 | chronos.css:908 |
.chronos-peek-weekday |
color |
var(--color-content-primary) |
| 168 | chronos.css:911 |
.chronos-peek-fulldate |
font-size |
var(--font-size-xs) |
| 169 | chronos.css:912 |
.chronos-peek-fulldate |
color |
var(--color-content-muted) |
| 170 | chronos.css:917 |
.chronos-peek-allday |
gap |
var(--space-1) |
| 171 | chronos.css:920 |
.chronos-peek-allday [data-chronos-event-chip] |
padding-block |
var(--space-1-5) |
| 172 | chronos.css:925 |
.chronos-peek-body |
border-block-start |
var(--border-width) solid var(--color-border-subtle) |
| 173 | chronos.css:926 |
.chronos-peek-body |
padding-block-start |
var(--space-1) |
| 174 | chronos.css:935 |
.chronos-peek-hour |
font-size |
var(--font-size-xs) |
| 175 | chronos.css:936 |
.chronos-peek-hour |
color |
var(--color-content-muted) |
| 176 | chronos.css:945 |
.chronos-peek-col |
border-inline-start |
var(--border-width) solid var(--color-border-subtle) |
| 177 | chronos.css:950 |
.chronos-peek-slot |
border-block-end |
var(--border-width) solid var(--color-border-subtle) |
| 178 | chronos.css:954 |
.chronos-peek-empty |
padding-block |
var(--space-2) |
| 179 | chronos.css:955 |
.chronos-peek-empty |
font-size |
var(--font-size-sm) |
| 180 | chronos.css:956 |
.chronos-peek-empty |
color |
var(--color-content-muted) |
| 181 | chronos.css:964 |
.chronos-agenda |
gap |
var(--space-4) |
| 182 | chronos.css:968 |
.chronos-agenda-empty |
color |
var(--color-content-muted) |
| 183 | chronos.css:973 |
.chronos-agenda-group |
gap |
var(--space-1-5) |
| 184 | chronos.css:976 |
.chronos-agenda-date |
font-size |
var(--font-size-sm) |
| 185 | chronos.css:977 |
.chronos-agenda-date |
font-weight |
var(--font-weight-semibold) |
| 186 | chronos.css:978 |
.chronos-agenda-date |
color |
var(--color-content-subtle) |
| 187 | chronos.css:984 |
.chronos-agenda-list |
gap |
var(--space-1) |
| 188 | chronos.css:989 |
.chronos-agenda-item |
gap |
var(--space-2) |
| 189 | chronos.css:990 |
.chronos-agenda-item |
padding |
var(--space-1-5) var(--space-2) |
| 190 | chronos.css:991 |
.chronos-agenda-item |
border |
var(--border-width) solid var(--color-border-subtle) |
| 191 | chronos.css:993 |
.chronos-agenda-item |
border-radius |
var(--radius-sm) |
| 192 | chronos.css:994 |
.chronos-agenda-item |
background |
var(--color-surface-default) |
| 193 | chronos.css:995 |
.chronos-agenda-item |
color |
var(--color-content-primary) |
| 194 | chronos.css:1005 |
.chronos-agenda-dot |
inline-size |
var(--space-2) |
| 195 | chronos.css:1006 |
.chronos-agenda-dot |
block-size |
var(--space-2) |
| 196 | chronos.css:1007 |
.chronos-agenda-dot |
border-radius |
var(--radius-full) |
| 197 | chronos.css:1019 |
.chronos-agenda-time |
color |
var(--color-content-muted) |
| 198 | chronos.css:1020 |
.chronos-agenda-time |
font-size |
var(--font-size-sm) |
1.2 A través de un privado (14)
Sólo el residuo: el puente de paleta (§2-ter) y el canal de valor (§2-quater) salen aparte, porque no son deuda ni tienen nombre que acuñar.
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | chronos.css:230 |
[data-chronos-day-cell][data-dragover] |
background |
var(--_chronos-dragover-bg) |
| 2 | chronos.css:231 |
[data-chronos-day-cell][data-dragover] |
box-shadow |
inset 0 0 0 var(--focus-ring-width) var(--_chronos-accent-border) |
| 3 | chronos.css:263 |
[data-chronos-day-cell][data-today] [data-chronos-day-number] |
background |
var(--_chronos-accent) |
| 4 | chronos.css:350 |
[data-chronos-event-chip][data-continues-before] |
padding-inline-start |
calc(var(--space-1-5) + var(--_chronos-chip-arrow)) |
| 5 | chronos.css:360 |
[data-chronos-event-chip][data-continues-after] |
padding-inline-end |
calc(var(--space-1-5) + var(--_chronos-chip-arrow)) |
| 6 | chronos.css:709 |
.chronos-tg-dayhead[data-today] .chronos-tg-daynum |
background |
var(--_chronos-accent) |
| 7 | chronos.css:743 |
.chronos-tg-hour |
block-size |
var(--_chronos-hour-height) |
| 8 | chronos.css:766 |
.chronos-tg-slot |
block-size |
var(--_chronos-hour-height) |
| 9 | chronos.css:772 |
.chronos-tg-slot[data-dragover], .chronos-tg-alldaycol[data-dragover] |
background |
var(--_chronos-dragover-bg) |
| 10 | chronos.css:773 |
.chronos-tg-slot[data-dragover], .chronos-tg-alldaycol[data-dragover] |
box-shadow |
inset 0 0 0 var(--focus-ring-width) var(--_chronos-accent-border) |
| 11 | chronos.css:793 |
.chronos-tg-now |
border-block-start |
var(--border-width) solid var(--_chronos-accent) |
| 12 | chronos.css:804 |
.chronos-tg-now::before |
background |
var(--_chronos-accent) |
| 13 | chronos.css:934 |
.chronos-peek-hour |
block-size |
var(--_chronos-peek-hour) |
| 14 | chronos.css:949 |
.chronos-peek-slot |
block-size |
var(--_chronos-peek-hour) |
1.3 Literales (11)
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | chronos.css:29 |
[data-chronos] |
inline-size |
100% |
| 2 | chronos.css:247 |
[data-chronos-day-cell]:hover [data-chronos-day-add], [data-chronos-day-add]:focus-visible |
opacity |
1 |
| 3 | chronos.css:333 |
[data-chronos-event-chip][data-draft] |
opacity |
0.7 |
| 4 | chronos.css:472 |
.chronos-editor-fields |
inline-size |
100% |
| 5 | chronos.css:479 |
.chronos-field |
inline-size |
100% |
| 6 | chronos.css:489 |
.chronos-editor-fields [data-field], .chronos-editor-fields [data-field-control], .chronos-editor-fields [data-date-field], .chronos-editor-fields [data-select] |
inline-size |
100% |
| 7 | chronos.css:497 |
.chronos-editor-fields [data-date-field-input], .chronos-editor-fields [data-select-trigger], .chronos-editor-fields [data-field-input] |
inline-size |
100% |
| 8 | chronos.css:502 |
.chronos-editor-fields [data-date-range-picker] |
inline-size |
100% |
| 9 | chronos.css:563 |
.chronos-pair > [data-date-range-field-input], .chronos-when-field > [data-time-range-picker], .chronos-band-row > [data-time-range-picker] |
inline-size |
max-content |
| 10 | chronos.css:579 |
.chronos-when [data-time-range-field-input] |
inline-size |
max-content |
| 11 | chronos.css:830 |
.chronos-peek-scroll |
inline-size |
100% |
1.4 Excepciones firmadas (1) — fuera del ratio
Literales que llevan su anotación /* literal: <razón> */ en la propia
declaración: la válvula de recipe-contract §3, la misma que honra
component-audit. Una desviación firmada no es deuda — se listan para que la
razón se lea, no para acuñarlas.
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | chronos.css:112 |
.chronos-date-badge-month |
letter-spacing |
0.04em |
2. Sistema transversal (7) — 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 | chronos.css:212 |
[data-chronos-day-cell][data-outside-month] [data-chronos-day-number] |
opacity |
var(--opacity-muted) |
| 2 | chronos.css:215 |
[data-chronos-day-cell]:hover |
background-image |
linear-gradient(var(--state-hover), var(--state-hover)) |
| 3 | chronos.css:226 |
[data-chronos-day-cell]:focus-visible |
outline |
var(--focus-ring-width) solid var(--focus-ring-color) |
| 4 | chronos.css:299 |
[data-chronos-event-chip]:hover |
background-image |
linear-gradient(var(--state-hover), var(--state-hover)) |
| 5 | chronos.css:302 |
[data-chronos-event-chip]:focus-visible |
outline |
var(--focus-ring-width) solid var(--focus-ring-color) |
| 6 | chronos.css:387 |
.chronos-chip-time |
opacity |
var(--opacity-subtle) |
| 7 | chronos.css:1001 |
.chronos-agenda-item:hover |
background-image |
linear-gradient(var(--state-hover), var(--state-hover)) |
2-quater. Canal de valor (7) — fuera del ratio
La receta lee un privado que nadie declara — ni su CSS ni el generador: lo
escribe soma o el envoltorio por instancia (un %, un rect medido, la talla
que pide una prop). Un tema no debe alcanzarlo: fijarlo rompe el
comportamiento, y por eso tabs rechazó por escrito esa misma propuesta.
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | chronos.css:290 |
[data-chronos-event-chip] |
border-inline-start |
var(--space-0-5) solid var(--_chronos-event-accent) |
| 2 | chronos.css:291 |
[data-chronos-event-chip] |
background |
var(--_chronos-event-bg) |
| 3 | chronos.css:292 |
[data-chronos-event-chip] |
color |
var(--_chronos-event-fg) |
| 4 | chronos.css:334 |
[data-chronos-event-chip][data-draft] |
outline |
var(--focus-ring-width) dashed var(--_chronos-event-accent) |
| 5 | chronos.css:340 |
[data-chronos-event-chip][data-grabbed] |
outline |
var(--focus-ring-width) solid var(--_chronos-event-accent) |
| 6 | chronos.css:992 |
.chronos-agenda-item |
border-inline-start |
var(--space-0-5) solid var(--_chronos-event-accent) |
| 7 | chronos.css:1008 |
.chronos-agenda-dot |
background |
var(--_chronos-event-accent) |
3. Privados de la receta — ¿de dónde sale su valor?
| privado | declaraciones | valor(es) | origen | ¿deriva de un público? |
|---|---|---|---|---|
--_chronos-cell-min-block |
3 | var(--chronos-cell-min-block-md), var(--chronos-cell-min-block-sm), var(--chronos-cell-min-block-lg) |
public | sí |
--_chronos-lane-height |
3 | var(--chronos-lane-height-md), var(--chronos-lane-height-sm), var(--chronos-lane-height-lg) |
public | sí |
--_chronos-accent |
9 | var(--color-primary-solid), var(--color-secondary-solid), var(--color-tertiary-solid), var(--color-neutral-solid), var(--color-affirm-solid), var(--color-fulfill-solid) …(+3) |
global | no |
--_chronos-accent-border |
9 | var(--color-primary-border), var(--color-secondary-border), var(--color-tertiary-border), var(--color-neutral-border), var(--color-affirm-border), var(--color-fulfill-border) …(+3) |
global | no |
--_chronos-dragover-bg |
1 | color-mix(in oklab, var(--_chronos-accent) 14%, transparent) |
private | no |
--_chronos-chip-arrow |
1 | var(--space-1-5) |
global | no |
--_chronos-hour-height |
1 | var(--space-12) |
global | no |
--_chronos-peek-hour |
1 | var(--space-12) |
global | no |
Consumidos y no declarados en el CSS (vienen de base.ts o de un estilo inline del wrapper): --_chronos-event-accent, --_chronos-event-bg, --_chronos-event-fg.
4. Propuesta de corrección
NOTA 2026-08-25 —
more-link-{padding-inline,radius,bg}se quedan SIN CONSUMIDOR. Los tres tokens propuestos en §4.1 tienenusos: 1, y ese uso era el pin dechronos.css:417, retirado por la firma «el velo del sistema no muere por un atajo». La propuesta baja de 50 a 47. Y no es sólo una limpieza: los tres proponían un token PÚBLICO dechronoscuyo valor es un PRIVADO debutton(--_button-*), justo lo que el preámbulo de este §4 prohíbe — «un token prestado importa la semántica de su dueño: la corrección no es duplicarlo con prefijo propio». Retirar el pin las borra gratis.
- Consume la capa compartida
picker-shell. Un eje que la capa posee se consume comovar(--_x, var(--x)); el consumidor no acuña--chronos-{eje}para él — sería un vocabulario paralelo (README deeidos/components, «Capas compartidas» regla 2). - Consume tokens públicos de
popover. 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 (47)
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 (--chronos-…) |
scope TSC | valor propuesto | usos |
|---|---|---|---|
gap |
root |
⚠ var(--space-3) / var(--space-0-5) / var(--space-2) / var(--space-1) / var(--space-1-5) / var(--space-2-5) / var(--space-4) |
28 |
fg |
root |
⚠ var(--color-content-primary) / var(--color-content-muted) / var(--color-content-subtle) / var(--color-risk-text) / var(--color-threat-text) / var(--color-content-on-solid) |
27 |
bg |
root |
⚠ var(--color-surface-subtle) / var(--color-surface-raised) / var(--color-primary-solid) / var(--color-secondary-solid) / var(--color-tertiary-solid) / var(--color-neutral-solid) / var(--color-affirm-solid) / var(--color-fulfill-solid) / var(--color-risk-solid) / var(--color-threat-solid) / var(--color-loss-solid) / color-mix(in oklab, var(--_chronos-accent) 14%, transparent) / var(--color-border-default) / var(--color-surface-default) |
24 |
font-size |
root |
⚠ var(--font-size-sm) / var(--font-size-xs) / var(--font-size-lg) / var(--font-size-md) / var(--font-size-xl) |
22 |
width |
root |
⚠ var(--space-12) / var(--space-2) / var(--space-2-5) / max-content / var(--space-5) / var(--space-6) / var(--border-width) / var(--space-8) |
13 |
radius |
root |
⚠ var(--radius-md) / var(--radius-full) / var(--radius-sm) / var(--radius-lg) |
13 |
height |
root |
⚠ var(--space-2) / var(--space-2-5) / var(--space-5) / var(--space-6) / var(--space-12) / var(--space-8) |
13 |
day-cell-bg |
root |
⚠ var(--color-surface-default) / color-mix(in oklab, var(--_chronos-accent) 14%, transparent) / var(--color-primary-solid) / var(--color-secondary-solid) / var(--color-tertiary-solid) / var(--color-neutral-solid) / var(--color-affirm-solid) / var(--color-fulfill-solid) / var(--color-risk-solid) / var(--color-threat-solid) / var(--color-loss-solid) |
11 |
font-weight |
root |
⚠ var(--font-weight-semibold) / var(--font-weight-medium) |
9 |
padding-block |
root |
⚠ var(--space-1) / var(--space-2) / var(--space-3) / var(--space-1-5) |
6 |
line-height |
root |
⚠ var(--leading-ui) / var(--leading-tight) / var(--leading-none) |
3 |
event-chip-padding-inline |
root |
var(--space-1-5) |
3 |
font-family |
root |
var(--style-label-font-family) |
2 |
day-cell-fg |
root |
⚠ var(--color-content-muted) / var(--color-content-on-solid) |
2 |
event-chip-padding-block |
root |
⚠ var(--space-0-5) / var(--space-1-5) |
2 |
font-size-sm |
root |
var(--font-size-xs) |
1 |
font-size-lg |
root |
var(--font-size-md) |
1 |
toolbar-gap |
root |
var(--space-3) |
1 |
letter-spacing |
root |
0.04em |
1 |
heading-font-size |
root |
var(--font-size-xl) |
1 |
heading-font-weight |
root |
var(--font-weight-semibold) |
1 |
heading-fg |
root |
var(--color-content-primary) |
1 |
grid-radius |
root |
var(--radius-lg) |
1 |
grid-bg |
root |
var(--color-surface-raised) |
1 |
head-cell-padding-block |
root |
var(--space-2) |
1 |
head-cell-font-size |
root |
var(--font-size-xs) |
1 |
head-cell-font-weight |
root |
var(--font-weight-medium) |
1 |
head-cell-fg |
root |
var(--color-content-muted) |
1 |
day-number-width |
root |
var(--space-6) |
1 |
day-number-height |
root |
var(--space-6) |
1 |
day-number-font-size |
root |
var(--font-size-sm) |
1 |
day-number-fg |
root |
var(--color-content-primary) |
1 |
day-cell-radius |
root |
var(--radius-full) |
1 |
day-cell-font-weight |
root |
var(--font-weight-semibold) |
1 |
event-chip-gap |
root |
var(--space-1-5) |
1 |
event-chip-radius |
root |
var(--radius-sm) |
1 |
event-chip-font-size |
root |
var(--font-size-xs) |
1 |
event-chip-opacity |
root |
0.7 |
1 |
shadow |
root |
var(--shadow-overlay) |
1 |
selected-shadow |
root |
0 0 0 var(--border-width) var(--color-surface-raised), 0 0 0 calc(var(--border-width) * 3) var(--color-content-primary) |
1 |
time-view-radius |
root |
var(--radius-lg) |
1 |
time-view-bg |
root |
var(--color-surface-raised) |
1 |
peek-panel-width |
root |
var(--popover-min-width-sm) |
1 |
peek-panel-height |
root |
var(--space-16) |
1 |
hover-press-bg |
root |
var(--color-primary-solid) |
1 |
hover-press-height |
root |
var(--space-8) |
1 |
day-peek-gap |
root |
var(--space-2) |
1 |
4.2 Sin nombre mecánico (38)
- ⚠ 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 — 7:inline-size. - ⚠ decisión:
paddinges shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4) — 6: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) — 8:border. - ⚠ decisión:
border-inline-startes shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4) — 5:border-inline-start. - ⚠ decisión:
border-block-endes shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4) — 6:border-block-end. - ⚠ decisión:
border-inline-endes shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4) — 1:border-inline-end. - capa de estado / anillo de foco: sistema transversal — no acuñar (recipe-contract §2) — 2:
box-shadow. - ⚠ decisión:
1es 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:opacity. - ⚠ decisión:
border-block-startes shorthand o eje físico — hay que partirlo en ejes lógicos antes de nombrarlo (recipe-contract §1, R-4.4) — 2:border-block-start.
4.3 Avisos sobre los tokens propuestos (6)
- el privado
--_chronos-dragover-bgdebe pasar a leer este público (o desaparecer) —--chronos-day-cell-bg,--chronos-bg - el privado
--_chronos-accentdebe pasar a leer este público (o desaparecer) —--chronos-day-cell-bg,--chronos-bg - el privado
--_chronos-chip-arrowdebe pasar a leer este público (o desaparecer) —--chronos-event-chip-padding-inline - ⚠ decisión: el valor es una expresión — el token puede llevar la expresión entera o sólo su término variable —
--chronos-selected-shadow - el privado
--_chronos-hour-heightdebe pasar a leer este público (o desaparecer) —--chronos-height - el privado
--_chronos-peek-hourdebe pasar a leer este público (o desaparecer) —--chronos-height
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
(pendiente — lo escribe el autor; se conserva al regenerar)