chore(elevation)!: remove surface for tonal surface update

Changes: - Elevation is now `inset:0;position:absolute;` by default - Separated surface styles into a temporary `<md-elevation-surface>` element (this will be removed after tonal surface update) PiperOrigin-RevId: 521934300
material-components · Apr 5, 2023 · d12ed3e · d12ed3e
1 parent 988ad97
commit d12ed3e
Show file tree

Hide file tree

Showing 28 changed files with 187 additions and 144 deletions.
diff --git a/button/lib/_elevation.scss b/button/lib/_elevation.scss
@@ -11,11 +11,6 @@
 // go/keep-sorted end
 
 @mixin styles() {
-  md-elevation {
-    inset: 0;
-    position: absolute;
-  }
-
   .md3-button {
     @include elevation.theme(
       (

diff --git a/button/lib/_shared.scss b/button/lib/_shared.scss
@@ -131,6 +131,7 @@
   .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.js';
+import '../../elevation/elevation-surface.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 shadow surface></md-elevation>`;
+    return html`<md-elevation-surface shadow></md-elevation-surface>`;
   }
 }
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.js';
+import '../../elevation/elevation-surface.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 shadow surface></md-elevation>`;
+    return html`<md-elevation-surface shadow></md-elevation-surface>`;
   }
 }
diff --git a/button/lib/tonal-button.ts b/button/lib/tonal-button.ts
@@ -23,6 +23,6 @@ export class TonalButton extends Button {
   }
 
   protected override renderElevation(): TemplateResult {
-    return html`<md-elevation shadow></md-elevation>`;
+    return html`<md-elevation></md-elevation>`;
   }
 }
diff --git a/chips/lib/_shared.scss b/chips/lib/_shared.scss
@@ -137,11 +137,6 @@
     opacity: var(--_elevated-disabled-container-opacity);
   }
 
-  md-elevation {
-    inset: 0;
-    position: absolute;
-  }
-
   md-focus-ring {
     @include focus-ring.theme(
       (

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.js';
+import '../../elevation/elevation-surface.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 shadow=${this.elevated} surface></md-elevation>
+        <md-elevation-surface shadow=${this.elevated}></md-elevation-surface>
         ${when(this.showRipple, this.renderRipple)}
         <md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>
         <span class="icon leading">

diff --git a/dialog/lib/_dialog.scss b/dialog/lib/_dialog.scss
@@ -115,11 +115,7 @@
     padding-block-end: var(--_container-block-padding);
   }
 
-  md-elevation {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-
+  md-elevation-surface {
     @include elevation.theme(
       (
         level: var(--_container-elevation),

diff --git a/dialog/lib/dialog.ts b/dialog/lib/dialog.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../../elevation/elevation.js';
+import '../../elevation/elevation-surface.js';
 
 import {html, LitElement, PropertyValues} from 'lit';
 import {property, query, state} from 'lit/decorators.js';
@@ -275,7 +275,7 @@ export class Dialog extends LitElement {
         @pointermove=${this.handlePointerMove}
         @pointerup=${this.handleDragEnd}
       >
-        <md-elevation surface></md-elevation>
+        <md-elevation-surface></md-elevation-surface>
         <header class="header">
           <slot name="header">
             <slot name="headline-prefix"></slot>

diff --git a/elevation/elevation-surface.ts b/elevation/elevation-surface.ts
@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators.js';
+
+import {styles} from './lib/elevation-styles.css.js';
+import {ElevationSurface} from './lib/elevation-surface.js';
+import {styles as surfaceStyles} from './lib/surface-styles.css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-elevation-surface': MdElevationSurface;
+  }
+}
+
+/**
+ * @deprecated An elevation component with a surface-tint. Will be removed
+ * once components are updated.
+ */
+@customElement('md-elevation-surface')
+export class MdElevationSurface extends ElevationSurface {
+  static override styles = [styles, surfaceStyles];
+}
diff --git a/elevation/lib/_elevation.scss b/elevation/lib/_elevation.scss
@@ -9,46 +9,54 @@
 // go/keep-sorted start
 @use '../../sass/theme';
 @use '../../sass/var';
-@use './md-comp-elevation';
+@use '../../tokens';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(md-comp-elevation.values(), $tokens);
+  $tokens: theme.validate-theme(
+    map.merge(
+      tokens.md-comp-elevation-values(),
+      (
+        // TODO(b/272526637): remove after surface is removed
+        'surface-tint': null
+      )
+    ),
+    $tokens
+  );
   $tokens: theme.create-theme-vars($tokens, 'elevation');
   @include theme.emit-theme-vars($tokens);
 }
 
 @mixin styles() {
-  $tokens: md-comp-elevation.values();
+  $tokens: tokens.md-comp-elevation-values();
   $tokens: theme.create-theme-vars($tokens, 'elevation');
 
   :host {
     @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
 
-    border-radius: inherit;
     display: flex;
     pointer-events: none;
-    position: relative;
-  }
-
-  :host(:not([surface])) .surface,
-  :host(:not([shadow])) .shadow {
-    display: none;
+    transition-duration: var(--_duration);
+    transition-timing-function: var(--_easing);
   }
 
-  .surface,
+  :host,
   .shadow,
   .shadow::before,
   .shadow::after {
     border-radius: inherit;
-    content: '';
     inset: 0;
     position: absolute;
+  }
+
+  .shadow::before,
+  .shadow::after {
+    content: '';
+    transition-duration: inherit;
     transition-property: box-shadow, opacity;
-    transition-duration: var(--_duration);
-    transition-timing-function: var(--_easing);
+    transition-timing-function: inherit;
   }
 
   // Key box shadows
@@ -165,38 +173,4 @@
     opacity: 0.15;
     box-shadow: 0px $y $blur $spread var(--_shadow-color);
   }
-
-  .surface {
-    // Surface tint opacities:
-    // level0: opacity: 0;
-    // level1: opacity: 0.05;
-    // level2: opacity: 0.08;
-    // level3: opacity: 0.11;
-    // level4: opacity: 0.12;
-    // level5: opacity: 0.14;
-
-    // Add a clamped value for each level to build the correct values.
-    // Sass will simplify nested calc()s.
-
-    // 0 + 0 = 0
-    // $level0-opacity: 0; // +0 is a no-op
-    // 0 + 0.05 = 0.05
-    $level1-opacity: clamp(0, var(--_level), 0.05);
-    // 0.05 + 0.03 = 0.08
-    $level2-opacity: clamp(0, var(--_level) - 1, 0.03);
-    // 0.08 + 0.03 = 0.11
-    $level3-opacity: clamp(0, var(--_level) - 2, 0.03);
-    // (can't simplify levels 2-3 since the value is < 1)
-    // 0.11 + 0.01 = 0.12
-    $level4-opacity: clamp(0, var(--_level) - 3, 0.01);
-    // 0.12 + 0.02 = 0.14
-    $level5-opacity: clamp(0, var(--_level) - 4, 0.02);
-    $opacity: calc(
-      $level1-opacity + $level2-opacity + $level3-opacity + $level4-opacity +
-        $level5-opacity
-    );
-
-    background: var(--_surface-tint);
-    opacity: $opacity;
-  }
 }
diff --git a/elevation/lib/_md-comp-elevation.scss b/elevation/lib/_md-comp-elevation.scss
diff --git a/elevation/lib/_surface.scss b/elevation/lib/_surface.scss
@@ -0,0 +1,47 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+/// @deprecated Remove once components are updated for tonal surfaces
+@mixin styles() {
+  .surface {
+    // Surface tint opacities:
+    // level0: opacity: 0;
+    // level1: opacity: 0.05;
+    // level2: opacity: 0.08;
+    // level3: opacity: 0.11;
+    // level4: opacity: 0.12;
+    // level5: opacity: 0.14;
+
+    // Add a clamped value for each level to build the correct values.
+    // Sass will simplify nested calc()s.
+
+    // 0 + 0 = 0
+    // $level0-opacity: 0; // +0 is a no-op
+    // 0 + 0.05 = 0.05
+    $level1-opacity: clamp(0, var(--_level), 0.05);
+    // 0.05 + 0.03 = 0.08
+    $level2-opacity: clamp(0, var(--_level) - 1, 0.03);
+    // 0.08 + 0.03 = 0.11
+    $level3-opacity: clamp(0, var(--_level) - 2, 0.03);
+    // (can't simplify levels 2-3 since the value is < 1)
+    // 0.11 + 0.01 = 0.12
+    $level4-opacity: clamp(0, var(--_level) - 3, 0.01);
+    // 0.12 + 0.02 = 0.14
+    $level5-opacity: clamp(0, var(--_level) - 4, 0.02);
+    $opacity: calc(
+      $level1-opacity + $level2-opacity + $level3-opacity + $level4-opacity +
+        $level5-opacity
+    );
+
+    background: var(
+      --md-elevation-surface-tint,
+      var(--md-sys-color-surface-tint, #6750a4)
+    );
+    border-radius: inherit;
+    inset: 0;
+    opacity: $opacity;
+    position: absolute;
+  }
+}
diff --git a/elevation/lib/elevation-surface.ts b/elevation/lib/elevation-surface.ts
@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, nothing} from 'lit';
+import {property} from 'lit/decorators.js';
+
+import {Elevation} from './elevation.js';
+
+/**
+ * @deprecated An elevation component with a surface-tint. Will be removed
+ * once components are updated.
+ */
+export class ElevationSurface extends Elevation {
+  /**
+   * Whether or not the elevation level should display a shadow.
+   */
+  @property({type: Boolean}) shadow = false;
+
+  override render() {
+    return html`
+       <span class="surface"></span>
+       ${this.shadow ? super.render() : nothing}
+     `;
+  }
+}
diff --git a/elevation/lib/elevation.ts b/elevation/lib/elevation.ts
@@ -5,25 +5,12 @@
  */
 
 import {html, LitElement} from 'lit';
-import {property} from 'lit/decorators.js';
 
 /**
  * A component for elevation.
  */
 export class Elevation extends LitElement {
-  /**
-   * Whether or not the elevation level should display a shadow.
-   */
-  @property({type: Boolean, reflect: true}) shadow = false;
-  /**
-   * Whether or not the elevation level should display a surface tint color.
-   */
-  @property({type: Boolean, reflect: true}) surface = false;
-
   override render() {
-    return html`
-       <span class="surface"></span>
-       <span class="shadow"></span>
-     `;
+    return html`<span class="shadow"></span>`;
   }
 }