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

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

@@ -1,10 +1,10 @@
 @use '@material/checkbox/checkbox-theme' as checkbox-theme;
-@use '@material/ripple/ripple-theme' as ripple-theme;
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '@material/theme/theme';
 @use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
-@use '../../material/core/ripple/ripple';
+@use '../../material/core/ripple/ripple-theme';
 
 @import '@material/checkbox/mixins.import';
 @import '@material/checkbox/variables.import';
@@ -25,9 +25,9 @@
       outline-color: rgba(mdc-theme-prop-value(on-surface), 0.54),
       outline-hover-color: null,
       ripple-color: mdc-theme-prop-value(on-surface),
-      ripple-opacity: ripple-theme.$dark-ink-opacities,
+      ripple-opacity: mdc-ripple-theme.$dark-ink-opacities,
       ripple-checked-color: $color,
-      ripple-checked-opacity: ripple-theme.$dark-ink-opacities,
+      ripple-checked-opacity: mdc-ripple-theme.$dark-ink-opacities,
     )
   );
 }
@@ -37,9 +37,9 @@
 @mixin _selected-ripple-colors($theme, $mdcColor) {
   .mdc-checkbox--selected ~ {
     .mat-mdc-checkbox-ripple {
-      @include ripple.theme((
+      @include ripple-theme.theme((
           foreground: (
-              base: mdc-theme-prop-value($mdcColor)
+            base: mdc-theme-prop-value($mdcColor)
           ),
       ));
     }
@@ -52,9 +52,9 @@
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $primary: theming.color(map.get($config, primary));
-  $accent: theming.color(map.get($config, accent));
-  $warn: theming.color(map.get($config, warn));
+  $primary: theming.get-color-from-palette(map.get($config, primary));
+  $accent: theming.get-color-from-palette(map.get($config, accent));
+  $warn: theming.get-color-from-palette(map.get($config, warn));
 
   // Save original values of MDC global variables. We need to save these so we can restore the
   // variables to their original values and prevent unintended side effects from using this mixin.
@@ -74,7 +74,7 @@
     .mat-mdc-checkbox {
       @include private-checkbox-styles-with-color(primary);
       @include mdc-form-field-core-styles($query: mdc-helpers.$mat-theme-styles-query);
-      @include ripple.theme((
+      @include ripple-theme.theme((
         foreground: (
           base: mdc-theme-prop-value(on-surface)
         ),

src/material-experimental/mdc-checkbox/_checkbox-theme.scss

@@ -21,11 +21,11 @@
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $primary: theming.color(map.get($config, primary));
-  $accent: theming.color(map.get($config, accent));
-  $warn: theming.color(map.get($config, warn));
+  $primary: theming.get-color-from-palette(map.get($config, primary));
+  $accent: theming.get-color-from-palette(map.get($config, accent));
+  $warn: theming.get-color-from-palette(map.get($config, warn));
   $background: map.get($config, background);
-  $unselected-background: theming.color($background, unselected-chip);
+  $unselected-background: theming.get-color-from-palette($background, unselected-chip);
 
   // Save original values of MDC global variables. We need to save these so we can restore the
   // variables to their original values and prevent unintended side effects from using this mixin.

src/material-experimental/mdc-chips/_chips-theme.scss

@@ -1,7 +1,7 @@
 @use '../mdc-theming/all-theme';
 @use '../../material/core/theming/theming';
 
-@mixin angular-material-mdc-color($config-or-theme) {
+@mixin all-mdc-component-colors($config-or-theme) {
   // In case a theme object has been passed instead of a configuration for
   // the color system, extract the color config from the theme object.
   $config: if(theming.private-is-theme-object($config-or-theme),
@@ -11,7 +11,7 @@
     @error 'No color configuration specified.';
   }
 
-  @include all-theme.angular-material-mdc-theme((
+  @include all-theme.all-mdc-component-themes((
     color: $config,
     typography: null,
     density: null,

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

@@ -11,7 +11,7 @@
     @error 'No density configuration specified.';
   }
 
-  @include all-theme.angular-material-mdc-theme((
+  @include all-theme.all-mdc-component-themes((
     color: null,
     typography: null,
     density: $config,

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

@@ -0,0 +1,48 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use '../../material/core/theming/theming';
+
+// Mixin that applies the border color for the focus indicators.
+@mixin _mat-mdc-strong-focus-indicators-border-color($color) {
+  .mat-mdc-focus-indicator::before {
+    border-color: $color;
+  }
+}
+
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $border-color: theming.get-color-from-palette(map.get($config, primary));
+  @include _mat-mdc-strong-focus-indicators-border-color($border-color);
+}
+
+/// Mixin that sets the color of the focus indicators.
+///
+/// @param {color|map} $theme-or-color
+///   If theme, focus indicators are set to the primary color of the theme. If
+///   color, focus indicators are set to that color.
+///
+/// @example
+///   .demo-dark-theme {
+///     @include mat-mdc-strong-focus-indicators-theme($dark-theme-map);
+///   }
+///
+/// @example
+///   .demo-red-theme {
+///     @include mat-mdc-strong-focus-indicators-theme(#f00);
+///   }
+/* stylelint-disable-next-line material/theme-mixin-api */
+@mixin theme($theme-or-color) {
+  @if meta.type-of($theme-or-color) != 'map' {
+    @include _mat-mdc-strong-focus-indicators-border-color($theme-or-color);
+  }
+  @else {
+    $theme: theming.private-legacy-get-theme($theme-or-color);
+    @include theming.private-check-duplicate-theme-styles($theme,
+      'mat-mdc-strong-focus-indicators') {
+      $color: theming.get-color-config($theme);
+      @if $color != null {
+        @include strong-focus-indicators-color($color);
+      }
+    }
+  }
+}

src/material-experimental/mdc-helpers/_focus-indicators-theme.scss

@@ -1,7 +1,8 @@
 @forward '../../material/core/focus-indicators/focus-indicators.import';
-@forward 'focus-indicators' hide strong-focus-indicators, strong-focus-indicators-color,
-strong-focus-indicators-theme;
+@forward 'focus-indicators' hide strong-focus-indicators;
+@forward 'focus-indicators-theme' hide color, theme;
 @forward 'focus-indicators' as mat-mdc-* hide mat-mdc-strong-focus-indicators-border-color;
+@forward 'focus-indicators-theme' as mat-mdc-strong-focus-indicators-*;
 
 @import '../../material/core/theming/theming';
 @import '../../material/core/style/layout-common';