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

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 → 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);

src/material-experimental/mdc-core/option/_option-theme.import.scss

@@ -1,7 +1,7 @@
 @forward '../../../material/core/theming/theming.import';
 @forward '../../mdc-helpers/mdc-helpers.import';
 @forward '../../mdc-helpers/mdc-helpers';
-@forward 'option-theme' as mat-mdc-*;
+@forward 'option-theme' as mat-mdc-option-*;
 
 @import '../../mdc-helpers/mdc-helpers';
 @import '../../../material/core/theming/theming';

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

@@ -8,7 +8,7 @@
 @use '../../mdc-helpers/mdc-helpers';
 @use '../../../material/core/theming/theming';
 
-@mixin option-color($config-or-theme) {
+@mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
@@ -53,7 +53,7 @@
   }
 }
 
-@mixin option-typography($config-or-theme) {
+@mixin typography($config-or-theme) {
   $config: theming.get-typography-config($config-or-theme);
 
   @include mdc-helpers.mat-using-mdc-typography($config) {
@@ -65,25 +65,25 @@
   }
 }
 
-@mixin option-density($config-or-theme) {
+@mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
 }
 
-@mixin option-theme($theme-or-color-config) {
+@mixin theme($theme-or-color-config) {
   $theme: theming.private-legacy-get-theme($theme-or-color-config);
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-option') {
     $color: theming.get-color-config($theme);
     $density: theming.get-density-config($theme);
     $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include option-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include option-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include option-typography($typography);
+      @include typography($typography);
     }
   }
 }

src/material-experimental/mdc-helpers/_mdc-helpers.scss

@@ -130,7 +130,7 @@ $mat-typography-2018-level-mappings: (
 }
 
 // Converts an Angular Material typography config to an MDC one.
-@function mat-typography-config-to-mdc($mat-config: typography.define-typography-config()) {
+@function mat-typography-config-to-mdc($mat-config: typography.define-mdc-typography-config()) {
   $mdc-config: ();
 
   $mappings: if(typography.private-typography-is-2018-config($mat-config),

src/material-experimental/mdc-typography/_all-typography.import.scss

@@ -92,7 +92,7 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @forward '../mdc-form-field/form-field-focus-overlay' as mat-mdc-*;
 @forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-*;
 @forward '../mdc-theming/all-theme';
-@forward 'all-typography' hide define-typography-config, all-mdc-component-typographies;
+@forward 'all-typography' hide define-mdc-typography-config, all-mdc-component-typographies;
 @forward 'all-typography' as mat-mdc-typography-* hide
 mat-mdc-typography-all-mdc-component-typographies;
 

src/material-experimental/mdc-typography/_all-typography.scss

@@ -26,7 +26,7 @@
 /// @param {Map} $button The font settings for the button font level.
 /// @param {Map} $overline The font settings for the overline font level.
 /// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
-@function define-typography-config(
+@function define-mdc-typography-config(
   $font-family: mdc-typography.$font-family,
   $headline-1:  mdc-helpers.mat-typography-config-level-from-mdc(headline1),
   $headline-2:  mdc-helpers.mat-typography-config-level-from-mdc(headline2),

src/material-experimental/popover-edit/_popover-edit.scss → src/material-experimental/popover-edit/_popover-edit-theme.scss

@@ -7,7 +7,7 @@
 @use '../../material/core/typography/typography';
 @use '../../material/core/typography/typography-utils';
 
-@function mat-edit-hover-content-background($direction, $background-color) {
+@function _hover-content-background($direction, $background-color) {
   @return linear-gradient($direction, rgba($background-color, 0), $background-color 8px);
 }
 
@@ -18,13 +18,15 @@
   $primary: map.get($config, primary);
   $background-color: theming.get-color-from-palette($background, 'card');
 
+  // TODO: these structural styles don't belong in the `color` part of a theme.
+  // We should figure out a better place for them.
   .mat-row-hover-content-host-cell {
     position: relative;
   }
 
   .mat-row-hover-content {
     align-items: center;
-    background: mat-edit-hover-content-background(90deg, $background-color);
+    background: _hover-content-background(90deg, $background-color);
     bottom: 0;
     display: flex;
     opacity: 0;
@@ -36,7 +38,7 @@
   }
 
   .mat-row-hover-content-rtl {
-    background: mat-edit-hover-content-background(270deg, $background-color);
+    background: _hover-content-background(270deg, $background-color);
     left: 0;
     right: auto;
   }
@@ -138,10 +140,10 @@
     flex-wrap: wrap;
     justify-content: flex-end;
     margin: 8px -16px -8px;
+  }
 
-    [mat-edit-fill] + & {
-      margin-top: 16px;
-    }
+  [mat-edit-fill] + [mat-edit-actions] {
+    margin-top: 16px;
   }
 }