mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 13:40:03 +03:00
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
This commit is contained in:
parent
b7671fb788
commit
2d9352e3f4
@ -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;
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
);
|
||||
}
|
||||
|
@ -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',
|
||||
)
|
||||
);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user