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(navigationdrawer): tonal surface update

Browse Source 
PiperOrigin-RevId: 522235172
This commit is contained in:
Elizabeth Mitchell 2023-04-05 21:15:40 -07:00 committed by Copybara-Service
parent 3934f51e1d
commit 4f9df513dd
4 changed files with 22 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
navigationdrawer/lib/_navigation-drawer-modal.scss
View File

@ -21,17 +21,16 @@ $_delay: 0s;
$_transition-duration: 0.25s;
$_reference: (
container-color: #fff,
container-height: 100%,
container-shape: 0 16px 16px 0,
container-surface-tint-layer-color: null,
container-width: 360px,
'container-color': #fff,
'container-height': 100%,
'container-shape': 0 16px 16px 0,
'container-width': 360px,
// TODO(b/216384393): Temporary existing token to use for shadow color
divider-color: #000,
modal-container-elevation: 1,
scrim-color: null,
scrim-opacity: 0.04,
standard-container-elevation: 0,
'divider-color': #000,
'modal-container-elevation': 1,
'scrim-color': null,
'scrim-opacity': 0.04,
'standard-container-elevation': 0,
);
$_custom-property-prefix: 'navigation-drawer-modal';
@ -56,7 +55,7 @@ $_custom-property-prefix: 'navigation-drawer-modal';
@include elevation.theme(
(
level: var(--_modal-container-elevation),
'level': var(--_modal-container-elevation),
)
);
}

20
navigationdrawer/lib/_navigation-drawer.scss
View File

@ -19,15 +19,14 @@ $delay: 0s;
$transition-duration: 0.25s;
$_reference: (
container-color: #fff,
container-height: 100%,
container-shape: 0 16px 16px 0,
container-surface-tint-layer-color: null,
container-width: 360px,
'container-color': #fff,
'container-height': 100%,
'container-shape': 0 16px 16px 0,
'container-width': 360px,
// TODO(b/216384393): Temporary existing token to use for shadow color
divider-color: #000,
modal-container-elevation: 1,
standard-container-elevation: 0,
'divider-color': #000,
'modal-container-elevation': 1,
'standard-container-elevation': 0,
);
$_custom-property-prefix: 'navigation-drawer';
@ -52,9 +51,8 @@ $_custom-property-prefix: 'navigation-drawer';
@include elevation.theme(
(
level: var(--_standard-container-elevation),
shadow-color: var(--_divider-color),
surface-tint: var(--_container-surface-tint-layer-color),
'level': var(--_standard-container-elevation),
'shadow-color': var(--_divider-color),
)
);
}

4
navigationdrawer/lib/navigation-drawer.ts
View File

@ -4,7 +4,7 @@
* SPDX-License-Identifier: Apache-2.0
*/
import '../../elevation/elevation-surface.js';
import '../../elevation/elevation.js';
import {html, LitElement, PropertyValues, TemplateResult} from 'lit';
import {property} from 'lit/decorators.js';
@ -56,7 +56,7 @@ export class NavigationDrawer extends LitElement {
aria-modal="${this.ariaModal}"
class="md3-navigation-drawer ${this.getRenderClasses()}"
role="dialog">
<md-elevation-surface shadow></md-elevation-surface>
<md-elevation></md-elevation>
<div class="md3-navigation-drawer__slot-content">
<slot></slot>
</div>

3
tokens/_md-comp-navigation-drawer.scss
View File

@ -9,8 +9,7 @@
@use './md-sys-shape';
@use './md-sys-state';
@use './md-sys-typescale';
// TODO(b/272526637): tonal surface update
@use './v0_161/md-comp-navigation-drawer';
@use './v0_172/md-comp-navigation-drawer';
// go/keep-sorted end
$_default: (