From acd40a2f57277a67850c8e103a405dfcc4d3fdce Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Wed, 6 Sep 2023 13:14:55 -0700 Subject: [PATCH] fix(labs): remove font shorthand tokens PiperOrigin-RevId: 563195627 --- labs/badge/internal/_badge.scss | 5 ++++- .../internal/_navigation-tab.scss | 5 ++++- labs/segmentedbutton/internal/_shared.scss | 5 ++++- tokens/_md-comp-badge.scss | 15 +-------------- tokens/_md-comp-outlined-segmented-button.scss | 18 +++++------------- 5 files changed, 18 insertions(+), 30 deletions(-) diff --git a/labs/badge/internal/_badge.scss b/labs/badge/internal/_badge.scss index e32ceea439..5dfd8845a9 100644 --- a/labs/badge/internal/_badge.scss +++ b/labs/badge/internal/_badge.scss @@ -68,6 +68,9 @@ } .md3-badge__value { - font: var(--_large-label-text-type); + font-family: var(--_large-label-text-font); + font-size: var(--_large-label-text-size); + line-height: var(--_large-label-text-line-height); + font-weight: var(--_large-label-text-weight); } } diff --git a/labs/navigationtab/internal/_navigation-tab.scss b/labs/navigationtab/internal/_navigation-tab.scss index 2d72f9e3e0..7e9734b1bd 100644 --- a/labs/navigationtab/internal/_navigation-tab.scss +++ b/labs/navigationtab/internal/_navigation-tab.scss @@ -72,7 +72,10 @@ $animation-duration: 100ms; position: relative; text-align: center; width: 100%; - font: var(--_label-text-type); + font-family: var(--_label-text-font); + font-size: var(--_label-text-size); + line-height: var(--_label-text-line-height); + font-weight: var(--_label-text-weight); // Firefox draws a dotted border around focused buttons unless specifically overridden. &::-moz-focus-inner { diff --git a/labs/segmentedbutton/internal/_shared.scss b/labs/segmentedbutton/internal/_shared.scss index f47de7b98c..f7c4f09da1 100644 --- a/labs/segmentedbutton/internal/_shared.scss +++ b/labs/segmentedbutton/internal/_shared.scss @@ -103,7 +103,10 @@ } .md3-segmented-button__label-text { - font: var(--_label-text-type); + font-family: var(--_label-text-font); + font-size: var(--_label-text-size); + line-height: var(--_label-text-line-height); + font-weight: var(--_label-text-weight); } &.md3-segmented-button--selected:enabled { diff --git a/tokens/_md-comp-badge.scss b/tokens/_md-comp-badge.scss index a85646ede5..0daf8b9664 100644 --- a/tokens/_md-comp-badge.scss +++ b/tokens/_md-comp-badge.scss @@ -19,23 +19,10 @@ $_default: ( 'md-sys-typescale': md-sys-typescale.values(), ); -$_unsupported-tokens: ( - 'large-label-text-font', - 'large-label-text-line-height', - 'large-label-text-size', - 'large-label-text-tracking', - 'large-label-text-weight' -); +$_unsupported-tokens: ('large-label-text-tracking', 'large-label-text-type'); @function values($deps: $_default, $exclude-hardcoded-values: false) { $tokens: md-comp-badge.values($deps, $exclude-hardcoded-values); $tokens: map.remove($tokens, $_unsupported-tokens...); - // TODO(b/271876162): remove when tokens compiler emits typescale tokens - $tokens: map.merge( - $tokens, - ( - 'large-label-text-type': map.get($deps, 'md-sys-typescale', 'label-small'), - ) - ); @return $tokens; } diff --git a/tokens/_md-comp-outlined-segmented-button.scss b/tokens/_md-comp-outlined-segmented-button.scss index 2d7833ffa6..c1c97004ce 100644 --- a/tokens/_md-comp-outlined-segmented-button.scss +++ b/tokens/_md-comp-outlined-segmented-button.scss @@ -22,7 +22,10 @@ $supported-tokens: ( 'disabled-outline-color', 'hover-state-layer-opacity', 'icon-size', - 'label-text-type', + 'label-text-font', + 'label-text-line-height', + 'label-text-size', + 'label-text-weight', 'outline-color', 'pressed-state-layer-opacity', 'selected-container-color', @@ -56,11 +59,8 @@ $unsupported-tokens: ( 'disabled-label-text-opacity', 'disabled-outline-opacity', 'focus-state-layer-opacity', - 'label-text-font', - 'label-text-line-height', - 'label-text-size', 'label-text-tracking', - 'label-text-weight', + 'label-text-type', 'outline-width', 'selected-focus-state-layer-color', 'unselected-focus-state-layer-color', @@ -87,13 +87,5 @@ $_default: ( ) ); - // TODO(b/271876162): remove when tokens compiler emits typescale tokens - $tokens: map.merge( - $tokens, - ( - 'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'), - ) - ); - @return $tokens; }