fix(multiple): account for mixed declarations in latest Sass version (#…

…29596) Fixes a ton of warnings that showed up in the latest version of Sass as a result of https://sass-lang.com/documentation/breaking-changes/mixed-decls/. BREAKING CHANGE: * In order for Material to be compatible with [recent changes in Sass](https://sass-lang.com/documentation/breaking-changes/mixed-decls/) and upcoming changes in the CSS standard, tokens are now emitted in-place, rather the being hoisted to the top of the selector. As a result, some token overrides might not apply anymore. This is relevant primarily for the cases like `@include mat.button-theme($theme); --mat-button-color: red;`. It can be resolved by wrapping the overrides with `& {}`, for example `@include mat.button-theme($theme); & { --mat-button-color: red; }`. Fixes #29591.
angular · Aug 20, 2024 · 01711b1 · 01711b1
1 parent 357f6f2
commit 01711b1
Show file tree

Hide file tree

Showing 29 changed files with 272 additions and 214 deletions.
diff --git a/package.json b/package.json
@@ -160,7 +160,7 @@
     "requirejs": "^2.3.6",
     "rollup": "^2.66.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "sass": "^1.68.0",
+    "sass": "^1.77.8",
     "selenium-webdriver": "^3.6.0",
     "semver": "^7.3.5",
     "send": "^0.17.2",

diff --git a/src/material/badge/badge.scss b/src/material/badge/badge.scss
@@ -63,11 +63,6 @@ $large-size: $default-size + 6;
   box-sizing: border-box;
   pointer-events: none;
 
-  @include cdk.high-contrast(active, off) {
-    outline: solid 1px;
-    border-radius: 0;
-  }
-
   @include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) {
     @include token-utils.create-token-slot(background-color, background-color);
     @include token-utils.create-token-slot(color, text-color);
@@ -101,6 +96,11 @@ $large-size: $default-size + 6;
       right: 100%;
     }
   }
+
+  @include cdk.high-contrast(active, off) {
+    outline: solid 1px;
+    border-radius: 0;
+  }
 }
 
 .mat-badge-disabled .mat-badge-content {

diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss
@@ -28,7 +28,6 @@ $_standard-tokens: (
 
 .mat-button-toggle-standalone,
 .mat-button-toggle-group {
-  @include elevation.overridable-elevation(2);
   position: relative;
   display: inline-flex;
   flex-direction: row;
@@ -43,6 +42,8 @@ $_standard-tokens: (
     @include token-utils.create-token-slot(border-radius, shape);
   }
 
+  @include elevation.overridable-elevation(2);
+
   @include cdk.high-contrast(active, off) {
     outline: solid 1px;
   }

diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss
@@ -141,8 +141,6 @@
   @include token-utils.use-tokens($prefix, $slots) {
     $icon-spacing: token-utils.get-token-variable(icon-spacing, true);
     $icon-offset: token-utils.get-token-variable(icon-offset, true);
-    $horizontal-padding: token-utils.get-token-variable(horizontal-padding, true);
-    padding: 0 $horizontal-padding;
 
     @if ($has-with-icon-padding) {
       $with-icon-horizontal-padding:

diff --git a/src/material/button/button.scss b/src/material/button/button.scss
@@ -63,12 +63,9 @@
 .mat-mdc-button {
   $mat-text-button-slots: tokens-mat-text-button.get-token-slots();
 
-  @include button-base.mat-private-button-horizontal-layout(tokens-mat-text-button.$prefix,
-    $mat-text-button-slots, true);
-  @include button-base.mat-private-button-ripple(tokens-mat-text-button.$prefix,
-    $mat-text-button-slots);
-  @include button-base.mat-private-button-touch-target(false, tokens-mat-text-button.$prefix,
-    $mat-text-button-slots);
+  @include token-utils.use-tokens(tokens-mat-text-button.$prefix, $mat-text-button-slots) {
+    padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)};
+  }
 
   @include token-utils.use-tokens(
     tokens-mdc-text-button.$prefix,
@@ -95,19 +92,19 @@
       @include token-utils.create-token-slot(color, disabled-label-text-color);
     }
   }
+
+  @include button-base.mat-private-button-horizontal-layout(tokens-mat-text-button.$prefix,
+    $mat-text-button-slots, true);
+  @include button-base.mat-private-button-ripple(tokens-mat-text-button.$prefix,
+    $mat-text-button-slots);
+  @include button-base.mat-private-button-touch-target(false, tokens-mat-text-button.$prefix,
+    $mat-text-button-slots);
 }
 
 .mat-mdc-unelevated-button {
   $mat-filled-button-slots: tokens-mat-filled-button.get-token-slots();
   transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
 
-  @include button-base.mat-private-button-horizontal-layout(tokens-mat-filled-button.$prefix,
-    $mat-filled-button-slots, false);
-  @include button-base.mat-private-button-ripple(tokens-mat-filled-button.$prefix,
-    $mat-filled-button-slots);
-  @include button-base.mat-private-button-touch-target(false, tokens-mat-filled-button.$prefix,
-    $mat-filled-button-slots);
-
   @include token-utils.use-tokens(
     tokens-mdc-filled-button.$prefix,
     tokens-mdc-filled-button.get-token-slots()
@@ -118,7 +115,23 @@
     @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
     @include token-utils.create-token-slot(text-transform, label-text-transform);
     @include token-utils.create-token-slot(font-weight, label-text-weight);
+  }
+
+  @include token-utils.use-tokens(tokens-mat-filled-button.$prefix, $mat-filled-button-slots) {
+    padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)};
+  }
+
+  @include button-base.mat-private-button-horizontal-layout(tokens-mat-filled-button.$prefix,
+    $mat-filled-button-slots, false);
+  @include button-base.mat-private-button-ripple(tokens-mat-filled-button.$prefix,
+    $mat-filled-button-slots);
+  @include button-base.mat-private-button-touch-target(false, tokens-mat-filled-button.$prefix,
+    $mat-filled-button-slots);
 
+  @include token-utils.use-tokens(
+    tokens-mdc-filled-button.$prefix,
+    tokens-mdc-filled-button.get-token-slots()
+  ) {
     &:not(:disabled) {
       @include token-utils.create-token-slot(color, label-text-color);
       @include token-utils.create-token-slot(background-color, container-color);
@@ -141,13 +154,6 @@
   $mat-protected-button-slots: tokens-mat-protected-button.get-token-slots();
   transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
 
-  @include button-base.mat-private-button-horizontal-layout(tokens-mat-protected-button.$prefix,
-    $mat-protected-button-slots, false);
-  @include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix,
-    $mat-protected-button-slots);
-  @include button-base.mat-private-button-touch-target(false, tokens-mat-protected-button.$prefix,
-    $mat-protected-button-slots);
-
   @include token-utils.use-tokens(
     tokens-mdc-protected-button.$prefix,
     tokens-mdc-protected-button.get-token-slots()
@@ -159,7 +165,26 @@
     @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
     @include token-utils.create-token-slot(text-transform, label-text-transform);
     @include token-utils.create-token-slot(font-weight, label-text-weight);
+  }
+
+  @include token-utils.use-tokens(
+    tokens-mat-protected-button.$prefix,
+    $mat-protected-button-slots
+  ) {
+    padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)};
+  }
+
+  @include button-base.mat-private-button-horizontal-layout(tokens-mat-protected-button.$prefix,
+    $mat-protected-button-slots, false);
+  @include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix,
+    $mat-protected-button-slots);
+  @include button-base.mat-private-button-touch-target(false, tokens-mat-protected-button.$prefix,
+    $mat-protected-button-slots);
 
+  @include token-utils.use-tokens(
+    tokens-mdc-protected-button.$prefix,
+    tokens-mdc-protected-button.get-token-slots()
+  ) {
     &:not(:disabled) {
       @include token-utils.create-token-slot(color, label-text-color);
       @include token-utils.create-token-slot(background-color, container-color);
@@ -199,13 +224,6 @@
   border-style: solid;
   transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1);
 
-  @include button-base.mat-private-button-horizontal-layout(tokens-mat-outlined-button.$prefix,
-    $mat-outlined-button-slots, false);
-  @include button-base.mat-private-button-ripple(tokens-mat-outlined-button.$prefix,
-    $mat-outlined-button-slots);
-  @include button-base.mat-private-button-touch-target(false, tokens-mat-outlined-button.$prefix,
-    $mat-outlined-button-slots);
-
   @include token-utils.use-tokens(
     tokens-mdc-outlined-button.$prefix,
     tokens-mdc-outlined-button.get-token-slots()
@@ -218,7 +236,23 @@
     @include token-utils.create-token-slot(font-weight, label-text-weight);
     @include token-utils.create-token-slot(border-radius, container-shape);
     @include token-utils.create-token-slot(border-width, outline-width);
+  }
+
+  @include token-utils.use-tokens(tokens-mat-outlined-button.$prefix, $mat-outlined-button-slots) {
+    padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)};
+  }
 
+  @include button-base.mat-private-button-horizontal-layout(tokens-mat-outlined-button.$prefix,
+    $mat-outlined-button-slots, false);
+  @include button-base.mat-private-button-ripple(tokens-mat-outlined-button.$prefix,
+    $mat-outlined-button-slots);
+  @include button-base.mat-private-button-touch-target(false, tokens-mat-outlined-button.$prefix,
+    $mat-outlined-button-slots);
+
+  @include token-utils.use-tokens(
+    tokens-mdc-outlined-button.$prefix,
+    tokens-mdc-outlined-button.get-token-slots()
+  ) {
     &:not(:disabled) {
       @include token-utils.create-token-slot(color, label-text-color);
       @include token-utils.create-token-slot(border-color, outline-color);

diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss
@@ -10,8 +10,6 @@
 @use '../core/tokens/m2/mat/fab-small' as tokens-mat-fab-small;
 
 .mat-mdc-fab-base {
-  @include button-base.mat-private-button-interactive();
-  @include style-private.private-animation-noop();
   @include vendor-prefixes.user-select(none);
   position: relative;
   display: inline-flex;
@@ -32,6 +30,9 @@
     transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
   flex-shrink: 0; // Prevent the button from shrinking since it's always supposed to be a circle.
 
+  @include button-base.mat-private-button-interactive();
+  @include style-private.private-animation-noop();
+
   &::before {
     position: absolute;
     box-sizing: border-box;
@@ -114,9 +115,6 @@
 }
 
 @mixin _fab-structure($mdc-tokens, $mat-tokens) {
-  @include button-base.mat-private-button-touch-target(true, $mat-tokens...);
-  @include button-base.mat-private-button-ripple($mat-tokens...);
-
   @include token-utils.use-tokens($mdc-tokens...) {
     @include token-utils.create-token-slot(background-color, container-color);
     @include token-utils.create-token-slot(border-radius, container-shape);
@@ -134,6 +132,9 @@
       @include token-utils.create-token-slot(background-color, disabled-state-container-color);
     }
   }
+
+  @include button-base.mat-private-button-touch-target(true, $mat-tokens...);
+  @include button-base.mat-private-button-ripple($mat-tokens...);
 }
 
 .mat-mdc-fab {
@@ -167,15 +168,6 @@
   max-width: 100%;
   line-height: normal;
 
-  @include _fab-elevation($mdc-tokens);
-
-  @include button-base.mat-private-button-disabled {
-    // Necessary for interactive disabled buttons.
-    &, &:focus {
-      box-shadow: none;
-    }
-  }
-
   @include token-utils.use-tokens($mdc-tokens...) {
     @include token-utils.create-token-slot(height, container-height);
     @include token-utils.create-token-slot(border-radius, container-shape);
@@ -185,6 +177,15 @@
     @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
   }
 
+  @include _fab-elevation($mdc-tokens);
+
+  @include button-base.mat-private-button-disabled {
+    // Necessary for interactive disabled buttons.
+    &, &:focus {
+      box-shadow: none;
+    }
+  }
+
   // stylelint-disable selector-class-pattern
   // For Extended FAB with text label followed by icon.
   // We are checking for the a button class because white this is a FAB it

diff --git a/src/material/button/icon-button.scss b/src/material/button/icon-button.scss
@@ -49,7 +49,17 @@
     // the unused `.mdc-button__icon` class. Explicitly set the font-size here.
     @include token-utils.create-token-slot(font-size, icon-size);
     @include token-utils.create-token-slot(color, icon-color);
+  }
 
+  @include button-base.mat-private-button-interactive();
+  @include button-base.mat-private-button-ripple(tokens-mat-icon-button.$prefix,
+    tokens-mat-icon-button.get-token-slots());
+  @include button-base.mat-private-button-touch-target(true, tokens-mat-icon-button.$prefix,
+    tokens-mat-icon-button.get-token-slots());
+  @include private.private-animation-noop();
+
+  @include token-utils.use-tokens(
+    tokens-mdc-icon-button.$prefix, tokens-mdc-icon-button.get-token-slots()) {
     @include button-base.mat-private-button-disabled {
       @include token-utils.create-token-slot(color, disabled-icon-color);
     };
@@ -62,13 +72,6 @@
     }
   }
 
-  @include button-base.mat-private-button-interactive();
-  @include button-base.mat-private-button-ripple(tokens-mat-icon-button.$prefix,
-    tokens-mat-icon-button.get-token-slots());
-  @include button-base.mat-private-button-touch-target(true, tokens-mat-icon-button.$prefix,
-    tokens-mat-icon-button.get-token-slots());
-  @include private.private-animation-noop();
-
   .mat-mdc-button-persistent-ripple {
     border-radius: 50%;
   }

diff --git a/src/material/checkbox/_checkbox-common.scss b/src/material/checkbox/_checkbox-common.scss
@@ -175,10 +175,10 @@ $_fallback-size: 40px;
       // Always apply the color since the element becomes `opacity: 0`
       // when unchecked. This makes the animation look better.
       @include token-utils.create-token-slot(color, selected-checkmark-color);
+    }
 
-      @include cdk.high-contrast(active, off) {
-        color: CanvasText;
-      }
+    @include cdk.high-contrast(active, off) {
+      color: CanvasText;
     }
   }
 
@@ -214,15 +214,15 @@ $_fallback-size: 40px;
     transition: opacity $_transition-duration $_exit-curve,
                 transform $_transition-duration $_exit-curve;
 
-    @include cdk.high-contrast(active, off) {
-      margin: 0 1px;
-    }
-
     @include token-utils.use-tokens($prefix, $slots) {
       // Always apply the color since the element becomes `opacity: 0`
       // when unchecked. This makes the animation look better.
       @include token-utils.create-token-slot(border-color, selected-checkmark-color);
     }
+
+    @include cdk.high-contrast(active, off) {
+      margin: 0 1px;
+    }
   }
 
   @include token-utils.use-tokens($prefix, $slots) {

diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss
@@ -6,15 +6,15 @@
 @include checkbox-common.checkbox-structure(true);
 
 .mat-mdc-checkbox {
-  @include checkbox-common.checkbox-noop-animations;
-
   // The host node defaults to `display: inline`, we have to change it in order for margins to work.
   display: inline-block;
   // Avoids issues in some CSS grid layouts (see #25153).
   position: relative;
   // Disable the browser's tap highlight since we indicate state with the ripple instead.
   -webkit-tap-highlight-color: transparent;
 
+  @include checkbox-common.checkbox-noop-animations;
+
   // Clicking the label toggles the checkbox, but MDC does not include any styles that inform the
   // user of this. Therefore we add the pointer cursor on top of MDC's styles.
   label {

diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
@@ -642,6 +642,11 @@ $_avatar-trailing-padding: 8px;
   // MDC centers the text, but we have a lot of internal customers who have it at the start.
   text-align: left;
 
+  // Give the text label a higher z-index than the focus overlay to ensure that the focus overlay
+  // does not affect the color of the text. Material spec requires state layer to not interfere with
+  // text color.
+  z-index: 1;
+
   [dir='rtl'] & {
     text-align: right;
   }
@@ -671,11 +676,6 @@ $_avatar-trailing-padding: 8px;
     $offset: calc(#{$border-width} + 2px);
     margin: calc(#{$offset} * -1);
   }
-
-  // Give the text label a higher z-index than the focus overlay to ensure that the focus overlay
-  // does not affect the color of the text. Material spec requires state layer to not interfere with
-  // text color.
-  z-index: 1;
 }
 
 .mat-mdc-chip-remove {