fix(material-experimental/mdc-button): density styles being overwritten by structural styles (#22736)

The button's density styles currently have the same specificity as the structural styles which means that they'll usually be overwritten, unless they're nested inside another selector.

These changes add more specificity so that the density always has precedence.

Fixes #22728.

Author: crisbeto

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

@@ -196,8 +196,11 @@
   .mat-mdc-raised-button,
   .mat-mdc-unelevated-button,
   .mat-mdc-outlined-button {
-    @include mdc-button-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
-    @include button-theme-private.touch-target-density($density-scale);
+    // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
+    &.mat-mdc-button-base {
+      @include mdc-button-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
+      @include button-theme-private.touch-target-density($density-scale);
+    }
   }
 }
 

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

@@ -49,7 +49,8 @@
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
-  .mat-mdc-icon-button {
+    // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
+  .mat-mdc-icon-button.mat-mdc-button-base {
     @include mdc-icon-button.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
     @include button-theme-private.touch-target-density($density-scale);
   }