refactor(material/core): run sass module migration

Author: crisbeto

src/cdk/a11y/_a11y.import.scss

@@ -1 +1,2 @@
-@forward 'a11y';
+@forward 'a11y' hide a11y, high-contrast;
+@forward 'a11y' as cdk-* hide cdk-optionally-nest-content;

src/cdk/a11y/_a11y.scss

@@ -1,4 +1,4 @@
-@mixin cdk-a11y {
+@mixin a11y {
   .cdk-visually-hidden {
     border: 0;
     clip: rect(0 0 0 0);
@@ -42,7 +42,7 @@
 ///     * `on` - works for `Emulated`, `Native`, and `ShadowDom`
 ///     * `off` - works for `None`
 ///     * `any` - works for all encapsulation modes by emitting the CSS twice (default).
-@mixin cdk-high-contrast($target: active, $encapsulation: 'any') {
+@mixin high-contrast($target: active, $encapsulation: 'any') {
   @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {
     @error 'Unknown cdk-high-contrast value "#{$target}" provided. ' +
            'Allowed values are "active", "black-on-white", and "white-on-black"';

src/cdk/a11y/a11y-prebuilt.scss

@@ -1,3 +1,3 @@
-@import './a11y';
+@use './a11y';
 
-@include cdk-a11y();
+@include a11y.a11y();

src/cdk/overlay/_overlay.import.scss

@@ -1 +1,10 @@
-@forward 'overlay';
+@forward '../a11y/a11y' as cdk-*;
+@forward 'overlay' hide $dark-backdrop-background, $z-index-overlay, $z-index-overlay-backdrop,
+$z-index-overlay-container, overlay;
+@forward 'overlay' as cdk-* hide $cdk-backdrop-animation-duration,
+$cdk-backdrop-animation-timing-function, $cdk-dark-backdrop-background;
+@forward 'overlay' as cdk-overlay-* hide $cdk-overlay-backdrop-animation-duration,
+$cdk-overlay-backdrop-animation-timing-function, $cdk-overlay-z-index-overlay,
+$cdk-overlay-z-index-overlay-backdrop, $cdk-overlay-z-index-overlay-container, cdk-overlay-overlay;
+
+@import '../a11y/a11y';

src/cdk/overlay/_overlay.scss

@@ -1,21 +1,21 @@
-@import '../a11y/a11y';
+@use '../a11y/a11y';
 
 // We want overlays to always appear over user content, so set a baseline
 // very high z-index for the overlay container, which is where we create the new
 // stacking context for all overlays.
-$cdk-z-index-overlay-container: 1000 !default;
-$cdk-z-index-overlay: 1000 !default;
-$cdk-z-index-overlay-backdrop: 1000 !default;
+$z-index-overlay-container: 1000 !default;
+$z-index-overlay: 1000 !default;
+$z-index-overlay-backdrop: 1000 !default;
 
 // Background color for all of the backdrops
-$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;
+$dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;
 
 // Default backdrop animation is based on the Material Design swift-ease-out.
 $backdrop-animation-duration: 400ms !default;
 $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
 
-@mixin cdk-overlay() {
+@mixin overlay() {
   .cdk-overlay-container, .cdk-global-overlay-wrapper {
     // Disable events from being captured on the overlay container.
     pointer-events: none;
@@ -30,7 +30,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   // The overlay-container is an invisible element which contains all individual overlays.
   .cdk-overlay-container {
     position: fixed;
-    z-index: $cdk-z-index-overlay-container;
+    z-index: $z-index-overlay-container;
 
     &:empty {
       // Hide the element when it doesn't have any child nodes. This doesn't
@@ -46,7 +46,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   .cdk-global-overlay-wrapper {
     display: flex;
     position: absolute;
-    z-index: $cdk-z-index-overlay;
+    z-index: $z-index-overlay;
   }
 
   // A single overlay pane.
@@ -56,7 +56,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     position: absolute;
     pointer-events: auto;
     box-sizing: border-box;
-    z-index: $cdk-z-index-overlay;
+    z-index: $z-index-overlay;
 
     // For connected-position overlays, we set `display: flex` in
     // order to force `max-width` and `max-height` to take effect.
@@ -73,7 +73,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     left: 0;
     right: 0;
 
-    z-index: $cdk-z-index-overlay-backdrop;
+    z-index: $z-index-overlay-backdrop;
     pointer-events: auto;
     -webkit-tap-highlight-color: transparent;
     transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
@@ -86,14 +86,14 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
       // to making it opaque using `opacity`. Note that we can't use the `cdk-high-contrast`
       // mixin, because we can't normalize the import path to the _a11y.scss both for the
       // source and when this file is distributed. See #10908.
-      @include cdk-high-contrast(active, off) {
+      @include a11y.high-contrast(active, off) {
         opacity: 0.6;
       }
     }
   }
 
   .cdk-overlay-dark-backdrop {
-    background: $cdk-overlay-dark-backdrop-background;
+    background: $dark-backdrop-background;
   }
 
   .cdk-overlay-transparent-backdrop {
@@ -110,7 +110,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   // overlay element's size to fit within the viewport.
   .cdk-overlay-connected-position-bounding-box {
     position: absolute;
-    z-index: $cdk-z-index-overlay;
+    z-index: $z-index-overlay;
 
     // We use `display: flex` on this element exclusively for centering connected overlays.
     // When *not* centering, a top/left/bottom/right will be set which overrides the normal

src/cdk/overlay/overlay-prebuilt.scss

@@ -1,3 +1,3 @@
-@import './overlay';
+@use './overlay';
 
-@include cdk-overlay();
+@include overlay.overlay();

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

@@ -1 +1,5 @@
-@forward 'text-field';
+@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;

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

@@ -1,5 +1,5 @@
 // Core styles that enable monitoring autofill state of text fields.
-@mixin cdk-text-field {
+@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.
@@ -52,30 +52,30 @@
 }
 
 // Used to generate UIDs for keyframes used to change the text field autofill styles.
-$cdk-text-field-autofill-color-frame-count: 0;
+$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 cdk-text-field-autofill-color($background, $foreground:'') {
-  @keyframes cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} {
+@mixin autofill-color($background, $foreground:'') {
+  @keyframes cdk-text-field-autofill-color-#{$autofill-color-frame-count} {
     to {
       background: $background;
       @if $foreground != '' { color: $foreground; }
     }
   }
 
   &:-webkit-autofill {
-    animation: cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;
+    animation: cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
   }
 
   &.cdk-text-field-autofill-monitored:-webkit-autofill {
     // Since Chrome 80 we need a 1ms delay for cdk-text-field-autofill-start, or the animationstart
     // event won't fire.
     animation: cdk-text-field-autofill-start 0s 1ms,
-               cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;
+               cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
   }
 
-  $cdk-text-field-autofill-color-frame-count:
-      $cdk-text-field-autofill-color-frame-count + 1 !global;
+  $autofill-color-frame-count:
+      $autofill-color-frame-count + 1 !global;
 }

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

@@ -1,3 +1,3 @@
-@import 'text-field';
+@use 'text-field';
 
-@include cdk-text-field();
+@include text-field.text-field();

src/dev-app/datepicker/datepicker-demo.scss

@@ -1,4 +1,4 @@
-@import '../../material/datepicker/datepicker-theme';
+@use '../../material/datepicker/datepicker-theme';
 
 mat-calendar {
   width: 300px;
@@ -9,5 +9,5 @@ mat-calendar {
 }
 
 .demo-custom-range {
-  @include mat-date-range-colors(hotpink, teal, yellow, purple);
+  @include datepicker-theme.date-range-colors(hotpink, teal, yellow, purple);
 }

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

@@ -1,4 +1,4 @@
-@import '../../cdk/text-field/text-field';
+@use '../../cdk/text-field/text-field';
 
 .demo-basic {
   padding: 0;
@@ -33,7 +33,7 @@
 }
 
 .demo-custom-autofill-style {
-  @include cdk-text-field-autofill-color(transparent, red);
+  @include text-field.autofill-color(transparent, red);
 }
 
 .demo-rows {

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

@@ -1,4 +1,4 @@
-@import '../../material-experimental/mdc-dialog/dialog-legacy-padding';
+@use '../../material-experimental/mdc-dialog/dialog-legacy-padding';
 
 .demo-dialog-card {
   max-width: 600px;
@@ -24,5 +24,5 @@
 }
 
 .demo-dialog-legacy-padding {
-  @include mat-mdc-dialog-legacy-padding();
+  @include dialog-legacy-padding.legacy-padding();
 }

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

@@ -1,4 +1,4 @@
-@import '../../cdk/text-field/text-field';
+@use '../../cdk/text-field/text-field';
 
 .demo-basic {
   padding: 0;
@@ -41,7 +41,7 @@
 }
 
 .demo-custom-autofill-style {
-  @include cdk-text-field-autofill-color(transparent, red);
+  @include text-field.autofill-color(transparent, red);
 }
 
 .demo-rows {

src/dev-app/theme.scss

@@ -1,57 +1,61 @@
-@import '../material/core/color/all-color';
-@import '../material/core/density/private/all-density';
-@import '../material/core/focus-indicators/focus-indicators';
-@import '../material/core/theming/all-theme';
-@import '../material-experimental/column-resize/column-resize';
-@import '../material-experimental/mdc-helpers/mdc-helpers';
-@import '../material-experimental/mdc-helpers/focus-indicators';
-@import '../material-experimental/mdc-color/all-color';
-@import '../material-experimental/mdc-theming/all-theme';
-@import '../material-experimental/mdc-typography/all-typography';
-@import '../material-experimental/mdc-density/all-density';
-@import '../material-experimental/mdc-slider/slider-theme';
-@import '../material-experimental/popover-edit/popover-edit';
-@import '../material-experimental/mdc-table/table-theme';
+@use '../material/core/color/all-color' as 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-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/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';
+@use '../material/core/typography/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 mat-core();
-@include angular-material-mdc-typography(mat-mdc-typography-config());
-@include mat-popover-edit-typography(mat-typography-config());
+@include core.core();
+@include all-typography.angular-material-mdc-typography(all-typography.config());
+@include popover-edit.typography(typography.config());
 
 // Include base styles for strong focus indicators.
 .demo-strong-focus {
-  @include mat-strong-focus-indicators();
-  @include mat-mdc-strong-focus-indicators();
+  @include focus-indicators-focus-indicators.strong-focus-indicators();
+  @include focus-indicators.strong-focus-indicators();
 }
 
 // Define the default theme (same as the example above).
-$candy-app-primary: mat-palette($mat-indigo);
-$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
-$candy-app-theme: mat-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((
   color: (
     primary: $candy-app-primary,
     accent: $candy-app-accent
   )
 ));
 
 // Include the default theme styles.
-@include angular-material-theme($candy-app-theme);
-@include angular-material-mdc-theme($candy-app-theme);
-@include mat-column-resize-theme($candy-app-theme);
-@include mat-popover-edit-theme($candy-app-theme);
+@include theming-all-theme.angular-material-theme($candy-app-theme);
+@include all-theme.angular-material-mdc-theme($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 mat-mdc-slider-theme($candy-app-theme);
+@include slider-theme.theme($candy-app-theme);
 
 // Define an alternate dark theme.
-$dark-primary: mat-palette($mat-blue-grey);
-$dark-accent: mat-palette($mat-amber, A200, A100, A400);
-$dark-warn: mat-palette($mat-deep-orange);
-$dark-theme: mat-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-theme: theming.dark-theme((
   color: (
     primary: $dark-primary,
     accent: $dark-accent,
@@ -61,26 +65,26 @@ $dark-theme: mat-dark-theme((
 
 // Include the default theme for focus indicators.
 .demo-strong-focus {
-  @include mat-strong-focus-indicators-theme($candy-app-theme);
-  @include mat-mdc-strong-focus-indicators-theme($candy-app-theme);
+  @include focus-indicators-focus-indicators.strong-focus-indicators-theme($candy-app-theme);
+  @include focus-indicators.strong-focus-indicators-theme($candy-app-theme);
 }
 
 // Include the alternative theme styles inside of a block with a CSS class. You can make this
 // CSS class whatever you want. In this example, any component inside of an element with
 // `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
 // default theme.
 .demo-unicorn-dark-theme {
-  @include angular-material-color($dark-theme);
-  @include angular-material-mdc-color($dark-theme);
-  @include mat-column-resize-color($dark-theme);
-  @include mat-popover-edit-color($dark-theme);
-  @include mat-mdc-slider-color($dark-theme);
+  @include color-all-color.angular-material-color($dark-theme);
+  @include all-color.angular-material-mdc-color($dark-theme);
+  @include column-resize.color($dark-theme);
+  @include popover-edit.color($dark-theme);
+  @include slider-theme.color($dark-theme);
 }
 
 // Include the dark theme for focus indicators.
 .demo-unicorn-dark-theme.demo-strong-focus {
-  @include mat-strong-focus-indicators-color($dark-theme);
-  @include mat-mdc-strong-focus-indicators-color($dark-theme);
+  @include focus-indicators-focus-indicators.strong-focus-indicators-color($dark-theme);
+  @include focus-indicators.strong-focus-indicators-color($dark-theme);
 }
 
 // Create classes for all density scales which are supported by all MDC-based components.
@@ -89,7 +93,7 @@ $dark-theme: mat-dark-theme((
 $density-scales: (-1, -2, minimum, maximum);
 @each $density in $density-scales {
   .demo-density-#{$density} {
-    @include angular-material-density($density);
-    @include angular-material-mdc-density($density);
+    @include private-all-density.angular-material-density($density);
+    @include all-density.angular-material-mdc-density($density);
   }
 }