fix(material-experimental/theming): Make color API back-cmpat styles available (#28526)

Author: mmalerba

src/dev-app/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web")
-load("//tools:defaults.bzl", "devmode_esbuild", "esbuild_config", "http_server", "ng_module", "sass_binary", "sass_library")
+load("//tools:defaults.bzl", "devmode_esbuild", "esbuild_config", "http_server", "ng_module", "sass_binary")
 load("//src/components-examples:config.bzl", "ALL_EXAMPLES")
 load("//tools/angular:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
 
@@ -105,32 +105,21 @@ devmode_esbuild(
     ],
 )
 
-sass_library(
-    name = "color-api-back-compat",
-    srcs = glob(["**/_*.scss"]),
-    deps = [
-        "//src/material:sass_lib",
-    ],
-)
-
 sass_binary(
     name = "theme",
     src = "theme.scss",
     deps = [
         "//src/material:sass_lib",
         "//src/material-experimental:sass_lib",
-        "//src/material/core:theming_scss_lib",
     ],
 )
 
 sass_binary(
     name = "theme_m3",
     src = "theme-m3.scss",
     deps = [
-        ":color-api-back-compat",
         "//src/material:sass_lib",
         "//src/material-experimental:sass_lib",
-        "//src/material/core:theming_scss_lib",
     ],
 )
 

src/dev-app/theme-m3.scss

@@ -1,6 +1,5 @@
 @use '@angular/material' as mat;
 @use '@angular/material-experimental' as matx;
-@use './color-api-back-compat';
 
 // Plus imports for other components in your app.
 
@@ -80,10 +79,10 @@ $density-scales: (-1, -2, -3, -4, minimum, maximum);
 
 // Enable back-compat CSS for color="..." API.
 .demo-color-api-back-compat {
-  @include color-api-back-compat.color-variants-back-compat($light-theme);
+  @include matx.color-variants-back-compat($light-theme);
 
   &.demo-unicorn-dark-theme {
-    @include color-api-back-compat.color-variants-back-compat($dark-theme);
+    @include matx.color-variants-back-compat($dark-theme);
   }
 }
 

src/material-experimental/_index.scss

@@ -9,5 +9,6 @@
 @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;
+@forward './theming/color-api-back-compat' show color-variants-back-compat;
 
 // Additional public APIs for individual components

src/dev-app/_color-api-back-compat.scss …ntal/theming/_color-api-back-compat.scsssrc/dev-app/_color-api-back-compat.scss renamed to src/material-experimental/theming/_color-api-back-compat.scss src/dev-app/_color-api-back-compat.scss renamed to src/material-experimental/theming/_color-api-back-compat.scss

@@ -1,7 +1,11 @@
 @use '@angular/material' as mat;
 
 @mixin color-variant-styles($theme, $color-variant) {
-  @include mat.option-color($theme, $color-variant: $color-variant);
+  // Some components use the secondary color rather than primary color for `.mat-primary`.
+  // Those components should use the $secondary-color-variant.
+  $secondary-color-variant: if($color-variant == primary, secondary, $color-variant);
+
+  @include mat.option-color($theme, $color-variant: $secondary-color-variant);
   @include mat.progress-spinner-color($theme, $color-variant: $color-variant);
   @include mat.pseudo-checkbox-color($theme, $color-variant: $color-variant);
   @include mat.stepper-color($theme, $color-variant: $color-variant);
@@ -52,7 +56,7 @@
   }
 
   &.mat-mdc-standard-chip {
-    @include mat.chips-color($theme, $color-variant: $color-variant);
+    @include mat.chips-color($theme, $color-variant: $secondary-color-variant);
   }
 
   .mdc-list-item__start,
@@ -70,8 +74,6 @@
   }
 }
 
-// TODO(mmalerba): Consider adding this as a back-compat API for users who want it, rather than just
-//  a demo thing.
 @mixin color-variants-back-compat($theme) {
   .mat-primary {
     @include color-variant-styles($theme, primary);