From 0d999136f5a8eb113b8b4b5f2640037c96baeb6a Mon Sep 17 00:00:00 2001 From: Vinay Date: Wed, 4 Nov 2026 23:15:47 +0000 Subject: [PATCH] docs(material/datepicker): improve comparison range colour in example MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The comparison-range example uses tertiary-container as its background in M3, which is nearly identical to primary-container in several default themes (e.g. Azure & Blue). The two overlapping campaign date ranges become visually indistinguishable at a glance. Override two CSS custom properties scoped to the example host element with an amber tint — the same colour Material 2 used — so the visual distinction is clear in every M3 theme. This has no effect on user apps. Fixes #31663 --- .../date-range-picker-comparison-example.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.css b/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.css index 4737a7dea96a..6d64fd9ba2ed 100644 --- a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.css +++ b/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.css @@ -1,3 +1,16 @@ .example-form-field { margin: 0 8px 16px 0; } + +/** + * Override the comparison-range background so it is visually distinct from + * the primary selection range in every M3 theme (including Azure & Blue, + * where `tertiary-container` and `primary-container` are hard to tell apart). + * + * Using an amber tint here matches the colour that Material 2 used and gives + * a clear "second campaign" reading at a glance. + */ +date-range-picker-comparison-example { + --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2); + --mat-datepicker-calendar-date-in-overlap-range-state-background-color: rgba(249, 171, 0, 0.5); +}