fix(material/core): differentiate container colors in m2 (#32076)

Co-authored-by: Andrew Seguin <andrewseguin@google.com>
(cherry picked from commit 83d9b02)

Author: andrewseguin

src/material/core/tokens/m2/_md-sys-color.scss

@@ -1,6 +1,6 @@
-@use 'sass:map';
 @use '../../m2/palette';
 @use './md-sys-color-internal';
+@use 'sass:map';
 
 @function md-sys-color-values-dark($palettes) {
   $values: (
@@ -23,24 +23,24 @@
     inverse-on-surface: rgba(black, 0.87),
     outline: rgba(white, 0.12),
     outline-variant: rgba(white, 0.38),
-    error-container: map.get($palettes, warn, default),
+    error-container: map.get($palettes, warn, 900),
     on-background: white,
-    on-error-container: map.get($palettes, warn, default-contrast),
-    on-primary-container: map.get($palettes, primary, default-contrast),
+    on-error-container: map.get($palettes, warn, 50),
+    on-primary-container: map.get($palettes, primary, 50),
     on-primary-fixed: map.get($palettes, primary, default-contrast),
     on-primary-fixed-variant: map.get($palettes, primary, default-contrast),
-    on-secondary-container: map.get($palettes, accent, default-contrast),
+    on-secondary-container: map.get($palettes, accent, 50),
     on-secondary-fixed: map.get($palettes, accent, default-contrast),
     on-secondary-fixed-variant: map.get($palettes, accent, default-contrast),
     on-tertiary: map.get($palettes, accent, default-contrast),
-    on-tertiary-container: map.get($palettes, accent, default-contrast),
+    on-tertiary-container: map.get($palettes, accent, 50),
     on-tertiary-fixed: map.get($palettes, accent, default-contrast),
     on-tertiary-fixed-variant: map.get($palettes, accent, default-contrast),
-    primary-container: map.get($palettes, primary, default),
+    primary-container: map.get($palettes, primary, 900),
     primary-fixed: map.get($palettes, primary, default),
     primary-fixed-dim: map.get($palettes, primary, default),
     scrim: black,
-    secondary-container: map.get($palettes, accent, default),
+    secondary-container: map.get($palettes, accent, 900),
     secondary-fixed: map.get($palettes, accent, default),
     secondary-fixed-dim: map.get($palettes, accent, default),
     surface-bright: map.get(palette.$grey-palette, 800),
@@ -52,7 +52,7 @@
     surface-dim: map.get(palette.$grey-palette, 800),
     surface-tint: map.get(palette.$grey-palette, 800),
     tertiary: map.get($palettes, accent, default),
-    tertiary-container: map.get($palettes, accent, default),
+    tertiary-container: map.get($palettes, accent, 900),
     tertiary-fixed: map.get($palettes, accent, default),
     tertiary-fixed-dim: map.get($palettes, accent, default),
   );
@@ -83,24 +83,24 @@
     inverse-on-surface: white,
     outline: rgba(black, 0.12),
     outline-variant: rgba(black, 0.38),
-    error-container: map.get($palettes, warn, default),
+    error-container: map.get($palettes, warn, 50),
     on-background: rgba(black, 0.87),
-    on-error-container: map.get($palettes, warn, default-contrast),
-    on-primary-container: map.get($palettes, primary, default-contrast),
+    on-error-container: map.get($palettes, warn, 700),
+    on-primary-container: map.get($palettes, primary, 700),
     on-primary-fixed: map.get($palettes, primary, default-contrast),
     on-primary-fixed-variant: map.get($palettes, primary, default-contrast),
-    on-secondary-container: map.get($palettes, accent, default-contrast),
+    on-secondary-container: map.get($palettes, accent, 700),
     on-secondary-fixed: map.get($palettes, accent, default-contrast),
     on-secondary-fixed-variant: map.get($palettes, accent, default-contrast),
     on-tertiary: map.get($palettes, accent, default-contrast),
-    on-tertiary-container: map.get($palettes, accent, default-contrast),
+    on-tertiary-container: map.get($palettes, accent, 700),
     on-tertiary-fixed: map.get($palettes, accent, default-contrast),
     on-tertiary-fixed-variant: map.get($palettes, accent, default-contrast),
-    primary-container: map.get($palettes, primary, default),
+    primary-container: map.get($palettes, primary, 50),
     primary-fixed: map.get($palettes, primary, default),
     primary-fixed-dim: map.get($palettes, primary, default),
     scrim: black,
-    secondary-container: map.get($palettes, accent, default),
+    secondary-container: map.get($palettes, accent, 50),
     secondary-fixed: map.get($palettes, accent, default),
     secondary-fixed-dim: map.get($palettes, accent, default),
     surface-bright: white,
@@ -112,7 +112,7 @@
     surface-dim: white,
     surface-tint: white,
     tertiary: map.get($palettes, accent, default),
-    tertiary-container: map.get($palettes, accent, default),
+    tertiary-container: map.get($palettes, accent, 50),
     tertiary-fixed: map.get($palettes, accent, default),
     tertiary-fixed-dim: map.get($palettes, accent, default),
   );