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.
37 KiB
37 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-22 · Alcance: 1% — 3 de 238 knobs por token público
- Knobs de apariencia: 245 — público 3 · privado 21 · global 202 · literal 12 · sistema 7 (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
1.1 Directo a primitivo global (202)
| # | 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-secondary) |
| 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:419 |
[data-popover-trigger][data-chronos-more-link]:not([data-archetype='field-trigger']) |
padding-inline |
var(--_button-padding-inline) |
| 69 | chronos.css:420 |
[data-popover-trigger][data-chronos-more-link]:not([data-archetype='field-trigger']) |
border |
var(--button-border-width) solid var(--_button-border) ⤴ prestado de button |
| 70 | chronos.css:421 |
[data-popover-trigger][data-chronos-more-link]:not([data-archetype='field-trigger']) |
border-radius |
var(--_button-radius) |
| 71 | chronos.css:422 |
[data-popover-trigger][data-chronos-more-link]:not([data-archetype='field-trigger']) |
background |
var(--_button-bg) |
| 72 | chronos.css:430 |
.chronos-legend |
gap |
var(--space-3) |
| 73 | chronos.css:431 |
.chronos-legend |
padding-block-start |
var(--space-1) |
| 74 | chronos.css:436 |
.chronos-legend-item |
gap |
var(--space-1-5) |
| 75 | chronos.css:437 |
.chronos-legend-item |
font-size |
var(--font-size-xs) |
| 76 | chronos.css:438 |
.chronos-legend-item |
color |
var(--color-content-secondary) |
| 77 | chronos.css:441 |
.chronos-legend-swatch |
inline-size |
var(--space-2-5) |
| 78 | chronos.css:442 |
.chronos-legend-swatch |
block-size |
var(--space-2-5) |
| 79 | chronos.css:443 |
.chronos-legend-swatch |
border-radius |
var(--radius-sm) |
| 80 | chronos.css:473 |
.chronos-editor-fields |
gap |
var(--space-3) |
| 81 | chronos.css:480 |
.chronos-field |
gap |
var(--space-1) |
| 82 | chronos.css:514 |
.chronos-when |
gap |
var(--space-3) |
| 83 | chronos.css:515 |
.chronos-when |
padding |
var(--space-3) |
| 84 | chronos.css:516 |
.chronos-when |
background |
var(--color-surface-subtle) |
| 85 | chronos.css:517 |
.chronos-when |
border |
var(--border-width) solid var(--color-border-subtle) |
| 86 | chronos.css:518 |
.chronos-when |
border-radius |
var(--radius-lg) |
| 87 | chronos.css:523 |
.chronos-when-field |
gap |
var(--space-1-5) |
| 88 | chronos.css:527 |
.chronos-when-label |
font-size |
var(--font-size-xs) |
| 89 | chronos.css:528 |
.chronos-when-label |
font-weight |
var(--font-weight-medium) |
| 90 | chronos.css:529 |
.chronos-when-label |
color |
var(--color-content-secondary) |
| 91 | chronos.css:533 |
.chronos-when-hint |
font-size |
var(--font-size-xs) |
| 92 | chronos.css:534 |
.chronos-when-hint |
color |
var(--color-content-muted) |
| 93 | chronos.css:540 |
.chronos-when-warn |
gap |
var(--space-1-5) |
| 94 | chronos.css:542 |
.chronos-when-warn |
font-size |
var(--font-size-xs) |
| 95 | chronos.css:543 |
.chronos-when-warn |
color |
var(--color-risk-text) |
| 96 | chronos.css:550 |
.chronos-pair, .chronos-band-row |
gap |
var(--space-2) |
| 97 | chronos.css:555 |
.chronos-pair-sep |
color |
var(--color-content-muted) |
| 98 | chronos.css:574 |
.chronos-when [data-time-range-picker] |
gap |
var(--space-2) |
| 99 | chronos.css:586 |
.chronos-bands |
gap |
var(--space-2) |
| 100 | chronos.css:594 |
.chronos-clock-endpoint |
gap |
var(--space-1-5) |
| 101 | chronos.css:616 |
.chronos-field-label |
font-family |
var(--style-label-font-family) |
| 102 | chronos.css:617 |
.chronos-field-label |
font-size |
var(--font-size-md) |
| 103 | chronos.css:618 |
.chronos-field-label |
font-weight |
var(--font-weight-medium) |
| 104 | chronos.css:619 |
.chronos-field-label |
color |
var(--color-content-secondary) |
| 105 | chronos.css:628 |
.chronos-editor-error |
gap |
var(--space-1-5) |
| 106 | chronos.css:630 |
.chronos-editor-error |
font-size |
var(--font-size-sm) |
| 107 | chronos.css:631 |
.chronos-editor-error |
color |
var(--color-threat-text) |
| 108 | chronos.css:636 |
.chronos-swatches |
gap |
var(--space-1-5) |
| 109 | chronos.css:639 |
.chronos-swatch |
inline-size |
var(--space-5) |
| 110 | chronos.css:640 |
.chronos-swatch |
block-size |
var(--space-5) |
| 111 | chronos.css:641 |
.chronos-swatch |
border-radius |
var(--radius-full) |
| 112 | chronos.css:642 |
.chronos-swatch |
border |
var(--border-width) solid var(--color-border-subtle) |
| 113 | chronos.css:646 |
.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) |
| 114 | chronos.css:653 |
.chronos-type-option |
gap |
var(--space-1-5) |
| 115 | chronos.css:657 |
.chronos-type-swatch |
inline-size |
var(--space-2) |
| 116 | chronos.css:658 |
.chronos-type-swatch |
block-size |
var(--space-2) |
| 117 | chronos.css:659 |
.chronos-type-swatch |
border-radius |
var(--radius-full) |
| 118 | chronos.css:668 |
[data-chronos-time-view] |
border |
var(--border-width) solid var(--color-border-subtle) |
| 119 | chronos.css:669 |
[data-chronos-time-view] |
border-radius |
var(--radius-lg) |
| 120 | chronos.css:673 |
[data-chronos-time-view] |
background |
var(--color-surface-raised) |
| 121 | chronos.css:680 |
.chronos-tg-sticky |
background |
var(--color-surface-raised) |
| 122 | chronos.css:686 |
.chronos-tg-head, .chronos-tg-allday |
border-block-end |
var(--border-width) solid var(--color-border-subtle) |
| 123 | chronos.css:696 |
.chronos-tg-dayhead |
gap |
var(--space-1-5) |
| 124 | chronos.css:697 |
.chronos-tg-dayhead |
padding-block |
var(--space-2) |
| 125 | chronos.css:698 |
.chronos-tg-dayhead |
border-inline-start |
var(--border-width) solid var(--color-border-subtle) |
| 126 | chronos.css:699 |
.chronos-tg-dayhead |
font-size |
var(--font-size-sm) |
| 127 | chronos.css:700 |
.chronos-tg-dayhead |
color |
var(--color-content-secondary) |
| 128 | chronos.css:709 |
.chronos-tg-dayhead[data-today] .chronos-tg-daynum |
min-inline-size |
var(--space-6) |
| 129 | chronos.css:710 |
.chronos-tg-dayhead[data-today] .chronos-tg-daynum |
block-size |
var(--space-6) |
| 130 | chronos.css:712 |
.chronos-tg-dayhead[data-today] .chronos-tg-daynum |
color |
var(--color-content-on-solid) |
| 131 | chronos.css:713 |
.chronos-tg-dayhead[data-today] .chronos-tg-daynum |
border-radius |
var(--radius-full) |
| 132 | chronos.css:714 |
.chronos-tg-dayhead[data-today] .chronos-tg-daynum |
font-weight |
var(--font-weight-semibold) |
| 133 | chronos.css:720 |
.chronos-tg-railcell |
font-size |
var(--font-size-xs) |
| 134 | chronos.css:721 |
.chronos-tg-railcell |
color |
var(--color-content-muted) |
| 135 | chronos.css:726 |
.chronos-tg-alldaycol |
gap |
var(--space-0-5) |
| 136 | chronos.css:727 |
.chronos-tg-alldaycol |
padding |
var(--space-0-5) |
| 137 | chronos.css:728 |
.chronos-tg-alldaycol |
border-inline-start |
var(--border-width) solid var(--color-border-subtle) |
| 138 | chronos.css:737 |
.chronos-tg-body |
padding-block-start |
var(--space-3) |
| 139 | chronos.css:746 |
.chronos-tg-hour |
font-size |
var(--font-size-xs) |
| 140 | chronos.css:747 |
.chronos-tg-hour |
color |
var(--color-content-muted) |
| 141 | chronos.css:763 |
.chronos-tg-col |
border-inline-start |
var(--border-width) solid var(--color-border-subtle) |
| 142 | chronos.css:769 |
.chronos-tg-slot |
border-block-end |
var(--border-width) solid var(--color-border-subtle) |
| 143 | chronos.css:787 |
[data-chronos-event-chip][data-timed] |
padding-block |
var(--space-0-5) |
| 144 | chronos.css:804 |
.chronos-tg-now::before |
inline-size |
var(--space-2) |
| 145 | chronos.css:805 |
.chronos-tg-now::before |
block-size |
var(--space-2) |
| 146 | chronos.css:807 |
.chronos-tg-now::before |
border-radius |
var(--radius-full) |
| 147 | chronos.css:820 |
[data-chronos-peek-panel] |
min-inline-size |
var(--popover-min-width-sm) ⤴ prestado de popover |
| 148 | chronos.css:824 |
[data-chronos-peek-panel] |
min-block-size |
var(--space-16) |
| 149 | chronos.css:845 |
.chronos-peek-resize |
inline-size |
var(--space-2) |
| 150 | chronos.css:851 |
.chronos-peek-resize::after |
inline-size |
var(--border-width) |
| 151 | chronos.css:852 |
.chronos-peek-resize::after |
block-size |
var(--space-6) |
| 152 | chronos.css:853 |
.chronos-peek-resize::after |
border-radius |
var(--radius-full) |
| 153 | chronos.css:854 |
.chronos-peek-resize::after |
background |
var(--color-border-default) |
| 154 | chronos.css:861 |
.chronos-peek-resize:hover::after, .chronos-peek-resize:active::after |
background |
var(--color-primary-solid) |
| 155 | chronos.css:862 |
.chronos-peek-resize:hover::after, .chronos-peek-resize:active::after |
block-size |
var(--space-8) |
| 156 | chronos.css:876 |
[data-chronos-day-peek] |
gap |
var(--space-2) |
| 157 | chronos.css:882 |
.chronos-peek-head |
gap |
var(--space-2-5) |
| 158 | chronos.css:883 |
.chronos-peek-head |
padding-block-end |
var(--space-1-5) |
| 159 | chronos.css:884 |
.chronos-peek-head |
border-block-end |
var(--border-width) solid var(--color-border-subtle) |
| 160 | chronos.css:887 |
.chronos-peek-daynum |
font-size |
var(--font-size-xl) |
| 161 | chronos.css:888 |
.chronos-peek-daynum |
font-weight |
var(--font-weight-semibold) |
| 162 | chronos.css:889 |
.chronos-peek-daynum |
line-height |
var(--leading-none) |
| 163 | chronos.css:890 |
.chronos-peek-daynum |
color |
var(--color-content-primary) |
| 164 | chronos.css:896 |
.chronos-peek-daynum[data-today] |
min-inline-size |
var(--space-8) |
| 165 | chronos.css:897 |
.chronos-peek-daynum[data-today] |
block-size |
var(--space-8) |
| 166 | chronos.css:898 |
.chronos-peek-daynum[data-today] |
background |
var(--color-primary-solid) |
| 167 | chronos.css:899 |
.chronos-peek-daynum[data-today] |
color |
var(--color-content-on-solid) |
| 168 | chronos.css:900 |
.chronos-peek-daynum[data-today] |
border-radius |
var(--radius-full) |
| 169 | chronos.css:908 |
.chronos-peek-weekday |
font-size |
var(--font-size-sm) |
| 170 | chronos.css:909 |
.chronos-peek-weekday |
font-weight |
var(--font-weight-medium) |
| 171 | chronos.css:910 |
.chronos-peek-weekday |
color |
var(--color-content-primary) |
| 172 | chronos.css:913 |
.chronos-peek-fulldate |
font-size |
var(--font-size-xs) |
| 173 | chronos.css:914 |
.chronos-peek-fulldate |
color |
var(--color-content-muted) |
| 174 | chronos.css:919 |
.chronos-peek-allday |
gap |
var(--space-1) |
| 175 | chronos.css:922 |
.chronos-peek-allday [data-chronos-event-chip] |
padding-block |
var(--space-1-5) |
| 176 | chronos.css:927 |
.chronos-peek-body |
border-block-start |
var(--border-width) solid var(--color-border-subtle) |
| 177 | chronos.css:928 |
.chronos-peek-body |
padding-block-start |
var(--space-1) |
| 178 | chronos.css:937 |
.chronos-peek-hour |
font-size |
var(--font-size-xs) |
| 179 | chronos.css:938 |
.chronos-peek-hour |
color |
var(--color-content-muted) |
| 180 | chronos.css:947 |
.chronos-peek-col |
border-inline-start |
var(--border-width) solid var(--color-border-subtle) |
| 181 | chronos.css:952 |
.chronos-peek-slot |
border-block-end |
var(--border-width) solid var(--color-border-subtle) |
| 182 | chronos.css:956 |
.chronos-peek-empty |
padding-block |
var(--space-2) |
| 183 | chronos.css:957 |
.chronos-peek-empty |
font-size |
var(--font-size-sm) |
| 184 | chronos.css:958 |
.chronos-peek-empty |
color |
var(--color-content-muted) |
| 185 | chronos.css:966 |
.chronos-agenda |
gap |
var(--space-4) |
| 186 | chronos.css:970 |
.chronos-agenda-empty |
color |
var(--color-content-muted) |
| 187 | chronos.css:975 |
.chronos-agenda-group |
gap |
var(--space-1-5) |
| 188 | chronos.css:978 |
.chronos-agenda-date |
font-size |
var(--font-size-sm) |
| 189 | chronos.css:979 |
.chronos-agenda-date |
font-weight |
var(--font-weight-semibold) |
| 190 | chronos.css:980 |
.chronos-agenda-date |
color |
var(--color-content-secondary) |
| 191 | chronos.css:986 |
.chronos-agenda-list |
gap |
var(--space-1) |
| 192 | chronos.css:991 |
.chronos-agenda-item |
gap |
var(--space-2) |
| 193 | chronos.css:992 |
.chronos-agenda-item |
padding |
var(--space-1-5) var(--space-2) |
| 194 | chronos.css:993 |
.chronos-agenda-item |
border |
var(--border-width) solid var(--color-border-subtle) |
| 195 | chronos.css:995 |
.chronos-agenda-item |
border-radius |
var(--radius-sm) |
| 196 | chronos.css:996 |
.chronos-agenda-item |
background |
var(--color-surface-default) |
| 197 | chronos.css:997 |
.chronos-agenda-item |
color |
var(--color-content-primary) |
| 198 | chronos.css:1007 |
.chronos-agenda-dot |
inline-size |
var(--space-2) |
| 199 | chronos.css:1008 |
.chronos-agenda-dot |
block-size |
var(--space-2) |
| 200 | chronos.css:1009 |
.chronos-agenda-dot |
border-radius |
var(--radius-full) |
| 201 | chronos.css:1021 |
.chronos-agenda-time |
color |
var(--color-content-muted) |
| 202 | chronos.css:1022 |
.chronos-agenda-time |
font-size |
var(--font-size-sm) |
1.2 A través de un privado (21)
| # | 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:290 |
[data-chronos-event-chip] |
border-inline-start |
var(--space-0-5) solid var(--_chronos-event-accent) |
| 5 | chronos.css:291 |
[data-chronos-event-chip] |
background |
var(--_chronos-event-bg) |
| 6 | chronos.css:292 |
[data-chronos-event-chip] |
color |
var(--_chronos-event-fg) |
| 7 | chronos.css:334 |
[data-chronos-event-chip][data-draft] |
outline |
var(--focus-ring-width) dashed var(--_chronos-event-accent) |
| 8 | chronos.css:340 |
[data-chronos-event-chip][data-grabbed] |
outline |
var(--focus-ring-width) solid var(--_chronos-event-accent) |
| 9 | chronos.css:350 |
[data-chronos-event-chip][data-continues-before] |
padding-inline-start |
calc(var(--space-1-5) + var(--_chronos-chip-arrow)) |
| 10 | chronos.css:360 |
[data-chronos-event-chip][data-continues-after] |
padding-inline-end |
calc(var(--space-1-5) + var(--_chronos-chip-arrow)) |
| 11 | chronos.css:711 |
.chronos-tg-dayhead[data-today] .chronos-tg-daynum |
background |
var(--_chronos-accent) |
| 12 | chronos.css:745 |
.chronos-tg-hour |
block-size |
var(--_chronos-hour-height) |
| 13 | chronos.css:768 |
.chronos-tg-slot |
block-size |
var(--_chronos-hour-height) |
| 14 | chronos.css:774 |
.chronos-tg-slot[data-dragover], .chronos-tg-alldaycol[data-dragover] |
background |
var(--_chronos-dragover-bg) |
| 15 | chronos.css:775 |
.chronos-tg-slot[data-dragover], .chronos-tg-alldaycol[data-dragover] |
box-shadow |
inset 0 0 0 var(--focus-ring-width) var(--_chronos-accent-border) |
| 16 | chronos.css:795 |
.chronos-tg-now |
border-block-start |
var(--border-width) solid var(--_chronos-accent) |
| 17 | chronos.css:806 |
.chronos-tg-now::before |
background |
var(--_chronos-accent) |
| 18 | chronos.css:936 |
.chronos-peek-hour |
block-size |
var(--_chronos-peek-hour) |
| 19 | chronos.css:951 |
.chronos-peek-slot |
block-size |
var(--_chronos-peek-hour) |
| 20 | chronos.css:994 |
.chronos-agenda-item |
border-inline-start |
var(--space-0-5) solid var(--_chronos-event-accent) |
| 21 | chronos.css:1010 |
.chronos-agenda-dot |
background |
var(--_chronos-event-accent) |
1.3 Literales (12)
| # | fichero:línea | selector | propiedad | valor |
|---|---|---|---|---|
| 1 | chronos.css:29 |
[data-chronos] |
inline-size |
100% |
| 2 | chronos.css:112 |
.chronos-date-badge-month |
letter-spacing |
0.04em |
| 3 | chronos.css:247 |
[data-chronos-day-cell]:hover [data-chronos-day-add], [data-chronos-day-add]:focus-visible |
opacity |
1 |
| 4 | chronos.css:333 |
[data-chronos-event-chip][data-draft] |
opacity |
0.7 |
| 5 | chronos.css:474 |
.chronos-editor-fields |
inline-size |
100% |
| 6 | chronos.css:481 |
.chronos-field |
inline-size |
100% |
| 7 | chronos.css:491 |
.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% |
| 8 | chronos.css:499 |
.chronos-editor-fields [data-date-field-input], .chronos-editor-fields [data-select-trigger], .chronos-editor-fields [data-field-input] |
inline-size |
100% |
| 9 | chronos.css:504 |
.chronos-editor-fields [data-date-range-picker] |
inline-size |
100% |
| 10 | chronos.css:565 |
.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 |
| 11 | chronos.css:581 |
.chronos-when [data-time-range-field-input] |
inline-size |
max-content |
| 12 | chronos.css:832 |
.chronos-peek-scroll |
inline-size |
100% |
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:1003 |
.chronos-agenda-item:hover |
background-image |
linear-gradient(var(--state-hover), var(--state-hover)) |
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
- 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
button,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 (50)
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-secondary) / 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 |
more-link-padding-inline |
root |
var(--_button-padding-inline) |
1 |
more-link-radius |
root |
var(--_button-radius) |
1 |
more-link-bg |
root |
var(--_button-bg) |
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 (46)
- ⚠ 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) — 9: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) — 7: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: 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 — 3:background,color. - foco: lo posee el sistema (
--focus-ring-*, theming §32) — no acuñar token propio — 2:outline. - ⚠ 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)