@epam/assets 5.9.1 → 5.9.3

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 (64) hide show
  1. package/css/theme/theme_electric.css.map +1 -1
  2. package/css/theme/theme_loveship.css +15 -0
  3. package/css/theme/theme_loveship.css.map +1 -1
  4. package/css/theme/theme_loveship_dark.css +36 -0
  5. package/css/theme/theme_loveship_dark.css.map +1 -1
  6. package/css/theme/theme_promo.css +12 -0
  7. package/css/theme/theme_promo.css.map +1 -1
  8. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  9. package/icons/common/radio-point-10.svg +13 -13
  10. package/icons/legacy/btn_cross.svg +22 -22
  11. package/icons/legacy/btn_tick.svg +22 -22
  12. package/icons/legacy/calendar-30.svg +12 -12
  13. package/icons/legacy/calendar-36.svg +14 -14
  14. package/icons/legacy/excel.svg +12 -12
  15. package/icons/legacy/filter-24.svg +11 -11
  16. package/icons/legacy/filter.svg +12 -12
  17. package/icons/legacy/folding-arrow.svg +14 -14
  18. package/icons/legacy/gear.svg +14 -14
  19. package/icons/legacy/help-24.svg +11 -11
  20. package/icons/legacy/help.svg +21 -21
  21. package/icons/legacy/label_info.svg +14 -14
  22. package/icons/legacy/lens.svg +17 -17
  23. package/icons/legacy/modal-close-cross.svg +22 -22
  24. package/icons/legacy/more.svg +20 -20
  25. package/icons/legacy/pencil.svg +12 -12
  26. package/icons/legacy/plus.svg +12 -12
  27. package/icons/legacy/sliders.svg +12 -12
  28. package/icons/legacy/sort-24.svg +15 -15
  29. package/icons/legacy/sort-desc-24.svg +15 -15
  30. package/icons/legacy/sort.svg +4 -4
  31. package/icons/legacy/trash.svg +12 -12
  32. package/icons/loaders/circle_loader_30.svg +69 -69
  33. package/icons/loaders/dots_loader_30.svg +39 -39
  34. package/icons/templates/generic-24.svg +40 -40
  35. package/icons/templates/generic-30.svg +43 -43
  36. package/icons/templates/generic.svg +40 -40
  37. package/icons/templates/tall.svg +69 -69
  38. package/package.json +2 -2
  39. package/readme.md +6 -6
  40. package/scss/electric/font-faces.scss +138 -138
  41. package/scss/font-faces.scss +3 -3
  42. package/scss/fonts.scss +2 -2
  43. package/scss/index.scss +4 -4
  44. package/scss/loveship/colors.scss +100 -100
  45. package/scss/loveship/font-faces.scss +186 -186
  46. package/scss/loveship/fonts.scss +23 -23
  47. package/scss/loveship/typography.scss +160 -160
  48. package/scss/loveship-colors.scss +2 -2
  49. package/scss/promo/colors.scss +100 -100
  50. package/scss/promo/font-faces.scss +168 -168
  51. package/scss/promo/fonts.scss +17 -17
  52. package/scss/promo/typography.scss +175 -175
  53. package/scss/typography.scss +2 -2
  54. package/theme/theme_6px.scss +216 -216
  55. package/theme/theme_electric.scss +518 -518
  56. package/theme/theme_loveship.scss +593 -573
  57. package/theme/theme_loveship_dark.scss +823 -773
  58. package/theme/theme_promo.scss +607 -592
  59. package/theme/theme_vanilla_thunder.scss +484 -484
  60. package/theme/tokens/_color_classes.scss +103 -103
  61. package/theme/tokens/_theme_electric.scss +277 -277
  62. package/theme/tokens/_theme_loveship_dark.scss +275 -275
  63. package/theme/tokens/_theme_loveship_light.scss +275 -275
  64. package/theme/tokens/_theme_promo.scss +275 -275
package/theme/theme_6px.scss CHANGED
@@ -1,216 +1,216 @@
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
-
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
-
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
- }
47
-
48
- .uui-size-30 {
49
- --uui-size: 30px;
50
- --uui-border-width: 1px;
51
- --uui-horizontal-gap: 6px;
52
- --uui-vertical-gap: 3px;
53
- --uui-horizontal-padding: 6px;
54
- --uui-vertical-padding: 3px;
55
- --uui-icon-size: 18px;
56
- --uui-line-height: 18px;
57
- --uui-font-size: 14px;
58
- }
59
-
60
- .uui-size-36 {
61
- --uui-size: 36px;
62
- --uui-border-width: 1px;
63
- --uui-horizontal-gap: 6px;
64
- --uui-vertical-gap: 3px;
65
- --uui-horizontal-padding: 6px;
66
- --uui-vertical-padding: 3px;
67
- --uui-icon-size: 18px;
68
- --uui-line-height: 18px;
69
- --uui-font-size: 14px;
70
- }
71
-
72
- .uui-size-42 {
73
- --uui-size: 42px;
74
- --uui-border-width: 1px;
75
- --uui-horizontal-gap: 6px;
76
- --uui-vertical-gap: 3px;
77
- --uui-horizontal-padding: 12px;
78
- --uui-vertical-padding: 3px;
79
- --uui-icon-size: 18px;
80
- --uui-line-height: 24px;
81
- --uui-font-size: 16px;
82
- }
83
-
84
- .uui-size-48 {
85
- --uui-size: 48px;
86
- --uui-border-width: 1px;
87
- --uui-horizontal-gap: 6px;
88
- --uui-vertical-gap: 3px;
89
- --uui-horizontal-padding: 12px;
90
- --uui-vertical-padding: 3px;
91
- --uui-icon-size: 24px;
92
- --uui-line-height: 24px;
93
- --uui-font-size: 16px;
94
- }
95
-
96
- .uui-size-60 {
97
- --uui-size: 60px;
98
- --uui-border-width: 1px;
99
- --uui-horizontal-gap: 6px;
100
- --uui-vertical-gap: 3px;
101
- --uui-horizontal-padding: 12px;
102
- --uui-vertical-padding: 3px;
103
- --uui-icon-size: 24px;
104
- --uui-line-height: 24px;
105
- --uui-font-size: 20px;
106
- }
107
-
108
- .uui-input-box {
109
- &.uui-size-42 {
110
- --uui-horizontal-padding: 6px;
111
- }
112
-
113
- &.uui-size-48 {
114
- --uui-horizontal-padding: 6px;
115
- }
116
- }
117
-
118
- .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {
119
- --uui-horizontal-padding: 12px;
120
- --uui-horizontal-gap: 6px;
121
- --uui-icon-size: 18px;
122
- --uui-line-height: 18px;
123
- --uui-font-size: 14px;
124
- }
125
-
126
- .uui-tag {
127
- &.uui-size-18 {
128
- --uui-font-size: 12px;
129
- --uui-line-height: 14px;
130
- }
131
-
132
- &.uui-size-24 {
133
- --uui-icon-size: 18px;
134
- }
135
-
136
- &.uui-size-42 {
137
- --uui-icon-size: 24px;
138
- }
139
-
140
- &.uui-size-42,
141
- &.uui-size-48 {
142
- --uui-tag-count_indicator-margin-end: 3px;
143
- }
144
-
145
- &.uui-size-18,
146
- &.uui-size-24,
147
- &.uui-size-30,
148
- &.uui-size-36 {
149
- --uui-horizontal-gap: 3px;
150
- }
151
-
152
- &.uui-size-18,
153
- &.uui-size-24,
154
- &.uui-size-30 {
155
- --uui-horizontal-padding: 3px;
156
- }
157
-
158
- &.uui-size-42,
159
- &.uui-size-48 {
160
- --uui-horizontal-padding: 6px;
161
- }
162
- }
163
-
164
- .uui-picker_toggler:is(.uui-size-24, .uui-size-30, .uui-size-36, .uui-size-42) {
165
- .uui-tag.uui-size-inherit {
166
- --uui-horizontal-gap: 3px;
167
- }
168
- }
169
-
170
- .uui-picker_toggler:is(.uui-size-24, .uui-size-30, .uui-size-36) {
171
- .uui-tag.uui-size-inherit {
172
- --uui-horizontal-padding: 3px;
173
- }
174
- }
175
-
176
- .uui-size-48.uui-picker_toggler {
177
- .uui-tag.uui-size-inherit {
178
- --uui-horizontal-padding: 6px;
179
- }
180
- }
181
-
182
- .uui-checkbox-container, .uui-radio-input-container {
183
- &.uui-size-18 {
184
- --uui-horizontal-gap: 12px;
185
- --uui-line-height: 18px;
186
- --uui-font-size: 14px;
187
- }
188
- }
189
-
190
- .uui-switch {
191
- &.uui-size-18 {
192
- --uui-horizontal-gap: 12px;
193
- --uui-line-height: 18px;
194
- --uui-font-size: 14px;
195
- }
196
-
197
- &.uui-size-24 {
198
- --uui-horizontal-gap: 12px;
199
- --uui-line-height: 24px;
200
- --uui-font-size: 16px;
201
- }
202
- }
203
-
204
- .uui-picker-body:is(.uui-size-30, .uui-size-36) .uui-switch.uui-size-inherit {
205
- --uui-horizontal-gap: 12px;
206
- --uui-line-height: 18px;
207
- --uui-font-size: 14px;
208
-
209
- }
210
-
211
- .uui-picker-body:is(.uui-size-42, .uui-size-48) .uui-switch.uui-size-inherit {
212
- --uui-horizontal-gap: 12px;
213
- --uui-line-height: 24px;
214
- --uui-font-size: 16px;
215
- }
216
- }
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
+
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
+
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
+ }
47
+
48
+ .uui-size-30 {
49
+ --uui-size: 30px;
50
+ --uui-border-width: 1px;
51
+ --uui-horizontal-gap: 6px;
52
+ --uui-vertical-gap: 3px;
53
+ --uui-horizontal-padding: 6px;
54
+ --uui-vertical-padding: 3px;
55
+ --uui-icon-size: 18px;
56
+ --uui-line-height: 18px;
57
+ --uui-font-size: 14px;
58
+ }
59
+
60
+ .uui-size-36 {
61
+ --uui-size: 36px;
62
+ --uui-border-width: 1px;
63
+ --uui-horizontal-gap: 6px;
64
+ --uui-vertical-gap: 3px;
65
+ --uui-horizontal-padding: 6px;
66
+ --uui-vertical-padding: 3px;
67
+ --uui-icon-size: 18px;
68
+ --uui-line-height: 18px;
69
+ --uui-font-size: 14px;
70
+ }
71
+
72
+ .uui-size-42 {
73
+ --uui-size: 42px;
74
+ --uui-border-width: 1px;
75
+ --uui-horizontal-gap: 6px;
76
+ --uui-vertical-gap: 3px;
77
+ --uui-horizontal-padding: 12px;
78
+ --uui-vertical-padding: 3px;
79
+ --uui-icon-size: 18px;
80
+ --uui-line-height: 24px;
81
+ --uui-font-size: 16px;
82
+ }
83
+
84
+ .uui-size-48 {
85
+ --uui-size: 48px;
86
+ --uui-border-width: 1px;
87
+ --uui-horizontal-gap: 6px;
88
+ --uui-vertical-gap: 3px;
89
+ --uui-horizontal-padding: 12px;
90
+ --uui-vertical-padding: 3px;
91
+ --uui-icon-size: 24px;
92
+ --uui-line-height: 24px;
93
+ --uui-font-size: 16px;
94
+ }
95
+
96
+ .uui-size-60 {
97
+ --uui-size: 60px;
98
+ --uui-border-width: 1px;
99
+ --uui-horizontal-gap: 6px;
100
+ --uui-vertical-gap: 3px;
101
+ --uui-horizontal-padding: 12px;
102
+ --uui-vertical-padding: 3px;
103
+ --uui-icon-size: 24px;
104
+ --uui-line-height: 24px;
105
+ --uui-font-size: 20px;
106
+ }
107
+
108
+ .uui-input-box {
109
+ &.uui-size-42 {
110
+ --uui-horizontal-padding: 6px;
111
+ }
112
+
113
+ &.uui-size-48 {
114
+ --uui-horizontal-padding: 6px;
115
+ }
116
+ }
117
+
118
+ .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {
119
+ --uui-horizontal-padding: 12px;
120
+ --uui-horizontal-gap: 6px;
121
+ --uui-icon-size: 18px;
122
+ --uui-line-height: 18px;
123
+ --uui-font-size: 14px;
124
+ }
125
+
126
+ .uui-tag {
127
+ &.uui-size-18 {
128
+ --uui-font-size: 12px;
129
+ --uui-line-height: 14px;
130
+ }
131
+
132
+ &.uui-size-24 {
133
+ --uui-icon-size: 18px;
134
+ }
135
+
136
+ &.uui-size-42 {
137
+ --uui-icon-size: 24px;
138
+ }
139
+
140
+ &.uui-size-42,
141
+ &.uui-size-48 {
142
+ --uui-tag-count_indicator-margin-end: 3px;
143
+ }
144
+
145
+ &.uui-size-18,
146
+ &.uui-size-24,
147
+ &.uui-size-30,
148
+ &.uui-size-36 {
149
+ --uui-horizontal-gap: 3px;
150
+ }
151
+
152
+ &.uui-size-18,
153
+ &.uui-size-24,
154
+ &.uui-size-30 {
155
+ --uui-horizontal-padding: 3px;
156
+ }
157
+
158
+ &.uui-size-42,
159
+ &.uui-size-48 {
160
+ --uui-horizontal-padding: 6px;
161
+ }
162
+ }
163
+
164
+ .uui-picker_toggler:is(.uui-size-24, .uui-size-30, .uui-size-36, .uui-size-42) {
165
+ .uui-tag.uui-size-inherit {
166
+ --uui-horizontal-gap: 3px;
167
+ }
168
+ }
169
+
170
+ .uui-picker_toggler:is(.uui-size-24, .uui-size-30, .uui-size-36) {
171
+ .uui-tag.uui-size-inherit {
172
+ --uui-horizontal-padding: 3px;
173
+ }
174
+ }
175
+
176
+ .uui-size-48.uui-picker_toggler {
177
+ .uui-tag.uui-size-inherit {
178
+ --uui-horizontal-padding: 6px;
179
+ }
180
+ }
181
+
182
+ .uui-checkbox-container, .uui-radio-input-container {
183
+ &.uui-size-18 {
184
+ --uui-horizontal-gap: 12px;
185
+ --uui-line-height: 18px;
186
+ --uui-font-size: 14px;
187
+ }
188
+ }
189
+
190
+ .uui-switch {
191
+ &.uui-size-18 {
192
+ --uui-horizontal-gap: 12px;
193
+ --uui-line-height: 18px;
194
+ --uui-font-size: 14px;
195
+ }
196
+
197
+ &.uui-size-24 {
198
+ --uui-horizontal-gap: 12px;
199
+ --uui-line-height: 24px;
200
+ --uui-font-size: 16px;
201
+ }
202
+ }
203
+
204
+ .uui-picker-body:is(.uui-size-30, .uui-size-36) .uui-switch.uui-size-inherit {
205
+ --uui-horizontal-gap: 12px;
206
+ --uui-line-height: 18px;
207
+ --uui-font-size: 14px;
208
+
209
+ }
210
+
211
+ .uui-picker-body:is(.uui-size-42, .uui-size-48) .uui-switch.uui-size-inherit {
212
+ --uui-horizontal-gap: 12px;
213
+ --uui-line-height: 24px;
214
+ --uui-font-size: 16px;
215
+ }
216
+ }