@itcase/ui 1.4.9 → 1.4.10

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.
Files changed (3) hide show
  1. package/dist/css/mixins/mixin_typography.css +95 -108
  2. package/dist/css/mixins/mixin_utils.css +6 -6
  3. package/package.json +2 -2
package/dist/css/mixins/mixin_typography.css CHANGED
@@ -1,241 +1,228 @@
1
1
  @define-mixin h1 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
2
- @mixin font $weight, var(--typography-h1-min, 32px),
3
- var(--typography-h1-max, 38px), $minLetterSpacing,
4
- var(--typography-h1-min-line-height, 64px),
5
- var(--typography-h1-max-line-height, 80px), $maxLetterSpacing,
2
+ @mixin font $weight, var(--typography-h1-min), var(--typography-h1-max),
3
+ $minLetterSpacing, var(--typography-h1-min-line-height),
4
+ var(--typography-h1-max-line-height), $maxLetterSpacing,
6
5
  var(--typography-h1-font);
7
6
  }
8
7
 
9
8
  @define-mixin h2 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
10
- @mixin font $weight, var(--typography-h2-min, 26px),
11
- var(--typography-h2-max, 32px), $minLetterSpacing,
12
- var(--typography-h2-min-line-height, 46px),
13
- var(--typography-h2-max-line-height, 58px), $maxLetterSpacing,
9
+ @mixin font $weight, var(--typography-h2-min), var(--typography-h2-max),
10
+ $minLetterSpacing, var(--typography-h2-min-line-height),
11
+ var(--typography-h2-max-line-height), $maxLetterSpacing,
14
12
  var(--typography-h2-font);
15
13
  }
16
14
 
17
15
  @define-mixin h3 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
18
- @mixin font $weight, var(--typography-h3-min, 18px),
19
- var(--typography-h3-max, 24px), $minLetterSpacing,
20
- var(--typography-h3-min-line-height, 32px),
21
- var(--typography-h3-max-line-height, 40px), $maxLetterSpacing,
16
+ @mixin font $weight, var(--typography-h3-min), var(--typography-h3-max),
17
+ $minLetterSpacing, var(--typography-h3-min-line-height),
18
+ var(--typography-h3-max-line-height), $maxLetterSpacing,
22
19
  var(--typography-h3-font);
23
20
  }
24
21
 
25
22
  @define-mixin h4 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
26
- @mixin font $weight, var(--typography-h4-min, 16px),
27
- var(--typography-h4-max, 18px), $minLetterSpacing,
28
- var(--typography-h4-min-line-height, 24px),
29
- var(--typography-h4-max-line-height, 30px), $maxLetterSpacing,
23
+ @mixin font $weight, var(--typography-h4-min), var(--typography-h4-max),
24
+ $minLetterSpacing, var(--typography-h4-min-line-height),
25
+ var(--typography-h4-max-line-height), $maxLetterSpacing,
30
26
  var(--typography-h4-font);
31
27
  }
32
28
 
33
29
  @define-mixin h5 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
34
- @mixin font $weight, var(--typography-h5-min, 14px),
35
- var(--typography-h5-max, 16px), $minLetterSpacing,
36
- var(--typography-h5-min-line-height, 18px),
37
- var(--typography-h5-max-line-height, 26px), $maxLetterSpacing,
30
+ @mixin font $weight, var(--typography-h5-min), var(--typography-h5-max),
31
+ $minLetterSpacing, var(--typography-h5-min-line-height),
32
+ var(--typography-h5-max-line-height), $maxLetterSpacing,
38
33
  var(--typography-h5-font);
39
34
  }
40
35
 
41
36
  @define-mixin h6 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
42
- @mixin font $weight, var(--typography-h6-min, 12px),
43
- var(--typography-h6-max, 18px), $minLetterSpacing,
44
- var(--typography-h6-min-line-height, 16px),
45
- var(--typography-h6-max-line-height, 24px), $maxLetterSpacing,
37
+ @mixin font $weight, var(--typography-h6-min), var(--typography-h6-max),
38
+ $minLetterSpacing, var(--typography-h6-min-line-height),
39
+ var(--typography-h6-max-line-height), $maxLetterSpacing,
46
40
  var(--typography-h6-font);
47
41
  }
48
42
 
49
43
  @define-mixin hero_h1 $weight: normal, $minLetterSpacing: 0,
50
44
  $maxLetterSpacing: 0 {
51
- @mixin font $weight, var(--typography-hero1-min, 32px),
52
- var(--typography-hero1-max, 38px), $minLetterSpacing,
53
- var(--typography-hero1-min-line-height, 64px),
54
- var(--typography-hero1-max-line-height, 80px), $maxLetterSpacing,
45
+ @mixin font $weight, var(--typography-hero1-min), var(--typography-hero1-max),
46
+ $minLetterSpacing, var(--typography-hero1-min-line-height),
47
+ var(--typography-hero1-max-line-height), $maxLetterSpacing,
55
48
  var(--typography-hero1-font);
56
49
  }
57
50
 
58
51
  @define-mixin hero_h2 $weight: normal, $minLetterSpacing: 0,
59
52
  $maxLetterSpacing: 0 {
60
- @mixin font $weight, var(--typography-hero2-min, 26px),
61
- var(--typography-hero2-max, 32px), $minLetterSpacing,
62
- var(--typography-hero2-min-line-height, 46px),
63
- var(--typography-hero2-max-line-height, 58px), $maxLetterSpacing,
53
+ @mixin font $weight, var(--typography-hero2-min), var(--typography-hero2-max),
54
+ $minLetterSpacing, var(--typography-hero2-min-line-height),
55
+ var(--typography-hero2-max-line-height), $maxLetterSpacing,
64
56
  var(--typography-hero2-font);
65
57
  }
66
58
 
67
59
  @define-mixin hero_h3 $weight: normal, $minLetterSpacing: 0,
68
60
  $maxLetterSpacing: 0 {
69
- @mixin font $weight, var(--typography-hero3-min, 18px),
70
- var(--typography-hero3-max, 24px), $minLetterSpacing,
71
- var(--typography-hero3-min-line-height, 32px),
72
- var(--typography-hero3-max-line-height, 40px), $maxLetterSpacing,
61
+ @mixin font $weight, var(--typography-hero3-min), var(--typography-hero3-max),
62
+ $minLetterSpacing, var(--typography-hero3-min-line-height),
63
+ var(--typography-hero3-max-line-height), $maxLetterSpacing,
73
64
  var(--typography-hero3-font);
74
65
  }
75
66
 
76
67
  @define-mixin hero_h4 $weight: normal, $minLetterSpacing: 0,
77
68
  $maxLetterSpacing: 0 {
78
- @mixin font $weight, var(--typography-hero4-min, 16px),
79
- var(--typography-hero4-max, 18px), $minLetterSpacing,
80
- var(--typography-hero4-min-line-height, 24px),
81
- var(--typography-hero4-max-line-height, 30px), $maxLetterSpacing,
69
+ @mixin font $weight, var(--typography-hero4-min), var(--typography-hero4-max),
70
+ $minLetterSpacing, var(--typography-hero4-min-line-height),
71
+ var(--typography-hero4-max-line-height), $maxLetterSpacing,
82
72
  var(--typography-hero4-font);
83
73
  }
84
74
 
85
75
  @define-mixin hero_h5 $weight: normal, $minLetterSpacing: 0,
86
76
  $maxLetterSpacing: 0 {
87
- @mixin font $weight, var(--typography-hero5-min, 14px),
88
- var(--typography-hero5-max, 16px), $minLetterSpacing,
89
- var(--typography-hero5-min-line-height, 18px),
90
- var(--typography-hero5-max-line-height, 26px), $maxLetterSpacing,
77
+ @mixin font $weight, var(--typography-hero5-min), var(--typography-hero5-max),
78
+ $minLetterSpacing, var(--typography-hero5-min-line-height),
79
+ var(--typography-hero5-max-line-height), $maxLetterSpacing,
91
80
  var(--typography-hero5-font);
92
81
  }
93
82
 
94
83
  @define-mixin hero_h6 $weight: normal, $minLetterSpacing: 0,
95
84
  $maxLetterSpacing: 0 {
96
- @mixin font $weight, var(--typography-hero6-min, 12px),
97
- var(--typography-hero6-max, 18px), $minLetterSpacing,
98
- var(--typography-hero6-min-line-height, 16px),
99
- var(--typography-hero6-max-line-height, 24px), $maxLetterSpacing,
85
+ @mixin font $weight, var(--typography-hero6-min), var(--typography-hero6-max),
86
+ $minLetterSpacing, var(--typography-hero6-min-line-height),
87
+ var(--typography-hero6-max-line-height), $maxLetterSpacing,
100
88
  var(--typography-hero6-font);
101
89
  }
102
90
 
103
91
  @define-mixin p $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
104
- @mixin font $weight, var(--typography-p-min, 16px),
105
- var(--typography-p-max, 24px), $minLetterSpacing,
106
- var(--typography-p-min-line-height, 24px),
107
- var(--typography-p-max-line-height, 36px), $maxLetterSpacing,
92
+ @mixin font $weight, var(--typography-p-min), var(--typography-p-max),
93
+ $minLetterSpacing, var(--typography-p-min-line-height),
94
+ var(--typography-p-max-line-height), $maxLetterSpacing,
108
95
  var(--typography-p-font);
109
96
  }
110
97
 
111
98
  @define-mixin text-xxl $weight: normal, $minLetterSpacing: 0,
112
99
  $maxLetterSpacing: 0 {
113
- @mixin font $weight, var(--typography-text-xxl-min, 24px),
114
- var(--typography-text-xxl-max, 28px), $minLetterSpacing,
115
- var(--typography-text-xxl-min-line-height, 24px),
116
- var(--typography-text-xxl-max-line-height, 28px), $maxLetterSpacing,
100
+ @mixin font $weight, var(--typography-text-xxl-min),
101
+ var(--typography-text-xxl-max), $minLetterSpacing,
102
+ var(--typography-text-xxl-min-line-height),
103
+ var(--typography-text-xxl-max-line-height), $maxLetterSpacing,
117
104
  var(--typography-text-xxl-font);
118
105
  }
119
106
 
120
107
  @define-mixin text-xl $weight: normal, $minLetterSpacing: 0,
121
108
  $maxLetterSpacing: 0 {
122
- @mixin font $weight, var(--typography-text-xl-min, 20px),
123
- var(--typography-text-xl-max, 24px), $minLetterSpacing,
124
- var(--typography-text-xl-min-line-height, 20px),
125
- var(--typography-text-xl-max-line-height, 24px), $maxLetterSpacing,
109
+ @mixin font $weight, var(--typography-text-xl-min),
110
+ var(--typography-text-xl-max), $minLetterSpacing,
111
+ var(--typography-text-xl-min-line-height),
112
+ var(--typography-text-xl-max-line-height), $maxLetterSpacing,
126
113
  var(--typography-text-xl-font);
127
114
  }
128
115
 
129
116
  @define-mixin text-l $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
130
- @mixin font $weight, var(--typography-text-l-min, 18px),
131
- var(--typography-text-l-max, 24px), $minLetterSpacing,
132
- var(--typography-text-l-min-line-height, 18px),
133
- var(--typography-text-l-max-line-height, 24px), $maxLetterSpacing,
117
+ @mixin font $weight, var(--typography-text-l-min),
118
+ var(--typography-text-l-max), $minLetterSpacing,
119
+ var(--typography-text-l-min-line-height),
120
+ var(--typography-text-l-max-line-height), $maxLetterSpacing,
134
121
  var(--typography-text-l-font);
135
122
  }
136
123
 
137
124
  @define-mixin text-m $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
138
- @mixin font $weight, var(--typography-text-m-min, 16px),
139
- var(--typography-text-m-max, 18px), $minLetterSpacing,
140
- var(--typography-text-m-min-line-height, 16px),
141
- var(--typography-text-m-max-line-height, 20px), $maxLetterSpacing,
125
+ @mixin font $weight, var(--typography-text-m-min),
126
+ var(--typography-text-m-max), $minLetterSpacing,
127
+ var(--typography-text-m-min-line-height),
128
+ var(--typography-text-m-max-line-height), $maxLetterSpacing,
142
129
  var(--typography-text-m-font);
143
130
  }
144
131
 
145
132
  @define-mixin text-s $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
146
- @mixin font $weight, var(--typography-text-s-min, 14px),
147
- var(--typography-text-s-max, 18px), $minLetterSpacing,
148
- var(--typography-text-s-min-line-height, 14px),
149
- var(--typography-text-s-max-line-height, 18px), $maxLetterSpacing,
133
+ @mixin font $weight, var(--typography-text-s-min),
134
+ var(--typography-text-s-max), $minLetterSpacing,
135
+ var(--typography-text-s-min-line-height),
136
+ var(--typography-text-s-max-line-height), $maxLetterSpacing,
150
137
  var(--typography-text-s-font);
151
138
  }
152
139
 
153
140
  @define-mixin text-xs $weight: normal, $minLetterSpacing: 0,
154
141
  $maxLetterSpacing: 0 {
155
- @mixin font $weight, var(--typography-text-xs-min, 12px),
156
- var(--typography-text-xs-max, 16px), $minLetterSpacing,
157
- var(--typography-text-xs-min-line-height, 12px),
158
- var(--typography-text-xs-max-line-height, 16px), $maxLetterSpacing,
142
+ @mixin font $weight, var(--typography-text-xs-min),
143
+ var(--typography-text-xs-max), $minLetterSpacing,
144
+ var(--typography-text-xs-min-line-height),
145
+ var(--typography-text-xs-max-line-height), $maxLetterSpacing,
159
146
  var(--typography-text-xs-font);
160
147
  }
161
148
 
162
149
  @define-mixin text-xxs $weight: normal, $minLetterSpacing: 0,
163
150
  $maxLetterSpacing: 0 {
164
- @mixin font $weight, var(--typography-text-xxs-min, 10px),
165
- var(--typography-text-xxs-max, 14px), $minLetterSpacing,
166
- var(--typography-text-xxs-min-line-height, 10px),
167
- var(--typography-text-xxs-max-line-height, 14px), $maxLetterSpacing,
151
+ @mixin font $weight, var(--typography-text-xxs-min),
152
+ var(--typography-text-xxs-max), $minLetterSpacing,
153
+ var(--typography-text-xxs-min-line-height),
154
+ var(--typography-text-xxs-max-line-height), $maxLetterSpacing,
168
155
  var(--typography-text-xxs-font);
169
156
  }
170
157
 
171
158
  @define-mixin email-h1 $weight: normal {
172
- @mixin font-fixed $weight, var(--typography-email-h1, 32px),
173
- var(--typography-email-h1-line-height, 38px), var(--font-email);
159
+ @mixin font-fixed $weight, var(--typography-email-h1),
160
+ var(--typography-email-h1-line-height), var(--font-email);
174
161
  }
175
162
 
176
163
  @define-mixin email-h2 $weight: normal {
177
- @mixin font-fixed $weight, var(--typography-email-h2, 26px),
178
- var(--typography-email-h2-line-height, 32px), var(--font-email);
164
+ @mixin font-fixed $weight, var(--typography-email-h2),
165
+ var(--typography-email-h2-line-height), var(--font-email);
179
166
  }
180
167
 
181
168
  @define-mixin email-h3 $weight: normal {
182
- @mixin font-fixed $weight, var(--typography-email-h3, 18px),
183
- var(--typography-email-h3-line-height, 24px), var(--font-email);
169
+ @mixin font-fixed $weight, var(--typography-email-h3),
170
+ var(--typography-email-h3-line-height), var(--font-email);
184
171
  }
185
172
 
186
173
  @define-mixin email-h4 $weight: normal {
187
- @mixin font-fixed $weight, var(--typography-email-h4, 24px),
188
- var(--typography-email-h4-line-height, 30px), var(--font-email);
174
+ @mixin font-fixed $weight, var(--typography-email-h4),
175
+ var(--typography-email-h4-line-height), var(--font-email);
189
176
  }
190
177
 
191
178
  @define-mixin email-h5 $weight: normal {
192
- @mixin font-fixed $weight, var(--typography-email-h5, 18px),
193
- var(--typography-email-h5-line-height, 24px), var(--font-email);
179
+ @mixin font-fixed $weight, var(--typography-email-h5),
180
+ var(--typography-email-h5-line-height), var(--font-email);
194
181
  }
195
182
 
196
183
  @define-mixin email-h6 $weight: normal {
197
- @mixin font-fixed $weight, var(--typography-email-h6, 12px),
198
- var(--typography-email-h6-line-height, 18px), var(--font-email);
184
+ @mixin font-fixed $weight, var(--typography-email-h6),
185
+ var(--typography-email-h6-line-height), var(--font-email);
199
186
  }
200
187
 
201
188
  @define-mixin email-p $weight: normal {
202
- @mixin font-fixed $weight, var(--typography-email-p, 16px),
203
- var(--typography-email-p-line-height, 24px), var(--font-email);
189
+ @mixin font-fixed $weight, var(--typography-email-p),
190
+ var(--typography-email-p-line-height), var(--font-email);
204
191
  }
205
192
 
206
193
  @define-mixin email-text-xxl $weight: normal {
207
- @mixin font-fixed $weight, var(--typography-email-text-xxl, 24px),
208
- var(--typography-email-text-xxl-line-height, 28px), var(--font-email);
194
+ @mixin font-fixed $weight, var(--typography-email-text-xxl),
195
+ var(--typography-email-text-xxl-line-height), var(--font-email);
209
196
  }
210
197
 
211
198
  @define-mixin email-text-xl $weight: normal {
212
- @mixin font-fixed $weight, var(--typography-email-text-xl, 20px),
213
- var(--typography-email-text-xl-line-height, 24px), var(--font-email);
199
+ @mixin font-fixed $weight, var(--typography-email-text-xl),
200
+ var(--typography-email-text-xl-line-height), var(--font-email);
214
201
  }
215
202
 
216
203
  @define-mixin email-text-l $weight: normal {
217
- @mixin font-fixed $weight, var(--typography-email-text-l, 18px),
218
- var(--typography-email-text-l-line-height, 24px), var(--font-email);
204
+ @mixin font-fixed $weight, var(--typography-email-text-l),
205
+ var(--typography-email-text-l-line-height), var(--font-email);
219
206
  }
220
207
 
221
208
  @define-mixin email-text-m $weight: normal {
222
- @mixin font-fixed $weight, var(--typography-email-text-m, 16px),
223
- var(--typography-email-text-m-line-height, 18px), var(--font-email);
209
+ @mixin font-fixed $weight, var(--typography-email-text-m),
210
+ var(--typography-email-text-m-line-height), var(--font-email);
224
211
  }
225
212
 
226
213
  @define-mixin email-text-s $weight: normal {
227
- @mixin font-fixed $weight, var(--typography-email-text-s, 14px),
228
- var(--typography-email-text-s-line-height, 18px), var(--font-email);
214
+ @mixin font-fixed $weight, var(--typography-email-text-s),
215
+ var(--typography-email-text-s-line-height), var(--font-email);
229
216
  }
230
217
 
231
218
  @define-mixin email-text-xs $weight: normal {
232
- @mixin font-fixed $weight, var(--typography-email-text-xs, 12px),
233
- var(--typographyemail-text-xs-line-height, 16px), var(--font-email);
219
+ @mixin font-fixed $weight, var(--typography-email-text-xs),
220
+ var(--typographyemail-text-xs-line-height), var(--font-email);
234
221
  }
235
222
 
236
223
  @define-mixin email-text-xxs $weight: normal {
237
- @mixin font-fixed $weight, var(--typography-email-text-xxs, 10px),
238
- var(--typography-email-text-xxs-line-height, 14px), var(--font-email);
224
+ @mixin font-fixed $weight, var(--typography-email-text-xxs),
225
+ var(--typography-email-text-xxs-line-height), var(--font-email);
239
226
  }
240
227
 
241
228
  @define-mixin text-gradient-primary {
package/dist/css/mixins/mixin_utils.css CHANGED
@@ -4,21 +4,21 @@
4
4
  font-size: fluid(
5
5
  $minFontSize,
6
6
  $maxFontSize,
7
- var(--typography-min-viewport, 360px),
8
- var(--typography-max-viewport, 1920px)
7
+ var(--typography-min-viewport),
8
+ var(--typography-max-viewport)
9
9
  );
10
10
  font-weight: $fontWeight;
11
11
  line-height: fluid(
12
12
  $minLineHeight,
13
13
  $maxLineHeight,
14
- var(--typography-min-viewport, 360px),
15
- var(--typography-max-viewport, 1920px)
14
+ var(--typography-min-viewport),
15
+ var(--typography-max-viewport)
16
16
  );
17
17
  letter-spacing: fluid(
18
18
  $minLetterSpacing,
19
19
  $maxLetterSpacing,
20
- var(--typography-min-viewport, 360px),
21
- var(--typography-max-viewport, 1920px)
20
+ var(--typography-min-viewport),
21
+ var(--typography-max-viewport)
22
22
  );
23
23
  font-family: $fontFamily;
24
24
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.4.9",
3
+ "version": "1.4.10",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",
@@ -97,7 +97,7 @@
97
97
  "dependencies": {
98
98
  "@emotion/is-prop-valid": "^1.3.1",
99
99
  "@itcase/common": "^1.2.22",
100
- "@itcase/config": "^1.0.35",
100
+ "@itcase/config": "^1.0.36",
101
101
  "@itcase/icons": "^1.0.29",
102
102
  "@itcase/storybook-config": "^1.1.9",
103
103
  "@itcase/tokens-am": "^1.1.0",