@salutejs/plasma-new-hope 0.70.0-canary.1165.8553999945.0 → 0.70.0-canary.1165.8557914656.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. package/package.json +4 -4
  2. package/styled-components/cjs/examples/themes/plasma_b2c.module.css +878 -293
  3. package/styled-components/cjs/examples/themes/plasma_web.module.css +878 -293
  4. package/styled-components/cjs/examples/themes/sds_engineer.module.css +42 -2
  5. package/styled-components/es/examples/themes/plasma_b2c.module.css +878 -293
  6. package/styled-components/es/examples/themes/plasma_web.module.css +878 -293
  7. package/styled-components/es/examples/themes/sds_engineer.module.css +42 -2
package/styled-components/es/examples/themes/plasma_web.module.css CHANGED
@@ -1,188 +1,263 @@
1
1
  /* Generated by robots, do not change this manually! */
2
2
 
3
3
  .dark {
4
- --overlay-soft: rgba(8, 8, 8, 0.56);
5
- --overlay-hard: rgba(8, 8, 8, 0.96);
6
- --overlay-blur: rgba(8, 8, 8, 0.28);
7
- --on-dark-overlay-soft: rgba(8, 8, 8, 0.56);
8
- --on-dark-overlay-hard: rgba(8, 8, 8, 0.96);
9
- --on-dark-overlay-blur: rgba(8, 8, 8, 0.28);
10
- --on-light-overlay-soft: rgba(249, 249, 249, 0.56);
11
- --on-light-overlay-hard: rgba(249, 249, 249, 0.96);
12
- --on-light-overlay-blur: rgba(249, 249, 249, 0.28);
4
+ --text-primary-hover: #FFFFFF93;
5
+ --text-primary-active: #FFFFFFC4;
13
6
  --text-primary: rgba(255, 255, 255, 0.96);
14
- /* добавлены вручную */
15
- --text-primary-hover: rgba(255, 255, 255, 0.58);
16
- --text-primary-active: rgba(255, 255, 255, 0.77);
17
- /* добавлены вручную */
7
+ --text-secondary-hover: #FFFFFFFF;
8
+ --text-secondary-active: #FFFFFFAB;
18
9
  --text-secondary: rgba(255, 255, 255, 0.56);
19
- /* добавлены вручную */
20
- --text-secondary-hover: rgba(255, 255, 255, 1);
21
- --text-secondary-active: rgba(255, 255, 255, 0.78);
22
- /* добавлены вручную */
10
+ --text-tertiary-hover: #FFFFFFFF;
11
+ --text-tertiary-active: #FFFFFF56;
23
12
  --text-tertiary: rgba(255, 255, 255, 0.28);
24
- /* добавлены вручную */
25
- --text-tertiary-hover: rgba(255, 255, 255, 1);
26
- --text-tertiary-active: rgba(255, 255, 255, 0.64);
27
- /* добавлены вручную */
13
+ --text-paragraph-hover: #FFFFFF7A;
14
+ --text-paragraph-active: #FFFFFFA3;
28
15
  --text-paragraph: rgba(255, 255, 255, 0.8);
29
- /* добавлены вручную */
30
- --text-paragraph-hover: rgba(255, 255, 255, 0.48);
31
- --text-paragraph-active: rgba(255, 255, 255, 0.64);
32
- /* добавлены вручную */
33
- --text-accent: rgba(63, 129, 253, 1);
34
- /* добавлены вручную */
35
- --text-accent-hover: rgba(93, 149, 253, 1);
36
- --text-accent-active: rgba(33, 110, 253, 1);
37
- /* добавлены вручную */
16
+ --text-accent-hover: #90B6FEFF;
17
+ --text-accent-active: #216EFDFF;
18
+ --text-accent: #3F81FD;
19
+ --text-accent-gradient-hover: #CCCCCCFF;
20
+ --text-accent-gradient-active: #E6E6E6FF;
38
21
  --text-accent-gradient: linear-gradient(89.83deg, #5E94FF 0%, #43DBFA 100%);
39
- --text-positive: rgba(26, 158, 50, 1);
40
- /* добавлены вручную */
41
- --text-positive-hover: rgba(30, 184, 58, 1);
42
- --text-positive-active: rgba(21, 132, 42, 1);
43
- /* добавлены вручную */
44
- --text-warning: rgba(250, 95, 5, 1);
45
- /* добавлены вручную */
46
- --text-warning-hover: rgba(251, 114, 35, 1);
47
- --text-warning-active: rgba(220, 83, 4, 1);
48
- /* добавлены вручную */
49
- --text-negative: rgba(255, 41, 62, 1);
50
- /* добавлены вручную */
51
- --text-negative-hover: rgba(255, 71, 90, 1);
52
- --text-negative-active: rgba(255, 10, 35, 1);
53
- /* добавлены вручную */
22
+ --text-positive-hover: #1EB83AFF;
23
+ --text-positive-active: #15842AFF;
24
+ --text-positive: #1A9E32;
25
+ --text-warning-hover: #FB7223FF;
26
+ --text-warning-active: #DC5304FF;
27
+ --text-warning: #FA5F05;
28
+ --text-negative-hover: #FF475AFF;
29
+ --text-negative-active: #FF0A23FF;
30
+ --text-negative: #FF293E;
31
+ --on-dark-text-primary-hover: #FFFFFF93;
32
+ --on-dark-text-primary-active: #FFFFFFC4;
54
33
  --on-dark-text-primary: rgba(255, 255, 255, 0.96);
34
+ --on-dark-text-secondary-hover: #FFFFFFFF;
35
+ --on-dark-text-secondary-active: #FFFFFFAB;
55
36
  --on-dark-text-secondary: rgba(255, 255, 255, 0.56);
37
+ --on-dark-text-tertiary-hover: #FFFFFFFF;
38
+ --on-dark-text-tertiary-active: #FFFFFF56;
56
39
  --on-dark-text-tertiary: rgba(255, 255, 255, 0.28);
40
+ --on-dark-text-paragraph-hover: #FFFFFF7A;
41
+ --on-dark-text-paragraph-active: #FFFFFFA3;
57
42
  --on-dark-text-paragraph: rgba(255, 255, 255, 0.8);
58
- --on-dark-text-accent: rgba(63, 129, 253, 1);
43
+ --on-dark-text-accent-hover: #90B6FEFF;
44
+ --on-dark-text-accent-active: #216EFDFF;
45
+ --on-dark-text-accent: #3F81FD;
46
+ --on-dark-text-accent-gradient-hover: #CCCCCCFF;
47
+ --on-dark-text-accent-gradient-active: #E6E6E6FF;
59
48
  --on-dark-text-accent-gradient: linear-gradient(89.83deg, #5E94FF 0%, #43DBFA 100%);
60
- --on-dark-text-positive: rgba(26, 158, 50, 1);
61
- --on-dark-text-warning: rgba(250, 95, 5, 1);
62
- --on-dark-text-negative: rgba(255, 41, 62, 1);
49
+ --on-dark-text-positive-hover: #1EB83AFF;
50
+ --on-dark-text-positive-active: #15842AFF;
51
+ --on-dark-text-positive: #1A9E32;
52
+ --on-dark-text-warning-hover: #FB7223FF;
53
+ --on-dark-text-warning-active: #DC5304FF;
54
+ --on-dark-text-warning: #FA5F05;
55
+ --on-dark-text-negative-hover: #FF475AFF;
56
+ --on-dark-text-negative-active: #FF0A23FF;
57
+ --on-dark-text-negative: #FF293E;
58
+ --on-light-text-primary-hover: #08080893;
59
+ --on-light-text-primary-active: #080808C4;
63
60
  --on-light-text-primary: rgba(8, 8, 8, 0.96);
61
+ --on-light-text-secondary-hover: #080808FF;
62
+ --on-light-text-secondary-active: #080808AB;
64
63
  --on-light-text-secondary: rgba(8, 8, 8, 0.56);
64
+ --on-light-text-tertiary-hover: #080808FF;
65
+ --on-light-text-tertiary-active: #08080856;
65
66
  --on-light-text-tertiary: rgba(8, 8, 8, 0.28);
67
+ --on-light-text-paragraph-hover: #0808087A;
68
+ --on-light-text-paragraph-active: #080808A3;
66
69
  --on-light-text-paragraph: rgba(8, 8, 8, 0.8);
67
- --on-light-text-accent: rgba(42, 114, 248, 1);
70
+ --on-light-text-accent-hover: #79A7FBFF;
71
+ --on-light-text-accent-active: #0D5FF8FF;
72
+ --on-light-text-accent: #2A72F8;
73
+ --on-light-text-accent-gradient-hover: #CCCCCCFF;
74
+ --on-light-text-accent-gradient-active: #E6E6E6FF;
68
75
  --on-light-text-accent-gradient: linear-gradient(93.97deg, #3E79F0 6.49%, #27C6E5 93.51%);
69
- --on-light-text-positive: rgba(26, 158, 50, 1);
70
- --on-light-text-warning: rgba(250, 95, 5, 1);
71
- --on-light-text-negative: rgba(243, 27, 49, 1);
76
+ --on-light-text-positive-hover: #1EB83AFF;
77
+ --on-light-text-positive-active: #15842AFF;
78
+ --on-light-text-positive: #1A9E32;
79
+ --on-light-text-warning-hover: #FB7223FF;
80
+ --on-light-text-warning-active: #DC5304FF;
81
+ --on-light-text-warning: #FA5F05;
82
+ --on-light-text-negative-hover: #F5384BFF;
83
+ --on-light-text-negative-active: #E40C22FF;
84
+ --on-light-text-negative: #F31B31;
85
+ --inverse-text-primary-hover: #08080893;
86
+ --inverse-text-primary-active: #080808C4;
72
87
  --inverse-text-primary: rgba(8, 8, 8, 0.96);
88
+ --inverse-text-secondary-hover: #080808FF;
89
+ --inverse-text-secondary-active: #080808AB;
73
90
  --inverse-text-secondary: rgba(8, 8, 8, 0.56);
91
+ --inverse-text-tertiary-hover: #080808FF;
92
+ --inverse-text-tertiary-active: #08080856;
74
93
  --inverse-text-tertiary: rgba(8, 8, 8, 0.28);
94
+ --inverse-text-paragraph-hover: #0808087A;
95
+ --inverse-text-paragraph-active: #080808A3;
75
96
  --inverse-text-paragraph: rgba(8, 8, 8, 0.8);
97
+ --surface-solid-primary-hover: #1C1C1CFF;
98
+ --surface-solid-primary-active: #121212FF;
99
+ --surface-solid-primary: #171717;
100
+ --surface-solid-secondary-hover: #303030FF;
101
+ --surface-solid-secondary-active: #212121FF;
102
+ --surface-solid-secondary: #262626;
103
+ --surface-solid-tertiary-hover: #404040FF;
104
+ --surface-solid-tertiary-active: #303030FF;
105
+ --surface-solid-tertiary: #363636;
106
+ --surface-solid-card-hover: #1C1C1CFF;
107
+ --surface-solid-card-active: #121212FF;
108
+ --surface-solid-card: #171717;
109
+ --surface-solid-default-hover: #FFFFFFFF;
110
+ --surface-solid-default-active: #FFFFFFFF;
76
111
  --surface-solid-default: rgba(255, 255, 255, 1);
77
- --surface-solid-primary: rgba(23, 23, 23, 1);
78
- --surface-solid-secondary: rgba(38, 38, 38, 1);
79
- --surface-solid-tertiary: rgba(54, 54, 54, 1);
80
- --surface-solid-card: rgba(23, 23, 23, 1);
112
+ --surface-transparent-primary-hover: #FFFFFF1F;
113
+ --surface-transparent-primary-active: #FFFFFF0A;
81
114
  --surface-transparent-primary: rgba(255, 255, 255, 0.06);
82
- /* добавлены вручную */
83
- --surface-transparent-primary-hover: rgba(255, 255, 255, 0.08);
84
- --surface-transparent-primary-active: rgba(255, 255, 255, 0.04);
85
- /* добавлены вручную */
115
+ --surface-transparent-secondary-hover: #FFFFFF3D;
116
+ --surface-transparent-secondary-active: #FFFFFF0F;
86
117
  --surface-transparent-secondary: rgba(255, 255, 255, 0.12);
87
- /* добавлены вручную */
88
- --surface-transparent-secondary-hover: rgba(255, 255, 255, 0.16);
89
- --surface-transparent-secondary-active: rgba(255, 255, 255, 0.10);
90
- /* добавлены вручную */
118
+ --surface-transparent-tertiary-hover: #FFFFFF52;
119
+ --surface-transparent-tertiary-active: #FFFFFF24;
91
120
  --surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
92
- /* добавлены вручную */
93
- --surface-transparent-tertiary-hover: rgba(255, 255, 255, 0.24);
94
- --surface-transparent-tertiary-active: rgba(255, 255, 255, 0.18);
95
- /* добавлены вручную */
121
+ --surface-transparent-deep-hover: #FFFFFFC2;
122
+ --surface-transparent-deep-active: #FFFFFF94;
123
+ --surface-transparent-deep: rgba(255, 255, 255, 0.64);
124
+ --surface-transparent-card-hover: #FFFFFF3D;
125
+ --surface-transparent-card-active: #FFFFFF0F;
96
126
  --surface-transparent-card: rgba(255, 255, 255, 0.12);
97
- --surface-accent: rgba(63, 129, 253, 1);
98
- --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0 6.49%, #27C6E5 93.51%), linear-gradient(89.83deg, #5E94FF 0%, #43DBFA 100%);
99
- --surface-positive: rgba(26, 158, 50, 1);
100
- --surface-warning: rgba(250, 95, 5, 1);
101
- --surface-negative: rgba(255, 41, 62, 1);
127
+ --surface-clear-hover: #FFFFFF00;
128
+ --surface-clear-active: #FFFFFF00;
102
129
  --surface-clear: rgba(255, 255, 255, 0);
103
- --surface-transparent-deep: rgba(255, 255, 255, 0.64);
104
- /* добавлены вручную */
105
- --surface-transparent-accent: rgba(63, 129, 253, 0.12);
106
- --surface-transparent-accent-hover: rgba(63, 129, 253, 0.16);
107
- --surface-transparent-accent-active: rgba(63, 129, 253, 0.10);
108
- --surface-transparent-positive: rgba(26, 158, 50, 0.12);
109
- --surface-transparent-positive-hover: rgba(26, 158, 50, 0.16);
110
- --surface-transparent-positive-active: rgba(26, 158, 50, 0.10);
111
- --surface-transparent-warning: rgba(250, 95, 5, 0.12);
112
- --surface-transparent-warning-hover: rgba(250, 95, 5, 0.16);
113
- --surface-transparent-warning-active: rgba(250, 95, 5, 0.10);
114
- --surface-transparent-negative: rgba(255, 41, 62, 0.12);
115
- --surface-transparent-negative-hover: rgba(255, 41, 62, 0.16);
116
- --surface-transparent-negative-active: rgba(255, 41, 62, 0.10);
117
- /* добавлены вручную */
130
+ --surface-accent-hover: #5D95FDFF;
131
+ --surface-accent-active: #357BFDFF;
132
+ --surface-accent: #3F81FD;
133
+ --surface-accent-gradient-hover: #FFFFFFFF;
134
+ --surface-accent-gradient-active: #FFFFFFFF;
135
+ --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0 6.49%, #27C6E5 93.51%), linear-gradient(89.83deg, #5E94FF 0%, #43DBFA 100%);
136
+ --surface-transparent-accent-hover: #3F82FD3D;
137
+ --surface-transparent-accent-active: #3F82FD0F;
138
+ --surface-positive-hover: #1DAF37FF;
139
+ --surface-positive-active: #18952FFF;
140
+ --surface-positive: #1A9E32;
141
+ --surface-warning-hover: #FB7223FF;
142
+ --surface-warning-active: #F05B05FF;
143
+ --surface-warning: #FA5F05;
144
+ --surface-negative-hover: #FF475AFF;
145
+ --surface-negative-active: #FF1F35FF;
146
+ --surface-negative: #FF293E;
147
+ --surface-transparent-positive-hover: #1A9E323D;
148
+ --surface-transparent-positive-active: #1A9E320F;
149
+ --surface-transparent-warning-hover: #FA5F053D;
150
+ --surface-transparent-warning-active: #FA5F050F;
151
+ --surface-transparent-negative-hover: #FF293E3D;
152
+ --surface-transparent-negative-active: #FF293E0F;
153
+ --surface-transparent-accent: rgba(63,129,253,0.12);
154
+ --surface-transparent-positive: rgba(26,158,50,0.12);
155
+ --surface-transparent-warning: rgba(250,95,5,0.12);
156
+ --surface-transparent-negative: rgba(255,41,62,0.12);
157
+ --on-dark-surface-solid-primary-hover: #1C1C1CFF;
158
+ --on-dark-surface-solid-primary-active: #121212FF;
159
+ --on-dark-surface-solid-primary: #171717;
160
+ --on-dark-surface-solid-secondary-hover: #303030FF;
161
+ --on-dark-surface-solid-secondary-active: #212121FF;
162
+ --on-dark-surface-solid-secondary: #262626;
163
+ --on-dark-surface-solid-tertiary-hover: #404040FF;
164
+ --on-dark-surface-solid-tertiary-active: #303030FF;
165
+ --on-dark-surface-solid-tertiary: #363636;
166
+ --on-dark-surface-solid-card-hover: #1C1C1CFF;
167
+ --on-dark-surface-solid-card-active: #121212FF;
168
+ --on-dark-surface-solid-card: #171717;
169
+ --on-dark-surface-solid-default-hover: #FFFFFFFF;
170
+ --on-dark-surface-solid-default-active: #FFFFFFFF;
118
171
  --on-dark-surface-solid-default: rgba(255, 255, 255, 1);
119
- --on-dark-surface-solid-primary: rgba(23, 23, 23, 1);
120
- --on-dark-surface-solid-secondary: rgba(38, 38, 38, 1);
121
- --on-dark-surface-solid-tertiary: rgba(54, 54, 54, 1);
122
- --on-dark-surface-solid-card: rgba(23, 23, 23, 1);
172
+ --on-dark-surface-transparent-primary-hover: #FFFFFF1F;
173
+ --on-dark-surface-transparent-primary-active: #FFFFFF0A;
123
174
  --on-dark-surface-transparent-primary: rgba(255, 255, 255, 0.06);
175
+ --on-dark-surface-transparent-secondary-hover: #FFFFFF3D;
176
+ --on-dark-surface-transparent-secondary-active: #FFFFFF0F;
124
177
  --on-dark-surface-transparent-secondary: rgba(255, 255, 255, 0.12);
178
+ --on-dark-surface-transparent-tertiary-hover: #FFFFFF52;
179
+ --on-dark-surface-transparent-tertiary-active: #FFFFFF24;
125
180
  --on-dark-surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
181
+ --on-dark-surface-transparent-deep-hover: #FFFFFFC2;
182
+ --on-dark-surface-transparent-deep-active: #FFFFFF94;
183
+ --on-dark-surface-transparent-deep: rgba(255, 255, 255, 0.64);
184
+ --on-dark-surface-transparent-card-hover: #FFFFFF3D;
185
+ --on-dark-surface-transparent-card-active: #FFFFFF0F;
126
186
  --on-dark-surface-transparent-card: rgba(255, 255, 255, 0.12);
127
- --on-dark-surface-accent: rgba(63, 129, 253, 1);
187
+ --on-dark-surface-accent-hover: #5D95FDFF;
188
+ --on-dark-surface-accent-active: #357BFDFF;
189
+ --on-dark-surface-accent: #3F81FD;
190
+ --on-dark-surface-accent-gradient-hover: #FFFFFFFF;
191
+ --on-dark-surface-accent-gradient-active: #FFFFFFFF;
128
192
  --on-dark-surface-accent-gradient: linear-gradient(93.97deg, #3E79F0 6.49%, #27C6E5 93.51%);
129
- --on-dark-surface-positive: rgba(26, 158, 50, 1);
130
- --on-dark-surface-warning: rgba(250, 95, 5, 1);
131
- --on-dark-surface-negative: rgba(255, 41, 62, 1);
132
- --on-dark-surface-transparent-deep: rgba(255, 255, 255, 0.64);
133
- --on-light-surface-solid-default: rgba(8, 8, 8, 1);
134
- --on-light-surface-solid-primary: rgba(245, 245, 245, 1);
135
- --on-light-surface-solid-secondary: rgba(236, 236, 236, 1);
136
- --on-light-surface-solid-tertiary: rgba(221, 221, 221, 1);
193
+ --on-dark-surface-positive-hover: #1DAF37FF;
194
+ --on-dark-surface-positive-active: #18952FFF;
195
+ --on-dark-surface-positive: #1A9E32;
196
+ --on-dark-surface-warning-hover: #FB7223FF;
197
+ --on-dark-surface-warning-active: #F05B05FF;
198
+ --on-dark-surface-warning: #FA5F05;
199
+ --on-dark-surface-negative-hover: #FF475AFF;
200
+ --on-dark-surface-negative-active: #FF1F35FF;
201
+ --on-dark-surface-negative: #FF293E;
202
+ --on-light-surface-solid-primary-hover: #FAFAFAFF;
203
+ --on-light-surface-solid-primary-active: #F0F0F0FF;
204
+ --on-light-surface-solid-primary: #F5F5F5;
205
+ --on-light-surface-solid-secondary-hover: #F7F7F7FF;
206
+ --on-light-surface-solid-secondary-active: #E8E8E8FF;
207
+ --on-light-surface-solid-secondary: #ECECEC;
208
+ --on-light-surface-solid-tertiary-hover: #E8E8E8FF;
209
+ --on-light-surface-solid-tertiary-active: #D9D9D9FF;
210
+ --on-light-surface-solid-tertiary: #DDDDDD;
211
+ --on-light-surface-solid-card-hover: #FFFFFFFF;
212
+ --on-light-surface-solid-card-active: #FFFFFFFF;
137
213
  --on-light-surface-solid-card: rgba(255, 255, 255, 1);
214
+ --on-light-surface-solid-default-hover: #0D0D0DFF;
215
+ --on-light-surface-solid-default-active: #030303FF;
216
+ --on-light-surface-solid-default: #080808;
217
+ --on-light-surface-transparent-primary-hover: #08080812;
218
+ --on-light-surface-transparent-primary-active: #08080803;
138
219
  --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.03);
220
+ --on-light-surface-transparent-secondary-hover: #0808081F;
221
+ --on-light-surface-transparent-secondary-active: #0808080A;
139
222
  --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06);
223
+ --on-light-surface-transparent-tertiary-hover: #0808083D;
224
+ --on-light-surface-transparent-tertiary-active: #0808080F;
140
225
  --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
226
+ --on-light-surface-transparent-deep-hover: #080808C2;
227
+ --on-light-surface-transparent-deep-active: #08080894;
228
+ --on-light-surface-transparent-deep: rgba(8, 8, 8, 0.64);
229
+ --on-light-surface-transparent-card-hover: #FFFFFFFF;
230
+ --on-light-surface-transparent-card-active: #FFFFFFFF;
141
231
  --on-light-surface-transparent-card: rgba(255, 255, 255, 1);
142
- --on-light-surface-accent: rgba(42, 114, 248, 1);
232
+ --on-light-surface-accent-hover: #4886F9FF;
233
+ --on-light-surface-accent-active: #206CF8FF;
234
+ --on-light-surface-accent: #2A72F8;
235
+ --on-light-surface-accent-gradient-hover: #FFFFFFFF;
236
+ --on-light-surface-accent-gradient-active: #FFFFFFFF;
143
237
  --on-light-surface-accent-gradient: linear-gradient(93.97deg, #3E79F0 6.49%, #27C6E5 93.51%);
144
- --on-light-surface-positive: rgba(26, 158, 50, 1);
145
- --on-light-surface-warning: rgba(250, 95, 5, 1);
146
- --on-light-surface-negative: rgba(243, 27, 49, 1);
147
- --on-light-surface-transparent-deep: rgba(8, 8, 8, 0.64);
148
- --background-primary: rgba(8, 8, 8, 1);
149
- --dark-background-primary: rgba(8, 8, 8, 1);
150
- --light-background-primary: rgba(249, 249, 249, 1);
238
+ --on-light-surface-positive-hover: #1DAF37FF;
239
+ --on-light-surface-positive-active: #18952FFF;
240
+ --on-light-surface-positive: #1A9E32;
241
+ --on-light-surface-warning-hover: #FB7223FF;
242
+ --on-light-surface-warning-active: #F05B05FF;
243
+ --on-light-surface-warning: #FA5F05;
244
+ --on-light-surface-negative-hover: #F5384BFF;
245
+ --on-light-surface-negative-active: #F31228FF;
246
+ --on-light-surface-negative: #F31B31;
247
+ --background-primary: #080808;
248
+ --dark-background-primary: #080808;
249
+ --light-background-primary: #F9F9F9;
250
+ --overlay-soft: rgba(8, 8, 8, 0.56);
251
+ --overlay-hard: rgba(8, 8, 8, 0.96);
252
+ --overlay-blur: rgba(8, 8, 8, 0.28);
253
+ --on-dark-overlay-soft: rgba(8, 8, 8, 0.56);
254
+ --on-dark-overlay-hard: rgba(8, 8, 8, 0.96);
255
+ --on-dark-overlay-blur: rgba(8, 8, 8, 0.28);
256
+ --on-light-overlay-soft: rgba(249, 249, 249, 0.56);
257
+ --on-light-overlay-hard: rgba(249, 249, 249, 0.96);
258
+ --on-light-overlay-blur: rgba(249, 249, 249, 0.28);
151
259
  --skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% );
152
260
  --skeleton-gradient-lighter: linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% );
153
- --plasma-colors-white-primary: rgba(255, 255, 255, 0.96);
154
- --plasma-colors-white-secondary: rgba(255, 255, 255, 0.56);
155
- --plasma-colors-white-tertiary: rgba(255, 255, 255, 0.28);
156
- --plasma-colors-black-primary: rgba(8, 8, 8, 0.96);
157
- --plasma-colors-black-secondary: rgba(8, 8, 8, 0.56);
158
- --plasma-colors-black-tertiary: rgba(8, 8, 8, 0.28);
159
- --plasma-colors-button-black: rgba(8, 8, 8, 1);
160
- --plasma-colors-button-black-secondary: rgba(8, 8, 8, 0.06);
161
- --plasma-colors-button-white: rgba(255, 255, 255, 1);
162
- --plasma-colors-button-white-secondary: rgba(255, 255, 255, 0.12);
163
- --plasma-colors-text: rgba(255, 255, 255, 0.96);
164
- --plasma-colors-primary: rgba(255, 255, 255, 0.96);
165
- --plasma-colors-secondary: rgba(255, 255, 255, 0.56);
166
- --plasma-colors-tertiary: rgba(255, 255, 255, 0.28);
167
- --plasma-colors-paragraph: rgba(255, 255, 255, 0.8);
168
- --plasma-colors-background: rgba(8, 8, 8, 1);
169
- --plasma-colors-accent: rgba(63, 129, 253, 1);
170
- --plasma-colors-success: rgba(26, 158, 50, 1);
171
- --plasma-colors-warning: rgba(250, 95, 5, 1);
172
- --plasma-colors-critical: rgba(255, 41, 62, 1);
173
- --plasma-colors-overlay: rgba(8, 8, 8, 0.56);
174
- --plasma-colors-surface-liquid01: rgba(255, 255, 255, 0.06);
175
- --plasma-colors-surface-liquid02: rgba(255, 255, 255, 0.12);
176
- --plasma-colors-surface-liquid03: rgba(255, 255, 255, 0.2);
177
- --plasma-colors-surface-solid01: rgba(23, 23, 23, 1);
178
- --plasma-colors-surface-solid02: rgba(38, 38, 38, 1);
179
- --plasma-colors-surface-solid03: rgba(54, 54, 54, 1);
180
- --plasma-colors-surface-card: rgba(255, 255, 255, 0.12);
181
- --plasma-colors-button-secondary: rgba(255, 255, 255, 0.12);
182
- --plasma-colors-button-accent: rgba(63, 129, 253, 1);
183
- --plasma-colors-button-success: rgba(26, 158, 50, 1);
184
- --plasma-colors-button-warning: rgba(250, 95, 5, 1);
185
- --plasma-colors-button-critical: rgba(255, 41, 62, 1);
186
261
  --shadow-down-soft-s: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
187
262
  --shadow-down-soft-m: 0px 24px 48px -8px rgba(0, 0, 0, 0.08);
188
263
  --shadow-down-soft-l: 0px 60px 112px -8px rgba(0, 0, 0, 0.08);
@@ -195,193 +270,268 @@
195
270
  --shadow-up-hard-s: 0px -4px 12px -3px rgba(8, 8, 8, 0.20), 0px -1px 4px -1px rgba(0, 0, 0, 0.03);
196
271
  --shadow-up-hard-m: 0px -16px 32px -8px rgba(0, 0, 0, 0.24);
197
272
  --shadow-up-hard-l: 0px -60px 112px -8px rgba(0, 0, 0, 0.40);
198
- color: rgba(255, 255, 255, 0.96);
199
- background-color: rgba(8, 8, 8, 1);
273
+ color: var(--text-primary);
274
+ background-color: var(--background-primary);
200
275
  }
201
276
 
202
277
  .light {
203
- --overlay-soft: rgba(249, 249, 249, 0.56);
204
- --overlay-hard: rgba(249, 249, 249, 0.96);
205
- --overlay-blur: rgba(249, 249, 249, 0.28);
206
- --on-dark-overlay-soft: rgba(8, 8, 8, 0.56);
207
- --on-dark-overlay-hard: rgba(8, 8, 8, 0.96);
208
- --on-dark-overlay-blur: rgba(8, 8, 8, 0.28);
209
- --on-light-overlay-soft: rgba(249, 249, 249, 0.56);
210
- --on-light-overlay-hard: rgba(249, 249, 249, 0.96);
211
- --on-light-overlay-blur: rgba(249, 249, 249, 0.28);
278
+ --text-primary-hover: #08080893;
279
+ --text-primary-active: #080808C4;
212
280
  --text-primary: rgba(8, 8, 8, 0.96);
213
- /* добавлены вручную */
214
- --text-primary-hover: rgba(8, 8, 8, 0.58);
215
- --text-primary-active: rgba(8, 8, 8, 0.77);
216
- /* добавлены вручную */
281
+ --text-secondary-hover: #080808FF;
282
+ --text-secondary-active: #080808AB;
217
283
  --text-secondary: rgba(8, 8, 8, 0.56);
218
- /* добавлены вручную */
219
- --text-secondary-hover: rgba(8, 8, 8, 1);
220
- --text-secondary-active: rgba(8, 8, 8, 0.78);
221
- /* добавлены вручную */
284
+ --text-tertiary-hover: #080808FF;
285
+ --text-tertiary-active: #08080856;
222
286
  --text-tertiary: rgba(8, 8, 8, 0.28);
223
- /* добавлены вручную */
224
- --text-tertiary-hover: rgba(8, 8, 8, 1);
225
- --text-tertiary-active: rgba(8, 8, 8, 0.64);
226
- /* добавлены вручную */
287
+ --text-paragraph-hover: #0808087A;
288
+ --text-paragraph-active: #080808A3;
227
289
  --text-paragraph: rgba(8, 8, 8, 0.8);
228
- /* добавлены вручную */
229
- --text-paragraph-hover: rgba(8, 8, 8, 0.48);
230
- --text-paragraph-active: rgba(8, 8, 8, 0.64);
231
- /* добавлены вручную */
232
- --text-accent: rgba(42, 114, 248, 1);
233
- /* добавлены вручную */
234
- --text-accent-hover: rgba(82, 141, 250, 1);
235
- --text-accent-active: rgba(7, 90, 242, 1);
236
- /* добавлены вручную */
290
+ --text-accent-hover: #528DFAFF;
291
+ --text-accent-active: #075AF2FF;
292
+ --text-accent: #2A72F8;
293
+ --text-accent-gradient-hover: #000000FF;
294
+ --text-accent-gradient-active: #CCCCCCFF;
237
295
  --text-accent-gradient: linear-gradient(93.97deg, #3E79F0 6.49%, #27C6E5 93.51%);
238
- --text-positive: rgba(26, 158, 50, 1);
239
- /* добавлены вручную */
240
- --text-positive-hover: rgba(31, 193, 61, 1);
241
- --text-positive-active: rgba(20, 123, 39, 1);
242
- /* добавлены вручную */
243
- --text-warning: rgba(250, 95, 5, 1);
244
- /* добавлены вручную */
245
- --text-warning-hover: rgba(251, 120, 45, 1);
246
- --text-warning-active: rgba(210, 80, 4, 1);
247
- /* добавлены вручную */
248
- --text-negative: rgba(243, 27, 49, 1);
249
- /* добавлены вручную */
250
- --text-negative-hover: rgba(245, 66, 84, 1);
251
- --text-negative-active: rgba(218, 11, 32, 1);
252
- /* добавлены вручную */
296
+ --text-positive-hover: #1FC13DFF;
297
+ --text-positive-active: #147B27FF;
298
+ --text-positive: #1A9E32;
299
+ --text-warning-hover: #FB782DFF;
300
+ --text-warning-active: #D25004FF;
301
+ --text-warning: #FA5F05;
302
+ --text-negative-hover: #F54254FF;
303
+ --text-negative-active: #DA0B20FF;
304
+ --text-negative: #F31B31;
305
+ --on-dark-text-primary-hover: #FFFFFF93;
306
+ --on-dark-text-primary-active: #FFFFFFC4;
253
307
  --on-dark-text-primary: rgba(255, 255, 255, 0.96);
308
+ --on-dark-text-secondary-hover: #FFFFFFFF;
309
+ --on-dark-text-secondary-active: #FFFFFFAB;
254
310
  --on-dark-text-secondary: rgba(255, 255, 255, 0.56);
311
+ --on-dark-text-tertiary-hover: #FFFFFFFF;
312
+ --on-dark-text-tertiary-active: #FFFFFF56;
255
313
  --on-dark-text-tertiary: rgba(255, 255, 255, 0.28);
314
+ --on-dark-text-paragraph-hover: #FFFFFF7A;
315
+ --on-dark-text-paragraph-active: #FFFFFFA3;
256
316
  --on-dark-text-paragraph: rgba(255, 255, 255, 0.8);
257
- --on-dark-text-accent: rgba(63, 129, 253, 1);
317
+ --on-dark-text-accent-hover: #689CFDFF;
318
+ --on-dark-text-accent-active: #1767FDFF;
319
+ --on-dark-text-accent: #3F81FD;
320
+ --on-dark-text-accent-gradient-hover: #000000FF;
321
+ --on-dark-text-accent-gradient-active: #CCCCCCFF;
258
322
  --on-dark-text-accent-gradient: linear-gradient(89.83deg, #5E94FF 0%, #43DBFA 100%);
259
- --on-dark-text-positive: rgba(26, 158, 50, 1);
260
- --on-dark-text-warning: rgba(250, 95, 5, 1);
261
- --on-dark-text-negative: rgba(255, 41, 62, 1);
323
+ --on-dark-text-positive-hover: #1FC13DFF;
324
+ --on-dark-text-positive-active: #147B27FF;
325
+ --on-dark-text-positive: #1A9E32;
326
+ --on-dark-text-warning-hover: #FB782DFF;
327
+ --on-dark-text-warning-active: #D25004FF;
328
+ --on-dark-text-warning: #FA5F05;
329
+ --on-dark-text-negative-hover: #FF5263FF;
330
+ --on-dark-text-negative-active: #FF001AFF;
331
+ --on-dark-text-negative: #FF293E;
332
+ --on-light-text-primary-hover: #08080893;
333
+ --on-light-text-primary-active: #080808C4;
262
334
  --on-light-text-primary: rgba(8, 8, 8, 0.96);
335
+ --on-light-text-secondary-hover: #080808FF;
336
+ --on-light-text-secondary-active: #080808AB;
263
337
  --on-light-text-secondary: rgba(8, 8, 8, 0.56);
338
+ --on-light-text-tertiary-hover: #080808FF;
339
+ --on-light-text-tertiary-active: #08080856;
264
340
  --on-light-text-tertiary: rgba(8, 8, 8, 0.28);
341
+ --on-light-text-paragraph-hover: #0808087A;
342
+ --on-light-text-paragraph-active: #080808A3;
265
343
  --on-light-text-paragraph: rgba(8, 8, 8, 0.8);
266
- --on-light-text-accent: rgba(42, 114, 248, 1);
344
+ --on-light-text-accent-hover: #528DFAFF;
345
+ --on-light-text-accent-active: #075AF2FF;
346
+ --on-light-text-accent: #2A72F8;
347
+ --on-light-text-accent-gradient-hover: #000000FF;
348
+ --on-light-text-accent-gradient-active: #CCCCCCFF;
267
349
  --on-light-text-accent-gradient: linear-gradient(93.97deg, #3E79F0 6.49%, #27C6E5 93.51%);
268
- --on-light-text-positive: rgba(26, 158, 50, 1);
269
- --on-light-text-warning: rgba(250, 95, 5, 1);
270
- --on-light-text-negative: rgba(243, 27, 49, 1);
350
+ --on-light-text-positive-hover: #1FC13DFF;
351
+ --on-light-text-positive-active: #147B27FF;
352
+ --on-light-text-positive: #1A9E32;
353
+ --on-light-text-warning-hover: #FB782DFF;
354
+ --on-light-text-warning-active: #D25004FF;
355
+ --on-light-text-warning: #FA5F05;
356
+ --on-light-text-negative-hover: #F54254FF;
357
+ --on-light-text-negative-active: #DA0B20FF;
358
+ --on-light-text-negative: #F31B31;
359
+ --inverse-text-primary-hover: #FFFFFF93;
360
+ --inverse-text-primary-active: #FFFFFFC4;
271
361
  --inverse-text-primary: rgba(255, 255, 255, 0.96);
362
+ --inverse-text-secondary-hover: #FFFFFFFF;
363
+ --inverse-text-secondary-active: #FFFFFFAB;
272
364
  --inverse-text-secondary: rgba(255, 255, 255, 0.56);
365
+ --inverse-text-tertiary-hover: #FFFFFFFF;
366
+ --inverse-text-tertiary-active: #FFFFFF56;
273
367
  --inverse-text-tertiary: rgba(255, 255, 255, 0.28);
368
+ --inverse-text-paragraph-hover: #FFFFFF7A;
369
+ --inverse-text-paragraph-active: #FFFFFFA3;
274
370
  --inverse-text-paragraph: rgba(255, 255, 255, 0.8);
275
- --surface-solid-default: rgba(8, 8, 8, 1);
276
- --surface-solid-primary: rgba(245, 245, 245, 1);
277
- --surface-solid-secondary: rgba(236, 236, 236, 1);
278
- --surface-solid-tertiary: rgba(221, 221, 221, 1);
371
+ --surface-solid-primary-hover: #FAFAFAFF;
372
+ --surface-solid-primary-active: #F0F0F0FF;
373
+ --surface-solid-primary: #F5F5F5;
374
+ --surface-solid-secondary-hover: #F7F7F7FF;
375
+ --surface-solid-secondary-active: #E8E8E8FF;
376
+ --surface-solid-secondary: #ECECEC;
377
+ --surface-solid-tertiary-hover: #EDEDEDFF;
378
+ --surface-solid-tertiary-active: #D4D4D4FF;
379
+ --surface-solid-tertiary: #DDDDDD;
380
+ --surface-solid-card-hover: #FFFFFFFF;
381
+ --surface-solid-card-active: #FFFFFFFF;
279
382
  --surface-solid-card: rgba(255, 255, 255, 1);
383
+ --surface-solid-default-hover: #262626FF;
384
+ --surface-solid-default-active: #030303FF;
385
+ --surface-solid-default: #080808;
386
+ --surface-transparent-primary-hover: #08080803;
387
+ --surface-transparent-primary-active: #0808080D;
280
388
  --surface-transparent-primary: rgba(8, 8, 8, 0.03);
281
- /* добавлены вручную */
282
- --surface-transparent-primary-hover: rgba(8, 8, 8, 0.05);
283
- --surface-transparent-primary-active: rgba(8, 8, 8, 0.07);
284
- /* добавлены вручную */
389
+ --surface-transparent-secondary-hover: #08080805;
390
+ --surface-transparent-secondary-active: #0808081A;
285
391
  --surface-transparent-secondary: rgba(8, 8, 8, 0.06);
286
- /* добавлены вручную */
287
- --surface-transparent-secondary-hover: rgba(8, 8, 8, 0.04);
288
- --surface-transparent-secondary-active: rgba(8, 8, 8, 0.08);
289
- /* добавлены вручную */
392
+ --surface-transparent-tertiary-hover: #0808080A;
393
+ --surface-transparent-tertiary-active: #08080829;
290
394
  --surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
291
- /* добавлены вручную */
292
- --surface-transparent-tertiary-hover: rgba(8, 8, 8, 0.08);
293
- --surface-transparent-tertiary-active: rgba(8, 8, 8, 0.16);
294
- /* добавлены вручную */
395
+ --surface-transparent-deep-hover: #0808088F;
396
+ --surface-transparent-deep-active: #080808AD;
397
+ --surface-transparent-deep: rgba(8, 8, 8, 0.64);
398
+ --surface-transparent-card-hover: #FFFFFFFF;
399
+ --surface-transparent-card-active: #FFFFFFFF;
295
400
  --surface-transparent-card: rgba(255, 255, 255, 1);
296
- --surface-accent: rgba(42, 114, 248, 1);
297
- --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0 6.49%, #27C6E5 93.51%);
298
- --surface-positive: rgba(26, 158, 50, 1);
299
- --surface-warning: rgba(250, 95, 5, 1);
300
- --surface-negative: rgba(243, 27, 49, 1);
401
+ --surface-clear-hover: #FFFFFF00;
402
+ --surface-clear-active: #FFFFFF00;
301
403
  --surface-clear: rgba(255, 255, 255, 0);
302
- --surface-transparent-deep: rgba(8, 8, 8, 0.64);
303
- /* добавлены вручную */
304
- --surface-transparent-accent: rgba(42, 114, 248, 0.06);
305
- --surface-transparent-accent-hover: rgba(42, 114, 248, 0.04);
306
- --surface-transparent-accent-active: rgba(42, 114, 248, 0.08);
307
- --surface-transparent-positive: rgba(26, 158, 50, 0.06);
308
- --surface-transparent-positive-hover: rgba(26, 158, 50, 0.04);
309
- --surface-transparent-positive-active: rgba(26, 158, 50, 0.08);
310
- --surface-transparent-warning: rgba(250, 95, 5, 0.06);
311
- --surface-transparent-warning-hover: rgba(250, 95, 5, 0.04);
312
- --surface-transparent-warning-active: rgba(250, 95, 5, 0.08);
313
- --surface-transparent-negative: rgba(243, 27, 49, 0.06);
314
- --surface-transparent-negative-hover: rgba(243, 27, 49, 0.04);
315
- --surface-transparent-negative-active: rgba(243, 27, 49, 0.08);
316
- /* добавлены вручную */
404
+ --surface-accent-hover: #528DFAFF;
405
+ --surface-accent-active: #1665F8FF;
406
+ --surface-accent: #2A72F8;
407
+ --surface-accent-gradient-hover: #FFFFFFFF;
408
+ --surface-accent-gradient-active: #FFFFFFFF;
409
+ --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0 6.49%, #27C6E5 93.51%);
410
+ --surface-transparent-accent-hover: #2A72F805;
411
+ --surface-transparent-accent-active: #2A72F81A;
412
+ --surface-positive-hover: #1EB83AFF;
413
+ --surface-positive-active: #178C2CFF;
414
+ --surface-positive: #1A9E32;
415
+ --surface-warning-hover: #FB782DFF;
416
+ --surface-warning-active: #E65705FF;
417
+ --surface-warning: #FA5F05;
418
+ --surface-negative-hover: #F54254FF;
419
+ --surface-negative-active: #ED0C23FF;
420
+ --surface-negative: #F31B31;
421
+ --surface-transparent-positive-hover: #1A9E3205;
422
+ --surface-transparent-positive-active: #1A9E321A;
423
+ --surface-transparent-warning-hover: #FA5F0505;
424
+ --surface-transparent-warning-active: #FA5F051A;
425
+ --surface-transparent-negative-hover: #F31B3105;
426
+ --surface-transparent-negative-active: #F31B311A;
427
+ --surface-transparent-accent: rgba(42,114,248,0.06);
428
+ --surface-transparent-positive: rgba(26,158,50,0.06);
429
+ --surface-transparent-warning: rgba(250,95,5,0.06);
430
+ --surface-transparent-negative: rgba(243,27,49,0.06);
431
+ --on-dark-surface-solid-primary-hover: #363636FF;
432
+ --on-dark-surface-solid-primary-active: #0D0D0DFF;
433
+ --on-dark-surface-solid-primary: #171717;
434
+ --on-dark-surface-solid-secondary-hover: #3B3B3BFF;
435
+ --on-dark-surface-solid-secondary-active: #1C1C1CFF;
436
+ --on-dark-surface-solid-secondary: #262626;
437
+ --on-dark-surface-solid-tertiary-hover: #4A4A4AFF;
438
+ --on-dark-surface-solid-tertiary-active: #2B2B2BFF;
439
+ --on-dark-surface-solid-tertiary: #363636;
440
+ --on-dark-surface-solid-card-hover: #363636FF;
441
+ --on-dark-surface-solid-card-active: #0D0D0DFF;
442
+ --on-dark-surface-solid-card: #171717;
443
+ --on-dark-surface-solid-default-hover: #FFFFFFFF;
444
+ --on-dark-surface-solid-default-active: #FFFFFFFF;
317
445
  --on-dark-surface-solid-default: rgba(255, 255, 255, 1);
318
- --on-dark-surface-solid-primary: rgba(23, 23, 23, 1);
319
- --on-dark-surface-solid-secondary: rgba(38, 38, 38, 1);
320
- --on-dark-surface-solid-tertiary: rgba(54, 54, 54, 1);
321
- --on-dark-surface-solid-card: rgba(23, 23, 23, 1);
322
- --on-dark-surface-transparent-primary: rgba(23, 23, 23, 1);
323
- --on-dark-surface-transparent-secondary: rgba(38, 38, 38, 1);
324
- --on-dark-surface-transparent-tertiary: rgba(54, 54, 54, 1);
446
+ --on-dark-surface-transparent-primary-hover: #363636FF;
447
+ --on-dark-surface-transparent-primary-active: #0D0D0DFF;
448
+ --on-dark-surface-transparent-primary: #171717;
449
+ --on-dark-surface-transparent-secondary-hover: #3B3B3BFF;
450
+ --on-dark-surface-transparent-secondary-active: #1C1C1CFF;
451
+ --on-dark-surface-transparent-secondary: #262626;
452
+ --on-dark-surface-transparent-tertiary-hover: #4A4A4AFF;
453
+ --on-dark-surface-transparent-tertiary-active: #2B2B2BFF;
454
+ --on-dark-surface-transparent-tertiary: #363636;
455
+ --on-dark-surface-transparent-deep-hover: #FFFFFF8F;
456
+ --on-dark-surface-transparent-deep-active: #FFFFFFAD;
457
+ --on-dark-surface-transparent-deep: rgba(255, 255, 255, 0.64);
458
+ --on-dark-surface-transparent-card-hover: #FFFFFF0A;
459
+ --on-dark-surface-transparent-card-active: #FFFFFF29;
325
460
  --on-dark-surface-transparent-card: rgba(255, 255, 255, 0.12);
326
- --on-dark-surface-accent: rgba(63, 129, 253, 1);
461
+ --on-dark-surface-accent-hover: #689CFDFF;
462
+ --on-dark-surface-accent-active: #2B74FDFF;
463
+ --on-dark-surface-accent: #3F81FD;
464
+ --on-dark-surface-accent-gradient-hover: #FFFFFFFF;
465
+ --on-dark-surface-accent-gradient-active: #FFFFFFFF;
327
466
  --on-dark-surface-accent-gradient: linear-gradient(93.97deg, #3E79F0 6.49%, #27C6E5 93.51%);
328
- --on-dark-surface-positive: rgba(26, 158, 50, 1);
329
- --on-dark-surface-warning: rgba(250, 95, 5, 1);
330
- --on-dark-surface-negative: rgba(255, 41, 62, 1);
331
- --on-dark-surface-transparent-deep: rgba(255, 255, 255, 0.64);
332
- --on-light-surface-solid-default: rgba(8, 8, 8, 1);
333
- --on-light-surface-solid-primary: rgba(245, 245, 245, 1);
334
- --on-light-surface-solid-secondary: rgba(236, 236, 236, 1);
335
- --on-light-surface-solid-tertiary: rgba(221, 221, 221, 1);
467
+ --on-dark-surface-positive-hover: #1EB83AFF;
468
+ --on-dark-surface-positive-active: #178C2CFF;
469
+ --on-dark-surface-positive: #1A9E32;
470
+ --on-dark-surface-warning-hover: #FB782DFF;
471
+ --on-dark-surface-warning-active: #E65705FF;
472
+ --on-dark-surface-warning: #FA5F05;
473
+ --on-dark-surface-negative-hover: #FF5263FF;
474
+ --on-dark-surface-negative-active: #FF142CFF;
475
+ --on-dark-surface-negative: #FF293E;
476
+ --on-light-surface-solid-primary-hover: #FAFAFAFF;
477
+ --on-light-surface-solid-primary-active: #F0F0F0FF;
478
+ --on-light-surface-solid-primary: #F5F5F5;
479
+ --on-light-surface-solid-secondary-hover: #F7F7F7FF;
480
+ --on-light-surface-solid-secondary-active: #E8E8E8FF;
481
+ --on-light-surface-solid-secondary: #ECECEC;
482
+ --on-light-surface-solid-tertiary-hover: #EDEDEDFF;
483
+ --on-light-surface-solid-tertiary-active: #D4D4D4FF;
484
+ --on-light-surface-solid-tertiary: #DDDDDD;
485
+ --on-light-surface-solid-card-hover: #FFFFFFFF;
486
+ --on-light-surface-solid-card-active: #FFFFFFFF;
336
487
  --on-light-surface-solid-card: rgba(255, 255, 255, 1);
488
+ --on-light-surface-solid-default-hover: #262626FF;
489
+ --on-light-surface-solid-default-active: #030303FF;
490
+ --on-light-surface-solid-default: #080808;
491
+ --on-light-surface-transparent-primary-hover: #08080803;
492
+ --on-light-surface-transparent-primary-active: #0808080D;
337
493
  --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.03);
494
+ --on-light-surface-transparent-secondary-hover: #08080805;
495
+ --on-light-surface-transparent-secondary-active: #0808081A;
338
496
  --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06);
497
+ --on-light-surface-transparent-tertiary-hover: #0808080A;
498
+ --on-light-surface-transparent-tertiary-active: #08080829;
339
499
  --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
500
+ --on-light-surface-transparent-deep-hover: #0808088F;
501
+ --on-light-surface-transparent-deep-active: #080808AD;
502
+ --on-light-surface-transparent-deep: rgba(8, 8, 8, 0.64);
503
+ --on-light-surface-transparent-card-hover: #FFFFFFFF;
504
+ --on-light-surface-transparent-card-active: #FFFFFFFF;
340
505
  --on-light-surface-transparent-card: rgba(255, 255, 255, 1);
341
- --on-light-surface-accent: rgba(42, 114, 248, 1);
506
+ --on-light-surface-accent-hover: #528DFAFF;
507
+ --on-light-surface-accent-active: #1665F8FF;
508
+ --on-light-surface-accent: #2A72F8;
509
+ --on-light-surface-accent-gradient-hover: #FFFFFFFF;
510
+ --on-light-surface-accent-gradient-active: #FFFFFFFF;
342
511
  --on-light-surface-accent-gradient: linear-gradient(93.97deg, #3E79F0 6.49%, #27C6E5 93.51%);
343
- --on-light-surface-positive: rgba(26, 158, 50, 1);
344
- --on-light-surface-warning: rgba(250, 95, 5, 1);
345
- --on-light-surface-negative: rgba(243, 27, 49, 1);
346
- --on-light-surface-transparent-deep: rgba(8, 8, 8, 0.64);
347
- --background-primary: rgba(249, 249, 249, 1);
348
- --dark-background-primary: rgba(8, 8, 8, 1);
349
- --light-background-primary: rgba(249, 249, 249, 1);
512
+ --on-light-surface-positive-hover: #1EB83AFF;
513
+ --on-light-surface-positive-active: #178C2CFF;
514
+ --on-light-surface-positive: #1A9E32;
515
+ --on-light-surface-warning-hover: #FB782DFF;
516
+ --on-light-surface-warning-active: #E65705FF;
517
+ --on-light-surface-warning: #FA5F05;
518
+ --on-light-surface-negative-hover: #F54254FF;
519
+ --on-light-surface-negative-active: #ED0C23FF;
520
+ --on-light-surface-negative: #F31B31;
521
+ --background-primary: #F9F9F9;
522
+ --dark-background-primary: #080808;
523
+ --light-background-primary: #F9F9F9;
524
+ --overlay-soft: rgba(249, 249, 249, 0.56);
525
+ --overlay-hard: rgba(249, 249, 249, 0.96);
526
+ --overlay-blur: rgba(249, 249, 249, 0.28);
527
+ --on-dark-overlay-soft: rgba(8, 8, 8, 0.56);
528
+ --on-dark-overlay-hard: rgba(8, 8, 8, 0.96);
529
+ --on-dark-overlay-blur: rgba(8, 8, 8, 0.28);
530
+ --on-light-overlay-soft: rgba(249, 249, 249, 0.56);
531
+ --on-light-overlay-hard: rgba(249, 249, 249, 0.96);
532
+ --on-light-overlay-blur: rgba(249, 249, 249, 0.28);
350
533
  --skeleton-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% );
351
534
  --skeleton-gradient-lighter: linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% );
352
- --plasma-colors-white-primary: rgba(255, 255, 255, 0.96);
353
- --plasma-colors-white-secondary: rgba(255, 255, 255, 0.56);
354
- --plasma-colors-white-tertiary: rgba(255, 255, 255, 0.28);
355
- --plasma-colors-black-primary: rgba(8, 8, 8, 0.96);
356
- --plasma-colors-black-secondary: rgba(8, 8, 8, 0.56);
357
- --plasma-colors-black-tertiary: rgba(8, 8, 8, 0.28);
358
- --plasma-colors-button-black: rgba(8, 8, 8, 1);
359
- --plasma-colors-button-black-secondary: rgba(8, 8, 8, 0.06);
360
- --plasma-colors-button-white: rgba(255, 255, 255, 1);
361
- --plasma-colors-button-white-secondary: rgba(38, 38, 38, 1);
362
- --plasma-colors-text: rgba(8, 8, 8, 0.96);
363
- --plasma-colors-primary: rgba(8, 8, 8, 0.96);
364
- --plasma-colors-secondary: rgba(8, 8, 8, 0.56);
365
- --plasma-colors-tertiary: rgba(8, 8, 8, 0.28);
366
- --plasma-colors-paragraph: rgba(8, 8, 8, 0.8);
367
- --plasma-colors-background: rgba(249, 249, 249, 1);
368
- --plasma-colors-accent: rgba(42, 114, 248, 1);
369
- --plasma-colors-success: rgba(26, 158, 50, 1);
370
- --plasma-colors-warning: rgba(250, 95, 5, 1);
371
- --plasma-colors-critical: rgba(243, 27, 49, 1);
372
- --plasma-colors-overlay: rgba(249, 249, 249, 0.56);
373
- --plasma-colors-surface-liquid01: rgba(8, 8, 8, 0.03);
374
- --plasma-colors-surface-liquid02: rgba(8, 8, 8, 0.06);
375
- --plasma-colors-surface-liquid03: rgba(8, 8, 8, 0.12);
376
- --plasma-colors-surface-solid01: rgba(245, 245, 245, 1);
377
- --plasma-colors-surface-solid02: rgba(236, 236, 236, 1);
378
- --plasma-colors-surface-solid03: rgba(221, 221, 221, 1);
379
- --plasma-colors-surface-card: rgba(255, 255, 255, 1);
380
- --plasma-colors-button-secondary: rgba(8, 8, 8, 0.06);
381
- --plasma-colors-button-accent: rgba(42, 114, 248, 1);
382
- --plasma-colors-button-success: rgba(26, 158, 50, 1);
383
- --plasma-colors-button-warning: rgba(250, 95, 5, 1);
384
- --plasma-colors-button-critical: rgba(243, 27, 49, 1);
385
535
  --shadow-down-soft-s: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
386
536
  --shadow-down-soft-m: 0px 24px 48px -8px rgba(0, 0, 0, 0.08);
387
537
  --shadow-down-soft-l: 0px 60px 112px -8px rgba(0, 0, 0, 0.08);
@@ -394,6 +544,441 @@
394
544
  --shadow-up-hard-s: 0px -4px 12px -3px rgba(8, 8, 8, 0.20), 0px -1px 4px -1px rgba(0, 0, 0, 0.03);
395
545
  --shadow-up-hard-m: 0px -16px 32px -8px rgba(0, 0, 0, 0.24);
396
546
  --shadow-up-hard-l: 0px -60px 112px -8px rgba(0, 0, 0, 0.40);
397
- color: rgba(8, 8, 8, 0.96);
398
- background-color: rgba(249, 249, 249, 1);
547
+ color: var(--text-primary);
548
+ background-color: var(--background-primary);
549
+ }
550
+
551
+ .light,
552
+ .dark {
553
+ font-size: 16px;
554
+ --plasma-typo-overflow-wrap: break-word;
555
+ --plasma-typo-hyphens: auto;
556
+ --plasma-typo-display-font-family: 'SB Sans Display', sans-serif;
557
+ --plasma-typo-text-font-family: 'SB Sans Text', sans-serif;
558
+ --plasma-typo-dspl-l-font-family: var(--plasma-typo-display-font-family);
559
+ --plasma-typo-dspl-l-letter-spacing: normal;
560
+ --plasma-typo-dspl-l-font-style: normal;
561
+ --plasma-typo-dspl-l-bold-font-family: var(--plasma-typo-display-font-family);
562
+ --plasma-typo-dspl-l-bold-letter-spacing: normal;
563
+ --plasma-typo-dspl-l-bold-font-style: normal;
564
+ --plasma-typo-dspl-m-font-family: var(--plasma-typo-display-font-family);
565
+ --plasma-typo-dspl-m-letter-spacing: normal;
566
+ --plasma-typo-dspl-m-font-style: normal;
567
+ --plasma-typo-dspl-m-bold-font-family: var(--plasma-typo-display-font-family);
568
+ --plasma-typo-dspl-m-bold-letter-spacing: normal;
569
+ --plasma-typo-dspl-m-bold-font-style: normal;
570
+ --plasma-typo-dspl-s-font-family: var(--plasma-typo-display-font-family);
571
+ --plasma-typo-dspl-s-letter-spacing: normal;
572
+ --plasma-typo-dspl-s-font-style: normal;
573
+ --plasma-typo-dspl-s-bold-font-family: var(--plasma-typo-display-font-family);
574
+ --plasma-typo-dspl-s-bold-letter-spacing: normal;
575
+ --plasma-typo-dspl-s-bold-font-style: normal;
576
+ --plasma-typo-h1-font-family: var(--plasma-typo-display-font-family);
577
+ --plasma-typo-h1-letter-spacing: normal;
578
+ --plasma-typo-h1-font-style: normal;
579
+ --plasma-typo-h1-bold-font-family: var(--plasma-typo-display-font-family);
580
+ --plasma-typo-h1-bold-letter-spacing: normal;
581
+ --plasma-typo-h1-bold-font-style: normal;
582
+ --plasma-typo-h2-font-family: var(--plasma-typo-display-font-family);
583
+ --plasma-typo-h2-letter-spacing: normal;
584
+ --plasma-typo-h2-font-style: normal;
585
+ --plasma-typo-h2-bold-font-family: var(--plasma-typo-display-font-family);
586
+ --plasma-typo-h2-bold-letter-spacing: normal;
587
+ --plasma-typo-h2-bold-font-style: normal;
588
+ --plasma-typo-h3-font-family: var(--plasma-typo-display-font-family);
589
+ --plasma-typo-h3-letter-spacing: normal;
590
+ --plasma-typo-h3-font-style: normal;
591
+ --plasma-typo-h3-bold-font-family: var(--plasma-typo-display-font-family);
592
+ --plasma-typo-h3-bold-letter-spacing: normal;
593
+ --plasma-typo-h3-bold-font-style: normal;
594
+ --plasma-typo-h4-font-family: var(--plasma-typo-display-font-family);
595
+ --plasma-typo-h4-letter-spacing: normal;
596
+ --plasma-typo-h4-font-style: normal;
597
+ --plasma-typo-h4-bold-font-family: var(--plasma-typo-display-font-family);
598
+ --plasma-typo-h4-bold-letter-spacing: normal;
599
+ --plasma-typo-h4-bold-font-style: normal;
600
+ --plasma-typo-h5-font-family: var(--plasma-typo-display-font-family);
601
+ --plasma-typo-h5-letter-spacing: normal;
602
+ --plasma-typo-h5-font-style: normal;
603
+ --plasma-typo-h5-bold-font-family: var(--plasma-typo-display-font-family);
604
+ --plasma-typo-h5-bold-letter-spacing: normal;
605
+ --plasma-typo-h5-bold-font-style: normal;
606
+ --plasma-typo-body-l-font-family: var(--plasma-typo-text-font-family);
607
+ --plasma-typo-body-l-letter-spacing: -0.02em;
608
+ --plasma-typo-body-l-font-style: normal;
609
+ --plasma-typo-body-l-bold-font-family: var(--plasma-typo-text-font-family);
610
+ --plasma-typo-body-l-bold-letter-spacing: -0.02em;
611
+ --plasma-typo-body-l-bold-font-style: normal;
612
+ --plasma-typo-body-m-font-family: var(--plasma-typo-text-font-family);
613
+ --plasma-typo-body-m-letter-spacing: -0.02em;
614
+ --plasma-typo-body-m-font-style: normal;
615
+ --plasma-typo-body-m-bold-font-family: var(--plasma-typo-text-font-family);
616
+ --plasma-typo-body-m-bold-letter-spacing: -0.02em;
617
+ --plasma-typo-body-m-bold-font-style: normal;
618
+ --plasma-typo-body-s-font-family: var(--plasma-typo-text-font-family);
619
+ --plasma-typo-body-s-letter-spacing: -0.02em;
620
+ --plasma-typo-body-s-font-style: normal;
621
+ --plasma-typo-body-s-bold-font-family: var(--plasma-typo-text-font-family);
622
+ --plasma-typo-body-s-bold-letter-spacing: -0.02em;
623
+ --plasma-typo-body-s-bold-font-style: normal;
624
+ --plasma-typo-body-xs-font-family: var(--plasma-typo-text-font-family);
625
+ --plasma-typo-body-xs-letter-spacing: -0.02em;
626
+ --plasma-typo-body-xs-font-style: normal;
627
+ --plasma-typo-body-xs-bold-font-family: var(--plasma-typo-text-font-family);
628
+ --plasma-typo-body-xs-bold-letter-spacing: -0.02em;
629
+ --plasma-typo-body-xs-bold-font-style: normal;
630
+ --plasma-typo-body-xxs-font-family: var(--plasma-typo-text-font-family);
631
+ --plasma-typo-body-xxs-letter-spacing: -0.02em;
632
+ --plasma-typo-body-xxs-font-style: normal;
633
+ --plasma-typo-body-xxs-bold-font-family: var(--plasma-typo-text-font-family);
634
+ --plasma-typo-body-xxs-bold-letter-spacing: -0.02em;
635
+ --plasma-typo-body-xxs-bold-font-style: normal;
636
+ --plasma-typo-text-l-font-family: var(--plasma-typo-text-font-family);
637
+ --plasma-typo-text-l-letter-spacing: -0.02em;
638
+ --plasma-typo-text-l-font-style: normal;
639
+ --plasma-typo-text-l-bold-font-family: var(--plasma-typo-text-font-family);
640
+ --plasma-typo-text-l-bold-letter-spacing: -0.02em;
641
+ --plasma-typo-text-l-bold-font-style: normal;
642
+ --plasma-typo-text-m-font-family: var(--plasma-typo-text-font-family);
643
+ --plasma-typo-text-m-letter-spacing: -0.02em;
644
+ --plasma-typo-text-m-font-style: normal;
645
+ --plasma-typo-text-m-bold-font-family: var(--plasma-typo-text-font-family);
646
+ --plasma-typo-text-m-bold-letter-spacing: -0.02em;
647
+ --plasma-typo-text-m-bold-font-style: normal;
648
+ --plasma-typo-text-s-font-family: var(--plasma-typo-text-font-family);
649
+ --plasma-typo-text-s-letter-spacing: -0.02em;
650
+ --plasma-typo-text-s-font-style: normal;
651
+ --plasma-typo-text-s-bold-font-family: var(--plasma-typo-text-font-family);
652
+ --plasma-typo-text-s-bold-letter-spacing: -0.02emm;
653
+ --plasma-typo-text-s-bold-font-style: normal;
654
+ --plasma-typo-text-xs-font-family: var(--plasma-typo-text-font-family);
655
+ --plasma-typo-text-xs-letter-spacing: -0.02em;
656
+ --plasma-typo-text-xs-font-style: normal;
657
+ --plasma-typo-text-xs-bold-font-family: var(--plasma-typo-text-font-family);
658
+ --plasma-typo-text-xs-bold-letter-spacing: -0.02em;
659
+ --plasma-typo-text-xs-bold-font-style: normal;
660
+ }
661
+
662
+ @media (max-width: 559px) {
663
+ .light,
664
+ .dark {
665
+ --plasma-typo-dspl-l-font-size: 5.5rem;
666
+ --plasma-typo-dspl-l-font-weight: 300;
667
+ --plasma-typo-dspl-l-line-height: 5.75rem;
668
+ --plasma-typo-dspl-l-bold-font-size: 5.5rem;
669
+ --plasma-typo-dspl-l-bold-font-weight: 600;
670
+ --plasma-typo-dspl-l-bold-line-height: 5.75rem;
671
+ --plasma-typo-dspl-m-font-size: 3.5rem;
672
+ --plasma-typo-dspl-m-font-weight: 300;
673
+ --plasma-typo-dspl-m-line-height: 3.875rem;
674
+ --plasma-typo-dspl-m-bold-font-size: 3.5rem;
675
+ --plasma-typo-dspl-m-bold-font-weight: 600;
676
+ --plasma-typo-dspl-m-bold-line-height: 3.875rem;
677
+ --plasma-typo-dspl-s-font-size: 2.5rem;
678
+ --plasma-typo-dspl-s-font-weight: 300;
679
+ --plasma-typo-dspl-s-line-height: 2.875rem;
680
+ --plasma-typo-dspl-s-bold-font-size: 2.5rem;
681
+ --plasma-typo-dspl-s-bold-font-weight: 600;
682
+ --plasma-typo-dspl-s-bold-line-height: 2.875rem;
683
+ --plasma-typo-h1-font-size: 1.75rem;
684
+ --plasma-typo-h1-font-weight: 400;
685
+ --plasma-typo-h1-line-height: 2.125rem;
686
+ --plasma-typo-h1-bold-font-size: 1.75rem;
687
+ --plasma-typo-h1-bold-font-weight: 600;
688
+ --plasma-typo-h1-bold-line-height: 2.125rem;
689
+ --plasma-typo-h2-font-size: 1.5rem;
690
+ --plasma-typo-h2-font-weight: 400;
691
+ --plasma-typo-h2-line-height: 1.875rem;
692
+ --plasma-typo-h2-bold-font-size: 1.5rem;
693
+ --plasma-typo-h2-bold-font-weight: 600;
694
+ --plasma-typo-h2-bold-line-height: 1.875rem;
695
+ --plasma-typo-h3-font-size: 1.25rem;
696
+ --plasma-typo-h3-font-weight: 400;
697
+ --plasma-typo-h3-line-height: 1.625rem;
698
+ --plasma-typo-h3-bold-font-size: 1.25rem;
699
+ --plasma-typo-h3-bold-font-weight: 600;
700
+ --plasma-typo-h3-bold-line-height: 1.625rem;
701
+ --plasma-typo-h4-font-size: 1.125rem;
702
+ --plasma-typo-h4-font-weight: 400;
703
+ --plasma-typo-h4-line-height: 1.5rem;
704
+ --plasma-typo-h4-bold-font-size: 1.125rem;
705
+ --plasma-typo-h4-bold-font-weight: 600;
706
+ --plasma-typo-h4-bold-line-height: 1.5rem;
707
+ --plasma-typo-h5-font-size: 1rem;
708
+ --plasma-typo-h5-font-weight: 400;
709
+ --plasma-typo-h5-line-height: 1.375rem;
710
+ --plasma-typo-h5-bold-font-size: 1rem;
711
+ --plasma-typo-h5-bold-font-weight: 600;
712
+ --plasma-typo-h5-bold-line-height: 1.375rem;
713
+ --plasma-typo-body-l-font-size: 1.125rem;
714
+ --plasma-typo-body-l-font-weight: 400;
715
+ --plasma-typo-body-l-line-height: 1.375rem;
716
+ --plasma-typo-body-l-bold-font-size: 1.125rem;
717
+ --plasma-typo-body-l-bold-font-weight: 600;
718
+ --plasma-typo-body-l-bold-line-height: 1.375rem;
719
+ --plasma-typo-body-m-font-size: 1rem;
720
+ --plasma-typo-body-m-font-weight: 400;
721
+ --plasma-typo-body-m-line-height: 1.25rem;
722
+ --plasma-typo-body-m-bold-font-size: 1rem;
723
+ --plasma-typo-body-m-bold-font-weight: 600;
724
+ --plasma-typo-body-m-bold-line-height: 1.25rem;
725
+ --plasma-typo-body-s-font-size: 0.875rem;
726
+ --plasma-typo-body-s-font-weight: 400;
727
+ --plasma-typo-body-s-line-height: 1.125rem;
728
+ --plasma-typo-body-s-bold-font-size: 0.875rem;
729
+ --plasma-typo-body-s-bold-font-weight: 600;
730
+ --plasma-typo-body-s-bold-line-height: 1.125rem;
731
+ --plasma-typo-body-xs-font-size: 0.75rem;
732
+ --plasma-typo-body-xs-font-weight: 400;
733
+ --plasma-typo-body-xs-line-height: 0.875rem;
734
+ --plasma-typo-body-xs-bold-font-size: 0.75rem;
735
+ --plasma-typo-body-xs-bold-font-weight: 600;
736
+ --plasma-typo-body-xs-bold-line-height: 0.875rem;
737
+ --plasma-typo-body-xxs-font-size: 0.625rem;
738
+ --plasma-typo-body-xxs-font-weight: 400;
739
+ --plasma-typo-body-xxs-line-height: 0.75rem;
740
+ --plasma-typo-body-xxs-bold-font-size: 0.625rem;
741
+ --plasma-typo-body-xxs-bold-font-weight: 600;
742
+ --plasma-typo-body-xxs-bold-line-height: 0.75rem;
743
+ --plasma-typo-text-l-font-size: 1.125rem;
744
+ --plasma-typo-text-l-font-weight: 400;
745
+ --plasma-typo-text-l-line-height: 1.625rem;
746
+ --plasma-typo-text-l-bold-font-size: 1.125rem;
747
+ --plasma-typo-text-l-bold-font-weight: 600;
748
+ --plasma-typo-text-l-bold-line-height: 1.625rem;
749
+ --plasma-typo-text-m-font-size: 1rem;
750
+ --plasma-typo-text-m-font-weight: 400;
751
+ --plasma-typo-text-m-line-height: 1.5rem;
752
+ --plasma-typo-text-m-bold-font-size: 1rem;
753
+ --plasma-typo-text-m-bold-font-weight: 600;
754
+ --plasma-typo-text-m-bold-line-height: 1.5rem;
755
+ --plasma-typo-text-s-font-size: 0.875rem;
756
+ --plasma-typo-text-s-font-weight: 400;
757
+ --plasma-typo-text-s-line-height: 1.25rem;
758
+ --plasma-typo-text-s-bold-font-size: 0.875rem;
759
+ --plasma-typo-text-s-bold-font-weight: 600;
760
+ --plasma-typo-text-s-bold-line-height: 1.25rem;
761
+ --plasma-typo-text-xs-font-size: 0.75rem;
762
+ --plasma-typo-text-xs-font-weight: 400;
763
+ --plasma-typo-text-xs-line-height: 1rem;
764
+ --plasma-typo-text-xs-bold-font-size: 0.75rem;
765
+ --plasma-typo-text-xs-bold-font-weight: 600;
766
+ --plasma-typo-text-xs-bold-line-height: 1rem;
767
+ }
768
+ }
769
+
770
+ @media (min-width: 560px) and (max-width: 959px) {
771
+ .light,
772
+ .dark {
773
+ --plasma-typo-dspl-l-font-size: 7rem;
774
+ --plasma-typo-dspl-l-font-weight: 300;
775
+ --plasma-typo-dspl-l-line-height: 7rem;
776
+ --plasma-typo-dspl-l-bold-font-size: 7rem;
777
+ --plasma-typo-dspl-l-bold-font-weight: 600;
778
+ --plasma-typo-dspl-l-bold-line-height: 7rem;
779
+ --plasma-typo-dspl-m-font-size: 4.5rem;
780
+ --plasma-typo-dspl-m-font-weight: 300;
781
+ --plasma-typo-dspl-m-line-height: 4.75rem;
782
+ --plasma-typo-dspl-m-bold-font-size: 4.5rem;
783
+ --plasma-typo-dspl-m-bold-font-weight: 600;
784
+ --plasma-typo-dspl-m-bold-line-height: 4.75rem;
785
+ --plasma-typo-dspl-s-font-size: 3rem;
786
+ --plasma-typo-dspl-s-font-weight: 300;
787
+ --plasma-typo-dspl-s-line-height: 3.375rem;
788
+ --plasma-typo-dspl-s-bold-font-size: 3rem;
789
+ --plasma-typo-dspl-s-bold-font-weight: 600;
790
+ --plasma-typo-dspl-s-bold-line-height: 3.375rem;
791
+ --plasma-typo-h1-font-size: 2.5rem;
792
+ --plasma-typo-h1-font-weight: 400;
793
+ --plasma-typo-h1-line-height: 2.875rem;
794
+ --plasma-typo-h1-bold-font-size: 2.5rem;
795
+ --plasma-typo-h1-bold-font-weight: 600;
796
+ --plasma-typo-h1-bold-line-height: 2.875rem;
797
+ --plasma-typo-h2-font-size: 1.75rem;
798
+ --plasma-typo-h2-font-weight: 400;
799
+ --plasma-typo-h2-line-height: 2.125rem;
800
+ --plasma-typo-h2-bold-font-size: 1.75rem;
801
+ --plasma-typo-h2-bold-font-weight: 600;
802
+ --plasma-typo-h2-bold-line-height: 2.125rem;
803
+ --plasma-typo-h3-font-size: 1.25rem;
804
+ --plasma-typo-h3-font-weight: 400;
805
+ --plasma-typo-h3-line-height: 1.625rem;
806
+ --plasma-typo-h3-bold-font-size: 1.25rem;
807
+ --plasma-typo-h3-bold-font-weight: 600;
808
+ --plasma-typo-h3-bold-line-height: 1.625rem;
809
+ --plasma-typo-h4-font-size: 1.125rem;
810
+ --plasma-typo-h4-font-weight: 400;
811
+ --plasma-typo-h4-line-height: 1.5rem;
812
+ --plasma-typo-h4-bold-font-size: 1.125rem;
813
+ --plasma-typo-h4-bold-font-weight: 600;
814
+ --plasma-typo-h4-bold-line-height: 1.5rem;
815
+ --plasma-typo-h5-font-size: 1rem;
816
+ --plasma-typo-h5-font-weight: 400;
817
+ --plasma-typo-h5-line-height: 1.375rem;
818
+ --plasma-typo-h5-bold-font-size: 1rem;
819
+ --plasma-typo-h5-bold-font-weight: 600;
820
+ --plasma-typo-h5-bold-line-height: 1.375rem;
821
+ --plasma-typo-body-l-font-size: 1.125rem;
822
+ --plasma-typo-body-l-font-weight: 400;
823
+ --plasma-typo-body-l-line-height: 1.375rem;
824
+ --plasma-typo-body-l-bold-font-size: 1.125rem;
825
+ --plasma-typo-body-l-bold-font-weight: 600;
826
+ --plasma-typo-body-l-bold-line-height: 1.375rem;
827
+ --plasma-typo-body-m-font-size: 1rem;
828
+ --plasma-typo-body-m-font-weight: 400;
829
+ --plasma-typo-body-m-line-height: 1.25rem;
830
+ --plasma-typo-body-m-bold-font-size: 1rem;
831
+ --plasma-typo-body-m-bold-font-weight: 600;
832
+ --plasma-typo-body-m-bold-line-height: 1.25rem;
833
+ --plasma-typo-body-s-font-size: 0.875rem;
834
+ --plasma-typo-body-s-font-weight: 400;
835
+ --plasma-typo-body-s-line-height: 1.125rem;
836
+ --plasma-typo-body-s-bold-font-size: 0.875rem;
837
+ --plasma-typo-body-s-bold-font-weight: 600;
838
+ --plasma-typo-body-s-bold-line-height: 1.125rem;
839
+ --plasma-typo-body-xs-font-size: 0.75rem;
840
+ --plasma-typo-body-xs-font-weight: 400;
841
+ --plasma-typo-body-xs-line-height: 0.875rem;
842
+ --plasma-typo-body-xs-bold-font-size: 0.75rem;
843
+ --plasma-typo-body-xs-bold-font-weight: 600;
844
+ --plasma-typo-body-xs-bold-line-height: 0.875rem;
845
+ --plasma-typo-body-xxs-font-size: 0.625rem;
846
+ --plasma-typo-body-xxs-font-weight: 400;
847
+ --plasma-typo-body-xxs-line-height: 0.75rem;
848
+ --plasma-typo-body-xxs-bold-font-size: 0.625rem;
849
+ --plasma-typo-body-xxs-bold-font-weight: 600;
850
+ --plasma-typo-body-xxs-bold-line-height: 0.75rem;
851
+ --plasma-typo-text-l-font-size: 1.25rem;
852
+ --plasma-typo-text-l-font-weight: 400;
853
+ --plasma-typo-text-l-line-height: 1.75rem;
854
+ --plasma-typo-text-l-bold-font-size: 1.25rem;
855
+ --plasma-typo-text-l-bold-font-weight: 600;
856
+ --plasma-typo-text-l-bold-line-height: 1.75rem;
857
+ --plasma-typo-text-m-font-size: 1rem;
858
+ --plasma-typo-text-m-font-weight: 400;
859
+ --plasma-typo-text-m-line-height: 1.5rem;
860
+ --plasma-typo-text-m-bold-font-size: 1rem;
861
+ --plasma-typo-text-m-bold-font-weight: 600;
862
+ --plasma-typo-text-m-bold-line-height: 1.5rem;
863
+ --plasma-typo-text-s-font-size: 0.875rem;
864
+ --plasma-typo-text-s-font-weight: 400;
865
+ --plasma-typo-text-s-line-height: 1.25rem;
866
+ --plasma-typo-text-s-bold-font-size: 0.875rem;
867
+ --plasma-typo-text-s-bold-font-weight: 600;
868
+ --plasma-typo-text-s-bold-line-height: 1.25rem;
869
+ --plasma-typo-text-xs-font-size: 0.75rem;
870
+ --plasma-typo-text-xs-font-weight: 400;
871
+ --plasma-typo-text-xs-line-height: 1rem;
872
+ --plasma-typo-text-xs-bold-font-size: 0.75rem;
873
+ --plasma-typo-text-xs-bold-font-weight: 600;
874
+ --plasma-typo-text-xs-bold-line-height: 1rem;
875
+ }
876
+ }
877
+
878
+ @media (min-width: 960px) {
879
+ .light,
880
+ .dark {
881
+ --plasma-typo-dspl-l-font-size: 8rem;
882
+ --plasma-typo-dspl-l-font-weight: 300;
883
+ --plasma-typo-dspl-l-line-height: 8rem;
884
+ --plasma-typo-dspl-l-bold-font-size: 8rem;
885
+ --plasma-typo-dspl-l-bold-font-weight: 600;
886
+ --plasma-typo-dspl-l-bold-line-height: 8rem;
887
+ --plasma-typo-dspl-m-font-size: 5.5rem;
888
+ --plasma-typo-dspl-m-font-weight: 300;
889
+ --plasma-typo-dspl-m-line-height: 5.75rem;
890
+ --plasma-typo-dspl-m-bold-font-size: 5.5rem;
891
+ --plasma-typo-dspl-m-bold-font-weight: 600;
892
+ --plasma-typo-dspl-m-bold-line-height: 5.75rem;
893
+ --plasma-typo-dspl-s-font-size: 4rem;
894
+ --plasma-typo-dspl-s-font-weight: 300;
895
+ --plasma-typo-dspl-s-line-height: 4.25rem;
896
+ --plasma-typo-dspl-s-bold-font-size: 4rem;
897
+ --plasma-typo-dspl-s-bold-font-weight: 600;
898
+ --plasma-typo-dspl-s-bold-line-height: 4.25rem;
899
+ --plasma-typo-h1-font-size: 3rem;
900
+ --plasma-typo-h1-font-weight: 400;
901
+ --plasma-typo-h1-line-height: 3.375rem;
902
+ --plasma-typo-h1-bold-font-size: 3rem;
903
+ --plasma-typo-h1-bold-font-weight: 600;
904
+ --plasma-typo-h1-bold-line-height: 3.375rem;
905
+ --plasma-typo-h2-font-size: 2rem;
906
+ --plasma-typo-h2-font-weight: 400;
907
+ --plasma-typo-h2-line-height: 2.375rem;
908
+ --plasma-typo-h2-bold-font-size: 2rem;
909
+ --plasma-typo-h2-bold-font-weight: 600;
910
+ --plasma-typo-h2-bold-line-height: 2.375rem;
911
+ --plasma-typo-h3-font-size: 1.5rem;
912
+ --plasma-typo-h3-font-weight: 400;
913
+ --plasma-typo-h3-line-height: 1.875rem;
914
+ --plasma-typo-h3-bold-font-size: 1.5rem;
915
+ --plasma-typo-h3-bold-font-weight: 600;
916
+ --plasma-typo-h3-bold-line-height: 1.875rem;
917
+ --plasma-typo-h4-font-size: 1.25rem;
918
+ --plasma-typo-h4-font-weight: 400;
919
+ --plasma-typo-h4-line-height: 1.625rem;
920
+ --plasma-typo-h4-bold-font-size: 1.25rem;
921
+ --plasma-typo-h4-bold-font-weight: 600;
922
+ --plasma-typo-h4-bold-line-height: 1.625rem;
923
+ --plasma-typo-h5-font-size: 1.125rem;
924
+ --plasma-typo-h5-font-weight: 400;
925
+ --plasma-typo-h5-line-height: 1.5rem;
926
+ --plasma-typo-h5-bold-font-size: 1.125rem;
927
+ --plasma-typo-h5-bold-font-weight: 600;
928
+ --plasma-typo-h5-bold-line-height: 1.5rem;
929
+ --plasma-typo-body-l-font-size: 1.125rem;
930
+ --plasma-typo-body-l-font-weight: 400;
931
+ --plasma-typo-body-l-line-height: 1.375rem;
932
+ --plasma-typo-body-l-bold-font-size: 1.125rem;
933
+ --plasma-typo-body-l-bold-font-weight: 600;
934
+ --plasma-typo-body-l-bold-line-height: 1.375rem;
935
+ --plasma-typo-body-m-font-size: 1rem;
936
+ --plasma-typo-body-m-font-weight: 400;
937
+ --plasma-typo-body-m-line-height: 1.25rem;
938
+ --plasma-typo-body-m-bold-font-size: 1rem;
939
+ --plasma-typo-body-m-bold-font-weight: 600;
940
+ --plasma-typo-body-m-bold-line-height: 1.25rem;
941
+ --plasma-typo-body-s-font-size: 0.875rem;
942
+ --plasma-typo-body-s-font-weight: 400;
943
+ --plasma-typo-body-s-line-height: 1.125rem;
944
+ --plasma-typo-body-s-bold-font-size: 0.875rem;
945
+ --plasma-typo-body-s-bold-font-weight: 600;
946
+ --plasma-typo-body-s-bold-line-height: 1.125rem;
947
+ --plasma-typo-body-xs-font-size: 0.75rem;
948
+ --plasma-typo-body-xs-font-weight: 400;
949
+ --plasma-typo-body-xs-line-height: 0.875rem;
950
+ --plasma-typo-body-xs-bold-font-size: 0.75rem;
951
+ --plasma-typo-body-xs-bold-font-weight: 600;
952
+ --plasma-typo-body-xs-bold-line-height: 0.875rem;
953
+ --plasma-typo-body-xxs-font-size: 0.625rem;
954
+ --plasma-typo-body-xxs-font-weight: 400;
955
+ --plasma-typo-body-xxs-line-height: 0.75rem;
956
+ --plasma-typo-body-xxs-bold-font-size: 0.625rem;
957
+ --plasma-typo-body-xxs-bold-font-weight: 600;
958
+ --plasma-typo-body-xxs-bold-line-height: 0.75rem;
959
+ --plasma-typo-text-l-font-size: 1.5rem;
960
+ --plasma-typo-text-l-font-weight: 400;
961
+ --plasma-typo-text-l-line-height: 2rem;
962
+ --plasma-typo-text-l-bold-font-size: 1.5rem;
963
+ --plasma-typo-text-l-bold-font-weight: 600;
964
+ --plasma-typo-text-l-bold-line-height: 2rem;
965
+ --plasma-typo-text-m-font-size: 1.125rem;
966
+ --plasma-typo-text-m-font-weight: 400;
967
+ --plasma-typo-text-m-line-height: 1.625rem;
968
+ --plasma-typo-text-m-bold-font-size: 1.125rem;
969
+ --plasma-typo-text-m-bold-font-weight: 600;
970
+ --plasma-typo-text-m-bold-line-height: 1.625rem;
971
+ --plasma-typo-text-s-font-size: 0.875rem;
972
+ --plasma-typo-text-s-font-weight: 400;
973
+ --plasma-typo-text-s-line-height: 1.25rem;
974
+ --plasma-typo-text-s-bold-font-size: 0.875rem;
975
+ --plasma-typo-text-s-bold-font-weight: 600;
976
+ --plasma-typo-text-s-bold-line-height: 1.25rem;
977
+ --plasma-typo-text-xs-font-size: 0.75rem;
978
+ --plasma-typo-text-xs-font-weight: 400;
979
+ --plasma-typo-text-xs-line-height: 1rem;
980
+ --plasma-typo-text-xs-bold-font-size: 0.75rem;
981
+ --plasma-typo-text-xs-bold-font-weight: 600;
982
+ --plasma-typo-text-xs-bold-line-height: 1rem;
983
+ }
399
984
  }