refactor(material/button): switch outlined-button to density tokens (#27986)

Author: wagnermaciel

src/material/button/_button-theme.scss

@@ -1,5 +1,4 @@
 @use '@material/button/button' as mdc-button;
-@use '@material/button/button-theme' as mdc-button-theme;
 @use '@material/button/button-text-theme' as mdc-button-text-theme;
 @use '@material/button/button-filled-theme' as mdc-button-filled-theme;
 @use '@material/button/button-protected-theme' as mdc-button-protected-theme;
@@ -256,11 +255,9 @@
   }
 
   .mat-mdc-outlined-button {
-    // 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.$mdc-base-styles-query);
-      @include button-theme-private.touch-target-density($density-scale);
-    }
+    $density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme);
+    @include mdc-button-outlined-theme.theme($density-tokens);
+    @include button-theme-private.touch-target-density($density-scale);
   }
 }
 

src/material/core/tokens/m2/mdc/_outlined-button.scss

@@ -1,7 +1,9 @@
+@use 'sass:map';
 @use '../../token-utils';
 @use '../../../mdc-helpers/mdc-helpers';
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
+@use '../../../theming/theming';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, outlined-button);
@@ -49,9 +51,7 @@ $prefix: (mdc, outlined-button);
     label-text-font: null,
     label-text-weight: null,
     label-text-tracking: null,
-    label-text-transform: null,
-
-    container-height: 36px
+    label-text-transform: null
   );
 }
 
@@ -82,7 +82,20 @@ $prefix: (mdc, outlined-button);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  @return ();
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
+  @return (
+    container-height:
+      map.get(
+        (
+          0: 36px,
+          -1: 32px,
+          -2: 28px,
+          -3: 24px,
+        ),
+        $scale
+      )
+  );
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.