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

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,3 @@
+@forward './overlay/overlay' show overlay;
+@forward './a11y/a11y' show a11y-visually-hidden, high-contrast;
+@forward './text-field/text-field' show 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,12 +1,14 @@
-@use '../material/core/color/all-color' as color-all-color;
+@use '../material/core/color/all-color';
 @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/core/focus-indicators/focus-indicators';
+@use '../material/core/focus-indicators/focus-indicators-theme';
+@use '../material/core/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-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-typography/all-typography';
 @use '../material-experimental/mdc-density/all-density';
 @use '../material-experimental/mdc-slider/slider-theme';
@@ -19,18 +21,18 @@
 // 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: theming.define-palette(palette.$indigo-palette);
+$candy-app-accent: theming.define-palette(palette.$pink-palette, A200, A100, A400);
+$candy-app-theme: theming.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: all-typography.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
@@ -39,21 +41,21 @@ $candy-app-theme: theming.light-theme((
 @include core.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 all-theme.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`.
+// We add this in manually for now, because it isn't included in `all-mdc-component-themes`.
 @include 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 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 focus-indicators-theme.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 +64,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: theming.define-palette(palette.$blue-grey-palette);
+  $dark-accent: theming.define-palette(palette.$amber-palette, A200, A100, A400);
+  $dark-warn: theming.define-palette(palette.$deep-orange-palette);
+  $dark-colors: theming.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 all-color.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`.
+  // We add this in manually for now, because it isn't included in `all-mdc-component-themes`.
   @include 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 focus-indicators-theme.color($dark-colors);
+    @include mdc-focus-indicators-theme.color($dark-colors);
   }
 }
 

src/dev-app/theme.scss

@@ -11,13 +11,13 @@
 // 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 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: theming.define-palette(palette.$indigo-palette);
+$candy-app-accent: theming.define-palette(palette.$pink-palette, A200, A100, A400);
+$candy-app-theme: theming.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 theming-all-theme.all-component-themes($candy-app-theme);
+@include all-theme.all-mdc-component-themes($candy-app-theme);

src/e2e-app/theme.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/column-resize/_column-resize.scss

@@ -1,4 +1,4 @@
-@use '../../material/core/ripple/ripple';
+@use '../../material/core/ripple/ripple-theme';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
 @import '@material/button/mixins.import';
@@ -36,7 +36,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-prop-value($mdcColor)
     ),

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

@@ -26,7 +26,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);
     }
   }