Project import generated by Copybara.

PiperOrigin-RevId: 358465241

Author: Angular Material Team

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

@@ -6,7 +6,7 @@
   $config: mat-get-color-config($config-or-theme);
   @include mat-using-mdc-theme($config) {
     @include mdc-menu-surface-core-styles($mat-theme-styles-query);
-    @include mdc-list-without-ripple($mat-theme-styles-query);
+    @include mdc-list-deprecated-without-ripple($mat-theme-styles-query);
   }
 }
 
@@ -18,7 +18,7 @@
     .mat-mdc-autocomplete-panel {
       // Note that we include this private mixin, because the public one adds
       // a bunch of styles that we aren't using for the autocomplete panel.
-      @include mdc-list-base_($mat-typography-styles-query);
+      @include mdc-list-deprecated-base_($mat-typography-styles-query);
     }
   }
 }

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

@@ -19,7 +19,7 @@
 
   // Note that we include this private mixin, because the public
   // one adds a bunch of styles that we aren't using for the menu.
-  @include mdc-list-base_($query: structure);
+  @include mdc-list-deprecated-base_($query: structure);
   @include cdk-high-contrast(active, off) {
     outline: solid 1px;
   }

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

@@ -1,3 +1,5 @@
+@use '@material/button/button';
+
 @import '@material/button/mixins.import';
 @import '@material/button/variables.import';
 @import '@material/ripple/mixins.import';
@@ -10,20 +12,32 @@
 .mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
   @include mat-private-button-interactive();
   @include mat-private-button-disabled();
+}
+
+// MDC expects button icons to contain this HTML content:
+// ```html
+//   <span class="mdc-button__icon material-icons">favorite</span>
+// ```
+// However, Angular Material expects a `mat-icon` instead. The following
+// mixins will style the icons appropriately.
+.mat-mdc-button {
+  .mat-icon {
+    @include button.icon();
+  }
+ .mdc-button__label + .mat-icon {
+   @include button.icon-trailing();
+ }
+}
 
-  // MDC expects button icons to contain this HTML content:
-  // ```html
-  //   <span class="mdc-button__icon material-icons">favorite</span>
-  // ```
-  // However, Angular Material expects a `mat-icon` instead. The following
-  // will extend the `mdc-button__icon` styling to the mat icon. Note that
-  // the extended styles inherently only match icons that nest themselves in
-  // a parent `mdc-button`.
-  //
-  // TODO(mmalerba): Have MDC create a mixin for this so we don't have to rely on extending their
-  //  class.
+.mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
+  // Icons inside contained buttons have different styles due to increased button padding
   .mat-icon {
-    @extend .mdc-button__icon;
+    @include button.icon();
+    @include button.icon-contained();
+  }
+
+  .mdc-button__label + .mat-icon {
+    @include button.icon-contained-trailing();
   }
 }
 

src/material-experimental/mdc-core/option/_optgroup-theme.scss

@@ -13,8 +13,8 @@
       // Since this will usually be rendered in an overlay,
       // we have explicitly set the default color.
       @include mdc-theme-prop(color, text-primary-on-background);
-      @include mdc-list-item-disabled-text-color($mdc-list-text-disabled-color,
-        $query: $mat-theme-styles-query);
+      @include mdc-list-deprecated-item-disabled-text-color(
+        $mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query);
     }
   }
 }

src/material-experimental/mdc-core/option/_option-theme.scss

@@ -14,8 +14,8 @@
       // Since this will usually be rendered in an overlay,
       // we have explicitly set the default color.
       @include mdc-theme-prop(color, text-primary-on-background);
-      @include mdc-list-item-disabled-text-color($mdc-list-text-disabled-color,
-        $query: $mat-theme-styles-query);
+      @include mdc-list-deprecated-item-disabled-text-color(
+        $mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query);
 
       &:hover:not(.mdc-list-item--disabled),
       &:focus:not(.mdc-list-item--disabled),
@@ -29,15 +29,18 @@
     }
 
     .mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-      @include mdc-list-item-primary-text-ink-color(primary, $query: $mat-theme-styles-query);
+      @include mdc-list-deprecated-item-primary-text-ink-color(
+        primary, $query: $mat-theme-styles-query);
     }
 
     .mat-accent .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-      @include mdc-list-item-primary-text-ink-color(secondary, $query: $mat-theme-styles-query);
+      @include mdc-list-deprecated-item-primary-text-ink-color(
+        secondary, $query: $mat-theme-styles-query);
     }
 
     .mat-warn .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-      @include mdc-list-item-primary-text-ink-color(error, $query: $mat-theme-styles-query);
+      @include mdc-list-deprecated-item-primary-text-ink-color(
+        error, $query: $mat-theme-styles-query);
     }
   }
 }

src/material-experimental/mdc-core/option/optgroup.scss

@@ -3,11 +3,11 @@
 @import '../../mdc-helpers/mdc-helpers';
 
 .mat-mdc-optgroup-label {
-  @include mdc-list-item-base_;
-  @include mdc-list-list-item-padding-variant(
-    $mdc-list-textual-variant-config, $query: $mat-base-styles-query);
-  @include mdc-list-list-item-height-variant(
-    $mdc-list-textual-variant-config, $query: $mat-base-styles-query);
-  @include mdc-list-item-disabled-text-opacity($mdc-list-text-disabled-opacity,
-    $query: $mat-base-styles-query);
+  @include mdc-list-deprecated-item-base_;
+  @include mdc-list-deprecated-list-item-padding-variant(
+    $mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query);
+  @include mdc-list-deprecated-list-item-height-variant(
+    $mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query);
+  @include mdc-list-deprecated-item-disabled-text-opacity(
+    $mdc-list-deprecated-text-disabled-opacity, $query: $mat-base-styles-query);
 }

src/material-experimental/mdc-core/option/option.scss

@@ -7,17 +7,17 @@
 .mat-mdc-option {
   // Note that we include this private mixin, because the public
   // one adds a bunch of styles that we aren't using for the menu.
-  @include mdc-list-item-base_;
-  @include mdc-list-list-item-padding-variant(
-    $mdc-list-textual-variant-config, $query: $mat-base-styles-query);
-  @include mdc-list-item-disabled-text-opacity($mdc-list-text-disabled-opacity,
-    $query: $mat-base-styles-query);
+  @include mdc-list-deprecated-item-base_;
+  @include mdc-list-deprecated-list-item-padding-variant(
+    $mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query);
+  @include mdc-list-deprecated-item-disabled-text-opacity(
+    $mdc-list-deprecated-text-disabled-opacity, $query: $mat-base-styles-query);
   @include user-select(none);
 
   // Set the `min-height` here ourselves, instead of going through
   // the `mdc-list-list-item-height-variant` mixin, because it sets a `height`
   // which doesn't work well with multi-line options.
-  min-height: map-get($mdc-list-textual-variant-config, single-line-height);
+  min-height: map-get($mdc-list-deprecated-textual-variant-config, single-line-height);
 
   // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
   // element that will stretch the option to the correct height. See:
@@ -35,20 +35,20 @@
   // Note that we bump the padding here, rather than padding inside the
   // group so that ripples still reach to the edges of the panel.
   .mat-mdc-optgroup &:not(.mat-mdc-option-multiple) {
-    padding-left: $mdc-list-side-padding * 2;
+    padding-left: $mdc-list-deprecated-side-padding * 2;
 
     [dir='rtl'] & {
-      padding-left: $mdc-list-side-padding;
-      padding-right: $mdc-list-side-padding * 2;
+      padding-left: $mdc-list-deprecated-side-padding;
+      padding-right: $mdc-list-deprecated-side-padding * 2;
     }
   }
 
   .mat-pseudo-checkbox {
-    margin-right: $mdc-list-side-padding;
+    margin-right: $mdc-list-deprecated-side-padding;
 
     [dir='rtl'] & {
       margin-right: 0;
-      margin-left: $mdc-list-side-padding;
+      margin-left: $mdc-list-deprecated-side-padding;
     }
   }
 

src/material-experimental/mdc-helpers/_mdc-helpers.scss

@@ -120,9 +120,9 @@ $mat-typography-2018-level-mappings: (
   // variables with no fallback value, which breaks some builds.
   $result: ();
   @each $property, $value in $result-with-nulls {
-    @if $value != null {
+    //@if $value != null {
       $result: map-merge($result, ($property: $value));
-    }
+    //}
   }
   @return $result;
 }

src/material-experimental/mdc-list/_list-option-theme.scss

@@ -13,8 +13,8 @@
   }
 
   &.mdc-list-item--selected {
-    @include mdc-list-item-primary-text-ink-color($color);
-    @include mdc-list-item-graphic-ink-color($color);
+    @include mdc-list-deprecated-item-primary-text-ink-color($color);
+    @include mdc-list-deprecated-item-graphic-ink-color($color);
 
     &::before {
       @include mdc-theme-prop(background, $color);

src/material-experimental/mdc-list/_list-theme.scss

@@ -18,7 +18,7 @@
   @include mat-mdc-private-interactive-list-item-state-colors($config);
 
   @include mat-using-mdc-theme($config) {
-    @include mdc-list-without-ripple($query: $mat-theme-styles-query);
+    @include mdc-list-deprecated-without-ripple($query: $mat-theme-styles-query);
 
     .mat-mdc-list-option {
       @include mat-mdc-private-list-option-color-override(primary);
@@ -35,7 +35,7 @@
 @mixin mat-mdc-list-density($config-or-theme) {
   $density-scale: mat-get-density-config($config-or-theme);
   $height: density.prop-value(
-    $density-config: $mdc-list-single-line-density-config,
+    $density-config: $mdc-list-deprecated-single-line-density-config,
     $density-scale: $density-scale,
     $property-name: height,
   );
@@ -45,7 +45,7 @@
   // the styles should actually only affect single-line list items. This has been reported as
   // a bug in the MDC repository: https://github.com/material-components/material-components-web/issues/5737.
   .mat-mdc-list-item-single-line {
-    @include mdc-list-single-line-height($height);
+    @include mdc-list-deprecated-single-line-height($height);
   }
 
   @include mat-mdc-private-list-option-density-styles($density-scale);
@@ -54,7 +54,7 @@
 @mixin mat-mdc-list-typography($config-or-theme) {
   $config: mat-get-typography-config($config-or-theme);
   @include mat-using-mdc-typography($config) {
-    @include mdc-list-without-ripple($query: $mat-typography-styles-query);
+    @include mdc-list-deprecated-without-ripple($query: $mat-typography-styles-query);
     @include mat-mdc-private-list-option-typography-styles();
   }
 }