refactor(material/button): switch flat-button to density tokens (#27797)

Author: wagnermaciel

src/material/button/_button-theme.scss

@@ -236,8 +236,13 @@
     @include button-theme-private.touch-target-density($density-scale);
   }
 
+  .mat-mdc-unelevated-button {
+    $density-tokens: tokens-mdc-button-filled.get-density-tokens($theme);
+    @include mdc-button-filled-theme.theme($density-tokens);
+    @include button-theme-private.touch-target-density($density-scale);
+  }
+
   .mat-mdc-button,
-  .mat-mdc-unelevated-button,
   .mat-mdc-outlined-button {
     // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
     &.mat-mdc-button-base {

src/material/core/tokens/m2/mdc/_button-filled.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, button-filled);
@@ -14,15 +16,16 @@ $prefix: (mdc, button-filled);
 // our CSS.
 @function get-unthemable-tokens() {
   @return (
-    container-elevation: 0,
-    container-height: 36px,
     container-shape: 4px,
+    container-elevation: 0,
     disabled-container-elevation: 0,
     focus-container-elevation: 0,
     hover-container-elevation: 0,
     keep-touch-target: false,
     pressed-container-elevation: 0,
 
+    focus-ring-color: null,
+    focus-ring-offset: null,
     focus-state-layer-opacity: null,
     hover-state-layer-opacity: null,
     pressed-state-layer-opacity: null,
@@ -77,7 +80,20 @@ $prefix: (mdc, button-filled);
 
 // 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.

src/material/core/tokens/tests/test-validate-tokens.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '@material/button/button-protected-theme' as mdc-button-protected-theme;
+@use '@material/button/button-filled-theme' as mdc-button-filled-theme;
 @use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
 @use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
@@ -25,6 +26,7 @@
 @use '@material/theme/validate' as mdc-validate;
 
 @use '../m2/mdc/button-protected' as tokens-mdc-button-protected;
+@use '../m2/mdc/button-filled' as tokens-mdc-button-filled;
 @use '../m2/mdc/circular-progress' as tokens-mdc-circular-progress;
 @use '../m2/mdc/linear-progress' as tokens-mdc-linear-progress;
 @use '../m2/mdc/elevated-card' as tokens-mdc-elevated-card;
@@ -160,8 +162,8 @@
 );
 @include validate-slots(
   $component: 'm2.mdc.button-filled',
-  $slots: tokens-mdc-extended-fab.get-token-slots(),
-  $reference: mdc-extended-fab-theme.$extended-light-theme
+  $slots: tokens-mdc-button-filled.get-token-slots(),
+  $reference: mdc-button-filled-theme.$light-theme
 );
 @include validate-slots(
   $component: 'm2.mdc.button-protected',