fix(chips): tonal surface update

PiperOrigin-RevId: 522235924
material-components · Apr 6, 2023 · 60ef2ab · 60ef2ab
1 parent 4f9df51
commit 60ef2ab
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 29 deletions.
diff --git a/chips/lib/_shared.scss b/chips/lib/_shared.scss
@@ -22,20 +22,14 @@
     display: inline-flex;
     height: var(--_container-height);
 
-    @include elevation.theme(
-      (
-        surface-tint: var(--_container-surface-tint-layer-color),
-      )
-    );
-
     @include ripple.theme(
       (
-        focus-color: var(--_focus-state-layer-color),
-        focus-opacity: var(--_focus-state-layer-opacity),
-        hover-color: var(--_hover-state-layer-color),
-        hover-opacity: var(--_hover-state-layer-opacity),
-        pressed-color: var(--_pressed-state-layer-color),
-        pressed-opacity: var(--_pressed-state-layer-opacity),
+        'focus-color': var(--_focus-state-layer-color),
+        'focus-opacity': var(--_focus-state-layer-opacity),
+        'hover-color': var(--_hover-state-layer-color),
+        'hover-opacity': var(--_hover-state-layer-opacity),
+        'pressed-color': var(--_pressed-state-layer-color),
+        'pressed-opacity': var(--_pressed-state-layer-opacity),
       )
     );
   }
@@ -90,8 +84,8 @@
   .elevated {
     @include elevation.theme(
       (
-        level: var(--_elevated-container-elevation),
-        shadow-color: var(--_elevated-container-shadow-color),
+        'level': var(--_elevated-container-elevation),
+        'shadow-color': var(--_elevated-container-shadow-color),
       )
     );
   }
@@ -103,31 +97,31 @@
   .elevated:hover {
     @include elevation.theme(
       (
-        level: var(--_elevated-hover-container-elevation),
+        'level': var(--_elevated-hover-container-elevation),
       )
     );
   }
 
   .elevated:focus-within {
     @include elevation.theme(
       (
-        level: var(--_elevated-focus-container-elevation),
+        'level': var(--_elevated-focus-container-elevation),
       )
     );
   }
 
   .elevated:active {
     @include elevation.theme(
       (
-        level: var(--_elevated-pressed-container-elevation),
+        'level': var(--_elevated-pressed-container-elevation),
       )
     );
   }
 
   .elevated.disabled {
     @include elevation.theme(
       (
-        level: var(--_elevated-disabled-container-elevation),
+        'level': var(--_elevated-disabled-container-elevation),
       )
     );
   }
@@ -140,7 +134,7 @@
   md-focus-ring {
     @include focus-ring.theme(
       (
-        shape: shape.corners-to-shape-token('--_container-shape'),
+        'shape': shape.corners-to-shape-token('--_container-shape'),
       )
     );
   }

diff --git a/chips/lib/chip.ts b/chips/lib/chip.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';
 
@@ -49,7 +49,7 @@ export class Chip extends LitElement {
           @focus=${this.handleFocus}
           @pointerdown=${this.handlePointerDown}
           ${ripple(this.getRipple)}>
-        <md-elevation-surface shadow=${this.elevated}></md-elevation-surface>
+        ${this.elevated ? html`<md-elevation></md-elevation>` : nothing}
         ${when(this.showRipple, this.renderRipple)}
         <md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>
         <span class="icon leading">

diff --git a/tokens/_md-comp-assist-chip.scss b/tokens/_md-comp-assist-chip.scss
@@ -8,21 +8,19 @@
 // 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-assist-chip';
-@use './v0_161/md-sys-color';
+@use './v0_172/md-comp-assist-chip';
 @use './values';
 // go/keep-sorted end
 
 $supported-tokens: (
   // go/keep-sorted start
   'container-height',
   'container-shape',
-  'container-surface-tint-layer-color',
   'disabled-label-text-color',
   'disabled-label-text-opacity',
   'disabled-leading-icon-color',

diff --git a/tokens/_md-comp-suggestion-chip.scss b/tokens/_md-comp-suggestion-chip.scss
@@ -8,21 +8,19 @@
 // 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-suggestion-chip';
-@use './v0_161/md-sys-color';
+@use './v0_172/md-comp-suggestion-chip';
 @use './values';
 // go/keep-sorted end
 
 $supported-tokens: (
   // go/keep-sorted start
   'container-height',
   'container-shape',
-  'container-surface-tint-layer-color',
   'disabled-label-text-color',
   'disabled-label-text-opacity',
   'disabled-leading-icon-color',