fix(navigation,badge)!: migrate to -text-type tokens

PiperOrigin-RevId: 510540741
material-components · Feb 17, 2023 · 7b86677 · 7b86677
1 parent f0f5ae5
commit 7b86677
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 23 deletions.
diff --git 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
@@ -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');
+}