@epam/assets 5.8.1 → 5.9.0-beta.0

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 (18) hide show
  1. package/css/theme/theme_electric.css +231 -1
  2. package/css/theme/theme_electric.css.map +1 -1
  3. package/css/theme/theme_loveship.css +231 -1
  4. package/css/theme/theme_loveship.css.map +1 -1
  5. package/css/theme/theme_loveship_dark.css +237 -7
  6. package/css/theme/theme_loveship_dark.css.map +1 -1
  7. package/css/theme/theme_promo.css +231 -1
  8. package/css/theme/theme_promo.css.map +1 -1
  9. package/css/theme/theme_vanilla_thunder.css +230 -0
  10. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  11. package/package.json +2 -2
  12. package/readme.md +2 -2
  13. package/theme/theme_6px.scss +305 -0
  14. package/theme/theme_electric.scss +3 -1
  15. package/theme/theme_loveship.scss +3 -1
  16. package/theme/theme_loveship_dark.scss +7 -5
  17. package/theme/theme_promo.scss +3 -1
  18. package/theme/theme_vanilla_thunder.scss +4 -1
package/theme/theme_6px.scss ADDED
@@ -0,0 +1,305 @@
1
+ @mixin uui-6px-grid {
2
+ --uui-focus-outline-width: 2px;
3
+ --uui-focus-outline-offset: 2px;
4
+ --uui-focus-radius: 2px;
5
+ //--uui-border-radius: 3px; // TODO: ?????
6
+ --uui-tab-line-width: 3px;
7
+ --uui-notify-size: 6px;
8
+
9
+
10
+ .uui-size-12 {
11
+ --uui-size: 12px;
12
+ --uui-border-width: 1px;
13
+ --uui-horizontal-gap: 6px;
14
+ --uui-vertical-gap: 3px;
15
+ --uui-horizontal-padding: 6px;
16
+ --uui-vertical-padding: 3px;
17
+ --uui-icon-size: 12px;
18
+ --uui-line-height: 12px;
19
+ --uui-font-size: 12px;
20
+ --uui-dot-size: 6px;
21
+ }
22
+
23
+ .uui-size-18 {
24
+ --uui-size: 18px;
25
+ --uui-border-width: 1px;
26
+ --uui-horizontal-gap: 3px;
27
+ --uui-vertical-gap: 3px;
28
+ --uui-horizontal-padding: 3px;
29
+ --uui-vertical-padding: 3px;
30
+ --uui-icon-size: 12px;
31
+ --uui-line-height: 12px;
32
+ --uui-font-size: 10px;
33
+ --uui-dot-size: 6px;
34
+ }
35
+
36
+ .uui-size-24 {
37
+ --uui-size: 24px;
38
+ --uui-border-width: 1px;
39
+ --uui-horizontal-gap: 6px;
40
+ --uui-vertical-gap: 3px;
41
+ --uui-horizontal-padding: 6px;
42
+ --uui-vertical-padding: 3px;
43
+ --uui-icon-size: 12px;
44
+ --uui-line-height: 18px;
45
+ --uui-font-size: 12px;
46
+ --uui-dot-size: 8px;
47
+ }
48
+
49
+ .uui-size-30 {
50
+ --uui-size: 30px;
51
+ --uui-border-width: 1px;
52
+ --uui-horizontal-gap: 6px;
53
+ --uui-vertical-gap: 3px;
54
+ --uui-horizontal-padding: 6px;
55
+ --uui-vertical-padding: 3px;
56
+ --uui-icon-size: 18px;
57
+ --uui-line-height: 18px;
58
+ --uui-font-size: 14px;
59
+ --uui-dot-size: 8px;
60
+ }
61
+
62
+ .uui-size-36 {
63
+ --uui-size: 36px;
64
+ --uui-border-width: 1px;
65
+ --uui-horizontal-gap: 6px;
66
+ --uui-vertical-gap: 3px;
67
+ --uui-horizontal-padding: 6px;
68
+ --uui-vertical-padding: 3px;
69
+ --uui-icon-size: 18px;
70
+ --uui-line-height: 18px;
71
+ --uui-font-size: 14px;
72
+ --uui-dot-size: 8px;
73
+ }
74
+
75
+ .uui-size-42 {
76
+ --uui-size: 42px;
77
+ --uui-border-width: 1px;
78
+ --uui-horizontal-gap: 6px;
79
+ --uui-vertical-gap: 3px;
80
+ --uui-horizontal-padding: 12px;
81
+ --uui-vertical-padding: 3px;
82
+ --uui-icon-size: 18px;
83
+ --uui-line-height: 24px;
84
+ --uui-font-size: 16px;
85
+ --uui-dot-size: 10px;
86
+ }
87
+
88
+ .uui-size-48 {
89
+ --uui-size: 48px;
90
+ --uui-border-width: 1px;
91
+ --uui-horizontal-gap: 6px;
92
+ --uui-vertical-gap: 3px;
93
+ --uui-horizontal-padding: 12px;
94
+ --uui-vertical-padding: 3px;
95
+ --uui-icon-size: 24px;
96
+ --uui-line-height: 24px;
97
+ --uui-font-size: 16px;
98
+ --uui-dot-size: 12px;
99
+ }
100
+
101
+ .uui-size-60 {
102
+ --uui-size: 60px;
103
+ --uui-border-width: 1px;
104
+ --uui-horizontal-gap: 6px;
105
+ --uui-vertical-gap: 3px;
106
+ --uui-horizontal-padding: 12px;
107
+ --uui-vertical-padding: 3px;
108
+ --uui-icon-size: 24px;
109
+ --uui-line-height: 24px;
110
+ --uui-font-size: 20px;
111
+ --uui-dot-size: 12px;
112
+ }
113
+
114
+ .uui-input-box {
115
+ &.uui-size-42 {
116
+ --uui-horizontal-padding: 6px;
117
+ }
118
+
119
+ &.uui-size-48 {
120
+ --uui-horizontal-padding: 6px;
121
+ }
122
+
123
+ &.uui-textarea {
124
+ --uui-horizontal-padding: 12px;
125
+
126
+ &.uui-size-24 {
127
+ --uui-line-height: 12px;
128
+ }
129
+ }
130
+ }
131
+
132
+ .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {
133
+ --uui-horizontal-padding: 12px;
134
+ --uui-horizontal-gap: 6px;
135
+ --uui-icon-size: 18px;
136
+ --uui-line-height: 18px;
137
+ --uui-font-size: 14px;
138
+ }
139
+
140
+ .uui-tag {
141
+ &.uui-size-18 {
142
+ --uui-font-size: 12px;
143
+ --uui-line-height: 14px;
144
+ }
145
+
146
+ &.uui-size-24 {
147
+ --uui-icon-size: 18px;
148
+ }
149
+
150
+ &.uui-size-42 {
151
+ --uui-icon-size: 24px;
152
+ }
153
+
154
+ &.uui-size-42,
155
+ &.uui-size-48 {
156
+ --uui-tag-count_indicator-margin-end: 3px;
157
+ }
158
+
159
+ &.uui-size-18,
160
+ &.uui-size-24,
161
+ &.uui-size-30,
162
+ &.uui-size-36 {
163
+ --uui-horizontal-gap: 3px;
164
+ }
165
+
166
+ &.uui-size-18,
167
+ &.uui-size-24,
168
+ &.uui-size-30 {
169
+ --uui-horizontal-padding: 3px;
170
+ }
171
+
172
+ &.uui-size-42,
173
+ &.uui-size-48 {
174
+ --uui-horizontal-padding: 6px;
175
+ }
176
+ }
177
+
178
+ .uui-picker_toggler:is(.uui-size-24, .uui-size-30, .uui-size-36, .uui-size-42) {
179
+ .uui-tag.uui-size-inherit {
180
+ --uui-horizontal-gap: 3px;
181
+ }
182
+ }
183
+
184
+ .uui-picker_toggler:is(.uui-size-24, .uui-size-30, .uui-size-36) {
185
+ .uui-tag.uui-size-inherit {
186
+ --uui-horizontal-padding: 3px;
187
+ }
188
+ }
189
+
190
+ .uui-size-48.uui-picker_toggler {
191
+ .uui-tag.uui-size-inherit {
192
+ --uui-horizontal-padding: 6px;
193
+ }
194
+ }
195
+
196
+ .uui-checkbox-container, .uui-radio-input-container {
197
+ &.uui-size-18 {
198
+ --uui-horizontal-gap: 12px;
199
+ --uui-line-height: 18px;
200
+ --uui-font-size: 14px;
201
+ }
202
+ }
203
+
204
+ .uui-switch {
205
+ &.uui-size-18 {
206
+ --uui-horizontal-gap: 12px;
207
+ --uui-line-height: 18px;
208
+ --uui-font-size: 14px;
209
+ }
210
+
211
+ &.uui-size-24 {
212
+ --uui-horizontal-gap: 12px;
213
+ --uui-line-height: 24px;
214
+ --uui-font-size: 16px;
215
+ }
216
+ }
217
+
218
+ .uui-picker-body:is(.uui-size-30, .uui-size-36) .uui-switch.uui-size-inherit {
219
+ --uui-horizontal-gap: 12px;
220
+ --uui-line-height: 18px;
221
+ --uui-font-size: 14px;
222
+
223
+ }
224
+
225
+ .uui-picker-body:is(.uui-size-42, .uui-size-48) .uui-switch.uui-size-inherit {
226
+ --uui-horizontal-gap: 12px;
227
+ --uui-line-height: 24px;
228
+ --uui-font-size: 16px;
229
+ }
230
+
231
+ .uui-labeled-input {
232
+ &.uui-size-30 {
233
+ --uui-icon-size: 12px;
234
+ --uui-font-size: 12px;
235
+ }
236
+
237
+ &.uui-size-42 {
238
+ --uui-line-height: 18px;
239
+ --uui-font-size: 14px;
240
+ }
241
+
242
+ &.uui-size-48 {
243
+ --uui-icon-size: 18px;
244
+ --uui-line-height: 18px;
245
+ --uui-font-size: 14px;
246
+ }
247
+ }
248
+
249
+ .uui-badge {
250
+ &.uui-size-18 {
251
+ --uui-font-size: 12px;
252
+ }
253
+
254
+ &.uui-size-24 {
255
+ --uui-horizontal-padding: 3px;
256
+ --uui-icon-size: 18px;
257
+ --uui-line-height: 12px;
258
+ }
259
+
260
+ &.uui-size-36 {
261
+ --uui-horizontal-padding: 9px;
262
+ }
263
+
264
+ &.uui-size-42 {
265
+ --uui-icon-size: 24px;
266
+ }
267
+ }
268
+
269
+ .uui-status_indicator {
270
+ &.uui-size-12 {
271
+ --uui-horizontal-gap: 4px;
272
+ }
273
+
274
+ &.uui-size-18 {
275
+ --uui-horizontal-gap: 6px;
276
+ --uui-line-height: 18px;
277
+ --uui-font-size: 14px;
278
+ --uui-dot-size: 8px;
279
+ }
280
+
281
+ &.uui-size-24 {
282
+ --uui-font-size: 14px;
283
+ --uui-dot-size: 10px;
284
+ }
285
+ }
286
+
287
+ .uui-count_indicator {
288
+ &.uui-size-12 {
289
+ --uui-horizontal-padding: 3px;
290
+ --uui-line-height: 10px;
291
+ --uui-font-size: 8px;
292
+ }
293
+
294
+ &.uui-size-18 {
295
+ --uui-horizontal-padding: 6px;
296
+ --uui-line-height: 16px;
297
+ --uui-font-size: 12px;
298
+ }
299
+
300
+ &.uui-size-24 {
301
+ --uui-line-height: 22px;
302
+ --uui-font-size: 14px;
303
+ }
304
+ }
305
+ }
package/theme/theme_electric.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use './tokens/_theme_electric.scss' as tokens;
2
+ @use './theme_6px' as *;
2
3
  @import '../scss/electric/font-faces';
3
4
 
4
5
  /* Name convention */
@@ -382,7 +383,7 @@
382
383
  /* Status Indicator */
383
384
 
384
385
  .uui-status_indicator.uui-color-white.uui-fill-outline {
385
- .uui-status_indicator_dot {
386
+ .uui-status_indicator-dot {
386
387
  background-color: color-mix(in srgb, var(--white) 20%, transparent);
387
388
  border: 1px solid var(--uui-neutral-40);
388
389
  }
@@ -572,5 +573,6 @@
572
573
  }
573
574
 
574
575
  .uui-theme-electric {
576
+ @include uui-6px-grid();
575
577
  @include theme-electric();
576
578
  }
package/theme/theme_loveship.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../scss/loveship/font-faces';
2
+ @use './theme_6px' as *;
2
3
  @use './tokens/_theme_loveship_light.scss' as tokens;
3
4
  /* Name convention */
4
5
  /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
@@ -392,7 +393,7 @@
392
393
  /* Status Indicator */
393
394
 
394
395
  .uui-status_indicator.uui-color-white.uui-fill-outline {
395
- .uui-status_indicator_dot {
396
+ .uui-status_indicator-dot {
396
397
  background-color: color-mix(in srgb, var(--white) 20%, transparent);
397
398
  border: 1px solid var(--uui-neutral-40);
398
399
  }
@@ -603,5 +604,6 @@
603
604
  }
604
605
 
605
606
  .uui-theme-loveship {
607
+ @include uui-6px-grid();
606
608
  @include theme-loveship();
607
609
  }
package/theme/theme_loveship_dark.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../scss/loveship/font-faces';
2
+ @use './theme_6px' as *;
2
3
  @use './tokens/_theme_loveship_dark.scss' as tokens;
3
4
  /* Name convention */
4
5
  /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
@@ -579,7 +580,7 @@
579
580
  /* Status Indicator */
580
581
 
581
582
  .uui-status_indicator.uui-color-white.uui-fill-outline {
582
- .uui-status_indicator_dot {
583
+ .uui-status_indicator-dot {
583
584
  background-color: color-mix(in srgb, var(--white) 20%, transparent);
584
585
  border: 1px solid var(--white);
585
586
  }
@@ -587,12 +588,12 @@
587
588
 
588
589
  .uui-status_indicator.uui-color-night600,
589
590
  .uui-status_indicator.uui-color-neutral {
590
- .uui-status_indicator_dot {
591
+ .uui-status_indicator-dot {
591
592
  background-color: var(--uui-neutral-30);
592
593
  }
593
594
 
594
595
  &.uui-fill-outline {
595
- .uui-status_indicator_dot {
596
+ .uui-status_indicator-dot {
596
597
  background-color: color-mix(in srgb, var(--uui-neutral-30) 20%, transparent);
597
598
  border: 1px solid var(--uui-neutral-30);
598
599
  }
@@ -799,8 +800,8 @@
799
800
 
800
801
  /* PickerInput */
801
802
 
802
- .uui-pickerInput-body {
803
- --uui-pickerInput-selected_mark: var(--uui-info-60);
803
+ .uui-picker_input-body {
804
+ --uui-picker_input-selected_mark: var(--uui-info-60);
804
805
  }
805
806
 
806
807
  /* fonts */
@@ -849,5 +850,6 @@
849
850
  }
850
851
 
851
852
  .uui-theme-loveship_dark {
853
+ @include uui-6px-grid();
852
854
  @include theme-loveship_dark();
853
855
  }
package/theme/theme_promo.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../scss/promo/font-faces';
2
+ @use './theme_6px' as *;
2
3
  @use './tokens/_theme_promo.scss' as tokens;
3
4
  /* Name convention */
4
5
  /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
@@ -415,7 +416,7 @@
415
416
  /* Status Indicator */
416
417
 
417
418
  .uui-status_indicator.uui-color-white.uui-fill-outline {
418
- .uui-status_indicator_dot {
419
+ .uui-status_indicator-dot {
419
420
  background-color: color-mix(in srgb, var(--white) 20%, transparent);
420
421
  border: 1px solid var(--uui-neutral-40);
421
422
  }
@@ -648,6 +649,7 @@
648
649
  }
649
650
 
650
651
  .uui-theme-promo {
652
+ @include uui-6px-grid();
651
653
  @include theme-promo();
652
654
  }
653
655
 
package/theme/theme_vanilla_thunder.scss CHANGED
@@ -1,6 +1,9 @@
1
+ @use './theme_6px' as *;
2
+
1
3
  /* Name convention */
2
4
  /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
3
5
  .uui-theme-vanilla_thunder {
6
+ @include uui-6px-grid();
4
7
  --uui-font: var(--font-inter);
5
8
  --uui-font-mono: 'Roboto Mono', monospace;
6
9
 
@@ -478,4 +481,4 @@
478
481
  }
479
482
  }
480
483
  }
481
- }
484
+ }