diff --git a/catalog/site/css/global.css b/catalog/site/css/global.css index d81502067e..ecebb278c0 100644 --- a/catalog/site/css/global.css +++ b/catalog/site/css/global.css @@ -86,7 +86,7 @@ a:focus-visible { } nav-drawer md-list-item[href][selected] { - --md-list-item-list-item-container-color: var( + --md-list-item-container-color: var( --md-sys-color-surface-container-highest ); } @@ -104,7 +104,7 @@ nav-drawer md-list-item[href][selected] { md-list { --md-list-container-color: transparent; - --md-list-item-list-item-container-color: transparent; + --md-list-item-container-color: transparent; display: block; margin-inline: var(--catalog-spacing-m); min-width: unset; diff --git a/catalog/src/components/nav-drawer.ts b/catalog/src/components/nav-drawer.ts index 3b399446dc..6648d48f2c 100644 --- a/catalog/src/components/nav-drawer.ts +++ b/catalog/src/components/nav-drawer.ts @@ -151,7 +151,7 @@ import {SignalElement} from '../signals/signal-element.js'; } ::slotted(*) { - --md-list-item-list-item-container-shape: var(--catalog-shape-xl); + --md-list-item-container-shape: var(--catalog-shape-xl); --md-focus-ring-shape: var(--catalog-shape-xl); } diff --git a/list/internal/listitem/_list-item.scss b/list/internal/listitem/_list-item.scss index ed8c65f926..5c24d782ed 100644 --- a/list/internal/listitem/_list-item.scss +++ b/list/internal/listitem/_list-item.scss @@ -51,10 +51,10 @@ @include ripple.theme( ( - hover-color: var(--_list-item-hover-state-layer-color), - hover-opacity: var(--_list-item-hover-state-layer-opacity), - pressed-color: var(--_list-item-pressed-state-layer-color), - pressed-opacity: var(--_list-item-pressed-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), ) ); } @@ -75,8 +75,8 @@ position: relative; width: 100%; text-decoration: none; - background-color: var(--_list-item-container-color); - border-radius: var(--_list-item-container-shape); + background-color: var(--_container-color); + border-radius: var(--_container-shape); // hide android tap color since we have ripple -webkit-tap-highlight-color: transparent; @@ -94,7 +94,7 @@ width: 100%; box-sizing: border-box; border-radius: inherit; - padding-inline-end: var(--_list-item-trailing-space); + padding-inline-end: var(--_trailing-space); } md-ripple { @@ -102,15 +102,15 @@ } .with-one-line { - min-height: var(--_list-item-one-line-container-height); + min-height: var(--_one-line-container-height); } .with-two-line { - min-height: var(--_list-item-two-line-container-height); + min-height: var(--_two-line-container-height); } .with-three-line { - min-height: var(--_list-item-three-line-container-height); + min-height: var(--_three-line-container-height); } .start { @@ -130,7 +130,7 @@ &::slotted([data-variant='icon']), &::slotted([data-variant='image']), &::slotted([data-variant='avatar']) { - margin-inline-start: var(--_list-item-leading-element-leading-space); + margin-inline-start: var(--_leading-element-leading-space); } } @@ -140,7 +140,7 @@ flex-direction: column; box-sizing: border-box; flex: 1 0 0; - padding-inline-start: var(--_list-item-leading-space); + padding-inline-start: var(--_leading-space); z-index: 1; } @@ -159,7 +159,7 @@ slot[name='end']::slotted(*), .trailing-supporting-text { margin-inline-start: var( - --_list-item-trailing-element-headline-trailing-element-space + --_trailing-element-headline-trailing-element-space ); } @@ -168,24 +168,24 @@ text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; - color: var(--_list-item-label-text-color); - font: var(--_list-item-label-text-type); + color: var(--_label-text-color); + font: var(--_label-text-type); :hover & { - color: var(--_list-item-hover-label-text-color); + color: var(--_hover-label-text-color); } :focus & { - color: var(--_list-item-focus-label-text-color); + color: var(--_focus-label-text-color); } :active & { - color: var(--_list-item-pressed-label-text-color); + color: var(--_pressed-label-text-color); } .disabled & { - color: var(--_list-item-disabled-label-text-color); - opacity: var(--_list-item-disabled-label-text-opacity); + color: var(--_disabled-label-text-color); + opacity: var(--_disabled-label-text-opacity); } } @@ -194,8 +194,8 @@ white-space: normal; overflow: hidden; width: 100%; - color: var(--_list-item-supporting-text-color); - font: var(--_list-item-supporting-text-type); + color: var(--_supporting-text-color); + font: var(--_supporting-text-type); // Box is supposed to be deprecated, but line-clamp is not. It's still on // standards track and can only be applied with display: -webkit-box and @@ -206,8 +206,8 @@ display: -webkit-box; .disabled & { - color: var(--_list-item-disabled-label-text-color); - opacity: var(--_list-item-disabled-label-text-opacity); + color: var(--_disabled-label-text-color); + opacity: var(--_disabled-label-text-opacity); } } @@ -217,15 +217,15 @@ .trailing-supporting-text { padding-inline-start: 16px; - font: var(--_list-item-trailing-supporting-text-type); + font: var(--_trailing-supporting-text-type); .list-item:not(.disabled) & { - color: var(--_list-item-trailing-supporting-text-color); + color: var(--_trailing-supporting-text-color); } .disabled & { - color: var(--_list-item-disabled-label-text-color); - opacity: var(--_list-item-disabled-label-text-opacity); + color: var(--_disabled-label-text-color); + opacity: var(--_disabled-label-text-opacity); } .with-three-line & { @@ -233,8 +233,8 @@ // the headline text. padding-block-start: calc( ( - var(--_list-item-label-text-line-height) - - var(--_list-item-trailing-supporting-text-line-height) + var(--_label-text-line-height) - + var(--_trailing-supporting-text-line-height) ) / 2 ); } @@ -248,15 +248,12 @@ @mixin _image() { ::slotted([data-variant='image']) { display: inline-flex; - height: var(--_list-item-leading-image-height); - width: var(--_list-item-leading-image-width); - border-radius: var(--_list-item-leading-image-shape); + height: var(--_leading-image-height); + width: var(--_leading-image-width); + border-radius: var(--_leading-image-shape); // Min height is two-line height padding-block: calc( - ( - var(--_list-item-two-line-container-height) - - var(--_list-item-leading-image-height) - ) / 2 + (var(--_two-line-container-height) - var(--_leading-image-height)) / 2 ); .with-three-line & { @@ -271,78 +268,72 @@ } slot[name='start']::slotted([data-variant='icon']) { - font-size: var(--_list-item-leading-icon-size); - width: var(--_list-item-leading-icon-size); - height: var(--_list-item-leading-icon-size); - color: var(--_list-item-leading-icon-color); + font-size: var(--_leading-icon-size); + width: var(--_leading-icon-size); + height: var(--_leading-icon-size); + color: var(--_leading-icon-color); .with-three-line & { // In three line, icon must align with the mid-line of headline text padding-block-start: calc( - ( - var(--_list-item-label-text-line-height) - - var(--_list-item-leading-icon-size) - ) / 2 + (var(--_label-text-line-height) - var(--_leading-icon-size)) / 2 ); } } slot[name='end']::slotted([data-variant='icon']) { - font-size: var(--_list-item-trailing-icon-size); - width: var(--_list-item-trailing-icon-size); - height: var(--_list-item-trailing-icon-size); - color: var(--_list-item-trailing-icon-color); + font-size: var(--_trailing-icon-size); + width: var(--_trailing-icon-size); + height: var(--_trailing-icon-size); + color: var(--_trailing-icon-color); .with-three-line & { // In three line, icon must align with the mid-line of headline text padding-block-start: calc( - ( - var(--_list-item-label-text-line-height) - - var(--_list-item-trailing-icon-size) - ) / 2 + (var(--_label-text-line-height) - var(--_trailing-icon-size)) / 2 ); } } :hover { slot[name='start']::slotted([data-variant='icon']) { - color: var(--_list-item-hover-leading-icon-icon-color); + color: var(--_hover-leading-icon-icon-color); } slot[name='end']::slotted([data-variant='icon']) { - color: var(--_list-item-hover-trailing-icon-icon-color); + color: var(--_hover-trailing-icon-icon-color); } } :focus { slot[name='start']::slotted([data-variant='icon']) { - color: var(--_list-item-focus-leading-icon-icon-color); + color: var(--_focus-leading-icon-icon-color); } slot[name='end']::slotted([data-variant='icon']) { - color: var(--_list-item-focus-trailing-icon-icon-color); + color: var(--_focus-trailing-icon-icon-color); } } :active { slot[name='start']::slotted([data-variant='icon']) { - color: var(--_list-item-pressed-leading-icon-icon-color); + color: var(--_pressed-leading-icon-icon-color); } slot[name='end']::slotted([data-variant='icon']) { - color: var(--_list-item-pressed-trailing-icon-icon-color); + color: var(--_pressed-trailing-icon-icon-color); } } .disabled { slot[name='start']::slotted([data-variant='icon']) { - opacity: var(--_list-item-disabled-leading-icon-opacity); - color: var(--_list-item-disabled-leading-icon-color); + opacity: var(--_disabled-leading-icon-opacity); + color: var(--_disabled-leading-icon-color); } slot[name='end']::slotted([data-variant='icon']) { - opacity: var(--_list-item-disabled-trailing-icon-opacity); - color: var(--_list-item-disabled-trailing-icon-color); + opacity: var(--_disabled-trailing-icon-opacity); + color: var(--_disabled-trailing-icon-color); } } } @@ -352,12 +343,12 @@ display: inline-flex; justify-content: center; align-items: center; - background-color: var(--_list-item-leading-avatar-color); - height: var(--_list-item-leading-avatar-size); - width: var(--_list-item-leading-avatar-size); - border-radius: var(--_list-item-leading-avatar-shape); - color: var(--_list-item-leading-avatar-label-color); - font: var(--_list-item-leading-avatar-label-type); + background-color: var(--_leading-avatar-color); + height: var(--_leading-avatar-size); + width: var(--_leading-avatar-size); + border-radius: var(--_leading-avatar-shape); + color: var(--_leading-avatar-label-color); + font: var(--_leading-avatar-label-type); } } @@ -366,16 +357,14 @@ ::slotted([data-variant='video-large']) { display: inline-flex; object-fit: cover; - height: var(--_list-item-small-leading-video-height); - width: var(--_list-item-leading-video-width); - border-radius: var(--_list-item-leading-video-shape); - margin-inline-start: var(--_list-item-leading-video-leading-space); + height: var(--_small-leading-video-height); + width: var(--_leading-video-width); + border-radius: var(--_leading-video-shape); + margin-inline-start: var(--_leading-video-leading-space); // Min height is three-line height padding-block: calc( - ( - var(--_list-item-three-line-container-height) - - var(--_list-item-small-leading-video-height) - ) / 2 + (var(--_three-line-container-height) - var(--_small-leading-video-height)) / + 2 ); // Let it auto-layout so that we don't mess with the icons and supporting @@ -388,11 +377,9 @@ ::slotted([data-variant='video-large']) { // Min height is three-line height padding-block: calc( - ( - var(--_list-item-three-line-container-height) - - var(--_list-item-large-leading-video-height) - ) / 2 + (var(--_three-line-container-height) - var(--_large-leading-video-height)) / + 2 ); - height: var(--_list-item-large-leading-video-height); + height: var(--_large-leading-video-height); } } diff --git a/list/internal/listitem/forced-colors-styles.scss b/list/internal/listitem/forced-colors-styles.scss index c7008e391c..7f5a5584d2 100644 --- a/list/internal/listitem/forced-colors-styles.scss +++ b/list/internal/listitem/forced-colors-styles.scss @@ -11,12 +11,12 @@ :host { @include list-item.theme( ( - list-item-disabled-label-text-color: GrayText, - list-item-disabled-label-text-opacity: 1, - list-item-disabled-leading-icon-color: GrayText, - list-item-disabled-leading-icon-opacity: 1, - list-item-disabled-trailing-icon-color: GrayText, - list-item-disabled-trailing-icon-opacity: 1, + disabled-label-text-color: GrayText, + disabled-label-text-opacity: 1, + disabled-leading-icon-color: GrayText, + disabled-leading-icon-opacity: 1, + disabled-trailing-icon-color: GrayText, + disabled-trailing-icon-opacity: 1, ) ); } diff --git a/menu/internal/menuitem/_menu-item.scss b/menu/internal/menuitem/_menu-item.scss index 68cd227091..0a51310fad 100644 --- a/menu/internal/menuitem/_menu-item.scss +++ b/menu/internal/menuitem/_menu-item.scss @@ -38,14 +38,14 @@ @include list-item.theme( ( - 'list-item-container-color': var(--_list-item-container-color), + 'container-color': var(--_container-color), ) ); } .list-item { :host([selected]) & { - background-color: var(--_list-item-selected-container-color); + background-color: var(--_selected-container-color); } } diff --git a/tokens/_md-comp-list-item.scss b/tokens/_md-comp-list-item.scss index 0d36f0d012..321c4ac06d 100644 --- a/tokens/_md-comp-list-item.scss +++ b/tokens/_md-comp-list-item.scss @@ -4,7 +4,9 @@ // // go/keep-sorted start +@use 'sass:list'; @use 'sass:map'; +@use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use './md-sys-color'; @@ -18,102 +20,102 @@ $supported-tokens: ( // go/keep-sorted start - 'list-item-container-color', - 'list-item-container-shape', - 'list-item-disabled-label-text-color', - 'list-item-disabled-label-text-opacity', - 'list-item-disabled-leading-icon-color', - 'list-item-disabled-leading-icon-opacity', - 'list-item-disabled-trailing-icon-color', - 'list-item-disabled-trailing-icon-opacity', - 'list-item-focus-label-text-color', - 'list-item-focus-leading-icon-icon-color', - 'list-item-focus-trailing-icon-icon-color', - 'list-item-hover-label-text-color', - 'list-item-hover-leading-icon-icon-color', - 'list-item-hover-state-layer-color', - 'list-item-hover-state-layer-opacity', - 'list-item-hover-trailing-icon-icon-color', - 'list-item-label-text-color', - 'list-item-label-text-line-height', - 'list-item-label-text-type', - 'list-item-large-leading-video-height', - 'list-item-leading-avatar-color', - 'list-item-leading-avatar-label-color', - 'list-item-leading-avatar-label-type', - 'list-item-leading-avatar-shape', - 'list-item-leading-avatar-size', - 'list-item-leading-element-leading-space', - 'list-item-leading-icon-color', - 'list-item-leading-icon-size', - 'list-item-leading-image-height', - 'list-item-leading-image-shape', - 'list-item-leading-image-width', - 'list-item-leading-space', - 'list-item-leading-video-leading-space', - 'list-item-leading-video-shape', - 'list-item-leading-video-width', - 'list-item-one-line-container-height', - 'list-item-pressed-label-text-color', - 'list-item-pressed-leading-icon-icon-color', - 'list-item-pressed-state-layer-color', - 'list-item-pressed-state-layer-opacity', - 'list-item-pressed-trailing-icon-icon-color', - 'list-item-small-leading-video-height', - 'list-item-supporting-text-color', - 'list-item-supporting-text-type', - 'list-item-three-line-container-height', - 'list-item-trailing-element-headline-trailing-element-space', - 'list-item-trailing-icon-color', - 'list-item-trailing-icon-size', - 'list-item-trailing-space', - 'list-item-trailing-supporting-text-color', - 'list-item-trailing-supporting-text-line-height', - 'list-item-trailing-supporting-text-type', - 'list-item-two-line-container-height', + 'container-color', + 'container-shape', + 'disabled-label-text-color', + 'disabled-label-text-opacity', + 'disabled-leading-icon-color', + 'disabled-leading-icon-opacity', + 'disabled-trailing-icon-color', + 'disabled-trailing-icon-opacity', + 'focus-label-text-color', + 'focus-leading-icon-icon-color', + 'focus-trailing-icon-icon-color', + 'hover-label-text-color', + 'hover-leading-icon-icon-color', + 'hover-state-layer-color', + 'hover-state-layer-opacity', + 'hover-trailing-icon-icon-color', + 'label-text-color', + 'label-text-line-height', + 'label-text-type', + 'large-leading-video-height', + 'leading-avatar-color', + 'leading-avatar-label-color', + 'leading-avatar-label-type', + 'leading-avatar-shape', + 'leading-avatar-size', + 'leading-element-leading-space', + 'leading-icon-color', + 'leading-icon-size', + 'leading-image-height', + 'leading-image-shape', + 'leading-image-width', + 'leading-space', + 'leading-video-leading-space', + 'leading-video-shape', + 'leading-video-width', + 'one-line-container-height', + 'pressed-label-text-color', + 'pressed-leading-icon-icon-color', + 'pressed-state-layer-color', + 'pressed-state-layer-opacity', + 'pressed-trailing-icon-icon-color', + 'small-leading-video-height', + 'supporting-text-color', + 'supporting-text-type', + 'three-line-container-height', + 'trailing-element-headline-trailing-element-space', + 'trailing-icon-color', + 'trailing-icon-size', + 'trailing-space', + 'trailing-supporting-text-color', + 'trailing-supporting-text-line-height', + 'trailing-supporting-text-type', + 'two-line-container-height', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start - 'list-item-container-elevation', - 'list-item-disabled-state-layer-color', - 'list-item-disabled-state-layer-opacity', - 'list-item-dragged-container-elevation', - 'list-item-dragged-label-text-color', - 'list-item-dragged-leading-icon-icon-color', - 'list-item-dragged-state-layer-color', - 'list-item-dragged-state-layer-opacity', - 'list-item-dragged-trailing-icon-icon-color', - 'list-item-focus-state-layer-color', - 'list-item-focus-state-layer-opacity', - 'list-item-label-text-font', - 'list-item-label-text-size', - 'list-item-label-text-tracking', - 'list-item-label-text-weight', - 'list-item-leading-avatar-label-font', - 'list-item-leading-avatar-label-line-height', - 'list-item-leading-avatar-label-size', - 'list-item-leading-avatar-label-tracking', - 'list-item-leading-avatar-label-weight', - 'list-item-overline-color', - 'list-item-overline-font', - 'list-item-overline-line-height', - 'list-item-overline-size', - 'list-item-overline-tracking', - 'list-item-overline-type', - 'list-item-overline-weight', - 'list-item-selected-trailing-icon-color', - 'list-item-supporting-text-font', - 'list-item-supporting-text-line-height', - 'list-item-supporting-text-size', - 'list-item-supporting-text-tracking', - 'list-item-supporting-text-weight', - 'list-item-trailing-supporting-text-font', - 'list-item-trailing-supporting-text-size', - 'list-item-trailing-supporting-text-tracking', - 'list-item-trailing-supporting-text-weight', - 'list-item-unselected-trailing-icon-color', + 'container-elevation', + 'disabled-state-layer-color', + 'disabled-state-layer-opacity', + '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-state-layer-color', + 'focus-state-layer-opacity', + 'label-text-font', + 'label-text-size', + 'label-text-tracking', + 'label-text-weight', + 'leading-avatar-label-font', + 'leading-avatar-label-line-height', + 'leading-avatar-label-size', + 'leading-avatar-label-tracking', + 'leading-avatar-label-weight', + 'overline-color', + 'overline-font', + 'overline-line-height', + 'overline-size', + 'overline-tracking', + 'overline-type', + 'overline-weight', + 'selected-trailing-icon-color', + 'supporting-text-font', + 'supporting-text-line-height', + 'supporting-text-size', + 'supporting-text-tracking', + 'supporting-text-weight', + 'trailing-supporting-text-font', + 'trailing-supporting-text-size', + 'trailing-supporting-text-tracking', + 'trailing-supporting-text-weight', + 'unselected-trailing-icon-color', // go/keep-sorted end ); @@ -133,29 +135,41 @@ $_default: ( $original-tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, - $new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values) + $new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values), + $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 { + $renamed-key: string.slice($key, string.length('list-item-') + 1); + $renamed-tokens: map.set($renamed-tokens, $key, $renamed-key); + } + + @return $renamed-tokens; +} + @function _get-new-tokens($deps, $exclude-hardcoded-values) { // Values pulled from b/198759625 spreadsheet @return ( // go/keep-sorted start - 'list-item-leading-element-leading-space': - if($exclude-hardcoded-values, null, 16px), - 'list-item-leading-space': if($exclude-hardcoded-values, null, 16px), - 'list-item-leading-video-leading-space': - if($exclude-hardcoded-values, null, 0px), + 'leading-element-leading-space': if($exclude-hardcoded-values, null, 16px), + 'leading-space': if($exclude-hardcoded-values, null, 16px), + 'leading-video-leading-space': if($exclude-hardcoded-values, null, 0px), // Commented out until the comments in the spreadsheet linked above are // resolved regarding vertical alignment. - // 'list-item-leading-item-top-space': if($exclude-hardcoded-values, null, 8px), - // 'list-item-leading-video-top-space': if($exclude-hardcoded-values, null, 0px), - // 'list-item-leading-item-bottom-space': if($exclude-hardcoded-values, null, 8px), - // 'list-item-leading-video-bottom-space': if($exclude-hardcoded-values, null, 0px), - 'list-item-trailing-element-headline-trailing-element-space': 16px, - 'list-item-trailing-space': if($exclude-hardcoded-values, null, 24px), + // 'leading-item-top-space': if($exclude-hardcoded-values, null, 8px), + // 'leading-video-top-space': if($exclude-hardcoded-values, null, 0px), + // 'leading-item-bottom-space': if($exclude-hardcoded-values, null, 8px), + // 'leading-video-bottom-space': if($exclude-hardcoded-values, null, 0px), + 'trailing-element-headline-trailing-element-space': 16px, + 'trailing-space': if($exclude-hardcoded-values, null, 24px), // go/keep-sorted end ); } diff --git a/tokens/_md-comp-menu-item.scss b/tokens/_md-comp-menu-item.scss index 3e0be4aa4a..e67d93a048 100644 --- a/tokens/_md-comp-menu-item.scss +++ b/tokens/_md-comp-menu-item.scss @@ -18,8 +18,8 @@ $supported-tokens: ( // go/keep-sorted start - 'list-item-container-color', - 'list-item-selected-container-color', + 'container-color', + 'selected-container-color', // go/keep-sorted end ); @@ -43,7 +43,7 @@ $_default: ( $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $renamed-tokens: ( - 'container-color': 'list-item-container-color', + 'list-item-selected-container-color': 'selected-container-color', ) );