From 7b8667711a17cc9f8cf30e2d9fdef61dff6d0bb2 Mon Sep 17 00:00:00 2001 From: Daniel Freedman Date: Fri, 17 Feb 2023 15:51:47 -0800 Subject: [PATCH] fix(navigation,badge)!: migrate to `-text-type` tokens PiperOrigin-RevId: 510540741 --- badge/lib/_badge.scss | 23 ++++++++--------------- navigationtab/lib/_navigation-tab.scss | 17 +++++++++-------- 2 files changed, 17 insertions(+), 23 deletions(-) diff --git a/badge/lib/_badge.scss b/badge/lib/_badge.scss index f487fc694d..1e8fc42633 100644 --- a/badge/lib/_badge.scss +++ b/badge/lib/_badge.scss @@ -6,27 +6,26 @@ // stylelint-disable selector-class-pattern -- // Selector '.md3-*' should only be used in this project. -// go/keep-sorted start -@use 'sass:map'; -// go/keep-sorted end // go/keep-sorted start @use '../../sass/theme'; +@use '../../sass/typography'; @use '../../tokens'; // go/keep-sorted end $_custom-property-prefix: 'badge'; @mixin theme($tokens) { - $tokens: theme.validate-theme(tokens.md-comp-badge-values(), $tokens); - $tokens: _resolve-tokens($tokens); + $tokens: theme.validate-theme( + _resolve-tokens(tokens.md-comp-badge-values()), + _resolve-tokens($tokens) + ); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); @include theme.emit-theme-vars($tokens); } @mixin styles() { - $tokens: tokens.md-comp-badge-values(); - $tokens: _resolve-tokens($tokens); + $tokens: _resolve-tokens(tokens.md-comp-badge-values()); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); :host { @@ -69,16 +68,10 @@ $_custom-property-prefix: 'badge'; } .md3-badge__value { - font-family: var(--_large-label-text-font); - font-size: var(--_large-label-text-size); - letter-spacing: var(--_large-label-text-tracking); - line-height: var(--_large-label-text-line-height); - font-weight: var(--_large-label-text-weight); + font: var(--_large-label-text-type); } } @function _resolve-tokens($tokens) { - // Remove unsupported tokens - $tokens: map.remove($tokens, large-label-text-type); - @return $tokens; + @return typography.resolve-tokens($tokens, 'large-label-text'); } diff --git a/navigationtab/lib/_navigation-tab.scss b/navigationtab/lib/_navigation-tab.scss index 049c2d84c8..ecb8b51045 100644 --- a/navigationtab/lib/_navigation-tab.scss +++ b/navigationtab/lib/_navigation-tab.scss @@ -15,6 +15,7 @@ @use '../../motion/animation'; @use '../../ripple/ripple'; @use '../../sass/theme'; +@use '../../sass/typography'; @use '../../tokens'; // go/keep-sorted end @@ -23,8 +24,8 @@ $_custom-property-prefix: 'navigation-bar'; @mixin theme($tokens) { $tokens: theme.validate-theme( - tokens.md-comp-navigation-bar-values(), - $tokens + _resolve-tokens(tokens.md-comp-navigation-bar-values()), + _resolve-tokens($tokens) ); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); @@ -33,7 +34,7 @@ $_custom-property-prefix: 'navigation-bar'; } @mixin styles() { - $tokens: tokens.md-comp-navigation-bar-values(); + $tokens: _resolve-tokens(tokens.md-comp-navigation-bar-values()); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); :host { @@ -71,11 +72,7 @@ $_custom-property-prefix: 'navigation-bar'; position: relative; text-align: center; width: 100%; - font-family: var(--_label-text-font); - font-size: var(--_label-text-size); - letter-spacing: var(--_label-text-tracking); - font-weight: var(--_label-text-weight); - line-height: var(--_label-text-line-height); + font: var(--_label-text-type); // Firefox draws a dotted border around focused buttons unless specifically overridden. &::-moz-focus-inner { @@ -264,3 +261,7 @@ $_custom-property-prefix: 'navigation-bar'; ); } } + +@function _resolve-tokens($tokens) { + @return typography.resolve-tokens($tokens, 'label-text'); +}