@megafon/ui-core 4.10.1 → 4.11.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 (12) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/es/colors/colorsData.js +6 -0
  3. package/dist/es/components/Button/Button.css +245 -69
  4. package/dist/es/components/Button/Button.d.ts +3 -0
  5. package/dist/es/components/Button/Button.js +10 -5
  6. package/dist/lib/colors/colorsData.js +6 -0
  7. package/dist/lib/components/Button/Button.css +245 -69
  8. package/dist/lib/components/Button/Button.d.ts +3 -0
  9. package/dist/lib/components/Button/Button.js +10 -5
  10. package/package.json +4 -4
  11. package/styles/colors.css +2 -0
  12. package/styles/colorsDark.css +2 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [4.11.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.10.1...@megafon/ui-core@4.11.0) (2023-01-16)
7
+
8
+
9
+ ### Features
10
+
11
+ * **button:** add soft green and soft purple button ([5f3be76](https://github.com/MegafonWebLab/megafon-ui/commit/5f3be76ecbb8e4549ac742aa9994d7f4e4b66ac7))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [4.10.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.10.0...@megafon/ui-core@4.10.1) (2022-12-19)
7
18
 
8
19
 
package/dist/es/colors/colorsData.js CHANGED
@@ -73,9 +73,15 @@ var colors = {
73
73
  }, {
74
74
  name: 'Button Hov. Green',
75
75
  code: 'buttonHoverGreen'
76
+ }, {
77
+ name: 'Button Hov. Green Soft',
78
+ code: 'buttonHoverGreenSoft'
76
79
  }, {
77
80
  name: 'Button Hov. Purple',
78
81
  code: 'buttonHoverPurple'
82
+ }, {
83
+ name: 'Button Hov. Purple Soft',
84
+ code: 'buttonHoverPurpleSoft'
79
85
  }, {
80
86
  name: 'Button Hov. Grey',
81
87
  code: 'buttonHoverGrey'
package/dist/es/components/Button/Button.css CHANGED
@@ -17,11 +17,18 @@
17
17
  background-color: transparent;
18
18
  outline: none;
19
19
  cursor: pointer;
20
+ -webkit-transition: background-color 0.3s, color 0.3s;
21
+ transition: background-color 0.3s, color 0.3s;
20
22
  -webkit-appearance: none;
21
23
  -moz-appearance: none;
22
24
  appearance: none;
23
25
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
24
26
  }
27
+ .mfui-button svg {
28
+ display: block;
29
+ -webkit-transition: fill 0.3s;
30
+ transition: fill 0.3s;
31
+ }
25
32
  .mfui-button_size-all_extra-small {
26
33
  padding: 0 16px;
27
34
  }
@@ -32,12 +39,12 @@
32
39
  height: 26px;
33
40
  }
34
41
  .mfui-button_size-all_small .mfui-button__inner {
35
- min-width: 32px;
36
- height: 32px;
42
+ min-width: 40px;
43
+ height: 40px;
37
44
  }
38
45
  .mfui-button_size-all_medium .mfui-button__inner {
39
- min-width: 48px;
40
- height: 48px;
46
+ min-width: 52px;
47
+ height: 52px;
41
48
  }
42
49
  .mfui-button_size-all_large .mfui-button__inner {
43
50
  min-width: 60px;
@@ -48,12 +55,12 @@
48
55
  height: 18px;
49
56
  }
50
57
  .mfui-button_size-all_small .mfui-button__icon {
51
- width: 24px;
52
- height: 24px;
58
+ width: 16px;
59
+ height: 16px;
53
60
  }
54
61
  .mfui-button_size-all_medium .mfui-button__icon {
55
- width: 32px;
56
- height: 32px;
62
+ width: 24px;
63
+ height: 24px;
57
64
  }
58
65
  .mfui-button_size-all_large .mfui-button__icon {
59
66
  width: 40px;
@@ -70,12 +77,12 @@
70
77
  height: 26px;
71
78
  }
72
79
  .mfui-button_size-wide_small .mfui-button__inner {
73
- min-width: 32px;
74
- height: 32px;
80
+ min-width: 40px;
81
+ height: 40px;
75
82
  }
76
83
  .mfui-button_size-wide_medium .mfui-button__inner {
77
- min-width: 48px;
78
- height: 48px;
84
+ min-width: 52px;
85
+ height: 52px;
79
86
  }
80
87
  .mfui-button_size-wide_large .mfui-button__inner {
81
88
  min-width: 60px;
@@ -86,12 +93,12 @@
86
93
  height: 18px;
87
94
  }
88
95
  .mfui-button_size-wide_small .mfui-button__icon {
89
- width: 24px;
90
- height: 24px;
96
+ width: 16px;
97
+ height: 16px;
91
98
  }
92
99
  .mfui-button_size-wide_medium .mfui-button__icon {
93
- width: 32px;
94
- height: 32px;
100
+ width: 24px;
101
+ height: 24px;
95
102
  }
96
103
  .mfui-button_size-wide_large .mfui-button__icon {
97
104
  width: 40px;
@@ -109,12 +116,12 @@
109
116
  height: 26px;
110
117
  }
111
118
  .mfui-button_size-desktop_small .mfui-button__inner {
112
- min-width: 32px;
113
- height: 32px;
119
+ min-width: 40px;
120
+ height: 40px;
114
121
  }
115
122
  .mfui-button_size-desktop_medium .mfui-button__inner {
116
- min-width: 48px;
117
- height: 48px;
123
+ min-width: 52px;
124
+ height: 52px;
118
125
  }
119
126
  .mfui-button_size-desktop_large .mfui-button__inner {
120
127
  min-width: 60px;
@@ -125,12 +132,12 @@
125
132
  height: 18px;
126
133
  }
127
134
  .mfui-button_size-desktop_small .mfui-button__icon {
128
- width: 24px;
129
- height: 24px;
135
+ width: 16px;
136
+ height: 16px;
130
137
  }
131
138
  .mfui-button_size-desktop_medium .mfui-button__icon {
132
- width: 32px;
133
- height: 32px;
139
+ width: 24px;
140
+ height: 24px;
134
141
  }
135
142
  .mfui-button_size-desktop_large .mfui-button__icon {
136
143
  width: 40px;
@@ -148,12 +155,12 @@
148
155
  height: 26px;
149
156
  }
150
157
  .mfui-button_size-tablet_small .mfui-button__inner {
151
- min-width: 32px;
152
- height: 32px;
158
+ min-width: 40px;
159
+ height: 40px;
153
160
  }
154
161
  .mfui-button_size-tablet_medium .mfui-button__inner {
155
- min-width: 48px;
156
- height: 48px;
162
+ min-width: 52px;
163
+ height: 52px;
157
164
  }
158
165
  .mfui-button_size-tablet_large .mfui-button__inner {
159
166
  min-width: 60px;
@@ -164,12 +171,12 @@
164
171
  height: 18px;
165
172
  }
166
173
  .mfui-button_size-tablet_small .mfui-button__icon {
167
- width: 24px;
168
- height: 24px;
174
+ width: 16px;
175
+ height: 16px;
169
176
  }
170
177
  .mfui-button_size-tablet_medium .mfui-button__icon {
171
- width: 32px;
172
- height: 32px;
178
+ width: 24px;
179
+ height: 24px;
173
180
  }
174
181
  .mfui-button_size-tablet_large .mfui-button__icon {
175
182
  width: 40px;
@@ -187,12 +194,12 @@
187
194
  height: 26px;
188
195
  }
189
196
  .mfui-button_size-mobile_small .mfui-button__inner {
190
- min-width: 32px;
191
- height: 32px;
197
+ min-width: 40px;
198
+ height: 40px;
192
199
  }
193
200
  .mfui-button_size-mobile_medium .mfui-button__inner {
194
- min-width: 48px;
195
- height: 48px;
201
+ min-width: 52px;
202
+ height: 52px;
196
203
  }
197
204
  .mfui-button_size-mobile_large .mfui-button__inner {
198
205
  min-width: 60px;
@@ -203,12 +210,12 @@
203
210
  height: 18px;
204
211
  }
205
212
  .mfui-button_size-mobile_small .mfui-button__icon {
206
- width: 24px;
207
- height: 24px;
213
+ width: 16px;
214
+ height: 16px;
208
215
  }
209
216
  .mfui-button_size-mobile_medium .mfui-button__icon {
210
- width: 32px;
211
- height: 32px;
217
+ width: 24px;
218
+ height: 24px;
212
219
  }
213
220
  .mfui-button_size-mobile_large .mfui-button__icon {
214
221
  width: 40px;
@@ -217,6 +224,12 @@
217
224
  }
218
225
  .mfui-button:hover {
219
226
  text-decoration: none;
227
+ -webkit-transition: background-color 0.3s, color 0.3s;
228
+ transition: background-color 0.3s, color 0.3s;
229
+ }
230
+ .mfui-button:hover svg {
231
+ -webkit-transition: fill 0.3s;
232
+ transition: fill 0.3s;
220
233
  }
221
234
  .mfui-button_disabled {
222
235
  cursor: default;
@@ -258,6 +271,12 @@
258
271
  max-width: -moz-fit-content;
259
272
  max-width: fit-content;
260
273
  }
274
+ .mfui-button__content_show-loader {
275
+ visibility: hidden;
276
+ }
277
+ .mfui-button__preloader {
278
+ position: absolute;
279
+ }
261
280
  .mfui-button__icon-arrow {
262
281
  width: 32px;
263
282
  height: 32px;
@@ -276,6 +295,103 @@
276
295
  .mfui-button_content-type_icon-text.mfui-button_size-all_small .mfui-button__icon {
277
296
  display: none;
278
297
  }
298
+ .mfui-button_type_text.mfui-button_theme_green {
299
+ width: -webkit-fit-content;
300
+ width: -moz-fit-content;
301
+ width: fit-content;
302
+ color: var(--brandGreen);
303
+ background-color: transparent;
304
+ block-size: -webkit-fit-content;
305
+ block-size: -moz-fit-content;
306
+ block-size: fit-content;
307
+ }
308
+ .mfui-button_type_text.mfui-button_theme_green svg {
309
+ fill: var(--brandGreen);
310
+ }
311
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):hover {
312
+ color: var(--buttonHoverGreen);
313
+ }
314
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):hover svg {
315
+ fill: var(--buttonHoverGreen);
316
+ }
317
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):active {
318
+ color: var(--buttonDown);
319
+ }
320
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):active svg {
321
+ fill: var(--buttonDown);
322
+ }
323
+ .mfui-button_type_text.mfui-button_theme_purple {
324
+ width: -webkit-fit-content;
325
+ width: -moz-fit-content;
326
+ width: fit-content;
327
+ color: var(--brandPurple);
328
+ background-color: transparent;
329
+ block-size: -webkit-fit-content;
330
+ block-size: -moz-fit-content;
331
+ block-size: fit-content;
332
+ }
333
+ .mfui-button_type_text.mfui-button_theme_purple svg {
334
+ fill: var(--brandPurple);
335
+ }
336
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):hover {
337
+ color: var(--buttonHoverPurple);
338
+ }
339
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):hover svg {
340
+ fill: var(--buttonHoverPurple);
341
+ }
342
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):active {
343
+ color: var(--buttonDown);
344
+ }
345
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):active svg {
346
+ fill: var(--buttonDown);
347
+ }
348
+ .mfui-button_type_text.mfui-button_theme_white {
349
+ width: -webkit-fit-content;
350
+ width: -moz-fit-content;
351
+ width: fit-content;
352
+ color: var(--stcWhite);
353
+ background-color: transparent;
354
+ block-size: -webkit-fit-content;
355
+ block-size: -moz-fit-content;
356
+ block-size: fit-content;
357
+ }
358
+ .mfui-button_type_text.mfui-button_theme_white svg {
359
+ fill: var(--stcWhite);
360
+ }
361
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):hover {
362
+ color: var(--buttonHoverGrey);
363
+ }
364
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):hover svg {
365
+ fill: var(--buttonHoverGrey);
366
+ }
367
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):active {
368
+ color: var(--buttonDown);
369
+ }
370
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):active svg {
371
+ fill: var(--buttonDown);
372
+ }
373
+ .mfui-button_type_text.mfui-button_theme_black {
374
+ color: var(--stcBlack);
375
+ background-color: transparent;
376
+ }
377
+ .mfui-button_type_text.mfui-button_theme_black svg {
378
+ fill: var(--stcBlack);
379
+ }
380
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black {
381
+ --stcBlack7: #818181;
382
+ }
383
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):hover {
384
+ color: var(--stcBlack7);
385
+ }
386
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):hover svg {
387
+ fill: var(--stcBlack7);
388
+ }
389
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):active {
390
+ color: var(--buttonDown);
391
+ }
392
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):active svg {
393
+ fill: var(--buttonDown);
394
+ }
279
395
  .mfui-button_type_primary.mfui-button_theme_green {
280
396
  color: var(--stcWhite);
281
397
  background-color: var(--brandGreen);
@@ -285,13 +401,27 @@
285
401
  }
286
402
  .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green:not(.mfui-button_loading):hover {
287
403
  background-color: var(--buttonHoverGreen);
288
- -webkit-box-shadow: inset 0 0 0 1px var(--buttonHoverGreen);
289
- box-shadow: inset 0 0 0 1px var(--buttonHoverGreen);
290
404
  }
291
405
  .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green:not(.mfui-button_loading):active {
292
406
  background-color: var(--buttonDown);
293
- -webkit-box-shadow: inset 0 0 0 1px var(--buttonDown);
294
- box-shadow: inset 0 0 0 1px var(--buttonDown);
407
+ }
408
+ .mfui-button_type_primary.mfui-button_theme_green-soft {
409
+ border: 1px solid rgba(0, 185, 86, 0.2);
410
+ color: var(--brandGreen);
411
+ background-color: var(--brandGreen20);
412
+ }
413
+ .mfui-button_type_primary.mfui-button_theme_green-soft svg {
414
+ fill: var(--brandGreen);
415
+ }
416
+ .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green-soft:not(.mfui-button_loading):hover {
417
+ background-color: var(--buttonHoverGreenSoft);
418
+ }
419
+ .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green-soft:not(.mfui-button_loading):active {
420
+ color: var(--stcWhite);
421
+ background-color: var(--buttonDown);
422
+ }
423
+ .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green-soft:not(.mfui-button_loading):active svg {
424
+ fill: var(--stcWhite);
295
425
  }
296
426
  .mfui-button_type_primary.mfui-button_theme_purple {
297
427
  color: var(--stcWhite);
@@ -302,13 +432,27 @@
302
432
  }
303
433
  .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):hover {
304
434
  background-color: var(--buttonHoverPurple);
305
- -webkit-box-shadow: inset 0 0 0 1px var(--buttonHoverPurple);
306
- box-shadow: inset 0 0 0 1px var(--buttonHoverPurple);
307
435
  }
308
436
  .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):active {
309
437
  background-color: var(--buttonDown);
310
- -webkit-box-shadow: inset 0 0 0 1px var(--buttonDown);
311
- box-shadow: inset 0 0 0 1px var(--buttonDown);
438
+ }
439
+ .mfui-button_type_primary.mfui-button_theme_purple-soft {
440
+ border: 1px solid rgba(115, 25, 130, 0.2);
441
+ color: var(--brandPurple);
442
+ background-color: var(--brandPurple20);
443
+ }
444
+ .mfui-button_type_primary.mfui-button_theme_purple-soft svg {
445
+ fill: var(--brandPurple);
446
+ }
447
+ .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple-soft:not(.mfui-button_loading):hover {
448
+ background-color: var(--buttonHoverPurpleSoft);
449
+ }
450
+ .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple-soft:not(.mfui-button_loading):active {
451
+ color: var(--stcWhite);
452
+ background-color: var(--buttonDown);
453
+ }
454
+ .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple-soft:not(.mfui-button_loading):active svg {
455
+ fill: var(--stcWhite);
312
456
  }
313
457
  .mfui-button_type_primary.mfui-button_theme_white {
314
458
  color: var(--stcBlack);
@@ -320,22 +464,21 @@
320
464
  .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):hover {
321
465
  color: var(--stcBlack);
322
466
  background-color: var(--buttonHoverGrey);
323
- -webkit-box-shadow: inset 0 0 0 1px var(--buttonHoverGrey);
324
- box-shadow: inset 0 0 0 1px var(--buttonHoverGrey);
325
467
  }
326
468
  .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):hover svg {
327
469
  fill: var(--stcBlack);
328
470
  }
329
471
  .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):active {
472
+ color: var(--stcWhite);
330
473
  background-color: var(--buttonDown);
331
- -webkit-box-shadow: inset 0 0 0 1px var(--buttonDown);
332
- box-shadow: inset 0 0 0 1px var(--buttonDown);
474
+ }
475
+ .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):active svg {
476
+ fill: var(--stcWhite);
333
477
  }
334
478
  .mfui-button_type_outline.mfui-button_theme_green {
479
+ border: 1px solid var(--brandGreen);
335
480
  color: var(--brandGreen);
336
481
  background-color: transparent;
337
- -webkit-box-shadow: inset 0 0 0 1px var(--brandGreen);
338
- box-shadow: inset 0 0 0 1px var(--brandGreen);
339
482
  }
340
483
  .mfui-button_type_outline.mfui-button_theme_green svg {
341
484
  fill: var(--brandGreen);
@@ -350,11 +493,27 @@
350
493
  .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green:not(.mfui-button_loading):active {
351
494
  background-color: var(--brandGreen14);
352
495
  }
496
+ .mfui-button_type_outline.mfui-button_theme_green-soft {
497
+ color: var(--brandGreen);
498
+ background-color: transparent;
499
+ }
500
+ .mfui-button_type_outline.mfui-button_theme_green-soft svg {
501
+ fill: var(--brandGreen);
502
+ }
503
+ .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green-soft {
504
+ --brandGreen7: rgba(0, 185, 86, 0.07);
505
+ --brandGreen14: rgba(0, 185, 86, 0.14);
506
+ }
507
+ .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green-soft:not(.mfui-button_loading):hover {
508
+ background-color: var(--brandGreen7);
509
+ }
510
+ .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green-soft:not(.mfui-button_loading):active {
511
+ background-color: var(--brandGreen14);
512
+ }
353
513
  .mfui-button_type_outline.mfui-button_theme_purple {
514
+ border: 1px solid var(--brandPurple);
354
515
  color: var(--brandPurple);
355
516
  background-color: transparent;
356
- -webkit-box-shadow: inset 0 0 0 1px var(--brandPurple);
357
- box-shadow: inset 0 0 0 1px var(--brandPurple);
358
517
  }
359
518
  .mfui-button_type_outline.mfui-button_theme_purple svg {
360
519
  fill: var(--brandPurple);
@@ -370,10 +529,9 @@
370
529
  background-color: var(--brandPurple14);
371
530
  }
372
531
  .mfui-button_type_outline.mfui-button_theme_white {
532
+ border: 1px solid var(--stcWhite);
373
533
  color: var(--stcWhite);
374
534
  background-color: transparent;
375
- -webkit-box-shadow: inset 0 0 0 1px var(--stcWhite);
376
- box-shadow: inset 0 0 0 1px var(--stcWhite);
377
535
  }
378
536
  .mfui-button_type_outline.mfui-button_theme_white svg {
379
537
  fill: var(--stcWhite);
@@ -389,10 +547,9 @@
389
547
  background-color: var(--stcWhite14);
390
548
  }
391
549
  .mfui-button_type_outline.mfui-button_theme_black {
550
+ border: 1px solid var(--stcBlack);
392
551
  color: var(--stcBlack);
393
552
  background-color: transparent;
394
- -webkit-box-shadow: inset 0 0 0 1px var(--stcBlack);
395
- box-shadow: inset 0 0 0 1px var(--stcBlack);
396
553
  }
397
554
  .mfui-button_type_outline.mfui-button_theme_black svg {
398
555
  fill: var(--stcBlack);
@@ -411,17 +568,13 @@
411
568
  display: block;
412
569
  width: 100%;
413
570
  }
414
- .mfui-button svg {
415
- display: block;
416
- }
417
571
  .mfui-button.mfui-button_type_primary.mfui-button_disabled,
418
572
  .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled,
419
573
  .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:hover,
420
574
  .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:active {
575
+ border: 1px solid var(--spbSky2);
421
576
  color: var(--spbSky3);
422
577
  background-color: var(--spbSky1);
423
- -webkit-box-shadow: inset 0 0 0 1px var(--spbSky3);
424
- box-shadow: inset 0 0 0 1px var(--spbSky3);
425
578
  }
426
579
  .mfui-button.mfui-button_type_primary.mfui-button_disabled svg,
427
580
  .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled svg,
@@ -433,10 +586,9 @@
433
586
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled,
434
587
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:hover,
435
588
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:active {
589
+ border: 1px solid var(--stcWhite);
436
590
  color: var(--stcWhite50);
437
591
  background-color: transparent;
438
- -webkit-box-shadow: inset 0 0 0 1px var(--stcWhite50);
439
- box-shadow: inset 0 0 0 1px var(--stcWhite50);
440
592
  }
441
593
  .mfui-button.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg,
442
594
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg,
@@ -448,10 +600,9 @@
448
600
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled,
449
601
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:hover,
450
602
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active {
603
+ border: 1px solid var(--spbSky2);
451
604
  color: var(--spbSky3);
452
605
  background-color: transparent;
453
- -webkit-box-shadow: inset 0 0 0 1px var(--spbSky3);
454
- box-shadow: inset 0 0 0 1px var(--spbSky3);
455
606
  }
456
607
  .mfui-button.mfui-button_type_outline.mfui-button_disabled svg,
457
608
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled svg,
@@ -459,3 +610,28 @@
459
610
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active svg {
460
611
  fill: var(--spbSky3);
461
612
  }
613
+ .mfui-button.mfui-button_type_text.mfui-button_disabled,
614
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled,
615
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:hover,
616
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:active {
617
+ color: var(--spbSky3);
618
+ }
619
+ .mfui-button.mfui-button_type_text.mfui-button_disabled svg,
620
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled svg,
621
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:hover svg,
622
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:active svg {
623
+ fill: var(--spbSky3);
624
+ }
625
+ .mfui-button.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled,
626
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled,
627
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:hover,
628
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:active {
629
+ color: var(--stcWhite);
630
+ background-color: transparent;
631
+ }
632
+ .mfui-button.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled svg,
633
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled svg,
634
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:hover svg,
635
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:active svg {
636
+ fill: var(--stcWhite);
637
+ }
package/dist/es/components/Button/Button.d.ts CHANGED
@@ -3,11 +3,14 @@ import './Button.less';
3
3
  export declare const ButtonTypes: {
4
4
  readonly PRIMARY: "primary";
5
5
  readonly OUTLINE: "outline";
6
+ readonly TEXT: "text";
6
7
  };
7
8
  declare type ButtonTypesType = typeof ButtonTypes[keyof typeof ButtonTypes];
8
9
  export declare const ButtonThemes: {
9
10
  readonly GREEN: "green";
11
+ readonly GREEN_SOFT: "green-soft";
10
12
  readonly PURPLE: "purple";
13
+ readonly PURPLE_SOFT: "purple-soft";
11
14
  readonly WHITE: "white";
12
15
  readonly BLACK: "black";
13
16
  };
package/dist/es/components/Button/Button.js CHANGED
@@ -20,11 +20,14 @@ var Arrow = function Arrow(props) {
20
20
 
21
21
  export var ButtonTypes = {
22
22
  PRIMARY: 'primary',
23
- OUTLINE: 'outline'
23
+ OUTLINE: 'outline',
24
+ TEXT: 'text'
24
25
  };
25
26
  export var ButtonThemes = {
26
27
  GREEN: 'green',
28
+ GREEN_SOFT: 'green-soft',
27
29
  PURPLE: 'purple',
30
+ PURPLE_SOFT: 'purple-soft',
28
31
  WHITE: 'white',
29
32
  BLACK: 'black'
30
33
  };
@@ -105,7 +108,7 @@ var Button = function Button(_ref) {
105
108
  return type === ButtonTypes.PRIMARY && theme === ButtonThemes.BLACK ? ButtonThemes.GREEN : theme;
106
109
  }, [type, theme]);
107
110
  var loaderWhite = React.useMemo(function () {
108
- return type === ButtonTypes.PRIMARY && theme === ButtonThemes.GREEN || type === ButtonTypes.PRIMARY && theme === ButtonThemes.PURPLE || type === ButtonTypes.OUTLINE && theme === ButtonThemes.WHITE;
111
+ return type === ButtonTypes.PRIMARY && theme === ButtonThemes.GREEN || type === ButtonTypes.PRIMARY && theme === ButtonThemes.PURPLE || type === ButtonTypes.OUTLINE && theme === ButtonThemes.WHITE || type === ButtonTypes.TEXT && theme === ButtonThemes.WHITE;
109
112
  }, [type, theme]);
110
113
  var loaderColor = React.useMemo(function () {
111
114
  switch (true) {
@@ -126,7 +129,8 @@ var Button = function Button(_ref) {
126
129
 
127
130
  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content), {
128
131
  className: cn('content', {
129
- ellipsis: ellipsis
132
+ ellipsis: ellipsis,
133
+ 'show-loader': showLoader
130
134
  }, contentClassName)
131
135
  }), icon && /*#__PURE__*/React.createElement("div", {
132
136
  className: cn('icon')
@@ -137,7 +141,7 @@ var Button = function Button(_ref) {
137
141
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children), !icon && showArrow && /*#__PURE__*/React.createElement(Arrow, _extends({
138
142
  className: cn('icon-arrow')
139
143
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow))));
140
- }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, contentClassName, showArrow]);
144
+ }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, showLoader, contentClassName, showArrow]);
141
145
  var contentType = React.useMemo(function () {
142
146
  switch (true) {
143
147
  case icon && !children:
@@ -152,6 +156,7 @@ var Button = function Button(_ref) {
152
156
  }, [icon, children]);
153
157
  var renderedLoader = React.useMemo(function () {
154
158
  return /*#__PURE__*/React.createElement(Preloader, {
159
+ className: cn('preloader'),
155
160
  dataAttrs: {
156
161
  root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader)
157
162
  },
@@ -209,7 +214,7 @@ var Button = function Button(_ref) {
209
214
  ref: buttonRef
210
215
  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
211
216
  className: cn('inner', innerClassName)
212
- }), !showLoader ? renderedContent : renderedLoader));
217
+ }), renderedContent, showLoader && renderedLoader));
213
218
  };
214
219
 
215
220
  Button.propTypes = {
package/dist/lib/colors/colorsData.js CHANGED
@@ -79,9 +79,15 @@ var colors = {
79
79
  }, {
80
80
  name: 'Button Hov. Green',
81
81
  code: 'buttonHoverGreen'
82
+ }, {
83
+ name: 'Button Hov. Green Soft',
84
+ code: 'buttonHoverGreenSoft'
82
85
  }, {
83
86
  name: 'Button Hov. Purple',
84
87
  code: 'buttonHoverPurple'
88
+ }, {
89
+ name: 'Button Hov. Purple Soft',
90
+ code: 'buttonHoverPurpleSoft'
85
91
  }, {
86
92
  name: 'Button Hov. Grey',
87
93
  code: 'buttonHoverGrey'
package/dist/lib/components/Button/Button.css CHANGED
@@ -17,11 +17,18 @@
17
17
  background-color: transparent;
18
18
  outline: none;
19
19
  cursor: pointer;
20
+ -webkit-transition: background-color 0.3s, color 0.3s;
21
+ transition: background-color 0.3s, color 0.3s;
20
22
  -webkit-appearance: none;
21
23
  -moz-appearance: none;
22
24
  appearance: none;
23
25
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
24
26
  }
27
+ .mfui-button svg {
28
+ display: block;
29
+ -webkit-transition: fill 0.3s;
30
+ transition: fill 0.3s;
31
+ }
25
32
  .mfui-button_size-all_extra-small {
26
33
  padding: 0 16px;
27
34
  }
@@ -32,12 +39,12 @@
32
39
  height: 26px;
33
40
  }
34
41
  .mfui-button_size-all_small .mfui-button__inner {
35
- min-width: 32px;
36
- height: 32px;
42
+ min-width: 40px;
43
+ height: 40px;
37
44
  }
38
45
  .mfui-button_size-all_medium .mfui-button__inner {
39
- min-width: 48px;
40
- height: 48px;
46
+ min-width: 52px;
47
+ height: 52px;
41
48
  }
42
49
  .mfui-button_size-all_large .mfui-button__inner {
43
50
  min-width: 60px;
@@ -48,12 +55,12 @@
48
55
  height: 18px;
49
56
  }
50
57
  .mfui-button_size-all_small .mfui-button__icon {
51
- width: 24px;
52
- height: 24px;
58
+ width: 16px;
59
+ height: 16px;
53
60
  }
54
61
  .mfui-button_size-all_medium .mfui-button__icon {
55
- width: 32px;
56
- height: 32px;
62
+ width: 24px;
63
+ height: 24px;
57
64
  }
58
65
  .mfui-button_size-all_large .mfui-button__icon {
59
66
  width: 40px;
@@ -70,12 +77,12 @@
70
77
  height: 26px;
71
78
  }
72
79
  .mfui-button_size-wide_small .mfui-button__inner {
73
- min-width: 32px;
74
- height: 32px;
80
+ min-width: 40px;
81
+ height: 40px;
75
82
  }
76
83
  .mfui-button_size-wide_medium .mfui-button__inner {
77
- min-width: 48px;
78
- height: 48px;
84
+ min-width: 52px;
85
+ height: 52px;
79
86
  }
80
87
  .mfui-button_size-wide_large .mfui-button__inner {
81
88
  min-width: 60px;
@@ -86,12 +93,12 @@
86
93
  height: 18px;
87
94
  }
88
95
  .mfui-button_size-wide_small .mfui-button__icon {
89
- width: 24px;
90
- height: 24px;
96
+ width: 16px;
97
+ height: 16px;
91
98
  }
92
99
  .mfui-button_size-wide_medium .mfui-button__icon {
93
- width: 32px;
94
- height: 32px;
100
+ width: 24px;
101
+ height: 24px;
95
102
  }
96
103
  .mfui-button_size-wide_large .mfui-button__icon {
97
104
  width: 40px;
@@ -109,12 +116,12 @@
109
116
  height: 26px;
110
117
  }
111
118
  .mfui-button_size-desktop_small .mfui-button__inner {
112
- min-width: 32px;
113
- height: 32px;
119
+ min-width: 40px;
120
+ height: 40px;
114
121
  }
115
122
  .mfui-button_size-desktop_medium .mfui-button__inner {
116
- min-width: 48px;
117
- height: 48px;
123
+ min-width: 52px;
124
+ height: 52px;
118
125
  }
119
126
  .mfui-button_size-desktop_large .mfui-button__inner {
120
127
  min-width: 60px;
@@ -125,12 +132,12 @@
125
132
  height: 18px;
126
133
  }
127
134
  .mfui-button_size-desktop_small .mfui-button__icon {
128
- width: 24px;
129
- height: 24px;
135
+ width: 16px;
136
+ height: 16px;
130
137
  }
131
138
  .mfui-button_size-desktop_medium .mfui-button__icon {
132
- width: 32px;
133
- height: 32px;
139
+ width: 24px;
140
+ height: 24px;
134
141
  }
135
142
  .mfui-button_size-desktop_large .mfui-button__icon {
136
143
  width: 40px;
@@ -148,12 +155,12 @@
148
155
  height: 26px;
149
156
  }
150
157
  .mfui-button_size-tablet_small .mfui-button__inner {
151
- min-width: 32px;
152
- height: 32px;
158
+ min-width: 40px;
159
+ height: 40px;
153
160
  }
154
161
  .mfui-button_size-tablet_medium .mfui-button__inner {
155
- min-width: 48px;
156
- height: 48px;
162
+ min-width: 52px;
163
+ height: 52px;
157
164
  }
158
165
  .mfui-button_size-tablet_large .mfui-button__inner {
159
166
  min-width: 60px;
@@ -164,12 +171,12 @@
164
171
  height: 18px;
165
172
  }
166
173
  .mfui-button_size-tablet_small .mfui-button__icon {
167
- width: 24px;
168
- height: 24px;
174
+ width: 16px;
175
+ height: 16px;
169
176
  }
170
177
  .mfui-button_size-tablet_medium .mfui-button__icon {
171
- width: 32px;
172
- height: 32px;
178
+ width: 24px;
179
+ height: 24px;
173
180
  }
174
181
  .mfui-button_size-tablet_large .mfui-button__icon {
175
182
  width: 40px;
@@ -187,12 +194,12 @@
187
194
  height: 26px;
188
195
  }
189
196
  .mfui-button_size-mobile_small .mfui-button__inner {
190
- min-width: 32px;
191
- height: 32px;
197
+ min-width: 40px;
198
+ height: 40px;
192
199
  }
193
200
  .mfui-button_size-mobile_medium .mfui-button__inner {
194
- min-width: 48px;
195
- height: 48px;
201
+ min-width: 52px;
202
+ height: 52px;
196
203
  }
197
204
  .mfui-button_size-mobile_large .mfui-button__inner {
198
205
  min-width: 60px;
@@ -203,12 +210,12 @@
203
210
  height: 18px;
204
211
  }
205
212
  .mfui-button_size-mobile_small .mfui-button__icon {
206
- width: 24px;
207
- height: 24px;
213
+ width: 16px;
214
+ height: 16px;
208
215
  }
209
216
  .mfui-button_size-mobile_medium .mfui-button__icon {
210
- width: 32px;
211
- height: 32px;
217
+ width: 24px;
218
+ height: 24px;
212
219
  }
213
220
  .mfui-button_size-mobile_large .mfui-button__icon {
214
221
  width: 40px;
@@ -217,6 +224,12 @@
217
224
  }
218
225
  .mfui-button:hover {
219
226
  text-decoration: none;
227
+ -webkit-transition: background-color 0.3s, color 0.3s;
228
+ transition: background-color 0.3s, color 0.3s;
229
+ }
230
+ .mfui-button:hover svg {
231
+ -webkit-transition: fill 0.3s;
232
+ transition: fill 0.3s;
220
233
  }
221
234
  .mfui-button_disabled {
222
235
  cursor: default;
@@ -258,6 +271,12 @@
258
271
  max-width: -moz-fit-content;
259
272
  max-width: fit-content;
260
273
  }
274
+ .mfui-button__content_show-loader {
275
+ visibility: hidden;
276
+ }
277
+ .mfui-button__preloader {
278
+ position: absolute;
279
+ }
261
280
  .mfui-button__icon-arrow {
262
281
  width: 32px;
263
282
  height: 32px;
@@ -276,6 +295,103 @@
276
295
  .mfui-button_content-type_icon-text.mfui-button_size-all_small .mfui-button__icon {
277
296
  display: none;
278
297
  }
298
+ .mfui-button_type_text.mfui-button_theme_green {
299
+ width: -webkit-fit-content;
300
+ width: -moz-fit-content;
301
+ width: fit-content;
302
+ color: var(--brandGreen);
303
+ background-color: transparent;
304
+ block-size: -webkit-fit-content;
305
+ block-size: -moz-fit-content;
306
+ block-size: fit-content;
307
+ }
308
+ .mfui-button_type_text.mfui-button_theme_green svg {
309
+ fill: var(--brandGreen);
310
+ }
311
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):hover {
312
+ color: var(--buttonHoverGreen);
313
+ }
314
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):hover svg {
315
+ fill: var(--buttonHoverGreen);
316
+ }
317
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):active {
318
+ color: var(--buttonDown);
319
+ }
320
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_green:not(.mfui-button_loading):active svg {
321
+ fill: var(--buttonDown);
322
+ }
323
+ .mfui-button_type_text.mfui-button_theme_purple {
324
+ width: -webkit-fit-content;
325
+ width: -moz-fit-content;
326
+ width: fit-content;
327
+ color: var(--brandPurple);
328
+ background-color: transparent;
329
+ block-size: -webkit-fit-content;
330
+ block-size: -moz-fit-content;
331
+ block-size: fit-content;
332
+ }
333
+ .mfui-button_type_text.mfui-button_theme_purple svg {
334
+ fill: var(--brandPurple);
335
+ }
336
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):hover {
337
+ color: var(--buttonHoverPurple);
338
+ }
339
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):hover svg {
340
+ fill: var(--buttonHoverPurple);
341
+ }
342
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):active {
343
+ color: var(--buttonDown);
344
+ }
345
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_purple:not(.mfui-button_loading):active svg {
346
+ fill: var(--buttonDown);
347
+ }
348
+ .mfui-button_type_text.mfui-button_theme_white {
349
+ width: -webkit-fit-content;
350
+ width: -moz-fit-content;
351
+ width: fit-content;
352
+ color: var(--stcWhite);
353
+ background-color: transparent;
354
+ block-size: -webkit-fit-content;
355
+ block-size: -moz-fit-content;
356
+ block-size: fit-content;
357
+ }
358
+ .mfui-button_type_text.mfui-button_theme_white svg {
359
+ fill: var(--stcWhite);
360
+ }
361
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):hover {
362
+ color: var(--buttonHoverGrey);
363
+ }
364
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):hover svg {
365
+ fill: var(--buttonHoverGrey);
366
+ }
367
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):active {
368
+ color: var(--buttonDown);
369
+ }
370
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white:not(.mfui-button_loading):active svg {
371
+ fill: var(--buttonDown);
372
+ }
373
+ .mfui-button_type_text.mfui-button_theme_black {
374
+ color: var(--stcBlack);
375
+ background-color: transparent;
376
+ }
377
+ .mfui-button_type_text.mfui-button_theme_black svg {
378
+ fill: var(--stcBlack);
379
+ }
380
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black {
381
+ --stcBlack7: #818181;
382
+ }
383
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):hover {
384
+ color: var(--stcBlack7);
385
+ }
386
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):hover svg {
387
+ fill: var(--stcBlack7);
388
+ }
389
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):active {
390
+ color: var(--buttonDown);
391
+ }
392
+ .mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_black:not(.mfui-button_loading):active svg {
393
+ fill: var(--buttonDown);
394
+ }
279
395
  .mfui-button_type_primary.mfui-button_theme_green {
280
396
  color: var(--stcWhite);
281
397
  background-color: var(--brandGreen);
@@ -285,13 +401,27 @@
285
401
  }
286
402
  .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green:not(.mfui-button_loading):hover {
287
403
  background-color: var(--buttonHoverGreen);
288
- -webkit-box-shadow: inset 0 0 0 1px var(--buttonHoverGreen);
289
- box-shadow: inset 0 0 0 1px var(--buttonHoverGreen);
290
404
  }
291
405
  .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green:not(.mfui-button_loading):active {
292
406
  background-color: var(--buttonDown);
293
- -webkit-box-shadow: inset 0 0 0 1px var(--buttonDown);
294
- box-shadow: inset 0 0 0 1px var(--buttonDown);
407
+ }
408
+ .mfui-button_type_primary.mfui-button_theme_green-soft {
409
+ border: 1px solid rgba(0, 185, 86, 0.2);
410
+ color: var(--brandGreen);
411
+ background-color: var(--brandGreen20);
412
+ }
413
+ .mfui-button_type_primary.mfui-button_theme_green-soft svg {
414
+ fill: var(--brandGreen);
415
+ }
416
+ .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green-soft:not(.mfui-button_loading):hover {
417
+ background-color: var(--buttonHoverGreenSoft);
418
+ }
419
+ .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green-soft:not(.mfui-button_loading):active {
420
+ color: var(--stcWhite);
421
+ background-color: var(--buttonDown);
422
+ }
423
+ .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green-soft:not(.mfui-button_loading):active svg {
424
+ fill: var(--stcWhite);
295
425
  }
296
426
  .mfui-button_type_primary.mfui-button_theme_purple {
297
427
  color: var(--stcWhite);
@@ -302,13 +432,27 @@
302
432
  }
303
433
  .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):hover {
304
434
  background-color: var(--buttonHoverPurple);
305
- -webkit-box-shadow: inset 0 0 0 1px var(--buttonHoverPurple);
306
- box-shadow: inset 0 0 0 1px var(--buttonHoverPurple);
307
435
  }
308
436
  .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):active {
309
437
  background-color: var(--buttonDown);
310
- -webkit-box-shadow: inset 0 0 0 1px var(--buttonDown);
311
- box-shadow: inset 0 0 0 1px var(--buttonDown);
438
+ }
439
+ .mfui-button_type_primary.mfui-button_theme_purple-soft {
440
+ border: 1px solid rgba(115, 25, 130, 0.2);
441
+ color: var(--brandPurple);
442
+ background-color: var(--brandPurple20);
443
+ }
444
+ .mfui-button_type_primary.mfui-button_theme_purple-soft svg {
445
+ fill: var(--brandPurple);
446
+ }
447
+ .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple-soft:not(.mfui-button_loading):hover {
448
+ background-color: var(--buttonHoverPurpleSoft);
449
+ }
450
+ .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple-soft:not(.mfui-button_loading):active {
451
+ color: var(--stcWhite);
452
+ background-color: var(--buttonDown);
453
+ }
454
+ .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple-soft:not(.mfui-button_loading):active svg {
455
+ fill: var(--stcWhite);
312
456
  }
313
457
  .mfui-button_type_primary.mfui-button_theme_white {
314
458
  color: var(--stcBlack);
@@ -320,22 +464,21 @@
320
464
  .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):hover {
321
465
  color: var(--stcBlack);
322
466
  background-color: var(--buttonHoverGrey);
323
- -webkit-box-shadow: inset 0 0 0 1px var(--buttonHoverGrey);
324
- box-shadow: inset 0 0 0 1px var(--buttonHoverGrey);
325
467
  }
326
468
  .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):hover svg {
327
469
  fill: var(--stcBlack);
328
470
  }
329
471
  .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):active {
472
+ color: var(--stcWhite);
330
473
  background-color: var(--buttonDown);
331
- -webkit-box-shadow: inset 0 0 0 1px var(--buttonDown);
332
- box-shadow: inset 0 0 0 1px var(--buttonDown);
474
+ }
475
+ .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):active svg {
476
+ fill: var(--stcWhite);
333
477
  }
334
478
  .mfui-button_type_outline.mfui-button_theme_green {
479
+ border: 1px solid var(--brandGreen);
335
480
  color: var(--brandGreen);
336
481
  background-color: transparent;
337
- -webkit-box-shadow: inset 0 0 0 1px var(--brandGreen);
338
- box-shadow: inset 0 0 0 1px var(--brandGreen);
339
482
  }
340
483
  .mfui-button_type_outline.mfui-button_theme_green svg {
341
484
  fill: var(--brandGreen);
@@ -350,11 +493,27 @@
350
493
  .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green:not(.mfui-button_loading):active {
351
494
  background-color: var(--brandGreen14);
352
495
  }
496
+ .mfui-button_type_outline.mfui-button_theme_green-soft {
497
+ color: var(--brandGreen);
498
+ background-color: transparent;
499
+ }
500
+ .mfui-button_type_outline.mfui-button_theme_green-soft svg {
501
+ fill: var(--brandGreen);
502
+ }
503
+ .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green-soft {
504
+ --brandGreen7: rgba(0, 185, 86, 0.07);
505
+ --brandGreen14: rgba(0, 185, 86, 0.14);
506
+ }
507
+ .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green-soft:not(.mfui-button_loading):hover {
508
+ background-color: var(--brandGreen7);
509
+ }
510
+ .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green-soft:not(.mfui-button_loading):active {
511
+ background-color: var(--brandGreen14);
512
+ }
353
513
  .mfui-button_type_outline.mfui-button_theme_purple {
514
+ border: 1px solid var(--brandPurple);
354
515
  color: var(--brandPurple);
355
516
  background-color: transparent;
356
- -webkit-box-shadow: inset 0 0 0 1px var(--brandPurple);
357
- box-shadow: inset 0 0 0 1px var(--brandPurple);
358
517
  }
359
518
  .mfui-button_type_outline.mfui-button_theme_purple svg {
360
519
  fill: var(--brandPurple);
@@ -370,10 +529,9 @@
370
529
  background-color: var(--brandPurple14);
371
530
  }
372
531
  .mfui-button_type_outline.mfui-button_theme_white {
532
+ border: 1px solid var(--stcWhite);
373
533
  color: var(--stcWhite);
374
534
  background-color: transparent;
375
- -webkit-box-shadow: inset 0 0 0 1px var(--stcWhite);
376
- box-shadow: inset 0 0 0 1px var(--stcWhite);
377
535
  }
378
536
  .mfui-button_type_outline.mfui-button_theme_white svg {
379
537
  fill: var(--stcWhite);
@@ -389,10 +547,9 @@
389
547
  background-color: var(--stcWhite14);
390
548
  }
391
549
  .mfui-button_type_outline.mfui-button_theme_black {
550
+ border: 1px solid var(--stcBlack);
392
551
  color: var(--stcBlack);
393
552
  background-color: transparent;
394
- -webkit-box-shadow: inset 0 0 0 1px var(--stcBlack);
395
- box-shadow: inset 0 0 0 1px var(--stcBlack);
396
553
  }
397
554
  .mfui-button_type_outline.mfui-button_theme_black svg {
398
555
  fill: var(--stcBlack);
@@ -411,17 +568,13 @@
411
568
  display: block;
412
569
  width: 100%;
413
570
  }
414
- .mfui-button svg {
415
- display: block;
416
- }
417
571
  .mfui-button.mfui-button_type_primary.mfui-button_disabled,
418
572
  .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled,
419
573
  .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:hover,
420
574
  .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:active {
575
+ border: 1px solid var(--spbSky2);
421
576
  color: var(--spbSky3);
422
577
  background-color: var(--spbSky1);
423
- -webkit-box-shadow: inset 0 0 0 1px var(--spbSky3);
424
- box-shadow: inset 0 0 0 1px var(--spbSky3);
425
578
  }
426
579
  .mfui-button.mfui-button_type_primary.mfui-button_disabled svg,
427
580
  .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled svg,
@@ -433,10 +586,9 @@
433
586
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled,
434
587
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:hover,
435
588
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:active {
589
+ border: 1px solid var(--stcWhite);
436
590
  color: var(--stcWhite50);
437
591
  background-color: transparent;
438
- -webkit-box-shadow: inset 0 0 0 1px var(--stcWhite50);
439
- box-shadow: inset 0 0 0 1px var(--stcWhite50);
440
592
  }
441
593
  .mfui-button.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg,
442
594
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg,
@@ -448,10 +600,9 @@
448
600
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled,
449
601
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:hover,
450
602
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active {
603
+ border: 1px solid var(--spbSky2);
451
604
  color: var(--spbSky3);
452
605
  background-color: transparent;
453
- -webkit-box-shadow: inset 0 0 0 1px var(--spbSky3);
454
- box-shadow: inset 0 0 0 1px var(--spbSky3);
455
606
  }
456
607
  .mfui-button.mfui-button_type_outline.mfui-button_disabled svg,
457
608
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled svg,
@@ -459,3 +610,28 @@
459
610
  .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active svg {
460
611
  fill: var(--spbSky3);
461
612
  }
613
+ .mfui-button.mfui-button_type_text.mfui-button_disabled,
614
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled,
615
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:hover,
616
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:active {
617
+ color: var(--spbSky3);
618
+ }
619
+ .mfui-button.mfui-button_type_text.mfui-button_disabled svg,
620
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled svg,
621
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:hover svg,
622
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_disabled:active svg {
623
+ fill: var(--spbSky3);
624
+ }
625
+ .mfui-button.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled,
626
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled,
627
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:hover,
628
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:active {
629
+ color: var(--stcWhite);
630
+ background-color: transparent;
631
+ }
632
+ .mfui-button.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled svg,
633
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled svg,
634
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:hover svg,
635
+ .mfui-button.mfui-button_no-touch.mfui-button_type_text.mfui-button_theme_white.mfui-button_disabled:active svg {
636
+ fill: var(--stcWhite);
637
+ }
package/dist/lib/components/Button/Button.d.ts CHANGED
@@ -3,11 +3,14 @@ import './Button.less';
3
3
  export declare const ButtonTypes: {
4
4
  readonly PRIMARY: "primary";
5
5
  readonly OUTLINE: "outline";
6
+ readonly TEXT: "text";
6
7
  };
7
8
  declare type ButtonTypesType = typeof ButtonTypes[keyof typeof ButtonTypes];
8
9
  export declare const ButtonThemes: {
9
10
  readonly GREEN: "green";
11
+ readonly GREEN_SOFT: "green-soft";
10
12
  readonly PURPLE: "purple";
13
+ readonly PURPLE_SOFT: "purple-soft";
11
14
  readonly WHITE: "white";
12
15
  readonly BLACK: "black";
13
16
  };
package/dist/lib/components/Button/Button.js CHANGED
@@ -43,12 +43,15 @@ var Arrow = function Arrow(props) {
43
43
 
44
44
  var ButtonTypes = {
45
45
  PRIMARY: 'primary',
46
- OUTLINE: 'outline'
46
+ OUTLINE: 'outline',
47
+ TEXT: 'text'
47
48
  };
48
49
  exports.ButtonTypes = ButtonTypes;
49
50
  var ButtonThemes = {
50
51
  GREEN: 'green',
52
+ GREEN_SOFT: 'green-soft',
51
53
  PURPLE: 'purple',
54
+ PURPLE_SOFT: 'purple-soft',
52
55
  WHITE: 'white',
53
56
  BLACK: 'black'
54
57
  };
@@ -134,7 +137,7 @@ var Button = function Button(_ref) {
134
137
  }, [type, theme]);
135
138
 
136
139
  var loaderWhite = _react["default"].useMemo(function () {
137
- return type === ButtonTypes.PRIMARY && theme === ButtonThemes.GREEN || type === ButtonTypes.PRIMARY && theme === ButtonThemes.PURPLE || type === ButtonTypes.OUTLINE && theme === ButtonThemes.WHITE;
140
+ return type === ButtonTypes.PRIMARY && theme === ButtonThemes.GREEN || type === ButtonTypes.PRIMARY && theme === ButtonThemes.PURPLE || type === ButtonTypes.OUTLINE && theme === ButtonThemes.WHITE || type === ButtonTypes.TEXT && theme === ButtonThemes.WHITE;
138
141
  }, [type, theme]);
139
142
 
140
143
  var loaderColor = _react["default"].useMemo(function () {
@@ -157,7 +160,8 @@ var Button = function Button(_ref) {
157
160
 
158
161
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content), {
159
162
  className: cn('content', {
160
- ellipsis: ellipsis
163
+ ellipsis: ellipsis,
164
+ 'show-loader': showLoader
161
165
  }, contentClassName)
162
166
  }), icon && /*#__PURE__*/_react["default"].createElement("div", {
163
167
  className: cn('icon')
@@ -168,7 +172,7 @@ var Button = function Button(_ref) {
168
172
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children), !icon && showArrow && /*#__PURE__*/_react["default"].createElement(Arrow, (0, _extends2["default"])({
169
173
  className: cn('icon-arrow')
170
174
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow))));
171
- }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, contentClassName, showArrow]);
175
+ }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, showLoader, contentClassName, showArrow]);
172
176
 
173
177
  var contentType = _react["default"].useMemo(function () {
174
178
  switch (true) {
@@ -185,6 +189,7 @@ var Button = function Button(_ref) {
185
189
 
186
190
  var renderedLoader = _react["default"].useMemo(function () {
187
191
  return /*#__PURE__*/_react["default"].createElement(_Preloader["default"], {
192
+ className: cn('preloader'),
188
193
  dataAttrs: {
189
194
  root: (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader)
190
195
  },
@@ -244,7 +249,7 @@ var Button = function Button(_ref) {
244
249
  ref: buttonRef
245
250
  }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
246
251
  className: cn('inner', innerClassName)
247
- }), !showLoader ? renderedContent : renderedLoader));
252
+ }), renderedContent, showLoader && renderedLoader));
248
253
  };
249
254
 
250
255
  Button.propTypes = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "4.10.1",
3
+ "version": "4.11.0",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -54,7 +54,7 @@
54
54
  "@babel/preset-env": "^7.8.6",
55
55
  "@babel/preset-react": "^7.8.3",
56
56
  "@babel/preset-typescript": "^7.8.3",
57
- "@megafon/ui-icons": "^2.4.1",
57
+ "@megafon/ui-icons": "^2.4.2",
58
58
  "@svgr/core": "^2.4.1",
59
59
  "@testing-library/jest-dom": "5.16.2",
60
60
  "@testing-library/react": "12.1.2",
@@ -89,7 +89,7 @@
89
89
  "dependencies": {
90
90
  "@babel/runtime": "^7.8.4",
91
91
  "@datepicker-react/hooks": "^2.7.0",
92
- "@megafon/ui-helpers": "^2.3.1",
92
+ "@megafon/ui-helpers": "^2.4.0",
93
93
  "@popperjs/core": "^2.5.3",
94
94
  "core-js": "^3.6.4",
95
95
  "date-fns": "^2.16.1",
@@ -100,5 +100,5 @@
100
100
  "react-popper": "^2.2.3",
101
101
  "swiper": "^6.5.6"
102
102
  },
103
- "gitHead": "5ac03e3777f38f19028fd0a8bb71e1901e9f0df9"
103
+ "gitHead": "3fecd142b2a2dac4027b90855c8b6a933ae30d61"
104
104
  }
package/styles/colors.css CHANGED
@@ -20,7 +20,9 @@
20
20
  --systemBlue: #34AAF2;
21
21
  --background: #FFFFFF;
22
22
  --buttonHoverGreen: #10E272;
23
+ --buttonHoverGreenSoft: #B6FFDA;
23
24
  --buttonHoverPurple: #A500BF;
25
+ --buttonHoverPurpleSoft: #FFD9FF;
24
26
  --buttonHoverGrey: #D6D6D6;
25
27
  --buttonDown: #404D46;
26
28
  --overlay: #000000CC;
package/styles/colorsDark.css CHANGED
@@ -21,7 +21,9 @@
21
21
  --systemBlue: #34AAF2;
22
22
  --background: #1F1F1F;
23
23
  --buttonHoverGreen: #10E272;
24
+ --buttonHoverGreenSoft: #355A46;
24
25
  --buttonHoverPurple: #A500BF;
26
+ --buttonHoverPurpleSoft: #FFE1FF;
25
27
  --buttonHoverGrey: #D6D6D6;
26
28
  --buttonDown: #404D46;
27
29
  --overlay: #000000CC;