main - 69d5ebd8a refactor(material/button): switch outlined-button to…

… density tokens (#27986)
angular · Oct 25, 2023 · 002ac70 · 002ac70
1 parent f0baa2f
commit 002ac70
Show file tree

Hide file tree

Showing 17 changed files with 189 additions and 68 deletions.
diff --git a/button/_button-theme.scss b/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;
@@ -13,6 +12,7 @@
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button;
+@use '../core/tokens/m2/mdc/outlined-button' as tokens-mdc-outlined-button;
 @use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button;
 @use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
 
@@ -40,39 +40,6 @@
     $secondary: mdc-theme-color.prop-value(secondary);
     $error: mdc-theme-color.prop-value(error);
 
-    .mat-mdc-outlined-button {
-      @include mdc-button-outlined-theme.theme((
-        outline-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12)
-      ));
-
-      &.mat-unthemed {
-        @include _outlined-button-variant($on-surface);
-      }
-
-      &.mat-primary {
-        @include _outlined-button-variant($primary);
-      }
-
-      &.mat-accent {
-        @include _outlined-button-variant($secondary);
-      }
-
-      &.mat-warn {
-        @include _outlined-button-variant($error);
-      }
-
-      @include button-theme-private.apply-disabled-style() {
-        @include mdc-button-outlined-theme.theme((
-          // We need to pass both the disabled and enabled values, because the enabled
-          // ones apply to anchors while the disabled ones are for buttons.
-          label-text-color: $disabled-ink-color,
-          disabled-label-text-color: $disabled-ink-color,
-          outline-color: rgba($on-surface, 0.12),
-          disabled-outline-color: rgba($on-surface, 0.12),
-        ));
-      }
-    }
-
     // Ripple colors
     .mat-mdc-button, .mat-mdc-outlined-button {
       @include button-theme-private.ripple-theme-styles($theme, false);
@@ -179,6 +146,37 @@
     }
   }
 
+  .mat-mdc-outlined-button {
+    $default-color-tokens: tokens-mdc-outlined-button.get-color-tokens(
+      $theme,
+      $on-surface,
+      $on-surface
+    );
+    $primary-color-tokens: tokens-mdc-outlined-button.get-color-tokens(
+      $theme,
+      $primary,
+      $on-primary
+    );
+    $accent-color-tokens: tokens-mdc-outlined-button.get-color-tokens($theme, $accent, $on-accent);
+    $warn-color-tokens: tokens-mdc-outlined-button.get-color-tokens($theme, $error, $on-error);
+
+    &.mat-unthemed {
+      @include mdc-button-outlined-theme.theme($default-color-tokens);
+    }
+
+    &.mat-primary {
+      @include mdc-button-outlined-theme.theme($primary-color-tokens);
+    }
+
+    &.mat-accent {
+      @include mdc-button-outlined-theme.theme($accent-color-tokens);
+    }
+
+    &.mat-warn {
+      @include mdc-button-outlined-theme.theme($warn-color-tokens);
+    }
+  }
+
   $is-dark: inspection.get-theme-type($theme) == dark;
   $disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
   $disabled-container-color: rgba($on-surface, 0.12);
@@ -206,6 +204,17 @@
     }
   }
 
+  .mat-mdc-outlined-button {
+    @include button-theme-private.apply-disabled-style() {
+      @include mdc-button-outlined-theme.theme((
+        label-text-color: $disabled-ink-color,
+        disabled-label-text-color: $disabled-ink-color,
+        disabled-outline-color: rgba($on-surface, 0.12),
+        outline-color: rgba($on-surface, 0.12),
+      ));
+    }
+  }
+
   .mat-mdc-unelevated-button {
     @include button-theme-private.apply-disabled-style() {
       @include mdc-button-filled-theme.theme((
@@ -246,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);
   }
 }
 

diff --git a/button/_icon-button-theme.scss b/button/_icon-button-theme.scss
@@ -1,6 +1,7 @@
 @use 'sass:math';
 @use '@material/density/functions' as mdc-density-functions;
 @use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
+@use '../core/style/sass-utils';
 @use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
 
 @use './button-theme-private';
@@ -16,7 +17,10 @@ $_icon-size: 24px;
 }
 
 @mixin base($theme) {
-  // TODO(mmalerba): Move icon button base tokens here
+  // Add default values for tokens not related to color, typography, or density.
+  @include sass-utils.current-selector-or-root() {
+    @include mdc-icon-button-theme.theme(tokens-mdc-icon-button.get-unthemable-tokens());
+  }
 }
 
 @mixin color($theme) {

diff --git a/core/tokens/m2/mdc/_outlined-button.scss b/core/tokens/m2/mdc/_outlined-button.scss
@@ -0,0 +1,110 @@
+@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);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    keep-touch-target: false,
+
+    outline-width: 1px,
+    container-shape: 4px,
+
+    hover-state-layer-opacity: null,
+    focus-state-layer-opacity: null,
+    pressed-state-layer-opacity: null,
+
+    focus-state-layer-color: null,
+    hover-state-layer-color: null,
+    pressed-state-layer-color: null,
+
+    hover-label-text-color: null,
+    focus-label-text-color: null,
+    pressed-label-text-color: null,
+
+    hover-outline-color: null,
+    focus-outline-color: null,
+    pressed-outline-color: null,
+
+    focus-ring-color: null,
+    focus-ring-offset: null,
+
+    with-icon-icon-size: null,
+    with-icon-icon-color: null,
+    with-icon-hover-icon-color: null,
+    with-icon-focus-icon-color: null,
+    with-icon-pressed-icon-color: null,
+    with-icon-disabled-icon-color: null,
+
+    label-text-size: null,
+    label-text-font: null,
+    label-text-weight: null,
+    label-text-tracking: null,
+    label-text-transform: null
+  );
+}
+
+@function _on-color($theme, $palette) {
+  @if ($palette) {
+    $is-dark: inspection.get-theme-type($theme) == dark;
+    @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
+  }
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme, $color: null, $on-color: null) {
+  $surface: inspection.get-theme-color($theme, background, card);
+  $on-surface: _on-color($theme, $surface);
+
+  @return (
+    disabled-outline-color: rgba($on-surface, 0.12),
+    disabled-label-text-color: rgba($on-surface, 0.38),
+    label-text-color: if($color, $color, inherit),
+    outline-color: rgba($on-surface, 0.12)
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $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.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+    get-unthemable-tokens(),
+    get-color-tokens(token-utils.$placeholder-color-config),
+    get-typography-tokens(token-utils.$placeholder-typography-config),
+    get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}