feat(material/core): expose new @use-based Sass API

src/cdk/BUILD.bazel

@@ -1,5 +1,5 @@
 load("//src/cdk:config.bzl", "CDK_ENTRYPOINTS", "CDK_ENTRYPOINTS_WITH_STYLES", "CDK_SCSS_LIBS", "CDK_TARGETS")
-load("//tools:defaults.bzl", "ng_package", "ts_library")
+load("//tools:defaults.bzl", "ng_package", "sass_library", "ts_library")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -49,11 +49,17 @@ rerootedStyleTargets = ["%s_rerooted" % file for [
     _,
 ] in rerootedStyles]
 
+# Makes the public Sass API bundle available in the release output as `angular/cdk`.
+sass_library(
+    name = "sass_index",
+    srcs = ["_index.scss"],
+)
+
 # Creates the @angular/cdk package published to npm.
 ng_package(
     name = "npm_package",
     srcs = ["package.json"],
-    data = rerootedStyleTargets + CDK_SCSS_LIBS,
+    data = [":sass_index"] + rerootedStyleTargets + CDK_SCSS_LIBS,
     entry_point = ":public-api.ts",
     nested_packages = [
         "//src/cdk/schematics:npm_package",

src/cdk/_index.scss

@@ -0,0 +1,4 @@
+@forward './overlay/overlay' show overlay;
+@forward './a11y/a11y' show a11y-visually-hidden, high-contrast;
+@forward './text-field/text-field' show text-field-autosize, text-field-autofill,
+  text-field-autofill-color;

src/cdk/a11y/_a11y.scss

@@ -1,4 +1,4 @@
-@mixin a11y {
+@mixin a11y-visually-hidden {
   .cdk-visually-hidden {
     border: 0;
     clip: rect(0 0 0 0);
@@ -18,6 +18,11 @@
   }
 }
 
+// @deprecated Use `a11y-visually-hidden`.
+@mixin a11y {
+  @include a11y-visually-hidden;
+}
+
 /// Emits the mixin's content nested under `$selector-context` if `$selector-context`
 /// is non-empty.
 /// @param selector-context The selector under which to nest the mixin's content.

src/cdk/a11y/a11y-prebuilt.scss

@@ -1,3 +1,3 @@
 @use './a11y';
 
-@include a11y.a11y();
+@include a11y.a11y-visually-hidden();

src/cdk/text-field/_text-field.import.scss

@@ -1,5 +1,2 @@
-@forward 'text-field' hide $autofill-color-frame-count, autofill-color, text-field;
-@forward 'text-field' as cdk-* hide $cdk-autofill-color-frame-count, cdk-autofill-color,
-cdk-textarea-autosize-measuring-base;
-@forward 'text-field' as cdk-text-field-* hide cdk-text-field-text-field,
-cdk-text-field-textarea-autosize-measuring-base;
+@forward 'text-field' as cdk-* show cdk-text-field-autofill, cdk-text-field-autofill-color,
+cdk-text-field-autosize, cdk-text-field;

src/cdk/text-field/_text-field.scss

@@ -1,22 +1,5 @@
-// Core styles that enable monitoring autofill state of text fields.
-@mixin text-field {
-  // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled
-  // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is
-  // needed to prevent LibSass from stripping the keyframes out.
-  // Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
-  @keyframes cdk-text-field-autofill-start {/*!*/}
-  @keyframes cdk-text-field-autofill-end {/*!*/}
-
-  .cdk-text-field-autofill-monitored:-webkit-autofill {
-    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
-    animation: cdk-text-field-autofill-start 0s 1ms;
-  }
-
-  .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
-    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
-    animation: cdk-text-field-autofill-end 0s 1ms;
-  }
-
+// Structural styles for the autosize text fields.
+@mixin text-field-autosize() {
   // Remove the resize handle on autosizing textareas, because whatever height
   // the user resized to will be overwritten once they start typing again.
   textarea.cdk-textarea-autosize {
@@ -44,6 +27,26 @@
   }
 }
 
+// Core styles that enable monitoring autofill state of text fields.
+@mixin text-field-autofill() {
+  // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled
+  // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is
+  // needed to prevent LibSass from stripping the keyframes out.
+  // Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
+  @keyframes cdk-text-field-autofill-start {/*!*/}
+  @keyframes cdk-text-field-autofill-end {/*!*/}
+
+  .cdk-text-field-autofill-monitored:-webkit-autofill {
+    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
+    animation: cdk-text-field-autofill-start 0s 1ms;
+  }
+
+  .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
+    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
+    animation: cdk-text-field-autofill-end 0s 1ms;
+  }
+}
+
 @mixin _cdk-textarea-autosize-measuring-base {
   // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect
   // measurement. We just have to account for it later and subtract it off the final result.
@@ -57,7 +60,7 @@ $autofill-color-frame-count: 0;
 // Mixin used to apply custom background and foreground colors to an autofilled text field.
 // Based on: https://stackoverflow.com/questions/2781549/
 // removing-input-background-colour-for-chrome-autocomplete#answer-37432260
-@mixin autofill-color($background, $foreground:'') {
+@mixin text-field-autofill-color($background, $foreground:'') {
   @keyframes cdk-text-field-autofill-color-#{$autofill-color-frame-count} {
     to {
       background: $background;
@@ -79,3 +82,9 @@ $autofill-color-frame-count: 0;
   $autofill-color-frame-count:
       $autofill-color-frame-count + 1 !global;
 }
+
+// @deprecated Use `autosize` and `autofill` instead.
+@mixin text-field {
+  @include text-field-autosize();
+  @include text-field-autofill();
+}

src/cdk/text-field/text-field-prebuilt.scss

@@ -1,3 +1,4 @@
 @use 'text-field';
 
-@include text-field.text-field();
+@include text-field.text-field-autosize();
+@include text-field.text-field-autofill();

src/dev-app/BUILD.bazel

@@ -107,6 +107,7 @@ sass_binary(
         "external/npm/node_modules",
     ],
     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/dev-app/input/input-demo.scss

@@ -33,7 +33,7 @@
 }
 
 .demo-custom-autofill-style {
-  @include text-field.autofill-color(transparent, red);
+  @include text-field.text-field-autofill-color(transparent, red);
 }
 
 .demo-rows {

src/dev-app/mdc-input/mdc-input-demo.scss

@@ -41,7 +41,7 @@
 }
 
 .demo-custom-autofill-style {
-  @include text-field.autofill-color(transparent, red);
+  @include text-field.text-field-autofill-color(transparent, red);
 }
 
 .demo-rows {

src/dev-app/theme.scss

@@ -1,59 +1,52 @@
-@use '../material/core/color/all-color' as color-all-color;
+@use '../material' as mat;
 @use '../material/core/density/private/all-density' as private-all-density;
-@use '../material/core/focus-indicators/focus-indicators' as focus-indicators-focus-indicators;
-@use '../material/core/theming/all-theme' as theming-all-theme;
 @use '../material-experimental/column-resize/column-resize';
-@use '../material-experimental/mdc-helpers/mdc-helpers';
-@use '../material-experimental/mdc-helpers/focus-indicators';
-@use '../material-experimental/mdc-color/all-color';
-@use '../material-experimental/mdc-theming/all-theme';
-@use '../material-experimental/mdc-typography/all-typography';
-@use '../material-experimental/mdc-density/all-density';
-@use '../material-experimental/mdc-slider/slider-theme';
+@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/mdc-slider/slider-theme' as mdc-slider-theme;
 @use '../material-experimental/popover-edit/popover-edit';
-@use '../material-experimental/mdc-table/table-theme';
-@use '../material/core/core';
-@use '../material/core/theming/palette';
-@use '../material/core/theming/theming';
 
 // Plus imports for other components in your app.
 
 // Define the default (light) theme.
-$candy-app-primary: theming.palette(palette.$indigo);
-$candy-app-accent: theming.palette(palette.$pink, A200, A100, A400);
-$candy-app-theme: theming.light-theme((
-    // Define the default colors for our app.
-    color: (
-        primary: $candy-app-primary,
-        accent: $candy-app-accent
-    ),
-    // Define the default typography for our app.
-    typography: all-typography.config(),
-    // Define the default density level for our app.
-    density: 0,
+$candy-app-primary: mat.define-palette(mat.$indigo-palette);
+$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$candy-app-theme: mat.define-light-theme((
+  // Define the default colors for our app.
+  color: (
+    primary: $candy-app-primary,
+    accent: $candy-app-accent
+  ),
+  // Define the default typography for our app.
+  typography: mat.define-typography-config(),
+  // Define the default density level for our app.
+  density: 0,
 ));
 
 // 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 core.core($candy-app-theme);
+@include mat.core($candy-app-theme);
 
 // Include the default theme styles.
-@include theming-all-theme.angular-material-theme($candy-app-theme);
-@include all-theme.angular-material-mdc-theme($candy-app-theme);
+@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);
-// We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
-@include slider-theme.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 focus-indicators-focus-indicators.strong-focus-indicators();
-  @include focus-indicators.strong-focus-indicators();
+  @include mat.strong-focus-indicators();
+  @include mdc-focus-indicators.strong-focus-indicators();
 
   // Include the default theme for focus indicators.
-  @include focus-indicators-focus-indicators.strong-focus-indicators-theme($candy-app-theme);
-  @include focus-indicators.strong-focus-indicators-theme($candy-app-theme);
+  @include mat.strong-focus-indicators-theme($candy-app-theme);
+  @include mdc-focus-indicators-theme.theme($candy-app-theme);
 }
 
 // Include the alternative theme styles inside of a block with a CSS class. You can make this
@@ -62,23 +55,23 @@ $candy-app-theme: theming.light-theme((
 // default theme.
 .demo-unicorn-dark-theme {
   // Create the color palettes used in our dark theme.
-  $dark-primary: theming.palette(palette.$blue-grey);
-  $dark-accent: theming.palette(palette.$amber, A200, A100, A400);
-  $dark-warn: theming.palette(palette.$deep-orange);
-  $dark-colors: theming.dark-theme($dark-primary, $dark-accent, $dark-warn);
+  $dark-primary: mat.define-palette(mat.$blue-grey-palette);
+  $dark-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
+  $dark-warn: mat.define-palette(mat.$deep-orange-palette);
+  $dark-colors: mat.define-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
   // Include the dark theme color styles.
-  @include color-all-color.angular-material-color($dark-colors);
-  @include all-color.angular-material-mdc-color($dark-colors);
+  @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);
-  // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
-  @include slider-theme.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 focus-indicators-focus-indicators.strong-focus-indicators-color($dark-colors);
-    @include focus-indicators.strong-focus-indicators-color($dark-colors);
+    @include mat.strong-focus-indicators-color($dark-colors);
+    @include mdc-focus-indicators-theme.color($dark-colors);
   }
 }
 
@@ -88,7 +81,7 @@ $candy-app-theme: theming.light-theme((
 $density-scales: (-1, -2, minimum, maximum);
 @each $density in $density-scales {
   .demo-density-#{$density} {
-    @include private-all-density.angular-material-density($density);
-    @include all-density.angular-material-mdc-density($density);
+    @include private-all-density.all-component-densities($density);
+    @include mdc-all-density.all-mdc-component-densities($density);
   }
 }

src/e2e-app/BUILD.bazel

@@ -79,6 +79,7 @@ sass_binary(
         "external/npm/node_modules",
     ],
     deps = [
+        "//src/material:theming_bundle",
         "//src/material-experimental/mdc-theming:all_themes",
         "//src/material-experimental/mdc-typography:all_typography",
         "//src/material/core:theming_scss_lib",

src/e2e-app/theme.scss

@@ -1,23 +1,20 @@
-@use '../material/core/theming/all-theme' as theming-all-theme;
-@use '../material-experimental/mdc-theming/all-theme';
-@use '../material-experimental/mdc-typography/all-typography';
-@use '../material/core/core';
-@use '../material/core/theming/palette';
-@use '../material/core/theming/theming';
+@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;
 
 // 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 core.core();
-@include all-typography.angular-material-mdc-typography();
+@include mat.core();
+@include mdc-all-typography.all-mdc-component-typographies();
 
 // Define the default theme (same as the example above).
-$candy-app-primary: theming.palette(palette.$indigo);
-$candy-app-accent: theming.palette(palette.$pink, A200, A100, A400);
-$candy-app-theme: theming.light-theme($candy-app-primary, $candy-app-accent);
+$candy-app-primary: mat.define-palette(mat.$indigo-palette);
+$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$candy-app-theme: mat.define-light-theme($candy-app-primary, $candy-app-accent);
 
 // Include the default theme styles.
-@include theming-all-theme.angular-material-theme($candy-app-theme);
-@include all-theme.angular-material-mdc-theme($candy-app-theme);
+@include mat.all-component-themes($candy-app-theme);
+@include mdc-all-theme.all-mdc-component-themes($candy-app-theme);

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

@@ -9,9 +9,9 @@
   $primary: map.get($config, primary);
   $foreground: map.get($config, foreground);
 
-  $non-resizable-hover-divider: theming.color($foreground, divider);
-  $resizable-hover-divider: theming.color($primary, 200);
-  $resizable-active-divider: theming.color($primary, 500);
+  $non-resizable-hover-divider: theming.get-color-from-palette($foreground, divider);
+  $resizable-hover-divider: theming.get-color-from-palette($primary, 200);
+  $resizable-active-divider: theming.get-color-from-palette($primary, 500);
 
   // Required for resizing to work properly.
   .mat-column-resize-table.cdk-column-resize-with-resized-column {

src/material-experimental/mdc-button/_button-theme.scss

@@ -7,7 +7,7 @@
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/elevation/elevation-theme' as mdc-elevation-theme;
-@use '../../material/core/ripple/ripple';
+@use '../../material/core/ripple/ripple-theme';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
 
@@ -39,7 +39,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
 // which is what the ripple mixin uses. This creates a new theme that sets the color to the
 // foreground base to appropriately color the ink.
 @mixin _mat-button-ripple-ink-color($mdcColor) {
-  @include ripple.theme((
+  @include ripple-theme.theme((
     foreground: (
       base: mdc-theme-color.prop-value($mdcColor)
     ),

src/material-experimental/mdc-card/_card-theme.scss

@@ -25,7 +25,7 @@
     // Card subtitles are an Angular Material construct (not MDC), so we explicitly set their
     // color to secondary text here.
     .mat-mdc-card-subtitle {
-      color: theming.color($foreground, secondary-text);
+      color: theming.get-color-from-palette($foreground, secondary-text);
     }
   }