refactor(material-experimental/mdc-core): expose new @use-based Sass API (#22338)

Implements an `_index.scss` file in `material-experimental` similar to the one in `material`.

Also fixes a couple of theme files that weren't named correctly and some mixins whose prefixes weren't removed by the migration script.

Author: crisbeto

src/dev-app/BUILD.bazel

@@ -108,12 +108,7 @@ sass_binary(
     ],
     deps = [
         "//src/material:theming_bundle",
-        "//src/material-experimental/column-resize:column_resize_scss_lib",
-        "//src/material-experimental/mdc-color:all_color",
-        "//src/material-experimental/mdc-density:all_density",
-        "//src/material-experimental/mdc-theming:all_themes",
-        "//src/material-experimental/mdc-typography:all_typography",
-        "//src/material-experimental/popover-edit:popover_edit_scss_lib",
+        "//src/material-experimental:theming_bundle",
         "//src/material/core:theming_scss_lib",
     ],
 )

src/dev-app/theme.scss

@@ -1,13 +1,7 @@
 @use '../material' as mat;
-@use '../material/core/density/private/all-density' as private-all-density;
-@use '../material-experimental/column-resize/column-resize';
-@use '../material-experimental/mdc-helpers/focus-indicators-theme' as mdc-focus-indicators-theme;
-@use '../material-experimental/mdc-helpers/focus-indicators' as mdc-focus-indicators;
-@use '../material-experimental/mdc-color/all-color' as mdc-all-color;
-@use '../material-experimental/mdc-theming/all-theme' as mdc-all-theme;
-@use '../material-experimental/mdc-density/all-density' as mdc-all-density;
+@use '../material-experimental' as experimental;
 @use '../material-experimental/mdc-slider/slider-theme' as mdc-slider-theme;
-@use '../material-experimental/popover-edit/popover-edit';
+@use '../material/core/density/private/all-density' as private-all-density;
 
 // Plus imports for other components in your app.
 
@@ -33,20 +27,20 @@ $candy-app-theme: mat.define-light-theme((
 
 // Include the default theme styles.
 @include mat.all-component-themes($candy-app-theme);
-@include mdc-all-theme.all-mdc-component-themes($candy-app-theme);
-@include column-resize.theme($candy-app-theme);
-@include popover-edit.theme($candy-app-theme);
+@include experimental.all-mdc-component-themes($candy-app-theme);
+@include experimental.column-resize-theme($candy-app-theme);
+@include experimental.popover-edit-theme($candy-app-theme);
 // We add this in manually for now, because it isn't included in `all-mdc-component-themes`.
 @include mdc-slider-theme.theme($candy-app-theme);
 
 .demo-strong-focus {
   // Include base styles for strong focus indicators.
   @include mat.strong-focus-indicators();
-  @include mdc-focus-indicators.strong-focus-indicators();
+  @include experimental.mdc-strong-focus-indicators();
 
   // Include the default theme for focus indicators.
   @include mat.strong-focus-indicators-theme($candy-app-theme);
-  @include mdc-focus-indicators-theme.theme($candy-app-theme);
+  @include experimental.mdc-strong-focus-indicators-theme($candy-app-theme);
 }
 
 // Include the alternative theme styles inside of a block with a CSS class. You can make this
@@ -62,16 +56,16 @@ $candy-app-theme: mat.define-light-theme((
 
   // Include the dark theme color styles.
   @include mat.all-component-colors($dark-colors);
-  @include mdc-all-color.all-mdc-component-colors($dark-colors);
-  @include column-resize.color($dark-colors);
-  @include popover-edit.color($dark-colors);
+  @include experimental.all-mdc-component-colors($dark-colors);
+  @include experimental.column-resize-color($dark-colors);
+  @include experimental.popover-edit-color($dark-colors);
   // We add this in manually for now, because it isn't included in `all-mdc-component-themes`.
   @include mdc-slider-theme.color($dark-colors);
 
   // Include the dark theme colors for focus indicators.
   .demo-strong-focus {
     @include mat.strong-focus-indicators-color($dark-colors);
-    @include mdc-focus-indicators-theme.color($dark-colors);
+    @include experimental.mdc-strong-focus-indicators-color($dark-colors);
   }
 }
 
@@ -82,6 +76,6 @@ $density-scales: (-1, -2, minimum, maximum);
 @each $density in $density-scales {
   .demo-density-#{$density} {
     @include private-all-density.all-component-densities($density);
-    @include mdc-all-density.all-mdc-component-densities($density);
+    @include experimental.all-mdc-component-densities($density);
   }
 }

src/e2e-app/BUILD.bazel

@@ -80,8 +80,7 @@ sass_binary(
     ],
     deps = [
         "//src/material:theming_bundle",
-        "//src/material-experimental/mdc-theming:all_themes",
-        "//src/material-experimental/mdc-typography:all_typography",
+        "//src/material-experimental:theming_bundle",
         "//src/material/core:theming_scss_lib",
     ],
 )

src/e2e-app/theme.scss

@@ -1,14 +1,13 @@
 @use '../material' as mat;
-@use '../material-experimental/mdc-theming/all-theme' as mdc-all-theme;
-@use '../material-experimental/mdc-typography/all-typography' as mdc-all-typography;
+@use '../material-experimental' as experimental;
 
 // 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 mdc-all-typography.all-mdc-component-typographies();
+@include experimental.all-mdc-component-typographies();
 
 // Define the default theme (same as the example above).
 $candy-app-primary: mat.define-palette(mat.$indigo-palette);
@@ -17,4 +16,4 @@ $candy-app-theme: mat.define-light-theme($candy-app-primary, $candy-app-accent);
 
 // Include the default theme styles.
 @include mat.all-component-themes($candy-app-theme);
-@include mdc-all-theme.all-mdc-component-themes($candy-app-theme);
+@include experimental.all-mdc-component-themes($candy-app-theme);

src/material-experimental/BUILD.bazel

@@ -4,7 +4,7 @@ load(
     "MATERIAL_EXPERIMENTAL_TARGETS",
     "MATERIAL_EXPERIMENTAL_TESTING_TARGETS",
 )
-load("//tools:defaults.bzl", "ng_package", "ts_library")
+load("//tools:defaults.bzl", "ng_package", "sass_library", "ts_library")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -20,16 +20,30 @@ ts_library(
     deps = ["@npm//@angular/core"],
 )
 
-ng_package(
-    name = "npm_package",
-    srcs = ["package.json"],
-    data = MATERIAL_EXPERIMENTAL_SCSS_LIBS + [
+sass_library(
+    name = "theming_scss_lib",
+    srcs = MATERIAL_EXPERIMENTAL_SCSS_LIBS + [
         "//src/material-experimental/mdc-color",
         "//src/material-experimental/mdc-density",
         "//src/material-experimental/mdc-helpers",
         "//src/material-experimental/mdc-theming",
         "//src/material-experimental/mdc-typography",
     ],
+)
+
+sass_library(
+    name = "theming_bundle",
+    srcs = ["_index.scss"],
+    deps = [":theming_scss_lib"],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = ["package.json"],
+    data = [
+        ":theming_bundle",
+        ":theming_scss_lib",
+    ],
     entry_point = ":public-api.ts",
     tags = ["release-package"],
     deps = MATERIAL_EXPERIMENTAL_TARGETS + MATERIAL_EXPERIMENTAL_TESTING_TARGETS,

src/material-experimental/_index.scss

@@ -0,0 +1,65 @@
+// Structural
+@forward './mdc-helpers/focus-indicators' as mdc-* show mdc-strong-focus-indicators;
+
+// Theme bundles
+@forward './mdc-theming/all-theme' show all-mdc-component-themes;
+@forward './mdc-color/all-color' show all-mdc-component-colors;
+@forward './mdc-typography/all-typography' show all-mdc-component-typographies,
+  define-mdc-typography-config;
+@forward './mdc-density/all-density' show all-mdc-component-densities;
+
+// Component themes
+@forward './column-resize/column-resize-theme' as column-resize-* show column-resize-color,
+  column-resize-typography, column-resize-density, column-resize-theme;
+@forward './popover-edit/popover-edit-theme' as popover-edit-* show popover-edit-color,
+  popover-edit-typography, popover-edit-density, popover-edit-theme;
+
+// MDC-related themes
+@forward './mdc-core/core-theme' as mdc-core-* show mdc-core-theme;
+@forward './mdc-helpers/focus-indicators-theme' as mdc-strong-focus-indicators-* show
+  mdc-strong-focus-indicators-color, mdc-strong-focus-indicators-theme;
+@forward './mdc-core/option/option-theme' as mdc-option-* show mdc-option-color,
+  mdc-option-typography, mdc-option-density, mdc-option-theme;
+@forward './mdc-core/option/optgroup-theme' as mdc-optgroup-* show mdc-optgroup-color,
+  mdc-optgroup-typography, mdc-optgroup-density, mdc-optgroup-theme;
+@forward './mdc-autocomplete/autocomplete-theme' as mdc-autocomplete-* show mdc-autocomplete-color,
+  mdc-autocomplete-typography, mdc-autocomplete-density, mdc-autocomplete-theme;
+@forward './mdc-button/button-theme' as mdc-button-* show mdc-button-color, mdc-button-typography,
+  mdc-button-density, mdc-button-theme;
+@forward './mdc-card/card-theme' as mdc-card-* show mdc-card-color, mdc-card-typography,
+  mdc-card-density, mdc-card-theme;
+@forward './mdc-checkbox/checkbox-theme' as mdc-checkbox-* show mdc-checkbox-color,
+  mdc-checkbox-typography, mdc-checkbox-density, mdc-checkbox-theme;
+@forward './mdc-chips/chips-theme' as mdc-chips-* show mdc-chips-color, mdc-chips-typography,
+  mdc-chips-density, mdc-chips-theme;
+@forward './mdc-dialog/dialog-theme' as mdc-dialog-* show mdc-dialog-color, mdc-dialog-typography,
+  mdc-dialog-density, mdc-dialog-theme;
+@forward './mdc-form-field/form-field-theme' as mdc-form-field-* show mdc-form-field-color,
+  mdc-form-field-typography, mdc-form-field-density, mdc-form-field-theme;
+@forward './mdc-input/input-theme' as mdc-input-* show mdc-input-color, mdc-input-typography,
+  mdc-input-density, mdc-input-theme;
+@forward './mdc-list/list-theme' as mdc-list-* show mdc-list-color, mdc-list-typography,
+  mdc-list-density, mdc-list-theme;
+@forward './mdc-menu/menu-theme' as mdc-menu-* show mdc-menu-color, mdc-menu-typography,
+  mdc-menu-density, mdc-menu-theme;
+@forward './mdc-paginator/paginator-theme' as mdc-paginator-* show mdc-paginator-color,
+  mdc-paginator-typography, mdc-paginator-density, mdc-paginator-theme;
+@forward './mdc-progress-bar/progress-bar-theme' as mdc-progress-bar-* show mdc-progress-bar-color,
+  mdc-progress-bar-typography, mdc-progress-bar-density, mdc-progress-bar-theme;
+@forward './mdc-progress-spinner/progress-spinner-theme' as mdc-progress-spinner-* show
+  mdc-progress-spinner-color, mdc-progress-spinner-typography, mdc-progress-spinner-density,
+  mdc-progress-spinner-theme;
+@forward './mdc-radio/radio-theme' as mdc-radio-* show mdc-radio-color, mdc-radio-typography,
+  mdc-radio-density, mdc-radio-theme;
+@forward './mdc-select/select-theme' as mdc-select-* show mdc-select-color, mdc-select-typography,
+  mdc-select-density, mdc-select-theme;
+@forward './mdc-slide-toggle/slide-toggle-theme' as mdc-slide-toggle-* show mdc-slide-toggle-color,
+  mdc-slide-toggle-typography, mdc-slide-toggle-density, mdc-slide-toggle-theme;
+@forward './mdc-snack-bar/snack-bar-theme' as mdc-snack-bar-* show mdc-snack-bar-color,
+  mdc-snack-bar-typography, mdc-snack-bar-density, mdc-snack-bar-theme;
+@forward './mdc-table/table-theme' as mdc-table-* show mdc-table-color, mdc-table-typography,
+  mdc-table-density, mdc-table-theme;
+@forward './mdc-tabs/tabs-theme' as mdc-tabs-* show mdc-tabs-color, mdc-tabs-typography,
+  mdc-tabs-density, mdc-tabs-theme;
+@forward './mdc-tooltip/tooltip-theme' as mdc-tooltip-* show mdc-tooltip-color,
+  mdc-tooltip-typography, mdc-tooltip-density, mdc-tooltip-theme;

src/material-experimental/column-resize/_column-resize.scss renamed to src/material-experimental/column-resize/_column-resize-theme.scss

@@ -13,6 +13,8 @@
   $resizable-hover-divider: theming.get-color-from-palette($primary, 200);
   $resizable-active-divider: theming.get-color-from-palette($primary, 500);
 
+  // TODO: these styles don't really belong in the `color` part of the theme.
+  // We should figure out a better place for them.
   // Required for resizing to work properly.
   .mat-column-resize-table.cdk-column-resize-with-resized-column {
     table-layout: fixed;

src/material-experimental/column-resize/_column-resize.import.scss

@@ -1,7 +1,7 @@
 @forward '../../material/core/style/variables.import';
 @forward '../../material/core/theming/theming.import';
 @forward '../../material/core/style/vendor-prefixes.import';
-@forward 'column-resize' as mat-column-resize-*;
+@forward 'column-resize-theme' as mat-column-resize-*;
 
 @import '../../material/core/style/variables';
 @import '../../material/core/style/vendor-prefixes';

src/material-experimental/mdc-core/_core-theme.scss

@@ -9,7 +9,7 @@
   // there won't be multiple warnings. e.g. if `mat-mdc-core-theme` reports a warning, then
   // the imported themes (such as `mat-ripple-theme`) should not report again.
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-core') {
-    @include option-theme.option-theme($theme);
+    @include option-theme.theme($theme);
     @include optgroup-theme.theme($theme);
   }
 }

src/material-experimental/mdc-core/option/_optgroup-theme.scss

@@ -9,7 +9,7 @@
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-optgroup-label {
       // Since this will usually be rendered in an overlay,
-      // we have explicitly set the default color.
+      // we have to explicitly set the default color.
       @include mdc-theme.prop(color, text-primary-on-background);
       @include mdc-list.deprecated-item-disabled-text-color(
         mdc-list.$deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query);