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

feat(menu): update tokens to v0.192

Browse Source 
- Adds `--md-menu-item-selected-label-text-color` token

BREAKING CHANGE: menu selected container color changed to secondary-container

PiperOrigin-RevId: 565807703
This commit is contained in:
Elizabeth Mitchell 2023-09-15 16:34:44 -07:00 committed by Copybara-Service
parent 58539b1569
commit 94b5c8125e
4 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/components/menu.md
View File

@ -280,11 +280,11 @@ the tokens for those components can also be used for Menu.
### Menu Tokens
Token | Default value
----------------------------------------- | -------------
----------------------------------------- | ------------------------------------
`--md-menu-container-color` | `--md-sys-color-surface-container`
`--md-menu-container-shape` | `4px`
`--md-menu-item-container-color` | `--md-sys-color-surface-container`
`--md-menu-item-selected-container-color` | `--md-sys-color-surface-container-highest`
`--md-menu-item-selected-container-color` | `--md-sys-color-secondary-container`
* [Menu tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-menu.scss)
<!-- {.external} -->

4
menu/internal/menuitem/_menu-item.scss
View File

@ -47,6 +47,10 @@
background-color: var(--_selected-container-color);
}
.selected:not(.disabled) .label-text {
color: var(--_selected-label-text-color);
}
// Set the ripple opacity to 0 if there is a submenu that is hovered.
.submenu-hover {
// Have to use ripple theme directly because :has selector in this case does

6
tokens/_md-comp-menu-item.scss
View File

@ -12,7 +12,7 @@
@use './md-sys-color';
@use './md-sys-elevation';
@use './md-sys-shape';
@use './v0_172/md-comp-menu';
@use './v0_192/md-comp-menu';
@use './values';
// go/keep-sorted end
@ -20,6 +20,7 @@ $supported-tokens: (
// go/keep-sorted start
'container-color',
'selected-container-color',
'selected-label-text-color',
// go/keep-sorted end
);
@ -28,6 +29,8 @@ $unsupported-tokens: (
'container-elevation',
'container-shadow-color',
'container-shape',
'list-item-selected-with-leading-icon-trailing-icon-color',
'menu-list-item-with-leading-icon-icon-color',
// go/keep-sorted end
);
@ -44,6 +47,7 @@ $_default: (
$unsupported-tokens: $unsupported-tokens,
$renamed-tokens: (
'list-item-selected-container-color': 'selected-container-color',
'list-item-selected-label-text-color': 'selected-label-text-color',
)
);

5
tokens/_md-comp-menu.scss
View File

@ -12,7 +12,7 @@
@use './md-sys-color';
@use './md-sys-elevation';
@use './md-sys-shape';
@use './v0_172/md-comp-menu';
@use './v0_192/md-comp-menu';
@use './values';
// go/keep-sorted end
@ -28,6 +28,9 @@ $supported-tokens: (
$unsupported-tokens: (
// go/keep-sorted start
'list-item-selected-container-color',
'list-item-selected-label-text-color',
'list-item-selected-with-leading-icon-trailing-icon-color',
'menu-list-item-with-leading-icon-icon-color',
// go/keep-sorted end
);