diff --git a/src/uix/eidos/components/date-range-picker/date-range-picker.css b/src/uix/eidos/components/date-range-picker/date-range-picker.css index 77843208e..4fdfb24de 100644 --- a/src/uix/eidos/components/date-range-picker/date-range-picker.css +++ b/src/uix/eidos/components/date-range-picker/date-range-picker.css @@ -16,14 +16,16 @@ --_calendar-accent-track: var(--color-primary-track); --_calendar-accent-border: var(--color-primary-border); --_calendar-accent-text: var(--color-primary-text); - --_calendar-range-start-solid: var(--color-affirm-solid, #16845f); - --_calendar-range-start-solid-hover: var(--color-affirm-solid-hover, #106d4e); - --_calendar-range-start-border: var(--color-affirm-border, #2ba878); - --_calendar-range-start-text: var(--color-affirm-contrast, #ffffff); + /* 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, #ffffff); + --_calendar-range-end-text: var(--calendar-day-selected-color); display: flex; flex-wrap: wrap; @@ -92,6 +94,12 @@ --_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'] { @@ -103,6 +111,11 @@ --_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'] { @@ -289,14 +302,16 @@ --_calendar-accent-track: var(--color-primary-track); --_calendar-accent-border: var(--color-primary-border); --_calendar-accent-text: var(--color-primary-text); - --_calendar-range-start-solid: var(--color-affirm-solid, #16845f); - --_calendar-range-start-solid-hover: var(--color-affirm-solid-hover, #106d4e); - --_calendar-range-start-border: var(--color-affirm-border, #2ba878); - --_calendar-range-start-text: var(--color-affirm-contrast, #ffffff); + /* 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, #ffffff); + --_calendar-range-end-text: var(--calendar-day-selected-color); display: inline-flex; flex-direction: column; @@ -350,6 +365,10 @@ --_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'] { @@ -358,6 +377,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); } [data-date-range-picker-calendar][data-range-calendar][data-color='risk'] { @@ -569,15 +592,22 @@ } [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); 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 + small 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); + font-weight: var(--font-weight-semibold); } [data-range-calendar-day][data-range-start][data-range-end] { diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index ebad7128c..e74c0d997 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -610,6 +610,52 @@ --field-transition-duration: var(--duration-fast); --field-transition-ease: var(--ease-default); --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-blur: 10px; --drawer-overlay-opacity: 62%; @@ -772,6 +818,72 @@ --date-field-transition-duration: var(--duration-fast); --date-field-transition-ease: var(--ease-default); --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-md: var(--space-1-5); --pagination-gap-lg: var(--space-2);