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

Author: devversion

src/material-experimental/BUILD.bazel

@@ -29,7 +29,7 @@ sass_library(
 )
 
 sass_library(
-    name = "theming_bundle",
+    name = "sass_lib",
     srcs = ["_index.scss"],
     deps = [":theming_scss_lib"],
 )
@@ -38,7 +38,7 @@ ng_package(
     name = "npm_package",
     srcs = ["package.json"],
     data = [
-        ":theming_bundle",
+        ":sass_lib",
         ":theming_scss_lib",
     ],
     tags = ["release-package"],

src/material-experimental/_index.scss

@@ -73,4 +73,4 @@
   mdc-tooltip-typography, mdc-tooltip-density, mdc-tooltip-theme;
 
 // Additional public APIs for individual components
-@forward './mdc-dialog/dialog-legacy-padding' as mdc-dialog-* show mdc-dialog-legacy-padding;
+@forward './mdc-dialog/dialog-legacy-padding' as mdc-dialog-* show mdc-dialog-legacy-padding;

src/material-experimental/column-resize/BUILD.bazel

@@ -21,7 +21,7 @@ sass_library(
     name = "column_resize_scss_lib",
     srcs = glob(["**/_*.scss"]),
     deps = [
-        "//src/material/core:core_scss_lib",
+        "//src/material:sass_lib",
     ],
 )
 

src/material-experimental/column-resize/_column-resize-theme.scss

@@ -1,16 +1,14 @@
 @use 'sass:map';
-@use '../../material/core/style/variables';
-@use '../../material/core/style/vendor-prefixes';
-@use '../../material/core/theming/theming';
+@use '@angular/material' as mat;
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   $primary: map.get($config, primary);
   $foreground: map.get($config, foreground);
 
-  $non-resizable-hover-divider: theming.get-color-from-palette($foreground, divider);
-  $resizable-hover-divider: theming.get-color-from-palette($primary, 600);
-  $resizable-active-divider: theming.get-color-from-palette($primary, 600);
+  $non-resizable-hover-divider: mat.get-color-from-palette($foreground, divider);
+  $resizable-hover-divider: mat.get-color-from-palette($primary, 600);
+  $resizable-active-divider: mat.get-color-from-palette($primary, 600);
 
   // TODO: these styles don't really belong in the `color` part of the theme.
   // We should figure out a better place for them.
@@ -45,8 +43,8 @@
     bottom: 0;
     position: absolute;
     top: 0;
-    transition: background variables.$swift-ease-in-duration
-      variables.$swift-ease-in-timing-function;
+    transition: background mat.$private-swift-ease-in-duration
+      mat.$private-swift-ease-in-timing-function;
     width: 1px;
   }
 
@@ -111,9 +109,9 @@
     background: transparent;
     cursor: col-resize;
     height: 100%;
-    transition: background variables.$swift-ease-in-duration
-      variables.$swift-ease-in-timing-function;
-    @include vendor-prefixes.user-select(none);
+    transition: background mat.$private-swift-ease-in-duration
+      mat.$private-swift-ease-in-timing-function;
+    @include mat.private-user-select(none);
     width: 100%;
 
     &:active {
@@ -142,11 +140,11 @@
 @mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-column-resize') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-column-resize') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

src/material-experimental/mdc-autocomplete/BUILD.bazel

@@ -26,6 +26,7 @@ sass_library(
     name = "mdc_autocomplete_scss_lib",
     srcs = glob(["**/_*.scss"]),
     deps = [
+        "//src/material:sass_lib",
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
     ],
@@ -38,9 +39,9 @@ sass_binary(
         "external/npm/node_modules",
     ],
     deps = [
+        "//src/cdk:sass_lib",
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
-        "//src/material/core:core_scss_lib",
     ],
 )
 

src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss

@@ -1,20 +1,20 @@
+@use '@angular/material' as mat;
 @use '@material/menu-surface/mixins' as mdc-menu-surface;
 @use '@material/list/evolution-mixins' as mdc-list;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     @include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
     @include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query);
   }
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query);
 
@@ -29,11 +29,11 @@
 @mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-autocomplete') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-autocomplete') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

src/material-experimental/mdc-autocomplete/autocomplete.scss

@@ -1,6 +1,6 @@
+@use '@angular/cdk';
 @use '@material/menu-surface/mixins' as mdc-menu-surface;
 @use '@material/list/evolution-mixins' as mdc-list;
-@use '../../cdk/a11y';
 
 @include mdc-menu-surface.core-styles($query: structure);
 
@@ -16,7 +16,7 @@
   transform-origin: center top;
 
   @include mdc-list.list-base($query: structure);
-  @include a11y.high-contrast(active, off) {
+  @include cdk.high-contrast(active, off) {
     outline: solid 1px;
   }
 

src/material-experimental/mdc-button/BUILD.bazel

@@ -35,6 +35,7 @@ sass_library(
     name = "mdc_button_scss_lib",
     srcs = glob(["**/_*.scss"]),
     deps = [
+        "//src/material:sass_lib",
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
     ],
@@ -53,6 +54,7 @@ sass_binary(
     ],
     deps = [
         ":button_base_scss_lib",
+        "//src/material:sass_lib",
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
     ],
@@ -62,7 +64,9 @@ sass_binary(
     name = "button_high_contrast_scss",
     src = "button-high-contrast.scss",
     include_paths = ["external/npm/node_modules"],
-    deps = ["//src/cdk/a11y:a11y_scss_lib"],
+    deps = [
+        "//src/cdk:sass_lib",
+    ],
 )
 
 sass_binary(
@@ -73,6 +77,7 @@ sass_binary(
     ],
     deps = [
         ":button_base_scss_lib",
+        "//src/material:sass_lib",
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
     ],
@@ -86,6 +91,7 @@ sass_binary(
     ],
     deps = [
         ":button_base_scss_lib",
+        "//src/material:sass_lib",
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
     ],

src/material-experimental/mdc-button/_button-base.scss

@@ -1,7 +1,8 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/touch-target' as mdc-touch-target;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/style/layout-common';
 
 // Adds styles necessary to provide stateful interactions with the button. This includes providing
 // content for the state container's ::before and ::after so that they can be given a background
@@ -13,7 +14,7 @@
   .mat-mdc-button-ripple,
   .mat-mdc-button-persistent-ripple,
   .mat-mdc-button-persistent-ripple::before {
-    @include layout-common.fill;
+    @include mat.private-fill;
 
     // Disable pointer events for the ripple container and state overlay because the container
     // will overlay the user content and we don't want to disable mouse events on the user content.
@@ -46,7 +47,7 @@
 
   // The focus indicator should match the bounds of the entire button.
   .mat-mdc-focus-indicator {
-    @include layout-common.fill();
+    @include mat.private-fill();
   }
 }
 

src/material-experimental/mdc-button/_button-theme-private.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
-@use '../../material/core/ripple/ripple-theme';
 
 @mixin _ripple-color($color) {
   --mat-mdc-button-persistent-ripple-color: #{$color};

src/material-experimental/mdc-button/_button-theme.scss

@@ -1,14 +1,14 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/button/button' as mdc-button;
 @use '@material/button/button-theme' as mdc-button-theme;
 @use '@material/button/button-text-theme' as mdc-button-text-theme;
 @use '@material/button/button-filled-theme' as mdc-button-filled-theme;
 @use '@material/button/button-protected-theme' as mdc-button-protected-theme;
 @use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
-@use '../../material/core/typography/typography';
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/theming';
 @use './button-theme-private';
 
 @mixin _button-variant($color) {
@@ -38,7 +38,7 @@
 }
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     $is-dark: map.get($config, is-dark);
     $on-surface: mdc-theme-color.prop-value(on-surface);
@@ -183,15 +183,15 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   .mat-mdc-button,
   .mat-mdc-raised-button,
   .mat-mdc-unelevated-button,
@@ -205,11 +205,11 @@
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-button') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-button') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

src/material-experimental/mdc-button/_fab-theme.scss

@@ -1,10 +1,10 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/fab/fab' as mdc-fab;
 @use '@material/fab/fab-theme' as mdc-fab-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/theming';
-@use '../../material/core/typography/typography';
 @use './button-theme-private';
 
 @mixin _fab-variant($foreground, $background) {
@@ -17,7 +17,7 @@
 }
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     $on-surface: mdc-theme-color.prop-value(on-surface);
     $is-dark: map.get($config, is-dark);
@@ -61,8 +61,8 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-fab.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
@@ -71,11 +71,11 @@
 @mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-fab') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-fab') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);