diff --git a/sass/_resolvers.scss b/sass/_resolvers.scss index 0324a9a04..89fbf3a51 100644 --- a/sass/_resolvers.scss +++ b/sass/_resolvers.scss @@ -8,11 +8,9 @@ // go/keep-sorted end // go/keep-sorted start @use './elevation'; -@use './typography'; // go/keep-sorted end /// Material Design resolvers. $material: ( elevation: meta.get-function('resolver', $module: 'elevation'), - typography: meta.get-function('resolver', $module: 'typography'), ); diff --git a/sass/_typography.scss b/sass/_typography.scss index 6d9621f81..04b37c906 100644 --- a/sass/_typography.scss +++ b/sass/_typography.scss @@ -5,11 +5,6 @@ // go/keep-sorted start @use 'sass:map'; -@use 'sass:math'; -@use 'sass:meta'; -// go/keep-sorted end -// go/keep-sorted start -@use './theme'; // go/keep-sorted end /// Resolves a theme's typography tokens for the given prefixes @@ -42,108 +37,3 @@ @return $tokens; } - -/// Resolves a theme's typography tokens for the given prefix. -/// -/// @example - scss -/// // $theme has the following tokens: -/// // - label-text-font -/// // - label-text-line-height -/// // - label-text-size -/// // - label-text-tracking -/// // - label-text-weight -/// $theme: resolve-theme($theme, map.get($resolvers, typography), label-text); -/// -/// @param {Map} $theme - The theme to resolve tokens for. -/// @param {Function} $resolver - The typography resolver to use. -/// @param {String...} $token-prefixes - The prefix(es) of a typography token -/// set. -/// @return {Map} The theme with resolved typography tokens. -@function resolve-theme($theme, $resolver, $token-prefixes...) { - @if $resolver == null { - @return $theme; - } - - @each $token-prefix in $token-prefixes { - $typography-theme: meta.call( - $resolver, - $font: map.get($theme, '#{$token-prefix}-font'), - $line-height: map.get($theme, '#{$token-prefix}-line-height'), - $size: map.get($theme, '#{$token-prefix}-size'), - $tracking: map.get($theme, '#{$token-prefix}-tracking'), - $weight: map.get($theme, '#{$token-prefix}-weight') - ); - - $theme: map.merge( - $theme, - ( - '#{$token-prefix}-font': map.get($typography-theme, font), - '#{$token-prefix}-line-height': map.get($typography-theme, line-height), - '#{$token-prefix}-size': map.get($typography-theme, size), - '#{$token-prefix}-tracking': map.get($typography-theme, tracking), - '#{$token-prefix}-weight': map.get($typography-theme, weight), - ) - ); - } - - @return $theme; -} - -/// Resolves typography tokens, converting `px` to `rem` where appropriate. -/// -/// @param {String} $font - The font-family to resolve. -/// @param {Number} $line-height - The line-height to resolve. -/// @param {String} $size - The font-size to resolve. -/// @param {String} $tracking - The letter-spacing to resolve. -/// @param {String} $weight - The font-weight to resolve. -/// @return {Map} The resolved typography theme with `font`, `line-height`, -/// `size`, `tracking`, and `weight` tokens. -@function resolver($args...) { - $args: meta.keywords($args); - @return ( - font: map.get($args, font), - line-height: _px-to-rem(map.get($args, line-height)), - size: _px-to-rem(map.get($args, size)), - tracking: _px-to-rem(map.get($args, tracking)), - weight: map.get($args, weight) - ); -} - -@function _px-to-rem($px) { - @if $px == null { - @return null; - } - - @if meta.type-of($px) != 'number' or $px == 0 or not math.compatible($px, 1px) - { - // Value is something other than px, use as-is. - @return $px; - } - - @return math.div($px, 16px) * 1rem; -} - -$_reference-theme: ( - font: null, - line-height: null, - size: null, - tracking: null, - weight: null, -); - -@mixin theme-styles($theme) { - $theme: theme.validate-theme-styles( - $_reference-theme, - $theme, - $require-all: false - ); - @include _font($theme); -} - -@mixin _font($font) { - font-family: map.get($font, font); - font-size: map.get($font, size); - font-weight: map.get($font, weight); - letter-spacing: map.get($font, tracking); - line-height: map.get($font, line-height); -}