diff --git a/slider/lib/_slider.scss b/slider/lib/_slider.scss index de4086e6d5..5e605656d3 100644 --- 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 index ae59bf735c..989011a5c6 100644 --- 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); }