[6a3a178] | 1 | @use 'sass:list';
|
---|
| 2 | @use 'sass:map';
|
---|
| 3 | @use 'sass:math';
|
---|
| 4 | @use 'sass:meta';
|
---|
| 5 | @use 'sass:string';
|
---|
| 6 | @use '../style/private';
|
---|
| 7 |
|
---|
| 8 |
|
---|
| 9 | // Utility for fetching a nested value from a typography config.
|
---|
| 10 | @function _mat-get-type-value($config, $level, $name) {
|
---|
| 11 | @return map.get(map.get($config, $level), $name);
|
---|
| 12 | }
|
---|
| 13 |
|
---|
| 14 | /// Gets the font size for a level inside a typography config.
|
---|
| 15 | /// @param {Map} $config A typography config.
|
---|
| 16 | /// @param {Map} $level A typography level.
|
---|
| 17 | @function font-size($config, $level) {
|
---|
| 18 | @return _mat-get-type-value($config, $level, font-size);
|
---|
| 19 | }
|
---|
| 20 |
|
---|
| 21 | /// Gets the line height for a level inside a typography config.
|
---|
| 22 | /// @param {Map} $config A typography config.
|
---|
| 23 | /// @param {Map} $level A typography level.
|
---|
| 24 | @function line-height($config, $level) {
|
---|
| 25 | @return _mat-get-type-value($config, $level, line-height);
|
---|
| 26 | }
|
---|
| 27 |
|
---|
| 28 | /// Gets the font weight for a level inside a typography config.
|
---|
| 29 | /// @param {Map} $config A typography config.
|
---|
| 30 | /// @param {Map} $level A typography level.
|
---|
| 31 | @function font-weight($config, $level) {
|
---|
| 32 | @return _mat-get-type-value($config, $level, font-weight);
|
---|
| 33 | }
|
---|
| 34 |
|
---|
| 35 | /// Gets the letter spacing for a level inside a typography config.
|
---|
| 36 | /// @param {Map} $config A typography config.
|
---|
| 37 | /// @param {Map} $level A typography level.
|
---|
| 38 | @function letter-spacing($config, $level) {
|
---|
| 39 | @return _mat-get-type-value($config, $level, letter-spacing);
|
---|
| 40 | }
|
---|
| 41 |
|
---|
| 42 | /// Gets the font-family from a typography config and removes the quotes around it.
|
---|
| 43 | /// @param {Map} $config A typography config.
|
---|
| 44 | /// @param {Map} $level A typography level.
|
---|
| 45 | @function font-family($config, $level: null) {
|
---|
| 46 | $font-family: map.get($config, font-family);
|
---|
| 47 |
|
---|
| 48 | @if $level != null {
|
---|
| 49 | $font-family: _mat-get-type-value($config, $level, font-family);
|
---|
| 50 | }
|
---|
| 51 |
|
---|
| 52 | // Guard against unquoting non-string values, because it's deprecated.
|
---|
| 53 | @return if(meta.type-of($font-family) == string, string.unquote($font-family), $font-family);
|
---|
| 54 | }
|
---|
| 55 |
|
---|
| 56 | /// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
|
---|
| 57 | /// the individual properties if a value that isn't allowed in the shorthand is passed in.
|
---|
| 58 | /// @param {String} $font-size The font-size value.
|
---|
| 59 | /// @param {String | Number} $font-weight The font-weight value.
|
---|
| 60 | /// @param {String | Number} $line-height The line-height value.
|
---|
| 61 | /// @param {String} $font-family The font-family value.
|
---|
| 62 | /// @returns {String} The `font` shorthand value combining the given parts.
|
---|
| 63 | @mixin font-shorthand($font-size, $font-weight, $line-height, $font-family) {
|
---|
| 64 | // If any of the values are set to `inherit`, we can't use the shorthand
|
---|
| 65 | // so we fall back to passing in the individual properties.
|
---|
| 66 | @if ($font-size == inherit or
|
---|
| 67 | $font-weight == inherit or
|
---|
| 68 | $line-height == inherit or
|
---|
| 69 | $font-family == inherit or
|
---|
| 70 | $font-size == null or
|
---|
| 71 | $font-weight == null or
|
---|
| 72 | $line-height == null or
|
---|
| 73 | $font-family == null) {
|
---|
| 74 |
|
---|
| 75 | font-size: $font-size;
|
---|
| 76 | font-weight: $font-weight;
|
---|
| 77 | line-height: $line-height;
|
---|
| 78 | font-family: $font-family;
|
---|
| 79 | }
|
---|
| 80 | @else {
|
---|
| 81 | // Otherwise use the shorthand `font`, because it's the least amount of bytes. Note
|
---|
| 82 | // that we need to use `list.slash` for `font-size/line-height` in order to prevent
|
---|
| 83 | // Sass from dividing the two values.
|
---|
| 84 | font: $font-weight private.private-slash($font-size, $line-height) $font-family;
|
---|
| 85 | }
|
---|
| 86 | }
|
---|
| 87 |
|
---|
| 88 | /// Emits CSS styles for the given typography level.
|
---|
| 89 | /// @param {Map} $config A typography config.
|
---|
| 90 | /// @param {Map} $level A typography level.
|
---|
| 91 | @mixin typography-level($config, $level) {
|
---|
| 92 | $font-size: font-size($config, $level);
|
---|
| 93 | $font-weight: font-weight($config, $level);
|
---|
| 94 | $line-height: line-height($config, $level);
|
---|
| 95 | $font-family: font-family($config, $level);
|
---|
| 96 |
|
---|
| 97 | @include font-shorthand($font-size, $font-weight, $line-height, $font-family);
|
---|
| 98 | letter-spacing: letter-spacing($config, $level);
|
---|
| 99 | }
|
---|
| 100 |
|
---|
| 101 | /// Coerce a value to `em` if it is a unitless number, otherwise returns
|
---|
| 102 | /// the value provided.
|
---|
| 103 | @function private-coerce-unitless-to-em($value) {
|
---|
| 104 | @return if(math.is-unitless($value), 1em * $value, $value);
|
---|
| 105 | }
|
---|