From 50dc00a6f8b062fb488be7e2a8b4d95fe79a2510 Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Wed, 26 Oct 2022 12:45:22 -0700 Subject: [PATCH] chore(list): update to use local custom properties PiperOrigin-RevId: 484044408 --- list/lib/_list-theme.scss | 17 ++- list/lib/_tokens.scss | 4 +- list/lib/avatar/_list-item-avatar-theme.scss | 12 +- list/lib/divider/_list-divider-theme.scss | 10 +- list/lib/icon/_list-item-icon-theme.scss | 12 +- list/lib/image/_list-item-image-theme.scss | 12 +- list/lib/listitem/_list-item-theme.scss | 110 +++++++++---------- list/lib/video/_list-item-video-theme.scss | 12 +- 8 files changed, 106 insertions(+), 83 deletions(-) diff --git a/list/lib/_list-theme.scss b/list/lib/_list-theme.scss index c8ba91aff..ffd9497cd 100644 --- a/list/lib/_list-theme.scss +++ b/list/lib/_list-theme.scss @@ -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); } diff --git a/list/lib/_tokens.scss b/list/lib/_tokens.scss index 74d0d3f86..b0d3d7c4c 100644 --- a/list/lib/_tokens.scss +++ b/list/lib/_tokens.scss @@ -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 ); diff --git a/list/lib/avatar/_list-item-avatar-theme.scss b/list/lib/avatar/_list-item-avatar-theme.scss index 6810a6c1d..dde1f413c 100644 --- a/list/lib/avatar/_list-item-avatar-theme.scss +++ b/list/lib/avatar/_list-item-avatar-theme.scss @@ -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); } diff --git a/list/lib/divider/_list-divider-theme.scss b/list/lib/divider/_list-divider-theme.scss index 613b57e0f..952135a8b 100644 --- a/list/lib/divider/_list-divider-theme.scss +++ b/list/lib/divider/_list-divider-theme.scss @@ -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); } diff --git a/list/lib/icon/_list-item-icon-theme.scss b/list/lib/icon/_list-item-icon-theme.scss index 6b49a433f..7332e8538 100644 --- a/list/lib/icon/_list-item-icon-theme.scss +++ b/list/lib/icon/_list-item-icon-theme.scss @@ -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); } diff --git a/list/lib/image/_list-item-image-theme.scss b/list/lib/image/_list-item-image-theme.scss index 172509720..9bf5eddb3 100644 --- a/list/lib/image/_list-item-image-theme.scss +++ b/list/lib/image/_list-item-image-theme.scss @@ -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); } diff --git a/list/lib/listitem/_list-item-theme.scss b/list/lib/listitem/_list-item-theme.scss index a55e02706..b8a20aa4f 100644 --- a/list/lib/listitem/_list-item-theme.scss +++ b/list/lib/listitem/_list-item-theme.scss @@ -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), ) ); } diff --git a/list/lib/video/_list-item-video-theme.scss b/list/lib/video/_list-item-video-theme.scss index 938ba8e99..4aa1f7ea3 100644 --- a/list/lib/video/_list-item-video-theme.scss +++ b/list/lib/video/_list-item-video-theme.scss @@ -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); }