From f2b4eec8f094f64515a339c85ff2ff366b31011e Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Tue, 1 Nov 2022 09:45:33 -0700 Subject: [PATCH] chore(menu): update to use local custom properties PiperOrigin-RevId: 485342145 --- menu/lib/_menu-theme.scss | 79 +++++++++++++++++---------------------- 1 file changed, 34 insertions(+), 45 deletions(-) diff --git a/menu/lib/_menu-theme.scss b/menu/lib/_menu-theme.scss index 7184211cd..3feddbd3d 100644 --- a/menu/lib/_menu-theme.scss +++ b/menu/lib/_menu-theme.scss @@ -30,79 +30,68 @@ $light-theme: tokens.md-comp-menu-values(); $theme: _resolve-theme($theme, $resolvers); $theme: theme.create-theme-vars($theme, $_custom-property-prefix); + & { + @each $token, $value in $theme { + --_#{$token}: #{$value}; + } + } + @include menu-surface.theme( ( - container-elevation-shadow: map.get($theme, 'container-elevation-shadow'), - container-shape: map.get($theme, 'container-shape'), + container-elevation-shadow: var(--_container-elevation-shadow), + container-shape: var(--_container-shape), ), $resolvers ); @include list.theme( ( - container-color: map.get($theme, 'container-color'), + container-color: var(--_container-color), container-surface-tint-layer-color: - map.get($theme, 'container-surface-tint-layer-color'), + var(--_container-surface-tint-layer-color), container-elevation-overlay-opacity: - map.get($theme, 'container-elevation-overlay-opacity'), + var(--_container-elevation-overlay-opacity), ) ); @include list-item.theme( ( - list-item-container-color: map.get($theme, 'container-color'), - list-item-one-line-container-height: - map.get($theme, 'list-item-container-height'), + list-item-container-color: var(--_container-color), + list-item-one-line-container-height: var(--_list-item-container-height), list-item-disabled-label-text-color: - map.get($theme, 'list-item-disabled-label-text-color'), + var(--_list-item-disabled-label-text-color), list-item-disabled-label-text-opacity: - map.get($theme, 'list-item-disabled-label-text-opacity'), - list-item-hover-label-text-color: - map.get($theme, 'list-item-hover-label-text-color'), + var(--_list-item-disabled-label-text-opacity), + list-item-hover-label-text-color: var(--_list-item-hover-label-text-color), list-item-hover-state-layer-color: - map.get($theme, 'list-item-hover-state-layer-color'), + var(--_list-item-hover-state-layer-color), list-item-hover-state-layer-opacity: - map.get($theme, 'list-item-hover-state-layer-opacity'), - list-item-label-text-color: map.get($theme, 'list-item-label-text-color'), - list-item-label-text-font: map.get($theme, 'list-item-label-text-font'), - list-item-label-text-line-height: - map.get($theme, 'list-item-label-text-line-height'), - list-item-label-text-size: map.get($theme, 'list-item-label-text-size'), - list-item-label-text-tracking: - map.get($theme, 'list-item-label-text-tracking'), - list-item-label-text-weight: - map.get($theme, 'list-item-label-text-tracking'), + var(--_list-item-hover-state-layer-opacity), + list-item-label-text-color: var(--_list-item-label-text-color), + list-item-label-text-font: var(--_list-item-label-text-font), + list-item-label-text-line-height: var(--_list-item-label-text-line-height), + list-item-label-text-size: var(--_list-item-label-text-size), + list-item-label-text-tracking: var(--_list-item-label-text-tracking), + list-item-label-text-weight: var(--_list-item-label-text-tracking), list-item-disabled-leading-icon-color: - map.get( - $theme, - 'list-item-with-leading-icon-disabled-leading-icon-color' - ), + var(--_list-item-with-leading-icon-disabled-leading-icon-color), list-item-disabled-leading-icon-opacity: - map.get( - $theme, - 'list-item-with-leading-icon-disabled-leading-icon-opacity' - ), + var(--_list-item-with-leading-icon-disabled-leading-icon-opacity), list-item-hover-leading-icon-color: - map.get($theme, 'list-item-with-leading-icon-hover-icon-color'), + var(--_list-item-with-leading-icon-hover-icon-color), list-item-leading-icon-color: - map.get($theme, 'list-item-with-leading-icon-leading-icon-color'), + var(--_list-item-with-leading-icon-leading-icon-color), list-item-leading-icon-size: - map.get($theme, 'list-item-with-leading-icon-leading-icon-size'), + var(--_list-item-with-leading-icon-leading-icon-size), list-item-disabled-trailing-icon-color: - map.get( - $theme, - 'list-item-with-trailing-icon-disabled-trailing-icon-color' - ), + var(--_list-item-with-trailing-icon-disabled-trailing-icon-color), list-item-disabled-trailing-icon-opacity: - map.get( - $theme, - 'list-item-with-trailing-icon-disabled-trailing-icon-opacity' - ), + var(--_list-item-with-trailing-icon-disabled-trailing-icon-opacity), list-item-hover-trailing-icon-color: - map.get($theme, 'list-item-with-trailing-icon-hover-icon-color'), + var(--_list-item-with-trailing-icon-hover-icon-color), list-item-trailing-icon-color: - map.get($theme, 'list-item-with-trailing-icon-trailing-icon-color'), + var(--_list-item-with-trailing-icon-trailing-icon-color), list-item-trailing-icon-size: - map.get($theme, 'list-item-with-leading-icon-trailing-icon-size'), + var(--_list-item-with-leading-icon-trailing-icon-size), ) ); }