igniteui-theming 1.0.0-beta.3 → 1.0.0-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/sass/color/_functions.scss +2 -2
- package/sass/color/_index.scss +0 -1
- package/sass/color/presets/dark/_material.scss +4 -0
- package/sass/color/presets/light/_material.scss +4 -0
- package/sass/elevations/_index.scss +0 -1
- package/sass/elevations/_mixins.scss +1 -1
- package/sass/themes/_functions.scss +9 -10
- package/sass/themes/_mixins.scss +4 -5
- package/sass/typography/_index.scss +0 -1
- package/sass/typography/presets/_bootstrap.scss +11 -0
- package/sass/typography/presets/_fluent.scss +21 -0
- package/sass/typography/presets/_indigo.scss +13 -3
- package/sass/typography/presets/_material.scss +16 -16
- package/test/_color.spec.scss +1 -1
- package/test/_elevations.spec.scss +1 -1
- package/test/_themes.spec.scss +4 -4
- package/test/_typography.spec.scss +5 -6
- package/test/_utils.spec.scss +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "igniteui-theming",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.6",
|
|
4
4
|
"description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
@use 'charts';
|
|
8
8
|
@use 'multipliers';
|
|
9
9
|
@use 'types';
|
|
10
|
-
@use '../utils' as *;
|
|
10
|
+
@use '../utils/math' as *;
|
|
11
11
|
|
|
12
12
|
$_enhanced-accessibility: false;
|
|
13
13
|
|
|
@@ -175,7 +175,7 @@ $_enhanced-accessibility: false;
|
|
|
175
175
|
$meta: if($palette, map.get($palette, '_meta'), null);
|
|
176
176
|
|
|
177
177
|
@if not($c) {
|
|
178
|
-
@error 'The passed color #{$color} is not valid.';
|
|
178
|
+
@error 'The passed color #{meta.inspect($color)} is not valid.';
|
|
179
179
|
}
|
|
180
180
|
|
|
181
181
|
@if not($palette) or not($meta) {
|
package/sass/color/_index.scss
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
@use 'sass:meta';
|
|
3
3
|
@use 'sass:string';
|
|
4
|
-
@use '../
|
|
5
|
-
@use '../elevations/' as *;
|
|
6
|
-
@use '../color/' as color;
|
|
4
|
+
@use '../typography/functions' as *;
|
|
5
|
+
@use '../elevations/functions' as *;
|
|
6
|
+
@use '../color/functions' as color;
|
|
7
7
|
|
|
8
8
|
/// Digests a theme schema and returns a resolved theme map.
|
|
9
9
|
/// @access private
|
|
10
10
|
/// @param {Map} $schema - A theme schema.
|
|
11
|
-
/// @requires {function} extend
|
|
12
11
|
/// @requires {function} resolve-value
|
|
13
12
|
/// @example scss Get the resolved theme for a schema
|
|
14
13
|
/// $custom-schema: (
|
|
@@ -24,14 +23,14 @@
|
|
|
24
23
|
|
|
25
24
|
@each $key, $value in $schema {
|
|
26
25
|
@if meta.type-of($value) == 'map' {
|
|
27
|
-
$result:
|
|
26
|
+
$result: map.merge($result, (#{$key}: resolve-value($value)));
|
|
28
27
|
} @else {
|
|
29
|
-
$result:
|
|
28
|
+
$result: map.merge($result, (#{$key}: $value));
|
|
30
29
|
}
|
|
31
30
|
|
|
32
31
|
// Special case for chart elevation literals
|
|
33
32
|
@if string.index($key, 'elevation') {
|
|
34
|
-
$result:
|
|
33
|
+
$result: map.merge(
|
|
35
34
|
$result,
|
|
36
35
|
(
|
|
37
36
|
#{$key}: #{elevation($value)}
|
|
@@ -41,7 +40,7 @@
|
|
|
41
40
|
|
|
42
41
|
// Special case for chart brushes
|
|
43
42
|
@if $value == 'series' {
|
|
44
|
-
$result:
|
|
43
|
+
$result: map.merge(
|
|
45
44
|
$result,
|
|
46
45
|
(
|
|
47
46
|
#{$key}: #{color.chart-brushes()}
|
|
@@ -105,6 +104,6 @@
|
|
|
105
104
|
/// @param {Number} $radius - The preferred value.
|
|
106
105
|
/// @param {Number} $min [rem(0)] - The minimum value.
|
|
107
106
|
/// @param {Number} $max [$radius] - The maximum allowed value.
|
|
108
|
-
@function border-radius($radius, $min: rem(0), $max: $radius) {
|
|
109
|
-
@return clamp($min, calc(var(--ig-radius-factor) * #{$radius}), $max);
|
|
107
|
+
@function border-radius($radius, $min: #{rem(0)}, $max: $radius) {
|
|
108
|
+
@return clamp(#{$min}, #{calc(var(--ig-radius-factor) * #{$radius})}, #{$max});
|
|
110
109
|
}
|
package/sass/themes/_mixins.scss
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
@use 'sass:meta';
|
|
3
3
|
@use 'sass:string';
|
|
4
|
-
@use '../utils/' as *;
|
|
5
|
-
@use '../
|
|
6
|
-
@use './functions' as *;
|
|
4
|
+
@use '../utils/meta' as *;
|
|
5
|
+
@use '../typography/functions' as *;
|
|
7
6
|
|
|
8
7
|
/// A list of ignored keywords to be excluded when generating CSS variables for a theme.
|
|
9
8
|
/// @access private
|
|
@@ -65,8 +64,8 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector');
|
|
|
65
64
|
/// @param {Number} $radius - The preferred value.
|
|
66
65
|
/// @param {Number} $min [rem(0)] - The minimum value.
|
|
67
66
|
/// @param {Number} $max [$radius] - The maximum allowed value.
|
|
68
|
-
@mixin border-radius($radius, $min: rem(0), $max: $radius) {
|
|
69
|
-
border-radius:
|
|
67
|
+
@mixin border-radius($radius, $min: #{rem(0)}, $max: $radius) {
|
|
68
|
+
border-radius: clamp(#{$min}, #{calc(var(--ig-radius-factor) * #{$radius})}, #{$max});
|
|
70
69
|
}
|
|
71
70
|
|
|
72
71
|
/// Truncates text to a specific number of lines.
|
|
@@ -11,6 +11,7 @@ $_base-scale: (
|
|
|
11
11
|
h1: type-style(
|
|
12
12
|
$font-size: rem(40px),
|
|
13
13
|
$font-weight: 500,
|
|
14
|
+
$letter-spacing: rem(-1.5px),
|
|
14
15
|
$line-height: rem(48px),
|
|
15
16
|
$text-transform: none,
|
|
16
17
|
$margin-top: 0,
|
|
@@ -19,6 +20,7 @@ $_base-scale: (
|
|
|
19
20
|
h2: type-style(
|
|
20
21
|
$font-size: rem(32px),
|
|
21
22
|
$font-weight: 500,
|
|
23
|
+
$letter-spacing: rem(-.5px),
|
|
22
24
|
$line-height: rem(38.4px),
|
|
23
25
|
$text-transform: none,
|
|
24
26
|
$margin-top: 0,
|
|
@@ -27,6 +29,7 @@ $_base-scale: (
|
|
|
27
29
|
h3: type-style(
|
|
28
30
|
$font-size: rem(28px),
|
|
29
31
|
$font-weight: 500,
|
|
32
|
+
$letter-spacing: 0,
|
|
30
33
|
$line-height: rem(33.6px),
|
|
31
34
|
$text-transform: none,
|
|
32
35
|
$margin-top: 0,
|
|
@@ -35,6 +38,7 @@ $_base-scale: (
|
|
|
35
38
|
h4: type-style(
|
|
36
39
|
$font-size: rem(24px),
|
|
37
40
|
$font-weight: 500,
|
|
41
|
+
$letter-spacing: rem(.25px),
|
|
38
42
|
$line-height: rem(28.8px),
|
|
39
43
|
$text-transform: none,
|
|
40
44
|
$margin-top: 0,
|
|
@@ -43,6 +47,7 @@ $_base-scale: (
|
|
|
43
47
|
h5: type-style(
|
|
44
48
|
$font-size: rem(20px),
|
|
45
49
|
$font-weight: 500,
|
|
50
|
+
$letter-spacing: 0,
|
|
46
51
|
$line-height: rem(24px),
|
|
47
52
|
$text-transform: none,
|
|
48
53
|
$margin-top: 0,
|
|
@@ -51,6 +56,7 @@ $_base-scale: (
|
|
|
51
56
|
h6: type-style(
|
|
52
57
|
$font-size: rem(16px),
|
|
53
58
|
$font-weight: 500,
|
|
59
|
+
$letter-spacing: rem(.15px),
|
|
54
60
|
$line-height: rem(19.2px),
|
|
55
61
|
$text-transform: none,
|
|
56
62
|
$margin-top: 0,
|
|
@@ -59,6 +65,7 @@ $_base-scale: (
|
|
|
59
65
|
body-1: type-style(
|
|
60
66
|
$font-size: rem(16px),
|
|
61
67
|
$font-weight: 400,
|
|
68
|
+
$letter-spacing: rem(.5px),
|
|
62
69
|
$line-height: rem(24px),
|
|
63
70
|
$text-transform: none,
|
|
64
71
|
$margin-top: 0,
|
|
@@ -67,6 +74,7 @@ $_base-scale: (
|
|
|
67
74
|
body-2: type-style(
|
|
68
75
|
$font-size: rem(14.4px),
|
|
69
76
|
$font-weight: 400,
|
|
77
|
+
$letter-spacing: rem(.25px),
|
|
70
78
|
$line-height: rem(24px),
|
|
71
79
|
$text-transform: none,
|
|
72
80
|
$margin-top: 0,
|
|
@@ -75,6 +83,7 @@ $_base-scale: (
|
|
|
75
83
|
subtitle-1: type-style(
|
|
76
84
|
$font-size: rem(14px),
|
|
77
85
|
$font-weight: 400,
|
|
86
|
+
$letter-spacing: rem(.15px),
|
|
78
87
|
$line-height: rem(24px),
|
|
79
88
|
$text-transform: none,
|
|
80
89
|
$margin-top: 0,
|
|
@@ -83,6 +92,7 @@ $_base-scale: (
|
|
|
83
92
|
subtitle-2: type-style(
|
|
84
93
|
$font-size: rem(14.4px),
|
|
85
94
|
$font-weight: 400,
|
|
95
|
+
$letter-spacing: rem(.1px),
|
|
86
96
|
$line-height: rem(21.6px),
|
|
87
97
|
$text-transform: none,
|
|
88
98
|
$margin-top: 0,
|
|
@@ -91,6 +101,7 @@ $_base-scale: (
|
|
|
91
101
|
button: type-style(
|
|
92
102
|
$font-size: rem(16px),
|
|
93
103
|
$font-weight: 500,
|
|
104
|
+
$letter-spacing: rem(.75px),
|
|
94
105
|
$line-height: rem(24px),
|
|
95
106
|
$text-transform: none,
|
|
96
107
|
$margin-top: 0,
|
|
@@ -8,6 +8,7 @@ $type-scale: (
|
|
|
8
8
|
h1: type-style(
|
|
9
9
|
$font-size: rem(68px),
|
|
10
10
|
$font-weight: 700,
|
|
11
|
+
$letter-spacing: rem(-1.5px),
|
|
11
12
|
$line-height: rem(76px),
|
|
12
13
|
$text-transform: none,
|
|
13
14
|
$margin-top: 0,
|
|
@@ -16,6 +17,7 @@ $type-scale: (
|
|
|
16
17
|
h2: type-style(
|
|
17
18
|
$font-size: rem(42px),
|
|
18
19
|
$font-weight: 700,
|
|
20
|
+
$letter-spacing: rem(-.5px),
|
|
19
21
|
$line-height: rem(52px),
|
|
20
22
|
$text-transform: none,
|
|
21
23
|
$margin-top: 0,
|
|
@@ -24,6 +26,7 @@ $type-scale: (
|
|
|
24
26
|
h3: type-style(
|
|
25
27
|
$font-size: rem(32px),
|
|
26
28
|
$font-weight: 600,
|
|
29
|
+
$letter-spacing: 0,
|
|
27
30
|
$line-height: rem(40px),
|
|
28
31
|
$text-transform: none,
|
|
29
32
|
$margin-top: 0,
|
|
@@ -32,6 +35,7 @@ $type-scale: (
|
|
|
32
35
|
h4: type-style(
|
|
33
36
|
$font-size: rem(28px),
|
|
34
37
|
$font-weight: 400,
|
|
38
|
+
$letter-spacing: rem(.25px),
|
|
35
39
|
$line-height: rem(36px),
|
|
36
40
|
$text-transform: none,
|
|
37
41
|
$margin-top: 0,
|
|
@@ -40,6 +44,7 @@ $type-scale: (
|
|
|
40
44
|
h5: type-style(
|
|
41
45
|
$font-size: rem(24px),
|
|
42
46
|
$font-weight: 400,
|
|
47
|
+
$letter-spacing: 0,
|
|
43
48
|
$line-height: rem(32px),
|
|
44
49
|
$text-transform: none,
|
|
45
50
|
$margin-top: 0,
|
|
@@ -48,6 +53,7 @@ $type-scale: (
|
|
|
48
53
|
h6: type-style(
|
|
49
54
|
$font-size: rem(20px),
|
|
50
55
|
$font-weight: 400,
|
|
56
|
+
$letter-spacing: rem(.15px),
|
|
51
57
|
$line-height: rem(28px),
|
|
52
58
|
$text-transform: none,
|
|
53
59
|
$margin-top: 0,
|
|
@@ -56,6 +62,7 @@ $type-scale: (
|
|
|
56
62
|
body-1: type-style(
|
|
57
63
|
$font-size: rem(16px),
|
|
58
64
|
$font-weight: 400,
|
|
65
|
+
$letter-spacing: rem(.5px),
|
|
59
66
|
$line-height: rem(22px),
|
|
60
67
|
$text-transform: none,
|
|
61
68
|
$margin-top: 0,
|
|
@@ -64,6 +71,7 @@ $type-scale: (
|
|
|
64
71
|
body-2: type-style(
|
|
65
72
|
$font-size: rem(14px),
|
|
66
73
|
$font-weight: 400,
|
|
74
|
+
$letter-spacing: rem(.25px),
|
|
67
75
|
$line-height: rem(20px),
|
|
68
76
|
$text-transform: none,
|
|
69
77
|
$margin-top: 0,
|
|
@@ -72,6 +80,7 @@ $type-scale: (
|
|
|
72
80
|
subtitle-1: type-style(
|
|
73
81
|
$font-size: rem(18px),
|
|
74
82
|
$font-weight: 400,
|
|
83
|
+
$letter-spacing: rem(.15px),
|
|
75
84
|
$line-height: rem(24px),
|
|
76
85
|
$text-transform: none,
|
|
77
86
|
$margin-top: 0,
|
|
@@ -80,6 +89,7 @@ $type-scale: (
|
|
|
80
89
|
subtitle-2: type-style(
|
|
81
90
|
$font-size: rem(14px),
|
|
82
91
|
$font-weight: 600,
|
|
92
|
+
$letter-spacing: rem(.1px),
|
|
83
93
|
$line-height: rem(20px),
|
|
84
94
|
$text-transform: none,
|
|
85
95
|
$margin-top: 0,
|
|
@@ -88,15 +98,26 @@ $type-scale: (
|
|
|
88
98
|
button: type-style(
|
|
89
99
|
$font-size: rem(14px),
|
|
90
100
|
$font-weight: 400,
|
|
101
|
+
$letter-spacing: rem(.75px),
|
|
91
102
|
$line-height: rem(14px),
|
|
92
103
|
$text-transform: capitalize,
|
|
93
104
|
$margin-top: 0,
|
|
94
105
|
$margin-bottom: 0
|
|
95
106
|
),
|
|
107
|
+
caption: type-style(
|
|
108
|
+
$font-size: rem(12px),
|
|
109
|
+
$font-weight: 400,
|
|
110
|
+
$font-style: normal,
|
|
111
|
+
$letter-spacing: rem(.4px),
|
|
112
|
+
$line-height: rem(16px),
|
|
113
|
+
$text-transform: none
|
|
114
|
+
),
|
|
96
115
|
overline: type-style(
|
|
97
116
|
$font-size: rem(10px),
|
|
98
117
|
$font-weight: 400,
|
|
118
|
+
$letter-spacing: rem(1.5px),
|
|
99
119
|
$line-height: rem(14px),
|
|
120
|
+
$text-transform: uppercase,
|
|
100
121
|
$margin-top: 0,
|
|
101
122
|
$margin-bottom: 0
|
|
102
123
|
)
|
|
@@ -8,8 +8,8 @@ $type-scale: (
|
|
|
8
8
|
h1: type-style(
|
|
9
9
|
$font-size: rem(96px),
|
|
10
10
|
$font-weight: 200,
|
|
11
|
-
$line-height: rem(112px),
|
|
12
11
|
$letter-spacing: rem(-1.5px),
|
|
12
|
+
$line-height: rem(112px),
|
|
13
13
|
$text-transform: none,
|
|
14
14
|
$margin-top: 0,
|
|
15
15
|
$margin-bottom: 0
|
|
@@ -17,8 +17,8 @@ $type-scale: (
|
|
|
17
17
|
h2: type-style(
|
|
18
18
|
$font-size: rem(60px),
|
|
19
19
|
$font-weight: 200,
|
|
20
|
-
$line-height: rem(72px),
|
|
21
20
|
$letter-spacing: rem(-.5px),
|
|
21
|
+
$line-height: rem(72px),
|
|
22
22
|
$text-transform: none,
|
|
23
23
|
$margin-top: 0,
|
|
24
24
|
$margin-bottom: 0
|
|
@@ -26,6 +26,7 @@ $type-scale: (
|
|
|
26
26
|
h3: type-style(
|
|
27
27
|
$font-size: rem(48px),
|
|
28
28
|
$font-weight: 200,
|
|
29
|
+
$letter-spacing: 0,
|
|
29
30
|
$line-height: rem(56px),
|
|
30
31
|
$text-transform: none,
|
|
31
32
|
$margin-top: 0,
|
|
@@ -34,6 +35,7 @@ $type-scale: (
|
|
|
34
35
|
h4: type-style(
|
|
35
36
|
$font-size: rem(36px),
|
|
36
37
|
$font-weight: 200,
|
|
38
|
+
$letter-spacing: rem(.25px),
|
|
37
39
|
$line-height: rem(42px),
|
|
38
40
|
$text-transform: none,
|
|
39
41
|
$margin-top: 0,
|
|
@@ -42,6 +44,7 @@ $type-scale: (
|
|
|
42
44
|
h5: type-style(
|
|
43
45
|
$font-size: rem(24px),
|
|
44
46
|
$font-weight: 200,
|
|
47
|
+
$letter-spacing: 0,
|
|
45
48
|
$line-height: rem(28px),
|
|
46
49
|
$text-transform: none,
|
|
47
50
|
$margin-top: 0,
|
|
@@ -50,6 +53,7 @@ $type-scale: (
|
|
|
50
53
|
h6: type-style(
|
|
51
54
|
$font-size: rem(20px),
|
|
52
55
|
$font-weight: 600,
|
|
56
|
+
$letter-spacing: rem(.15px),
|
|
53
57
|
$line-height: rem(26px),
|
|
54
58
|
$text-transform: none,
|
|
55
59
|
$margin-top: 0,
|
|
@@ -58,6 +62,7 @@ $type-scale: (
|
|
|
58
62
|
body-1: type-style(
|
|
59
63
|
$font-size: rem(16px),
|
|
60
64
|
$font-weight: 400,
|
|
65
|
+
$letter-spacing: rem(.5px),
|
|
61
66
|
$line-height: rem(20px),
|
|
62
67
|
$text-transform: none,
|
|
63
68
|
$margin-top: 0,
|
|
@@ -66,6 +71,7 @@ $type-scale: (
|
|
|
66
71
|
body-2: type-style(
|
|
67
72
|
$font-size: rem(14px),
|
|
68
73
|
$font-weight: 400,
|
|
74
|
+
$letter-spacing: rem(.25px),
|
|
69
75
|
$line-height: rem(20px),
|
|
70
76
|
$text-transform: none,
|
|
71
77
|
$margin-top: 0,
|
|
@@ -74,6 +80,7 @@ $type-scale: (
|
|
|
74
80
|
subtitle-1: type-style(
|
|
75
81
|
$font-size: rem(16px),
|
|
76
82
|
$font-weight: 600,
|
|
83
|
+
$letter-spacing: rem(.15px),
|
|
77
84
|
$line-height: rem(22px),
|
|
78
85
|
$text-transform: none,
|
|
79
86
|
$margin-top: 0,
|
|
@@ -82,6 +89,7 @@ $type-scale: (
|
|
|
82
89
|
subtitle-2: type-style(
|
|
83
90
|
$font-size: rem(14px),
|
|
84
91
|
$font-weight: 700,
|
|
92
|
+
$letter-spacing: rem(.1px),
|
|
85
93
|
$line-height: rem(20px),
|
|
86
94
|
$text-transform: none,
|
|
87
95
|
$margin-top: 0,
|
|
@@ -90,6 +98,7 @@ $type-scale: (
|
|
|
90
98
|
button: type-style(
|
|
91
99
|
$font-size: rem(12px),
|
|
92
100
|
$font-weight: 700,
|
|
101
|
+
$letter-spacing: rem(.75px),
|
|
93
102
|
$line-height: normal,
|
|
94
103
|
$text-transform: uppercase,
|
|
95
104
|
$margin-top: 0,
|
|
@@ -98,6 +107,7 @@ $type-scale: (
|
|
|
98
107
|
caption: type-style(
|
|
99
108
|
$font-size: rem(12px),
|
|
100
109
|
$font-weight: 400,
|
|
110
|
+
$letter-spacing: rem(.4px),
|
|
101
111
|
$line-height: rem(16px),
|
|
102
112
|
$text-transform: normal,
|
|
103
113
|
$margin-top: 0,
|
|
@@ -106,9 +116,9 @@ $type-scale: (
|
|
|
106
116
|
overline: type-style(
|
|
107
117
|
$font-size: rem(10px),
|
|
108
118
|
$font-weight: 700,
|
|
119
|
+
$letter-spacing: rem(.2px),
|
|
109
120
|
$line-height: rem(14px),
|
|
110
121
|
$text-transform: uppercase,
|
|
111
|
-
$letter-spacing: rem(.2px),
|
|
112
122
|
$margin-top: 0,
|
|
113
123
|
$margin-bottom: 0
|
|
114
124
|
)
|
|
@@ -66,22 +66,6 @@ $type-scale: (
|
|
|
66
66
|
$margin-top: 0,
|
|
67
67
|
$margin-bottom: 0
|
|
68
68
|
),
|
|
69
|
-
subtitle-1: type-style(
|
|
70
|
-
$font-size: rem(16px),
|
|
71
|
-
$font-weight: 400,
|
|
72
|
-
$font-style: normal,
|
|
73
|
-
$letter-spacing: rem(.15px),
|
|
74
|
-
$line-height: rem(24px),
|
|
75
|
-
$text-transform: none
|
|
76
|
-
),
|
|
77
|
-
subtitle-2: type-style(
|
|
78
|
-
$font-size: rem(14px),
|
|
79
|
-
$font-weight: 600,
|
|
80
|
-
$font-style: normal,
|
|
81
|
-
$letter-spacing: rem(.1px),
|
|
82
|
-
$line-height: rem(24px),
|
|
83
|
-
$text-transform: none
|
|
84
|
-
),
|
|
85
69
|
body-1: type-style(
|
|
86
70
|
$font-size: rem(16px),
|
|
87
71
|
$font-weight: 400,
|
|
@@ -100,6 +84,22 @@ $type-scale: (
|
|
|
100
84
|
$line-height: rem(20px),
|
|
101
85
|
$text-transform: none
|
|
102
86
|
),
|
|
87
|
+
subtitle-1: type-style(
|
|
88
|
+
$font-size: rem(16px),
|
|
89
|
+
$font-weight: 400,
|
|
90
|
+
$font-style: normal,
|
|
91
|
+
$letter-spacing: rem(.15px),
|
|
92
|
+
$line-height: rem(24px),
|
|
93
|
+
$text-transform: none
|
|
94
|
+
),
|
|
95
|
+
subtitle-2: type-style(
|
|
96
|
+
$font-size: rem(14px),
|
|
97
|
+
$font-weight: 600,
|
|
98
|
+
$font-style: normal,
|
|
99
|
+
$letter-spacing: rem(.1px),
|
|
100
|
+
$line-height: rem(24px),
|
|
101
|
+
$text-transform: none
|
|
102
|
+
),
|
|
103
103
|
button: type-style(
|
|
104
104
|
$font-size: rem(14px),
|
|
105
105
|
$font-weight: 600,
|
package/test/_color.spec.scss
CHANGED
package/test/_themes.spec.scss
CHANGED
|
@@ -180,18 +180,18 @@ $schema: (
|
|
|
180
180
|
}
|
|
181
181
|
|
|
182
182
|
@include it('should set the border-radius to a value between min and max') {
|
|
183
|
-
$border-radius: border-radius(4px, 2px, 3px);
|
|
184
|
-
$expected: meta.inspect(
|
|
183
|
+
$border-radius: border-radius(rem(4px), rem(2px), rem(3px));
|
|
184
|
+
$expected: clamp(.125rem, meta.inspect(calc(var(--ig-radius-factor) * .25rem)), .1875rem);
|
|
185
185
|
|
|
186
186
|
@include assert-equal($assert: $border-radius, $expected: $expected, $inspect: true);
|
|
187
187
|
}
|
|
188
188
|
|
|
189
189
|
@include it('should include border-radius styles to a given scope with a value between min and max') {
|
|
190
|
-
$expected: meta.inspect(
|
|
190
|
+
$expected: clamp(.125rem, meta.inspect(calc(var(--ig-radius-factor) * .25rem)), .1875rem);
|
|
191
191
|
|
|
192
192
|
@include assert() {
|
|
193
193
|
@include output() {
|
|
194
|
-
@include border-radius(4px, 2px, 3px);
|
|
194
|
+
@include border-radius(rem(4px), rem(2px), rem(3px));
|
|
195
195
|
}
|
|
196
196
|
|
|
197
197
|
@include expect() {
|
|
@@ -7,8 +7,7 @@
|
|
|
7
7
|
@use 'sass:color';
|
|
8
8
|
@use 'sass:string';
|
|
9
9
|
@use '../node_modules/sass-true/' as *;
|
|
10
|
-
@use '../
|
|
11
|
-
@use '../sass/typography/types';
|
|
10
|
+
@use '../sass/typography/' as *;
|
|
12
11
|
|
|
13
12
|
$h1: (font-size: 96px);
|
|
14
13
|
$h2: (font-size: 70px);
|
|
@@ -74,7 +73,7 @@ $scale: type-scale(
|
|
|
74
73
|
$font-size: 18px;
|
|
75
74
|
$rules: type-style($font-size: $font-size);
|
|
76
75
|
|
|
77
|
-
@each $rule, $value in map.remove(
|
|
76
|
+
@each $rule, $value in map.remove($ITypeStyle, 'font-size') {
|
|
78
77
|
@include assert-equal(map.get($rules, $rule), $value);
|
|
79
78
|
}
|
|
80
79
|
|
|
@@ -170,7 +169,7 @@ $scale: type-scale(
|
|
|
170
169
|
|
|
171
170
|
@include expect() {
|
|
172
171
|
.my-h1 {
|
|
173
|
-
@each $key, $value in
|
|
172
|
+
@each $key, $value in $ITypeStyle {
|
|
174
173
|
#{$key}: var(--ig-#{$category}-#{$key});
|
|
175
174
|
}
|
|
176
175
|
}
|
|
@@ -185,7 +184,7 @@ $scale: type-scale(
|
|
|
185
184
|
}
|
|
186
185
|
|
|
187
186
|
@include expect() {
|
|
188
|
-
@each $category in
|
|
187
|
+
@each $category in $ITypeScale {
|
|
189
188
|
&__#{$category} {
|
|
190
189
|
@include type-style($category);
|
|
191
190
|
}
|
|
@@ -201,7 +200,7 @@ $scale: type-scale(
|
|
|
201
200
|
}
|
|
202
201
|
|
|
203
202
|
@include expect() {
|
|
204
|
-
@each $category, $element in
|
|
203
|
+
@each $category, $element in $IElementCategories {
|
|
205
204
|
#{$element} {
|
|
206
205
|
@include type-style($category);
|
|
207
206
|
}
|