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

refactor(eidos): promote calendar range colors to public API (S8)

Browse Source 
The range endpoint colors lived as private `--_calendar-range-*` tokens declared
in range-calendar.css AND redundantly re-tuned by date-range-picker (reaching into
a sibling's privates). Promote them to the calendar-surface PUBLIC API: 8
`--calendar-range-{start,end}-{solid,solid-hover,border,text}` tokens in the
`calendar` recipe (`:root` defaults), consumed by range-calendar via the public
name. DateRangePicker drops its 6 `--_calendar-range-*` blocks — the composed
range calendar already paints from range-calendar.css, so the drp declarations
were redundant.

Deliberate asymmetry (documented in range-calendar.css): START defaults live in
the recipe `:root` so a theme can override them via config; END binds to the live
`--_calendar-accent-*` on the host (the accent is a per-color private that only
cascades there), so its `:root` defaults are the nominal public default. Both stay
public per the S8 verdict, preserving the original "end may differ from accent"
capability.

Value-preserving: recipe-css-contract 25/25, baseline 59, eidos-lint invalid 0,
browser-verified identical across default/affirm/secondary/fulfill on the
standalone RangeCalendar and the DateRangePicker popover.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
menubar-v4-safe
dev 3 months ago
parent 3c36c051c9
commit 83e13be649
4 changed files with 64 additions and 78 deletions
Show Stats Download Patch File Download Diff File

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

@ -19,16 +19,6 @@
--_calendar-accent-track: var(--color-primary-track);
--_calendar-accent-border: var(--color-primary-border);
--_calendar-accent-text: var(--color-primary-text);
/* Start endpoint uses the `affirm` family by default (semantically: the
range opens). End endpoint follows the picker's `data-color` accent. */
--_calendar-range-start-solid: var(--color-affirm-solid);
--_calendar-range-start-solid-hover: var(--color-affirm-solid-hover);
--_calendar-range-start-border: var(--color-affirm-border);
--_calendar-range-start-text: var(--color-affirm-contrast);
--_calendar-range-end-solid: var(--_calendar-accent-solid);
--_calendar-range-end-solid-hover: var(--_calendar-accent-solid-hover);
--_calendar-range-end-border: var(--_calendar-accent-solid);
--_calendar-range-end-text: var(--calendar-day-selected-color);
display: flex;
flex-wrap: wrap;
@ -100,12 +90,6 @@
--_calendar-accent-track: var(--color-affirm-track);
--_calendar-accent-border: var(--color-affirm-border);
--_calendar-accent-text: var(--color-affirm-text);
/* End uses affirm — swap start to secondary so the two endpoints
stay perceptually distinct. */
--_calendar-range-start-solid: var(--color-secondary-solid);
--_calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
--_calendar-range-start-border: var(--color-secondary-border);
--_calendar-range-start-text: var(--color-secondary-contrast);
}
[data-date-range-picker][data-color='fulfill'] {
@ -117,11 +101,6 @@
--_calendar-accent-track: var(--color-fulfill-track);
--_calendar-accent-border: var(--color-fulfill-border);
--_calendar-accent-text: var(--color-fulfill-text);
/* End uses fulfill (close in hue to affirm) — swap start to secondary. */
--_calendar-range-start-solid: var(--color-secondary-solid);
--_calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
--_calendar-range-start-border: var(--color-secondary-border);
--_calendar-range-start-text: var(--color-secondary-contrast);
}
[data-date-range-picker][data-color='risk'] {
@ -286,16 +265,6 @@
--_calendar-accent-track: var(--color-primary-track);
--_calendar-accent-border: var(--color-primary-border);
--_calendar-accent-text: var(--color-primary-text);
/* Start endpoint uses the `affirm` family by default (semantically: the
range opens). End endpoint follows the picker's `data-color` accent. */
--_calendar-range-start-solid: var(--color-affirm-solid);
--_calendar-range-start-solid-hover: var(--color-affirm-solid-hover);
--_calendar-range-start-border: var(--color-affirm-border);
--_calendar-range-start-text: var(--color-affirm-contrast);
--_calendar-range-end-solid: var(--_calendar-accent-solid);
--_calendar-range-end-solid-hover: var(--_calendar-accent-solid-hover);
--_calendar-range-end-border: var(--_calendar-accent-solid);
--_calendar-range-end-text: var(--calendar-day-selected-color);
display: inline-flex;
flex-direction: column;
@ -356,10 +325,6 @@
--_calendar-accent-track: var(--color-affirm-track);
--_calendar-accent-border: var(--color-affirm-border);
--_calendar-accent-text: var(--color-affirm-text);
--_calendar-range-start-solid: var(--color-secondary-solid);
--_calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
--_calendar-range-start-border: var(--color-secondary-border);
--_calendar-range-start-text: var(--color-secondary-contrast);
}
[data-date-range-picker-calendar][data-range-calendar][data-color='fulfill'] {
@ -368,10 +333,6 @@
--_calendar-accent-track: var(--color-fulfill-track);
--_calendar-accent-border: var(--color-fulfill-border);
--_calendar-accent-text: var(--color-fulfill-text);
--_calendar-range-start-solid: var(--color-secondary-solid);
--_calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
--_calendar-range-start-border: var(--color-secondary-border);
--_calendar-range-start-text: var(--color-secondary-contrast);
}
[data-date-range-picker-calendar][data-range-calendar][data-color='risk'] {

79
src/uix/eidos/components/range-calendar/range-calendar.css
Unescape View File

@ -39,16 +39,17 @@
--_calendar-accent-track: var(--color-primary-track);
--_calendar-accent-border: var(--color-primary-border);
--_calendar-accent-text: var(--color-primary-text);
/* Start endpoint defaults to `affirm` semantic (range opens). End
endpoint follows the `data-color` cascade. */
--_calendar-range-start-solid: var(--color-affirm-solid);
--_calendar-range-start-solid-hover: var(--color-affirm-solid-hover);
--_calendar-range-start-border: var(--color-affirm-border);
--_calendar-range-start-text: var(--color-affirm-contrast);
--_calendar-range-end-solid: var(--_calendar-accent-solid);
--_calendar-range-end-solid-hover: var(--_calendar-accent-solid-hover);
--_calendar-range-end-border: var(--_calendar-accent-solid);
--_calendar-range-end-text: var(--calendar-day-selected-color);
/* Range endpoints — the calendar-surface public API `--calendar-range-*`. The
asymmetry below is DELIBERATE: START defaults live in the recipe (`:root`,
= affirm — the range "opens") so a theme can override them via config; the host
only swaps start per data-color further down. END binds to the LIVE accent, so it
MUST sit on the host where `--_calendar-accent-*` cascades — the recipe's `:root`
end defaults are the nominal public default (start is independently themeable,
end tracks the accent). */
--calendar-range-end-solid: var(--_calendar-accent-solid);
--calendar-range-end-solid-hover: var(--_calendar-accent-solid-hover);
--calendar-range-end-border: var(--_calendar-accent-solid);
--calendar-range-end-text: var(--calendar-day-selected-color);
display: inline-flex;
flex-direction: column;
@ -124,10 +125,10 @@
--_calendar-accent-text: var(--color-affirm-text);
/* When the end accent IS `affirm`, swap the start endpoint to
secondary so the two endpoints stay visually distinct. */
--_calendar-range-start-solid: var(--color-secondary-solid);
--_calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
--_calendar-range-start-border: var(--color-secondary-border);
--_calendar-range-start-text: var(--color-secondary-contrast);
--calendar-range-start-solid: var(--color-secondary-solid);
--calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
--calendar-range-start-border: var(--color-secondary-border);
--calendar-range-start-text: var(--color-secondary-contrast);
}
[data-range-calendar][data-color='fulfill'] {
@ -136,10 +137,10 @@
--_calendar-accent-track: var(--color-fulfill-track);
--_calendar-accent-border: var(--color-fulfill-border);
--_calendar-accent-text: var(--color-fulfill-text);
--_calendar-range-start-solid: var(--color-secondary-solid);
--_calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
--_calendar-range-start-border: var(--color-secondary-border);
--_calendar-range-start-text: var(--color-secondary-contrast);
--calendar-range-start-solid: var(--color-secondary-solid);
--calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
--calendar-range-start-border: var(--color-secondary-border);
--calendar-range-start-text: var(--color-secondary-contrast);
}
[data-range-calendar][data-color='risk'] {
@ -309,60 +310,60 @@
}
[data-range-calendar-day][data-selected] {
border-color: var(--_calendar-range-end-border);
background: var(--_calendar-range-end-solid);
border-color: var(--calendar-range-end-border);
background: var(--calendar-range-end-solid);
color: var(--calendar-day-selected-color);
}
[data-range-calendar-day][data-range-start] {
/* Start endpoint: solid background + left-edge accent stripe so it reads
as the *opening* of the range, never blending with the end. */
border-color: var(--_calendar-range-start-border);
background: var(--_calendar-range-start-solid);
color: var(--_calendar-range-start-text);
box-shadow: inset 2px 0 0 0 var(--_calendar-range-start-border);
border-color: var(--calendar-range-start-border);
background: var(--calendar-range-start-solid);
color: var(--calendar-range-start-text);
box-shadow: inset 2px 0 0 0 var(--calendar-range-start-border);
font-weight: var(--font-weight-semibold);
}
[data-range-calendar-day][data-range-end] {
/* End endpoint: solid background + right-edge accent stripe. */
border-color: var(--_calendar-range-end-border);
background: var(--_calendar-range-end-solid);
color: var(--_calendar-range-end-text);
box-shadow: inset -2px 0 0 0 var(--_calendar-range-end-border);
border-color: var(--calendar-range-end-border);
background: var(--calendar-range-end-solid);
color: var(--calendar-range-end-text);
box-shadow: inset -2px 0 0 0 var(--calendar-range-end-border);
font-weight: var(--font-weight-semibold);
}
[data-range-calendar-day][data-range-start][data-range-end] {
border-color: var(--_calendar-range-end-border);
border-color: var(--calendar-range-end-border);
background: linear-gradient(
135deg,
var(--_calendar-range-start-solid) 0 50%,
var(--_calendar-range-end-solid) 50% 100%
var(--calendar-range-start-solid) 0 50%,
var(--calendar-range-end-solid) 50% 100%
);
color: var(--calendar-day-selected-color);
}
[data-range-calendar-day][data-selected]:hover {
border-color: var(--_calendar-range-end-solid-hover);
background: var(--_calendar-range-end-solid-hover);
border-color: var(--calendar-range-end-solid-hover);
background: var(--calendar-range-end-solid-hover);
}
[data-range-calendar-day][data-range-start]:hover {
border-color: var(--_calendar-range-start-solid-hover);
background: var(--_calendar-range-start-solid-hover);
border-color: var(--calendar-range-start-solid-hover);
background: var(--calendar-range-start-solid-hover);
}
[data-range-calendar-day][data-range-end]:hover {
border-color: var(--_calendar-range-end-solid-hover);
background: var(--_calendar-range-end-solid-hover);
border-color: var(--calendar-range-end-solid-hover);
background: var(--calendar-range-end-solid-hover);
}
[data-range-calendar-day][data-range-start][data-range-end]:hover {
background: linear-gradient(
135deg,
var(--_calendar-range-start-solid-hover) 0 50%,
var(--_calendar-range-end-solid-hover) 50% 100%
var(--calendar-range-start-solid-hover) 0 50%,
var(--calendar-range-end-solid-hover) 50% 100%
);
}

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

@ -1555,6 +1555,14 @@
--calendar-day-color-hover: var(--color-content-primary);
--calendar-day-font-weight: var(--font-weight-regular);
--calendar-day-selected-color: var(--color-content-on-solid);
--calendar-range-start-solid: var(--color-affirm-solid);
--calendar-range-start-solid-hover: var(--color-affirm-solid-hover);
--calendar-range-start-border: var(--color-affirm-border);
--calendar-range-start-text: var(--color-affirm-contrast);
--calendar-range-end-solid: var(--color-primary-solid);
--calendar-range-end-solid-hover: var(--color-primary-solid-hover);
--calendar-range-end-border: var(--color-primary-solid);
--calendar-range-end-text: var(--color-content-on-solid);
--calendar-day-today-border: var(--color-border-strong);
--calendar-day-today-color: var(--color-content-primary);
--calendar-day-today-font-weight: var(--font-weight-semibold);

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

@ -1592,6 +1592,22 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({
'day-color-hover': 'var(--color-content-primary)',
'day-font-weight': 'var(--font-weight-regular)',
'day-selected-color': 'var(--color-content-on-solid)',
// Range endpoints — the calendar-surface PUBLIC range API (S8). RangeCalendar
// paints start / end / dual-endpoint day cells from these; a consumer
// (DateRangePicker, a theme) retunes the range palette by setting the public
// token, never RangeCalendar's private. `:root` defaults; RangeCalendar binds
// `range-end-*` to its live accent and swaps `range-start-*` per data-color
// (both depend on the `[data-range-calendar]` host cascade, so they stay in
// range-calendar.css). Start defaults to `affirm` (the range "opens"); end
// follows the accent (default primary).
'range-start-solid': 'var(--color-affirm-solid)',
'range-start-solid-hover': 'var(--color-affirm-solid-hover)',
'range-start-border': 'var(--color-affirm-border)',
'range-start-text': 'var(--color-affirm-contrast)',
'range-end-solid': 'var(--color-primary-solid)',
'range-end-solid-hover': 'var(--color-primary-solid-hover)',
'range-end-border': 'var(--color-primary-solid)',
'range-end-text': 'var(--color-content-on-solid)',
'day-today-border': 'var(--color-border-strong)',
'day-today-color': 'var(--color-content-primary)',
'day-today-font-weight': 'var(--font-weight-semibold)',

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.