indicator-ui 0.0.4 → 0.0.6

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 (75) hide show
  1. package/dist/index.css +1588 -212
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.js +1550 -198
  4. package/dist/index.js.map +1 -1
  5. package/dist/scss/styles/colors/index.scss +3 -1
  6. package/dist/scss/styles/colors/primary-var.scss +56 -0
  7. package/dist/scss/styles/colors/secondary-var.scss +15 -0
  8. package/dist/scss/ui/Buttons/styles/mixins/properties/link-black.scss +4 -4
  9. package/dist/scss/ui/Buttons/styles/mixins/properties/link-color.scss +4 -4
  10. package/dist/scss/ui/Buttons/styles/mixins/properties/link-gray.scss +4 -4
  11. package/dist/scss/ui/Buttons/styles/mixins/properties/primary.scss +6 -6
  12. package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-color.scss +7 -7
  13. package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-gray.scss +8 -8
  14. package/dist/scss/ui/Buttons/styles/mixins/properties/tab-active.scss +5 -5
  15. package/dist/scss/ui/Buttons/styles/mixins/properties/tab.scss +6 -6
  16. package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-color.scss +4 -4
  17. package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-gray.scss +4 -4
  18. package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-white.scss +4 -4
  19. package/dist/scss/ui/Buttons/styles/mixins/properties/warning-primary.scss +3 -3
  20. package/dist/scss/ui/Buttons/styles/mixins/properties/warning-secondary-color.scss +6 -6
  21. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputField/CustomInput.scss +126 -0
  22. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputField/CustomInputField.scss +33 -0
  23. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputField/CustomTextareaInput.scss +30 -0
  24. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputField/index.scss +2 -0
  25. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputWrapper/CustomInputWrapper.scss +55 -0
  26. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputWrapper/config.scss +5 -0
  27. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputWrapper/index.scss +1 -0
  28. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomOptionsInput/index.scss +48 -0
  29. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSelectField/CustomSelectField.scss +54 -0
  30. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSelectField/CustomSelectFieldOption.scss +50 -0
  31. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSelectField/CustomSelectFieldViewField.scss +28 -0
  32. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSelectField/index.scss +1 -0
  33. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSwitchersField/CustomSwitchersField.scss +17 -0
  34. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSwitchersField/components/index.scss +1 -0
  35. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSwitchersField/components/option.scss +34 -0
  36. package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSwitchersField/index.scss +1 -0
  37. package/dist/scss/ui/FormBuilder/styles/CustomFields/index.scss +5 -0
  38. package/dist/scss/ui/InputFields/FlexField/styles/mixins/flexField.scss +84 -8
  39. package/dist/scss/ui/InputFields/InputFieldWrapper/styles/mixins/inputFieldWrapper.scss +6 -6
  40. package/dist/scss/ui/InputFields/RadioField/styles/mixins/radioField.scss +5 -5
  41. package/dist/scss/ui/InputFields/SelectField/styles/mixins/selectField.scss +5 -5
  42. package/dist/scss/ui/InputFields/SwitcherField/styles/mixins/switcherField.scss +8 -8
  43. package/dist/scss/ui/InputFields/TextareaField/styles/mixin/textareaField.scss +7 -7
  44. package/dist/scss/ui/MicroButton/styles/mixins/properties/color-fill.scss +5 -5
  45. package/dist/scss/ui/MicroButton/styles/mixins/properties/color-hover.scss +3 -3
  46. package/dist/scss/ui/MicroButton/styles/mixins/properties/color.scss +3 -3
  47. package/dist/scss/ui/MicroButton/styles/mixins/properties/dark.scss +1 -1
  48. package/dist/scss/ui/MicroButton/styles/mixins/properties/gray-fill.scss +5 -5
  49. package/dist/scss/ui/MicroButton/styles/mixins/properties/gray.scss +3 -3
  50. package/dist/scss/ui/MicroButton/styles/mixins/properties/light.scss +3 -3
  51. package/dist/scss/ui/MicroButton/styles/mixins/properties/red-fill.scss +5 -5
  52. package/dist/scss/ui/MicroButton/styles/mixins/properties/red-hover.scss +3 -3
  53. package/dist/types/src/test/pages/FormBuilderPage.d.ts +1 -0
  54. package/dist/types/src/ui/Buttons/types/ButtonTypes.d.ts +8 -1
  55. package/dist/types/src/ui/Buttons/ui/Button.d.ts +1 -1
  56. package/dist/types/src/ui/FormBuilder/consts/index.d.ts +2 -0
  57. package/dist/types/src/ui/FormBuilder/index.d.ts +2 -0
  58. package/dist/types/src/ui/FormBuilder/lib/arrayFieldComponent.d.ts +5 -0
  59. package/dist/types/src/ui/FormBuilder/lib/blockComponent.d.ts +5 -0
  60. package/dist/types/src/ui/FormBuilder/lib/blockWrapperComponent.d.ts +5 -0
  61. package/dist/types/src/ui/FormBuilder/lib/customFieldWrapperComponent.d.ts +5 -0
  62. package/dist/types/src/ui/FormBuilder/lib/formBuilder.d.ts +4 -0
  63. package/dist/types/src/ui/FormBuilder/lib/formWrapperComponent.d.ts +5 -0
  64. package/dist/types/src/ui/FormBuilder/lib/index.d.ts +8 -0
  65. package/dist/types/src/ui/FormBuilder/lib/inputFieldComponent.d.ts +5 -0
  66. package/dist/types/src/ui/FormBuilder/lib/reactNodeComponent.d.ts +5 -0
  67. package/dist/types/src/ui/FormBuilder/schemes/index.d.ts +76 -0
  68. package/dist/types/src/ui/FormBuilder/styles/index.d.ts +1 -0
  69. package/dist/types/src/ui/FormBuilder/types/FormBuilderTypes.d.ts +56 -0
  70. package/dist/types/src/ui/FormBuilder/types/index.d.ts +2 -0
  71. package/dist/types/src/ui/FormBuilder/ui/FormBuilder.d.ts +5 -0
  72. package/dist/types/src/ui/FormBuilder/ui/index.d.ts +1 -0
  73. package/dist/types/src/ui/InputFields/FlexField/types/FlexFieldTypes.d.ts +11 -1
  74. package/dist/types/src/ui/index.d.ts +1 -0
  75. package/package.json +62 -87
package/dist/index.css CHANGED
@@ -19,6 +19,74 @@
19
19
  font-weight: 600;
20
20
  font-style: normal;
21
21
  }
22
+ :root {
23
+ --base-white: #FFFFFF;
24
+ --base-black: #000000;
25
+ --gray-25: #FCFCFD;
26
+ --gray-50: #F9FAFB;
27
+ --gray-100: #F2F4F7;
28
+ --gray-200: #EAECF0;
29
+ --gray-300: #D0D5DD;
30
+ --gray-400: #98A2B3;
31
+ --gray-500: #667085;
32
+ --gray-600: #475467;
33
+ --gray-700: #344054;
34
+ --gray-800: #1D2939;
35
+ --gray-900: #101828;
36
+ --gray-950: #0C111D;
37
+ --primary-25: #FCFAFF;
38
+ --primary-50: #F9F5FF;
39
+ --primary-100: #F4EBFF;
40
+ --primary-200: #E9D7FE;
41
+ --primary-300: #D6BBFB;
42
+ --primary-400: #B692F6;
43
+ --primary-500: #9E77ED;
44
+ --primary-600: #7F56D9;
45
+ --primary-700: #6941C6;
46
+ --primary-800: #53389E;
47
+ --primary-900: #42307D;
48
+ --primary-950: #2C1C5F;
49
+ --error-25: #FFFBFA;
50
+ --error-50: #FEF3F2;
51
+ --error-100: #FEE4E2;
52
+ --error-200: #FECDCA;
53
+ --error-300: #FDA29B;
54
+ --error-400: #F97066;
55
+ --error-500: #F04438;
56
+ --error-600: #D92D20;
57
+ --error-700: #B42318;
58
+ --error-800: #912018;
59
+ --error-900: #7A271A;
60
+ --error-950: #FEFDF0;
61
+ --warning-25: #FFFCF5;
62
+ --warning-50: #FFFAEB;
63
+ --warning-100: #FEF0C7;
64
+ --warning-200: #FEDF89;
65
+ --warning-300: #FEC84B;
66
+ --warning-400: #FDB022;
67
+ --warning-500: #F79009;
68
+ --warning-600: #DC6803;
69
+ --warning-700: #B54708;
70
+ --warning-800: #93370D;
71
+ --warning-900: #7A2E0E;
72
+ --warning-950: #4E1D09;
73
+ }
74
+
75
+ :root {
76
+ --blue-dark-25: #F5F8FF;
77
+ --blue-dark-50: #EFF4FF;
78
+ --blue-dark-100: #D1E0FF;
79
+ --blue-dark-200: #B2CCFF;
80
+ --blue-dark-300: #84ADFF;
81
+ --blue-dark-400: #528BFF;
82
+ --blue-dark-500: #2970FF;
83
+ --blue-dark-600: #155EEF;
84
+ --blue-dark-700: #004EEB;
85
+ --blue-dark-800: #0040C1;
86
+ --blue-dark-900: #00359E;
87
+ --blue-dark-950: #002266;
88
+ }
89
+
22
90
  .Buttons-module__button___I3yLe {
23
91
  display: flex;
24
92
  flex-direction: row;
@@ -135,111 +203,111 @@
135
203
  }
136
204
  .Buttons-module__button___I3yLe.Buttons-module__primary____crHN {
137
205
  border-radius: 8px;
138
- background-color: #2970FF;
206
+ background-color: var(--blue-dark-500);
139
207
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
140
208
  }
141
209
  .Buttons-module__button___I3yLe.Buttons-module__primary____crHN .Buttons-module__icon___U2AOU svg * {
142
- stroke: #FFFFFF;
210
+ stroke: var(--base-white);
143
211
  }
144
212
  .Buttons-module__button___I3yLe.Buttons-module__primary____crHN .Buttons-module__text___htxqX {
145
- color: #FFFFFF;
213
+ color: var(--base-white);
146
214
  }
147
215
  .Buttons-module__button___I3yLe.Buttons-module__primary____crHN:hover {
148
- background-color: #155EEF;
216
+ background-color: var(--blue-dark-600);
149
217
  }
150
218
  .Buttons-module__button___I3yLe.Buttons-module__primary____crHN:focus {
151
- background-color: #2970FF;
152
- box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
219
+ background-color: var(--blue-dark-500);
220
+ box-shadow: 0 0 0 4px var(--gray-100), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
153
221
  }
154
222
  .Buttons-module__button___I3yLe.Buttons-module__primary____crHN:disabled {
155
223
  opacity: 0.3;
156
224
  }
157
225
  .Buttons-module__button___I3yLe.Buttons-module__secondaryColor___GONLZ {
158
226
  border-radius: 8px;
159
- background-color: #FFFFFF;
160
- box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #B2CCFF;
227
+ background-color: var(--base-white);
228
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--blue-dark-200);
161
229
  }
162
230
  .Buttons-module__button___I3yLe.Buttons-module__secondaryColor___GONLZ .Buttons-module__icon___U2AOU svg * {
163
- stroke: #2970FF;
231
+ stroke: var(--blue-dark-500);
164
232
  }
165
233
  .Buttons-module__button___I3yLe.Buttons-module__secondaryColor___GONLZ .Buttons-module__text___htxqX {
166
- color: #2970FF;
234
+ color: var(--blue-dark-500);
167
235
  }
168
236
  .Buttons-module__button___I3yLe.Buttons-module__secondaryColor___GONLZ:hover {
169
- background-color: #EFF4FF;
170
- box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #84ADFF;
237
+ background-color: var(--blue-dark-50);
238
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--blue-dark-300);
171
239
  }
172
240
  .Buttons-module__button___I3yLe.Buttons-module__secondaryColor___GONLZ:focus {
173
- box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #84ADFF;
241
+ box-shadow: 0 0 0 4px var(--gray-100), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--blue-dark-300);
174
242
  }
175
243
  .Buttons-module__button___I3yLe.Buttons-module__secondaryColor___GONLZ:disabled {
176
244
  opacity: 0.5;
177
245
  }
178
246
  .Buttons-module__button___I3yLe.Buttons-module__secondaryGray___yu1Ne {
179
247
  border-radius: 8px;
180
- background-color: #FFFFFF;
181
- box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #D0D5DD;
248
+ background-color: var(--base-white);
249
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--gray-300);
182
250
  }
183
251
  .Buttons-module__button___I3yLe.Buttons-module__secondaryGray___yu1Ne .Buttons-module__icon___U2AOU svg * {
184
- stroke: #344054;
252
+ stroke: var(--gray-700);
185
253
  }
186
254
  .Buttons-module__button___I3yLe.Buttons-module__secondaryGray___yu1Ne .Buttons-module__text___htxqX {
187
- color: #344054;
255
+ color: var(--gray-700);
188
256
  }
189
257
  .Buttons-module__button___I3yLe.Buttons-module__secondaryGray___yu1Ne:hover {
190
- background-color: #F9FAFB;
191
- box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #D0D5DD;
258
+ background-color: var(--gray-50);
259
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--gray-300);
192
260
  }
193
261
  .Buttons-module__button___I3yLe.Buttons-module__secondaryGray___yu1Ne:hover .Buttons-module__text___htxqX {
194
- color: #1D2939;
262
+ color: var(--gray-800);
195
263
  }
196
264
  .Buttons-module__button___I3yLe.Buttons-module__secondaryGray___yu1Ne:focus {
197
- box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #D0D5DD;
265
+ box-shadow: 0 0 0 4px var(--gray-100), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--gray-300);
198
266
  }
199
267
  .Buttons-module__button___I3yLe.Buttons-module__secondaryGray___yu1Ne:disabled {
200
268
  opacity: 0.5;
201
269
  }
202
270
  .Buttons-module__button___I3yLe.Buttons-module__tertiaryWhite___QIZOq .Buttons-module__icon___U2AOU svg * {
203
- stroke: #D1E0FF;
271
+ stroke: var(--blue-dark-100);
204
272
  }
205
273
  .Buttons-module__button___I3yLe.Buttons-module__tertiaryWhite___QIZOq .Buttons-module__text___htxqX {
206
- color: #D1E0FF;
274
+ color: var(--blue-dark-100);
207
275
  }
208
276
  .Buttons-module__button___I3yLe.Buttons-module__tertiaryWhite___QIZOq:hover .Buttons-module__text___htxqX {
209
- color: #FFFFFF;
277
+ color: var(--base-white);
210
278
  }
211
279
  .Buttons-module__button___I3yLe.Buttons-module__tertiaryWhite___QIZOq:hover .Buttons-module__icon___U2AOU svg * {
212
- stroke: #FFFFFF;
280
+ stroke: var(--base-white);
213
281
  }
214
282
  .Buttons-module__button___I3yLe.Buttons-module__tertiaryWhite___QIZOq:disabled {
215
283
  opacity: 0.5;
216
284
  }
217
285
  .Buttons-module__button___I3yLe.Buttons-module__tertiaryColor___DwXbw .Buttons-module__icon___U2AOU svg * {
218
- stroke: #2970FF;
286
+ stroke: var(--blue-dark-500);
219
287
  }
220
288
  .Buttons-module__button___I3yLe.Buttons-module__tertiaryColor___DwXbw .Buttons-module__text___htxqX {
221
- color: #2970FF;
289
+ color: var(--blue-dark-500);
222
290
  }
223
291
  .Buttons-module__button___I3yLe.Buttons-module__tertiaryColor___DwXbw:hover .Buttons-module__text___htxqX {
224
- color: #004EEB;
292
+ color: var(--blue-dark-700);
225
293
  }
226
294
  .Buttons-module__button___I3yLe.Buttons-module__tertiaryColor___DwXbw:hover .Buttons-module__icon___U2AOU svg * {
227
- stroke: #004EEB;
295
+ stroke: var(--blue-dark-700);
228
296
  }
229
297
  .Buttons-module__button___I3yLe.Buttons-module__tertiaryColor___DwXbw:disabled {
230
298
  opacity: 0.5;
231
299
  }
232
300
  .Buttons-module__button___I3yLe.Buttons-module__tertiaryGray___y75cu .Buttons-module__icon___U2AOU svg * {
233
- stroke: #344054;
301
+ stroke: var(--gray-700);
234
302
  }
235
303
  .Buttons-module__button___I3yLe.Buttons-module__tertiaryGray___y75cu .Buttons-module__text___htxqX {
236
- color: #344054;
304
+ color: var(--gray-700);
237
305
  }
238
306
  .Buttons-module__button___I3yLe.Buttons-module__tertiaryGray___y75cu:hover .Buttons-module__text___htxqX {
239
- color: #101828;
307
+ color: var(--gray-900);
240
308
  }
241
309
  .Buttons-module__button___I3yLe.Buttons-module__tertiaryGray___y75cu:hover .Buttons-module__icon___U2AOU svg * {
242
- stroke: #101828;
310
+ stroke: var(--gray-900);
243
311
  }
244
312
  .Buttons-module__button___I3yLe.Buttons-module__tertiaryGray___y75cu:disabled {
245
313
  opacity: 0.5;
@@ -249,17 +317,17 @@
249
317
  gap: 4px;
250
318
  }
251
319
  .Buttons-module__button___I3yLe.Buttons-module__linkColor___Kg7EN .Buttons-module__icon___U2AOU svg * {
252
- stroke: #2970FF;
320
+ stroke: var(--blue-dark-500);
253
321
  }
254
322
  .Buttons-module__button___I3yLe.Buttons-module__linkColor___Kg7EN .Buttons-module__text___htxqX {
255
- color: #2970FF;
323
+ color: var(--blue-dark-500);
256
324
  padding: 0 !important;
257
325
  }
258
326
  .Buttons-module__button___I3yLe.Buttons-module__linkColor___Kg7EN:hover .Buttons-module__text___htxqX {
259
- color: #004EEB;
327
+ color: var(--blue-dark-700);
260
328
  }
261
329
  .Buttons-module__button___I3yLe.Buttons-module__linkColor___Kg7EN:hover .Buttons-module__icon___U2AOU svg * {
262
- stroke: #004EEB;
330
+ stroke: var(--blue-dark-700);
263
331
  }
264
332
  .Buttons-module__button___I3yLe.Buttons-module__linkColor___Kg7EN:disabled {
265
333
  opacity: 0.5;
@@ -269,17 +337,17 @@
269
337
  gap: 4px;
270
338
  }
271
339
  .Buttons-module__button___I3yLe.Buttons-module__linkBlack___WfA7t .Buttons-module__icon___U2AOU svg * {
272
- stroke: #344054;
340
+ stroke: var(--gray-700);
273
341
  }
274
342
  .Buttons-module__button___I3yLe.Buttons-module__linkBlack___WfA7t .Buttons-module__text___htxqX {
275
- color: #344054;
343
+ color: var(--gray-700);
276
344
  padding: 0 !important;
277
345
  }
278
346
  .Buttons-module__button___I3yLe.Buttons-module__linkBlack___WfA7t:hover .Buttons-module__text___htxqX {
279
- color: #101828;
347
+ color: var(--gray-900);
280
348
  }
281
349
  .Buttons-module__button___I3yLe.Buttons-module__linkBlack___WfA7t:hover .Buttons-module__icon___U2AOU svg * {
282
- stroke: #101828;
350
+ stroke: var(--gray-900);
283
351
  }
284
352
  .Buttons-module__button___I3yLe.Buttons-module__linkBlack___WfA7t:disabled {
285
353
  opacity: 0.5;
@@ -289,93 +357,93 @@
289
357
  gap: 4px;
290
358
  }
291
359
  .Buttons-module__button___I3yLe.Buttons-module__linkGray___CQYUd .Buttons-module__icon___U2AOU svg * {
292
- stroke: #98A2B3;
360
+ stroke: var(--gray-400);
293
361
  }
294
362
  .Buttons-module__button___I3yLe.Buttons-module__linkGray___CQYUd .Buttons-module__text___htxqX {
295
- color: #98A2B3;
363
+ color: var(--gray-400);
296
364
  padding: 0 !important;
297
365
  }
298
366
  .Buttons-module__button___I3yLe.Buttons-module__linkGray___CQYUd:hover .Buttons-module__text___htxqX {
299
- color: #667085;
367
+ color: var(--gray-500);
300
368
  }
301
369
  .Buttons-module__button___I3yLe.Buttons-module__linkGray___CQYUd:hover .Buttons-module__icon___U2AOU svg * {
302
- stroke: #667085;
370
+ stroke: var(--gray-500);
303
371
  }
304
372
  .Buttons-module__button___I3yLe.Buttons-module__linkGray___CQYUd:disabled {
305
373
  opacity: 0.5;
306
374
  }
307
375
  .Buttons-module__button___I3yLe.Buttons-module__tabActive___chlqq {
308
376
  border-radius: 6px;
309
- background-color: #FFFFFF;
377
+ background-color: var(--base-white);
310
378
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
311
379
  }
312
380
  .Buttons-module__button___I3yLe.Buttons-module__tabActive___chlqq .Buttons-module__icon___U2AOU svg * {
313
- stroke: #344054;
381
+ stroke: var(--gray-700);
314
382
  }
315
383
  .Buttons-module__button___I3yLe.Buttons-module__tabActive___chlqq .Buttons-module__text___htxqX {
316
- color: #344054;
384
+ color: var(--gray-700);
317
385
  }
318
386
  .Buttons-module__button___I3yLe.Buttons-module__tabActive___chlqq:hover .Buttons-module__icon___U2AOU svg * {
319
- stroke: #101828;
387
+ stroke: var(--gray-900);
320
388
  }
321
389
  .Buttons-module__button___I3yLe.Buttons-module__tabActive___chlqq:hover .Buttons-module__text___htxqX {
322
- color: #101828;
390
+ color: var(--gray-900);
323
391
  }
324
392
  .Buttons-module__button___I3yLe.Buttons-module__tabActive___chlqq:disabled {
325
393
  opacity: 0.5;
326
394
  }
327
395
  .Buttons-module__button___I3yLe.Buttons-module__tab___yBTjo {
328
396
  border-radius: 6px;
329
- background-color: #F2F4F7;
397
+ background-color: var(--gray-100);
330
398
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
331
399
  }
332
400
  .Buttons-module__button___I3yLe.Buttons-module__tab___yBTjo .Buttons-module__icon___U2AOU svg * {
333
- stroke: #667085;
401
+ stroke: var(--gray-500);
334
402
  }
335
403
  .Buttons-module__button___I3yLe.Buttons-module__tab___yBTjo .Buttons-module__text___htxqX {
336
- color: #667085;
404
+ color: var(--gray-500);
337
405
  }
338
406
  .Buttons-module__button___I3yLe.Buttons-module__tab___yBTjo:hover {
339
- background-color: #EAECF0;
407
+ background-color: var(--gray-200);
340
408
  }
341
409
  .Buttons-module__button___I3yLe.Buttons-module__tab___yBTjo:hover .Buttons-module__icon___U2AOU svg * {
342
- stroke: #1D2939;
410
+ stroke: var(--gray-800);
343
411
  }
344
412
  .Buttons-module__button___I3yLe.Buttons-module__tab___yBTjo:hover .Buttons-module__text___htxqX {
345
- color: #1D2939;
413
+ color: var(--gray-800);
346
414
  }
347
415
  .Buttons-module__button___I3yLe.Buttons-module__tab___yBTjo:disabled {
348
416
  opacity: 0.5;
349
417
  }
350
418
  .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__primary____crHN {
351
419
  border-radius: 8px;
352
- background-color: #F04438;
420
+ background-color: var(--error-500);
353
421
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
354
422
  }
355
423
  .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__primary____crHN:hover {
356
- background-color: #D92D20;
424
+ background-color: var(--error-600);
357
425
  }
358
426
  .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__primary____crHN:focus {
359
- background-color: #F04438;
427
+ background-color: var(--error-500);
360
428
  }
361
429
  .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__primary____crHN:disabled {
362
430
  opacity: 0.3;
363
431
  }
364
432
  .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__secondaryColor___GONLZ {
365
- box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #FECDCA;
433
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--error-200);
366
434
  }
367
435
  .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__secondaryColor___GONLZ .Buttons-module__icon___U2AOU svg * {
368
- stroke: #F04438;
436
+ stroke: var(--error-500);
369
437
  }
370
438
  .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__secondaryColor___GONLZ .Buttons-module__text___htxqX {
371
- color: #F04438;
439
+ color: var(--error-500);
372
440
  }
373
441
  .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__secondaryColor___GONLZ:hover {
374
- background-color: #FEF3F2;
375
- box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #F97066;
442
+ background-color: var(--error-50);
443
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--error-400);
376
444
  }
377
445
  .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__secondaryColor___GONLZ:focus {
378
- box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px #FECDCA;
446
+ box-shadow: 0 0 0 4px var(--gray-100), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922), 0 0 0 1px var(--error-200);
379
447
  }
380
448
  .Buttons-module__button___I3yLe.Buttons-module__warning___RaAeB.Buttons-module__secondaryColor___GONLZ:disabled {
381
449
  opacity: 0.5;
@@ -401,6 +469,74 @@
401
469
  font-weight: 600;
402
470
  font-style: normal;
403
471
  }
472
+ :root {
473
+ --base-white: #FFFFFF;
474
+ --base-black: #000000;
475
+ --gray-25: #FCFCFD;
476
+ --gray-50: #F9FAFB;
477
+ --gray-100: #F2F4F7;
478
+ --gray-200: #EAECF0;
479
+ --gray-300: #D0D5DD;
480
+ --gray-400: #98A2B3;
481
+ --gray-500: #667085;
482
+ --gray-600: #475467;
483
+ --gray-700: #344054;
484
+ --gray-800: #1D2939;
485
+ --gray-900: #101828;
486
+ --gray-950: #0C111D;
487
+ --primary-25: #FCFAFF;
488
+ --primary-50: #F9F5FF;
489
+ --primary-100: #F4EBFF;
490
+ --primary-200: #E9D7FE;
491
+ --primary-300: #D6BBFB;
492
+ --primary-400: #B692F6;
493
+ --primary-500: #9E77ED;
494
+ --primary-600: #7F56D9;
495
+ --primary-700: #6941C6;
496
+ --primary-800: #53389E;
497
+ --primary-900: #42307D;
498
+ --primary-950: #2C1C5F;
499
+ --error-25: #FFFBFA;
500
+ --error-50: #FEF3F2;
501
+ --error-100: #FEE4E2;
502
+ --error-200: #FECDCA;
503
+ --error-300: #FDA29B;
504
+ --error-400: #F97066;
505
+ --error-500: #F04438;
506
+ --error-600: #D92D20;
507
+ --error-700: #B42318;
508
+ --error-800: #912018;
509
+ --error-900: #7A271A;
510
+ --error-950: #FEFDF0;
511
+ --warning-25: #FFFCF5;
512
+ --warning-50: #FFFAEB;
513
+ --warning-100: #FEF0C7;
514
+ --warning-200: #FEDF89;
515
+ --warning-300: #FEC84B;
516
+ --warning-400: #FDB022;
517
+ --warning-500: #F79009;
518
+ --warning-600: #DC6803;
519
+ --warning-700: #B54708;
520
+ --warning-800: #93370D;
521
+ --warning-900: #7A2E0E;
522
+ --warning-950: #4E1D09;
523
+ }
524
+
525
+ :root {
526
+ --blue-dark-25: #F5F8FF;
527
+ --blue-dark-50: #EFF4FF;
528
+ --blue-dark-100: #D1E0FF;
529
+ --blue-dark-200: #B2CCFF;
530
+ --blue-dark-300: #84ADFF;
531
+ --blue-dark-400: #528BFF;
532
+ --blue-dark-500: #2970FF;
533
+ --blue-dark-600: #155EEF;
534
+ --blue-dark-700: #004EEB;
535
+ --blue-dark-800: #0040C1;
536
+ --blue-dark-900: #00359E;
537
+ --blue-dark-950: #002266;
538
+ }
539
+
404
540
  .MicroButton-module__button___QMj95 {
405
541
  width: fit-content;
406
542
  height: fit-content;
@@ -418,19 +554,19 @@
418
554
  background: none;
419
555
  }
420
556
  .MicroButton-module__button___QMj95.MicroButton-module__light___pwfS3 svg * {
421
- stroke: #98A2B3;
557
+ stroke: var(--gray-400);
422
558
  }
423
559
  .MicroButton-module__button___QMj95.MicroButton-module__light___pwfS3:hover {
424
- background-color: #EAECF0;
560
+ background-color: var(--gray-200);
425
561
  }
426
562
  .MicroButton-module__button___QMj95.MicroButton-module__light___pwfS3:hover svg * {
427
- stroke: #475467;
563
+ stroke: var(--gray-600);
428
564
  }
429
565
  .MicroButton-module__button___QMj95.MicroButton-module__dark___YCw8u {
430
566
  background-color: rgba(12, 17, 29, 0.5019607843);
431
567
  }
432
568
  .MicroButton-module__button___QMj95.MicroButton-module__dark___YCw8u svg * {
433
- stroke: #FFFFFF;
569
+ stroke: var(--base-white);
434
570
  }
435
571
  .MicroButton-module__button___QMj95.MicroButton-module__dark___YCw8u:hover {
436
572
  background-color: rgba(12, 17, 29, 0.8);
@@ -439,88 +575,88 @@
439
575
  background: none;
440
576
  }
441
577
  .MicroButton-module__button___QMj95.MicroButton-module__gray___pwAy2 svg * {
442
- stroke: #667085;
578
+ stroke: var(--gray-500);
443
579
  }
444
580
  .MicroButton-module__button___QMj95.MicroButton-module__gray___pwAy2:hover {
445
- background-color: #FFFFFF;
581
+ background-color: var(--base-white);
446
582
  }
447
583
  .MicroButton-module__button___QMj95.MicroButton-module__gray___pwAy2:hover svg * {
448
- stroke: #475467;
584
+ stroke: var(--gray-600);
449
585
  }
450
586
  .MicroButton-module__button___QMj95.MicroButton-module__color___RO79e {
451
587
  background: none;
452
588
  }
453
589
  .MicroButton-module__button___QMj95.MicroButton-module__color___RO79e svg * {
454
- stroke: #2970FF;
590
+ stroke: var(--blue-dark-500);
455
591
  }
456
592
  .MicroButton-module__button___QMj95.MicroButton-module__color___RO79e:hover {
457
- background-color: #FFFFFF;
593
+ background-color: var(--base-white);
458
594
  }
459
595
  .MicroButton-module__button___QMj95.MicroButton-module__color___RO79e:hover svg * {
460
- stroke: #155EEF;
596
+ stroke: var(--blue-dark-600);
461
597
  }
462
598
  .MicroButton-module__button___QMj95.MicroButton-module__colorHover___Rvxx7 {
463
599
  background: none;
464
600
  }
465
601
  .MicroButton-module__button___QMj95.MicroButton-module__colorHover___Rvxx7 svg * {
466
- stroke: #528BFF;
602
+ stroke: var(--blue-dark-400);
467
603
  }
468
604
  .MicroButton-module__button___QMj95.MicroButton-module__colorHover___Rvxx7:hover {
469
- background-color: #D1E0FF;
605
+ background-color: var(--blue-dark-100);
470
606
  }
471
607
  .MicroButton-module__button___QMj95.MicroButton-module__colorHover___Rvxx7:hover svg * {
472
- stroke: #2970FF;
608
+ stroke: var(--blue-dark-500);
473
609
  }
474
610
  .MicroButton-module__button___QMj95.MicroButton-module__redHover____WGXq {
475
611
  background: none;
476
612
  }
477
613
  .MicroButton-module__button___QMj95.MicroButton-module__redHover____WGXq svg * {
478
- stroke: #F97066;
614
+ stroke: var(--error-400);
479
615
  }
480
616
  .MicroButton-module__button___QMj95.MicroButton-module__redHover____WGXq:hover {
481
- background-color: #FEE4E2;
617
+ background-color: var(--error-100);
482
618
  }
483
619
  .MicroButton-module__button___QMj95.MicroButton-module__redHover____WGXq:hover svg * {
484
- stroke: #F04438;
620
+ stroke: var(--error-500);
485
621
  }
486
622
  .MicroButton-module__button___QMj95.MicroButton-module__colorFill___yLr74 {
487
- background: #FFFFFF;
488
- box-shadow: 0 0 0 1px #B2CCFF;
623
+ background: var(--base-white);
624
+ box-shadow: 0 0 0 1px var(--blue-dark-200);
489
625
  }
490
626
  .MicroButton-module__button___QMj95.MicroButton-module__colorFill___yLr74 svg * {
491
- stroke: #2970FF;
627
+ stroke: var(--blue-dark-500);
492
628
  }
493
629
  .MicroButton-module__button___QMj95.MicroButton-module__colorFill___yLr74:hover {
494
- background: #EFF4FF;
630
+ background: var(--blue-dark-50);
495
631
  }
496
632
  .MicroButton-module__button___QMj95.MicroButton-module__colorFill___yLr74:hover svg * {
497
- stroke: #2970FF;
633
+ stroke: var(--blue-dark-500);
498
634
  }
499
635
  .MicroButton-module__button___QMj95.MicroButton-module__grayFill___Rr1s4 {
500
- background: #FFFFFF;
501
- box-shadow: 0 0 0 1px #D0D5DD;
636
+ background: var(--base-white);
637
+ box-shadow: 0 0 0 1px var(--gray-300);
502
638
  }
503
639
  .MicroButton-module__button___QMj95.MicroButton-module__grayFill___Rr1s4 svg * {
504
- stroke: #344054;
640
+ stroke: var(--gray-700);
505
641
  }
506
642
  .MicroButton-module__button___QMj95.MicroButton-module__grayFill___Rr1s4:hover {
507
- background: #F9FAFB;
643
+ background: var(--gray-50);
508
644
  }
509
645
  .MicroButton-module__button___QMj95.MicroButton-module__grayFill___Rr1s4:hover svg * {
510
- stroke: #101828;
646
+ stroke: var(--gray-900);
511
647
  }
512
648
  .MicroButton-module__button___QMj95.MicroButton-module__redFill___ANZAX {
513
- background: #FFFFFF;
514
- box-shadow: 0 0 0 1px #FDA29B;
649
+ background: var(--base-white);
650
+ box-shadow: 0 0 0 1px var(--error-300);
515
651
  }
516
652
  .MicroButton-module__button___QMj95.MicroButton-module__redFill___ANZAX svg * {
517
- stroke: #F04438;
653
+ stroke: var(--error-500);
518
654
  }
519
655
  .MicroButton-module__button___QMj95.MicroButton-module__redFill___ANZAX:hover {
520
- background: #FEF3F2;
656
+ background: var(--error-50);
521
657
  }
522
658
  .MicroButton-module__button___QMj95.MicroButton-module__redFill___ANZAX:hover svg * {
523
- stroke: #D92D20;
659
+ stroke: var(--error-600);
524
660
  }
525
661
  .MicroButton-module__button___QMj95.MicroButton-module__size14___qZD63 {
526
662
  border-radius: 3px;
@@ -583,13 +719,81 @@
583
719
  font-weight: 600;
584
720
  font-style: normal;
585
721
  }
722
+ :root {
723
+ --base-white: #FFFFFF;
724
+ --base-black: #000000;
725
+ --gray-25: #FCFCFD;
726
+ --gray-50: #F9FAFB;
727
+ --gray-100: #F2F4F7;
728
+ --gray-200: #EAECF0;
729
+ --gray-300: #D0D5DD;
730
+ --gray-400: #98A2B3;
731
+ --gray-500: #667085;
732
+ --gray-600: #475467;
733
+ --gray-700: #344054;
734
+ --gray-800: #1D2939;
735
+ --gray-900: #101828;
736
+ --gray-950: #0C111D;
737
+ --primary-25: #FCFAFF;
738
+ --primary-50: #F9F5FF;
739
+ --primary-100: #F4EBFF;
740
+ --primary-200: #E9D7FE;
741
+ --primary-300: #D6BBFB;
742
+ --primary-400: #B692F6;
743
+ --primary-500: #9E77ED;
744
+ --primary-600: #7F56D9;
745
+ --primary-700: #6941C6;
746
+ --primary-800: #53389E;
747
+ --primary-900: #42307D;
748
+ --primary-950: #2C1C5F;
749
+ --error-25: #FFFBFA;
750
+ --error-50: #FEF3F2;
751
+ --error-100: #FEE4E2;
752
+ --error-200: #FECDCA;
753
+ --error-300: #FDA29B;
754
+ --error-400: #F97066;
755
+ --error-500: #F04438;
756
+ --error-600: #D92D20;
757
+ --error-700: #B42318;
758
+ --error-800: #912018;
759
+ --error-900: #7A271A;
760
+ --error-950: #FEFDF0;
761
+ --warning-25: #FFFCF5;
762
+ --warning-50: #FFFAEB;
763
+ --warning-100: #FEF0C7;
764
+ --warning-200: #FEDF89;
765
+ --warning-300: #FEC84B;
766
+ --warning-400: #FDB022;
767
+ --warning-500: #F79009;
768
+ --warning-600: #DC6803;
769
+ --warning-700: #B54708;
770
+ --warning-800: #93370D;
771
+ --warning-900: #7A2E0E;
772
+ --warning-950: #4E1D09;
773
+ }
774
+
775
+ :root {
776
+ --blue-dark-25: #F5F8FF;
777
+ --blue-dark-50: #EFF4FF;
778
+ --blue-dark-100: #D1E0FF;
779
+ --blue-dark-200: #B2CCFF;
780
+ --blue-dark-300: #84ADFF;
781
+ --blue-dark-400: #528BFF;
782
+ --blue-dark-500: #2970FF;
783
+ --blue-dark-600: #155EEF;
784
+ --blue-dark-700: #004EEB;
785
+ --blue-dark-800: #0040C1;
786
+ --blue-dark-900: #00359E;
787
+ --blue-dark-950: #002266;
788
+ }
789
+
586
790
  .CalendarDay-module__calendarDay___SMwl6 {
587
791
  position: relative;
588
792
  flex: none;
589
793
  width: 40px;
590
794
  height: 40px;
591
795
  border-radius: 8px;
592
- background-color: #FFFFFF;
796
+ background-color: var(--base-white);
593
797
  }
594
798
  .CalendarDay-module__calendarDay___SMwl6 {
595
799
  display: flex;
@@ -613,7 +817,7 @@
613
817
  width: 4px;
614
818
  height: 4px;
615
819
  border-radius: 50%;
616
- background-color: #528BFF;
820
+ background-color: var(--blue-dark-400);
617
821
  }
618
822
  .CalendarDay-module__calendarDay___SMwl6 .CalendarDay-module__day___ZPsML {
619
823
  flex: 1;
@@ -628,7 +832,7 @@
628
832
  .CalendarDay-module__calendarDay___SMwl6 .CalendarDay-module__day___ZPsML {
629
833
  font-size: 16px;
630
834
  line-height: 16px;
631
- color: #344054;
835
+ color: var(--gray-700);
632
836
  font-weight: 400;
633
837
  font-family: "Golos UI", sans-serif;
634
838
  font-stretch: normal;
@@ -643,7 +847,7 @@
643
847
  .CalendarDay-module__calendarDay___SMwl6 .CalendarDay-module__info___pRAf0 {
644
848
  font-size: 10px;
645
849
  line-height: 10px;
646
- color: #98A2B3;
850
+ color: var(--gray-400);
647
851
  font-weight: 400;
648
852
  font-family: "Golos UI", sans-serif;
649
853
  font-stretch: normal;
@@ -651,61 +855,61 @@
651
855
  font-variant: normal;
652
856
  }
653
857
  .CalendarDay-module__calendarDay___SMwl6:hover {
654
- background-color: #F2F4F7;
858
+ background-color: var(--gray-100);
655
859
  }
656
860
  .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__holiday___gzeHn .CalendarDay-module__day___ZPsML {
657
- color: #F04438;
861
+ color: var(--error-500);
658
862
  }
659
863
  .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__active___KnfaY {
660
- background-color: #2970FF;
864
+ background-color: var(--blue-dark-500);
661
865
  }
662
866
  .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__active___KnfaY .CalendarDay-module__mark___plkAJ::after {
663
- background-color: #FFFFFF;
867
+ background-color: var(--base-white);
664
868
  }
665
869
  .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__active___KnfaY .CalendarDay-module__day___ZPsML {
666
- color: #FFFFFF;
870
+ color: var(--base-white);
667
871
  }
668
872
  .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__active___KnfaY .CalendarDay-module__info___pRAf0 {
669
- color: #84ADFF;
873
+ color: var(--blue-dark-300);
670
874
  }
671
875
  .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__active___KnfaY:hover {
672
- background-color: #155EEF;
876
+ background-color: var(--blue-dark-600);
673
877
  }
674
878
  .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__filter___VvlBz {
675
- background-color: #F2F4F7;
879
+ background-color: var(--gray-100);
676
880
  }
677
881
  .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__filter___VvlBz:hover {
678
- background-color: #EAECF0;
882
+ background-color: var(--gray-200);
679
883
  }
680
884
  .CalendarDay-module__calendarDay___SMwl6.CalendarDay-module__filter___VvlBz:before {
681
885
  content: "";
682
886
  width: 60px;
683
887
  height: 40px;
684
888
  position: absolute;
685
- background-color: #F2F4F7;
889
+ background-color: var(--gray-100);
686
890
  z-index: -1;
687
891
  }
688
892
  .CalendarDay-module__calendarDay___SMwl6:disabled {
689
- background-color: #FFFFFF;
893
+ background-color: var(--base-white);
690
894
  z-index: 1;
691
895
  }
692
896
  .CalendarDay-module__calendarDay___SMwl6:disabled:before {
693
- background: #FFFFFF;
897
+ background: var(--base-white);
694
898
  width: 100%;
695
899
  height: 100%;
696
900
  }
697
901
  .CalendarDay-module__calendarDay___SMwl6:disabled .CalendarDay-module__mark___plkAJ::after {
698
- background-color: #D0D5DD;
902
+ background-color: var(--gray-300);
699
903
  }
700
904
  .CalendarDay-module__calendarDay___SMwl6:disabled .CalendarDay-module__day___ZPsML {
701
- color: #98A2B3;
905
+ color: var(--gray-400);
702
906
  font-family: "Golos UI", sans-serif;
703
907
  font-stretch: normal;
704
908
  font-style: normal;
705
909
  font-variant: normal;
706
910
  }
707
911
  .CalendarDay-module__calendarDay___SMwl6:disabled .CalendarDay-module__info___pRAf0 {
708
- color: #D0D5DD;
912
+ color: var(--gray-300);
709
913
  font-family: "Golos UI", sans-serif;
710
914
  font-stretch: normal;
711
915
  font-style: normal;
@@ -732,12 +936,80 @@
732
936
  font-weight: 600;
733
937
  font-style: normal;
734
938
  }
939
+ :root {
940
+ --base-white: #FFFFFF;
941
+ --base-black: #000000;
942
+ --gray-25: #FCFCFD;
943
+ --gray-50: #F9FAFB;
944
+ --gray-100: #F2F4F7;
945
+ --gray-200: #EAECF0;
946
+ --gray-300: #D0D5DD;
947
+ --gray-400: #98A2B3;
948
+ --gray-500: #667085;
949
+ --gray-600: #475467;
950
+ --gray-700: #344054;
951
+ --gray-800: #1D2939;
952
+ --gray-900: #101828;
953
+ --gray-950: #0C111D;
954
+ --primary-25: #FCFAFF;
955
+ --primary-50: #F9F5FF;
956
+ --primary-100: #F4EBFF;
957
+ --primary-200: #E9D7FE;
958
+ --primary-300: #D6BBFB;
959
+ --primary-400: #B692F6;
960
+ --primary-500: #9E77ED;
961
+ --primary-600: #7F56D9;
962
+ --primary-700: #6941C6;
963
+ --primary-800: #53389E;
964
+ --primary-900: #42307D;
965
+ --primary-950: #2C1C5F;
966
+ --error-25: #FFFBFA;
967
+ --error-50: #FEF3F2;
968
+ --error-100: #FEE4E2;
969
+ --error-200: #FECDCA;
970
+ --error-300: #FDA29B;
971
+ --error-400: #F97066;
972
+ --error-500: #F04438;
973
+ --error-600: #D92D20;
974
+ --error-700: #B42318;
975
+ --error-800: #912018;
976
+ --error-900: #7A271A;
977
+ --error-950: #FEFDF0;
978
+ --warning-25: #FFFCF5;
979
+ --warning-50: #FFFAEB;
980
+ --warning-100: #FEF0C7;
981
+ --warning-200: #FEDF89;
982
+ --warning-300: #FEC84B;
983
+ --warning-400: #FDB022;
984
+ --warning-500: #F79009;
985
+ --warning-600: #DC6803;
986
+ --warning-700: #B54708;
987
+ --warning-800: #93370D;
988
+ --warning-900: #7A2E0E;
989
+ --warning-950: #4E1D09;
990
+ }
991
+
992
+ :root {
993
+ --blue-dark-25: #F5F8FF;
994
+ --blue-dark-50: #EFF4FF;
995
+ --blue-dark-100: #D1E0FF;
996
+ --blue-dark-200: #B2CCFF;
997
+ --blue-dark-300: #84ADFF;
998
+ --blue-dark-400: #528BFF;
999
+ --blue-dark-500: #2970FF;
1000
+ --blue-dark-600: #155EEF;
1001
+ --blue-dark-700: #004EEB;
1002
+ --blue-dark-800: #0040C1;
1003
+ --blue-dark-900: #00359E;
1004
+ --blue-dark-950: #002266;
1005
+ }
1006
+
735
1007
  .DatePicker-module__datePicker___t3iuq {
736
1008
  width: fit-content;
737
1009
  height: fit-content;
738
1010
  border-radius: 16px;
739
- border: 1px solid #EAECF0;
740
- background-color: #FFFFFF;
1011
+ border: 1px solid var(--gray-200);
1012
+ background-color: var(--base-white);
741
1013
  box-shadow: 0 8px 8px -4px rgba(16, 24, 40, 0.031372549), 0 20px 24px -4px rgba(16, 24, 40, 0.0784313725);
742
1014
  }
743
1015
  /*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
@@ -761,6 +1033,74 @@
761
1033
  font-weight: 600;
762
1034
  font-style: normal;
763
1035
  }
1036
+ :root {
1037
+ --base-white: #FFFFFF;
1038
+ --base-black: #000000;
1039
+ --gray-25: #FCFCFD;
1040
+ --gray-50: #F9FAFB;
1041
+ --gray-100: #F2F4F7;
1042
+ --gray-200: #EAECF0;
1043
+ --gray-300: #D0D5DD;
1044
+ --gray-400: #98A2B3;
1045
+ --gray-500: #667085;
1046
+ --gray-600: #475467;
1047
+ --gray-700: #344054;
1048
+ --gray-800: #1D2939;
1049
+ --gray-900: #101828;
1050
+ --gray-950: #0C111D;
1051
+ --primary-25: #FCFAFF;
1052
+ --primary-50: #F9F5FF;
1053
+ --primary-100: #F4EBFF;
1054
+ --primary-200: #E9D7FE;
1055
+ --primary-300: #D6BBFB;
1056
+ --primary-400: #B692F6;
1057
+ --primary-500: #9E77ED;
1058
+ --primary-600: #7F56D9;
1059
+ --primary-700: #6941C6;
1060
+ --primary-800: #53389E;
1061
+ --primary-900: #42307D;
1062
+ --primary-950: #2C1C5F;
1063
+ --error-25: #FFFBFA;
1064
+ --error-50: #FEF3F2;
1065
+ --error-100: #FEE4E2;
1066
+ --error-200: #FECDCA;
1067
+ --error-300: #FDA29B;
1068
+ --error-400: #F97066;
1069
+ --error-500: #F04438;
1070
+ --error-600: #D92D20;
1071
+ --error-700: #B42318;
1072
+ --error-800: #912018;
1073
+ --error-900: #7A271A;
1074
+ --error-950: #FEFDF0;
1075
+ --warning-25: #FFFCF5;
1076
+ --warning-50: #FFFAEB;
1077
+ --warning-100: #FEF0C7;
1078
+ --warning-200: #FEDF89;
1079
+ --warning-300: #FEC84B;
1080
+ --warning-400: #FDB022;
1081
+ --warning-500: #F79009;
1082
+ --warning-600: #DC6803;
1083
+ --warning-700: #B54708;
1084
+ --warning-800: #93370D;
1085
+ --warning-900: #7A2E0E;
1086
+ --warning-950: #4E1D09;
1087
+ }
1088
+
1089
+ :root {
1090
+ --blue-dark-25: #F5F8FF;
1091
+ --blue-dark-50: #EFF4FF;
1092
+ --blue-dark-100: #D1E0FF;
1093
+ --blue-dark-200: #B2CCFF;
1094
+ --blue-dark-300: #84ADFF;
1095
+ --blue-dark-400: #528BFF;
1096
+ --blue-dark-500: #2970FF;
1097
+ --blue-dark-600: #155EEF;
1098
+ --blue-dark-700: #004EEB;
1099
+ --blue-dark-800: #0040C1;
1100
+ --blue-dark-900: #00359E;
1101
+ --blue-dark-950: #002266;
1102
+ }
1103
+
764
1104
  .DatePickerMain-module__datePickerMain___G7IMt {
765
1105
  position: relative;
766
1106
  width: 100%;
@@ -791,7 +1131,7 @@
791
1131
  .DatePickerMain-module__datePickerMain___G7IMt .DatePickerMain-module__header___XeOZO .DatePickerMain-module__item___UNZyP {
792
1132
  font-size: 14px;
793
1133
  line-height: 16px;
794
- color: #98A2B3;
1134
+ color: var(--gray-400);
795
1135
  font-weight: 500;
796
1136
  font-family: "Golos UI", sans-serif;
797
1137
  font-stretch: normal;
@@ -813,7 +1153,7 @@
813
1153
  .DatePickerMain-module__datePickerMain___G7IMt .DatePickerMain-module__main___i975m .DatePickerMain-module__meta___XqHRG .DatePickerMain-module__month___lyaBg {
814
1154
  font-size: 16px;
815
1155
  line-height: 20px;
816
- color: #101828;
1156
+ color: var(--gray-900);
817
1157
  font-weight: 400;
818
1158
  font-family: "Golos UI", sans-serif;
819
1159
  font-stretch: normal;
@@ -823,7 +1163,7 @@
823
1163
  .DatePickerMain-module__datePickerMain___G7IMt .DatePickerMain-module__main___i975m .DatePickerMain-module__meta___XqHRG .DatePickerMain-module__year___fXQLm {
824
1164
  font-size: 16px;
825
1165
  line-height: 20px;
826
- color: #98A2B3;
1166
+ color: var(--gray-400);
827
1167
  font-weight: 400;
828
1168
  font-family: "Golos UI", sans-serif;
829
1169
  font-stretch: normal;
@@ -856,6 +1196,74 @@
856
1196
  font-weight: 600;
857
1197
  font-style: normal;
858
1198
  }
1199
+ :root {
1200
+ --base-white: #FFFFFF;
1201
+ --base-black: #000000;
1202
+ --gray-25: #FCFCFD;
1203
+ --gray-50: #F9FAFB;
1204
+ --gray-100: #F2F4F7;
1205
+ --gray-200: #EAECF0;
1206
+ --gray-300: #D0D5DD;
1207
+ --gray-400: #98A2B3;
1208
+ --gray-500: #667085;
1209
+ --gray-600: #475467;
1210
+ --gray-700: #344054;
1211
+ --gray-800: #1D2939;
1212
+ --gray-900: #101828;
1213
+ --gray-950: #0C111D;
1214
+ --primary-25: #FCFAFF;
1215
+ --primary-50: #F9F5FF;
1216
+ --primary-100: #F4EBFF;
1217
+ --primary-200: #E9D7FE;
1218
+ --primary-300: #D6BBFB;
1219
+ --primary-400: #B692F6;
1220
+ --primary-500: #9E77ED;
1221
+ --primary-600: #7F56D9;
1222
+ --primary-700: #6941C6;
1223
+ --primary-800: #53389E;
1224
+ --primary-900: #42307D;
1225
+ --primary-950: #2C1C5F;
1226
+ --error-25: #FFFBFA;
1227
+ --error-50: #FEF3F2;
1228
+ --error-100: #FEE4E2;
1229
+ --error-200: #FECDCA;
1230
+ --error-300: #FDA29B;
1231
+ --error-400: #F97066;
1232
+ --error-500: #F04438;
1233
+ --error-600: #D92D20;
1234
+ --error-700: #B42318;
1235
+ --error-800: #912018;
1236
+ --error-900: #7A271A;
1237
+ --error-950: #FEFDF0;
1238
+ --warning-25: #FFFCF5;
1239
+ --warning-50: #FFFAEB;
1240
+ --warning-100: #FEF0C7;
1241
+ --warning-200: #FEDF89;
1242
+ --warning-300: #FEC84B;
1243
+ --warning-400: #FDB022;
1244
+ --warning-500: #F79009;
1245
+ --warning-600: #DC6803;
1246
+ --warning-700: #B54708;
1247
+ --warning-800: #93370D;
1248
+ --warning-900: #7A2E0E;
1249
+ --warning-950: #4E1D09;
1250
+ }
1251
+
1252
+ :root {
1253
+ --blue-dark-25: #F5F8FF;
1254
+ --blue-dark-50: #EFF4FF;
1255
+ --blue-dark-100: #D1E0FF;
1256
+ --blue-dark-200: #B2CCFF;
1257
+ --blue-dark-300: #84ADFF;
1258
+ --blue-dark-400: #528BFF;
1259
+ --blue-dark-500: #2970FF;
1260
+ --blue-dark-600: #155EEF;
1261
+ --blue-dark-700: #004EEB;
1262
+ --blue-dark-800: #0040C1;
1263
+ --blue-dark-900: #00359E;
1264
+ --blue-dark-950: #002266;
1265
+ }
1266
+
859
1267
  .DateGrid-module__dateGrid___zK2Lk {
860
1268
  max-height: 250px;
861
1269
  position: relative;
@@ -935,6 +1343,74 @@
935
1343
  font-weight: 600;
936
1344
  font-style: normal;
937
1345
  }
1346
+ :root {
1347
+ --base-white: #FFFFFF;
1348
+ --base-black: #000000;
1349
+ --gray-25: #FCFCFD;
1350
+ --gray-50: #F9FAFB;
1351
+ --gray-100: #F2F4F7;
1352
+ --gray-200: #EAECF0;
1353
+ --gray-300: #D0D5DD;
1354
+ --gray-400: #98A2B3;
1355
+ --gray-500: #667085;
1356
+ --gray-600: #475467;
1357
+ --gray-700: #344054;
1358
+ --gray-800: #1D2939;
1359
+ --gray-900: #101828;
1360
+ --gray-950: #0C111D;
1361
+ --primary-25: #FCFAFF;
1362
+ --primary-50: #F9F5FF;
1363
+ --primary-100: #F4EBFF;
1364
+ --primary-200: #E9D7FE;
1365
+ --primary-300: #D6BBFB;
1366
+ --primary-400: #B692F6;
1367
+ --primary-500: #9E77ED;
1368
+ --primary-600: #7F56D9;
1369
+ --primary-700: #6941C6;
1370
+ --primary-800: #53389E;
1371
+ --primary-900: #42307D;
1372
+ --primary-950: #2C1C5F;
1373
+ --error-25: #FFFBFA;
1374
+ --error-50: #FEF3F2;
1375
+ --error-100: #FEE4E2;
1376
+ --error-200: #FECDCA;
1377
+ --error-300: #FDA29B;
1378
+ --error-400: #F97066;
1379
+ --error-500: #F04438;
1380
+ --error-600: #D92D20;
1381
+ --error-700: #B42318;
1382
+ --error-800: #912018;
1383
+ --error-900: #7A271A;
1384
+ --error-950: #FEFDF0;
1385
+ --warning-25: #FFFCF5;
1386
+ --warning-50: #FFFAEB;
1387
+ --warning-100: #FEF0C7;
1388
+ --warning-200: #FEDF89;
1389
+ --warning-300: #FEC84B;
1390
+ --warning-400: #FDB022;
1391
+ --warning-500: #F79009;
1392
+ --warning-600: #DC6803;
1393
+ --warning-700: #B54708;
1394
+ --warning-800: #93370D;
1395
+ --warning-900: #7A2E0E;
1396
+ --warning-950: #4E1D09;
1397
+ }
1398
+
1399
+ :root {
1400
+ --blue-dark-25: #F5F8FF;
1401
+ --blue-dark-50: #EFF4FF;
1402
+ --blue-dark-100: #D1E0FF;
1403
+ --blue-dark-200: #B2CCFF;
1404
+ --blue-dark-300: #84ADFF;
1405
+ --blue-dark-400: #528BFF;
1406
+ --blue-dark-500: #2970FF;
1407
+ --blue-dark-600: #155EEF;
1408
+ --blue-dark-700: #004EEB;
1409
+ --blue-dark-800: #0040C1;
1410
+ --blue-dark-900: #00359E;
1411
+ --blue-dark-950: #002266;
1412
+ }
1413
+
938
1414
  .DatePickerHeader-module__datePickerHeader___tQ5fM {
939
1415
  width: 100%;
940
1416
  height: fit-content;
@@ -950,7 +1426,7 @@
950
1426
  .DatePickerHeader-module__datePickerHeader___tQ5fM .DatePickerHeader-module__text___mNfC_ {
951
1427
  font-size: 20px;
952
1428
  line-height: 24px;
953
- color: #101828;
1429
+ color: var(--gray-900);
954
1430
  font-weight: 600;
955
1431
  font-family: "Golos UI", sans-serif;
956
1432
  font-stretch: normal;
@@ -990,10 +1466,78 @@
990
1466
  font-weight: 600;
991
1467
  font-style: normal;
992
1468
  }
1469
+ :root {
1470
+ --base-white: #FFFFFF;
1471
+ --base-black: #000000;
1472
+ --gray-25: #FCFCFD;
1473
+ --gray-50: #F9FAFB;
1474
+ --gray-100: #F2F4F7;
1475
+ --gray-200: #EAECF0;
1476
+ --gray-300: #D0D5DD;
1477
+ --gray-400: #98A2B3;
1478
+ --gray-500: #667085;
1479
+ --gray-600: #475467;
1480
+ --gray-700: #344054;
1481
+ --gray-800: #1D2939;
1482
+ --gray-900: #101828;
1483
+ --gray-950: #0C111D;
1484
+ --primary-25: #FCFAFF;
1485
+ --primary-50: #F9F5FF;
1486
+ --primary-100: #F4EBFF;
1487
+ --primary-200: #E9D7FE;
1488
+ --primary-300: #D6BBFB;
1489
+ --primary-400: #B692F6;
1490
+ --primary-500: #9E77ED;
1491
+ --primary-600: #7F56D9;
1492
+ --primary-700: #6941C6;
1493
+ --primary-800: #53389E;
1494
+ --primary-900: #42307D;
1495
+ --primary-950: #2C1C5F;
1496
+ --error-25: #FFFBFA;
1497
+ --error-50: #FEF3F2;
1498
+ --error-100: #FEE4E2;
1499
+ --error-200: #FECDCA;
1500
+ --error-300: #FDA29B;
1501
+ --error-400: #F97066;
1502
+ --error-500: #F04438;
1503
+ --error-600: #D92D20;
1504
+ --error-700: #B42318;
1505
+ --error-800: #912018;
1506
+ --error-900: #7A271A;
1507
+ --error-950: #FEFDF0;
1508
+ --warning-25: #FFFCF5;
1509
+ --warning-50: #FFFAEB;
1510
+ --warning-100: #FEF0C7;
1511
+ --warning-200: #FEDF89;
1512
+ --warning-300: #FEC84B;
1513
+ --warning-400: #FDB022;
1514
+ --warning-500: #F79009;
1515
+ --warning-600: #DC6803;
1516
+ --warning-700: #B54708;
1517
+ --warning-800: #93370D;
1518
+ --warning-900: #7A2E0E;
1519
+ --warning-950: #4E1D09;
1520
+ }
1521
+
1522
+ :root {
1523
+ --blue-dark-25: #F5F8FF;
1524
+ --blue-dark-50: #EFF4FF;
1525
+ --blue-dark-100: #D1E0FF;
1526
+ --blue-dark-200: #B2CCFF;
1527
+ --blue-dark-300: #84ADFF;
1528
+ --blue-dark-400: #528BFF;
1529
+ --blue-dark-500: #2970FF;
1530
+ --blue-dark-600: #155EEF;
1531
+ --blue-dark-700: #004EEB;
1532
+ --blue-dark-800: #0040C1;
1533
+ --blue-dark-900: #00359E;
1534
+ --blue-dark-950: #002266;
1535
+ }
1536
+
993
1537
  .DatePickerFooter-module__datePickerFooter___S3vJR {
994
1538
  width: 100%;
995
1539
  display: flex;
996
- border-top: 1px solid #EAECF0;
1540
+ border-top: 1px solid var(--gray-200);
997
1541
  padding: 16px;
998
1542
  gap: 8px;
999
1543
  }
@@ -1021,6 +1565,74 @@
1021
1565
  font-weight: 600;
1022
1566
  font-style: normal;
1023
1567
  }
1568
+ :root {
1569
+ --base-white: #FFFFFF;
1570
+ --base-black: #000000;
1571
+ --gray-25: #FCFCFD;
1572
+ --gray-50: #F9FAFB;
1573
+ --gray-100: #F2F4F7;
1574
+ --gray-200: #EAECF0;
1575
+ --gray-300: #D0D5DD;
1576
+ --gray-400: #98A2B3;
1577
+ --gray-500: #667085;
1578
+ --gray-600: #475467;
1579
+ --gray-700: #344054;
1580
+ --gray-800: #1D2939;
1581
+ --gray-900: #101828;
1582
+ --gray-950: #0C111D;
1583
+ --primary-25: #FCFAFF;
1584
+ --primary-50: #F9F5FF;
1585
+ --primary-100: #F4EBFF;
1586
+ --primary-200: #E9D7FE;
1587
+ --primary-300: #D6BBFB;
1588
+ --primary-400: #B692F6;
1589
+ --primary-500: #9E77ED;
1590
+ --primary-600: #7F56D9;
1591
+ --primary-700: #6941C6;
1592
+ --primary-800: #53389E;
1593
+ --primary-900: #42307D;
1594
+ --primary-950: #2C1C5F;
1595
+ --error-25: #FFFBFA;
1596
+ --error-50: #FEF3F2;
1597
+ --error-100: #FEE4E2;
1598
+ --error-200: #FECDCA;
1599
+ --error-300: #FDA29B;
1600
+ --error-400: #F97066;
1601
+ --error-500: #F04438;
1602
+ --error-600: #D92D20;
1603
+ --error-700: #B42318;
1604
+ --error-800: #912018;
1605
+ --error-900: #7A271A;
1606
+ --error-950: #FEFDF0;
1607
+ --warning-25: #FFFCF5;
1608
+ --warning-50: #FFFAEB;
1609
+ --warning-100: #FEF0C7;
1610
+ --warning-200: #FEDF89;
1611
+ --warning-300: #FEC84B;
1612
+ --warning-400: #FDB022;
1613
+ --warning-500: #F79009;
1614
+ --warning-600: #DC6803;
1615
+ --warning-700: #B54708;
1616
+ --warning-800: #93370D;
1617
+ --warning-900: #7A2E0E;
1618
+ --warning-950: #4E1D09;
1619
+ }
1620
+
1621
+ :root {
1622
+ --blue-dark-25: #F5F8FF;
1623
+ --blue-dark-50: #EFF4FF;
1624
+ --blue-dark-100: #D1E0FF;
1625
+ --blue-dark-200: #B2CCFF;
1626
+ --blue-dark-300: #84ADFF;
1627
+ --blue-dark-400: #528BFF;
1628
+ --blue-dark-500: #2970FF;
1629
+ --blue-dark-600: #155EEF;
1630
+ --blue-dark-700: #004EEB;
1631
+ --blue-dark-800: #0040C1;
1632
+ --blue-dark-900: #00359E;
1633
+ --blue-dark-950: #002266;
1634
+ }
1635
+
1024
1636
  .FlexField-module__flexField___bQEfy {
1025
1637
  width: 100%;
1026
1638
  height: fit-content;
@@ -1030,8 +1642,8 @@
1030
1642
  padding: 10px 12px;
1031
1643
  border-radius: 8px;
1032
1644
  gap: 12px;
1033
- background-color: #FFFFFF;
1034
- box-shadow: 0 0 0 1px #D0D5DD, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1645
+ background-color: var(--test-variable);
1646
+ box-shadow: 0 0 0 1px var(--gray-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1035
1647
  box-sizing: border-box;
1036
1648
  }
1037
1649
  .FlexField-module__flexField___bQEfy .FlexField-module__inputField___ckUI1 {
@@ -1050,7 +1662,7 @@
1050
1662
  .FlexField-module__flexField___bQEfy .FlexField-module__inputField___ckUI1 {
1051
1663
  font-size: 16px;
1052
1664
  line-height: 24px;
1053
- color: #101828;
1665
+ color: var(--gray-900);
1054
1666
  font-weight: 400;
1055
1667
  font-family: "Golos UI", sans-serif;
1056
1668
  font-stretch: normal;
@@ -1060,13 +1672,99 @@
1060
1672
  .FlexField-module__flexField___bQEfy .FlexField-module__inputField___ckUI1::placeholder {
1061
1673
  font-size: 16px;
1062
1674
  line-height: 24px;
1063
- color: #98A2B3;
1675
+ color: var(--gray-400);
1676
+ font-weight: 400;
1677
+ font-family: "Golos UI", sans-serif;
1678
+ font-stretch: normal;
1679
+ font-style: normal;
1680
+ font-variant: normal;
1681
+ }
1682
+ .FlexField-module__flexField___bQEfy .FlexField-module__icon___pHmKh {
1683
+ padding: 2px 0;
1684
+ display: flex;
1685
+ align-items: center;
1686
+ justify-content: center;
1687
+ }
1688
+ .FlexField-module__flexField___bQEfy .FlexField-module__icon___pHmKh svg * {
1689
+ stroke: var(--gray-400);
1690
+ }
1691
+ .FlexField-module__flexField___bQEfy .FlexField-module__icon___pHmKh svg {
1692
+ width: 20px;
1693
+ height: 20px;
1694
+ flex: none;
1695
+ }
1696
+ .FlexField-module__flexField___bQEfy .FlexField-module__textSupport___WGMzj {
1697
+ font-size: 16px;
1698
+ line-height: 24px;
1699
+ color: var(--gray-400);
1064
1700
  font-weight: 400;
1065
1701
  font-family: "Golos UI", sans-serif;
1066
1702
  font-stretch: normal;
1067
1703
  font-style: normal;
1068
1704
  font-variant: normal;
1069
1705
  }
1706
+ .FlexField-module__flexField___bQEfy .FlexField-module__userPic___cJENJ {
1707
+ width: 24px;
1708
+ height: 24px;
1709
+ border-radius: 50%;
1710
+ object-fit: scale-down;
1711
+ }
1712
+ .FlexField-module__flexField___bQEfy .FlexField-module__help___ORoT_ {
1713
+ padding: 2px 0;
1714
+ display: flex;
1715
+ align-items: center;
1716
+ justify-content: center;
1717
+ }
1718
+ .FlexField-module__flexField___bQEfy .FlexField-module__help___ORoT_ svg * {
1719
+ stroke: var(--gray-400);
1720
+ }
1721
+ .FlexField-module__flexField___bQEfy .FlexField-module__help___ORoT_ svg {
1722
+ width: 16px;
1723
+ height: 16px;
1724
+ flex: none;
1725
+ }
1726
+ .FlexField-module__flexField___bQEfy .FlexField-module__dropdown___BqdfG {
1727
+ padding: 2px 0;
1728
+ transition: all ease-in-out 200ms;
1729
+ display: flex;
1730
+ align-items: center;
1731
+ justify-content: center;
1732
+ }
1733
+ .FlexField-module__flexField___bQEfy .FlexField-module__dropdown___BqdfG svg * {
1734
+ stroke: var(--gray-500);
1735
+ }
1736
+ .FlexField-module__flexField___bQEfy .FlexField-module__dropdown___BqdfG svg {
1737
+ width: 20px;
1738
+ height: 20px;
1739
+ flex: none;
1740
+ }
1741
+ .FlexField-module__flexField___bQEfy .FlexField-module__dropdown___BqdfG.FlexField-module__dropdownReverse___FNjEK {
1742
+ transform: rotateX(-180deg);
1743
+ }
1744
+ .FlexField-module__flexField___bQEfy .FlexField-module__button___TjLHK {
1745
+ padding: 2px 0;
1746
+ transition: all ease-in-out 200ms;
1747
+ display: flex;
1748
+ align-items: center;
1749
+ justify-content: center;
1750
+ }
1751
+ .FlexField-module__flexField___bQEfy .FlexField-module__button___TjLHK svg {
1752
+ width: 20px;
1753
+ height: 20px;
1754
+ flex: none;
1755
+ }
1756
+ .FlexField-module__flexField___bQEfy .FlexField-module__button___TjLHK.FlexField-module__red___BY7NK svg * {
1757
+ stroke: var(--error-400);
1758
+ }
1759
+ .FlexField-module__flexField___bQEfy .FlexField-module__button___TjLHK.FlexField-module__red___BY7NK:hover svg * {
1760
+ stroke: var(--error-500);
1761
+ }
1762
+ .FlexField-module__flexField___bQEfy .FlexField-module__button___TjLHK.FlexField-module__gray___sjpVp svg * {
1763
+ stroke: var(--gray-400);
1764
+ }
1765
+ .FlexField-module__flexField___bQEfy .FlexField-module__button___TjLHK.FlexField-module__gray___sjpVp:hover svg * {
1766
+ stroke: var(--gray-500);
1767
+ }
1070
1768
  .FlexField-module__flexField___bQEfy.FlexField-module__pointer___dOJ4b {
1071
1769
  cursor: pointer;
1072
1770
  }
@@ -1074,13 +1772,16 @@
1074
1772
  box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1075
1773
  }
1076
1774
  .FlexField-module__flexField___bQEfy.FlexField-module__isError___VljDQ {
1077
- box-shadow: 0 0 0 1px #FDA29B, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1775
+ box-shadow: 0 0 0 1px var(--error-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1776
+ }
1777
+ .FlexField-module__flexField___bQEfy.FlexField-module__isError___VljDQ .FlexField-module__help___ORoT_ svg * {
1778
+ stroke: var(--error-500);
1078
1779
  }
1079
1780
  .FlexField-module__flexField___bQEfy.FlexField-module__isError___VljDQ.FlexField-module__focus___pkwN6 {
1080
1781
  box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1081
1782
  }
1082
1783
  .FlexField-module__flexField___bQEfy.FlexField-module__disabled___lN8Vv {
1083
- background-color: #F2F4F7;
1784
+ background-color: var(--gray-100);
1084
1785
  cursor: default;
1085
1786
  }
1086
1787
  .FlexField-module__flexField___bQEfy.FlexField-module__disabled___lN8Vv * {
@@ -1089,7 +1790,7 @@
1089
1790
  .FlexField-module__flexField___bQEfy.FlexField-module__disabled___lN8Vv .FlexField-module__inputField___ckUI1 {
1090
1791
  font-size: 16px;
1091
1792
  line-height: 24px;
1092
- color: #667085;
1793
+ color: var(--gray-500);
1093
1794
  font-weight: 400;
1094
1795
  font-family: "Golos UI", sans-serif;
1095
1796
  font-stretch: normal;
@@ -1117,6 +1818,74 @@
1117
1818
  font-weight: 600;
1118
1819
  font-style: normal;
1119
1820
  }
1821
+ :root {
1822
+ --base-white: #FFFFFF;
1823
+ --base-black: #000000;
1824
+ --gray-25: #FCFCFD;
1825
+ --gray-50: #F9FAFB;
1826
+ --gray-100: #F2F4F7;
1827
+ --gray-200: #EAECF0;
1828
+ --gray-300: #D0D5DD;
1829
+ --gray-400: #98A2B3;
1830
+ --gray-500: #667085;
1831
+ --gray-600: #475467;
1832
+ --gray-700: #344054;
1833
+ --gray-800: #1D2939;
1834
+ --gray-900: #101828;
1835
+ --gray-950: #0C111D;
1836
+ --primary-25: #FCFAFF;
1837
+ --primary-50: #F9F5FF;
1838
+ --primary-100: #F4EBFF;
1839
+ --primary-200: #E9D7FE;
1840
+ --primary-300: #D6BBFB;
1841
+ --primary-400: #B692F6;
1842
+ --primary-500: #9E77ED;
1843
+ --primary-600: #7F56D9;
1844
+ --primary-700: #6941C6;
1845
+ --primary-800: #53389E;
1846
+ --primary-900: #42307D;
1847
+ --primary-950: #2C1C5F;
1848
+ --error-25: #FFFBFA;
1849
+ --error-50: #FEF3F2;
1850
+ --error-100: #FEE4E2;
1851
+ --error-200: #FECDCA;
1852
+ --error-300: #FDA29B;
1853
+ --error-400: #F97066;
1854
+ --error-500: #F04438;
1855
+ --error-600: #D92D20;
1856
+ --error-700: #B42318;
1857
+ --error-800: #912018;
1858
+ --error-900: #7A271A;
1859
+ --error-950: #FEFDF0;
1860
+ --warning-25: #FFFCF5;
1861
+ --warning-50: #FFFAEB;
1862
+ --warning-100: #FEF0C7;
1863
+ --warning-200: #FEDF89;
1864
+ --warning-300: #FEC84B;
1865
+ --warning-400: #FDB022;
1866
+ --warning-500: #F79009;
1867
+ --warning-600: #DC6803;
1868
+ --warning-700: #B54708;
1869
+ --warning-800: #93370D;
1870
+ --warning-900: #7A2E0E;
1871
+ --warning-950: #4E1D09;
1872
+ }
1873
+
1874
+ :root {
1875
+ --blue-dark-25: #F5F8FF;
1876
+ --blue-dark-50: #EFF4FF;
1877
+ --blue-dark-100: #D1E0FF;
1878
+ --blue-dark-200: #B2CCFF;
1879
+ --blue-dark-300: #84ADFF;
1880
+ --blue-dark-400: #528BFF;
1881
+ --blue-dark-500: #2970FF;
1882
+ --blue-dark-600: #155EEF;
1883
+ --blue-dark-700: #004EEB;
1884
+ --blue-dark-800: #0040C1;
1885
+ --blue-dark-900: #00359E;
1886
+ --blue-dark-950: #002266;
1887
+ }
1888
+
1120
1889
  .SelectField-module__selectField___p9S2j {
1121
1890
  width: 100%;
1122
1891
  position: relative;
@@ -1130,8 +1899,8 @@
1130
1899
  padding: 10px 12px;
1131
1900
  border-radius: 8px;
1132
1901
  gap: 12px;
1133
- background-color: #FFFFFF;
1134
- box-shadow: 0 0 0 1px #D0D5DD, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1902
+ background-color: var(--test-variable);
1903
+ box-shadow: 0 0 0 1px var(--gray-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1135
1904
  box-sizing: border-box;
1136
1905
  }
1137
1906
  .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__inputField___R6ZBR {
@@ -1150,7 +1919,7 @@
1150
1919
  .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__inputField___R6ZBR {
1151
1920
  font-size: 16px;
1152
1921
  line-height: 24px;
1153
- color: #101828;
1922
+ color: var(--gray-900);
1154
1923
  font-weight: 400;
1155
1924
  font-family: "Golos UI", sans-serif;
1156
1925
  font-stretch: normal;
@@ -1160,13 +1929,99 @@
1160
1929
  .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__inputField___R6ZBR::placeholder {
1161
1930
  font-size: 16px;
1162
1931
  line-height: 24px;
1163
- color: #98A2B3;
1932
+ color: var(--gray-400);
1933
+ font-weight: 400;
1934
+ font-family: "Golos UI", sans-serif;
1935
+ font-stretch: normal;
1936
+ font-style: normal;
1937
+ font-variant: normal;
1938
+ }
1939
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__icon___hgSSD {
1940
+ padding: 2px 0;
1941
+ display: flex;
1942
+ align-items: center;
1943
+ justify-content: center;
1944
+ }
1945
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__icon___hgSSD svg * {
1946
+ stroke: var(--gray-400);
1947
+ }
1948
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__icon___hgSSD svg {
1949
+ width: 20px;
1950
+ height: 20px;
1951
+ flex: none;
1952
+ }
1953
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__textSupport___vm4rj {
1954
+ font-size: 16px;
1955
+ line-height: 24px;
1956
+ color: var(--gray-400);
1164
1957
  font-weight: 400;
1165
1958
  font-family: "Golos UI", sans-serif;
1166
1959
  font-stretch: normal;
1167
1960
  font-style: normal;
1168
1961
  font-variant: normal;
1169
1962
  }
1963
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__userPic___ge2Qc {
1964
+ width: 24px;
1965
+ height: 24px;
1966
+ border-radius: 50%;
1967
+ object-fit: scale-down;
1968
+ }
1969
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__help___H6fhs {
1970
+ padding: 2px 0;
1971
+ display: flex;
1972
+ align-items: center;
1973
+ justify-content: center;
1974
+ }
1975
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__help___H6fhs svg * {
1976
+ stroke: var(--gray-400);
1977
+ }
1978
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__help___H6fhs svg {
1979
+ width: 16px;
1980
+ height: 16px;
1981
+ flex: none;
1982
+ }
1983
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__dropdown___Uy1N4 {
1984
+ padding: 2px 0;
1985
+ transition: all ease-in-out 200ms;
1986
+ display: flex;
1987
+ align-items: center;
1988
+ justify-content: center;
1989
+ }
1990
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__dropdown___Uy1N4 svg * {
1991
+ stroke: var(--gray-500);
1992
+ }
1993
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__dropdown___Uy1N4 svg {
1994
+ width: 20px;
1995
+ height: 20px;
1996
+ flex: none;
1997
+ }
1998
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__dropdown___Uy1N4.SelectField-module__dropdownReverse___8X1vc {
1999
+ transform: rotateX(-180deg);
2000
+ }
2001
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__button___ZmuY4 {
2002
+ padding: 2px 0;
2003
+ transition: all ease-in-out 200ms;
2004
+ display: flex;
2005
+ align-items: center;
2006
+ justify-content: center;
2007
+ }
2008
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__button___ZmuY4 svg {
2009
+ width: 20px;
2010
+ height: 20px;
2011
+ flex: none;
2012
+ }
2013
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__button___ZmuY4.SelectField-module__red___JPj3r svg * {
2014
+ stroke: var(--error-400);
2015
+ }
2016
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__button___ZmuY4.SelectField-module__red___JPj3r:hover svg * {
2017
+ stroke: var(--error-500);
2018
+ }
2019
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__button___ZmuY4.SelectField-module__gray___IaQb0 svg * {
2020
+ stroke: var(--gray-400);
2021
+ }
2022
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY .SelectField-module__button___ZmuY4.SelectField-module__gray___IaQb0:hover svg * {
2023
+ stroke: var(--gray-500);
2024
+ }
1170
2025
  .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY.SelectField-module__pointer___EtnYh {
1171
2026
  cursor: pointer;
1172
2027
  }
@@ -1174,13 +2029,16 @@
1174
2029
  box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1175
2030
  }
1176
2031
  .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY.SelectField-module__isError___i1lN2 {
1177
- box-shadow: 0 0 0 1px #FDA29B, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
2032
+ box-shadow: 0 0 0 1px var(--error-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
2033
+ }
2034
+ .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY.SelectField-module__isError___i1lN2 .SelectField-module__help___H6fhs svg * {
2035
+ stroke: var(--error-500);
1178
2036
  }
1179
2037
  .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY.SelectField-module__isError___i1lN2.SelectField-module__focus___oz_Mp {
1180
2038
  box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1181
2039
  }
1182
2040
  .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY.SelectField-module__disabled___lZGk6 {
1183
- background-color: #F2F4F7;
2041
+ background-color: var(--gray-100);
1184
2042
  cursor: default;
1185
2043
  }
1186
2044
  .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY.SelectField-module__disabled___lZGk6 * {
@@ -1189,7 +2047,7 @@
1189
2047
  .SelectField-module__selectField___p9S2j .SelectField-module__flexField___a_gUY.SelectField-module__disabled___lZGk6 .SelectField-module__inputField___R6ZBR {
1190
2048
  font-size: 16px;
1191
2049
  line-height: 24px;
1192
- color: #667085;
2050
+ color: var(--gray-500);
1193
2051
  font-weight: 400;
1194
2052
  font-family: "Golos UI", sans-serif;
1195
2053
  font-stretch: normal;
@@ -1209,8 +2067,8 @@
1209
2067
  flex-direction: column;
1210
2068
  border-radius: 8px;
1211
2069
  padding: 4px;
1212
- background-color: #FFFFFF;
1213
- box-shadow: 0 0 0 1px #D0D5DD, 0 4px 6px -2px rgba(16, 24, 40, 0.031372549), 0px 12px 16px -4px rgba(16, 24, 40, 0.0784313725);
2070
+ background-color: var(--base-white);
2071
+ box-shadow: 0 0 0 1px var(--gray-300), 0 4px 6px -2px rgba(16, 24, 40, 0.031372549), 0px 12px 16px -4px rgba(16, 24, 40, 0.0784313725);
1214
2072
  overflow: scroll;
1215
2073
  scrollbar-width: none;
1216
2074
  }
@@ -1230,7 +2088,7 @@
1230
2088
  .SelectField-module__selectField___p9S2j .SelectField-module__modalWindow___JVZ8d .SelectField-module__selectModalWindow___w55Pm .SelectField-module__selectFieldOptionsItem___hQMC7 .SelectField-module__label___Orjua {
1231
2089
  font-size: 16px;
1232
2090
  line-height: 24px;
1233
- color: #101828;
2091
+ color: var(--gray-900);
1234
2092
  font-weight: 400;
1235
2093
  font-family: "Golos UI", sans-serif;
1236
2094
  font-stretch: normal;
@@ -1238,7 +2096,7 @@
1238
2096
  font-variant: normal;
1239
2097
  }
1240
2098
  .SelectField-module__selectField___p9S2j .SelectField-module__modalWindow___JVZ8d .SelectField-module__selectModalWindow___w55Pm .SelectField-module__selectFieldOptionsItem___hQMC7.SelectField-module__active___a3j2T {
1241
- background-color: #EFF4FF;
2099
+ background-color: var(--blue-dark-50);
1242
2100
  }
1243
2101
  .SelectField-module__selectField___p9S2j .SelectField-module__modalWindow___JVZ8d .SelectField-module__selectModalWindow___w55Pm .SelectField-module__selectFieldOptionsItem___hQMC7.SelectField-module__active___a3j2T svg {
1244
2102
  width: 20px;
@@ -1246,7 +2104,7 @@
1246
2104
  flex: none;
1247
2105
  }
1248
2106
  .SelectField-module__selectField___p9S2j .SelectField-module__modalWindow___JVZ8d .SelectField-module__selectModalWindow___w55Pm .SelectField-module__selectFieldOptionsItem___hQMC7.SelectField-module__active___a3j2T svg * {
1249
- stroke: #2970FF;
2107
+ stroke: var(--blue-dark-500);
1250
2108
  }
1251
2109
  /*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
1252
2110
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/ui/InputFields/InputFieldWrapper/styles/InputFieldWrapper.module.scss ***!
@@ -1269,6 +2127,74 @@
1269
2127
  font-weight: 600;
1270
2128
  font-style: normal;
1271
2129
  }
2130
+ :root {
2131
+ --base-white: #FFFFFF;
2132
+ --base-black: #000000;
2133
+ --gray-25: #FCFCFD;
2134
+ --gray-50: #F9FAFB;
2135
+ --gray-100: #F2F4F7;
2136
+ --gray-200: #EAECF0;
2137
+ --gray-300: #D0D5DD;
2138
+ --gray-400: #98A2B3;
2139
+ --gray-500: #667085;
2140
+ --gray-600: #475467;
2141
+ --gray-700: #344054;
2142
+ --gray-800: #1D2939;
2143
+ --gray-900: #101828;
2144
+ --gray-950: #0C111D;
2145
+ --primary-25: #FCFAFF;
2146
+ --primary-50: #F9F5FF;
2147
+ --primary-100: #F4EBFF;
2148
+ --primary-200: #E9D7FE;
2149
+ --primary-300: #D6BBFB;
2150
+ --primary-400: #B692F6;
2151
+ --primary-500: #9E77ED;
2152
+ --primary-600: #7F56D9;
2153
+ --primary-700: #6941C6;
2154
+ --primary-800: #53389E;
2155
+ --primary-900: #42307D;
2156
+ --primary-950: #2C1C5F;
2157
+ --error-25: #FFFBFA;
2158
+ --error-50: #FEF3F2;
2159
+ --error-100: #FEE4E2;
2160
+ --error-200: #FECDCA;
2161
+ --error-300: #FDA29B;
2162
+ --error-400: #F97066;
2163
+ --error-500: #F04438;
2164
+ --error-600: #D92D20;
2165
+ --error-700: #B42318;
2166
+ --error-800: #912018;
2167
+ --error-900: #7A271A;
2168
+ --error-950: #FEFDF0;
2169
+ --warning-25: #FFFCF5;
2170
+ --warning-50: #FFFAEB;
2171
+ --warning-100: #FEF0C7;
2172
+ --warning-200: #FEDF89;
2173
+ --warning-300: #FEC84B;
2174
+ --warning-400: #FDB022;
2175
+ --warning-500: #F79009;
2176
+ --warning-600: #DC6803;
2177
+ --warning-700: #B54708;
2178
+ --warning-800: #93370D;
2179
+ --warning-900: #7A2E0E;
2180
+ --warning-950: #4E1D09;
2181
+ }
2182
+
2183
+ :root {
2184
+ --blue-dark-25: #F5F8FF;
2185
+ --blue-dark-50: #EFF4FF;
2186
+ --blue-dark-100: #D1E0FF;
2187
+ --blue-dark-200: #B2CCFF;
2188
+ --blue-dark-300: #84ADFF;
2189
+ --blue-dark-400: #528BFF;
2190
+ --blue-dark-500: #2970FF;
2191
+ --blue-dark-600: #155EEF;
2192
+ --blue-dark-700: #004EEB;
2193
+ --blue-dark-800: #0040C1;
2194
+ --blue-dark-900: #00359E;
2195
+ --blue-dark-950: #002266;
2196
+ }
2197
+
1272
2198
  .InputFieldWrapper-module__inputFieldWrapper___QKhWg {
1273
2199
  width: 100%;
1274
2200
  display: flex;
@@ -1283,7 +2209,7 @@
1283
2209
  .InputFieldWrapper-module__inputFieldWrapper___QKhWg .InputFieldWrapper-module__labelText___n0EsW {
1284
2210
  font-size: 14px;
1285
2211
  line-height: 20px;
1286
- color: #344054;
2212
+ color: var(--gray-700);
1287
2213
  font-weight: 500;
1288
2214
  font-family: "Golos UI", sans-serif;
1289
2215
  font-stretch: normal;
@@ -1293,7 +2219,7 @@
1293
2219
  .InputFieldWrapper-module__inputFieldWrapper___QKhWg .InputFieldWrapper-module__labelText___n0EsW .InputFieldWrapper-module__required___SDv6c {
1294
2220
  font-size: 14px;
1295
2221
  line-height: 20px;
1296
- color: #F04438;
2222
+ color: var(--error-500);
1297
2223
  font-weight: 500;
1298
2224
  font-family: "Golos UI", sans-serif;
1299
2225
  font-stretch: normal;
@@ -1308,7 +2234,7 @@
1308
2234
  .InputFieldWrapper-module__inputFieldWrapper___QKhWg .InputFieldWrapper-module__hintText___Utfgx {
1309
2235
  font-size: 14px;
1310
2236
  line-height: 20px;
1311
- color: #475467;
2237
+ color: var(--gray-600);
1312
2238
  font-weight: 400;
1313
2239
  font-family: "Golos UI", sans-serif;
1314
2240
  font-stretch: normal;
@@ -1323,7 +2249,7 @@
1323
2249
  .InputFieldWrapper-module__inputFieldWrapper___QKhWg .InputFieldWrapper-module__hintError___v4J5W {
1324
2250
  font-size: 14px;
1325
2251
  line-height: 20px;
1326
- color: #F04438;
2252
+ color: var(--error-500);
1327
2253
  font-weight: 400;
1328
2254
  font-family: "Golos UI", sans-serif;
1329
2255
  font-stretch: normal;
@@ -1342,12 +2268,12 @@
1342
2268
  flex: none;
1343
2269
  }
1344
2270
  .InputFieldWrapper-module__inputFieldWrapper___QKhWg .InputFieldWrapper-module__helperLink___Kfen4 svg * {
1345
- stroke: #2970FF;
2271
+ stroke: var(--blue-dark-500);
1346
2272
  }
1347
2273
  .InputFieldWrapper-module__inputFieldWrapper___QKhWg .InputFieldWrapper-module__helperLink___Kfen4 {
1348
2274
  font-size: 14px;
1349
2275
  line-height: 20px;
1350
- color: #2970FF;
2276
+ color: var(--blue-dark-500);
1351
2277
  font-weight: 400;
1352
2278
  font-family: "Golos UI", sans-serif;
1353
2279
  font-stretch: normal;
@@ -1375,6 +2301,74 @@
1375
2301
  font-weight: 600;
1376
2302
  font-style: normal;
1377
2303
  }
2304
+ :root {
2305
+ --base-white: #FFFFFF;
2306
+ --base-black: #000000;
2307
+ --gray-25: #FCFCFD;
2308
+ --gray-50: #F9FAFB;
2309
+ --gray-100: #F2F4F7;
2310
+ --gray-200: #EAECF0;
2311
+ --gray-300: #D0D5DD;
2312
+ --gray-400: #98A2B3;
2313
+ --gray-500: #667085;
2314
+ --gray-600: #475467;
2315
+ --gray-700: #344054;
2316
+ --gray-800: #1D2939;
2317
+ --gray-900: #101828;
2318
+ --gray-950: #0C111D;
2319
+ --primary-25: #FCFAFF;
2320
+ --primary-50: #F9F5FF;
2321
+ --primary-100: #F4EBFF;
2322
+ --primary-200: #E9D7FE;
2323
+ --primary-300: #D6BBFB;
2324
+ --primary-400: #B692F6;
2325
+ --primary-500: #9E77ED;
2326
+ --primary-600: #7F56D9;
2327
+ --primary-700: #6941C6;
2328
+ --primary-800: #53389E;
2329
+ --primary-900: #42307D;
2330
+ --primary-950: #2C1C5F;
2331
+ --error-25: #FFFBFA;
2332
+ --error-50: #FEF3F2;
2333
+ --error-100: #FEE4E2;
2334
+ --error-200: #FECDCA;
2335
+ --error-300: #FDA29B;
2336
+ --error-400: #F97066;
2337
+ --error-500: #F04438;
2338
+ --error-600: #D92D20;
2339
+ --error-700: #B42318;
2340
+ --error-800: #912018;
2341
+ --error-900: #7A271A;
2342
+ --error-950: #FEFDF0;
2343
+ --warning-25: #FFFCF5;
2344
+ --warning-50: #FFFAEB;
2345
+ --warning-100: #FEF0C7;
2346
+ --warning-200: #FEDF89;
2347
+ --warning-300: #FEC84B;
2348
+ --warning-400: #FDB022;
2349
+ --warning-500: #F79009;
2350
+ --warning-600: #DC6803;
2351
+ --warning-700: #B54708;
2352
+ --warning-800: #93370D;
2353
+ --warning-900: #7A2E0E;
2354
+ --warning-950: #4E1D09;
2355
+ }
2356
+
2357
+ :root {
2358
+ --blue-dark-25: #F5F8FF;
2359
+ --blue-dark-50: #EFF4FF;
2360
+ --blue-dark-100: #D1E0FF;
2361
+ --blue-dark-200: #B2CCFF;
2362
+ --blue-dark-300: #84ADFF;
2363
+ --blue-dark-400: #528BFF;
2364
+ --blue-dark-500: #2970FF;
2365
+ --blue-dark-600: #155EEF;
2366
+ --blue-dark-700: #004EEB;
2367
+ --blue-dark-800: #0040C1;
2368
+ --blue-dark-900: #00359E;
2369
+ --blue-dark-950: #002266;
2370
+ }
2371
+
1378
2372
  .SwitcherField-module__switcherField___R9atT {
1379
2373
  width: 36px;
1380
2374
  height: 20px;
@@ -1382,7 +2376,7 @@
1382
2376
  justify-content: left;
1383
2377
  border-radius: 12px;
1384
2378
  padding: 2px;
1385
- background-color: #EAECF0;
2379
+ background-color: var(--gray-200);
1386
2380
  }
1387
2381
  .SwitcherField-module__switcherField___R9atT:after {
1388
2382
  flex: none;
@@ -1391,27 +2385,27 @@
1391
2385
  height: 16px;
1392
2386
  border-radius: 50%;
1393
2387
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0588235294), 0 1px 3px 0 rgba(16, 24, 40, 0.1019607843);
1394
- background-color: #FFFFFF;
2388
+ background-color: var(--base-white);
1395
2389
  }
1396
2390
  .SwitcherField-module__switcherField___R9atT:hover {
1397
- background-color: #D0D5DD;
2391
+ background-color: var(--gray-300);
1398
2392
  }
1399
2393
  .SwitcherField-module__switcherField___R9atT:focus {
1400
- box-shadow: 0 0 0 4px #F2F4F7;
2394
+ box-shadow: 0 0 0 4px var(--gray-100);
1401
2395
  }
1402
2396
  .SwitcherField-module__switcherField___R9atT.SwitcherField-module__active___p_7P5 {
1403
2397
  justify-content: right;
1404
- background-color: #2970FF;
2398
+ background-color: var(--blue-dark-500);
1405
2399
  }
1406
2400
  .SwitcherField-module__switcherField___R9atT.SwitcherField-module__active___p_7P5:hover {
1407
- background-color: #155EEF;
2401
+ background-color: var(--blue-dark-600);
1408
2402
  }
1409
2403
  .SwitcherField-module__switcherField___R9atT:disabled {
1410
2404
  cursor: default;
1411
- background-color: #EAECF0;
2405
+ background-color: var(--gray-200);
1412
2406
  }
1413
2407
  .SwitcherField-module__switcherField___R9atT:disabled:hover {
1414
- background-color: #EAECF0;
2408
+ background-color: var(--gray-200);
1415
2409
  }
1416
2410
  /*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
1417
2411
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/ui/InputFields/RadioField/styles/RadioField.module.scss ***!
@@ -1434,6 +2428,74 @@
1434
2428
  font-weight: 600;
1435
2429
  font-style: normal;
1436
2430
  }
2431
+ :root {
2432
+ --base-white: #FFFFFF;
2433
+ --base-black: #000000;
2434
+ --gray-25: #FCFCFD;
2435
+ --gray-50: #F9FAFB;
2436
+ --gray-100: #F2F4F7;
2437
+ --gray-200: #EAECF0;
2438
+ --gray-300: #D0D5DD;
2439
+ --gray-400: #98A2B3;
2440
+ --gray-500: #667085;
2441
+ --gray-600: #475467;
2442
+ --gray-700: #344054;
2443
+ --gray-800: #1D2939;
2444
+ --gray-900: #101828;
2445
+ --gray-950: #0C111D;
2446
+ --primary-25: #FCFAFF;
2447
+ --primary-50: #F9F5FF;
2448
+ --primary-100: #F4EBFF;
2449
+ --primary-200: #E9D7FE;
2450
+ --primary-300: #D6BBFB;
2451
+ --primary-400: #B692F6;
2452
+ --primary-500: #9E77ED;
2453
+ --primary-600: #7F56D9;
2454
+ --primary-700: #6941C6;
2455
+ --primary-800: #53389E;
2456
+ --primary-900: #42307D;
2457
+ --primary-950: #2C1C5F;
2458
+ --error-25: #FFFBFA;
2459
+ --error-50: #FEF3F2;
2460
+ --error-100: #FEE4E2;
2461
+ --error-200: #FECDCA;
2462
+ --error-300: #FDA29B;
2463
+ --error-400: #F97066;
2464
+ --error-500: #F04438;
2465
+ --error-600: #D92D20;
2466
+ --error-700: #B42318;
2467
+ --error-800: #912018;
2468
+ --error-900: #7A271A;
2469
+ --error-950: #FEFDF0;
2470
+ --warning-25: #FFFCF5;
2471
+ --warning-50: #FFFAEB;
2472
+ --warning-100: #FEF0C7;
2473
+ --warning-200: #FEDF89;
2474
+ --warning-300: #FEC84B;
2475
+ --warning-400: #FDB022;
2476
+ --warning-500: #F79009;
2477
+ --warning-600: #DC6803;
2478
+ --warning-700: #B54708;
2479
+ --warning-800: #93370D;
2480
+ --warning-900: #7A2E0E;
2481
+ --warning-950: #4E1D09;
2482
+ }
2483
+
2484
+ :root {
2485
+ --blue-dark-25: #F5F8FF;
2486
+ --blue-dark-50: #EFF4FF;
2487
+ --blue-dark-100: #D1E0FF;
2488
+ --blue-dark-200: #B2CCFF;
2489
+ --blue-dark-300: #84ADFF;
2490
+ --blue-dark-400: #528BFF;
2491
+ --blue-dark-500: #2970FF;
2492
+ --blue-dark-600: #155EEF;
2493
+ --blue-dark-700: #004EEB;
2494
+ --blue-dark-800: #0040C1;
2495
+ --blue-dark-900: #00359E;
2496
+ --blue-dark-950: #002266;
2497
+ }
2498
+
1437
2499
  .RadioField-module__radioFieldItem___uaoV4 {
1438
2500
  width: fit-content;
1439
2501
  height: fit-content;
@@ -1445,8 +2507,8 @@
1445
2507
  width: 16px;
1446
2508
  height: 16px;
1447
2509
  border-radius: 50%;
1448
- border: 1px solid #D0D5DD;
1449
- background-color: #FFFFFF;
2510
+ border: 1px solid var(--gray-300);
2511
+ background-color: var(--base-white);
1450
2512
  display: flex;
1451
2513
  align-items: center;
1452
2514
  justify-content: center;
@@ -1454,7 +2516,7 @@
1454
2516
  .RadioField-module__radioFieldItem___uaoV4 .RadioField-module__label___LbYqv {
1455
2517
  font-size: 14px;
1456
2518
  line-height: 20px;
1457
- color: #344054;
2519
+ color: var(--gray-700);
1458
2520
  font-weight: 500;
1459
2521
  font-family: "Golos UI", sans-serif;
1460
2522
  font-stretch: normal;
@@ -1462,7 +2524,7 @@
1462
2524
  font-variant: normal;
1463
2525
  }
1464
2526
  .RadioField-module__radioFieldItem___uaoV4.RadioField-module__active___w24VO .RadioField-module__checkbox____H6Wv {
1465
- border: 1px solid #2970FF;
2527
+ border: 1px solid var(--blue-dark-500);
1466
2528
  }
1467
2529
  .RadioField-module__radioFieldItem___uaoV4.RadioField-module__active___w24VO .RadioField-module__checkbox____H6Wv:after {
1468
2530
  content: "";
@@ -1470,7 +2532,7 @@
1470
2532
  width: 6px;
1471
2533
  height: 6px;
1472
2534
  border-radius: 50%;
1473
- background-color: #2970FF;
2535
+ background-color: var(--blue-dark-500);
1474
2536
  }
1475
2537
  /*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
1476
2538
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/ui/InputFields/TextareaField/styles/TextareaField.module.scss ***!
@@ -1493,6 +2555,74 @@
1493
2555
  font-weight: 600;
1494
2556
  font-style: normal;
1495
2557
  }
2558
+ :root {
2559
+ --base-white: #FFFFFF;
2560
+ --base-black: #000000;
2561
+ --gray-25: #FCFCFD;
2562
+ --gray-50: #F9FAFB;
2563
+ --gray-100: #F2F4F7;
2564
+ --gray-200: #EAECF0;
2565
+ --gray-300: #D0D5DD;
2566
+ --gray-400: #98A2B3;
2567
+ --gray-500: #667085;
2568
+ --gray-600: #475467;
2569
+ --gray-700: #344054;
2570
+ --gray-800: #1D2939;
2571
+ --gray-900: #101828;
2572
+ --gray-950: #0C111D;
2573
+ --primary-25: #FCFAFF;
2574
+ --primary-50: #F9F5FF;
2575
+ --primary-100: #F4EBFF;
2576
+ --primary-200: #E9D7FE;
2577
+ --primary-300: #D6BBFB;
2578
+ --primary-400: #B692F6;
2579
+ --primary-500: #9E77ED;
2580
+ --primary-600: #7F56D9;
2581
+ --primary-700: #6941C6;
2582
+ --primary-800: #53389E;
2583
+ --primary-900: #42307D;
2584
+ --primary-950: #2C1C5F;
2585
+ --error-25: #FFFBFA;
2586
+ --error-50: #FEF3F2;
2587
+ --error-100: #FEE4E2;
2588
+ --error-200: #FECDCA;
2589
+ --error-300: #FDA29B;
2590
+ --error-400: #F97066;
2591
+ --error-500: #F04438;
2592
+ --error-600: #D92D20;
2593
+ --error-700: #B42318;
2594
+ --error-800: #912018;
2595
+ --error-900: #7A271A;
2596
+ --error-950: #FEFDF0;
2597
+ --warning-25: #FFFCF5;
2598
+ --warning-50: #FFFAEB;
2599
+ --warning-100: #FEF0C7;
2600
+ --warning-200: #FEDF89;
2601
+ --warning-300: #FEC84B;
2602
+ --warning-400: #FDB022;
2603
+ --warning-500: #F79009;
2604
+ --warning-600: #DC6803;
2605
+ --warning-700: #B54708;
2606
+ --warning-800: #93370D;
2607
+ --warning-900: #7A2E0E;
2608
+ --warning-950: #4E1D09;
2609
+ }
2610
+
2611
+ :root {
2612
+ --blue-dark-25: #F5F8FF;
2613
+ --blue-dark-50: #EFF4FF;
2614
+ --blue-dark-100: #D1E0FF;
2615
+ --blue-dark-200: #B2CCFF;
2616
+ --blue-dark-300: #84ADFF;
2617
+ --blue-dark-400: #528BFF;
2618
+ --blue-dark-500: #2970FF;
2619
+ --blue-dark-600: #155EEF;
2620
+ --blue-dark-700: #004EEB;
2621
+ --blue-dark-800: #0040C1;
2622
+ --blue-dark-900: #00359E;
2623
+ --blue-dark-950: #002266;
2624
+ }
2625
+
1496
2626
  .TextareaField-module__textareaField___Vcg4L {
1497
2627
  width: 100%;
1498
2628
  height: fit-content;
@@ -1500,13 +2630,13 @@
1500
2630
  resize: none;
1501
2631
  border-radius: 8px;
1502
2632
  padding: 10px 12px;
1503
- background-color: #FFFFFF;
1504
- box-shadow: 0 0 0 1px #D0D5DD, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
2633
+ background-color: var(--base-white);
2634
+ box-shadow: 0 0 0 1px var(--gray-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1505
2635
  }
1506
2636
  .TextareaField-module__textareaField___Vcg4L {
1507
2637
  font-size: 16px;
1508
2638
  line-height: 24px;
1509
- color: #101828;
2639
+ color: var(--gray-900);
1510
2640
  font-weight: 400;
1511
2641
  font-family: "Golos UI", sans-serif;
1512
2642
  font-stretch: normal;
@@ -1516,7 +2646,7 @@
1516
2646
  .TextareaField-module__textareaField___Vcg4L::placeholder {
1517
2647
  font-size: 16px;
1518
2648
  line-height: 24px;
1519
- color: #98A2B3;
2649
+ color: var(--gray-400);
1520
2650
  font-weight: 400;
1521
2651
  font-family: "Golos UI", sans-serif;
1522
2652
  font-stretch: normal;
@@ -1527,12 +2657,12 @@
1527
2657
  box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1528
2658
  }
1529
2659
  .TextareaField-module__textareaField___Vcg4L:disabled {
1530
- background-color: #F2F4F7;
2660
+ background-color: var(--gray-100);
1531
2661
  }
1532
2662
  .TextareaField-module__textareaField___Vcg4L:disabled {
1533
2663
  font-size: 16px;
1534
2664
  line-height: 24px;
1535
- color: #667085;
2665
+ color: var(--gray-500);
1536
2666
  font-weight: 400;
1537
2667
  font-family: "Golos UI", sans-serif;
1538
2668
  font-stretch: normal;
@@ -1540,7 +2670,7 @@
1540
2670
  font-variant: normal;
1541
2671
  }
1542
2672
  .TextareaField-module__textareaField___Vcg4L.TextareaField-module__isError___VGTeU {
1543
- border: 1px solid #FDA29B;
2673
+ border: 1px solid var(--error-300);
1544
2674
  }
1545
2675
  .TextareaField-module__textareaField___Vcg4L.TextareaField-module__isError___VGTeU:focus {
1546
2676
  box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
@@ -1566,6 +2696,74 @@
1566
2696
  font-weight: 600;
1567
2697
  font-style: normal;
1568
2698
  }
2699
+ :root {
2700
+ --base-white: #FFFFFF;
2701
+ --base-black: #000000;
2702
+ --gray-25: #FCFCFD;
2703
+ --gray-50: #F9FAFB;
2704
+ --gray-100: #F2F4F7;
2705
+ --gray-200: #EAECF0;
2706
+ --gray-300: #D0D5DD;
2707
+ --gray-400: #98A2B3;
2708
+ --gray-500: #667085;
2709
+ --gray-600: #475467;
2710
+ --gray-700: #344054;
2711
+ --gray-800: #1D2939;
2712
+ --gray-900: #101828;
2713
+ --gray-950: #0C111D;
2714
+ --primary-25: #FCFAFF;
2715
+ --primary-50: #F9F5FF;
2716
+ --primary-100: #F4EBFF;
2717
+ --primary-200: #E9D7FE;
2718
+ --primary-300: #D6BBFB;
2719
+ --primary-400: #B692F6;
2720
+ --primary-500: #9E77ED;
2721
+ --primary-600: #7F56D9;
2722
+ --primary-700: #6941C6;
2723
+ --primary-800: #53389E;
2724
+ --primary-900: #42307D;
2725
+ --primary-950: #2C1C5F;
2726
+ --error-25: #FFFBFA;
2727
+ --error-50: #FEF3F2;
2728
+ --error-100: #FEE4E2;
2729
+ --error-200: #FECDCA;
2730
+ --error-300: #FDA29B;
2731
+ --error-400: #F97066;
2732
+ --error-500: #F04438;
2733
+ --error-600: #D92D20;
2734
+ --error-700: #B42318;
2735
+ --error-800: #912018;
2736
+ --error-900: #7A271A;
2737
+ --error-950: #FEFDF0;
2738
+ --warning-25: #FFFCF5;
2739
+ --warning-50: #FFFAEB;
2740
+ --warning-100: #FEF0C7;
2741
+ --warning-200: #FEDF89;
2742
+ --warning-300: #FEC84B;
2743
+ --warning-400: #FDB022;
2744
+ --warning-500: #F79009;
2745
+ --warning-600: #DC6803;
2746
+ --warning-700: #B54708;
2747
+ --warning-800: #93370D;
2748
+ --warning-900: #7A2E0E;
2749
+ --warning-950: #4E1D09;
2750
+ }
2751
+
2752
+ :root {
2753
+ --blue-dark-25: #F5F8FF;
2754
+ --blue-dark-50: #EFF4FF;
2755
+ --blue-dark-100: #D1E0FF;
2756
+ --blue-dark-200: #B2CCFF;
2757
+ --blue-dark-300: #84ADFF;
2758
+ --blue-dark-400: #528BFF;
2759
+ --blue-dark-500: #2970FF;
2760
+ --blue-dark-600: #155EEF;
2761
+ --blue-dark-700: #004EEB;
2762
+ --blue-dark-800: #0040C1;
2763
+ --blue-dark-900: #00359E;
2764
+ --blue-dark-950: #002266;
2765
+ }
2766
+
1569
2767
  .InputField-module__flexField___aNE6o {
1570
2768
  width: 100%;
1571
2769
  height: fit-content;
@@ -1575,8 +2773,8 @@
1575
2773
  padding: 10px 12px;
1576
2774
  border-radius: 8px;
1577
2775
  gap: 12px;
1578
- background-color: #FFFFFF;
1579
- box-shadow: 0 0 0 1px #D0D5DD, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
2776
+ background-color: var(--test-variable);
2777
+ box-shadow: 0 0 0 1px var(--gray-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1580
2778
  box-sizing: border-box;
1581
2779
  }
1582
2780
  .InputField-module__flexField___aNE6o .InputField-module__inputField___mzakH {
@@ -1595,7 +2793,7 @@
1595
2793
  .InputField-module__flexField___aNE6o .InputField-module__inputField___mzakH {
1596
2794
  font-size: 16px;
1597
2795
  line-height: 24px;
1598
- color: #101828;
2796
+ color: var(--gray-900);
1599
2797
  font-weight: 400;
1600
2798
  font-family: "Golos UI", sans-serif;
1601
2799
  font-stretch: normal;
@@ -1605,13 +2803,99 @@
1605
2803
  .InputField-module__flexField___aNE6o .InputField-module__inputField___mzakH::placeholder {
1606
2804
  font-size: 16px;
1607
2805
  line-height: 24px;
1608
- color: #98A2B3;
2806
+ color: var(--gray-400);
2807
+ font-weight: 400;
2808
+ font-family: "Golos UI", sans-serif;
2809
+ font-stretch: normal;
2810
+ font-style: normal;
2811
+ font-variant: normal;
2812
+ }
2813
+ .InputField-module__flexField___aNE6o .InputField-module__icon___xR6jG {
2814
+ padding: 2px 0;
2815
+ display: flex;
2816
+ align-items: center;
2817
+ justify-content: center;
2818
+ }
2819
+ .InputField-module__flexField___aNE6o .InputField-module__icon___xR6jG svg * {
2820
+ stroke: var(--gray-400);
2821
+ }
2822
+ .InputField-module__flexField___aNE6o .InputField-module__icon___xR6jG svg {
2823
+ width: 20px;
2824
+ height: 20px;
2825
+ flex: none;
2826
+ }
2827
+ .InputField-module__flexField___aNE6o .InputField-module__textSupport___njpRn {
2828
+ font-size: 16px;
2829
+ line-height: 24px;
2830
+ color: var(--gray-400);
1609
2831
  font-weight: 400;
1610
2832
  font-family: "Golos UI", sans-serif;
1611
2833
  font-stretch: normal;
1612
2834
  font-style: normal;
1613
2835
  font-variant: normal;
1614
2836
  }
2837
+ .InputField-module__flexField___aNE6o .InputField-module__userPic___OQ_q0 {
2838
+ width: 24px;
2839
+ height: 24px;
2840
+ border-radius: 50%;
2841
+ object-fit: scale-down;
2842
+ }
2843
+ .InputField-module__flexField___aNE6o .InputField-module__help___uSjvq {
2844
+ padding: 2px 0;
2845
+ display: flex;
2846
+ align-items: center;
2847
+ justify-content: center;
2848
+ }
2849
+ .InputField-module__flexField___aNE6o .InputField-module__help___uSjvq svg * {
2850
+ stroke: var(--gray-400);
2851
+ }
2852
+ .InputField-module__flexField___aNE6o .InputField-module__help___uSjvq svg {
2853
+ width: 16px;
2854
+ height: 16px;
2855
+ flex: none;
2856
+ }
2857
+ .InputField-module__flexField___aNE6o .InputField-module__dropdown___QQuFp {
2858
+ padding: 2px 0;
2859
+ transition: all ease-in-out 200ms;
2860
+ display: flex;
2861
+ align-items: center;
2862
+ justify-content: center;
2863
+ }
2864
+ .InputField-module__flexField___aNE6o .InputField-module__dropdown___QQuFp svg * {
2865
+ stroke: var(--gray-500);
2866
+ }
2867
+ .InputField-module__flexField___aNE6o .InputField-module__dropdown___QQuFp svg {
2868
+ width: 20px;
2869
+ height: 20px;
2870
+ flex: none;
2871
+ }
2872
+ .InputField-module__flexField___aNE6o .InputField-module__dropdown___QQuFp.InputField-module__dropdownReverse___Nfb9Z {
2873
+ transform: rotateX(-180deg);
2874
+ }
2875
+ .InputField-module__flexField___aNE6o .InputField-module__button___jm0td {
2876
+ padding: 2px 0;
2877
+ transition: all ease-in-out 200ms;
2878
+ display: flex;
2879
+ align-items: center;
2880
+ justify-content: center;
2881
+ }
2882
+ .InputField-module__flexField___aNE6o .InputField-module__button___jm0td svg {
2883
+ width: 20px;
2884
+ height: 20px;
2885
+ flex: none;
2886
+ }
2887
+ .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__red___euINw svg * {
2888
+ stroke: var(--error-400);
2889
+ }
2890
+ .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__red___euINw:hover svg * {
2891
+ stroke: var(--error-500);
2892
+ }
2893
+ .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__gray___GGFcb svg * {
2894
+ stroke: var(--gray-400);
2895
+ }
2896
+ .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__gray___GGFcb:hover svg * {
2897
+ stroke: var(--gray-500);
2898
+ }
1615
2899
  .InputField-module__flexField___aNE6o.InputField-module__pointer___Ij_hP {
1616
2900
  cursor: pointer;
1617
2901
  }
@@ -1619,13 +2903,16 @@
1619
2903
  box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1620
2904
  }
1621
2905
  .InputField-module__flexField___aNE6o.InputField-module__isError___x2fXo {
1622
- box-shadow: 0 0 0 1px #FDA29B, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
2906
+ box-shadow: 0 0 0 1px var(--error-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
2907
+ }
2908
+ .InputField-module__flexField___aNE6o.InputField-module__isError___x2fXo .InputField-module__help___uSjvq svg * {
2909
+ stroke: var(--error-500);
1623
2910
  }
1624
2911
  .InputField-module__flexField___aNE6o.InputField-module__isError___x2fXo.InputField-module__focus___xpWhB {
1625
2912
  box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1626
2913
  }
1627
2914
  .InputField-module__flexField___aNE6o.InputField-module__disabled___hH7HA {
1628
- background-color: #F2F4F7;
2915
+ background-color: var(--gray-100);
1629
2916
  cursor: default;
1630
2917
  }
1631
2918
  .InputField-module__flexField___aNE6o.InputField-module__disabled___hH7HA * {
@@ -1634,7 +2921,7 @@
1634
2921
  .InputField-module__flexField___aNE6o.InputField-module__disabled___hH7HA .InputField-module__inputField___mzakH {
1635
2922
  font-size: 16px;
1636
2923
  line-height: 24px;
1637
- color: #667085;
2924
+ color: var(--gray-500);
1638
2925
  font-weight: 400;
1639
2926
  font-family: "Golos UI", sans-serif;
1640
2927
  font-stretch: normal;
@@ -1656,7 +2943,7 @@
1656
2943
  .InputField-module__inputFieldWrapper___ao9Rs .InputField-module__labelText___Fxxc3 {
1657
2944
  font-size: 14px;
1658
2945
  line-height: 20px;
1659
- color: #344054;
2946
+ color: var(--gray-700);
1660
2947
  font-weight: 500;
1661
2948
  font-family: "Golos UI", sans-serif;
1662
2949
  font-stretch: normal;
@@ -1666,7 +2953,7 @@
1666
2953
  .InputField-module__inputFieldWrapper___ao9Rs .InputField-module__labelText___Fxxc3 .InputField-module__required___p4MLk {
1667
2954
  font-size: 14px;
1668
2955
  line-height: 20px;
1669
- color: #F04438;
2956
+ color: var(--error-500);
1670
2957
  font-weight: 500;
1671
2958
  font-family: "Golos UI", sans-serif;
1672
2959
  font-stretch: normal;
@@ -1681,7 +2968,7 @@
1681
2968
  .InputField-module__inputFieldWrapper___ao9Rs .InputField-module__hintText___LC2Oq {
1682
2969
  font-size: 14px;
1683
2970
  line-height: 20px;
1684
- color: #475467;
2971
+ color: var(--gray-600);
1685
2972
  font-weight: 400;
1686
2973
  font-family: "Golos UI", sans-serif;
1687
2974
  font-stretch: normal;
@@ -1696,7 +2983,7 @@
1696
2983
  .InputField-module__inputFieldWrapper___ao9Rs .InputField-module__hintError___LrJWr {
1697
2984
  font-size: 14px;
1698
2985
  line-height: 20px;
1699
- color: #F04438;
2986
+ color: var(--error-500);
1700
2987
  font-weight: 400;
1701
2988
  font-family: "Golos UI", sans-serif;
1702
2989
  font-stretch: normal;
@@ -1715,12 +3002,12 @@
1715
3002
  flex: none;
1716
3003
  }
1717
3004
  .InputField-module__inputFieldWrapper___ao9Rs .InputField-module__helperLink___A_6Ua svg * {
1718
- stroke: #2970FF;
3005
+ stroke: var(--blue-dark-500);
1719
3006
  }
1720
3007
  .InputField-module__inputFieldWrapper___ao9Rs .InputField-module__helperLink___A_6Ua {
1721
3008
  font-size: 14px;
1722
3009
  line-height: 20px;
1723
- color: #2970FF;
3010
+ color: var(--blue-dark-500);
1724
3011
  font-weight: 400;
1725
3012
  font-family: "Golos UI", sans-serif;
1726
3013
  font-stretch: normal;
@@ -1741,8 +3028,8 @@
1741
3028
  padding: 10px 12px;
1742
3029
  border-radius: 8px;
1743
3030
  gap: 12px;
1744
- background-color: #FFFFFF;
1745
- box-shadow: 0 0 0 1px #D0D5DD, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
3031
+ background-color: var(--test-variable);
3032
+ box-shadow: 0 0 0 1px var(--gray-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1746
3033
  box-sizing: border-box;
1747
3034
  }
1748
3035
  .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__inputField___mzakH {
@@ -1761,7 +3048,7 @@
1761
3048
  .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__inputField___mzakH {
1762
3049
  font-size: 16px;
1763
3050
  line-height: 24px;
1764
- color: #101828;
3051
+ color: var(--gray-900);
1765
3052
  font-weight: 400;
1766
3053
  font-family: "Golos UI", sans-serif;
1767
3054
  font-stretch: normal;
@@ -1771,13 +3058,99 @@
1771
3058
  .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__inputField___mzakH::placeholder {
1772
3059
  font-size: 16px;
1773
3060
  line-height: 24px;
1774
- color: #98A2B3;
3061
+ color: var(--gray-400);
3062
+ font-weight: 400;
3063
+ font-family: "Golos UI", sans-serif;
3064
+ font-stretch: normal;
3065
+ font-style: normal;
3066
+ font-variant: normal;
3067
+ }
3068
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__icon___xR6jG {
3069
+ padding: 2px 0;
3070
+ display: flex;
3071
+ align-items: center;
3072
+ justify-content: center;
3073
+ }
3074
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__icon___xR6jG svg * {
3075
+ stroke: var(--gray-400);
3076
+ }
3077
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__icon___xR6jG svg {
3078
+ width: 20px;
3079
+ height: 20px;
3080
+ flex: none;
3081
+ }
3082
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__textSupport___njpRn {
3083
+ font-size: 16px;
3084
+ line-height: 24px;
3085
+ color: var(--gray-400);
1775
3086
  font-weight: 400;
1776
3087
  font-family: "Golos UI", sans-serif;
1777
3088
  font-stretch: normal;
1778
3089
  font-style: normal;
1779
3090
  font-variant: normal;
1780
3091
  }
3092
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__userPic___OQ_q0 {
3093
+ width: 24px;
3094
+ height: 24px;
3095
+ border-radius: 50%;
3096
+ object-fit: scale-down;
3097
+ }
3098
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__help___uSjvq {
3099
+ padding: 2px 0;
3100
+ display: flex;
3101
+ align-items: center;
3102
+ justify-content: center;
3103
+ }
3104
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__help___uSjvq svg * {
3105
+ stroke: var(--gray-400);
3106
+ }
3107
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__help___uSjvq svg {
3108
+ width: 16px;
3109
+ height: 16px;
3110
+ flex: none;
3111
+ }
3112
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__dropdown___QQuFp {
3113
+ padding: 2px 0;
3114
+ transition: all ease-in-out 200ms;
3115
+ display: flex;
3116
+ align-items: center;
3117
+ justify-content: center;
3118
+ }
3119
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__dropdown___QQuFp svg * {
3120
+ stroke: var(--gray-500);
3121
+ }
3122
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__dropdown___QQuFp svg {
3123
+ width: 20px;
3124
+ height: 20px;
3125
+ flex: none;
3126
+ }
3127
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__dropdown___QQuFp.InputField-module__dropdownReverse___Nfb9Z {
3128
+ transform: rotateX(-180deg);
3129
+ }
3130
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__button___jm0td {
3131
+ padding: 2px 0;
3132
+ transition: all ease-in-out 200ms;
3133
+ display: flex;
3134
+ align-items: center;
3135
+ justify-content: center;
3136
+ }
3137
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__button___jm0td svg {
3138
+ width: 20px;
3139
+ height: 20px;
3140
+ flex: none;
3141
+ }
3142
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__red___euINw svg * {
3143
+ stroke: var(--error-400);
3144
+ }
3145
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__red___euINw:hover svg * {
3146
+ stroke: var(--error-500);
3147
+ }
3148
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__gray___GGFcb svg * {
3149
+ stroke: var(--gray-400);
3150
+ }
3151
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o .InputField-module__button___jm0td.InputField-module__gray___GGFcb:hover svg * {
3152
+ stroke: var(--gray-500);
3153
+ }
1781
3154
  .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o.InputField-module__pointer___Ij_hP {
1782
3155
  cursor: pointer;
1783
3156
  }
@@ -1785,13 +3158,16 @@
1785
3158
  box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1786
3159
  }
1787
3160
  .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o.InputField-module__isError___x2fXo {
1788
- box-shadow: 0 0 0 1px #FDA29B, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
3161
+ box-shadow: 0 0 0 1px var(--error-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
3162
+ }
3163
+ .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o.InputField-module__isError___x2fXo .InputField-module__help___uSjvq svg * {
3164
+ stroke: var(--error-500);
1789
3165
  }
1790
3166
  .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o.InputField-module__isError___x2fXo.InputField-module__focus___xpWhB {
1791
3167
  box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1792
3168
  }
1793
3169
  .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o.InputField-module__disabled___hH7HA {
1794
- background-color: #F2F4F7;
3170
+ background-color: var(--gray-100);
1795
3171
  cursor: default;
1796
3172
  }
1797
3173
  .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o.InputField-module__disabled___hH7HA * {
@@ -1800,7 +3176,7 @@
1800
3176
  .InputField-module__selectField___ED0Q3 .InputField-module__flexField___aNE6o.InputField-module__disabled___hH7HA .InputField-module__inputField___mzakH {
1801
3177
  font-size: 16px;
1802
3178
  line-height: 24px;
1803
- color: #667085;
3179
+ color: var(--gray-500);
1804
3180
  font-weight: 400;
1805
3181
  font-family: "Golos UI", sans-serif;
1806
3182
  font-stretch: normal;
@@ -1820,8 +3196,8 @@
1820
3196
  flex-direction: column;
1821
3197
  border-radius: 8px;
1822
3198
  padding: 4px;
1823
- background-color: #FFFFFF;
1824
- box-shadow: 0 0 0 1px #D0D5DD, 0 4px 6px -2px rgba(16, 24, 40, 0.031372549), 0px 12px 16px -4px rgba(16, 24, 40, 0.0784313725);
3199
+ background-color: var(--base-white);
3200
+ box-shadow: 0 0 0 1px var(--gray-300), 0 4px 6px -2px rgba(16, 24, 40, 0.031372549), 0px 12px 16px -4px rgba(16, 24, 40, 0.0784313725);
1825
3201
  overflow: scroll;
1826
3202
  scrollbar-width: none;
1827
3203
  }
@@ -1841,7 +3217,7 @@
1841
3217
  .InputField-module__selectField___ED0Q3 .InputField-module__modalWindow___JplNC .InputField-module__selectModalWindow___Dg52i .InputField-module__selectFieldOptionsItem___HBdJA .InputField-module__label___Wlb6C {
1842
3218
  font-size: 16px;
1843
3219
  line-height: 24px;
1844
- color: #101828;
3220
+ color: var(--gray-900);
1845
3221
  font-weight: 400;
1846
3222
  font-family: "Golos UI", sans-serif;
1847
3223
  font-stretch: normal;
@@ -1849,7 +3225,7 @@
1849
3225
  font-variant: normal;
1850
3226
  }
1851
3227
  .InputField-module__selectField___ED0Q3 .InputField-module__modalWindow___JplNC .InputField-module__selectModalWindow___Dg52i .InputField-module__selectFieldOptionsItem___HBdJA.InputField-module__active___RcF6w {
1852
- background-color: #EFF4FF;
3228
+ background-color: var(--blue-dark-50);
1853
3229
  }
1854
3230
  .InputField-module__selectField___ED0Q3 .InputField-module__modalWindow___JplNC .InputField-module__selectModalWindow___Dg52i .InputField-module__selectFieldOptionsItem___HBdJA.InputField-module__active___RcF6w svg {
1855
3231
  width: 20px;
@@ -1857,7 +3233,7 @@
1857
3233
  flex: none;
1858
3234
  }
1859
3235
  .InputField-module__selectField___ED0Q3 .InputField-module__modalWindow___JplNC .InputField-module__selectModalWindow___Dg52i .InputField-module__selectFieldOptionsItem___HBdJA.InputField-module__active___RcF6w svg * {
1860
- stroke: #2970FF;
3236
+ stroke: var(--blue-dark-500);
1861
3237
  }
1862
3238
 
1863
3239
  .InputField-module__switcherField___Qezr0 {
@@ -1867,7 +3243,7 @@
1867
3243
  justify-content: left;
1868
3244
  border-radius: 12px;
1869
3245
  padding: 2px;
1870
- background-color: #EAECF0;
3246
+ background-color: var(--gray-200);
1871
3247
  }
1872
3248
  .InputField-module__switcherField___Qezr0:after {
1873
3249
  flex: none;
@@ -1876,27 +3252,27 @@
1876
3252
  height: 16px;
1877
3253
  border-radius: 50%;
1878
3254
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.0588235294), 0 1px 3px 0 rgba(16, 24, 40, 0.1019607843);
1879
- background-color: #FFFFFF;
3255
+ background-color: var(--base-white);
1880
3256
  }
1881
3257
  .InputField-module__switcherField___Qezr0:hover {
1882
- background-color: #D0D5DD;
3258
+ background-color: var(--gray-300);
1883
3259
  }
1884
3260
  .InputField-module__switcherField___Qezr0:focus {
1885
- box-shadow: 0 0 0 4px #F2F4F7;
3261
+ box-shadow: 0 0 0 4px var(--gray-100);
1886
3262
  }
1887
3263
  .InputField-module__switcherField___Qezr0.InputField-module__active___RcF6w {
1888
3264
  justify-content: right;
1889
- background-color: #2970FF;
3265
+ background-color: var(--blue-dark-500);
1890
3266
  }
1891
3267
  .InputField-module__switcherField___Qezr0.InputField-module__active___RcF6w:hover {
1892
- background-color: #155EEF;
3268
+ background-color: var(--blue-dark-600);
1893
3269
  }
1894
3270
  .InputField-module__switcherField___Qezr0:disabled {
1895
3271
  cursor: default;
1896
- background-color: #EAECF0;
3272
+ background-color: var(--gray-200);
1897
3273
  }
1898
3274
  .InputField-module__switcherField___Qezr0:disabled:hover {
1899
- background-color: #EAECF0;
3275
+ background-color: var(--gray-200);
1900
3276
  }
1901
3277
 
1902
3278
  .InputField-module__radioFieldItem___c6OMz {
@@ -1910,8 +3286,8 @@
1910
3286
  width: 16px;
1911
3287
  height: 16px;
1912
3288
  border-radius: 50%;
1913
- border: 1px solid #D0D5DD;
1914
- background-color: #FFFFFF;
3289
+ border: 1px solid var(--gray-300);
3290
+ background-color: var(--base-white);
1915
3291
  display: flex;
1916
3292
  align-items: center;
1917
3293
  justify-content: center;
@@ -1919,7 +3295,7 @@
1919
3295
  .InputField-module__radioFieldItem___c6OMz .InputField-module__label___Wlb6C {
1920
3296
  font-size: 14px;
1921
3297
  line-height: 20px;
1922
- color: #344054;
3298
+ color: var(--gray-700);
1923
3299
  font-weight: 500;
1924
3300
  font-family: "Golos UI", sans-serif;
1925
3301
  font-stretch: normal;
@@ -1927,7 +3303,7 @@
1927
3303
  font-variant: normal;
1928
3304
  }
1929
3305
  .InputField-module__radioFieldItem___c6OMz.InputField-module__active___RcF6w .InputField-module__checkbox___KcnRp {
1930
- border: 1px solid #2970FF;
3306
+ border: 1px solid var(--blue-dark-500);
1931
3307
  }
1932
3308
  .InputField-module__radioFieldItem___c6OMz.InputField-module__active___RcF6w .InputField-module__checkbox___KcnRp:after {
1933
3309
  content: "";
@@ -1935,7 +3311,7 @@
1935
3311
  width: 6px;
1936
3312
  height: 6px;
1937
3313
  border-radius: 50%;
1938
- background-color: #2970FF;
3314
+ background-color: var(--blue-dark-500);
1939
3315
  }
1940
3316
 
1941
3317
  .InputField-module__textareaField___iuYg7 {
@@ -1945,13 +3321,13 @@
1945
3321
  resize: none;
1946
3322
  border-radius: 8px;
1947
3323
  padding: 10px 12px;
1948
- background-color: #FFFFFF;
1949
- box-shadow: 0 0 0 1px #D0D5DD, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
3324
+ background-color: var(--base-white);
3325
+ box-shadow: 0 0 0 1px var(--gray-300), 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1950
3326
  }
1951
3327
  .InputField-module__textareaField___iuYg7 {
1952
3328
  font-size: 16px;
1953
3329
  line-height: 24px;
1954
- color: #101828;
3330
+ color: var(--gray-900);
1955
3331
  font-weight: 400;
1956
3332
  font-family: "Golos UI", sans-serif;
1957
3333
  font-stretch: normal;
@@ -1961,7 +3337,7 @@
1961
3337
  .InputField-module__textareaField___iuYg7::placeholder {
1962
3338
  font-size: 16px;
1963
3339
  line-height: 24px;
1964
- color: #98A2B3;
3340
+ color: var(--gray-400);
1965
3341
  font-weight: 400;
1966
3342
  font-family: "Golos UI", sans-serif;
1967
3343
  font-stretch: normal;
@@ -1972,12 +3348,12 @@
1972
3348
  box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);
1973
3349
  }
1974
3350
  .InputField-module__textareaField___iuYg7:disabled {
1975
- background-color: #F2F4F7;
3351
+ background-color: var(--gray-100);
1976
3352
  }
1977
3353
  .InputField-module__textareaField___iuYg7:disabled {
1978
3354
  font-size: 16px;
1979
3355
  line-height: 24px;
1980
- color: #667085;
3356
+ color: var(--gray-500);
1981
3357
  font-weight: 400;
1982
3358
  font-family: "Golos UI", sans-serif;
1983
3359
  font-stretch: normal;
@@ -1985,7 +3361,7 @@
1985
3361
  font-variant: normal;
1986
3362
  }
1987
3363
  .InputField-module__textareaField___iuYg7.InputField-module__isError___x2fXo {
1988
- border: 1px solid #FDA29B;
3364
+ border: 1px solid var(--error-300);
1989
3365
  }
1990
3366
  .InputField-module__textareaField___iuYg7.InputField-module__isError___x2fXo:focus {
1991
3367
  box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 rgba(16, 24, 40, 0.0509803922);