DEV/material-components_material-web
1
0
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2026-03-09 00:09:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(list): update to use local custom properties

Browse Source 
PiperOrigin-RevId: 484044408
This commit is contained in:
Elizabeth Mitchell 2022-10-26 12:45:22 -07:00 committed by Copybara-Service
parent ed7bf9d891
commit 50dc00a6f8
8 changed files with 106 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
list/lib/_list-theme.scss
View File

@ -33,19 +33,24 @@ $light-theme: (
$theme: theme.validate-theme-styles($light-theme, $theme);
$theme: theme.create-theme-vars($theme, list);
& {
@each $token, $value in $theme {
--_#{$token}: #{$value};
}
}
@include list-divider-theme.theme(
(
list-divider-color: map.get($theme, 'list-divider-color'),
list-divider-height: map.get($theme, 'list-divider-height'),
list-divider-color: var(--_list-divider-color),
list-divider-height: var(--_list-divider-height),
)
);
@include elevation-theme.theme-styles(
(
surface-tint-layer-color:
map.get($theme, 'container-surface-tint-layer-color'),
overlay-opacity: map.get($theme, 'container-elevation-overlay-opacity'),
surface-tint-layer-color: var(--_container-surface-tint-layer-color),
overlay-opacity: var(--_container-elevation-overlay-opacity),
)
);
background-color: map.get($theme, 'container-color');
background-color: var(--_container-color);
}

4
list/lib/_tokens.scss
View File

@ -72,8 +72,8 @@
list-item-hover-state-layer-color: null,
list-item-hover-state-layer-opacity: null,
list-item-hover-label-text-color: null,
list-item-hover-leading-icon-color: null,
list-item-hover-trailing-icon-color: null,
list-item-hover-leading-icon-color: #444746,
list-item-hover-trailing-icon-color: #444746,
list-divider-color: #c4c7c5,
list-divider-height: 1px
);

12
list/lib/avatar/_list-item-avatar-theme.scss
View File

@ -21,7 +21,13 @@ $light-theme: map-ext.pick(
$theme: theme.validate-theme($light-theme, $theme);
$theme: theme.create-theme-vars($theme, list);
border-radius: map.get($theme, list-item-leading-avatar-shape);
height: map.get($theme, list-item-leading-avatar-size);
width: map.get($theme, list-item-leading-avatar-size);
& {
@each $token, $value in $theme {
--_#{$token}: #{$value};
}
}
border-radius: var(--_list-item-leading-avatar-shape);
height: var(--_list-item-leading-avatar-size);
width: var(--_list-item-leading-avatar-size);
}

10
list/lib/divider/_list-divider-theme.scss
View File

@ -25,6 +25,12 @@ $_custom-property-prefix: 'list-divider';
$theme: theme.validate-theme($light-theme, $theme);
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
background-color: map.get($theme, 'list-divider-color');
height: map.get($theme, 'list-divider-height');
& {
@each $token, $value in $theme {
--_#{$token}: #{$value};
}
}
background-color: var(--_list-divider-color);
height: var(--_list-divider-height);
}

12
list/lib/icon/_list-item-icon-theme.scss
View File

@ -26,7 +26,13 @@ $_custom-property-prefix: 'list-item-icon';
$theme: theme.validate-theme($light-theme, $theme);
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
color: map.get($theme, list-item-icon-color);
font-size: map.get($theme, list-item-icon-size);
opacity: map.get($theme, list-item-icon-opacity);
& {
@each $token, $value in $theme {
--_#{$token}: #{$value};
}
}
color: var(--_list-item-icon-color);
font-size: var(--_list-item-icon-size);
opacity: var(--_list-item-icon-opacity);
}

12
list/lib/image/_list-item-image-theme.scss
View File

@ -30,7 +30,13 @@ $_custom-property-prefix: 'list-item-image';
$theme: theme.validate-theme($light-theme, $theme);
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
height: map.get($theme, list-item-leading-image-height);
width: map.get($theme, list-item-leading-image-width);
border-radius: map.get($theme, list-item-leading-image-shape);
& {
@each $token, $value in $theme {
--_#{$token}: #{$value};
}
}
height: var(--_list-item-leading-image-height);
width: var(--_list-item-leading-image-width);
border-radius: var(--_list-item-leading-image-shape);
}

110
list/lib/listitem/_list-item-theme.scss
View File

@ -34,97 +34,91 @@ $light-theme: tokens.md-comp-list-values();
$theme: _resolve-theme($theme, $resolvers);
$theme: theme.create-theme-vars($theme, list);
background-color: map.get($theme, list-item-container-color);
border-radius: map.get($theme, list-item-container-shape);
& {
@each $token, $value in $theme {
--_#{$token}: #{$value};
}
}
background-color: var(--_list-item-container-color);
border-radius: var(--_list-item-container-shape);
.md3-list-item__label-text {
color: map.get($theme, list-item-label-text-color);
font-family: map.get($theme, list-item-label-text-font);
font-size: map.get($theme, list-item-label-text-size);
letter-spacing: map.get($theme, list-item-label-text-tracking);
font-weight: map.get($theme, list-item-label-text-weight);
line-height: map.get($theme, list-item-label-text-line-height);
color: var(--_list-item-label-text-color);
font-family: var(--_list-item-label-text-font);
font-size: var(--_list-item-label-text-size);
letter-spacing: var(--_list-item-label-text-tracking);
font-weight: var(--_list-item-label-text-weight);
line-height: var(--_list-item-label-text-line-height);
}
.md3-list-item__supporting-text {
color: map.get($theme, list-item-supporting-text-color);
font-family: map.get($theme, list-item-supporting-text-font);
font-size: map.get($theme, list-item-supporting-text-size);
letter-spacing: map.get($theme, list-item-supporting-text-tracking);
font-weight: map.get($theme, list-item-supporting-text-weight);
line-height: map.get($theme, list-item-supporting-text-line-height);
color: var(--_list-item-supporting-text-color);
font-family: var(--_list-item-supporting-text-font);
font-size: var(--_list-item-supporting-text-size);
letter-spacing: var(--_list-item-supporting-text-tracking);
font-weight: var(--_list-item-supporting-text-weight);
line-height: var(--_list-item-supporting-text-line-height);
}
.md3-list-item__trailing-supporting-text {
font-family: map.get($theme, list-item-trailing-supporting-text-font);
font-size: map.get($theme, list-item-trailing-supporting-text-size);
letter-spacing: map.get(
$theme,
list-item-trailing-supporting-text-tracking
);
font-weight: map.get($theme, list-item-trailing-supporting-text-weight);
line-height: map.get(
$theme,
list-item-trailing-supporting-text-line-height
);
font-family: var(--_list-item-trailing-supporting-text-font);
font-size: var(--_list-item-trailing-supporting-text-size);
letter-spacing: var(--_list-item-trailing-supporting-text-tracking);
font-weight: var(--_list-item-trailing-supporting-text-weight);
line-height: var(--_list-item-trailing-supporting-text-line-height);
}
&.md3-list-item--disabled {
.md3-list-item__label-text {
color: map.get($theme, list-item-disabled-label-text-color);
opacity: map.get($theme, list-item-disabled-label-text-opacity);
color: var(--_list-item-disabled-label-text-color);
opacity: var(--_list-item-disabled-label-text-opacity);
}
.md3-list-item__supporting-text {
color: map.get($theme, list-item-disabled-supporting-text-color);
opacity: map.get($theme, list-item-disabled-supporting-text-opacity);
color: var(--_list-item-disabled-supporting-text-color);
opacity: var(--_list-item-disabled-supporting-text-opacity);
}
}
&:not(.md3-list-item--disabled) {
.md3-list-item__trailing-supporting-text {
color: map.get($theme, list-item-trailing-supporting-text-color);
color: var(--_list-item-trailing-supporting-text-color);
}
}
&.md3-list-item--with-one-line {
min-height: map.get($theme, list-item-one-line-container-height);
min-height: var(--_list-item-one-line-container-height);
}
&.md3-list-item--with-two-line {
min-height: map.get($theme, list-item-two-line-container-height);
min-height: var(--_list-item-two-line-container-height);
}
&.md3-list-item--with-three-line {
min-height: map.get($theme, list-item-three-line-container-height);
min-height: var(--_list-item-three-line-container-height);
}
@include list-item-image-theme.theme(
(
list-item-leading-image-height:
map.get($theme, list-item-leading-image-height),
list-item-leading-image-width:
map.get($theme, list-item-leading-image-width),
list-item-leading-image-shape:
map.get($theme, list-item-leading-image-shape),
list-item-leading-image-height: var(--_list-item-leading-image-height),
list-item-leading-image-width: var(--_list-item-leading-image-width),
list-item-leading-image-shape: var(--_list-item-leading-image-shape),
)
);
@include list-item-video-theme.theme(
(
list-item-leading-video-height:
map.get($theme, list-item-leading-video-height),
list-item-leading-video-width:
map.get($theme, list-item-leading-video-width),
list-item-leading-video-shape:
map.get($theme, list-item-leading-video-shape),
list-item-leading-video-height: var(--_list-item-leading-video-height),
list-item-leading-video-width: var(--_list-item-leading-video-width),
list-item-leading-video-shape: var(--_list-item-leading-video-shape),
)
);
.md3-list-item__start {
@include list-item-icon-theme.theme(
(
list-item-icon-color: map.get($theme, list-item-leading-icon-color),
list-item-icon-size: map.get($theme, list-item-leading-icon-size),
list-item-icon-color: var(--_list-item-leading-icon-color),
list-item-icon-size: var(--_list-item-leading-icon-size),
)
);
}
@ -132,8 +126,8 @@ $light-theme: tokens.md-comp-list-values();
.md3-list-item__end {
@include list-item-icon-theme.theme(
(
list-item-icon-color: map.get($theme, list-item-trailing-icon-color),
list-item-icon-size: map.get($theme, list-item-trailing-icon-size),
list-item-icon-color: var(--_list-item-trailing-icon-color),
list-item-icon-size: var(--_list-item-trailing-icon-size),
)
);
}
@ -141,10 +135,8 @@ $light-theme: tokens.md-comp-list-values();
&.md3-list-item--disabled .md3-list-item__start {
@include list-item-icon-theme.theme(
(
list-item-icon-color:
map.get($theme, list-item-disabled-leading-icon-color),
list-item-icon-opacity:
map.get($theme, list-item-disabled-leading-icon-opacity),
list-item-icon-color: var(--_list-item-disabled-leading-icon-color),
list-item-icon-opacity: var(--_list-item-disabled-leading-icon-opacity),
)
);
}
@ -152,10 +144,8 @@ $light-theme: tokens.md-comp-list-values();
&.md3-list-item--disabled .md3-list-item__end {
@include list-item-icon-theme.theme(
(
list-item-icon-color:
map.get($theme, list-item-disabled-trailing-icon-color),
list-item-icon-opacity:
map.get($theme, list-item-disabled-trailing-icon-opacity),
list-item-icon-color: var(--_list-item-disabled-trailing-icon-color),
list-item-icon-opacity: var(--_list-item-disabled-trailing-icon-opacity),
)
);
}
@ -163,8 +153,7 @@ $light-theme: tokens.md-comp-list-values();
&:hover .md3-list-item__start {
@include list-item-icon-theme.theme(
(
list-item-icon-color:
map.get($theme, list-item-hover-leading-icon-color),
list-item-icon-color: var(--_list-item-hover-leading-icon-color),
)
);
}
@ -172,8 +161,7 @@ $light-theme: tokens.md-comp-list-values();
&:hover .md3-list-item__end {
@include list-item-icon-theme.theme(
(
list-item-icon-color:
map.get($theme, list-item-hover-trailing-icon-color),
list-item-icon-color: var(--_list-item-hover-trailing-icon-color),
)
);
}

12
list/lib/video/_list-item-video-theme.scss
View File

@ -30,7 +30,13 @@ $_custom-property-prefix: 'list-item-video';
$theme: theme.validate-theme($light-theme, $theme);
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
height: map.get($theme, list-item-leading-video-height);
width: map.get($theme, list-item-leading-video-width);
border-radius: map.get($theme, list-item-leading-video-shape);
& {
@each $token, $value in $theme {
--_#{$token}: #{$value};
}
}
height: var(--_list-item-leading-video-height);
width: var(--_list-item-leading-video-width);
border-radius: var(--_list-item-leading-video-shape);
}