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

…orts
forsti0506 · Apr 3, 2022 · 0f87b96 · 0f87b96
1 parent 820d7cc
commit 0f87b96
Show file tree

Hide file tree

Showing 75 changed files with 251 additions and 185 deletions.
diff --git a/src/material/BUILD.bazel b/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",

diff --git a/src/material/_index.scss b/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;

diff --git a/src/material/autocomplete/BUILD.bazel b/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",
     ],
 )

diff --git a/src/material/autocomplete/autocomplete.scss b/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;
   }
 }

diff --git a/src/material/badge/BUILD.bazel b/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",
     ],
 )

diff --git a/src/material/badge/_badge-theme.scss b/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;
     }

diff --git a/src/material/bottom-sheet/BUILD.bazel b/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(

diff --git a/src/material/bottom-sheet/bottom-sheet-container.scss b/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;
   }
 }

diff --git a/src/material/button-toggle/BUILD.bazel b/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",
     ],
 )

diff --git a/src/material/button-toggle/button-toggle.scss b/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

diff --git a/src/material/button/BUILD.bazel b/src/material/button/BUILD.bazel
@@ -39,7 +39,7 @@ sass_binary(
     src = "button.scss",
     deps = [
         ":button_scss_lib",
-        "//src/cdk/a11y:a11y_scss_lib",
+        "//src/cdk:sass_lib",
         "//src/material/core:core_scss_lib",
     ],
 )

diff --git a/src/material/button/button.scss b/src/material/button/button.scss
@@ -1,8 +1,10 @@
+@use '@angular/cdk';
+
+@use './button-base';
+@use '../core/style/layout-common';
+
 // TODO(jelbourn): Measure perf benefits for translate3d and will-change.
 // TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser.
-@use 'button-base';
-@use '../core/style/layout-common';
-@use '../../cdk/a11y';
 
 .mat-button, .mat-icon-button {
   .mat-button-focus-overlay {
@@ -155,7 +157,7 @@
 
 // Add an outline to make buttons more visible in high contrast mode. Stroked buttons
 // don't need a special look in high-contrast mode, because those already have an outline.
-@include a11y.high-contrast(active, off) {
+@include cdk.high-contrast(active, off) {
   .mat-button, .mat-flat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
     outline: solid 1px;
   }

diff --git a/src/material/card/BUILD.bazel b/src/material/card/BUILD.bazel
@@ -33,7 +33,7 @@ sass_binary(
     name = "card_scss",
     src = "card.scss",
     deps = [
-        "//src/cdk/a11y:a11y_scss_lib",
+        "//src/cdk:sass_lib",
         "//src/material/core:core_scss_lib",
     ],
 )

diff --git a/src/material/card/card.scss b/src/material/card/card.scss
@@ -1,8 +1,9 @@
 @use 'sass:math';
+@use '@angular/cdk';
+
 @use '../core/style/variables';
 @use '../core/style/elevation';
 @use '../core/style/private';
-@use '../../cdk/a11y';
 
 
 $padding: 16px !default;
@@ -38,7 +39,7 @@ $header-size: 40px !default;
     }
   }
 
-  @include a11y.high-contrast(active, off) {
+  @include cdk.high-contrast(active, off) {
     outline: solid 1px;
   }
 }

diff --git a/src/material/checkbox/BUILD.bazel b/src/material/checkbox/BUILD.bazel
@@ -35,7 +35,6 @@ sass_library(
     name = "checkbox_scss_lib",
     srcs = glob(["**/_*.scss"]),
     deps = [
-        "//src/cdk/a11y:a11y_scss_lib",
         "//src/material/core:core_scss_lib",
     ],
 )
@@ -44,7 +43,7 @@ sass_binary(
     name = "checkbox_scss",
     src = "checkbox.scss",
     deps = [
-        "//src/cdk/a11y:a11y_scss_lib",
+        "//src/cdk:sass_lib",
         "//src/material/core:core_scss_lib",
     ],
 )

diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss
@@ -1,10 +1,11 @@
 @use 'sass:math';
+@use '@angular/cdk';
+
 @use '../core/style/elevation';
 @use '../core/style/checkbox-common';
 @use '../core/style/layout-common';
 @use '../core/style/vendor-prefixes';
 @use '../core/style/private';
-@use '../../cdk/a11y';
 @use '../core/style/variables';
 
 // Manual calculation done on SVG
@@ -205,7 +206,7 @@ $_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default;
   }
 
   &.cdk-keyboard-focused .mat-checkbox-ripple {
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       outline: solid 3px;
     }
   }
@@ -287,7 +288,7 @@ $_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default;
     variables.$linear-out-slow-in-timing-function;
 
   // force browser to show background-color when using the print function
-  @include vendor-prefixes.private-color-adjust(exact);
+  @include vendor-prefixes.color-adjust(exact);
 
   ._mat-animation-noopable & {
     transition: none;
@@ -296,7 +297,7 @@ $_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default;
   // `.mat-checkbox` here is redundant, but we need it to increase the specificity so that
   // these styles don't get overwritten by the `background-color` from the theme.
   .mat-checkbox & {
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       // Needs to be removed because it hides the checkbox outline.
       background: none;
     }
@@ -347,7 +348,7 @@ $_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default;
     width: $_mark-stroke-size;
   }
 
-  @include a11y.high-contrast(black-on-white, off) {
+  @include cdk.high-contrast(black-on-white, off) {
     // In the checkbox theme this `stroke` has !important which ends up overriding the browser's
     // automatic color inversion so we need to re-invert it ourselves for black-on-white.
     stroke: #000 !important;
@@ -363,7 +364,7 @@ $_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default;
   transform: scaleX(0) rotate(0deg);
   border-radius: 2px;
 
-  @include a11y.high-contrast(active, off) {
+  @include cdk.high-contrast(active, off) {
     height: 0;
     border-top: solid $height;
     margin-top: $height;
@@ -427,7 +428,7 @@ $_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default;
 .mat-checkbox-disabled {
   cursor: default;
 
-  @include a11y.high-contrast(active, off) {
+  @include cdk.high-contrast(active, off) {
     opacity: 0.5;
   }
 }

diff --git a/src/material/chips/BUILD.bazel b/src/material/chips/BUILD.bazel
@@ -42,7 +42,7 @@ sass_binary(
     name = "chips_scss",
     src = "chips.scss",
     deps = [
-        "//src/cdk/a11y:a11y_scss_lib",
+        "//src/cdk:sass_lib",
         "//src/material/core:core_scss_lib",
     ],
 )

diff --git a/src/material/chips/chips.scss b/src/material/chips/chips.scss
@@ -1,8 +1,9 @@
+@use '@angular/cdk';
+
 @use '../core/style/variables';
 @use '../core/style/elevation';
 @use '../core/style/layout-common';
 @use '../core/style/private';
-@use '../../cdk/a11y';
 
 $chip-min-height: 32px;
 $chip-vertical-padding: 7px;
@@ -88,7 +89,7 @@ $chip-remove-size: 18px;
     }
   }
 
-  @include a11y.high-contrast(active, off) {
+  @include cdk.high-contrast(active, off) {
     outline: solid 1px;
 
     &:focus {

diff --git a/src/material/core/BUILD.bazel b/src/material/core/BUILD.bazel
@@ -62,16 +62,16 @@ sass_library(
         exclude = ALL_THEMING_FILES,
     ),
     deps = [
-        "//src/cdk/a11y:a11y_scss_lib",
-        "//src/cdk/overlay:overlay_scss_lib",
-        "//src/cdk/text-field:text_field_scss_lib",
+        "//src/cdk:sass_lib",
     ],
 )
 
 sass_library(
     name = "theming_scss_lib",
     srcs = ALL_THEMING_FILES,
-    deps = MATERIAL_SCSS_LIBS,
+    deps = MATERIAL_SCSS_LIBS + [
+        "//src/cdk:sass_lib",
+    ],
 )
 
 sass_binary(