fix(slider): use label-label-text-type font token

PiperOrigin-RevId: 510723088
material-components · Feb 19, 2023 · ad889ea · ad889ea
1 parent df6a723
commit ad889ea
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/slider/lib/_slider.scss b/slider/lib/_slider.scss
@@ -13,15 +13,16 @@
 @use '../../focus/focus-ring';
 @use '../../ripple/ripple';
 @use '../../sass/color';
-@use '../../sass/resolvers';
 @use '../../sass/shape';
 @use '../../sass/theme';
+@use '../../sass/typography';
 @use '../../sass/var';
 @use './tokens';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
   $tokens: tokens.remove-unsupported-tokens($tokens);
+  $tokens: typography.resolve-tokens($tokens, 'label-label-text');
   $tokens: theme.validate-theme(tokens.md-comp-slider-values(), $tokens);
   $tokens: theme.create-theme-vars($tokens, 'slider');
 
@@ -310,11 +311,7 @@
     border-radius: var(--_label-container-shape);
 
     color: var(--_label-label-text-color);
-    font-family: var(--_label-label-text-font);
-    font-size: var(--_label-label-text-size);
-    font-weight: var(--_label-label-text-weight);
-    letter-spacing: var(--_label-label-text-tracking);
-    line-height: var(--_label-label-text-line-height);
+    font: var(--_label-label-text-type);
 
     inset-block-end: 100%;
     min-inline-size: var(--_label-container-height);

diff --git a/slider/lib/_tokens.scss b/slider/lib/_tokens.scss
@@ -11,6 +11,7 @@
 @use '../../sass/color';
 @use '../../sass/shape';
 @use '../../sass/theme';
+@use '../../sass/typography';
 @use '../../sass/var';
 @use '../../tokens';
 // go/keep-sorted end
@@ -28,12 +29,14 @@ $_tokens: (
     map.get(tokens.md-sys-motion-values(), 'easing-emphasized'),
 );
 
+@function resolve-typography($tokens) {
+  @return typography.resolve-tokens($tokens, 'label-label-text');
+}
+
 @function remove-unsupported-tokens($tokens) {
   $unsupported-tokens: (
     'disabled-handle-opacity',
     'label-container-elevation',
-    // b/203778922: `*-type` used by other platforms but not web.
-    'label-label-text-type',
     'track-elevation',
     // for efficiency, tick marks are rendered as radial-gradients and
     // have more limited customization
@@ -54,6 +57,7 @@ $_tokens: (
  */
 @function md-comp-slider-values() {
   $tokens: remove-unsupported-tokens($baseTokens);
+  $tokens: typography.resolve-tokens($tokens, 'label-label-text');
   @return map.merge($tokens, $_tokens);
 }