Skip to content

Commit

Permalink
feat(menu): update tokens to v0.192
Browse files Browse the repository at this point in the history
- Adds `--md-menu-item-selected-label-text-color` token

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

PiperOrigin-RevId: 565807703
  • Loading branch information
asyncLiz authored and copybara-github committed Sep 15, 2023
1 parent 58539b1 commit 94b5c81
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 4 deletions.
4 changes: 2 additions & 2 deletions docs/components/menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -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} -->
Expand Down
4 changes: 4 additions & 0 deletions menu/internal/menuitem/_menu-item.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 5 additions & 1 deletion tokens/_md-comp-menu-item.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,15 @@
@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

$supported-tokens: (
// go/keep-sorted start
'container-color',
'selected-container-color',
'selected-label-text-color',
// go/keep-sorted end
);

Expand All @@ -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
);

Expand All @@ -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',
)
);

Expand Down
5 changes: 4 additions & 1 deletion tokens/_md-comp-menu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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
);

Expand Down

0 comments on commit 94b5c81

Please sign in to comment.