refactor(multiple): disable CSS variable fallbacks in MDC components (#24415)

Since we don't support IE, we don't have to include a fallback for CSS variables in the MDC components.

Author: crisbeto

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

@@ -10,8 +10,10 @@ $mat-card-header-size: 40px !default;
 // Default padding for text content within a card.
 $mat-card-default-padding: 16px !default;
 
-// Include all MDC card styles except for color and typography.
-@include mdc-card.without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-helpers.disable-fallback-declarations {
+  // Include all MDC card styles except for color and typography.
+  @include mdc-card.without-ripple($query: mdc-helpers.$mat-base-styles-query);
+}
 
 // Title text and subtitles text within a card. MDC doesn't have pre-made title sections for cards.
 // Maintained here for backwards compatibility with the previous generation MatCard.

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

@@ -9,7 +9,10 @@ $mat-dialog-content-max-height: 65vh !default;
 // don't expose this value as variable.
 $mat-dialog-button-horizontal-margin: 8px !default;
 
-@include mdc-dialog.core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-helpers.disable-fallback-declarations {
+  @include mdc-dialog.core-styles($query: mdc-helpers.$mat-base-styles-query);
+}
+
 @include mdc-dialog-structure-overrides.private-dialog-structure-overrides(
   $mat-dialog-content-max-height);
 

src/material-experimental/mdc-form-field/form-field.scss

@@ -12,13 +12,16 @@
 @use '../mdc-helpers/mdc-helpers';
 
 // Base styles for MDC text-field, notched-outline, floating label and line-ripple.
-@include mdc-textfield.without-ripple(
-  $query: mdc-helpers.$mat-base-styles-without-animation-query);
-@include mdc-floating-label.core-styles(
-  $query: mdc-helpers.$mat-base-styles-without-animation-query);
-@include mdc-notched-outline.core-styles(
-  $query: mdc-helpers.$mat-base-styles-without-animation-query);
-@include mdc-line-ripple.core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
+@include mdc-helpers.disable-fallback-declarations {
+  @include mdc-textfield.without-ripple(
+    $query: mdc-helpers.$mat-base-styles-without-animation-query);
+  @include mdc-floating-label.core-styles(
+    $query: mdc-helpers.$mat-base-styles-without-animation-query);
+  @include mdc-notched-outline.core-styles(
+    $query: mdc-helpers.$mat-base-styles-without-animation-query);
+  @include mdc-line-ripple.core-styles(
+    $query: mdc-helpers.$mat-base-styles-without-animation-query);
+}
 
 // MDC text-field overwrites.
 @include mdc-text-field-textarea-overrides.private-text-field-textarea-overrides();
@@ -119,8 +122,10 @@
 // In order to make it possible for developers to disable animations for form-fields,
 // we only activate the animation styles if animations are not explicitly disabled.
 .mat-mdc-form-field:not(.mat-form-field-no-animations) {
-  @include mdc-textfield.without-ripple($query: animation);
-  @include mdc-floating-label.core-styles($query: animation);
-  @include mdc-notched-outline.core-styles($query: animation);
-  @include mdc-line-ripple.core-styles($query: animation);
+  @include mdc-helpers.disable-fallback-declarations {
+    @include mdc-textfield.without-ripple($query: animation);
+    @include mdc-floating-label.core-styles($query: animation);
+    @include mdc-notched-outline.core-styles($query: animation);
+    @include mdc-line-ripple.core-styles($query: animation);
+  }
 }

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

@@ -7,7 +7,9 @@
 @use '../../cdk/a11y';
 @use '../mdc-helpers/mdc-helpers';
 
-@include mdc-menu-surface.core-styles($query: structure);
+@include mdc-helpers.disable-fallback-declarations {
+  @include mdc-menu-surface.core-styles($query: structure);
+}
 
 // Prevent rendering mat-menu as it can affect the flex layout.
 mat-menu {
@@ -37,9 +39,11 @@ mat-menu {
 }
 
 .mat-mdc-menu-item {
-  @include mdc-list-mixins.item-base;
-  @include mdc-list-mixins.item-spacing(
-    mdc-list-variables.$side-padding, $query: mdc-helpers.$mat-base-styles-query);
+  @include mdc-helpers.disable-fallback-declarations {
+    @include mdc-list-mixins.item-base;
+    @include mdc-list-mixins.item-spacing(
+      mdc-list-variables.$side-padding, $query: mdc-helpers.$mat-base-styles-query);
+  }
 
   // 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.

src/material-experimental/mdc-progress-bar/progress-bar.scss

@@ -1,7 +1,9 @@
 @use '@material/linear-progress' as mdc-linear-progress;
 @use '../mdc-helpers/mdc-helpers';
 
-@include mdc-linear-progress.core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-helpers.disable-fallback-declarations {
+  @include mdc-linear-progress.core-styles($query: mdc-helpers.$mat-base-styles-query);
+}
 
 .mat-mdc-progress-bar {
   // Explicitly set to `block` since the browser defaults custom elements to `inline`.

src/material-experimental/mdc-progress-spinner/progress-spinner.scss

@@ -2,7 +2,9 @@
 @use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y';
 
-@include mdc-circular-progress.core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-helpers.disable-fallback-declarations {
+  @include mdc-circular-progress.core-styles($query: mdc-helpers.$mat-base-styles-query);
+}
 
 .mat-mdc-progress-spinner {
   // Explicitly set to `block` since the browser defaults custom elements to `inline`.

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

@@ -1,7 +1,9 @@
 @use '@material/slider/slider' as mdc-slider;
 @use '../mdc-helpers/mdc-helpers';
 
-@include mdc-slider.without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-helpers.disable-fallback-declarations {
+  @include mdc-slider.without-ripple($query: mdc-helpers.$mat-base-styles-query);
+}
 
 $mat-slider-min-size: 128px !default;
 $mat-slider-horizontal-margin: 8px !default;

src/material-experimental/mdc-snack-bar/snack-bar-container.scss

@@ -2,7 +2,9 @@
 @use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y';
 
-@include mdc-snackbar.core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-helpers.disable-fallback-declarations {
+  @include mdc-snackbar.core-styles($query: mdc-helpers.$mat-base-styles-query);
+}
 
 // MDC sets the position as fixed and sets the container on the bottom center of the page (or
 // otherwise can be set to be "leading"). Our overlay handles a more advanced configuration