fix(button): tonal surface update

PiperOrigin-RevId: 522243314
material-components · Apr 6, 2023 · 50157e6 · 50157e6
1 parent 92a9071
commit 50157e6
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 28 deletions.
diff --git a/button/lib/_elevation.scss b/button/lib/_elevation.scss
@@ -15,10 +15,9 @@
     @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)
       )
     );
 
@@ -27,31 +26,31 @@
     &:focus {
       @include elevation.theme(
         (
-          level: var(--_focus-container-elevation),
+          'level': var(--_focus-container-elevation),
         )
       );
     }
 
     &:hover {
       @include elevation.theme(
         (
-          level: var(--_hover-container-elevation),
+          'level': var(--_hover-container-elevation),
         )
       );
     }
 
     &:active {
       @include elevation.theme(
         (
-          level: var(--_pressed-container-elevation),
+          'level': var(--_pressed-container-elevation),
         )
       );
     }
 
     &:disabled {
       @include elevation.theme(
         (
-          level: var(--_disabled-container-elevation),
+          'level': var(--_disabled-container-elevation),
         )
       );
     }

diff --git a/button/lib/_shared.scss b/button/lib/_shared.scss
@@ -131,7 +131,6 @@
   .md3-button::after,
   .md3-button::before,
   md-elevation,
-  md-elevation-surface,
   .md3-button__ripple {
     z-index: -1; // Place behind content
   }

diff --git a/button/lib/elevated-button.ts b/button/lib/elevated-button.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../../elevation/elevation-surface.js';
+import '../../elevation/elevation.js';
 
 import {html, TemplateResult} from 'lit';
 import {ClassInfo} from 'lit/directives/class-map.js';
@@ -23,6 +23,6 @@ export class ElevatedButton extends Button {
   }
 
   protected override renderElevation(): TemplateResult {
-    return html`<md-elevation-surface shadow></md-elevation-surface>`;
+    return html`<md-elevation></md-elevation>`;
   }
 }
diff --git a/button/lib/filled-button.ts b/button/lib/filled-button.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../../elevation/elevation-surface.js';
+import '../../elevation/elevation.js';
 
 import {html, TemplateResult} from 'lit';
 import {ClassInfo} from 'lit/directives/class-map.js';
@@ -23,6 +23,6 @@ export class FilledButton extends Button {
   }
 
   protected override renderElevation(): TemplateResult {
-    return html`<md-elevation-surface shadow></md-elevation-surface>`;
+    return html`<md-elevation></md-elevation>`;
   }
 }
diff --git a/tokens/_md-comp-elevated-button.scss b/tokens/_md-comp-elevated-button.scss
@@ -8,13 +8,12 @@
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../sass/shape';
+@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-elevated-button';
-@use './v0_161/md-sys-color';
+@use './v0_172/md-comp-elevated-button';
 @use './values';
 // go/keep-sorted end
 

diff --git a/tokens/_md-comp-filled-button.scss b/tokens/_md-comp-filled-button.scss
@@ -8,13 +8,12 @@
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../sass/shape';
+@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-filled-button';
-@use './v0_161/md-sys-color';
+@use './v0_172/md-comp-filled-button';
 @use './values';
 // go/keep-sorted end
 

diff --git a/tokens/_md-comp-filled-tonal-button.scss b/tokens/_md-comp-filled-tonal-button.scss
@@ -8,13 +8,12 @@
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../sass/shape';
+@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-filled-tonal-button';
-@use './v0_161/md-sys-color';
+@use './v0_172/md-comp-filled-tonal-button';
 @use './values';
 // go/keep-sorted end
 

diff --git a/tokens/_md-comp-outlined-button.scss b/tokens/_md-comp-outlined-button.scss
@@ -8,12 +8,11 @@
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../sass/shape';
+@use './md-sys-color';
 @use './md-sys-shape';
 @use './md-sys-state';
 @use './md-sys-typescale';
-// TODO(b/272526637): tonal surface update
-@use './v0_161/md-comp-outlined-button';
-@use './v0_161/md-sys-color';
+@use './v0_172/md-comp-outlined-button';
 @use './values';
 // go/keep-sorted end
 

diff --git a/tokens/_md-comp-text-button.scss b/tokens/_md-comp-text-button.scss
@@ -8,12 +8,11 @@
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../sass/shape';
+@use './md-sys-color';
 @use './md-sys-shape';
 @use './md-sys-state';
 @use './md-sys-typescale';
-// TODO(b/272526637): tonal surface update
-@use './v0_161/md-comp-text-button';
-@use './v0_161/md-sys-color';
+@use './v0_172/md-comp-text-button';
 @use './values';
 // go/keep-sorted end