From 12d9bdeee5ffd0c55906f07023193994b44283ce Mon Sep 17 00:00:00 2001 From: Eduard Fischer-Szava Date: Fri, 29 May 2026 01:06:29 +0200 Subject: [PATCH 1/2] fix(material/datepicker): improve comparison range colors Use clearer default colors for Material 3 date range comparison and overlap states so comparison ranges remain distinguishable across default themes. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/material/datepicker/_m3-datepicker.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/material/datepicker/_m3-datepicker.scss b/src/material/datepicker/_m3-datepicker.scss index 262c93b0f958..29b3cc1972a5 100644 --- a/src/material/datepicker/_m3-datepicker.scss +++ b/src/material/datepicker/_m3-datepicker.scss @@ -1,3 +1,4 @@ +@use 'sass:color'; @use 'sass:map'; @use '../core/style/elevation'; @use '../core/tokens/m3-utils'; @@ -28,12 +29,10 @@ map.get($system, on-surface), map.get($system, focus-state-layer-opacity)), datepicker-calendar-date-hover-state-background-color: m3-utils.color-with-opacity( map.get($system, on-surface), map.get($system, hover-state-layer-opacity)), - datepicker-calendar-date-in-comparison-range-state-background-color: - map.get($system, tertiary-container), + datepicker-calendar-date-in-comparison-range-state-background-color: rgba(#f9ab00, 0.2), datepicker-calendar-date-in-overlap-range-selected-state-background-color: - map.get($system, secondary), - datepicker-calendar-date-in-overlap-range-state-background-color: - map.get($system, secondary-container), + color.adjust(#a8dab5, $lightness: -30%), + datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5, datepicker-calendar-date-in-range-state-background-color:map.get($system, primary-container), datepicker-calendar-date-outline-color: transparent, datepicker-calendar-date-preview-state-outline-color: map.get($system, primary), From 9eafec0955a84c86105df9848e5a9862d8009501 Mon Sep 17 00:00:00 2001 From: Eduard Fix Date: Sat, 30 May 2026 00:55:37 +0200 Subject: [PATCH 2/2] fix(material/datepicker): use M3 system tokens for comparison range colors Replace hardcoded hex colors with appropriate M3 system tokens to maintain theme adaptability across light/dark/custom themes while improving contrast between comparison and primary selection ranges. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/material/datepicker/_m3-datepicker.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/material/datepicker/_m3-datepicker.scss b/src/material/datepicker/_m3-datepicker.scss index 29b3cc1972a5..64c3c0d09fea 100644 --- a/src/material/datepicker/_m3-datepicker.scss +++ b/src/material/datepicker/_m3-datepicker.scss @@ -1,4 +1,3 @@ -@use 'sass:color'; @use 'sass:map'; @use '../core/style/elevation'; @use '../core/tokens/m3-utils'; @@ -29,10 +28,12 @@ map.get($system, on-surface), map.get($system, focus-state-layer-opacity)), datepicker-calendar-date-hover-state-background-color: m3-utils.color-with-opacity( map.get($system, on-surface), map.get($system, hover-state-layer-opacity)), - datepicker-calendar-date-in-comparison-range-state-background-color: rgba(#f9ab00, 0.2), + datepicker-calendar-date-in-comparison-range-state-background-color: + map.get($system, tertiary-fixed-dim), datepicker-calendar-date-in-overlap-range-selected-state-background-color: - color.adjust(#a8dab5, $lightness: -30%), - datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5, + map.get($system, secondary), + datepicker-calendar-date-in-overlap-range-state-background-color: + map.get($system, secondary-fixed-dim), datepicker-calendar-date-in-range-state-background-color:map.get($system, primary-container), datepicker-calendar-date-outline-color: transparent, datepicker-calendar-date-preview-state-outline-color: map.get($system, primary),