mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
fix(chips): tonal surface update
PiperOrigin-RevId: 522235924
This commit is contained in:
parent
4f9df513dd
commit
60ef2abbe7
@ -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,7 +97,7 @@
|
||||
.elevated:hover {
|
||||
@include elevation.theme(
|
||||
(
|
||||
level: var(--_elevated-hover-container-elevation),
|
||||
'level': var(--_elevated-hover-container-elevation),
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -111,7 +105,7 @@
|
||||
.elevated:focus-within {
|
||||
@include elevation.theme(
|
||||
(
|
||||
level: var(--_elevated-focus-container-elevation),
|
||||
'level': var(--_elevated-focus-container-elevation),
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -119,7 +113,7 @@
|
||||
.elevated:active {
|
||||
@include elevation.theme(
|
||||
(
|
||||
level: var(--_elevated-pressed-container-elevation),
|
||||
'level': var(--_elevated-pressed-container-elevation),
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -127,7 +121,7 @@
|
||||
.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'),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
@ -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">
|
||||
|
@ -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-assist-chip';
|
||||
@use './v0_161/md-sys-color';
|
||||
@use './v0_172/md-comp-assist-chip';
|
||||
@use './values';
|
||||
// go/keep-sorted end
|
||||
|
||||
@ -22,7 +21,6 @@ $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',
|
||||
|
@ -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-suggestion-chip';
|
||||
@use './v0_161/md-sys-color';
|
||||
@use './v0_172/md-comp-suggestion-chip';
|
||||
@use './values';
|
||||
// go/keep-sorted end
|
||||
|
||||
@ -22,7 +21,6 @@ $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',
|
||||
|
Loading…
Reference in New Issue
Block a user