mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
fix(elevation)!: remove elevation surfaces
PiperOrigin-RevId: 522245110
This commit is contained in:
parent
7ccc21e0d2
commit
d801a5f7cd
@ -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];
|
||||
}
|
@ -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);
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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`
|
||||
<span class="surface"></span>
|
||||
${this.shadow ? super.render() : nothing}
|
||||
`;
|
||||
}
|
||||
}
|
@ -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;
|
Loading…
Reference in New Issue
Block a user