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

refactor(eidos): de-alias date/time pickers off sibling field recipe tokens

Browse Source 
The date-range / time / time-range pickers referenced --date-field-* /
--time-field-* recipe tokens to paint their field-shaped parts (standalone
trigger box, wrap gap/font, embedded trigger). That is a cross-component alias
— the exact drift the S6 Field composition eliminates. Point every one at the
FIELD FAMILY public tokens instead (--field-control-* / --field-* / the B.1
--field-segment-height), or at the underlying primitive where Field has no
matching token (the wrap column-gap keeps the tighter segment rhythm). Each
substitution is computed-value-identical (both sides resolve to the same
primitive) — adversarially verified + browser-confirmed on all four pickers.

Also drop dead private declarations the compositions left behind
(--_time-field-padding-inline / --_time-field-segment-padding-inline, and
--_time-field-gap in time-picker) and, now that nothing aliases them, prune the
32 newly-orphaned date-field/time-field chrome tokens from the recipe +
generated CSS (recipe-css-contract orphan guard green, 25/25).

TimeRangePicker's embedded clock-trigger keeps sizing from the picker-local
--_time-field-height (not --field-segment-height): its composed endpoints don't
carry their own [data-size], so the field-family segment-height would pin to md.
That endpoint size-threading gap is pre-existing (DateRangePicker threads it,
TimeRangePicker doesn't) and tracked separately.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
menubar-v4-safe
dev 3 months ago
parent a820e5f337
commit d1670caa45
5 changed files with 85 additions and 169 deletions
Show Stats Download Patch File Download Diff File

52
src/uix/eidos/components/date-range-picker/date-range-picker.css
Unescape View File

@ -1,14 +1,12 @@
[data-date-range-picker] {
/* Trigger + wrap-layout tokens (calendar tokens below). The endpoints are
composed <DateField>s that self-theme via field.css, so only the STANDALONE
trigger + the root's wrap gap/font read these. height/gap/font-size still
reference the date-field recipe tokens — they retire with the recipe-token
pruning pass (they resolve correctly meanwhile). Orphaned padding-inline /
segment-padding-inline (their consumers — the endpoint box + segment rules —
are gone) removed. */
--_date-field-height: var(--date-field-height-md);
--_date-field-gap: var(--date-field-gap-md);
--_date-field-font-size: var(--date-field-font-size-md);
/* Trigger + wrap-layout dims. The endpoints are composed <DateField>s that
self-theme via field.css; only the STANDALONE trigger box + the root's wrap
gap/font need field-shaped dims. These privates SOURCE from the FIELD FAMILY
public tokens (`--field-control-*`), never a sibling date-field recipe token.
The wrap column-gap keeps the tighter segment-gap rhythm (`--space-1`). */
--_date-field-height: var(--field-control-height-md);
--_date-field-gap: var(--space-1);
--_date-field-font-size: var(--field-control-font-size-md);
--_date-field-accent-border: var(--color-primary-border);
--_date-field-accent-track: var(--color-primary-track);
--_date-field-accent-text: var(--color-primary-text);
@ -42,9 +40,9 @@
}
[data-date-range-picker][data-size='xs'] {
--_date-field-height: var(--date-field-height-xs);
--_date-field-gap: var(--date-field-gap-xs);
--_date-field-font-size: var(--date-field-font-size-xs);
--_date-field-height: var(--field-control-height-xs);
--_date-field-gap: var(--space-0-5);
--_date-field-font-size: var(--field-control-font-size-xs);
--_calendar-padding: var(--calendar-padding-xs);
--_calendar-control-size: var(--calendar-control-size-xs);
--_calendar-day-size: var(--calendar-day-size-xs);
@ -52,9 +50,9 @@
}
[data-date-range-picker][data-size='sm'] {
--_date-field-height: var(--date-field-height-sm);
--_date-field-gap: var(--date-field-gap-sm);
--_date-field-font-size: var(--date-field-font-size-sm);
--_date-field-height: var(--field-control-height-sm);
--_date-field-gap: var(--space-0-5);
--_date-field-font-size: var(--field-control-font-size-sm);
--_calendar-padding: var(--calendar-padding-sm);
--_calendar-control-size: var(--calendar-control-size-sm);
--_calendar-day-size: var(--calendar-day-size-sm);
@ -62,9 +60,9 @@
}
[data-date-range-picker][data-size='lg'] {
--_date-field-height: var(--date-field-height-lg);
--_date-field-gap: var(--date-field-gap-lg);
--_date-field-font-size: var(--date-field-font-size-lg);
--_date-field-height: var(--field-control-height-lg);
--_date-field-gap: var(--space-1-5);
--_date-field-font-size: var(--field-control-font-size-lg);
--_calendar-padding: var(--calendar-padding-lg);
--_calendar-control-size: var(--calendar-control-size-lg);
--_calendar-day-size: var(--calendar-day-size-lg);
@ -209,16 +207,16 @@
inline-size: var(--_date-field-height);
block-size: var(--_date-field-height);
padding: 0;
border: var(--date-field-border-width) solid var(--date-field-border);
border-radius: var(--date-field-radius);
background: var(--date-field-bg);
border: var(--field-control-border-width) solid var(--field-control-border);
border-radius: var(--field-control-radius);
background: var(--field-control-bg);
color: inherit;
cursor: pointer;
transition:
background var(--date-field-transition-duration) var(--date-field-transition-ease),
border-color var(--date-field-transition-duration) var(--date-field-transition-ease),
box-shadow var(--date-field-transition-duration) var(--date-field-transition-ease),
color var(--date-field-transition-duration) var(--date-field-transition-ease);
background var(--field-transition-duration) var(--field-transition-ease),
border-color var(--field-transition-duration) var(--field-transition-ease),
box-shadow var(--field-transition-duration) var(--field-transition-ease),
color var(--field-transition-duration) var(--field-transition-ease);
}
[data-date-range-picker-trigger]:hover {
@ -237,7 +235,7 @@
[data-date-range-picker-trigger][data-disabled],
[data-date-range-picker-trigger]:disabled {
cursor: not-allowed;
opacity: var(--date-field-disabled-opacity);
opacity: var(--field-disabled-opacity);
}
/* ── Trigger embedded inside the input ──────────────────────────────────────

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

@ -5,48 +5,36 @@
*/
[data-time-picker] {
--_time-field-height: var(--time-field-height-md);
--_time-field-padding-inline: var(--time-field-padding-inline-md);
--_time-field-gap: var(--time-field-gap-md);
--_time-field-segment-padding-inline: var(--time-field-segment-padding-inline-md);
--_time-field-font-size: var(--time-field-font-size-md);
--_time-field-height: var(--field-control-height-md);
--_time-field-font-size: var(--field-control-font-size-md);
--_time-field-accent-border: var(--color-primary-border);
--_time-field-accent-track: var(--color-primary-track);
--_time-field-accent-text: var(--color-primary-text);
display: inline-flex;
flex-direction: column;
gap: var(--time-field-stack-gap);
gap: var(--space-1-5);
inline-size: 100%;
min-inline-size: 0;
color: var(--time-field-color);
font-family: var(--time-field-font-family);
color: var(--field-control-color);
font-family: var(--field-font-family);
font-size: var(--_time-field-font-size);
line-height: var(--time-field-line-height);
line-height: var(--field-control-line-height);
}
[data-time-picker][data-size='xs'] {
--_time-field-height: var(--time-field-height-xs);
--_time-field-padding-inline: var(--time-field-padding-inline-xs);
--_time-field-gap: var(--time-field-gap-xs);
--_time-field-segment-padding-inline: var(--time-field-segment-padding-inline-xs);
--_time-field-font-size: var(--time-field-font-size-xs);
--_time-field-height: var(--field-control-height-xs);
--_time-field-font-size: var(--field-control-font-size-xs);
}
[data-time-picker][data-size='sm'] {
--_time-field-height: var(--time-field-height-sm);
--_time-field-padding-inline: var(--time-field-padding-inline-sm);
--_time-field-gap: var(--time-field-gap-sm);
--_time-field-segment-padding-inline: var(--time-field-segment-padding-inline-sm);
--_time-field-font-size: var(--time-field-font-size-sm);
--_time-field-height: var(--field-control-height-sm);
--_time-field-font-size: var(--field-control-font-size-sm);
}
[data-time-picker][data-size='lg'] {
--_time-field-height: var(--time-field-height-lg);
--_time-field-padding-inline: var(--time-field-padding-inline-lg);
--_time-field-gap: var(--time-field-gap-lg);
--_time-field-segment-padding-inline: var(--time-field-segment-padding-inline-lg);
--_time-field-font-size: var(--time-field-font-size-lg);
--_time-field-height: var(--field-control-height-lg);
--_time-field-font-size: var(--field-control-font-size-lg);
}
[data-time-picker][data-color='secondary'] {
@ -95,16 +83,16 @@
inline-size: var(--_time-field-height);
block-size: var(--_time-field-height);
padding: 0;
border: var(--time-field-border-width) solid var(--time-field-border);
border-radius: var(--time-field-radius);
background: var(--time-field-bg);
border: var(--field-control-border-width) solid var(--field-control-border);
border-radius: var(--field-control-radius);
background: var(--field-control-bg);
color: inherit;
cursor: pointer;
transition:
background var(--time-field-transition-duration) var(--time-field-transition-ease),
border-color var(--time-field-transition-duration) var(--time-field-transition-ease),
box-shadow var(--time-field-transition-duration) var(--time-field-transition-ease),
color var(--time-field-transition-duration) var(--time-field-transition-ease);
background var(--field-transition-duration) var(--field-transition-ease),
border-color var(--field-transition-duration) var(--field-transition-ease),
box-shadow var(--field-transition-duration) var(--field-transition-ease),
color var(--field-transition-duration) var(--field-transition-ease);
}
[data-time-picker-trigger]:hover {
@ -123,24 +111,23 @@
[data-time-picker-trigger][data-disabled],
[data-time-picker-trigger]:disabled {
cursor: not-allowed;
opacity: var(--time-field-disabled-opacity);
opacity: var(--field-disabled-opacity);
}
/* Embedded trigger inside the input — flush affordance like date-picker. */
[data-time-field-input] [data-time-picker-trigger] {
flex: 0 0 auto;
/* Sized from the picker-local `--_time-field-height` (scales per size); the
field-family segment-height token is registered design pending the Field
composition (docs/next-features.md, audit B.1). `font: inherit` so the
`1em` icon tracks the field font. */
inline-size: calc(var(--_time-field-height) - var(--space-2));
block-size: calc(var(--_time-field-height) - var(--space-2));
/* Square icon button sized from the Field family `--field-segment-height` (the
B.1 token the Field composition made available; = control-height − space-2,
size-scaled). `font: inherit` so the 1em icon tracks the field font. */
inline-size: var(--field-segment-height);
block-size: var(--field-segment-height);
margin-inline-start: auto;
padding: 0;
border: none;
border-radius: var(--time-field-segment-radius);
border-radius: var(--radius-sm);
background: transparent;
color: var(--time-field-segment-color);
color: var(--field-control-color);
box-shadow: none;
font: inherit;
}

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

@ -7,11 +7,9 @@
*/
[data-time-range-picker] {
--_time-field-height: var(--time-field-height-md);
--_time-field-padding-inline: var(--time-field-padding-inline-md);
--_time-field-gap: var(--time-field-gap-md);
--_time-field-segment-padding-inline: var(--time-field-segment-padding-inline-md);
--_time-field-font-size: var(--time-field-font-size-md);
--_time-field-height: var(--field-control-height-md);
--_time-field-gap: var(--space-1);
--_time-field-font-size: var(--field-control-font-size-md);
--_time-field-accent-border: var(--color-primary-border);
--_time-field-accent-track: var(--color-primary-track);
--_time-field-accent-text: var(--color-primary-text);
@ -19,37 +17,31 @@
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--time-field-stack-gap) var(--_time-field-gap);
gap: var(--space-1-5) var(--_time-field-gap);
inline-size: 100%;
min-inline-size: 0;
color: var(--time-field-color);
font-family: var(--time-field-font-family);
color: var(--field-control-color);
font-family: var(--field-font-family);
font-size: var(--_time-field-font-size);
line-height: var(--time-field-line-height);
line-height: var(--field-control-line-height);
}
[data-time-range-picker][data-size='xs'] {
--_time-field-height: var(--time-field-height-xs);
--_time-field-padding-inline: var(--time-field-padding-inline-xs);
--_time-field-gap: var(--time-field-gap-xs);
--_time-field-segment-padding-inline: var(--time-field-segment-padding-inline-xs);
--_time-field-font-size: var(--time-field-font-size-xs);
--_time-field-height: var(--field-control-height-xs);
--_time-field-gap: var(--space-0-5);
--_time-field-font-size: var(--field-control-font-size-xs);
}
[data-time-range-picker][data-size='sm'] {
--_time-field-height: var(--time-field-height-sm);
--_time-field-padding-inline: var(--time-field-padding-inline-sm);
--_time-field-gap: var(--time-field-gap-sm);
--_time-field-segment-padding-inline: var(--time-field-segment-padding-inline-sm);
--_time-field-font-size: var(--time-field-font-size-sm);
--_time-field-height: var(--field-control-height-sm);
--_time-field-gap: var(--space-0-5);
--_time-field-font-size: var(--field-control-font-size-sm);
}
[data-time-range-picker][data-size='lg'] {
--_time-field-height: var(--time-field-height-lg);
--_time-field-padding-inline: var(--time-field-padding-inline-lg);
--_time-field-gap: var(--time-field-gap-lg);
--_time-field-segment-padding-inline: var(--time-field-segment-padding-inline-lg);
--_time-field-font-size: var(--time-field-font-size-lg);
--_time-field-height: var(--field-control-height-lg);
--_time-field-gap: var(--space-1-5);
--_time-field-font-size: var(--field-control-font-size-lg);
}
[data-time-range-picker][data-color='secondary'] {
@ -112,16 +104,16 @@
inline-size: var(--_time-field-height);
block-size: var(--_time-field-height);
padding: 0;
border: var(--time-field-border-width) solid var(--time-field-border);
border-radius: var(--time-field-radius);
background: var(--time-field-bg);
border: var(--field-control-border-width) solid var(--field-control-border);
border-radius: var(--field-control-radius);
background: var(--field-control-bg);
color: inherit;
cursor: pointer;
transition:
background var(--time-field-transition-duration) var(--time-field-transition-ease),
border-color var(--time-field-transition-duration) var(--time-field-transition-ease),
box-shadow var(--time-field-transition-duration) var(--time-field-transition-ease),
color var(--time-field-transition-duration) var(--time-field-transition-ease);
background var(--field-transition-duration) var(--field-transition-ease),
border-color var(--field-transition-duration) var(--field-transition-ease),
box-shadow var(--field-transition-duration) var(--field-transition-ease),
color var(--field-transition-duration) var(--field-transition-ease);
}
[data-time-range-picker-trigger]:hover {
@ -140,24 +132,27 @@
[data-time-range-picker-trigger][data-disabled],
[data-time-range-picker-trigger]:disabled {
cursor: not-allowed;
opacity: var(--time-field-disabled-opacity);
opacity: var(--field-disabled-opacity);
}
/* Embedded trigger inside the input — flush affordance like time-picker. */
[data-time-range-field-input] [data-time-range-picker-trigger] {
flex: 0 0 auto;
/* Sized from the picker-local `--_time-field-height` (scales per size); the
field-family segment-height token is registered design pending the Field
composition (docs/next-features.md, audit B.1). `font: inherit` so the
`1em` icon tracks the field font. */
/* Square icon button sized from the picker-local `--_time-field-height` (itself
sourced from `--field-control-height-{k}`, scaling with the PICKER size). NOT
the Field-family `--field-segment-height`: the range endpoints are composed
TimeFields that do NOT carry their own `[data-size]` (only the picker root/clock
do), so `--field-segment-height` (declared per `[data-field][data-size]`) would
pin to md here. The picker-inherited private is the size-tracking source.
`font: inherit` so the 1em icon tracks the field font. */
inline-size: calc(var(--_time-field-height) - var(--space-2));
block-size: calc(var(--_time-field-height) - var(--space-2));
margin-inline-start: auto;
padding: 0;
border: none;
border-radius: var(--time-field-segment-radius);
border-radius: var(--radius-sm);
background: transparent;
color: var(--time-field-segment-color);
color: var(--field-control-color);
box-shadow: none;
font: inherit;
}

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

@ -1284,10 +1284,6 @@
--cropper-zoom-btn-bg: var(--color-surface-muted);
--cropper-zoom-btn-fg: var(--color-content-primary);
--cropper-zoom-btn-border: var(--color-border-default);
--date-field-height-xs: var(--size-xs-control-height);
--date-field-height-sm: var(--size-sm-control-height);
--date-field-height-md: var(--size-md-control-height);
--date-field-height-lg: var(--size-lg-control-height);
--date-field-gap-xs: var(--space-0-5);
--date-field-gap-sm: var(--space-0-5);
--date-field-gap-md: var(--space-1);
@ -1298,14 +1294,6 @@
--date-field-segment-padding-inline-md: var(--space-1);
--date-field-segment-padding-inline-lg: var(--space-1-5);
--date-field-segment-padding-inline-xl: var(--space-2);
--date-field-font-size-xs: var(--size-xs-font-size);
--date-field-font-size-sm: var(--size-sm-font-size);
--date-field-font-size-md: var(--size-md-font-size);
--date-field-font-size-lg: var(--size-lg-font-size);
--date-field-radius: var(--radius-md);
--date-field-border-width: var(--border-width);
--date-field-border: var(--color-border-default);
--date-field-bg: var(--color-surface-default);
--date-field-placeholder-color: var(--color-content-muted);
--date-field-literal-color: var(--color-content-muted);
--date-field-segment-radius: var(--radius-sm);
@ -1317,15 +1305,6 @@
--date-field-transition-duration: var(--duration-fast);
--date-field-transition-ease: var(--ease-default);
--date-field-disabled-opacity: var(--opacity-disabled);
--time-field-stack-gap: var(--space-1-5);
--time-field-height-xs: var(--size-xs-control-height);
--time-field-height-sm: var(--size-sm-control-height);
--time-field-height-md: var(--size-md-control-height);
--time-field-height-lg: var(--size-lg-control-height);
--time-field-padding-inline-xs: var(--space-2);
--time-field-padding-inline-sm: var(--space-2-5);
--time-field-padding-inline-md: var(--space-2);
--time-field-padding-inline-lg: var(--space-3-5);
--time-field-gap-xs: var(--space-0-5);
--time-field-gap-sm: var(--space-0-5);
--time-field-gap-md: var(--space-1);
@ -1336,17 +1315,6 @@
--time-field-segment-padding-inline-md: var(--space-1);
--time-field-segment-padding-inline-lg: var(--space-1-5);
--time-field-segment-padding-inline-xl: var(--space-2);
--time-field-font-family: var(--style-label-font-family);
--time-field-font-size-xs: var(--size-xs-font-size);
--time-field-font-size-sm: var(--size-sm-font-size);
--time-field-font-size-md: var(--size-md-font-size);
--time-field-font-size-lg: var(--size-lg-font-size);
--time-field-line-height: var(--leading-ui);
--time-field-radius: var(--radius-md);
--time-field-border-width: var(--border-width);
--time-field-border: var(--color-border-default);
--time-field-bg: var(--color-surface-default);
--time-field-color: var(--color-content-primary);
--time-field-placeholder-color: var(--color-content-muted);
--time-field-literal-color: var(--color-content-muted);
--time-field-segment-radius: var(--radius-sm);

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

@ -1182,10 +1182,6 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({
'zoom-btn-border': 'var(--color-border-default)'
},
'date-field': {
'height-xs': 'var(--size-xs-control-height)',
'height-sm': 'var(--size-sm-control-height)',
'height-md': 'var(--size-md-control-height)',
'height-lg': 'var(--size-lg-control-height)',
'gap-xs': 'var(--space-0-5)',
'gap-sm': 'var(--space-0-5)',
'gap-md': 'var(--space-1)',
@ -1196,14 +1192,6 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({
'segment-padding-inline-md': 'var(--space-1)',
'segment-padding-inline-lg': 'var(--space-1-5)',
'segment-padding-inline-xl': 'var(--space-2)',
'font-size-xs': 'var(--size-xs-font-size)',
'font-size-sm': 'var(--size-sm-font-size)',
'font-size-md': 'var(--size-md-font-size)',
'font-size-lg': 'var(--size-lg-font-size)',
radius: 'var(--radius-md)',
'border-width': 'var(--border-width)',
border: 'var(--color-border-default)',
bg: 'var(--color-surface-default)',
'placeholder-color': 'var(--color-content-muted)',
'literal-color': 'var(--color-content-muted)',
'segment-radius': 'var(--radius-sm)',
@ -1217,15 +1205,6 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({
'disabled-opacity': 'var(--opacity-disabled)'
},
'time-field': {
'stack-gap': 'var(--space-1-5)',
'height-xs': 'var(--size-xs-control-height)',
'height-sm': 'var(--size-sm-control-height)',
'height-md': 'var(--size-md-control-height)',
'height-lg': 'var(--size-lg-control-height)',
'padding-inline-xs': 'var(--space-2)',
'padding-inline-sm': 'var(--space-2-5)',
'padding-inline-md': 'var(--space-2)',
'padding-inline-lg': 'var(--space-3-5)',
'gap-xs': 'var(--space-0-5)',
'gap-sm': 'var(--space-0-5)',
'gap-md': 'var(--space-1)',
@ -1236,17 +1215,6 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({
'segment-padding-inline-md': 'var(--space-1)',
'segment-padding-inline-lg': 'var(--space-1-5)',
'segment-padding-inline-xl': 'var(--space-2)',
'font-family': 'var(--style-label-font-family)',
'font-size-xs': 'var(--size-xs-font-size)',
'font-size-sm': 'var(--size-sm-font-size)',
'font-size-md': 'var(--size-md-font-size)',
'font-size-lg': 'var(--size-lg-font-size)',
'line-height': 'var(--leading-ui)',
radius: 'var(--radius-md)',
'border-width': 'var(--border-width)',
border: 'var(--color-border-default)',
bg: 'var(--color-surface-default)',
color: 'var(--color-content-primary)',
'placeholder-color': 'var(--color-content-muted)',
'literal-color': 'var(--color-content-muted)',
'segment-radius': 'var(--radius-sm)',

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.