refactor: switch "material" away from cross-package relative Sass imports

Author: devversion

src/material/BUILD.bazel

@@ -19,9 +19,8 @@ filegroup(
     srcs = ["//src/material/%s:overview" % name for name in MATERIAL_ENTRYPOINTS],
 )
 
-# Makes the theming bundle available in the release output as `angular/material/theming`.
 sass_library(
-    name = "theming_bundle",
+    name = "sass_lib",
     srcs = [
         "_index.scss",
         "_theming.scss",
@@ -36,7 +35,7 @@ ng_package(
         "package.json",
     ],
     data = [
-        ":theming_bundle",
+        ":sass_lib",
         "//src/material/core:theming_scss_lib",
         "//src/material/prebuilt-themes:deeppurple-amber",
         "//src/material/prebuilt-themes:indigo-pink",

src/material/_index.scss

@@ -14,6 +14,25 @@
 @forward './core/typography/typography-utils' show typography-level,
   font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
 
+// Private/Internal
+@forward './core/density/private/all-density' as private-* show private-all-component-densities;
+@forward './core/theming/theming' show private-check-duplicate-theme-styles,
+  private-legacy-get-theme, private-is-theme-object;
+  @forward './core/style/layout-common' as private-* show private-fill;
+@forward './core/style/private' show private-theme-elevation, private-animation-noop;
+@forward './core/style/vendor-prefixes' as private-* show private-user-select,
+  private-position-sticky, private-color-adjust;
+@forward './core/theming/palette' as private-* show $private-dark-primary-text,
+  $private-dark-disabled-text;
+@forward './core/style/variables' as private-* show $private-swift-ease-in-duration,
+  $private-swift-ease-in-timing-function, $private-swift-ease-out-timing-function,
+  $private-ease-in-out-curve-function, $private-swift-ease-out-duration, $private-xsmall;
+@forward './core/typography/typography' show private-typography-to-2014-config,
+  private-typography-to-2018-config;
+@forward './table/table-flex-styles' show private-table-flex-styles;
+@forward './core/style/menu-common' as private-menu-common-*;
+@forward './core/style/button-common' as private-button-common-*;
+
 // Structural
 @forward './core/core' show core;
 @forward './core/ripple/ripple' show ripple;

src/material/autocomplete/BUILD.bazel

@@ -46,7 +46,7 @@ sass_binary(
     name = "autocomplete_scss",
     src = "autocomplete.scss",
     deps = [
-        "//src/cdk/a11y:a11y_scss_lib",
+        "//src/cdk:sass_lib",
         "//src/material/core:core_scss_lib",
     ],
 )

src/material/autocomplete/autocomplete.scss

@@ -1,5 +1,6 @@
+@use '@angular/cdk';
+
 @use '../core/style/menu-common';
-@use '../../cdk/a11y';
 
 // The max-height of the panel, currently matching mat-select value.
 $panel-max-height: 256px !default;
@@ -36,7 +37,7 @@ $panel-border-radius: 4px !default;
     margin-top: -1px;
   }
 
-  @include a11y.high-contrast(active, off) {
+  @include cdk.high-contrast(active, off) {
     outline: solid 1px;
   }
 }

src/material/badge/BUILD.bazel

@@ -31,7 +31,7 @@ sass_library(
     name = "badge_scss_lib",
     srcs = glob(["**/_*.scss"]),
     deps = [
-        "//src/cdk/a11y:a11y_scss_lib",
+        "//src/cdk:sass_lib",
         "//src/material/core:core_scss_lib",
     ],
 )

src/material/badge/_badge-theme.scss

@@ -5,10 +5,11 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:math';
+@use '@angular/cdk';
+
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
-@use '../../cdk/a11y';
 
 $font-size: 12px;
 $font-weight: 600;
@@ -166,7 +167,7 @@ $_badge-structure-emitted: false !default;
     color: theming.get-color-from-palette($primary, default-contrast);
     background: theming.get-color-from-palette($primary);
 
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       outline: solid 1px;
       border-radius: 0;
     }

src/material/bottom-sheet/BUILD.bazel

@@ -45,7 +45,7 @@ sass_library(
 sass_binary(
     name = "bottom_sheet_container_scss",
     src = "bottom-sheet-container.scss",
-    deps = ["//src/cdk/a11y:a11y_scss_lib"],
+    deps = ["//src/cdk:sass_lib"],
 )
 
 ng_test_library(

src/material/bottom-sheet/bottom-sheet-container.scss

@@ -1,4 +1,4 @@
-@use '../../cdk/a11y';
+@use '@angular/cdk';
 
 // The bottom sheet minimum width on larger screen sizes is based
 // on increments of the toolbar, according to the spec. See:
@@ -17,7 +17,7 @@ $container-horizontal-padding: 16px !default;
   max-height: 80vh;
   overflow: auto;
 
-  @include a11y.high-contrast(active, off) {
+  @include cdk.high-contrast(active, off) {
     outline: 1px solid;
   }
 }

src/material/button-toggle/BUILD.bazel

@@ -43,7 +43,7 @@ sass_binary(
     name = "button_toggle_scss",
     src = "button-toggle.scss",
     deps = [
-        "//src/cdk/a11y:a11y_scss_lib",
+        "//src/cdk:sass_lib",
         "//src/material/core:core_scss_lib",
     ],
 )

src/material/button-toggle/button-toggle.scss

@@ -1,6 +1,7 @@
+@use '@angular/cdk';
+
 @use '../core/style/vendor-prefixes';
 @use '../core/style/layout-common';
-@use '../../cdk/a11y';
 
 $standard-padding: 0 12px !default;
 $standard-border-radius: 4px !default;
@@ -22,7 +23,7 @@ $legacy-border-radius: 2px !default;
   // Fixes the ripples not being clipped to the border radius on Safari.
   transform: translateZ(0);
 
-  @include a11y.high-contrast(active, off) {
+  @include cdk.high-contrast(active, off) {
     outline: solid 1px;
   }
 }
@@ -31,7 +32,7 @@ $legacy-border-radius: 2px !default;
 .mat-button-toggle-group-appearance-standard {
   border-radius: $standard-border-radius;
 
-  @include a11y.high-contrast(active, off) {
+  @include cdk.high-contrast(active, off) {
     outline: 0;
   }
 }
@@ -60,7 +61,7 @@ $legacy-border-radius: 2px !default;
       opacity: 1;
 
       // In high contrast mode `opacity: 1` will show the overlay as solid so we fall back 0.5.
-      @include a11y.high-contrast(active, off) {
+      @include cdk.high-contrast(active, off) {
         opacity: 0.5;
       }
     }
@@ -80,7 +81,7 @@ $legacy-border-radius: 2px !default;
   &.cdk-keyboard-focused:not(.mat-button-toggle-disabled) .mat-button-toggle-focus-overlay {
     opacity: 0.12;
 
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       opacity: 0.5;
     }
   }
@@ -126,7 +127,7 @@ $legacy-border-radius: 2px !default;
   // Changing the background color for the selected item won't be visible in high contrast mode.
   // We fall back to using the overlay to draw a brighter, semi-transparent tint on top instead.
   // It uses a border, because the browser will render it using a brighter color.
-  @include a11y.high-contrast(active, off) {
+  @include cdk.high-contrast(active, off) {
     .mat-button-toggle-checked & {
       border-bottom: solid $legacy-height;
       opacity: 0.5;
@@ -135,7 +136,7 @@ $legacy-border-radius: 2px !default;
   }
 }
 
-@include a11y.high-contrast(active, off) {
+@include cdk.high-contrast(active, off) {
   .mat-button-toggle-checked.mat-button-toggle-appearance-standard
   .mat-button-toggle-focus-overlay {
     // In high contrast mode, we use a border for the checked state because backgrounds