diff --git a/package.json b/package.json
index 28cbfdd7f795..e821603e6074 100644
--- 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
index a83cb5b090c7..cdab2b58a360 100644
--- 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
index 1c98b53f7c4b..09080f5f2037 100644
--- 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
index eb5021150ad2..22d4fbaf8f3d 100644
--- 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
index 7cc65bbcd4d0..86afcbb18f70 100644
--- 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
index 5dbf2b283c35..5622649afe5e 100644
--- 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
index a143ab22afdf..03f56e21520e 100644
--- 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
index ea2b03748564..730f3ee659d9 100644
--- 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
index 5126480836e4..720f72f3d877 100644
--- a/src/material/checkbox/checkbox.scss
+++ b/src/material/checkbox/checkbox.scss
@@ -6,8 +6,6 @@
 @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).
@@ -15,6 +13,8 @@
   // 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
index 78fc2a6eba0c..b117ea70a870 100644
--- 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 {
diff --git a/src/material/core/option/option.scss b/src/material/core/option/option.scss
index 2115da0560bb..a7c66df421d3 100644
--- a/src/material/core/option/option.scss
+++ b/src/material/core/option/option.scss
@@ -71,6 +71,10 @@ $_side-padding: 16px;
     // we can't use directly, because it comes with some selectors.
     cursor: default;
 
+    // Prevent clicking on disabled options with mouse. Support focusing on disabled option using
+    // keyboard, but not with mouse.
+    pointer-events: none;
+
     // Give the visual content of this list item a lower opacity. This creates the "gray" appearance
     // for disabled state. Set the opacity on the pseudo checkbox and projected content. Set
     // opacity only on the visual content rather than the entire list-item so we don't affect the
@@ -81,11 +85,6 @@ $_side-padding: 16px;
     .mat-mdc-option-pseudo-checkbox, .mdc-list-item__primary-text, > mat-icon {
       opacity: 0.38;
     }
-
-    // Prevent clicking on disabled options with mouse. Support focusing on disabled option using
-    // keyboard, but not with mouse.
-    pointer-events: none;
-
   }
 
   // Note that we bump the padding here, rather than padding inside the
@@ -146,7 +145,6 @@ $_side-padding: 16px;
     font-family: inherit;
     text-decoration: inherit;
     text-transform: inherit;
-
     margin-right: auto;
 
     [dir='rtl'] & {
diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
index 206a3a76da6f..a745d9df688e 100644
--- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
+++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
@@ -56,16 +56,17 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
-    .mat-primary {
-      @include _palette-styles($theme, primary);
-    }
-
     // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
     // theme from their parent, rather than implementing their own theming, which is why we
     // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
     // in order to allow for the color to be overwritten if the checkbox is inside a parent that
     // has `mat-accent` and is placed inside another parent that has `mat-primary`.
     @include _palette-styles($theme, accent);
+
+    .mat-primary {
+      @include _palette-styles($theme, primary);
+    }
+
     .mat-accent {
       @include _palette-styles($theme, accent);
     }
diff --git a/src/material/core/style/_list-common.scss b/src/material/core/style/_list-common.scss
index 288c6a876cf0..a258f641ec26 100644
--- a/src/material/core/style/_list-common.scss
+++ b/src/material/core/style/_list-common.scss
@@ -33,14 +33,14 @@
 
 // This mixin provides base styles for the wrapper around mat-line elements in a list.
 @mixin wrapper-base() {
-  @include normalize-text();
-
   display: flex;
   flex-direction: column;
   flex: auto;
   box-sizing: border-box;
   overflow: hidden;
 
+  @include normalize-text();
+
   // Must remove wrapper when lines are empty or it takes up horizontal
   // space and pushes other elements to the right.
   &:empty {
diff --git a/src/material/core/theming/tests/m3-theme.spec.ts b/src/material/core/theming/tests/m3-theme.spec.ts
index b9b5107a0edc..0516495fc7fc 100644
--- a/src/material/core/theming/tests/m3-theme.spec.ts
+++ b/src/material/core/theming/tests/m3-theme.spec.ts
@@ -52,11 +52,11 @@ describe('M3 theme', () => {
       }
     `),
     );
-    const selectors: string[] = [];
+    const selectors = new Set<string>();
     root.walkRules(rule => {
-      selectors.push(rule.selector);
+      selectors.add(rule.selector);
     });
-    expect(selectors).toEqual(['html', '.mat-theme-loaded-marker']);
+    expect(Array.from(selectors)).toEqual(['html', '.mat-theme-loaded-marker']);
   });
 
   it('should only emit CSS variables', () => {
diff --git a/src/material/core/tokens/_m3-tokens.scss b/src/material/core/tokens/_m3-tokens.scss
index a86b2d6333c0..4c6f65990b19 100644
--- a/src/material/core/tokens/_m3-tokens.scss
+++ b/src/material/core/tokens/_m3-tokens.scss
@@ -208,8 +208,10 @@ $_cached-token-slots: null;
     m3-token-definitions.md-sys-color-values-dark($ref),
     m3-token-definitions.md-sys-color-values-light($ref));
 
-  @each $name, $value in $sys-colors {
-    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+  & {
+    @each $name, $value in $sys-colors {
+      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
   }
 }
 
@@ -229,8 +231,10 @@ $_cached-token-slots: null;
         typography-system-variables-prefix) or $_system-level-prefix;
   }
 
-  @each $name, $value in m3-token-definitions.md-sys-typescale-values($ref) {
-    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+  & {
+    @each $name, $value in m3-token-definitions.md-sys-typescale-values($ref) {
+      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
   }
 }
 
@@ -259,20 +263,26 @@ $_cached-token-slots: null;
 }
 
 @mixin system-level-shape($theme, $overrides: (), $prefix: $_system-level-prefix) {
-  @each $name, $value in m3-token-definitions.md-sys-shape-values() {
-    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+  & {
+    @each $name, $value in m3-token-definitions.md-sys-shape-values() {
+      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
   }
 }
 
 @mixin system-level-state($theme, $overrides: (), $prefix: $_system-level-prefix) {
-  @each $name, $value in m3-token-definitions.md-sys-state-values() {
-    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+  & {
+    @each $name, $value in m3-token-definitions.md-sys-state-values() {
+      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
   }
 }
 
 @mixin system-level-motion($theme, $overrides: (), $prefix: $_system-level-prefix) {
-  @each $name, $value in m3-token-definitions.md-sys-motion-values() {
-    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+  & {
+    @each $name, $value in m3-token-definitions.md-sys-motion-values() {
+      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
   }
 }
 
diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss
index 6ac1c4e1acdb..4fbe7df7cca0 100644
--- a/src/material/core/tokens/_token-utils.scss
+++ b/src/material/core/tokens/_token-utils.scss
@@ -123,9 +123,14 @@ $_system-fallbacks: m3-tokens.create-system-fallbacks();
 // Outputs a map of tokens under a specific prefix.
 @mixin create-token-values($prefix, $tokens) {
   @if $tokens != null {
-    @each $key, $value in $tokens {
-      @if $value != null {
-        #{_create-var-name($prefix, $key)}: #{$value};
+    // TODO: The `&` adds to the file size of theme, but it's necessary for compatibility
+    // with https://sass-lang.com/documentation/breaking-changes/mixed-decls/. We should
+    // figure out a better way to do this or move all the concrete styles out of the theme.
+    & {
+      @each $key, $value in $tokens {
+        @if $value != null {
+          #{_create-var-name($prefix, $key)}: #{$value};
+        }
       }
     }
   }
diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss
index e985e20830ac..551c76d88970 100644
--- a/src/material/datepicker/calendar-body.scss
+++ b/src/material/datepicker/calendar-body.scss
@@ -80,7 +80,6 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots(
 }
 
 .mat-calendar-body-cell {
-  @include button-common.reset();
   position: absolute;
   top: 0;
   left: 0;
@@ -91,6 +90,7 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots(
   outline: none;
   font-family: inherit;
   margin: 0;
+  @include button-common.reset();
 }
 
 // We use ::before to apply a background to the body cell, because we need to apply a border
diff --git a/src/material/dialog/dialog.scss b/src/material/dialog/dialog.scss
index 9487190311db..13072c7aee18 100644
--- a/src/material/dialog/dialog.scss
+++ b/src/material/dialog/dialog.scss
@@ -106,6 +106,16 @@ $_emit-fallbacks: true;
   min-width: inherit;
   max-width: inherit;
 
+  @include _use-mat-tokens {
+    @include token-utils.create-token-slot(box-shadow, container-elevation-shadow,
+      $_emit-fallbacks);
+  }
+
+  @include _use-mdc-tokens {
+    @include token-utils.create-token-slot(border-radius, container-shape, $_emit-fallbacks);
+    @include token-utils.create-token-slot(background-color, container-color, $_emit-fallbacks);
+  }
+
   [dir='rtl'] & {
     text-align: right;
   }
@@ -132,16 +142,6 @@ $_emit-fallbacks: true;
     content: '';
     pointer-events: none;
   }
-
-  @include _use-mat-tokens {
-    @include token-utils.create-token-slot(box-shadow, container-elevation-shadow,
-      $_emit-fallbacks);
-  }
-
-  @include _use-mdc-tokens {
-    @include token-utils.create-token-slot(border-radius, container-shape, $_emit-fallbacks);
-    @include token-utils.create-token-slot(background-color, container-color, $_emit-fallbacks);
-  }
 }
 
 .mat-mdc-dialog-title {
@@ -151,6 +151,10 @@ $_emit-fallbacks: true;
   box-sizing: border-box;
   margin: 0 0 1px;
 
+  @include _use-mat-tokens {
+    @include token-utils.create-token-slot(padding, headline-padding, $_emit-fallbacks);
+  }
+
   // This was used by MDC to set the text baseline. We should figure out a way to
   // remove it, because it can introduce unnecessary whitespace at the beginning
   // of the element.
@@ -166,10 +170,6 @@ $_emit-fallbacks: true;
     text-align: right;
   }
 
-  @include _use-mat-tokens {
-    @include token-utils.create-token-slot(padding, headline-padding, $_emit-fallbacks);
-  }
-
   // Nested to maintain the old specificity.
   .mat-mdc-dialog-container & {
     @include _use-mdc-tokens {
@@ -247,10 +247,6 @@ $_emit-fallbacks: true;
   padding: 8px;
   border-top: 1px solid transparent;
 
-  @include cdk.high-contrast(active, off) {
-    border-top-color: CanvasText;
-  }
-
   // For backwards compatibility, actions align at start by default. MDC usually
   // aligns actions at the end of the container.
   @include _use-mat-tokens {
@@ -258,6 +254,10 @@ $_emit-fallbacks: true;
     @include token-utils.create-token-slot(justify-content, actions-alignment, $_emit-fallbacks);
   }
 
+  @include cdk.high-contrast(active, off) {
+    border-top-color: CanvasText;
+  }
+
   // .mat-mdc-dialog-actions-align-{start|center|end} are set by directive input "align"
   // [align='start'], [align='center'] and [align='right'] are kept for backwards compability
   &.mat-mdc-dialog-actions-align-start, &[align='start'] {
diff --git a/src/material/expansion/expansion-panel.scss b/src/material/expansion/expansion-panel.scss
index 0995142c76ac..1c5f8e029730 100644
--- a/src/material/expansion/expansion-panel.scss
+++ b/src/material/expansion/expansion-panel.scss
@@ -6,7 +6,6 @@
 @use '../core/style/elevation';
 
 .mat-expansion-panel {
-  @include elevation.overridable-elevation(2);
   box-sizing: content-box;
   display: block;
   margin: 0;
@@ -25,6 +24,8 @@
     @include token-utils.create-token-slot(border-radius, container-shape);
   }
 
+  @include elevation.overridable-elevation(2);
+
   .mat-accordion & {
     &:not(.mat-expanded), &:not(.mat-expansion-panel-spacing) {
       border-radius: 0;
diff --git a/src/material/form-field/form-field.scss b/src/material/form-field/form-field.scss
index 9c2804ca9bd1..d796ecb06e1a 100644
--- a/src/material/form-field/form-field.scss
+++ b/src/material/form-field/form-field.scss
@@ -45,10 +45,6 @@ $_icon-prefix-infix-padding: 4px;
   // To avoid problems with text-align.
   text-align: left;
 
-  [dir='rtl'] & {
-    text-align: right;
-  }
-
   @include token-utils.use-tokens(tokens-mat-form-field.$prefix,
     tokens-mat-form-field.get-token-slots()) {
     @include vendor-prefixes.smooth-font();
@@ -72,6 +68,10 @@ $_icon-prefix-infix-padding: 4px;
       }
     }
   }
+
+  [dir='rtl'] & {
+    text-align: right;
+  }
 }
 
 // Container that contains the prefixes, infix and suffixes. These elements should
diff --git a/src/material/grid-list/grid-list.scss b/src/material/grid-list/grid-list.scss
index 16edc4d7dcf5..d687513d1e4b 100644
--- a/src/material/grid-list/grid-list.scss
+++ b/src/material/grid-list/grid-list.scss
@@ -24,8 +24,6 @@ $text-padding: 16px;
   // Headers & footers
   .mat-grid-tile-header,
   .mat-grid-tile-footer {
-    @include list-common.normalize-text();
-
     display: flex;
     align-items: center;
     height: $one-line-height;
@@ -39,6 +37,8 @@ $text-padding: 16px;
     left: 0;
     right: 0;
 
+    @include list-common.normalize-text();
+
     &.mat-2-line {
       height: $two-line-height;
     }
@@ -74,8 +74,8 @@ $text-padding: 16px;
   @include token-utils.use-tokens(
     tokens-mat-grid-list.$prefix, tokens-mat-grid-list.get-token-slots()) {
     $secondary-token-name: token-utils.get-token-variable(tile-header-secondary-text-size);
-    @include list-common.base(#{$secondary-token-name});
     @include token-utils.create-token-slot(font-size, tile-header-primary-text-size);
+    @include list-common.base(#{$secondary-token-name});
   }
 }
 
@@ -83,8 +83,8 @@ $text-padding: 16px;
   @include token-utils.use-tokens(
     tokens-mat-grid-list.$prefix, tokens-mat-grid-list.get-token-slots()) {
     $secondary-token-name: token-utils.get-token-variable(tile-footer-secondary-text-size);
-    @include list-common.base(#{$secondary-token-name});
     @include token-utils.create-token-slot(font-size, tile-footer-primary-text-size);
+    @include list-common.base(#{$secondary-token-name});
   }
 }
 
diff --git a/src/material/menu/menu.scss b/src/material/menu/menu.scss
index 9aacabba030f..49b460b8c90d 100644
--- a/src/material/menu/menu.scss
+++ b/src/material/menu/menu.scss
@@ -90,37 +90,8 @@ mat-menu {
   overflow: hidden;
   padding: 0;
 
-  @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
-    $icons-selector: '.material-icons, mat-icon, [matButtonIcon]';
-    $leading-padding: token-utils.get-token-variable(item-leading-spacing);
-    $trailing-padding: token-utils.get-token-variable(item-trailing-spacing);
-    $with-icon-leading-padding:
-      token-utils.get-token-variable(item-with-icon-leading-spacing);
-    $with-icon-trailing-padding:
-      token-utils.get-token-variable(item-with-icon-trailing-spacing);
-
-    padding-left: $leading-padding;
-    padding-right: $trailing-padding;
-
-    [dir='rtl'] & {
-      padding-right: $leading-padding;
-      padding-left: $trailing-padding;
-    }
-
-    &:has(#{$icons-selector}) {
-      padding-left: $with-icon-leading-padding;
-      padding-right: $with-icon-trailing-padding;
-    }
-
-    [dir='rtl'] &:has(#{$icons-selector}) {
-      padding-right: $with-icon-leading-padding;
-      padding-left: $with-icon-trailing-padding;
-    }
-  }
-
   // MDC's menu items are `<li>` nodes which don't need resets, however ours
   // can be anything, including buttons, so we need to do the reset ourselves.
-  @include button-common.reset;
   cursor: pointer;
   width: 100%;
   text-align: left;
@@ -132,6 +103,32 @@ mat-menu {
   margin: 0; // Resolves an issue where buttons have an extra 2px margin on Safari.
   min-height: 48px;
 
+  @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
+    @include token-utils.create-token-slot(padding-left, item-leading-spacing);
+    @include token-utils.create-token-slot(padding-right, item-trailing-spacing);
+  }
+
+  @include button-common.reset;
+
+  @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
+    $icons-selector: '.material-icons, mat-icon, [matButtonIcon]';
+
+    [dir='rtl'] & {
+      @include token-utils.create-token-slot(padding-left, item-trailing-spacing);
+      @include token-utils.create-token-slot(padding-right, item-leading-spacing);
+    }
+
+    &:has(#{$icons-selector}) {
+      @include token-utils.create-token-slot(padding-left, item-with-icon-leading-spacing);
+      @include token-utils.create-token-slot(padding-right, item-with-icon-trailing-spacing);
+    }
+
+    [dir='rtl'] &:has(#{$icons-selector}) {
+      @include token-utils.create-token-slot(padding-left, item-with-icon-trailing-spacing);
+      @include token-utils.create-token-slot(padding-right, item-with-icon-leading-spacing);
+    }
+  }
+
   @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
     // The class selector isn't specific enough to overide the link pseudo selectors so we need
     // to target them specifically, otherwise the item color might be overwritten by the user
diff --git a/src/material/radio/radio.scss b/src/material/radio/radio.scss
index f2ce51c3181d..adb69f8509c7 100644
--- a/src/material/radio/radio.scss
+++ b/src/material/radio/radio.scss
@@ -4,9 +4,10 @@
 @use './radio-common';
 
 .mat-mdc-radio-button {
+  -webkit-tap-highlight-color: transparent;
+
   @include radio-common.radio-structure(true);
   @include radio-common.radio-noop-animations();
-  -webkit-tap-highlight-color: transparent;
 
   @include token-utils.use-tokens(tokens-mat-radio.$prefix, tokens-mat-radio.get-token-slots()) {
     .mdc-radio__background::before {
@@ -90,13 +91,13 @@
   width: 48px;
   transform: translate(-50%, -50%);
 
+  @include token-utils.use-tokens(tokens-mat-radio.$prefix, tokens-mat-radio.get-token-slots()) {
+    @include token-utils.create-token-slot(display, touch-target-display);
+  }
+
   [dir='rtl'] & {
     left: auto;
     right: 50%;
     transform: translate(50%, -50%);
   }
-
-  @include token-utils.use-tokens(tokens-mat-radio.$prefix, tokens-mat-radio.get-token-slots()) {
-    @include token-utils.create-token-slot(display, touch-target-display);
-  }
 }
diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss
index ffc57bb46fcb..5b569b1a748c 100644
--- a/src/material/slide-toggle/_slide-toggle-theme.scss
+++ b/src/material/slide-toggle/_slide-toggle-theme.scss
@@ -42,12 +42,14 @@
       @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
         tokens-mdc-switch.get-color-tokens($theme));
 
-      // TODO(wagnermaciel): Use our token system to define this css variable.
-      --mdc-switch-disabled-label-text-color: #{inspection.get-theme-color(
-          $theme,
-          foreground,
-          disabled-text
-        )};
+      & {
+        // TODO(wagnermaciel): Use our token system to define this css variable.
+        --mdc-switch-disabled-label-text-color: #{inspection.get-theme-color(
+            $theme,
+            foreground,
+            disabled-text
+          )};
+      }
 
       .mat-mdc-slide-toggle {
         @include token-utils.create-token-values(tokens-mat-switch.$prefix,
diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
index 6dc448cf6781..a0a60085b034 100644
--- a/src/material/slide-toggle/slide-toggle.scss
+++ b/src/material/slide-toggle/slide-toggle.scss
@@ -22,6 +22,10 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
   padding: 0;
   position: relative;
 
+  @include token-utils.use-tokens($_mdc-slots...) {
+    @include token-utils.create-token-slot(width, track-width);
+  }
+
   &.mdc-switch--disabled {
     cursor: default;
     pointer-events: none;
@@ -30,10 +34,6 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
   &.mat-mdc-slide-toggle-disabled-interactive {
     pointer-events: auto;
   }
-
-  @include token-utils.use-tokens($_mdc-slots...) {
-    @include token-utils.create-token-slot(width, track-width);
-  }
 }
 
 .mdc-switch__track {
@@ -61,10 +61,6 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
     position: absolute;
     width: 100%;
 
-    @include cdk.high-contrast(active, off) {
-      border-color: currentColor;
-    }
-
     @include token-utils.use-tokens($_mat-slots...) {
       @include token-utils.create-token-slot(border-width, track-outline-width);
       @include token-utils.create-token-slot(border-color, track-outline-color);
@@ -83,10 +79,18 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
     }
   }
 
+  @include cdk.high-contrast(active, off) {
+    border-color: currentColor;
+  }
+
   &::before {
     transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
     transform: translateX(0);
 
+    @include token-utils.use-tokens($_mdc-slots...) {
+      @include token-utils.create-token-slot(background, unselected-track-color);
+    }
+
     .mdc-switch--selected & {
       transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
       transform: translateX(100%);
@@ -109,8 +113,6 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
     }
 
     @include token-utils.use-tokens($_mdc-slots...) {
-      @include token-utils.create-token-slot(background, unselected-track-color);
-
       .mdc-switch:enabled:hover:not(:focus):not(:active) & {
         @include token-utils.create-token-slot(background, unselected-hover-track-color);
       }
@@ -135,6 +137,10 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
   &::after {
     transform: translateX(-100%);
 
+    @include token-utils.use-tokens($_mdc-slots...) {
+      @include token-utils.create-token-slot(background, selected-track-color);
+    }
+
     [dir='rtl'] & {
       transform: translateX(100%);
     }
@@ -156,8 +162,6 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
     }
 
     @include token-utils.use-tokens($_mdc-slots...) {
-      @include token-utils.create-token-slot(background, selected-track-color);
-
       .mdc-switch:enabled:hover:not(:focus):not(:active) & {
         @include token-utils.create-token-slot(background, selected-hover-track-color);
       }
@@ -190,6 +194,10 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
   right: auto;
   transform: translateX(0);
 
+  @include token-utils.use-tokens($_mdc-slots...) {
+    width: calc(100% - #{token-utils.get-token-variable(handle-width)});
+  }
+
   [dir='rtl'] & {
     left: auto;
     right: 0;
@@ -202,10 +210,6 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
       transform: translateX(-100%);
     }
   }
-
-  @include token-utils.use-tokens($_mdc-slots...) {
-    width: calc(100% - #{token-utils.get-token-variable(handle-width)});
-  }
 }
 
 .mdc-switch__handle {
@@ -224,17 +228,17 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
     height 75ms cubic-bezier(0.4, 0, 0.2, 1),
     margin 75ms cubic-bezier(0.4, 0, 0.2, 1);
 
-  [dir='rtl'] & {
-    left: auto;
-    right: 0;
-  }
-
   @include token-utils.use-tokens($_mdc-slots...) {
     @include token-utils.create-token-slot(width, handle-width);
     @include token-utils.create-token-slot(height, handle-height);
     @include token-utils.create-token-slot(border-radius, handle-shape);
   }
 
+  [dir='rtl'] & {
+    left: auto;
+    right: 0;
+  }
+
   @include token-utils.use-tokens($_mat-slots...) {
     .mat-mdc-slide-toggle .mdc-switch--unselected & {
       @include token-utils.create-token-slot(width, unselected-handle-size);
diff --git a/src/material/stepper/stepper.scss b/src/material/stepper/stepper.scss
index f3b564549b47..3ae896c55f3a 100644
--- a/src/material/stepper/stepper.scss
+++ b/src/material/stepper/stepper.scss
@@ -77,6 +77,11 @@
   align-items: center;
   padding: 0 stepper-variables.$side-gap;
 
+  @include token-utils.use-tokens(
+    tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) {
+    @include token-utils.create-token-slot(height, header-height);
+  }
+
   .mat-step-icon {
     margin-right: stepper-variables.$line-gap;
     flex: none;
@@ -90,7 +95,6 @@
   @include token-utils.use-tokens(
     tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) {
     $vertical-padding: _get-vertical-padding-calc();
-    @include token-utils.create-token-slot(height, header-height);
 
     &::before,
     &::after {
@@ -192,27 +196,27 @@
 }
 
 .mat-horizontal-content-container {
+  overflow: hidden;
+  padding: 0 stepper-variables.$side-gap stepper-variables.$side-gap stepper-variables.$side-gap;
+
   @include cdk.high-contrast(active, off) {
     outline: solid 1px;
   }
 
-  overflow: hidden;
-  padding: 0 stepper-variables.$side-gap stepper-variables.$side-gap stepper-variables.$side-gap;
-
   .mat-stepper-header-position-bottom & {
     padding: stepper-variables.$side-gap stepper-variables.$side-gap 0 stepper-variables.$side-gap;
   }
 }
 
 .mat-vertical-content-container {
-  @include cdk.high-contrast(active, off) {
-    outline: solid 1px;
-  }
-
   margin-left: stepper-variables.$vertical-stepper-content-margin;
   border: 0;
   position: relative;
 
+  @include cdk.high-contrast(active, off) {
+    outline: solid 1px;
+  }
+
   [dir='rtl'] & {
     margin-left: 0;
     margin-right: stepper-variables.$vertical-stepper-content-margin;
diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss
index 241c7a2a28a7..bce22fab4a70 100644
--- a/src/material/tabs/_tabs-common.scss
+++ b/src/material/tabs/_tabs-common.scss
@@ -109,6 +109,17 @@ $mat-tab-animation-duration: 500ms !default;
     @include token-utils.create-token-slot(height, container-height);
   }
 
+  @include token-utils.use-tokens(
+    tokens-mat-tab-header.$prefix,
+    tokens-mat-tab-header.get-token-slots()
+  ) {
+    @include token-utils.create-token-slot(font-family, label-text-font);
+    @include token-utils.create-token-slot(font-size, label-text-size);
+    @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
+    @include token-utils.create-token-slot(line-height, label-text-line-height);
+    @include token-utils.create-token-slot(font-weight, label-text-weight);
+  }
+
   &.mdc-tab {
     // MDC's tabs stretch to fit the header by default, whereas stretching on our current ones
     // is an opt-in behavior. Also technically we don't need to combine the two classes, but
@@ -131,12 +142,6 @@ $mat-tab-animation-duration: 500ms !default;
     tokens-mat-tab-header.$prefix,
     tokens-mat-tab-header.get-token-slots()
   ) {
-    @include token-utils.create-token-slot(font-family, label-text-font);
-    @include token-utils.create-token-slot(font-size, label-text-size);
-    @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
-    @include token-utils.create-token-slot(line-height, label-text-line-height);
-    @include token-utils.create-token-slot(font-weight, label-text-weight);
-
     &:hover .mdc-tab__text-label {
       @include token-utils.create-token-slot(color, inactive-hover-label-text-color);
     }
diff --git a/src/material/tabs/tab-group.scss b/src/material/tabs/tab-group.scss
index 4b03eee5b8c5..2ac03c19965a 100644
--- a/src/material/tabs/tab-group.scss
+++ b/src/material/tabs/tab-group.scss
@@ -14,13 +14,14 @@
 }
 
 .mat-mdc-tab-group {
-  @include tabs-common.paginated-tab-header-with-background('.mat-mdc-tab-header', '.mat-mdc-tab');
   display: flex;
   flex-direction: column;
 
   // Fixes pagination issues inside flex containers (see #23157).
   max-width: 100%;
 
+  @include tabs-common.paginated-tab-header-with-background('.mat-mdc-tab-header', '.mat-mdc-tab');
+
   &.mat-mdc-tab-group-inverted-header {
     flex-direction: column-reverse;
 
@@ -32,9 +33,10 @@
 
 // The bottom section of the view; contains the tab bodies
 .mat-mdc-tab-body-wrapper {
-  @include private.private-animation-noop();
   position: relative;
   overflow: hidden;
   display: flex;
   transition: height tabs-common.$mat-tab-animation-duration variables.$ease-in-out-curve-function;
+
+  @include private.private-animation-noop();
 }
diff --git a/yarn.lock b/yarn.lock
index f75384bd2bb4..f5c6872734ca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13874,7 +13874,7 @@ sass@1.77.2:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-sass@1.77.8:
+sass@1.77.8, sass@^1.77.8:
   version "1.77.8"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.8.tgz#9f18b449ea401759ef7ec1752a16373e296b52bd"
   integrity sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==
@@ -13883,15 +13883,6 @@ sass@1.77.8:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-sass@^1.68.0:
-  version "1.77.6"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.6.tgz#898845c1348078c2e6d1b64f9ee06b3f8bd489e4"
-  integrity sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==
-  dependencies:
-    chokidar ">=3.0.0 <4.0.0"
-    immutable "^4.0.0"
-    source-map-js ">=0.6.2 <2.0.0"
-
 saucelabs@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.5.0.tgz#9405a73c360d449b232839919a86c396d379fd9d"