@megafon/ui-core 3.0.0-beta.0 → 3.0.0-beta.4

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 (92) hide show
  1. package/CHANGELOG.md +66 -0
  2. package/dist/es/colors/ColorItem/ColorItem.css +1 -55
  3. package/dist/es/colors/ColorItem/ColorItem.js +1 -1
  4. package/dist/es/colors/Colors.css +0 -55
  5. package/dist/es/colors/Colors.js +64 -4
  6. package/dist/es/colors/colorsData.js +78 -78
  7. package/dist/es/components/Accordion/Accordion.css +0 -54
  8. package/dist/es/components/Accordion/Accordion.d.ts +1 -1
  9. package/dist/es/components/Accordion/Accordion.js +10 -5
  10. package/dist/es/components/Banner/Banner.css +1 -55
  11. package/dist/es/components/Banner/BannerDot.css +0 -54
  12. package/dist/es/components/Button/Button.css +30 -78
  13. package/dist/es/components/Calendar/Calendar.css +0 -54
  14. package/dist/es/components/Calendar/components/Day/Day.css +1 -55
  15. package/dist/es/components/Calendar/components/Month/Month.css +0 -54
  16. package/dist/es/components/Calendar/components/Month/Month.js +21 -5
  17. package/dist/es/components/Carousel/Carousel.css +1 -55
  18. package/dist/es/components/Checkbox/Checkbox.css +3 -57
  19. package/dist/es/components/Checkbox/Checkbox.d.ts +3 -25
  20. package/dist/es/components/Checkbox/Checkbox.js +71 -89
  21. package/dist/es/components/ContentArea/ContentArea.css +4 -4
  22. package/dist/es/components/Grid/GridColumn.css +0 -54
  23. package/dist/es/components/Header/Header.css +2 -56
  24. package/dist/es/components/InputLabel/InputLabel.css +0 -54
  25. package/dist/es/components/List/List.css +2 -56
  26. package/dist/es/components/List/ListItem.css +0 -54
  27. package/dist/es/components/Logo/Logo.css +0 -54
  28. package/dist/es/components/NavArrow/NavArrow.css +1 -55
  29. package/dist/es/components/Notification/Notification.css +3 -3
  30. package/dist/es/components/Pagination/Pagination.css +0 -54
  31. package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.css +2 -2
  32. package/dist/es/components/Paragraph/Paragraph.css +2 -56
  33. package/dist/es/components/Preloader/Preloader.css +3 -57
  34. package/dist/es/components/RadioButton/RadioButton.css +1 -55
  35. package/dist/es/components/Search/Search.css +1 -55
  36. package/dist/es/components/Select/Select.css +2 -56
  37. package/dist/es/components/Select/Select.d.ts +1 -1
  38. package/dist/es/components/Switcher/Switcher.css +1 -55
  39. package/dist/es/components/Tabs/Tabs.css +10 -64
  40. package/dist/es/components/TextField/TextField.css +3 -57
  41. package/dist/es/components/TextLink/TextLink.css +1 -55
  42. package/dist/es/components/Tile/Tile.css +0 -54
  43. package/dist/es/components/Tooltip/Tooltip.css +0 -54
  44. package/dist/es/components/Tooltip/Tooltip.d.ts +3 -2
  45. package/dist/es/components/Tooltip/Tooltip.js +2 -9
  46. package/dist/lib/colors/ColorItem/ColorItem.css +1 -55
  47. package/dist/lib/colors/ColorItem/ColorItem.js +1 -1
  48. package/dist/lib/colors/Colors.css +0 -55
  49. package/dist/lib/colors/Colors.js +63 -4
  50. package/dist/lib/colors/colorsData.js +78 -78
  51. package/dist/lib/components/Accordion/Accordion.css +0 -54
  52. package/dist/lib/components/Accordion/Accordion.d.ts +1 -1
  53. package/dist/lib/components/Accordion/Accordion.js +9 -4
  54. package/dist/lib/components/Banner/Banner.css +1 -55
  55. package/dist/lib/components/Banner/BannerDot.css +0 -54
  56. package/dist/lib/components/Button/Button.css +30 -78
  57. package/dist/lib/components/Calendar/Calendar.css +0 -54
  58. package/dist/lib/components/Calendar/components/Day/Day.css +1 -55
  59. package/dist/lib/components/Calendar/components/Month/Month.css +0 -54
  60. package/dist/lib/components/Calendar/components/Month/Month.js +20 -4
  61. package/dist/lib/components/Carousel/Carousel.css +1 -55
  62. package/dist/lib/components/Checkbox/Checkbox.css +3 -57
  63. package/dist/lib/components/Checkbox/Checkbox.d.ts +3 -25
  64. package/dist/lib/components/Checkbox/Checkbox.js +76 -124
  65. package/dist/lib/components/ContentArea/ContentArea.css +4 -4
  66. package/dist/lib/components/Grid/GridColumn.css +0 -54
  67. package/dist/lib/components/Header/Header.css +2 -56
  68. package/dist/lib/components/InputLabel/InputLabel.css +0 -54
  69. package/dist/lib/components/List/List.css +2 -56
  70. package/dist/lib/components/List/ListItem.css +0 -54
  71. package/dist/lib/components/Logo/Logo.css +0 -54
  72. package/dist/lib/components/NavArrow/NavArrow.css +1 -55
  73. package/dist/lib/components/Notification/Notification.css +3 -3
  74. package/dist/lib/components/Pagination/Pagination.css +0 -54
  75. package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.css +2 -2
  76. package/dist/lib/components/Paragraph/Paragraph.css +2 -56
  77. package/dist/lib/components/Preloader/Preloader.css +3 -57
  78. package/dist/lib/components/RadioButton/RadioButton.css +1 -55
  79. package/dist/lib/components/Search/Search.css +1 -55
  80. package/dist/lib/components/Select/Select.css +2 -56
  81. package/dist/lib/components/Select/Select.d.ts +1 -1
  82. package/dist/lib/components/Switcher/Switcher.css +1 -55
  83. package/dist/lib/components/Tabs/Tabs.css +10 -64
  84. package/dist/lib/components/TextField/TextField.css +3 -57
  85. package/dist/lib/components/TextLink/TextLink.css +1 -55
  86. package/dist/lib/components/Tile/Tile.css +0 -54
  87. package/dist/lib/components/Tooltip/Tooltip.css +0 -54
  88. package/dist/lib/components/Tooltip/Tooltip.d.ts +3 -2
  89. package/dist/lib/components/Tooltip/Tooltip.js +1 -8
  90. package/package.json +4 -4
  91. package/{dist/es/styles → styles}/base.css +0 -0
  92. package/dist/lib/styles/base.css +0 -54
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-grid-column {
56
2
  -webkit-box-sizing: border-box;
57
3
  box-sizing: border-box;
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-header {
56
2
  font-family: inherit;
57
3
  font-weight: 400;
@@ -148,10 +94,10 @@ h5 {
148
94
  color: var(--stcBlack);
149
95
  }
150
96
  .mfui-header_color_green {
151
- color: var(--green);
97
+ color: var(--brandGreen);
152
98
  }
153
99
  .mfui-header_color_purple {
154
- color: var(--purple);
100
+ color: var(--brandPurple);
155
101
  }
156
102
  .mfui-header_color_white {
157
103
  color: var(--stcWhite);
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-input-label {
56
2
  display: block;
57
3
  margin-bottom: 4px;
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-list {
56
2
  font-family: inherit;
57
3
  font-size: 15px;
@@ -85,10 +31,10 @@ h5 {
85
31
  color: var(--spbSky2);
86
32
  }
87
33
  .mfui-list_color_green {
88
- color: var(--green);
34
+ color: var(--brandGreen);
89
35
  }
90
36
  .mfui-list_color_purple {
91
- color: var(--purple);
37
+ color: var(--brandPurple);
92
38
  }
93
39
  .mfui-list_color_red {
94
40
  color: var(--fury);
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-list-item {
56
2
  margin-bottom: 12px;
57
3
  }
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-logo {
56
2
  display: inline-block;
57
3
  vertical-align: top;
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-nav-arrow {
56
2
  -webkit-box-sizing: border-box;
57
3
  box-sizing: border-box;
@@ -79,7 +25,7 @@ h5 {
79
25
  fill: var(--stcWhite);
80
26
  }
81
27
  .mfui-nav-arrow_theme_purple {
82
- background-color: var(--purple);
28
+ background-color: var(--brandPurple);
83
29
  }
84
30
  .mfui-nav-arrow_theme_purple:hover:not(:disabled) {
85
31
  background-color: var(--buttonhoverPurple);
@@ -206,11 +206,11 @@ h5 {
206
206
  fill: var(--fury);
207
207
  }
208
208
  .mfui-notification_type_success .mfui-notification__icon-container {
209
- background-color: var(--green20);
209
+ background-color: var(--brandGreen20);
210
210
  }
211
211
  .mfui-notification_type_success .mfui-notification__icon-container svg {
212
212
  /* stylelint-disable-line max-nesting-depth */
213
- fill: var(--green);
213
+ fill: var(--brandGreen);
214
214
  }
215
215
  .mfui-notification_type_warning .mfui-notification__icon-container {
216
216
  background-color: var(--137C20);
@@ -254,7 +254,7 @@ h5 {
254
254
  fill: var(--stcWhite);
255
255
  }
256
256
  .mfui-notification_colored.mfui-notification_type_success {
257
- background-color: var(--green);
257
+ background-color: var(--brandGreen);
258
258
  }
259
259
  .mfui-notification_colored.mfui-notification_type_error {
260
260
  background-color: var(--fury80);
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-pagination {
56
2
  display: -webkit-box;
57
3
  display: -ms-flexbox;
@@ -80,7 +80,7 @@ h5 {
80
80
  pointer-events: none;
81
81
  }
82
82
  .mfui-pagination-button_active {
83
- border-color: var(--green);
83
+ border-color: var(--brandGreen);
84
84
  pointer-events: none;
85
85
  }
86
86
  .mfui-pagination-button_theme_default {
@@ -93,7 +93,7 @@ h5 {
93
93
  background-color: var(--spbSky0);
94
94
  }
95
95
  .mfui-pagination-button_theme_default.mfui-pagination-button_active {
96
- border-color: var(--green);
96
+ border-color: var(--brandGreen);
97
97
  }
98
98
  .mfui-pagination-button_theme_light {
99
99
  color: var(--stcWhite);
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-paragraph {
56
2
  font-family: inherit;
57
3
  margin: 0;
@@ -78,10 +24,10 @@ h5 {
78
24
  margin: 0 0 16px;
79
25
  }
80
26
  .mfui-paragraph_color_green {
81
- color: var(--green);
27
+ color: var(--brandGreen);
82
28
  }
83
29
  .mfui-paragraph_color_purple {
84
- color: var(--purple);
30
+ color: var(--brandPurple);
85
31
  }
86
32
  .mfui-paragraph_color_base,
87
33
  .mfui-paragraph_color_clearWhite {
@@ -1,57 +1,3 @@
1
- :root {
2
- --green: #00B956;
3
- --purple: #731982;
4
- --base: #FFFFFF;
5
- --content: #333333;
6
- --spbSky0: #F6F6F6;
7
- --spbSky1: #EDEDED;
8
- --spbSky2: #D8D8D8;
9
- --spbSky3: #999999;
10
- --warmRedC: #EB5A40;
11
- --137C: #FFA717;
12
- --311C: #5BD9E5;
13
- --reflexBlue: #444189;
14
- --fury: #F62434;
15
- --systemBlue: #34AAF2;
16
- --background: #FFFFFF;
17
- --buttonHoverGreen: #10E272;
18
- --buttonhoverPurple: #534455;
19
- --buttonDown: #404D46;
20
- --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
- --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
- --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
- --STCWhite: #FFFFFF;
24
- --STCBlack: #333333;
25
- --STCWhite5: #FFFFFF0D;
26
- --STCWhite10: #FFFFFF1A;
27
- --STCWhite20: #FFFFFF33;
28
- --STCWhite50: #FFFFFF80;
29
- --STCBlack5: #3333330D;
30
- --STCBlack10: #3333331A;
31
- --STCBlack20: #33333333;
32
- --STCBlack50: #33333380;
33
- --green80: #0CDC78;
34
- --green20: #DDFFEC;
35
- --purple80: #AA67C1;
36
- --purple20: #FFEEFF;
37
- --warmRedC80: #FF765D;
38
- --warmRedC20: #FFCFC7;
39
- --137C80: #FFB945;
40
- --137C20: #FFEDD1;
41
- --311C80: #62E3FF;
42
- --311C20: #E1FAFF;
43
- --reflexBlue80: #554FC9;
44
- --reflexBlue20: #EBEAFF;
45
- --fury80: #F8505D;
46
- --fury20: #FFC5C9;
47
- }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5 {
53
- margin: 0;
54
- }
55
1
  .mfui-preloader {
56
2
  display: -webkit-box;
57
3
  display: -ms-flexbox;
@@ -153,15 +99,15 @@ h5 {
153
99
  animation: scaling 1s linear infinite;
154
100
  }
155
101
  .mfui-preloader_color_default .mfui-preloader__item_first:before {
156
- background-color: var(--green);
102
+ background-color: var(--brandGreen);
157
103
  }
158
104
  .mfui-preloader_color_default .mfui-preloader__item_second:before {
159
- background-color: var(--green);
105
+ background-color: var(--brandGreen);
160
106
  -webkit-animation-delay: 0.166s;
161
107
  animation-delay: 0.166s;
162
108
  }
163
109
  .mfui-preloader_color_default .mfui-preloader__item_third:before {
164
- background-color: var(--purple);
110
+ background-color: var(--brandPurple);
165
111
  -webkit-animation-delay: 0.33s;
166
112
  animation-delay: 0.33s;
167
113
  }