From 0da585f7307ea98b5575d520d3b6da79769827c4 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 26 Jan 2024 17:47:06 +0000
Subject: [PATCH] fix(material-experimental/theming): Update color palettes
 (#28472)

Changes the way M3 color palettes a bit to make the color choices more
in line with what the spec expects. In particular, select the secondary
palette automatically based on the primary palette (secondary is
intended to be a more muted version of primary). We still allow the user
to select what tertiary color to pair with their primary, since the spec
doesn't make the same sort of assumptions about the tertiary color.

Note: because our demo targets styles at the .mat-primary, .mat-accent,
.mat-error classes, it winds up overriding the default color combo that
users would see out of the box for the mat-select (a primary form-field
with a secondary selected option). This is one example where the M2
color="primary/accent/warn" API doesn't quite align with how colors work
in M3. We do not expect users to apply colors in this way, and we
probably shouldn't do it in our demo either. For now I've added an extra
checkbox to the select demo that lets us observe the form-field/select
combo users would see out of the box without our overrides.
---
 src/dev-app/select/select-demo.html           |   5 +-
 src/dev-app/select/select-demo.ts             |   1 +
 src/dev-app/theme-m3.scss                     |  15 +-
 src/material-experimental/_index.scss         |   5 +-
 .../theming/_config-validation.scss           |   2 +-
 .../theming/_custom-tokens.scss               |   2 +-
 .../theming/_definition.scss                  |  15 +-
 .../theming/_m3-palettes.scss                 | 770 ++++++++++++++----
 .../theming/_m3-tokens.scss                   |   9 +-
 .../tests/theming-definition-api.spec.ts      |   5 +-
 10 files changed, 649 insertions(+), 180 deletions(-)

diff --git a/src/dev-app/select/select-demo.html b/src/dev-app/select/select-demo.html
index 190d3ed68ff7..d84caffd3dfe 100644
--- a/src/dev-app/select/select-demo.html
+++ b/src/dev-app/select/select-demo.html
@@ -11,7 +11,7 @@
                       [class.demo-drinks-width-large]="drinksWidth === '400px'">
         <mat-label>Drink</mat-label>
         <mat-select [(ngModel)]="currentDrink" [required]="drinksRequired"
-          [disabled]="drinksDisabled" #drinkControl="ngModel">
+          [disabled]="drinksDisabled" #drinkControl="ngModel" [panelClass]="m3ForceSecondary ? 'demo-force-secondary' : ''">
           <mat-option [disabled]="drinksOptionsDisabled === 'all'">None</mat-option>
           @for (drink of drinks; track drink; let index = $index) {
             <mat-option [value]="drink.value"
@@ -59,6 +59,9 @@
           <option value="all">Disable All Options</option>
         </select>
       </p>
+      <p>
+        <mat-checkbox [(ngModel)]="m3ForceSecondary">Force secondary color for options in M3</mat-checkbox>
+      </p>
 
       <button mat-button (click)="currentDrink='water-2'">SET VALUE</button>
       <button mat-button (click)="drinksRequired=!drinksRequired">TOGGLE REQUIRED</button>
diff --git a/src/dev-app/select/select-demo.ts b/src/dev-app/select/select-demo.ts
index 61f2da697ebd..ffa817bd84f9 100644
--- a/src/dev-app/select/select-demo.ts
+++ b/src/dev-app/select/select-demo.ts
@@ -71,6 +71,7 @@ export class SelectDemo {
   pokemonTheme: ThemePalette = 'primary';
   compareByValue = true;
   selectFormControl = new FormControl('', Validators.required);
+  m3ForceSecondary = true;
 
   sandwichBread = '';
   sandwichMeat = '';
diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss
index eea80f08b06f..46fe1f812c52 100644
--- a/src/dev-app/theme-m3.scss
+++ b/src/dev-app/theme-m3.scss
@@ -83,10 +83,10 @@
   }
 
   .mat-accent {
-    @include color-variant-styles($theme, secondary);
+    @include color-variant-styles($theme, tertiary);
   }
   .mat-badge-accent {
-    @include mat.badge-color($theme, $color-variant: secondary);
+    @include mat.badge-color($theme, $color-variant: tertiary);
   }
 
   .mat-warn {
@@ -120,8 +120,7 @@ dev-app {
 $m3-base-config: (
   color: (
     primary: matx.$m3-green-palette,
-    secondary: matx.$m3-blue-palette,
-    tertiary: matx.$m3-yellow-palette,
+    tertiary: matx.$m3-violet-palette,
   ),
 );
 
@@ -174,6 +173,10 @@ html {
 
 @include color-variants-back-compat($light-theme);
 
+.demo-force-secondary {
+  @include mat.option-color($light-theme, $color-variant: secondary);
+}
+
 // Emit dark theme styles.
 .demo-unicorn-dark-theme {
   // TODO(mmalerba): choose colors from the theming API.
@@ -219,6 +222,10 @@ html {
   @include mat.tree-color($dark-theme);
 
   @include color-variants-back-compat($dark-theme);
+
+  .demo-force-secondary {
+    @include mat.option-color($dark-theme, $color-variant: secondary);
+  }
 }
 
 // Emit density styles for each scale.
diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss
index efb0c3ff415a..90772c3d6ec2 100644
--- a/src/material-experimental/_index.scss
+++ b/src/material-experimental/_index.scss
@@ -6,7 +6,8 @@
 
 // Token-based theming API
 @forward './theming/definition' show define-theme, define-colors, define-typography, define-density;
-@forward './theming/m3-palettes' as m3-* show $m3-red-palette, $m3-orange-palette,
-$m3-yellow-palette, $m3-green-palette, $m3-blue-palette, $m3-indigo-palette, $m3-violet-palette;
+@forward './theming/m3-palettes' as m3-* show $m3-red-palette, $m3-green-palette, $m3-blue-palette,
+  $m3-yellow-palette, $m3-cyan-palette, $m3-magenta-palette, $m3-orange-palette,
+  $m3-chartreuse-palette, $m3-azure-palette, $m3-violet-palette, $m3-rose-palette;
 
 // Additional public APIs for individual components
diff --git a/src/material-experimental/theming/_config-validation.scss b/src/material-experimental/theming/_config-validation.scss
index 102d89bd4cca..4dbf6a4dc58d 100644
--- a/src/material-experimental/theming/_config-validation.scss
+++ b/src/material-experimental/theming/_config-validation.scss
@@ -89,7 +89,7 @@
   @if $err {
     @return (#{'$config should be a color configuration object. Got:'} $config);
   }
-  $allowed: (theme-type, primary, secondary, tertiary);
+  $allowed: (theme-type, primary, tertiary);
   $err: mat.private-validate-allowed-values(map.keys($config or ()), $allowed...);
   @if $err {
     @return (
diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
index dd2b8ac74b36..d364606b0d5c 100644
--- a/src/material-experimental/theming/_custom-tokens.scss
+++ b/src/material-experimental/theming/_custom-tokens.scss
@@ -1058,7 +1058,7 @@
       focus-state-layer-color: mat.private-safe-color-change(
           map.get($systems, md-sys-color, secondary), $alpha: 0.2),
     ),
-    teriatiary: (
+    tertiary: (
       ripple-color: map.get($systems, md-sys-color, tertiary),
       hover-state-layer-color: mat.private-safe-color-change(
           map.get($systems, md-sys-color, tertiary), $alpha: 0.05),
diff --git a/src/material-experimental/theming/_definition.scss b/src/material-experimental/theming/_definition.scss
index 9d3e2a251e0c..03f47aa0b81a 100644
--- a/src/material-experimental/theming/_definition.scss
+++ b/src/material-experimental/theming/_definition.scss
@@ -38,24 +38,23 @@ $theme-version: 1;
   }
 
   $type: map.get($config, theme-type) or light;
-  $primary: map.get($config, primary) or m3-palettes.$purple-palette;
-  $secondary: map.get($config, secondary) or $primary;
-  $tertiary: map.get($config, tertiary) or $secondary;
+  $primary: map.get($config, primary) or m3-palettes.$violet-palette;
+  $tertiary: map.get($config, tertiary) or $primary;
 
   @return (
     $internals: (
       theme-version: $theme-version,
       theme-type: $type,
       palettes: (
-        primary: map.remove($primary, neutral, neutral-variant),
-        secondary: map.remove($secondary, neutral, neutral-variant),
-        tertiary: map.remove($tertiary, neutral, neutral-variant),
+        primary: map.remove($primary, neutral, neutral-variant, secondary),
+        secondary: map.get($primary, secondary),
+        tertiary: map.remove($tertiary, neutral, neutral-variant, secondary),
         neutral: map.get($primary, neutral),
         neutral-variant: map.get($primary, neutral-variant),
-        error: map.remove(m3-palettes.$red-palette, neutral, neutral-variant),
+        error: m3-palettes.$private-error-palette,
       ),
       color-tokens: m3-tokens.generate-color-tokens(
-          $type, $primary, $secondary, $tertiary, m3-palettes.$red-palette)
+          $type, $primary, $tertiary, m3-palettes.$private-error-palette)
     )
   );
 }
diff --git a/src/material-experimental/theming/_m3-palettes.scss b/src/material-experimental/theming/_m3-palettes.scss
index 60bf1a77422c..49b835ebba02 100644
--- a/src/material-experimental/theming/_m3-palettes.scss
+++ b/src/material-experimental/theming/_m3-palettes.scss
@@ -27,7 +27,155 @@
   @return $palette;
 }
 
-/// Blue color palette to be used as primary, secondary, or tertiary palette.
+/// Red color palette to be used as primary or tertiary palette.
+$red-palette: _patch-missing-hues((
+  0: #000000,
+  10: #410000,
+  20: #690100,
+  25: #7e0100,
+  30: #930100,
+  35: #a90100,
+  40: #c00100,
+  50: #ef0000,
+  60: #ff5540,
+  70: #ff8a78,
+  80: #ffb4a8,
+  90: #ffdad4,
+  95: #ffedea,
+  98: #fff8f6,
+  99: #fffbff,
+  100: #ffffff,
+  secondary: (
+    0: #000000,
+    10: #2c1512,
+    20: #442925,
+    25: #513430,
+    30: #5d3f3b,
+    35: #6a4b46,
+    40: #775651,
+    50: #926f69,
+    60: #ae8882,
+    70: #caa29c,
+    80: #e7bdb6,
+    90: #ffdad4,
+    95: #ffedea,
+    98: #fff8f6,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #201a19,
+    20: #362f2e,
+    25: #413a38,
+    30: #4d4544,
+    35: #59504f,
+    40: #655c5b,
+    50: #7f7573,
+    60: #998e8d,
+    70: #b4a9a7,
+    80: #d0c4c2,
+    90: #ede0dd,
+    95: #fbeeec,
+    98: #fff8f6,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #251917,
+    20: #3b2d2b,
+    25: #473836,
+    30: #534341,
+    35: #5f4f4c,
+    40: #6c5a58,
+    50: #857370,
+    60: #a08c89,
+    70: #bca7a3,
+    80: #d8c2be,
+    90: #f5ddda,
+    95: #ffedea,
+    98: #fff8f6,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+));
+
+/// Green color palette to be used as primary or tertiary palette.
+$green-palette: _patch-missing-hues((
+  0: #000000,
+  10: #002200,
+  20: #013a00,
+  25: #014600,
+  30: #015300,
+  35: #026100,
+  40: #026e00,
+  50: #038b00,
+  60: #03a800,
+  70: #03c700,
+  80: #02e600,
+  90: #77ff61,
+  95: #cbffb8,
+  98: #edffe1,
+  99: #f7ffee,
+  100: #ffffff,
+  secondary: (
+    0: #000000,
+    10: #121f0e,
+    20: #263422,
+    25: #313f2c,
+    30: #3c4b37,
+    35: #485642,
+    40: #54634d,
+    50: #6c7b65,
+    60: #86957e,
+    70: #a0b097,
+    80: #bbcbb2,
+    90: #d7e8cd,
+    95: #e5f6da,
+    98: #eeffe3,
+    99: #f7ffee,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #1a1c18,
+    20: #2f312d,
+    25: #3a3c38,
+    30: #454743,
+    35: #51534e,
+    40: #5d5f5a,
+    50: #767872,
+    60: #90918c,
+    70: #abaca6,
+    80: #c6c7c1,
+    90: #e2e3dc,
+    95: #f1f1eb,
+    98: #f9faf3,
+    99: #fcfdf6,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #181d15,
+    20: #2c3229,
+    25: #373d34,
+    30: #43483f,
+    35: #4e544a,
+    40: #5a6056,
+    50: #73796e,
+    60: #8d9387,
+    70: #a7ada1,
+    80: #c3c8bc,
+    90: #dfe4d7,
+    95: #edf3e5,
+    98: #f6fbee,
+    99: #f9fef1,
+    100: #ffffff,
+  ),
+));
+
+/// Blue color palette to be used as primary or tertiary palette.
 $blue-palette: _patch-missing-hues((
   0: #000000,
   10: #00006e,
@@ -45,6 +193,24 @@ $blue-palette: _patch-missing-hues((
   98: #fbf8ff,
   99: #fffbff,
   100: #ffffff,
+  secondary: (
+    0: #000000,
+    10: #191a2c,
+    20: #2e2f42,
+    25: #393a4d,
+    30: #444559,
+    35: #505165,
+    40: #5c5d72,
+    50: #75758b,
+    60: #8f8fa6,
+    70: #a9a9c1,
+    80: #c5c4dd,
+    90: #e1e0f9,
+    95: #f1efff,
+    98: #fbf8ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
   neutral: (
     0: #000000,
     10: #1b1b1f,
@@ -83,7 +249,81 @@ $blue-palette: _patch-missing-hues((
   ),
 ));
 
-/// Cyan color palette to be used as primary, secondary, or tertiary palette.
+/// Yellow color palette to be used as primary or tertiary palette.
+$yellow-palette: _patch-missing-hues((
+  0: #000000,
+  10: #1d1d00,
+  20: #323200,
+  25: #3e3e00,
+  30: #494900,
+  35: #555500,
+  40: #626200,
+  50: #7b7b00,
+  60: #969600,
+  70: #b1b100,
+  80: #cdcd00,
+  90: #eaea00,
+  95: #f9f900,
+  98: #fffeac,
+  99: #fffbff,
+  100: #ffffff,
+  secondary: (
+    0: #000000,
+    10: #1d1d06,
+    20: #323218,
+    25: #3d3d22,
+    30: #49482d,
+    35: #545438,
+    40: #606043,
+    50: #7a795a,
+    60: #949272,
+    70: #aead8b,
+    80: #cac8a5,
+    90: #e7e4bf,
+    95: #f5f3cd,
+    98: #fefbd5,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #1c1c17,
+    20: #31312b,
+    25: #3c3c35,
+    30: #484741,
+    35: #54524c,
+    40: #605e58,
+    50: #797770,
+    60: #939189,
+    70: #aeaba3,
+    80: #c9c6be,
+    90: #e6e2d9,
+    95: #f4f0e8,
+    98: #fdf9f0,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #1c1c11,
+    20: #313125,
+    25: #3d3c2f,
+    30: #48473a,
+    35: #545345,
+    40: #605f51,
+    50: #797869,
+    60: #939182,
+    70: #aeac9b,
+    80: #cac7b6,
+    90: #e6e3d1,
+    95: #f4f1df,
+    98: #fdfae7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+));
+
+/// Cyan color palette to be used as primary or tertiary palette.
 $cyan-palette: _patch-missing-hues((
   0: #000000,
   10: #002020,
@@ -101,6 +341,24 @@ $cyan-palette: _patch-missing-hues((
   98: #e2fffe,
   99: #f1fffe,
   100: #ffffff,
+  secondary: (
+    0: #000000,
+    10: #051f1f,
+    20: #1b3534,
+    25: #27403f,
+    30: #324b4b,
+    35: #3e5757,
+    40: #4a6363,
+    50: #627c7b,
+    60: #7b9695,
+    70: #95b0b0,
+    80: #b0cccb,
+    90: #cce8e7,
+    95: #daf6f5,
+    98: #e3fffe,
+    99: #f1fffe,
+    100: #ffffff,
+  ),
   neutral: (
     0: #000000,
     10: #191c1c,
@@ -139,63 +397,7 @@ $cyan-palette: _patch-missing-hues((
   ),
 ));
 
-/// Green color palette to be used as primary, secondary, or tertiary palette.
-$green-palette: _patch-missing-hues((
-  0: #000000,
-  10: #002200,
-  20: #013a00,
-  25: #014600,
-  30: #015300,
-  35: #026100,
-  40: #026e00,
-  50: #038b00,
-  60: #03a800,
-  70: #03c700,
-  80: #02e600,
-  90: #77ff61,
-  95: #cbffb8,
-  98: #edffe1,
-  99: #f7ffee,
-  100: #ffffff,
-  neutral: (
-    0: #000000,
-    10: #1a1c18,
-    20: #2f312d,
-    25: #3a3c38,
-    30: #454743,
-    35: #51534e,
-    40: #5d5f5a,
-    50: #767872,
-    60: #90918c,
-    70: #abaca6,
-    80: #c6c7c1,
-    90: #e2e3dc,
-    95: #f1f1eb,
-    98: #f9faf3,
-    99: #fcfdf6,
-    100: #ffffff,
-  ),
-  neutral-variant: (
-    0: #000000,
-    10: #181d15,
-    20: #2c3229,
-    25: #373d34,
-    30: #43483f,
-    35: #4e544a,
-    40: #5a6056,
-    50: #73796e,
-    60: #8d9387,
-    70: #a7ada1,
-    80: #c3c8bc,
-    90: #dfe4d7,
-    95: #edf3e5,
-    98: #f6fbee,
-    99: #f9fef1,
-    100: #ffffff,
-  ),
-));
-
-/// Magenta color palette to be used as primary, secondary, or tertiary palette.
+/// Magenta color palette to be used as primary or tertiary palette.
 $magenta-palette: _patch-missing-hues((
   0: #000000,
   10: #380038,
@@ -213,6 +415,24 @@ $magenta-palette: _patch-missing-hues((
   98: #fff7f9,
   99: #fffbff,
   100: #ffffff,
+  secondary: (
+    0: #000000,
+    10: #271624,
+    20: #3d2b3a,
+    25: #493545,
+    30: #554151,
+    35: #614c5d,
+    40: #6e5869,
+    50: #877082,
+    60: #a2899c,
+    70: #bea4b7,
+    80: #dabfd2,
+    90: #f7daef,
+    95: #ffebf8,
+    98: #fff7f9,
+    99: #fffbff,
+    100: #ffffff,
+  ),
   neutral: (
     0: #000000,
     10: #1e1a1d,
@@ -251,7 +471,7 @@ $magenta-palette: _patch-missing-hues((
   ),
 ));
 
-/// Orange color palette to be used as primary, secondary, or tertiary palette.
+/// Orange color palette to be used as primary or tertiary palette.
 $orange-palette: _patch-missing-hues((
   0: #000000,
   10: #311300,
@@ -269,6 +489,24 @@ $orange-palette: _patch-missing-hues((
   98: #fff8f5,
   99: #fffbff,
   100: #ffffff,
+  secondary: (
+    0: #000000,
+    10: #2b1708,
+    20: #422b1b,
+    25: #4f3625,
+    30: #5b4130,
+    35: #684c3b,
+    40: #755846,
+    50: #90715d,
+    60: #ab8a75,
+    70: #c8a48e,
+    80: #e5bfa8,
+    90: #ffdcc7,
+    95: #ffede4,
+    98: #fff8f5,
+    99: #fffbff,
+    100: #ffffff,
+  ),
   neutral: (
     0: #000000,
     10: #201a17,
@@ -307,8 +545,230 @@ $orange-palette: _patch-missing-hues((
   ),
 ));
 
-/// Purple color palette to be used as primary, secondary, or tertiary palette.
-$purple-palette: _patch-missing-hues((
+/// Chartreuse color palette to be used as primary or tertiary palette.
+$chartreuse-palette: _patch-missing-hues((
+  0: #000000,
+  10: #0b2000,
+  20: #173800,
+  25: #1e4400,
+  30: #245100,
+  35: #2b5e00,
+  40: #326b00,
+  50: #418700,
+  60: #50a400,
+  70: #60c100,
+  80: #70e000,
+  90: #82ff10,
+  95: #cfffa9,
+  98: #eeffdc,
+  99: #f8ffeb,
+  100: #ffffff,
+  secondary: (
+    0: #000000,
+    10: #141e0c,
+    20: #293420,
+    25: #333f2a,
+    30: #3f4a35,
+    35: #4a5640,
+    40: #56624b,
+    50: #6f7b62,
+    60: #88957b,
+    70: #a2b094,
+    80: #becbaf,
+    90: #dae7ca,
+    95: #e8f5d7,
+    98: #f0fee0,
+    99: #f8ffeb,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #1a1c18,
+    20: #2f312c,
+    25: #3a3c37,
+    30: #464742,
+    35: #52534e,
+    40: #5e5f5a,
+    50: #767872,
+    60: #90918b,
+    70: #abaca5,
+    80: #c7c7c0,
+    90: #e3e3dc,
+    95: #f1f1ea,
+    98: #fafaf2,
+    99: #fdfdf5,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #181d14,
+    20: #2d3228,
+    25: #383d33,
+    30: #44483e,
+    35: #4f5449,
+    40: #5b6055,
+    50: #74796d,
+    60: #8e9286,
+    70: #a8ada0,
+    80: #c4c8bb,
+    90: #e0e4d6,
+    95: #eef2e4,
+    98: #f7fbec,
+    99: #fafeef,
+    100: #ffffff,
+  ),
+));
+
+/// Spring Green color palette to be used as primary or tertiary palette.
+$spring-green-palette: _patch-missing-hues((
+  0: #000000,
+  10: #00210b,
+  20: #003917,
+  25: #00461e,
+  30: #005225,
+  35: #00602c,
+  40: #006d33,
+  50: #008942,
+  60: #00a751,
+  70: #00c561,
+  80: #00e472,
+  90: #63ff94,
+  95: #c4ffcb,
+  98: #eaffe9,
+  99: #f5fff2,
+  100: #ffffff,
+  secondary: (
+    0: #000000,
+    10: #0e1f12,
+    20: #233425,
+    25: #2e4030,
+    30: #394b3b,
+    35: #445746,
+    40: #506352,
+    50: #697c6a,
+    60: #829682,
+    70: #9cb19c,
+    80: #b7ccb7,
+    90: #d3e8d2,
+    95: #e1f6e0,
+    98: #eaffe9,
+    99: #f5fff2,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #191c19,
+    20: #2e312e,
+    25: #393c39,
+    30: #454744,
+    35: #51534f,
+    40: #5d5f5b,
+    50: #757873,
+    60: #8f918d,
+    70: #aaaca7,
+    80: #c5c7c2,
+    90: #e2e3de,
+    95: #f0f1ec,
+    98: #f9faf4,
+    99: #fcfdf7,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #161d17,
+    20: #2b322b,
+    25: #363d36,
+    30: #414941,
+    35: #4d544c,
+    40: #596058,
+    50: #717970,
+    60: #8b9389,
+    70: #a6ada4,
+    80: #c1c9be,
+    90: #dde5da,
+    95: #ebf3e8,
+    98: #f4fcf0,
+    99: #f7fef3,
+    100: #ffffff,
+  ),
+));
+
+/// Azure color palette to be used as primary or tertiary palette.
+$azure-palette: _patch-missing-hues((
+  0: #000000,
+  10: #001b3f,
+  20: #002f65,
+  25: #003a7a,
+  30: #00458f,
+  35: #0050a5,
+  40: #005cbb,
+  50: #0074e9,
+  60: #438fff,
+  70: #7cabff,
+  80: #abc7ff,
+  90: #d7e3ff,
+  95: #ecf0ff,
+  98: #f9f9ff,
+  99: #fdfbff,
+  100: #ffffff,
+  secondary: (
+    0: #000000,
+    10: #131c2b,
+    20: #283041,
+    25: #333c4d,
+    30: #3e4759,
+    35: #4a5365,
+    40: #565e71,
+    50: #6f778b,
+    60: #8891a5,
+    70: #a3abc0,
+    80: #bec6dc,
+    90: #dae2f9,
+    95: #ecf0ff,
+    98: #f9f9ff,
+    99: #fdfbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #1a1b1f,
+    20: #2f3033,
+    25: #3b3b3f,
+    30: #46464a,
+    35: #525256,
+    40: #5e5e62,
+    50: #77777a,
+    60: #919094,
+    70: #ababaf,
+    80: #c7c6ca,
+    90: #e3e2e6,
+    95: #f2f0f4,
+    98: #faf9fd,
+    99: #fdfbff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #181c22,
+    20: #2d3038,
+    25: #383b43,
+    30: #44474e,
+    35: #4f525a,
+    40: #5b5e66,
+    50: #74777f,
+    60: #8e9099,
+    70: #a9abb4,
+    80: #c4c6d0,
+    90: #e0e2ec,
+    95: #eff0fa,
+    98: #f9f9ff,
+    99: #fdfbff,
+    100: #ffffff,
+  ),
+));
+
+/// Violet color palette to be used as primary or tertiary palette.
+$violet-palette: _patch-missing-hues((
   0: #000000,
   10: #270057,
   20: #42008a,
@@ -325,6 +785,24 @@ $purple-palette: _patch-missing-hues((
   98: #fef7ff,
   99: #fffbff,
   100: #ffffff,
+  secondary: (
+    0: #000000,
+    10: #1f182a,
+    20: #352d40,
+    25: #40384c,
+    30: #4b4357,
+    35: #574f63,
+    40: #645b70,
+    50: #7d7389,
+    60: #978ca4,
+    70: #b2a7bf,
+    80: #cec2db,
+    90: #eadef7,
+    95: #f7edff,
+    98: #fef7ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
   neutral: (
     0: #000000,
     10: #1d1b1e,
@@ -363,114 +841,96 @@ $purple-palette: _patch-missing-hues((
   ),
 ));
 
-/// Red color palette to be used as primary, secondary, or tertiary palette.
-$red-palette: _patch-missing-hues((
+/// Rose color palette to be used as primary or tertiary palette.
+$rose-palette: _patch-missing-hues((
   0: #000000,
-  10: #410000,
-  20: #690100,
-  25: #7e0100,
-  30: #930100,
-  35: #a90100,
-  40: #c00100,
-  50: #ef0000,
-  60: #ff5540,
-  70: #ff8a78,
-  80: #ffb4a8,
-  90: #ffdad4,
-  95: #ffedea,
-  98: #fff8f6,
+  10: #3f001b,
+  20: #65002f,
+  25: #7a003a,
+  30: #8f0045,
+  35: #a40050,
+  40: #ba005c,
+  50: #e80074,
+  60: #ff4a8e,
+  70: #ff84a9,
+  80: #ffb1c5,
+  90: #ffd9e1,
+  95: #ffecef,
+  98: #fff8f8,
   99: #fffbff,
   100: #ffffff,
-  neutral: (
-    0: #000000,
-    10: #201a19,
-    20: #362f2e,
-    25: #413a38,
-    30: #4d4544,
-    35: #59504f,
-    40: #655c5b,
-    50: #7f7573,
-    60: #998e8d,
-    70: #b4a9a7,
-    80: #d0c4c2,
-    90: #ede0dd,
-    95: #fbeeec,
-    98: #fff8f6,
-    99: #fffbff,
-    100: #ffffff,
-  ),
-  neutral-variant: (
+  secondary: (
     0: #000000,
-    10: #251917,
-    20: #3b2d2b,
-    25: #473836,
-    30: #534341,
-    35: #5f4f4c,
-    40: #6c5a58,
-    50: #857370,
-    60: #a08c89,
-    70: #bca7a3,
-    80: #d8c2be,
-    90: #f5ddda,
-    95: #ffedea,
-    98: #fff8f6,
+    10: #2b151b,
+    20: #422930,
+    25: #4f343b,
+    30: #5b3f46,
+    35: #684b52,
+    40: #74565d,
+    50: #8f6f76,
+    60: #aa888f,
+    70: #c6a2aa,
+    80: #e3bdc5,
+    90: #ffd9e1,
+    95: #ffecef,
+    98: #fff8f8,
     99: #fffbff,
     100: #ffffff,
   ),
-));
-
-/// Yellow color palette to be used as primary, secondary, or tertiary palette.
-$yellow-palette: _patch-missing-hues((
-  0: #000000,
-  10: #1d1d00,
-  20: #323200,
-  25: #3e3e00,
-  30: #494900,
-  35: #555500,
-  40: #626200,
-  50: #7b7b00,
-  60: #969600,
-  70: #b1b100,
-  80: #cdcd00,
-  90: #eaea00,
-  95: #f9f900,
-  98: #fffeac,
-  99: #fffbff,
-  100: #ffffff,
   neutral: (
     0: #000000,
-    10: #1c1c17,
-    20: #31312b,
-    25: #3c3c35,
-    30: #484741,
-    35: #54524c,
-    40: #605e58,
-    50: #797770,
-    60: #939189,
-    70: #aeaba3,
-    80: #c9c6be,
-    90: #e6e2d9,
-    95: #f4f0e8,
-    98: #fdf9f0,
+    10: #201a1b,
+    20: #352f30,
+    25: #413a3b,
+    30: #4c4546,
+    35: #585052,
+    40: #655c5e,
+    50: #7e7576,
+    60: #988e90,
+    70: #b3a9aa,
+    80: #cfc4c5,
+    90: #ece0e1,
+    95: #faeeef,
+    98: #fff8f8,
     99: #fffbff,
     100: #ffffff,
   ),
   neutral-variant: (
     0: #000000,
-    10: #1c1c11,
-    20: #313125,
-    25: #3d3c2f,
-    30: #48473a,
-    35: #545345,
-    40: #605f51,
-    50: #797869,
-    60: #939182,
-    70: #aeac9b,
-    80: #cac7b6,
-    90: #e6e3d1,
-    95: #f4f1df,
-    98: #fdfae7,
+    10: #24191b,
+    20: #3a2d30,
+    25: #45383b,
+    30: #514346,
+    35: #5d4f52,
+    40: #6a5a5e,
+    50: #847376,
+    60: #9e8c90,
+    70: #baa7aa,
+    80: #d6c2c5,
+    90: #f3dde1,
+    95: #ffecef,
+    98: #fff8f8,
     99: #fffbff,
     100: #ffffff,
   ),
 ));
+
+/// Color palette to be used for error colors.
+$private-error-palette: (
+  0: #000000,
+  10: #410002,
+  20: #690005,
+  25: #7e0007,
+  30: #93000a,
+  35: #a80710,
+  40: #ba1a1a,
+  50: #de3730,
+  60: #ff5449,
+  70: #ff897d,
+  80: #ffb4ab,
+  90: #ffdad6,
+  95: #ffedea,
+  98: #fff8f7,
+  99: #fffbff,
+  100: #ffffff,
+);
diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss
index 33c9e8ac9d56..817ef4c4fdf5 100644
--- a/src/material-experimental/theming/_m3-tokens.scss
+++ b/src/material-experimental/theming/_m3-tokens.scss
@@ -114,11 +114,11 @@
 /// @param {Map} $tertiary The tertiary palette
 /// @param {Map} $error The error palette
 /// @return {Map} A set of `md-ref-palette` tokens
-@function _generate-ref-palette-tokens($primary, $secondary, $tertiary, $error) {
+@function _generate-ref-palette-tokens($primary, $tertiary, $error) {
   @return mat.private-merge-all(
       (black: #000, white: #fff),
       _generate-palette-tokens($primary, primary),
-      _generate-palette-tokens($secondary, secondary),
+      _generate-palette-tokens(map.get($primary, secondary), secondary),
       _generate-palette-tokens($tertiary, tertiary),
       _generate-palette-tokens(map.get($primary, neutral), neutral),
       _generate-palette-tokens(map.get($primary, neutral-variant), neutral-variant),
@@ -941,13 +941,12 @@
 /// Generates a set of namespaced color tokens for all components.
 /// @param {String} $type The type of theme system (light or dark)
 /// @param {Map} $primary The primary palette
-/// @param {Map} $secondary The secondary palette
 /// @param {Map} $tertiary The tertiary palette
 /// @param {Map} $error The error palette
 /// @return {Map} A map of namespaced color tokens
-@function generate-color-tokens($type, $primary, $secondary, $tertiary, $error) {
+@function generate-color-tokens($type, $primary, $tertiary, $error) {
   $ref: (
-    md-ref-palette: _generate-ref-palette-tokens($primary, $secondary, $tertiary, $error)
+    md-ref-palette: _generate-ref-palette-tokens($primary, $tertiary, $error)
   );
   $sys-color: if($type == dark,
     mdc-tokens.md-sys-color-values-dark($ref),
diff --git a/src/material/core/theming/tests/theming-definition-api.spec.ts b/src/material/core/theming/tests/theming-definition-api.spec.ts
index 93ee46da3afd..fc47dbc9be76 100644
--- a/src/material/core/theming/tests/theming-definition-api.spec.ts
+++ b/src/material/core/theming/tests/theming-definition-api.spec.ts
@@ -112,7 +112,6 @@ describe('theming definition api', () => {
           color: (
             theme-type: dark,
             primary: matx.$m3-yellow-palette,
-            secondary: matx.$m3-orange-palette,
             tertiary: matx.$m3-red-palette,
           )
         ));
@@ -131,10 +130,10 @@ describe('theming definition api', () => {
       const vars = getRootVars(css);
       expect(vars['token-surface']).toBe('#1c1c17');
       expect(vars['token-primary']).toBe('#cdcd00');
-      expect(vars['token-secondary']).toBe('#ffb787');
+      expect(vars['token-secondary']).toBe('#cac8a5');
       expect(vars['token-tertiary']).toBe('#ffb4a8');
       expect(vars['palette-primary']).toBe('#7b7b00');
-      expect(vars['palette-secondary']).toBe('#bc5d00');
+      expect(vars['palette-secondary']).toBe('#7a795a');
       expect(vars['palette-tertiary']).toBe('#ef0000');
       expect(vars['type']).toBe('dark');
     });