feat(button): m3 elevation + icon base theme modules

PiperOrigin-RevId: 397814721

Author: allan-chen

components/button/lib/_elevated-button.scss

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+@use './elevation';
+
 @mixin static-styles() {
-  // Intentionally blank for future-proofing.
+  @include elevation.static-styles;
 }

components/button/lib/_elevation-theme.scss

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/elevation/elevation-theme';
+@use '@material/ripple/ripple-theme';
+@use '@material/theme/state';
+@use '@material/theme/theme';
+@use '@material/tokens/resolvers';
+
+@use './button-theme';
+
+$_selectors: button-theme.$selectors;
+
+@mixin theme-styles($theme, $resolvers) {
+  $elevation-resolver: map.get($resolvers, elevation);
+  @include _elevation(
+    $elevation-resolver,
+    $elevation-map: (
+      default: map.get($theme, container-elevation),
+      disabled: map.get($theme, disabled-container-elevation),
+      focus: map.get($theme, focus-container-elevation),
+      hover: map.get($theme, hover-container-elevation),
+      pressed: map.get($theme, pressed-container-elevation)
+    ),
+    $shadow-color: map.get($theme, container-shadow-color)
+  );
+}
+
+@mixin _elevation($elevation-resolver, $elevation-map, $shadow-color) {
+  @include state.default($_selectors) {
+    @include elevation-theme.with-resolver(
+      $elevation-resolver,
+      $elevation: state.get-default-state($elevation-map),
+      $shadow-color: $shadow-color
+    );
+  }
+
+  @include state.focus($_selectors) {
+    @include elevation-theme.with-resolver(
+      $elevation-resolver,
+      $elevation: state.get-focus-state($elevation-map),
+      $shadow-color: $shadow-color
+    );
+  }
+
+  @include state.hover($_selectors) {
+    @include elevation-theme.with-resolver(
+      $elevation-resolver,
+      $elevation: state.get-hover-state($elevation-map),
+      $shadow-color: $shadow-color
+    );
+  }
+
+  @include state.pressed($_selectors) {
+    @include elevation-theme.with-resolver(
+      $elevation-resolver,
+      $elevation: state.get-pressed-state($elevation-map),
+      $shadow-color: $shadow-color
+    );
+  }
+
+  @include state.disabled($_selectors) {
+    @include elevation-theme.with-resolver(
+      $elevation-resolver,
+      $elevation: state.get-disabled-state($elevation-map),
+      $shadow-color: $shadow-color
+    );
+  }
+}
+
+@function resolve-theme-elevation-keys($theme, $resolver) {
+  $elevation-resolver: map.get($resolver, elevation);
+  $shadow-color: map.get($theme, container-shadow-color);
+  @if $elevation-resolver == null {
+    @return $theme;
+  }
+
+  $elevation-keys: (
+    container-elevation,
+    hover-container-elevation,
+    focus-container-elevation,
+    pressed-container-elevation,
+    disabled-container-elevation
+  );
+
+  @each $key in $elevation-keys {
+    $elevation: map.get($theme, $key);
+    $resolved-value: meta.call(
+      $resolver,
+      $elevation: $elevation,
+      $shadow-color: $shadow-color
+    );
+    // Update the key with the resolved value.
+    $theme: map.set($theme, $key, $resolved-value);
+  }
+  @return $theme;
+}

components/button/lib/_elevation.scss

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// stylelint-disable selector-class-pattern --
+// Selector '.mdc-*' should only be used in this project.
+
+@use '@material/elevation/elevation-theme';
+
+@mixin static-styles() {
+  .mdc-button {
+    transition: elevation-theme.transition-value();
+  }
+}

components/button/lib/_filled-button.scss

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+@use './elevation';
+
 @mixin static-styles() {
-  // Intentionally blank for future-proofing.
+  @include elevation.static-styles;
 }

components/button/lib/_icon-theme.scss

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// stylelint-disable selector-class-pattern --
+// Selector '.mdc-*' should only be used in this project.
+
+@use 'sass:map';
+@use '@material/ripple/ripple-theme';
+@use '@material/theme/state';
+@use '@material/theme/theme';
+@use '@material/typography/typography';
+@use './button-theme';
+
+$_selectors: button-theme.$selectors;
+
+@mixin theme-styles($theme, $resolver) {
+  @include _set-icon-color(
+    (
+      default: map.get($theme, with-icon-icon-color),
+      hover: map.get($theme, with-icon-hover-icon-color),
+      focus: map.get($theme, with-icon-focus-icon-color),
+      pressed: map.get($theme, with-icon-pressed-icon-color),
+      disabled: map.get($theme, with-icon-disabled-icon-color),
+    )
+  );
+
+  @include _set-icon-size(map.get($theme, with-icon-icon-size));
+}
+
+@mixin _set-icon-color($colors) {
+  @include state.default($_selectors) {
+    @include _icon-color(state.get-default-state($colors));
+  }
+
+  @include state.hover($_selectors) {
+    @include _icon-color(state.get-hover-state($colors));
+  }
+
+  @include state.focus($_selectors) {
+    @include _icon-color(state.get-focus-state($colors));
+  }
+
+  @include state.pressed($_selectors) {
+    @include _icon-color(state.get-pressed-state($colors));
+  }
+
+  @include state.disabled($_selectors) {
+    @include _icon-color(state.get-disabled-state($colors));
+  }
+}
+
+@mixin _icon-color($color) {
+  ::slotted(*),
+  .mdc-button__icon {
+    @include theme.property(color, $color);
+  }
+}
+
+@mixin _set-icon-size($size-px) {
+  $size-rem: typography.px-to-rem($size-px);
+  ::slotted(*),
+  .mdc-button__icon {
+    @include theme.property(font-size, $size-rem);
+    @include theme.property(width, $size-rem);
+    @include theme.property(height, $size-rem);
+  }
+}

components/button/lib/_tonal-button.scss

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+@use './elevation';
+
 @mixin static-styles() {
-  // Intentionally blank for future-proofing.
+  @include elevation.static-styles;
 }