diff --git a/sass/_typography.scss b/sass/_typography.scss index 2436cd4bb6..6d9621f813 100644 --- a/sass/_typography.scss +++ b/sass/_typography.scss @@ -12,6 +12,37 @@ @use './theme'; // go/keep-sorted end +/// Resolves a theme's typography tokens for the given prefixes +/// +/// @example - scss +/// // $theme has the following tokens: +/// // - label-text-font +/// // - label-text-line-height +/// // - label-text-size +/// // - label-text-tracking +/// // - label-text-weight +/// // - label-text-type +/// @debug resolve-tokens($theme, label-text); // (label-text-type: ...) +/// +/// @param {Map} $tokens - Tokens to resolve +/// @param {String...} $token-prefixes - The prefixes of typography tokens to resolve. +/// @return {Map} The resolved tokens +@function resolve-tokens($tokens, $token-prefixes...) { + @each $token-prefix in $token-prefixes { + // leave only `#{$token-prefix}-type` + $tokens: map.remove( + $tokens, + '#{$token-prefix}-font', + '#{$token-prefix}-line-height', + '#{$token-prefix}-size', + '#{$token-prefix}-tracking', + '#{$token-prefix}-weight' + ); + } + + @return $tokens; +} + /// Resolves a theme's typography tokens for the given prefix. /// /// @example - scss diff --git a/sass/test/_typography.test.scss b/sass/test/_typography.test.scss new file mode 100644 index 0000000000..10bfb4fc9b --- /dev/null +++ b/sass/test/_typography.test.scss @@ -0,0 +1,56 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +// go/keep-sorted start +@use 'sass:map'; +@use 'sass:meta'; +@use 'true' as test; +// go/keep-sorted end +// go/keep-sorted start +@use '../map-ext'; +@use '../typography'; +// go/keep-sorted end + +@include test.describe('typography') { + $input: ( + 'text-font': 'Roboto', + 'text-line-height': 1rem, + 'text-size': 1rem, + 'text-tracking': 0.005rem, + 'text-weight': 400, + 'text-type': '400 1rem/1rem Roboto', + ); + + @include test.describe('resolve-tokens()') { + @include test.it('should return a map') { + $result: typography.resolve-tokens($input); + @include test.assert-equal(meta.type-of($result), 'map'); + } + + @include test.it('does not modify input without a list of tokens') { + $expected: $input; + $result: typography.resolve-tokens($input); + @include test.assert-equal($expected, $result); + } + + @include test.it('should remove typography tokens aside from `-type`') { + $expected: map-ext.pick($input, ('text-type')); + $result: typography.resolve-tokens($input, 'text'); + @include test.assert-equal($expected, $result); + } + + @include test.it('only modifies specified tokens') { + $input: map.merge( + $input, + ( + 'other-token': 16px, + ) + ); + $expected: map-ext.pick($input, ('text-type', 'other-token')); + $result: typography.resolve-tokens($input, 'text'); + @include test.assert-equal($expected, $result); + } + } +} diff --git a/sass/test/test.scss b/sass/test/test.scss index 0001a2ba23..7377e90956 100644 --- a/sass/test/test.scss +++ b/sass/test/test.scss @@ -9,4 +9,5 @@ @use './map-ext.test'; @use './shape.test'; @use './string-ext.test'; +@use './typography.test'; // go/keep-sorted end