build: universal-app theme should use mdc-theming and mdc-typography mixins (#16994)

Instead of bringing in all theme and typography mixins manually, the dev-app
should use the mdc-theming and mdc-typography mixins.

Author: devversion

src/universal-app/BUILD.bazel

@@ -2,7 +2,7 @@ package(default_visibility = ["//visibility:public"])
 
 load("@build_bazel_rules_nodejs//:defs.bzl", "nodejs_test")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//:packages.bzl", "CDK_EXPERIMENTAL_TARGETS", "CDK_TARGETS", "MATERIAL_EXPERIMENTAL_SCSS_LIBS", "MATERIAL_EXPERIMENTAL_TARGETS", "MATERIAL_TARGETS")
+load("//:packages.bzl", "CDK_EXPERIMENTAL_TARGETS", "CDK_TARGETS", "MATERIAL_EXPERIMENTAL_TARGETS", "MATERIAL_TARGETS")
 load("//tools:defaults.bzl", "ng_module", "ts_library")
 
 ng_module(
@@ -42,8 +42,10 @@ sass_binary(
         "external/npm/node_modules",
     ],
     deps = [
+        "//src/material-experimental/mdc-theming:all_themes",
+        "//src/material-experimental/mdc-typography:all_typography",
         "//src/material/core:all_themes",
-    ] + MATERIAL_EXPERIMENTAL_SCSS_LIBS,
+    ],
 )
 
 nodejs_test(

src/universal-app/theme.scss

@@ -1,30 +1,14 @@
 @import '../material/core/theming/all-theme';
-@import '../material-experimental/mdc-button/mdc-button';
-@import '../material-experimental/mdc-card/mdc-card';
-@import '../material-experimental/mdc-checkbox/mdc-checkbox';
-@import '../material-experimental/mdc-chips/mdc-chips';
-@import '../material-experimental/mdc-helpers/mdc-helpers';
-@import '../material-experimental/mdc-menu/mdc-menu';
-@import '../material-experimental/mdc-radio/mdc-radio';
-@import '../material-experimental/mdc-slide-toggle/mdc-slide-toggle';
-@import '../material-experimental/mdc-tabs/mdc-tabs';
+@import '../material-experimental/mdc-theming/all-theme';
+@import '../material-experimental/mdc-typography/all-typography';
 
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // **Be sure that you only ever include this mixin once!**
 @include mat-core();
-@include mat-button-typography-mdc(mat-typography-config());
-@include mat-icon-button-typography-mdc(mat-typography-config());
-@include mat-fab-typography-mdc(mat-typography-config());
-@include mat-card-typography-mdc(mat-typography-config());
-@include mat-checkbox-typography-mdc(mat-typography-config());
-@include mat-chips-typography-mdc(mat-typography-config());
-@include mat-menu-typography-mdc(mat-typography-config());
-@include mat-radio-typography-mdc(mat-typography-config());
-@include mat-slide-toggle-typography-mdc(mat-typography-config());
-@include mat-tabs-typography-mdc(mat-typography-config());
+@include angular-material-typography-mdc();
 
 // Define the default theme (same as the example above).
 $candy-app-primary: mat-palette($mat-indigo);
@@ -33,13 +17,4 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
 
 // Include the default theme styles.
 @include angular-material-theme($candy-app-theme);
-@include mat-button-theme-mdc($candy-app-theme);
-@include mat-icon-button-theme-mdc($candy-app-theme);
-@include mat-fab-theme-mdc($candy-app-theme);
-@include mat-card-theme-mdc($candy-app-theme);
-@include mat-checkbox-theme-mdc($candy-app-theme);
-@include mat-chips-theme-mdc($candy-app-theme);
-@include mat-menu-theme-mdc($candy-app-theme);
-@include mat-radio-theme-mdc($candy-app-theme);
-@include mat-slide-toggle-theme-mdc($candy-app-theme);
-@include mat-tabs-theme-mdc($candy-app-theme);
+@include angular-material-theme-mdc($candy-app-theme);