From d801a5f7cdb1cd43a832e2c11d33b97ef7e67ac0 Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Wed, 5 Apr 2023 22:09:32 -0700 Subject: [PATCH] fix(elevation)!: remove elevation surfaces PiperOrigin-RevId: 522245110 --- elevation/elevation-surface.ts | 26 ----------------- elevation/lib/_elevation.scss | 11 +------ elevation/lib/_surface.scss | 47 ------------------------------ elevation/lib/elevation-surface.ts | 28 ------------------ elevation/lib/surface-styles.scss | 10 ------- 5 files changed, 1 insertion(+), 121 deletions(-) delete mode 100644 elevation/elevation-surface.ts delete mode 100644 elevation/lib/_surface.scss delete mode 100644 elevation/lib/elevation-surface.ts delete mode 100644 elevation/lib/surface-styles.scss diff --git a/elevation/elevation-surface.ts b/elevation/elevation-surface.ts deleted file mode 100644 index feb6f02465..0000000000 --- a/elevation/elevation-surface.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @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 index 0db02d4418..8316788e9f 100644 --- a/elevation/lib/_elevation.scss +++ b/elevation/lib/_elevation.scss @@ -13,16 +13,7 @@ // go/keep-sorted end @mixin theme($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.validate-theme(tokens.md-comp-elevation-values(), $tokens); $tokens: theme.create-theme-vars($tokens, 'elevation'); @include theme.emit-theme-vars($tokens); } diff --git a/elevation/lib/_surface.scss b/elevation/lib/_surface.scss deleted file mode 100644 index fa8ed1aed3..0000000000 --- a/elevation/lib/_surface.scss +++ /dev/null @@ -1,47 +0,0 @@ -// -// 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 deleted file mode 100644 index dea7683182..0000000000 --- a/elevation/lib/elevation-surface.ts +++ /dev/null @@ -1,28 +0,0 @@ -/** - * @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` - - ${this.shadow ? super.render() : nothing} - `; - } -} diff --git a/elevation/lib/surface-styles.scss b/elevation/lib/surface-styles.scss deleted file mode 100644 index 2489428638..0000000000 --- a/elevation/lib/surface-styles.scss +++ /dev/null @@ -1,10 +0,0 @@ -// -// Copyright 2023 Google LLC -// SPDX-License-Identifier: Apache-2.0 -// - -// go/keep-sorted start -@use './surface'; -// go/keep-sorted end - -@include surface.styles;