diff --git a/menu/internal/menuitem/_menu-item.scss b/menu/internal/menuitem/_menu-item.scss index f9f84c4e00..30e7bd4362 100644 --- a/menu/internal/menuitem/_menu-item.scss +++ b/menu/internal/menuitem/_menu-item.scss @@ -17,59 +17,41 @@ // go/keep-sorted end @mixin theme($tokens) { - $list-item-supported-tokens: tokens.$md-comp-menu-list-item-supported-tokens; $supported-tokens: tokens.$md-comp-menu-item-supported-tokens; @each $token, $value in $tokens { - @if list.index($supported-tokens, $token) == - null and - list.index($list-item-supported-tokens, $token) == - null - { + @if list.index($supported-tokens, $token) == null { @error 'Token `#{$token}` is not a supported token.'; } @if $value and list.index($supported-tokens, $token) == null { --md-menu-item-#{$token}: #{$value}; } - - @if $value and list.index($list-item-supported-tokens, $token) == null { - --md-list-item-#{$token}: #{$value}; - } } } @mixin styles() { - $list-item-tokens: tokens.md-comp-menu-list-item-values(); - @each $token, $value in $list-item-tokens { - $list-item-tokens: map.set( - $list-item-tokens, - $token, - var(--md-menu-item-#{$token}, #{$value}) - ); - } $tokens: tokens.md-comp-menu-item-values(); @each $token, $value in $tokens { $tokens: map.set($tokens, $token, var(--md-menu-item-#{$token}, #{$value})); } :host { - border-radius: map.get($list-item-tokens, 'container-shape'); + border-radius: map.get($tokens, 'container-shape'); display: flex; @include ripple.theme( ( - hover-color: map.get($list-item-tokens, 'hover-state-layer-color'), - hover-opacity: map.get($list-item-tokens, 'hover-state-layer-opacity'), - pressed-color: map.get($list-item-tokens, 'pressed-state-layer-color'), - pressed-opacity: - map.get($list-item-tokens, 'pressed-state-layer-opacity'), + hover-color: map.get($tokens, 'hover-state-layer-color'), + hover-opacity: map.get($tokens, 'hover-state-layer-opacity'), + pressed-color: map.get($tokens, 'pressed-state-layer-color'), + pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'), ) ); } :host([disabled]) { - opacity: map.get($list-item-tokens, 'disabled-opacity'); + opacity: map.get($tokens, 'disabled-opacity'); pointer-events: none; } @@ -121,39 +103,36 @@ md-item { border-radius: inherit; flex: 1; - color: map.get($list-item-tokens, 'label-text-color'); - font-family: map.get($list-item-tokens, 'label-text-font'); - font-size: map.get($list-item-tokens, 'label-text-size'); - line-height: map.get($list-item-tokens, 'label-text-line-height'); - font-weight: map.get($list-item-tokens, 'label-text-weight'); - min-height: map.get($list-item-tokens, 'one-line-container-height'); - padding-top: map.get($list-item-tokens, 'top-space'); - padding-bottom: map.get($list-item-tokens, 'bottom-space'); - padding-inline-start: map.get($list-item-tokens, 'leading-space'); - padding-inline-end: map.get($list-item-tokens, 'trailing-space'); + color: map.get($tokens, 'label-text-color'); + font-family: map.get($tokens, 'label-text-font'); + font-size: map.get($tokens, 'label-text-size'); + line-height: map.get($tokens, 'label-text-line-height'); + font-weight: map.get($tokens, 'label-text-weight'); + min-height: map.get($tokens, 'one-line-container-height'); + padding-top: map.get($tokens, 'top-space'); + padding-bottom: map.get($tokens, 'bottom-space'); + padding-inline-start: map.get($tokens, 'leading-space'); + padding-inline-end: map.get($tokens, 'trailing-space'); } md-item[multiline] { - min-height: map.get($list-item-tokens, 'two-line-container-height'); + min-height: map.get($tokens, 'two-line-container-height'); } [slot='supporting-text'] { - color: map.get($list-item-tokens, 'supporting-text-color'); - font-family: map.get($list-item-tokens, 'supporting-text-font'); - font-size: map.get($list-item-tokens, 'supporting-text-size'); - line-height: map.get($list-item-tokens, 'supporting-text-line-height'); - font-weight: map.get($list-item-tokens, 'supporting-text-weight'); + color: map.get($tokens, 'supporting-text-color'); + font-family: map.get($tokens, 'supporting-text-font'); + font-size: map.get($tokens, 'supporting-text-size'); + line-height: map.get($tokens, 'supporting-text-line-height'); + font-weight: map.get($tokens, 'supporting-text-weight'); } [slot='trailing-supporting-text'] { - color: map.get($list-item-tokens, 'trailing-supporting-text-color'); - font-family: map.get($list-item-tokens, 'trailing-supporting-text-font'); - font-size: map.get($list-item-tokens, 'trailing-supporting-text-size'); - line-height: map.get( - $list-item-tokens, - 'trailing-supporting-text-line-height' - ); - font-weight: map.get($list-item-tokens, 'trailing-supporting-text-weight'); + color: map.get($tokens, 'trailing-supporting-text-color'); + font-family: map.get($tokens, 'trailing-supporting-text-font'); + font-size: map.get($tokens, 'trailing-supporting-text-size'); + line-height: map.get($tokens, 'trailing-supporting-text-line-height'); + font-weight: map.get($tokens, 'trailing-supporting-text-weight'); } :is([slot='start'], [slot='end'])::slotted(*) { @@ -161,15 +140,15 @@ } [slot='start'] { - color: map.get($list-item-tokens, 'leading-icon-color'); + color: map.get($tokens, 'leading-icon-color'); } [slot='end'] { - color: map.get($list-item-tokens, 'trailing-icon-color'); + color: map.get($tokens, 'trailing-icon-color'); } .list-item { - background-color: map.get($list-item-tokens, 'container-color'); + background-color: map.get($tokens, 'container-color'); } .list-item.selected { diff --git a/tokens/_index.scss b/tokens/_index.scss index 2a0353a82d..27b16732d7 100644 --- a/tokens/_index.scss +++ b/tokens/_index.scss @@ -36,7 +36,6 @@ @forward './md-comp-list-item' as md-comp-list-item-*; @forward './md-comp-menu' as md-comp-menu-*; @forward './md-comp-menu-item' as md-comp-menu-item-*; -@forward './md-comp-menu-list-item' as md-comp-menu-list-item-*; @forward './md-comp-navigation-bar' as md-comp-navigation-bar-*; @forward './md-comp-navigation-drawer' as md-comp-navigation-drawer-*; @forward './md-comp-outlined-button' as md-comp-outlined-button-*; diff --git a/tokens/_md-comp-list-item.scss b/tokens/_md-comp-list-item.scss index 77f7a09e47..c9e3f517e5 100644 --- a/tokens/_md-comp-list-item.scss +++ b/tokens/_md-comp-list-item.scss @@ -20,8 +20,6 @@ $supported-tokens: ( // go/keep-sorted start 'bottom-space', 'disabled-opacity', - 'focus-state-layer-color', - 'focus-state-layer-opacity', 'hover-state-layer-color', 'hover-state-layer-opacity', 'label-text-color', @@ -74,6 +72,8 @@ $unsupported-tokens: ( 'dragged-trailing-icon-icon-color', 'focus-label-text-color', 'focus-leading-icon-icon-color', + 'focus-state-layer-color', + 'focus-state-layer-opacity', 'focus-trailing-icon-icon-color', 'hover-label-text-color', 'hover-leading-icon-icon-color', diff --git a/tokens/_md-comp-menu-item.scss b/tokens/_md-comp-menu-item.scss index 62fa0eff9f..8ab4a456d7 100644 --- a/tokens/_md-comp-menu-item.scss +++ b/tokens/_md-comp-menu-item.scss @@ -10,17 +10,48 @@ // go/keep-sorted end // go/keep-sorted start @use './internal/validate'; +@use './md-comp-list-item'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; +@use './md-sys-state'; +@use './md-sys-typescale'; @use './v0_192/md-comp-menu'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start + 'bottom-space', 'container-color', + 'disabled-opacity', + 'hover-state-layer-color', + 'hover-state-layer-opacity', + 'label-text-color', + 'label-text-font', + 'label-text-line-height', + 'label-text-size', + 'label-text-weight', + 'leading-icon-color', + 'leading-space', + 'one-line-container-height', + 'pressed-state-layer-color', + 'pressed-state-layer-opacity', 'selected-container-color', 'selected-label-text-color', + 'supporting-text-color', + 'supporting-text-font', + 'supporting-text-line-height', + 'supporting-text-size', + 'supporting-text-weight', + 'top-space', + 'trailing-icon-color', + 'trailing-space', + 'trailing-supporting-text-color', + 'trailing-supporting-text-font', + 'trailing-supporting-text-line-height', + 'trailing-supporting-text-size', + 'trailing-supporting-text-weight', + 'two-line-container-height', // go/keep-sorted end ); @@ -29,8 +60,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', + 'selected-with-leading-icon-trailing-icon-color', + 'with-leading-icon-icon-color', // go/keep-sorted end ); @@ -38,18 +69,43 @@ $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { + $tokens: md-comp-menu.values($deps); + + // Like list items, menu items use their parent menu for their container + // color. However, menu items can have a selected background color, so we + // change its default unselected background color to transparent to inherit + // from its parent menu. + $tokens: map.set($tokens, 'container-color', transparent); + $tokens: validate.values( - md-comp-menu.values($deps), + $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, - $renamed-tokens: ( - 'list-item-selected-container-color': 'selected-container-color', - 'list-item-selected-label-text-color': 'selected-label-text-color', - ) + $new-tokens: md-comp-list-item.values($deps), + $renamed-tokens: _get-renamed-tokens($tokens) ); @return $tokens; } + +// remove list-item prefix from tokens +@function _get-renamed-tokens($tokens) { + $keys: map.keys($tokens); + $renamed-tokens: (); + + @each $key in $keys { + @each $prefix in ('list-item-', 'menu-list-item-') { + @if string.index($key, $prefix) == 1 { + $renamed-key: string.slice($key, string.length($prefix) + 1); + $renamed-tokens: map.set($renamed-tokens, $key, $renamed-key); + } + } + } + + @return $renamed-tokens; +} diff --git a/tokens/_md-comp-menu-list-item.scss b/tokens/_md-comp-menu-list-item.scss deleted file mode 100644 index 091973be51..0000000000 --- a/tokens/_md-comp-menu-list-item.scss +++ /dev/null @@ -1,162 +0,0 @@ -// -// Copyright 2023 Google LLC -// SPDX-License-Identifier: Apache-2.0 -// - -// TODO: delete this file when we merge the list-item fixes - -// go/keep-sorted start -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:string'; -// go/keep-sorted end -// go/keep-sorted start -@use './internal/validate'; -@use './md-sys-color'; -@use './md-sys-state'; -@use './md-sys-typescale'; -@use './v0_192/md-comp-list'; -// go/keep-sorted end - -$supported-tokens: ( - // go/keep-sorted start - 'bottom-space', - 'disabled-opacity', - 'focus-state-layer-color', - 'focus-state-layer-opacity', - 'hover-state-layer-color', - 'hover-state-layer-opacity', - 'label-text-color', - 'label-text-font', - 'label-text-line-height', - 'label-text-size', - 'label-text-weight', - 'leading-icon-color', - 'leading-space', - 'one-line-container-height', - 'pressed-state-layer-color', - 'pressed-state-layer-opacity', - 'supporting-text-color', - 'supporting-text-font', - 'supporting-text-line-height', - 'supporting-text-size', - 'supporting-text-weight', - 'top-space', - 'trailing-icon-color', - 'trailing-space', - 'trailing-supporting-text-color', - 'trailing-supporting-text-font', - 'trailing-supporting-text-line-height', - 'trailing-supporting-text-size', - 'trailing-supporting-text-weight', - 'two-line-container-height', - // go/keep-sorted end -); - -$unsupported-tokens: ( - // go/keep-sorted start - 'container-color', - 'container-elevation', - 'container-shape', - 'disabled-label-text-color', - 'disabled-label-text-opacity', - 'disabled-leading-icon-color', - 'disabled-leading-icon-opacity', - 'disabled-state-layer-color', - 'disabled-state-layer-opacity', - 'disabled-trailing-icon-color', - 'disabled-trailing-icon-opacity', - 'divider-leading-space', - 'divider-trailing-space', - 'dragged-container-elevation', - 'dragged-label-text-color', - 'dragged-leading-icon-icon-color', - 'dragged-state-layer-color', - 'dragged-state-layer-opacity', - 'dragged-trailing-icon-icon-color', - 'focus-label-text-color', - 'focus-leading-icon-icon-color', - 'focus-trailing-icon-icon-color', - 'hover-label-text-color', - 'hover-leading-icon-icon-color', - 'hover-trailing-icon-icon-color', - 'label-text-tracking', - 'label-text-type', - 'large-leading-video-height', - 'leading-avatar-color', - 'leading-avatar-label-color', - 'leading-avatar-label-font', - 'leading-avatar-label-line-height', - 'leading-avatar-label-size', - 'leading-avatar-label-tracking', - 'leading-avatar-label-type', - 'leading-avatar-label-weight', - 'leading-avatar-shape', - 'leading-avatar-size', - 'leading-icon-size', - 'leading-image-height', - 'leading-image-shape', - 'leading-image-width', - 'leading-video-shape', - 'leading-video-width', - 'overline-color', - 'overline-font', - 'overline-line-height', - 'overline-size', - 'overline-tracking', - 'overline-type', - 'overline-weight', - 'pressed-label-text-color', - 'pressed-leading-icon-icon-color', - 'pressed-trailing-icon-icon-color', - 'selected-trailing-icon-color', - 'small-leading-video-height', - 'supporting-text-tracking', - 'supporting-text-type', - 'three-line-container-height', - 'trailing-icon-size', - 'trailing-supporting-text-tracking', - 'trailing-supporting-text-type', - 'unselected-trailing-icon-color', - // go/keep-sorted end -); - -$_default: ( - 'md-sys-color': md-sys-color.values-light(), - 'md-sys-state': md-sys-state.values(), - 'md-sys-typescale': md-sys-typescale.values(), -); - -@function values($deps: $_default, $exclude-hardcoded-values: false) { - $original-tokens: md-comp-list.values($deps, $exclude-hardcoded-values); - - $tokens: validate.values( - $original-tokens, - $supported-tokens: $supported-tokens, - $unsupported-tokens: $unsupported-tokens, - $new-tokens: ( - 'top-space': if($exclude-hardcoded-values, null, 12px), - 'bottom-space': if($exclude-hardcoded-values, null, 12px), - 'disabled-opacity': - map.get($original-tokens, 'list-item-disabled-label-text-opacity'), - ), - $renamed-tokens: _get-renamed-tokens($original-tokens) - ); - - @return $tokens; -} - -// remove list-item prefix from tokens -@function _get-renamed-tokens($tokens) { - $keys: map.keys($tokens); - $renamed-tokens: (); - - @each $key in $keys { - @if string.index($key, 'list-item-') == 1 { - $renamed-key: string.slice($key, string.length('list-item-') + 1); - $renamed-tokens: map.set($renamed-tokens, $key, $renamed-key); - } - } - - @return $renamed-tokens; -}