M3 prebuilt themes

src/material-experimental/theming/_color-api-back-compat.scss

@@ -1,75 +1,85 @@
 @use '@angular/material' as mat;
 
+// We want to emit only the overrides, because the backwards compatibility styles are usually
+// emitted after all the tokens have been included once already. This allows us to save ~50kb
+// from the bundle.
+$_overrides-only: true;
+
 @mixin color-variant-styles($theme, $color-variant) {
+  $primary-options: (color-variant: $color-variant, emit-overrides-only: $_overrides-only);
+
   // 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);
+  $secondary-options: (
+    color-variant: if($color-variant == primary, secondary, $color-variant),
+    emit-overrides-only: $_overrides-only
+  );
 
-  @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);
+  @include mat.option-color($theme, $secondary-options...);
+  @include mat.progress-spinner-color($theme, $primary-options...);
+  @include mat.pseudo-checkbox-color($theme, $primary-options...);
+  @include mat.stepper-color($theme, $primary-options...);
 
   &.mat-icon {
-    @include mat.icon-color($theme, $color-variant: $color-variant);
+    @include mat.icon-color($theme, $primary-options...);
   }
 
   &.mat-mdc-checkbox {
-    @include mat.checkbox-color($theme, $color-variant: $color-variant);
+    @include mat.checkbox-color($theme, $primary-options...);
   }
 
   &.mat-mdc-slider {
-    @include mat.slider-color($theme, $color-variant: $color-variant);
+    @include mat.slider-color($theme, $primary-options...);
   }
 
   &.mat-mdc-tab-group,
   &.mat-mdc-tab-nav-bar {
-    @include mat.tabs-color($theme, $color-variant: $color-variant);
+    @include mat.tabs-color($theme, $primary-options...);
   }
 
   &.mat-mdc-slide-toggle {
-    @include mat.slide-toggle-color($theme, $color-variant: $color-variant);
+    @include mat.slide-toggle-color($theme, $primary-options...);
   }
 
   &.mat-mdc-form-field {
-    @include mat.select-color($theme, $color-variant: $color-variant);
+    @include mat.select-color($theme, $primary-options...);
   }
 
   &.mat-mdc-radio-button {
-    @include mat.radio-color($theme, $color-variant: $color-variant);
+    @include mat.radio-color($theme, $primary-options...);
   }
 
   &.mat-mdc-progress-bar {
-    @include mat.progress-bar-color($theme, $color-variant: $color-variant);
+    @include mat.progress-bar-color($theme, $primary-options...);
   }
 
   &.mat-mdc-form-field {
-    @include mat.form-field-color($theme, $color-variant: $color-variant);
+    @include mat.form-field-color($theme, $primary-options...);
   }
 
   &.mat-datepicker-content {
-    @include mat.datepicker-color($theme, $color-variant: $color-variant);
+    @include mat.datepicker-color($theme, $primary-options...);
   }
 
   &.mat-mdc-button-base {
-    @include mat.button-color($theme, $color-variant: $color-variant);
+    @include mat.button-color($theme, $primary-options...);
   }
 
   &.mat-mdc-standard-chip {
-    @include mat.chips-color($theme, $color-variant: $secondary-color-variant);
+    @include mat.chips-color($theme, $secondary-options...);
   }
 
   .mdc-list-item__start,
   .mdc-list-item__end {
-    @include mat.checkbox-color($theme, $color-variant: $color-variant);
-    @include mat.radio-color($theme, $color-variant: $color-variant);
+    @include mat.checkbox-color($theme, $primary-options...);
+    @include mat.radio-color($theme, $primary-options...);
   }
 
   // M3 dropped support for warn/error color FABs.
   @if $color-variant != error {
     &.mat-mdc-fab,
     &.mat-mdc-mini-fab {
-      @include mat.fab-color($theme, $color-variant: $color-variant);
+      @include mat.fab-color($theme, $primary-options...);
     }
   }
 }
@@ -79,20 +89,23 @@
     @include color-variant-styles($theme, primary);
   }
   .mat-badge {
-    @include mat.badge-color($theme, $color-variant: primary);
+    @include mat.badge-color($theme, $color-variant: primary,
+      $emit-overrides-only: $_overrides-only);
   }
 
   .mat-accent {
     @include color-variant-styles($theme, tertiary);
   }
   .mat-badge-accent {
-    @include mat.badge-color($theme, $color-variant: tertiary);
+    @include mat.badge-color($theme, $color-variant: tertiary,
+      $emit-overrides-only: $_overrides-only);
   }
 
   .mat-warn {
     @include color-variant-styles($theme, error);
   }
   .mat-badge-warn {
-    @include mat.badge-color($theme, $color-variant: error);
+    @include mat.badge-color($theme, $color-variant: error,
+      $emit-overrides-only: $_overrides-only);
   }
 }

src/material/BUILD.bazel

@@ -50,10 +50,14 @@ ng_package(
         ":package_json",
         ":sass_lib",
         "//src/material/core:theming_scss_lib",
+        "//src/material/prebuilt-themes:azure-blue",
+        "//src/material/prebuilt-themes:cyan-orange",
         "//src/material/prebuilt-themes:deeppurple-amber",
         "//src/material/prebuilt-themes:indigo-pink",
+        "//src/material/prebuilt-themes:magenta-violet",
         "//src/material/prebuilt-themes:pink-bluegrey",
         "//src/material/prebuilt-themes:purple-green",
+        "//src/material/prebuilt-themes:rose-red",
     ] + MATERIAL_SCSS_LIBS,
     nested_packages = ["//src/material/schematics:npm_package"],
     tags = ["release-package"],

src/material/core/BUILD.bazel

@@ -95,6 +95,44 @@ sass_binary(
     deps = [":core_scss_lib"],
 )
 
+# M3 themes
+sass_binary(
+    name = "azure_blue_prebuilt",
+    src = "theming/prebuilt/azure-blue.scss",
+    deps = [
+        ":theming_scss_lib",
+        "//src/material-experimental:sass_lib",
+    ],
+)
+
+sass_binary(
+    name = "rose_red_prebuilt",
+    src = "theming/prebuilt/rose-red.scss",
+    deps = [
+        ":theming_scss_lib",
+        "//src/material-experimental:sass_lib",
+    ],
+)
+
+sass_binary(
+    name = "cyan_orange_prebuilt",
+    src = "theming/prebuilt/cyan-orange.scss",
+    deps = [
+        ":theming_scss_lib",
+        "//src/material-experimental:sass_lib",
+    ],
+)
+
+sass_binary(
+    name = "magenta_violet_prebuilt",
+    src = "theming/prebuilt/magenta-violet.scss",
+    deps = [
+        ":theming_scss_lib",
+        "//src/material-experimental:sass_lib",
+    ],
+)
+
+# Legacy M2 themes
 sass_binary(
     name = "indigo_pink_prebuilt",
     src = "theming/prebuilt/indigo-pink.scss",

src/material/core/theming/prebuilt/azure-blue.scss

@@ -0,0 +1,24 @@
+@use '@angular/material-experimental' as matx;
+@use '../all-theme';
+@use '../../core';
+@use '../../typography/typography';
+
+@include core.core();
+
+$theme: matx.define-theme((
+  color: (
+    theme-type: light,
+    primary: matx.$m3-azure-palette,
+    tertiary: matx.$m3-blue-palette,
+  ),
+  density: (
+    scale: 0,
+  )
+));
+
+html {
+  @include all-theme.all-component-themes($theme);
+}
+
+@include matx.color-variants-back-compat($theme);
+@include typography.typography-hierarchy($theme);

src/material/core/theming/prebuilt/cyan-orange.scss

@@ -0,0 +1,24 @@
+@use '@angular/material-experimental' as matx;
+@use '../all-theme';
+@use '../../core';
+@use '../../typography/typography';
+
+@include core.core();
+
+$theme: matx.define-theme((
+  color: (
+    theme-type: dark,
+    primary: matx.$m3-cyan-palette,
+    tertiary: matx.$m3-orange-palette,
+  ),
+  density: (
+    scale: 0,
+  )
+));
+
+html {
+  @include all-theme.all-component-themes($theme);
+}
+
+@include matx.color-variants-back-compat($theme);
+@include typography.typography-hierarchy($theme);

src/material/core/theming/prebuilt/magenta-violet.scss

@@ -0,0 +1,24 @@
+@use '@angular/material-experimental' as matx;
+@use '../all-theme';
+@use '../../core';
+@use '../../typography/typography';
+
+@include core.core();
+
+$theme: matx.define-theme((
+  color: (
+    theme-type: dark,
+    primary: matx.$m3-magenta-palette,
+    tertiary: matx.$m3-violet-palette,
+  ),
+  density: (
+    scale: 0,
+  )
+));
+
+html {
+  @include all-theme.all-component-themes($theme);
+}
+
+@include matx.color-variants-back-compat($theme);
+@include typography.typography-hierarchy($theme);

src/material/core/theming/prebuilt/rose-red.scss

@@ -0,0 +1,24 @@
+@use '@angular/material-experimental' as matx;
+@use '../all-theme';
+@use '../../core';
+@use '../../typography/typography';
+
+@include core.core();
+
+$theme: matx.define-theme((
+  color: (
+    theme-type: light,
+    primary: matx.$m3-rose-palette,
+    tertiary: matx.$m3-red-palette,
+  ),
+  density: (
+    scale: 0,
+  )
+));
+
+html {
+  @include all-theme.all-component-themes($theme);
+}
+
+@include matx.color-variants-back-compat($theme);
+@include typography.typography-hierarchy($theme);

src/material/core/tokens/_token-utils.scss

@@ -185,16 +185,19 @@ $_component-prefix: null;
 /// @param {List} $prefix The component prefix to get the token values for.
 /// @param {ArgList} Any additional options
 ///   Currently the additional supported options are:
-//     - $color-variant (The color variant to use for the component)
+//     - $color-variant - The color variant to use for the component
+//     - $emit-overrides-only - Whether to emit *only* the overrides for the
+//                              specific color variant, or all color styles. Defaults to false.
 /// @throws If given options are invalid
 /// @return {Map} The token values for the requested component.
 @function get-tokens-for($tokens, $prefix, $options...) {
-  $options: sass-utils.validate-keyword-args($options, (color-variant));
+  $options: sass-utils.validate-keyword-args($options, (color-variant, emit-overrides-only));
   @if $tokens == () {
     @return ();
   }
   $values: map.get($tokens, $prefix);
   $color-variant: map.get($options, color-variant);
+  $emit-overrides-only: map.get($options, emit-overrides-only);
   @if $color-variant == null {
     @return $values;
   }
@@ -204,5 +207,5 @@ $_component-prefix: null;
       _supported-color-variants($tokens, $prefix)
     }#{'.'};
   }
-  @return map.merge($values, $overrides);
+  @return if($emit-overrides-only, $overrides, map.merge($values, $overrides));
 }

src/material/package-base.json

@@ -34,6 +34,18 @@
     "./prebuilt-themes/purple-green.css": {
       "style": "./prebuilt-themes/purple-green.css"
     },
+    "./prebuilt-themes/azure-blue.css": {
+      "style": "./prebuilt-themes/azure-blue.css"
+    },
+    "./prebuilt-themes/rose-red.css": {
+      "style": "./prebuilt-themes/rose-red.css"
+    },
+    "./prebuilt-themes/cyan-orange.css": {
+      "style": "./prebuilt-themes/cyan-orange.css"
+    },
+    "./prebuilt-themes/magenta-violet.css": {
+      "style": "./prebuilt-themes/magenta-violet.css"
+    },
     "./prebuilt-themes/*": {
       "style": "./prebuilt-themes/*.css"
     }

src/material/prebuilt-themes/BUILD.bazel

@@ -34,3 +34,31 @@ genrule(
     outs = ["purple-green.css"],
     cmd = "cp $< $@",
 )
+
+genrule(
+    name = "azure-blue",
+    srcs = ["//src/material/core:theming/prebuilt/azure-blue.css"],
+    outs = ["azure-blue.css"],
+    cmd = "cp $< $@",
+)
+
+genrule(
+    name = "rose-red",
+    srcs = ["//src/material/core:theming/prebuilt/rose-red.css"],
+    outs = ["rose-red.css"],
+    cmd = "cp $< $@",
+)
+
+genrule(
+    name = "cyan-orange",
+    srcs = ["//src/material/core:theming/prebuilt/cyan-orange.css"],
+    outs = ["cyan-orange.css"],
+    cmd = "cp $< $@",
+)
+
+genrule(
+    name = "magenta-violet",
+    srcs = ["//src/material/core:theming/prebuilt/magenta-violet.css"],
+    outs = ["magenta-violet.css"],
+    cmd = "cp $< $@",
+)