From 7d8ca0aa42810cda295e4e09d4e77496d07435c5 Mon Sep 17 00:00:00 2001
From: Allan Chen <allanchen@google.com>
Date: Mon, 20 Sep 2021 11:26:36 -0700
Subject: [PATCH] feat(button): m3 base theme modules

PiperOrigin-RevId: 397799202
---
 components/button/lib/_button-theme.scss | 160 ++++++++++++++++++++++-
 1 file changed, 159 insertions(+), 1 deletion(-)

diff --git a/components/button/lib/_button-theme.scss b/components/button/lib/_button-theme.scss
index dc236f24a..ba0e5684a 100644
--- a/components/button/lib/_button-theme.scss
+++ b/components/button/lib/_button-theme.scss
@@ -4,4 +4,162 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-/// TODO: theming mixin applicable to all variants; split into submodules if necessary.
+// stylelint-disable selector-class-pattern --
+// Selector '.mdc-*' should only be used in this project.
+
+@use 'sass:map';
+@use '@material/ripple/ripple-theme';
+@use '@material/shape/shape';
+@use '@material/theme/state';
+@use '@material/theme/theme';
+@use '@material/typography/typography';
+
+$_ripple-target: '.mdc-button__ripple';
+$selectors: (
+  // :not(:disabled) is used to support link styled as button
+  // as link does not support :enabled style
+  enabled: ':not(:disabled)',
+  disabled: ':disabled',
+  focus: ':focus',
+  hover: ':hover',
+  pressed: ':active'
+);
+
+@mixin theme-styles($theme, $resolvers) {
+  @include _set-label-text-typography(
+    (
+      family: map.get($theme, label-text-font),
+      size: map.get($theme, label-text-size),
+      tracking: map.get($theme, label-text-tracking),
+      weight: map.get($theme, label-text-weight),
+      transform: map.get($theme, label-text-transform),
+    )
+  );
+
+  @include _container-fill-color(
+    (
+      default: map.get($theme, container-color),
+      disabled: map.get($theme, disabled-container-color),
+    )
+  );
+
+  @include _ink-color(
+    (
+      default: map.get($theme, label-text-color),
+      hover: map.get($theme, hover-label-text-color),
+      focus: map.get($theme, focus-label-text-color),
+      pressed: map.get($theme, pressed-label-text-color),
+      disabled: map.get($theme, disabled-label-text-color),
+    )
+  );
+
+  @include ripple-theme.theme(
+    (
+      hover-state-layer-color: map.get($theme, hover-state-layer-color),
+      focus-state-layer-color: map.get($theme, focus-state-layer-color),
+      pressed-state-layer-color: map.get($theme, pressed-state-layer-color),
+      hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),
+      focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),
+      pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity),
+    )
+  );
+
+  $container-height: map.get($theme, container-height);
+  @include _set-height($container-height);
+
+  $shape: map.get($theme, container-shape);
+  @include _set-shape-radius($shape);
+}
+
+@mixin _container-fill-color($color-or-map) {
+  @include state.default($selectors) {
+    @include _set-container-fill-color(state.get-default-state($color-or-map));
+  }
+
+  @include state.hover($selectors) {
+    @include _set-container-fill-color(state.get-hover-state($color-or-map));
+  }
+
+  @include state.focus($selectors) {
+    @include _set-container-fill-color(state.get-focus-state($color-or-map));
+  }
+
+  @include state.pressed($selectors) {
+    @include _set-container-fill-color(state.get-pressed-state($color-or-map));
+  }
+
+  @include state.disabled($selectors) {
+    @include _set-container-fill-color(state.get-disabled-state($color-or-map));
+  }
+}
+
+@mixin _ink-color($color-or-map) {
+  @include state.default($selectors) {
+    @include _set-ink-color(state.get-default-state($color-or-map));
+  }
+
+  @include state.hover($selectors) {
+    @include _set-ink-color(state.get-hover-state($color-or-map));
+  }
+
+  @include state.focus($selectors) {
+    @include _set-ink-color(state.get-focus-state($color-or-map));
+  }
+
+  @include state.pressed($selectors) {
+    @include _set-ink-color(state.get-pressed-state($color-or-map));
+  }
+
+  @include state.disabled($selectors) {
+    @include _set-ink-color(state.get-disabled-state($color-or-map));
+  }
+}
+
+@mixin _set-height($height) {
+  @include theme.property(height, $height);
+}
+
+@mixin _set-shape-radius($radius) {
+  @include shape.radius($radius);
+
+  #{$_ripple-target} {
+    @include shape.radius($radius);
+  }
+}
+
+@mixin _set-container-fill-color($color) {
+  @include theme.property(background-color, $color);
+}
+
+@mixin _set-ink-color($color) {
+  @include theme.property(color, $color);
+}
+
+@mixin _set-label-text-typography($typography-map) {
+  $family: map.get($typography-map, family);
+  $size: map.get($typography-map, size);
+  $tracking: map.get($typography-map, tracking);
+  $weight: map.get($typography-map, weight);
+  $transform: map.get($typography-map, transform);
+
+  @include theme.property(font-family, $family);
+  @include theme.property(font-size, $size);
+  @include theme.property(letter-spacing, $tracking);
+  @include theme.property(font-weight, $weight);
+  @include theme.property(text-transform, $transform);
+}
+
+@mixin container-padding($padding) {
+  @include theme.property(padding-inline-start, $padding);
+  @include theme.property(padding-inline-end, $padding);
+}
+
+@mixin container-with-icon-padding($icon-padding) {
+  &.mdc-button--icon-trailing {
+    @include theme.property(padding-inline-end, $icon-padding);
+  }
+
+  &.mdc-button--icon-leading {
+    @include theme.property(padding-inline-start, $icon-padding);
+  }
+}