feat(material/core): add prebuilt themes based on M3

Adds four new prebuilt themes that are using Material Design 3.

Author: crisbeto

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/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 $< $@",
+)