From bd8380763753a7b6d304a88d82f3848ae8efbc0b Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sat, 19 Jul 2025 09:18:19 +0200 Subject: [PATCH] fix(material/datepicker): toggle button active color not showing up in M3 There were two issues preventing the active styles for the datepicker toggle from showing up in M3: 1. In M2 the inner button had a `color: inherit` which allowed it to inherit the color from the toggle, however in M3 the button has a specific color. 2. The M3 tokens for the datepicker weren't setting the right color. --- src/material/datepicker/_m3-datepicker.scss | 5 +---- src/material/datepicker/datepicker-toggle.scss | 4 ++++ 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/material/datepicker/_m3-datepicker.scss b/src/material/datepicker/_m3-datepicker.scss index faee749ee433..262c93b0f958 100644 --- a/src/material/datepicker/_m3-datepicker.scss +++ b/src/material/datepicker/_m3-datepicker.scss @@ -56,7 +56,7 @@ datepicker-range-input-disabled-state-text-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%), datepicker-range-input-separator-color: map.get($system, on-surface), - datepicker-toggle-active-state-icon-color: map.get($system, on-surface-variant), + datepicker-toggle-active-state-icon-color: map.get($system, primary), datepicker-toggle-icon-color: map.get($system, on-surface-variant), ), typography: ( @@ -71,7 +71,4 @@ ), density: (), ); - - $tokens: ( - ); } diff --git a/src/material/datepicker/datepicker-toggle.scss b/src/material/datepicker/datepicker-toggle.scss index 11fc04332a9d..f12d390eb3db 100644 --- a/src/material/datepicker/datepicker-toggle.scss +++ b/src/material/datepicker/datepicker-toggle.scss @@ -9,6 +9,10 @@ $fallbacks: m3-datepicker.get-tokens(); .mat-datepicker-toggle { pointer-events: auto; color: token-utils.slot(datepicker-toggle-icon-color, $fallbacks); + + button { + color: inherit; + } } .mat-datepicker-toggle-active {