From f374ff309de49350a2f2e8ebd63ac7beafd014a7 Mon Sep 17 00:00:00 2001
From: Esteban Gonzalez <esgonzalez@google.com>
Date: Mon, 24 Oct 2022 14:51:03 -0700
Subject: [PATCH] feat(fab): Add support for lowered elevation tokens/

PiperOrigin-RevId: 483491757
---
 packages/mdc-fab/_extended-fab-theme.scss |  1 +
 packages/mdc-fab/_fab-theme.scss          | 62 ++++++++++++++++++++++-
 2 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/packages/mdc-fab/_extended-fab-theme.scss b/packages/mdc-fab/_extended-fab-theme.scss
index 59f8fa2f3ce..987325b9ec9 100644
--- a/packages/mdc-fab/_extended-fab-theme.scss
+++ b/packages/mdc-fab/_extended-fab-theme.scss
@@ -55,6 +55,7 @@ $_extended-light-theme: (
   container-height: 56px,
   container-shadow-color: black,
   container-shape: 50%,
+  container-surface-tint-layer-color: null,
   focus-container-elevation: null,
   focus-icon-color: null,
   focus-label-text-color: null,
diff --git a/packages/mdc-fab/_fab-theme.scss b/packages/mdc-fab/_fab-theme.scss
index 2bce87a8100..4f5a77f67a8 100644
--- a/packages/mdc-fab/_fab-theme.scss
+++ b/packages/mdc-fab/_fab-theme.scss
@@ -51,6 +51,7 @@ $_light-theme: (
   container-height: 56px,
   container-shadow-color: black,
   container-shape: $shape-radius,
+  container-surface-tint-layer-color: null,
   container-width: 56px,
   focus-container-elevation: null,
   focus-icon-color: null,
@@ -159,6 +160,7 @@ $custom-property-prefix: 'fab';
   @include _container-elevation(
     map.get($resolvers, elevation),
     map.get($theme, container-shadow-color),
+    map.get($theme, container-surface-tint-layer-color),
     (
       default: map.get($theme, container-elevation),
       hover: map.get($theme, hover-container-elevation),
@@ -166,6 +168,17 @@ $custom-property-prefix: 'fab';
       pressed: map.get($theme, pressed-container-elevation),
     )
   );
+  @include _lowered-container-elevation(
+    map.get($resolvers, elevation),
+    map.get($theme, container-shadow-color),
+    map.get($theme, container-surface-tint-layer-color),
+    (
+      default: map.get($theme, lowered-container-elevation),
+      hover: map.get($theme, lowered-hover-container-elevation),
+      focus: map.get($theme, lowered-focus-container-elevation),
+      pressed: map.get($theme, lowered-pressed-container-elevation),
+    )
+  );
   @include _container-height(map.get($theme, container-height));
   @include _container-width(map.get($theme, container-width));
   @include icon-size(map.get($theme, icon-size));
@@ -299,13 +312,14 @@ $custom-property-prefix: 'fab';
   }
 }
 
-@mixin _container-elevation($resolver, $shadow-color, $map) {
+@mixin _container-elevation($resolver, $shadow-color, $container-color, $map) {
   &:not(:disabled) {
     @include elevation-theme.with-resolver(
       $resolver,
       $elevation: state.get-default-state($map),
       $shadow-color: $shadow-color
     );
+    @include elevation-theme.overlay-container-color($container-color);
 
     &:hover {
       @include elevation-theme.with-resolver(
@@ -313,6 +327,7 @@ $custom-property-prefix: 'fab';
         $elevation: state.get-hover-state($map),
         $shadow-color: $shadow-color
       );
+      @include elevation-theme.overlay-container-color($container-color);
     }
 
     &:focus {
@@ -321,6 +336,7 @@ $custom-property-prefix: 'fab';
         $elevation: state.get-focus-state($map),
         $shadow-color: $shadow-color
       );
+      @include elevation-theme.overlay-container-color($container-color);
     }
 
     &:active {
@@ -329,6 +345,7 @@ $custom-property-prefix: 'fab';
         $elevation: state.get-pressed-state($map),
         $shadow-color: $shadow-color
       );
+      @include elevation-theme.overlay-container-color($container-color);
     }
   }
 
@@ -342,6 +359,49 @@ $custom-property-prefix: 'fab';
   }
 }
 
+@mixin _lowered-container-elevation(
+  $resolver,
+  $shadow-color,
+  $container-color,
+  $map
+) {
+  &.mdc-fab--lowered:not(:disabled) {
+    @include elevation-theme.with-resolver(
+      $resolver,
+      $elevation: state.get-default-state($map),
+      $shadow-color: $shadow-color
+    );
+    @include elevation-theme.overlay-container-color($container-color);
+
+    &:hover {
+      @include elevation-theme.with-resolver(
+        $resolver,
+        $elevation: state.get-hover-state($map),
+        $shadow-color: $shadow-color
+      );
+      @include elevation-theme.overlay-container-color($container-color);
+    }
+
+    &:focus {
+      @include elevation-theme.with-resolver(
+        $resolver,
+        $elevation: state.get-focus-state($map),
+        $shadow-color: $shadow-color
+      );
+      @include elevation-theme.overlay-container-color($container-color);
+    }
+
+    &:active {
+      @include elevation-theme.with-resolver(
+        $resolver,
+        $elevation: state.get-pressed-state($map),
+        $shadow-color: $shadow-color
+      );
+      @include elevation-theme.overlay-container-color($container-color);
+    }
+  }
+}
+
 ///
 /// Sets outline width only when button is in focus. Also sets padding to
 /// include outline on focus (Helps prevent size jump on focus).