@megafon/ui-shared 2.1.5 → 3.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/es/components/AccordionBox/AccordionBox.css +47 -0
  3. package/dist/es/components/BenefitsIcons/style/BenefitsIcons.css +47 -0
  4. package/dist/es/components/BenefitsIcons/style/BenefitsIconsTile.css +47 -0
  5. package/dist/es/components/BenefitsPictures/BenfitsPictures.css +47 -0
  6. package/dist/es/components/Breadcrumbs/Breadcrumbs.css +52 -2
  7. package/dist/es/components/Breadcrumbs/Breadcrumbs.d.ts +1 -0
  8. package/dist/es/components/Breadcrumbs/Breadcrumbs.js +2 -1
  9. package/dist/es/components/ButtonBanner/ButtonBanner.css +50 -3
  10. package/dist/es/components/ButtonLinkBox/ButtonLinkBox.css +47 -0
  11. package/dist/es/components/Card/Card.css +50 -3
  12. package/dist/es/components/Container/Container.css +52 -5
  13. package/dist/es/components/DownloadLinks/DownloadLink.css +49 -1
  14. package/dist/es/components/DownloadLinks/DownloadLinks.css +47 -0
  15. package/dist/es/components/Instructions/Instructions.css +54 -7
  16. package/dist/es/components/PageTitle/PageTitle.css +49 -2
  17. package/dist/es/components/Partners/Partners.css +47 -0
  18. package/dist/es/components/PictureWithDescription/PictureWithDescription.css +47 -0
  19. package/dist/es/components/Property/Property.css +52 -5
  20. package/dist/es/components/Property/PropertyDescription.css +50 -3
  21. package/dist/es/components/Steps/Steps.css +47 -0
  22. package/dist/es/components/Steps/StepsItem.css +49 -2
  23. package/dist/es/components/StoreBanner/StoreBanner.css +54 -7
  24. package/dist/es/components/Table/Table.css +62 -15
  25. package/dist/es/components/TextBox/TextBox.css +47 -0
  26. package/dist/es/components/TextBox/TextBoxPicture.css +48 -1
  27. package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.css +49 -2
  28. package/dist/es/components/VideoBanner/VideoBanner.css +51 -4
  29. package/dist/es/components/VideoBlock/VideoBlock.css +47 -0
  30. package/dist/lib/components/AccordionBox/AccordionBox.css +47 -0
  31. package/dist/lib/components/BenefitsIcons/style/BenefitsIcons.css +47 -0
  32. package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css +47 -0
  33. package/dist/lib/components/BenefitsPictures/BenfitsPictures.css +47 -0
  34. package/dist/lib/components/Breadcrumbs/Breadcrumbs.css +52 -2
  35. package/dist/lib/components/Breadcrumbs/Breadcrumbs.d.ts +1 -0
  36. package/dist/lib/components/Breadcrumbs/Breadcrumbs.js +2 -1
  37. package/dist/lib/components/ButtonBanner/ButtonBanner.css +50 -3
  38. package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.css +47 -0
  39. package/dist/lib/components/Card/Card.css +50 -3
  40. package/dist/lib/components/Container/Container.css +52 -5
  41. package/dist/lib/components/DownloadLinks/DownloadLink.css +49 -1
  42. package/dist/lib/components/DownloadLinks/DownloadLinks.css +47 -0
  43. package/dist/lib/components/Instructions/Instructions.css +54 -7
  44. package/dist/lib/components/PageTitle/PageTitle.css +49 -2
  45. package/dist/lib/components/Partners/Partners.css +47 -0
  46. package/dist/lib/components/PictureWithDescription/PictureWithDescription.css +47 -0
  47. package/dist/lib/components/Property/Property.css +52 -5
  48. package/dist/lib/components/Property/PropertyDescription.css +50 -3
  49. package/dist/lib/components/Steps/Steps.css +47 -0
  50. package/dist/lib/components/Steps/StepsItem.css +49 -2
  51. package/dist/lib/components/StoreBanner/StoreBanner.css +54 -7
  52. package/dist/lib/components/Table/Table.css +62 -15
  53. package/dist/lib/components/TextBox/TextBox.css +47 -0
  54. package/dist/lib/components/TextBox/TextBoxPicture.css +48 -1
  55. package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.css +49 -2
  56. package/dist/lib/components/VideoBanner/VideoBanner.css +51 -4
  57. package/dist/lib/components/VideoBlock/VideoBlock.css +47 -0
  58. package/package.json +5 -5
package/dist/es/components/Table/Table.css CHANGED
@@ -1,3 +1,50 @@
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
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
@@ -18,17 +65,17 @@ h5 {
18
65
  height: 8px;
19
66
  }
20
67
  .mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-track {
21
- background-color: #EDEDED;
68
+ background-color: var(--spbSky1);
22
69
  }
23
70
  .mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-thumb {
24
71
  border-radius: 4px;
25
- background-color: #D8D8D8;
72
+ background-color: var(--spbSky2);
26
73
  }
27
74
  .mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-corner {
28
- background-color: #FFFFFF;
75
+ background-color: var(--base);
29
76
  }
30
77
  .mfui-table:not(.mfui-table_touch) .mfui-table__scroll {
31
- scrollbar-color: #D8D8D8 #EDEDED;
78
+ scrollbar-color: var(--spbSky2) var(--spbSky1);
32
79
  scrollbar-width: thin;
33
80
  }
34
81
  .mfui-table__scroll {
@@ -36,7 +83,7 @@ h5 {
36
83
  display: grid;
37
84
  grid-template-columns: auto auto auto;
38
85
  max-width: 100%;
39
- border: 1px solid #D8D8D8;
86
+ border: 1px solid var(--spbSky2);
40
87
  overflow: auto;
41
88
  }
42
89
  @media screen and (min-width: 1024px) {
@@ -80,8 +127,8 @@ h5 {
80
127
  width: 100%;
81
128
  height: 48px;
82
129
  margin-top: -48px;
83
- background: -webkit-gradient(linear, left bottom, left top, color-stop(25%, #FFFFFF), to(rgba(255, 255, 255, 0)));
84
- background: linear-gradient(to top, #FFFFFF 25%, rgba(255, 255, 255, 0));
130
+ background: -webkit-gradient(linear, left bottom, left top, color-stop(25%, var(--base)), to(rgba(255, 255, 255, 0)));
131
+ background: linear-gradient(to top, var(--base) 25%, rgba(255, 255, 255, 0));
85
132
  }
86
133
  .mfui-table__right-gradient {
87
134
  position: -webkit-sticky;
@@ -92,20 +139,20 @@ h5 {
92
139
  width: 48px;
93
140
  height: 100%;
94
141
  margin-left: -48px;
95
- background: -webkit-gradient(linear, right top, left top, color-stop(25%, #FFFFFF), to(rgba(255, 255, 255, 0)));
96
- background: linear-gradient(to left, #FFFFFF 25%, rgba(255, 255, 255, 0));
142
+ background: -webkit-gradient(linear, right top, left top, color-stop(25%, var(--base)), to(rgba(255, 255, 255, 0)));
143
+ background: linear-gradient(to left, var(--base) 25%, rgba(255, 255, 255, 0));
97
144
  }
98
145
  .mfui-table__table {
99
146
  border-width: 0;
100
147
  border-collapse: separate;
101
148
  border-spacing: 0;
102
- background-color: #FFFFFF;
149
+ background-color: var(--base);
103
150
  }
104
151
  .mfui-table__cell {
105
152
  -webkit-box-sizing: border-box;
106
153
  box-sizing: border-box;
107
154
  padding: 24px;
108
- background-color: #FFFFFF;
155
+ background-color: var(--base);
109
156
  }
110
157
  @media screen and (max-width: 767px) {
111
158
  .mfui-table__cell {
@@ -118,7 +165,7 @@ h5 {
118
165
  left: 0;
119
166
  width: 144px;
120
167
  min-width: 144px;
121
- border-right: 1px solid #D8D8D8;
168
+ border-right: 1px solid var(--spbSky2);
122
169
  }
123
170
  .mfui-table__cell:not(:first-child) {
124
171
  max-width: 288px;
@@ -128,12 +175,12 @@ h5 {
128
175
  line-height: 16px;
129
176
  height: 72px;
130
177
  padding-bottom: 12px;
131
- color: #33333380;
178
+ color: var(--stcBlack5);
132
179
  vertical-align: bottom;
133
- background-color: #F6F6F6;
180
+ background-color: var(--spbSky0);
134
181
  }
135
182
  .mfui-table__row:not(:last-child) .mfui-table__cell {
136
- border-bottom: 1px solid #D8D8D8;
183
+ border-bottom: 1px solid var(--spbSky2);
137
184
  }
138
185
  .mfui-table_min-cell-size_small .mfui-table__cell:not(:first-child) {
139
186
  min-width: 72px;
package/dist/es/components/TextBox/TextBox.css CHANGED
@@ -1,3 +1,50 @@
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
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
package/dist/es/components/TextBox/TextBoxPicture.css CHANGED
@@ -1,3 +1,50 @@
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
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
@@ -20,5 +67,5 @@ h5 {
20
67
  .mfui-text-box-picture__img {
21
68
  display: block;
22
69
  max-width: 100%;
23
- border: 1px solid #EDEDED;
70
+ border: 1px solid var(--spbSky1);
24
71
  }
package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.css CHANGED
@@ -1,3 +1,50 @@
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
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
@@ -7,7 +54,7 @@ h5 {
7
54
  }
8
55
  .mfui-title-description-box {
9
56
  font-family: inherit;
10
- color: #333333;
57
+ color: var(--content);
11
58
  }
12
59
  .mfui-title-description-box__item_header {
13
60
  white-space: pre-wrap;
@@ -16,7 +63,7 @@ h5 {
16
63
  margin-bottom: 16px;
17
64
  }
18
65
  .mfui-title-description-box_text-color_white {
19
- color: #FFFFFF;
66
+ color: var(--stcWhite);
20
67
  }
21
68
  .mfui-title-description-box_h-align_center {
22
69
  text-align: center;
package/dist/es/components/VideoBanner/VideoBanner.css CHANGED
@@ -1,3 +1,50 @@
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
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
@@ -119,19 +166,19 @@ h5 {
119
166
  }
120
167
  }
121
168
  .mfui-video-banner__content_text-color_black {
122
- color: #333333;
169
+ color: var(--stcBlack);
123
170
  }
124
171
  .mfui-video-banner__content_text-color_white {
125
- color: #FFFFFF;
172
+ color: var(--stcWhite);
126
173
  }
127
174
  @media screen and (max-width: 767px) {
128
175
  .mfui-video-banner__content_text-color-mobile_black {
129
- color: #333333;
176
+ color: var(--stcBlack);
130
177
  }
131
178
  }
132
179
  @media screen and (max-width: 767px) {
133
180
  .mfui-video-banner__content_text-color-mobile_white {
134
- color: #FFFFFF;
181
+ color: var(--stcWhite);
135
182
  }
136
183
  }
137
184
  .mfui-video-banner__description {
package/dist/es/components/VideoBlock/VideoBlock.css CHANGED
@@ -1,3 +1,50 @@
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
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
package/dist/lib/components/AccordionBox/AccordionBox.css CHANGED
@@ -1,3 +1,50 @@
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
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
package/dist/lib/components/BenefitsIcons/style/BenefitsIcons.css CHANGED
@@ -1,3 +1,50 @@
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
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css CHANGED
@@ -1,3 +1,50 @@
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
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
package/dist/lib/components/BenefitsPictures/BenfitsPictures.css CHANGED
@@ -1,3 +1,50 @@
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
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,