refactor(list-item)!: remove duplicate list-item menu-item from custom prop names

BREAKING: renames custom props from this:

`--md-list-item-list-item-...`
`--md-menu-item-list-item-...`

to:
`--md-list-item-...`
`--md-menu-item-...`
PiperOrigin-RevId: 557337871

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;

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);
     }
 

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);
   }
 }

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,
       )
     );
   }

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);
     }
   }
 

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
   );
 }

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