refactor(cdk/overlay): clean up variable names (#22359)

This is follow-up from the PR that introduced the theming API migration (#22304 (comment)). It renames a few variables in the CDK to align them with the new API.

Author: crisbeto

src/cdk/_index.scss

@@ -1,5 +1,5 @@
-@forward './overlay/overlay' show overlay, $z-index-overlay-container, $z-index-overlay,
-  $z-index-overlay-backdrop, $dark-backdrop-background;
+@forward './overlay/overlay' show overlay, $overlay-container-z-index, $overlay-z-index,
+  $overlay-backdrop-z-index, $overlay-backdrop-color;
 @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/overlay/_overlay-deprecated.scss

@@ -0,0 +1,13 @@
+@use './overlay';
+
+// @deprecated Use `$overlay-container-z-index`.
+$z-index-overlay-container: overlay.$overlay-container-z-index;
+
+// @deprecated Use `$overlay-z-index`.
+$z-index-overlay: overlay.$overlay-z-index;
+
+// @deprecated Use `$overlay-backdrop-color`.
+$dark-backdrop-background: overlay.$overlay-backdrop-color;
+
+// @deprecated Use `$overlay-backdrop-z-index`.
+$z-index-overlay-backdrop: overlay.$overlay-backdrop-z-index;

src/cdk/overlay/_overlay.import.scss

@@ -1,10 +1,13 @@
 @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' hide $overlay-backdrop-color, $overlay-z-index, $overlay-backdrop-z-index,
+  $overlay-container-z-index, overlay;
 @forward 'overlay' as cdk-* hide $cdk-backdrop-animation-duration,
-$cdk-backdrop-animation-timing-function, $cdk-dark-backdrop-background;
+  $cdk-backdrop-animation-timing-function, $cdk-overlay-backdrop-color;
 @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;
+  $cdk-overlay-backdrop-animation-timing-function, $cdk-overlay-overlay-z-index,
+  $cdk-overlay-overlay-backdrop-z-index, $cdk-overlay-overlay-container-z-index,
+  cdk-overlay-overlay;
+@forward './overlay-deprecated' as cdk-*;
+@forward './overlay-deprecated' as cdk-overlay-*;
 
 @import '../a11y/a11y';

src/cdk/overlay/_overlay.scss

@@ -1,12 +1,12 @@
 // 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.
-$z-index-overlay-container: 1000 !default;
-$z-index-overlay: 1000 !default;
-$z-index-overlay-backdrop: 1000 !default;
+$overlay-container-z-index: 1000 !default;
+$overlay-z-index: 1000 !default;
+$overlay-backdrop-z-index: 1000 !default;
 
 // Background color for all of the backdrops
-$dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;
+$overlay-backdrop-color: rgba(0, 0, 0, 0.32) !default;
 
 // Default backdrop animation is based on the Material Design swift-ease-out.
 $backdrop-animation-duration: 400ms !default;
@@ -28,7 +28,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: $z-index-overlay-container;
+    z-index: $overlay-container-z-index;
 
     &:empty {
       // Hide the element when it doesn't have any child nodes. This doesn't
@@ -44,7 +44,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: $z-index-overlay;
+    z-index: $overlay-z-index;
   }
 
   // A single overlay pane.
@@ -54,7 +54,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: $z-index-overlay;
+    z-index: $overlay-z-index;
 
     // For connected-position overlays, we set `display: flex` in
     // order to force `max-width` and `max-height` to take effect.
@@ -71,7 +71,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     left: 0;
     right: 0;
 
-    z-index: $z-index-overlay-backdrop;
+    z-index: $overlay-backdrop-z-index;
     pointer-events: auto;
     -webkit-tap-highlight-color: transparent;
     transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
@@ -92,7 +92,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   }
 
   .cdk-overlay-dark-backdrop {
-    background: $dark-backdrop-background;
+    background: $overlay-backdrop-color;
   }
 
   .cdk-overlay-transparent-backdrop {
@@ -109,7 +109,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: $z-index-overlay;
+    z-index: $overlay-z-index;
 
     // 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/material/schematics/ng-generate/theming-api/index.spec.ts

@@ -104,7 +104,7 @@ describe('Material theming API schematic', () => {
       `@include cdk.overlay();`,
       ``,
       `.my-dialog {`,
-        `z-index: cdk.$z-index-overlay-container + 1;`,
+        `z-index: cdk.$overlay-container-z-index + 1;`,
       `}`,
       ``,
       `@include cdk.high-contrast(active, off) {`,
@@ -161,7 +161,7 @@ describe('Material theming API schematic', () => {
       `@include mat.all-component-themes($candy-app-theme);`,
 
       `.my-dialog {`,
-        `z-index: cdk.$z-index-overlay-container + 1;`,
+        `z-index: cdk.$overlay-container-z-index + 1;`,
       `}`
     ]);
   });
@@ -284,7 +284,7 @@ describe('Material theming API schematic', () => {
     expect(getFileContent(tree, '/components/dialog.scss').split('\n')).toEqual([
       `@use '~@angular/cdk' as cdk;`,
       `.my-dialog {`,
-        `z-index: cdk.$z-index-overlay-container + 1;`,
+        `z-index: cdk.$overlay-container-z-index + 1;`,
       `}`,
     ]);
   });

src/material/schematics/ng-generate/theming-api/migration.ts

@@ -78,10 +78,10 @@ const materialVariables: Record<string, string> = {
 
 /** Mapping of CDK variables that should be renamed. */
 const cdkVariables: Record<string, string> = {
-  'cdk-z-index-overlay-container': 'z-index-overlay-container',
-  'cdk-z-index-overlay': 'z-index-overlay',
-  'cdk-z-index-overlay-backdrop': 'z-index-overlay-backdrop',
-  'cdk-overlay-dark-backdrop-background': 'overlay-dark-backdrop-background',
+  'cdk-z-index-overlay-container': 'overlay-container-z-index',
+  'cdk-z-index-overlay': 'overlay-z-index',
+  'cdk-z-index-overlay-backdrop': 'overlay-backdrop-z-index',
+  'cdk-overlay-dark-backdrop-background': 'overlay-backdrop-color',
 };
 
 /** Mapping of CDK mixins that should be renamed. */