fix(material/datepicker): toggle button active color not showing up in M3 (angular#31565)

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.

Author: crisbeto

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: (
-  );
 }

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 {