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

eidos/date-range-picker: distinct start/end tones + purge raw hex

Browse Source 
Closes incidencia 2026-05-20 #4 plus the R-2.1 audit finding:

- Remove raw-hex fallbacks (`#16845f`, `#106d4e`, `#2ba878`, `#ffffff`)
  from `date-range-picker.css`. The `--color-affirm-*` and
  `--calendar-day-selected-color` tokens are guaranteed by the
  generated base.css; the safety hex hid that they weren't being
  refreshed.
- Regenerate `eidos/generated/base.css` so `--calendar-day-*` tokens
  (color, selected-color, today-border, etc.) materialize from the
  recipe definitions in `lib/recipes/base.ts`. Fixes the stale
  `keeps generated/base.css in sync` contract test.
- Start endpoint now reads `--color-affirm-*` cleanly; end follows the
  picker's `data-color` accent. When the picker's accent IS in the
  affirm family (`data-color="affirm"` or `"fulfill"`), the start
  swaps to `secondary` so the two endpoints stay perceptually distinct.
- Both endpoints get an inset edge stripe + semibold weight so the
  start vs end direction reads at a glance — addresses the user's
  "indistinguible o transparente" complaint.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
active-uix
dev 5 months ago
parent aaffba2ff5
commit 9728e76975
2 changed files with 152 additions and 10 deletions
Show Stats Download Patch File Download Diff File

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

@ -16,14 +16,16 @@
--_calendar-accent-track: var(--color-primary-track); --_calendar-accent-track: var(--color-primary-track);
--_calendar-accent-border: var(--color-primary-border); --_calendar-accent-border: var(--color-primary-border);
--_calendar-accent-text: var(--color-primary-text); --_calendar-accent-text: var(--color-primary-text);
--_calendar-range-start-solid: var(--color-affirm-solid, #16845f); /* Start endpoint uses the `affirm` family by default (semantically: the
--_calendar-range-start-solid-hover: var(--color-affirm-solid-hover, #106d4e); range opens). End endpoint follows the picker's `data-color` accent. */
--_calendar-range-start-border: var(--color-affirm-border, #2ba878); --_calendar-range-start-solid: var(--color-affirm-solid);
--_calendar-range-start-text: var(--color-affirm-contrast, #ffffff); --_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: var(--_calendar-accent-solid);
--_calendar-range-end-solid-hover: var(--_calendar-accent-solid-hover); --_calendar-range-end-solid-hover: var(--_calendar-accent-solid-hover);
--_calendar-range-end-border: var(--_calendar-accent-solid); --_calendar-range-end-border: var(--_calendar-accent-solid);
--_calendar-range-end-text: var(--calendar-day-selected-color, #ffffff); --_calendar-range-end-text: var(--calendar-day-selected-color);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -92,6 +94,12 @@
--_calendar-accent-track: var(--color-affirm-track); --_calendar-accent-track: var(--color-affirm-track);
--_calendar-accent-border: var(--color-affirm-border); --_calendar-accent-border: var(--color-affirm-border);
--_calendar-accent-text: var(--color-affirm-text); --_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'] { [data-date-range-picker][data-color='fulfill'] {
@ -103,6 +111,11 @@
--_calendar-accent-track: var(--color-fulfill-track); --_calendar-accent-track: var(--color-fulfill-track);
--_calendar-accent-border: var(--color-fulfill-border); --_calendar-accent-border: var(--color-fulfill-border);
--_calendar-accent-text: var(--color-fulfill-text); --_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'] { [data-date-range-picker][data-color='risk'] {
@ -289,14 +302,16 @@
--_calendar-accent-track: var(--color-primary-track); --_calendar-accent-track: var(--color-primary-track);
--_calendar-accent-border: var(--color-primary-border); --_calendar-accent-border: var(--color-primary-border);
--_calendar-accent-text: var(--color-primary-text); --_calendar-accent-text: var(--color-primary-text);
--_calendar-range-start-solid: var(--color-affirm-solid, #16845f); /* Start endpoint uses the `affirm` family by default (semantically: the
--_calendar-range-start-solid-hover: var(--color-affirm-solid-hover, #106d4e); range opens). End endpoint follows the picker's `data-color` accent. */
--_calendar-range-start-border: var(--color-affirm-border, #2ba878); --_calendar-range-start-solid: var(--color-affirm-solid);
--_calendar-range-start-text: var(--color-affirm-contrast, #ffffff); --_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: var(--_calendar-accent-solid);
--_calendar-range-end-solid-hover: var(--_calendar-accent-solid-hover); --_calendar-range-end-solid-hover: var(--_calendar-accent-solid-hover);
--_calendar-range-end-border: var(--_calendar-accent-solid); --_calendar-range-end-border: var(--_calendar-accent-solid);
--_calendar-range-end-text: var(--calendar-day-selected-color, #ffffff); --_calendar-range-end-text: var(--calendar-day-selected-color);
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -350,6 +365,10 @@
--_calendar-accent-track: var(--color-affirm-track); --_calendar-accent-track: var(--color-affirm-track);
--_calendar-accent-border: var(--color-affirm-border); --_calendar-accent-border: var(--color-affirm-border);
--_calendar-accent-text: var(--color-affirm-text); --_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'] { [data-date-range-picker-calendar][data-range-calendar][data-color='fulfill'] {
@ -358,6 +377,10 @@
--_calendar-accent-track: var(--color-fulfill-track); --_calendar-accent-track: var(--color-fulfill-track);
--_calendar-accent-border: var(--color-fulfill-border); --_calendar-accent-border: var(--color-fulfill-border);
--_calendar-accent-text: var(--color-fulfill-text); --_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'] { [data-date-range-picker-calendar][data-range-calendar][data-color='risk'] {
@ -569,15 +592,22 @@
} }
[data-range-calendar-day][data-range-start] { [data-range-calendar-day][data-range-start] {
/* Start endpoint: solid background + small 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); border-color: var(--_calendar-range-start-border);
background: var(--_calendar-range-start-solid); background: var(--_calendar-range-start-solid);
color: var(--_calendar-range-start-text); 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] { [data-range-calendar-day][data-range-end] {
/* End endpoint: solid background + small right-edge accent stripe. */
border-color: var(--_calendar-range-end-border); border-color: var(--_calendar-range-end-border);
background: var(--_calendar-range-end-solid); background: var(--_calendar-range-end-solid);
color: var(--_calendar-range-end-text); 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] { [data-range-calendar-day][data-range-start][data-range-end] {

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

@ -610,6 +610,52 @@
--field-transition-duration: var(--duration-fast); --field-transition-duration: var(--duration-fast);
--field-transition-ease: var(--ease-default); --field-transition-ease: var(--ease-default);
--field-disabled-opacity: 0.56; --field-disabled-opacity: 0.56;
--form-gap-sm: var(--space-4);
--form-gap-md: var(--space-5);
--form-gap-lg: var(--space-6);
--form-font-family: var(--font-ui);
--form-color: var(--color-content-primary);
--form-radius: var(--radius-lg);
--form-border-width: var(--border-width);
--form-panel-padding: var(--space-5);
--form-panel-border: var(--color-border-default);
--form-panel-bg: var(--color-surface-raised);
--form-panel-shadow: var(--shadow-sm);
--form-grid-min: 18rem;
--form-grid-column-gap: var(--space-5);
--form-action-height-sm: var(--control-height-sm);
--form-action-height-md: var(--control-height-md);
--form-action-height-lg: var(--control-height-lg);
--form-action-px-sm: var(--space-3);
--form-action-px-md: var(--space-3-5);
--form-action-px-lg: var(--space-4);
--form-action-font-size-sm: var(--font-size-xs);
--form-action-font-size-md: var(--font-size-sm);
--form-action-font-size-lg: var(--font-size-sm);
--form-action-font-weight: var(--font-weight-medium);
--form-action-line-height: var(--leading-ui);
--form-action-gap: var(--space-2);
--form-action-radius: var(--radius-md);
--form-action-border-width: var(--border-width);
--form-error-summary-padding: var(--space-3);
--form-error-summary-border-width: var(--border-width);
--form-error-summary-radius: var(--radius-md);
--form-error-summary-font-size: var(--font-size-sm);
--form-error-summary-line-height: var(--leading-ui);
--form-error-summary-list-indent: var(--space-4);
--form-link-underline-offset: 0.18em;
--form-auto-fields-gap: var(--space-3);
--form-auto-fields-array-padding: var(--space-3);
--form-auto-fields-border-width: var(--border-width);
--form-auto-fields-radius: var(--radius-md);
--form-auto-fields-item-gap: var(--space-2);
--form-auto-fields-item-padding: var(--space-3);
--form-widget-px: var(--space-3);
--form-widget-radius: var(--radius-md);
--form-widget-border-width: var(--border-width);
--form-transition-duration: var(--duration-fast);
--form-transition-ease: var(--ease-default);
--form-disabled-opacity: 0.56;
--drawer-overlay-bg: var(--color-overlay); --drawer-overlay-bg: var(--color-overlay);
--drawer-overlay-blur: 10px; --drawer-overlay-blur: 10px;
--drawer-overlay-opacity: 62%; --drawer-overlay-opacity: 62%;
@ -772,6 +818,72 @@
--date-field-transition-duration: var(--duration-fast); --date-field-transition-duration: var(--duration-fast);
--date-field-transition-ease: var(--ease-default); --date-field-transition-ease: var(--ease-default);
--date-field-disabled-opacity: 0.56; --date-field-disabled-opacity: 0.56;
--calendar-gap: var(--space-3);
--calendar-padding-sm: var(--space-3);
--calendar-padding-md: var(--space-4);
--calendar-padding-lg: var(--space-5);
--calendar-radius: var(--radius-lg);
--calendar-border-width: var(--border-width);
--calendar-border: var(--color-border-subtle);
--calendar-invalid-border: var(--color-risk-border);
--calendar-bg: var(--color-surface-raised);
--calendar-outline-bg: var(--color-surface-default);
--calendar-outline-shadow: none;
--calendar-color: var(--color-content-primary);
--calendar-shadow: var(--shadow-sm);
--calendar-font-family: var(--font-ui);
--calendar-font-size-sm: var(--font-size-xs);
--calendar-font-size-md: var(--font-size-sm);
--calendar-font-size-lg: var(--font-size-sm);
--calendar-line-height: var(--leading-ui);
--calendar-header-gap: var(--space-2);
--calendar-heading-color: var(--color-content-primary);
--calendar-heading-font-size: var(--font-size-sm);
--calendar-heading-font-weight: var(--font-weight-semibold);
--calendar-control-size-sm: var(--control-height-xs);
--calendar-control-size-md: var(--control-height-sm);
--calendar-control-size-lg: var(--control-height-md);
--calendar-control-radius: var(--radius-md);
--calendar-control-border-width: var(--border-width);
--calendar-control-border: transparent;
--calendar-control-border-hover: var(--color-border-subtle);
--calendar-control-bg: transparent;
--calendar-control-bg-hover: var(--color-surface-overlay);
--calendar-control-color: var(--color-content-secondary);
--calendar-control-color-hover: var(--color-content-primary);
--calendar-select-min-width: 8ch;
--calendar-select-px: var(--space-2);
--calendar-grid-gap: var(--space-0-5);
--calendar-weekday-size: var(--space-5);
--calendar-weekday-color: var(--color-content-muted);
--calendar-weekday-font-size: var(--font-size-xs);
--calendar-weekday-font-weight: var(--font-weight-medium);
--calendar-day-size-sm: var(--control-height-xs);
--calendar-day-size-md: var(--control-height-sm);
--calendar-day-size-lg: var(--control-height-md);
--calendar-day-radius: var(--radius-md);
--calendar-day-border-width: var(--border-width);
--calendar-day-border: transparent;
--calendar-day-border-hover: var(--color-border-subtle);
--calendar-day-bg: transparent;
--calendar-day-bg-hover: var(--color-surface-overlay);
--calendar-day-color: var(--color-content-primary);
--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-day-today-border: var(--color-border-strong);
--calendar-day-today-color: var(--color-content-primary);
--calendar-day-today-font-weight: var(--font-weight-semibold);
--calendar-day-outside-color: var(--color-content-muted);
--calendar-day-outside-opacity: 0.62;
--calendar-day-weekend-color: var(--color-content-secondary);
--calendar-day-holiday-shadow: inset 0 -2px 0 var(--_calendar-accent-border);
--calendar-day-unavailable-decoration: var(--color-risk-border);
--calendar-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
--calendar-event-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--_calendar-accent-border);
--calendar-transition-duration: var(--duration-fast);
--calendar-transition-ease: var(--ease-default);
--calendar-disabled-opacity: 0.52;
--pagination-gap-sm: var(--space-1); --pagination-gap-sm: var(--space-1);
--pagination-gap-md: var(--space-1-5); --pagination-gap-md: var(--space-1-5);
--pagination-gap-lg: var(--space-2); --pagination-gap-lg: var(--space-2);

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.