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.

Author: mmalerba

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>

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 = '';

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.

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

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 (

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),

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