fix(fab): tonal surface update

PiperOrigin-RevId: 522242801
material-components · Apr 6, 2023 · 92a9071 · 92a9071
1 parent f08a9db
commit 92a9071
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 43 deletions.
diff --git a/fab/lib/_shared.scss b/fab/lib/_shared.scss
@@ -48,35 +48,34 @@
 
     @include focus-ring.theme(
       (
-        shape: shape.corners-to-shape-token('--_container-shape'),
+        'shape': shape.corners-to-shape-token('--_container-shape'),
       )
     );
 
     @include ripple.theme(
       (
-        hover-color: var(--_hover-state-layer-color),
-        focus-color: var(--_focus-state-layer-color),
-        pressed-color: var(--_pressed-state-layer-color),
-        hover-opacity: var(--_hover-state-layer-opacity),
-        focus-opacity: var(--_focus-state-layer-opacity),
-        pressed-opacity: var(--_pressed-state-layer-opacity),
+        'hover-color': var(--_hover-state-layer-color),
+        'focus-color': var(--_focus-state-layer-color),
+        'pressed-color': var(--_pressed-state-layer-color),
+        'hover-opacity': var(--_hover-state-layer-opacity),
+        'focus-opacity': var(--_focus-state-layer-opacity),
+        'pressed-opacity': var(--_pressed-state-layer-opacity),
       )
     );
 
     @include elevation.theme(
       (
         // TODO: replace duration with animation tokens
-        duration: 280ms,
-        level: var(--_container-elevation),
-        shadow-color: var(--_container-shadow-color),
-        surface-tint: var(--_container-surface-tint-layer-color)
+        'duration': 280ms,
+        'level': var(--_container-elevation),
+        'shadow-color': var(--_container-shadow-color)
       )
     );
 
     &.md3-fab--lowered {
       @include elevation.theme(
         (
-          level: var(--_lowered-container-elevation),
+          'level': var(--_lowered-container-elevation),
         )
       );
     }
@@ -86,14 +85,14 @@
     &:focus {
       @include elevation.theme(
         (
-          level: var(--_focus-container-elevation),
+          'level': var(--_focus-container-elevation),
         )
       );
 
       &.md3-fab--lowered {
         @include elevation.theme(
           (
-            level: var(--_lowered-focus-container-elevation),
+            'level': var(--_lowered-focus-container-elevation),
           )
         );
       }
@@ -104,14 +103,14 @@
 
       @include elevation.theme(
         (
-          level: var(--_hover-container-elevation),
+          'level': var(--_hover-container-elevation),
         )
       );
 
       &.md3-fab--lowered {
         @include elevation.theme(
           (
-            level: var(--_lowered-hover-container-elevation),
+            'level': var(--_lowered-hover-container-elevation),
           )
         );
       }
@@ -122,21 +121,21 @@
 
       @include elevation.theme(
         (
-          level: var(--_pressed-container-elevation),
+          'level': var(--_pressed-container-elevation),
         )
       );
 
       &.md3-fab--lowered {
         @include elevation.theme(
           (
-            level: var(--_lowered-pressed-container-elevation),
+            'level': var(--_lowered-pressed-container-elevation),
           )
         );
       }
     }
   }
 
-  md-elevation-surface {
+  md-elevation {
     z-index: -1; // Place behind content
   }
 
@@ -186,7 +185,7 @@
       // Adjust the focus ring padding to account for the 1px border in HCM.
       @include focus-ring.theme(
         (
-          offset: 3px,
+          'offset': 3px,
         )
       );
       border: 1px solid ButtonText;

diff --git a/fab/lib/fab-shared.ts b/fab/lib/fab-shared.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../../elevation/elevation-surface.js';
+import '../../elevation/elevation.js';
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
 
@@ -87,7 +87,7 @@ export abstract class FabShared extends LitElement {
 
   /** @soyTemplate */
   protected renderElevation(): TemplateResult {
-    return html`<md-elevation-surface shadow></md-elevation-surface>`;
+    return html`<md-elevation></md-elevation>`;
   }
 
   /** @soyTemplate */

diff --git a/tokens/_md-comp-extended-fab-branded.scss b/tokens/_md-comp-extended-fab-branded.scss
@@ -7,13 +7,12 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
+@use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
 @use './md-sys-state';
 @use './md-sys-typescale';
-// TODO(b/272526637): tonal surface update
-@use './v0_161/md-comp-extended-fab-branded';
-@use './v0_161/md-sys-color';
+@use './v0_172/md-comp-extended-fab-branded';
 // go/keep-sorted end
 
 $_default: (

diff --git a/tokens/_md-comp-extended-fab-surface.scss b/tokens/_md-comp-extended-fab-surface.scss
@@ -7,13 +7,12 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
+@use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
 @use './md-sys-state';
 @use './md-sys-typescale';
-// TODO(b/272526637): tonal surface update
-@use './v0_161/md-comp-extended-fab-surface';
-@use './v0_161/md-sys-color';
+@use './v0_172/md-comp-extended-fab-surface';
 // go/keep-sorted end
 
 $_default: (

diff --git a/tokens/_md-comp-fab-branded-large.scss b/tokens/_md-comp-fab-branded-large.scss
@@ -4,12 +4,11 @@
 //
 
 // go/keep-sorted start
+@use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
 @use './md-sys-state';
-// TODO(b/272526637): tonal surface update
-@use './v0_161/md-comp-fab-branded-large';
-@use './v0_161/md-sys-color';
+@use './v0_172/md-comp-fab-branded-large';
 // go/keep-sorted end
 
 $_default: (

diff --git a/tokens/_md-comp-fab-branded.scss b/tokens/_md-comp-fab-branded.scss
@@ -4,12 +4,11 @@
 //
 
 // go/keep-sorted start
+@use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
 @use './md-sys-state';
-// TODO(b/272526637): tonal surface update
-@use './v0_161/md-comp-fab-branded';
-@use './v0_161/md-sys-color';
+@use './v0_172/md-comp-fab-branded';
 // go/keep-sorted end
 
 $_default: (

diff --git a/tokens/_md-comp-fab-surface-large.scss b/tokens/_md-comp-fab-surface-large.scss
@@ -4,12 +4,11 @@
 //
 
 // go/keep-sorted start
+@use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
 @use './md-sys-state';
-// TODO(b/272526637): tonal surface update
-@use './v0_161/md-comp-fab-surface-large';
-@use './v0_161/md-sys-color';
+@use './v0_172/md-comp-fab-surface-large';
 // go/keep-sorted end
 
 $_default: (

diff --git a/tokens/_md-comp-fab-surface-small.scss b/tokens/_md-comp-fab-surface-small.scss
@@ -4,12 +4,11 @@
 //
 
 // go/keep-sorted start
+@use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
 @use './md-sys-state';
-// TODO(b/272526637): tonal surface update
-@use './v0_161/md-comp-fab-surface-small';
-@use './v0_161/md-sys-color';
+@use './v0_172/md-comp-fab-surface-small';
 // go/keep-sorted end
 
 $_default: (

diff --git a/tokens/_md-comp-fab-surface.scss b/tokens/_md-comp-fab-surface.scss
@@ -4,12 +4,11 @@
 //
 
 // go/keep-sorted start
+@use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
 @use './md-sys-state';
-// TODO(b/272526637): tonal surface update
-@use './v0_161/md-comp-fab-surface';
-@use './v0_161/md-sys-color';
+@use './v0_172/md-comp-fab-surface';
 // go/keep-sorted end
 
 $_default: (