material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-09-11 13:46:10 +03:00
Code Issues Projects Releases Wiki Activity

fix(chips): tonal surface update

Browse Source 
PiperOrigin-RevId: 522235924
This commit is contained in:
Elizabeth Mitchell 2023-04-05 21:18:57 -07:00 committed by Copybara-Service
parent 4f9df513dd
commit 60ef2abbe7
4 changed files with 19 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
chips/lib/_shared.scss
View File

@ -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
chips/lib/chip.ts
View File

@ -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">

6
tokens/_md-comp-assist-chip.scss
View File

@ -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',

6
tokens/_md-comp-suggestion-chip.scss
View File

@ -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',