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

Reworks the public Sass API to take advantage of `@use` in order to allow for a single
entry point into `@angular/material` or `@angular/cdk`. Some mixins and variables were
renamed in order be a better reflection of what they do.

Before:

```
@import '~@angular/material/theming';
@include mat-core();

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);

$candy-app-theme: mat-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-warn,
  )
));

@include angular-material-theme($candy-app-theme);
```

After:
```
@use '~@angular/material' as mat;
@include mat.core();

$candy-app-primary: mat.define-palette(mat.$indigo-palette);
$candy-app-accent:  mat.define-palette(mat.$pink-palette, A200, A100, A400);
$candy-app-warn:    mat.define-palette(mat.$red-palette);

$candy-app-theme: mat.define-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-warn,
  )
));

@include mat.all-component-themes($candy-app-theme);
```

Author: crisbeto

shim-scss-imports.js renamed to scripts/shim-scss-imports.js

@@ -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/BUILD.bazel

@@ -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/_index.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.scss

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

src/cdk/a11y/a11y-prebuilt.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.import.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.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/cdk/text-field/text-field-prebuilt.scss

@@ -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/BUILD.bazel

@@ -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 {