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 | }
|
---|