@itcase/ui 1.8.158 → 1.8.160

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 (111) hide show
  1. package/dist/{DatePicker_cjs_CccRZSjc.js → DatePicker_cjs_BtYlDJ7u.js} +4 -3
  2. package/dist/{DatePicker_es_54jl8guQ.js → DatePicker_es_D3lQ83Q6.js} +4 -3
  3. package/dist/{Input_cjs_DDi5JVAV.js → Input_cjs_IhuIPBIq.js} +2 -2
  4. package/dist/{Input_es_BnCXATnh.js → Input_es_CifTvE3z.js} +2 -2
  5. package/dist/cjs/components/Dadata.js +1 -1
  6. package/dist/cjs/components/DatePeriod.js +2 -2
  7. package/dist/cjs/components/DatePicker.js +2 -2
  8. package/dist/cjs/components/Input.js +1 -1
  9. package/dist/components/Dadata.js +1 -1
  10. package/dist/components/DatePeriod.js +2 -2
  11. package/dist/components/DatePicker.js +2 -2
  12. package/dist/components/Input.js +1 -1
  13. package/dist/css/components/Accordion/Accordion.css +90 -10
  14. package/dist/css/components/Avatar/Avatar.css +219 -12
  15. package/dist/css/components/AvatarStack/AvatarStack.css +54 -8
  16. package/dist/css/components/Badge/Badge.css +1131 -25
  17. package/dist/css/components/Breadcrumbs/Breadcrumbs.css +27 -5
  18. package/dist/css/components/Button/Button.css +467 -21
  19. package/dist/css/components/Cell/Cell.css +31 -6
  20. package/dist/css/components/Checkbox/Checkbox.css +10896 -164
  21. package/dist/css/components/Checkmark/Checkmark.css +60 -9
  22. package/dist/css/components/Chips/Chips.css +53 -7
  23. package/dist/css/components/Choice/Choice.css +123 -13
  24. package/dist/css/components/Choice/css/__item/choice__item_size.css +78 -8
  25. package/dist/css/components/Code/Code.css +55 -11
  26. package/dist/css/components/DatePeriod/DatePeriod.css +61 -11
  27. package/dist/css/components/Divider/Divider.css +35 -15
  28. package/dist/css/components/Dot/Dot.css +41 -7
  29. package/dist/css/components/Dropdown/Dropdown.css +66 -10
  30. package/dist/css/components/Flex/Flex.css +239 -40
  31. package/dist/css/components/Flex/css/__item/flex__item_align.css +51 -8
  32. package/dist/css/components/Flex/css/__item/flex__item_direction.css +11 -4
  33. package/dist/css/components/Flex/css/__item/flex__item_grow.css +5 -4
  34. package/dist/css/components/Flex/css/__item/flex__item_justify-content.css +17 -4
  35. package/dist/css/components/Grid/Grid.css +2207 -106
  36. package/dist/css/components/Grid/css/__item/grid__item_align-self.css +53 -4
  37. package/dist/css/components/Grid/css/__item/grid__item_column.css +270 -9
  38. package/dist/css/components/Grid/css/__item/grid__item_justify-self.css +66 -8
  39. package/dist/css/components/Grid/css/__item/grid__item_row.css +270 -9
  40. package/dist/css/components/Group/Group.css +5220 -117
  41. package/dist/css/components/HeroTitle/HeroTitle.css +27 -4
  42. package/dist/css/components/Icon/Icon.css +7601 -99
  43. package/dist/css/components/Input/Input.css +42 -10
  44. package/dist/css/components/InputPassword/InputPassword.css +42 -10
  45. package/dist/css/components/Label/Label.css +34 -6
  46. package/dist/css/components/Link/Link.css +14 -4
  47. package/dist/css/components/List/List.css +425 -23
  48. package/dist/css/components/Loader/Loader.css +79 -9
  49. package/dist/css/components/Logo/Logo.css +84 -13
  50. package/dist/css/components/MenuItem/MenuItem.css +105 -15
  51. package/dist/css/components/Modal/Modal.css +103 -9
  52. package/dist/css/components/Notification/Notification.css +39 -5
  53. package/dist/css/components/Notification/css/__item/notification__item_size.css +39 -5
  54. package/dist/css/components/Pagination/Pagination.css +82 -19
  55. package/dist/css/components/Pagination/css/__item/pagination__item.css +11 -4
  56. package/dist/css/components/Pagination/css/__item/pagination__item_size.css +15 -5
  57. package/dist/css/components/Radio/Radio.css +11019 -155
  58. package/dist/css/components/RangeSlider/RangeSlider.css +2584 -64
  59. package/dist/css/components/ScrollToView/ScrollToView.css +1974 -10
  60. package/dist/css/components/Search/Search.css +34 -6
  61. package/dist/css/components/Search/css/search-input/search-input_size.css +34 -6
  62. package/dist/css/components/Segmented/Segmented.css +60 -8
  63. package/dist/css/components/Segmented/css/__item/segmaented__item.css +60 -8
  64. package/dist/css/components/Select/Select.css +456 -25
  65. package/dist/css/components/Select/css/__input-container/select__input-container.css +369 -12
  66. package/dist/css/components/Select/css/__menu/select__menu-list-item_size.css +20 -4
  67. package/dist/css/components/Switch/Switch.css +53 -7
  68. package/dist/css/components/Tab/Tab.css +79 -10
  69. package/dist/css/components/Text/Text.css +61 -12
  70. package/dist/css/components/Textarea/Textarea.css +32 -4
  71. package/dist/css/components/Tile/Tile.css +49 -6
  72. package/dist/css/components/Title/Title.css +53 -5
  73. package/dist/css/components/Tooltip/Tooltip.css +21 -5
  74. package/dist/css/components/Warning/Warning.css +6 -8
  75. package/dist/css/styles/align/align.css +20 -3
  76. package/dist/css/styles/align/align_horizontal-reverse.css +188 -4
  77. package/dist/css/styles/align/align_horizontal.css +188 -4
  78. package/dist/css/styles/align/align_vertical-reverse.css +176 -4
  79. package/dist/css/styles/align/align_vertical.css +176 -4
  80. package/dist/css/styles/align-items/align-items.css +16 -3
  81. package/dist/css/styles/align-self/align-self.css +17 -4
  82. package/dist/css/styles/blur/blur.css +78 -5
  83. package/dist/css/styles/border/border.css +224 -10
  84. package/dist/css/styles/border-color/border-color.css +24322 -53
  85. package/dist/css/styles/border-width/border-width.css +52 -4
  86. package/dist/css/styles/bundle.css +96767 -7865
  87. package/dist/css/styles/caret-color/caret-color.css +276 -8
  88. package/dist/css/styles/cursor/cursor.css +21 -5
  89. package/dist/css/styles/elevation/elevation.css +23 -4
  90. package/dist/css/styles/elevation/elevation_hover.css +37 -4
  91. package/dist/css/styles/fill/fill.css +7646 -70
  92. package/dist/css/styles/fill/fill_gradient.css +519 -12
  93. package/dist/css/styles/flex/flex-grow.css +5 -4
  94. package/dist/css/styles/hover/hover-fill-color.css +836 -9
  95. package/dist/css/styles/hover/hover-item-color.css +1074 -9
  96. package/dist/css/styles/hover/hover-text-color.css +1074 -9
  97. package/dist/css/styles/justify-content/justify-content.css +32 -4
  98. package/dist/css/styles/opacity/opacity.css +70 -5
  99. package/dist/css/styles/placeholder-text-color/placeholder-text-color.css +354 -8
  100. package/dist/css/styles/svg-color/svg_fill.css +1018 -9
  101. package/dist/css/styles/svg-color/svg_fill_hover.css +471 -8
  102. package/dist/css/styles/svg-color/svg_path_fill.css +354 -8
  103. package/dist/css/styles/text-align/text-align.css +8 -4
  104. package/dist/css/styles/text-color/text-color.css +3570 -45
  105. package/dist/css/styles/text-decoration/text-decoration.css +5 -4
  106. package/dist/css/styles/text-gradient/text-gradient.css +1182 -12
  107. package/dist/css/styles/text-style/text-style.css +5 -4
  108. package/dist/css/styles/text-weight/text-weight.css +147 -7
  109. package/dist/types/components/DatePicker/DatePicker.interface.d.ts +1 -0
  110. package/dist/types/components/Input/Input.interface.d.ts +3 -1
  111. package/package.json +7 -7
package/dist/css/styles/text-gradient/text-gradient.css CHANGED
@@ -2,24 +2,1194 @@
2
2
  &_primary {
3
3
  @mixin text-gradient-primary;
4
4
  }
5
- @each $type in accent, primary, secondary, tertiary, surface, success, error {
6
- &_$(type) {
7
- @each $color in primary, secondary, tertiary, quaternary {
8
- &-$(color) {
9
- @each $direction in left, top, right, bottom {
10
- &-$(direction) {
5
+ &_accent {
6
+ &-primary {
7
+ &-left {
11
8
  color: transparent;
12
9
  background: linear-gradient(
13
- to $(direction),
14
- var(--color-$(type)-text-gradient-$(color)-start) 0%,
15
- var(--color-$(type)-text-gradient-$(color)-end) 100%
10
+ to left,
11
+ var(--color-accent-text-gradient-primary-start) 0%,
12
+ var(--color-accent-text-gradient-primary-end) 100%
13
+ );
14
+ background-clip: text;
15
+ text-fill-color: transparent;
16
+ }
17
+ &-top {
18
+ color: transparent;
19
+ background: linear-gradient(
20
+ to top,
21
+ var(--color-accent-text-gradient-primary-start) 0%,
22
+ var(--color-accent-text-gradient-primary-end) 100%
23
+ );
24
+ background-clip: text;
25
+ text-fill-color: transparent;
26
+ }
27
+ &-right {
28
+ color: transparent;
29
+ background: linear-gradient(
30
+ to right,
31
+ var(--color-accent-text-gradient-primary-start) 0%,
32
+ var(--color-accent-text-gradient-primary-end) 100%
33
+ );
34
+ background-clip: text;
35
+ text-fill-color: transparent;
36
+ }
37
+ &-bottom {
38
+ color: transparent;
39
+ background: linear-gradient(
40
+ to bottom,
41
+ var(--color-accent-text-gradient-primary-start) 0%,
42
+ var(--color-accent-text-gradient-primary-end) 100%
43
+ );
44
+ background-clip: text;
45
+ text-fill-color: transparent;
46
+ }
47
+ }
48
+ &-secondary {
49
+ &-left {
50
+ color: transparent;
51
+ background: linear-gradient(
52
+ to left,
53
+ var(--color-accent-text-gradient-secondary-start) 0%,
54
+ var(--color-accent-text-gradient-secondary-end) 100%
55
+ );
56
+ background-clip: text;
57
+ text-fill-color: transparent;
58
+ }
59
+ &-top {
60
+ color: transparent;
61
+ background: linear-gradient(
62
+ to top,
63
+ var(--color-accent-text-gradient-secondary-start) 0%,
64
+ var(--color-accent-text-gradient-secondary-end) 100%
65
+ );
66
+ background-clip: text;
67
+ text-fill-color: transparent;
68
+ }
69
+ &-right {
70
+ color: transparent;
71
+ background: linear-gradient(
72
+ to right,
73
+ var(--color-accent-text-gradient-secondary-start) 0%,
74
+ var(--color-accent-text-gradient-secondary-end) 100%
75
+ );
76
+ background-clip: text;
77
+ text-fill-color: transparent;
78
+ }
79
+ &-bottom {
80
+ color: transparent;
81
+ background: linear-gradient(
82
+ to bottom,
83
+ var(--color-accent-text-gradient-secondary-start) 0%,
84
+ var(--color-accent-text-gradient-secondary-end) 100%
85
+ );
86
+ background-clip: text;
87
+ text-fill-color: transparent;
88
+ }
89
+ }
90
+ &-tertiary {
91
+ &-left {
92
+ color: transparent;
93
+ background: linear-gradient(
94
+ to left,
95
+ var(--color-accent-text-gradient-tertiary-start) 0%,
96
+ var(--color-accent-text-gradient-tertiary-end) 100%
97
+ );
98
+ background-clip: text;
99
+ text-fill-color: transparent;
100
+ }
101
+ &-top {
102
+ color: transparent;
103
+ background: linear-gradient(
104
+ to top,
105
+ var(--color-accent-text-gradient-tertiary-start) 0%,
106
+ var(--color-accent-text-gradient-tertiary-end) 100%
107
+ );
108
+ background-clip: text;
109
+ text-fill-color: transparent;
110
+ }
111
+ &-right {
112
+ color: transparent;
113
+ background: linear-gradient(
114
+ to right,
115
+ var(--color-accent-text-gradient-tertiary-start) 0%,
116
+ var(--color-accent-text-gradient-tertiary-end) 100%
117
+ );
118
+ background-clip: text;
119
+ text-fill-color: transparent;
120
+ }
121
+ &-bottom {
122
+ color: transparent;
123
+ background: linear-gradient(
124
+ to bottom,
125
+ var(--color-accent-text-gradient-tertiary-start) 0%,
126
+ var(--color-accent-text-gradient-tertiary-end) 100%
127
+ );
128
+ background-clip: text;
129
+ text-fill-color: transparent;
130
+ }
131
+ }
132
+ &-quaternary {
133
+ &-left {
134
+ color: transparent;
135
+ background: linear-gradient(
136
+ to left,
137
+ var(--color-accent-text-gradient-quaternary-start) 0%,
138
+ var(--color-accent-text-gradient-quaternary-end) 100%
139
+ );
140
+ background-clip: text;
141
+ text-fill-color: transparent;
142
+ }
143
+ &-top {
144
+ color: transparent;
145
+ background: linear-gradient(
146
+ to top,
147
+ var(--color-accent-text-gradient-quaternary-start) 0%,
148
+ var(--color-accent-text-gradient-quaternary-end) 100%
149
+ );
150
+ background-clip: text;
151
+ text-fill-color: transparent;
152
+ }
153
+ &-right {
154
+ color: transparent;
155
+ background: linear-gradient(
156
+ to right,
157
+ var(--color-accent-text-gradient-quaternary-start) 0%,
158
+ var(--color-accent-text-gradient-quaternary-end) 100%
159
+ );
160
+ background-clip: text;
161
+ text-fill-color: transparent;
162
+ }
163
+ &-bottom {
164
+ color: transparent;
165
+ background: linear-gradient(
166
+ to bottom,
167
+ var(--color-accent-text-gradient-quaternary-start) 0%,
168
+ var(--color-accent-text-gradient-quaternary-end) 100%
169
+ );
170
+ background-clip: text;
171
+ text-fill-color: transparent;
172
+ }
173
+ }
174
+ }
175
+ &_primary {
176
+ &-primary {
177
+ &-left {
178
+ color: transparent;
179
+ background: linear-gradient(
180
+ to left,
181
+ var(--color-primary-text-gradient-primary-start) 0%,
182
+ var(--color-primary-text-gradient-primary-end) 100%
183
+ );
184
+ background-clip: text;
185
+ text-fill-color: transparent;
186
+ }
187
+ &-top {
188
+ color: transparent;
189
+ background: linear-gradient(
190
+ to top,
191
+ var(--color-primary-text-gradient-primary-start) 0%,
192
+ var(--color-primary-text-gradient-primary-end) 100%
193
+ );
194
+ background-clip: text;
195
+ text-fill-color: transparent;
196
+ }
197
+ &-right {
198
+ color: transparent;
199
+ background: linear-gradient(
200
+ to right,
201
+ var(--color-primary-text-gradient-primary-start) 0%,
202
+ var(--color-primary-text-gradient-primary-end) 100%
203
+ );
204
+ background-clip: text;
205
+ text-fill-color: transparent;
206
+ }
207
+ &-bottom {
208
+ color: transparent;
209
+ background: linear-gradient(
210
+ to bottom,
211
+ var(--color-primary-text-gradient-primary-start) 0%,
212
+ var(--color-primary-text-gradient-primary-end) 100%
213
+ );
214
+ background-clip: text;
215
+ text-fill-color: transparent;
216
+ }
217
+ }
218
+ &-secondary {
219
+ &-left {
220
+ color: transparent;
221
+ background: linear-gradient(
222
+ to left,
223
+ var(--color-primary-text-gradient-secondary-start) 0%,
224
+ var(--color-primary-text-gradient-secondary-end) 100%
225
+ );
226
+ background-clip: text;
227
+ text-fill-color: transparent;
228
+ }
229
+ &-top {
230
+ color: transparent;
231
+ background: linear-gradient(
232
+ to top,
233
+ var(--color-primary-text-gradient-secondary-start) 0%,
234
+ var(--color-primary-text-gradient-secondary-end) 100%
235
+ );
236
+ background-clip: text;
237
+ text-fill-color: transparent;
238
+ }
239
+ &-right {
240
+ color: transparent;
241
+ background: linear-gradient(
242
+ to right,
243
+ var(--color-primary-text-gradient-secondary-start) 0%,
244
+ var(--color-primary-text-gradient-secondary-end) 100%
245
+ );
246
+ background-clip: text;
247
+ text-fill-color: transparent;
248
+ }
249
+ &-bottom {
250
+ color: transparent;
251
+ background: linear-gradient(
252
+ to bottom,
253
+ var(--color-primary-text-gradient-secondary-start) 0%,
254
+ var(--color-primary-text-gradient-secondary-end) 100%
255
+ );
256
+ background-clip: text;
257
+ text-fill-color: transparent;
258
+ }
259
+ }
260
+ &-tertiary {
261
+ &-left {
262
+ color: transparent;
263
+ background: linear-gradient(
264
+ to left,
265
+ var(--color-primary-text-gradient-tertiary-start) 0%,
266
+ var(--color-primary-text-gradient-tertiary-end) 100%
267
+ );
268
+ background-clip: text;
269
+ text-fill-color: transparent;
270
+ }
271
+ &-top {
272
+ color: transparent;
273
+ background: linear-gradient(
274
+ to top,
275
+ var(--color-primary-text-gradient-tertiary-start) 0%,
276
+ var(--color-primary-text-gradient-tertiary-end) 100%
277
+ );
278
+ background-clip: text;
279
+ text-fill-color: transparent;
280
+ }
281
+ &-right {
282
+ color: transparent;
283
+ background: linear-gradient(
284
+ to right,
285
+ var(--color-primary-text-gradient-tertiary-start) 0%,
286
+ var(--color-primary-text-gradient-tertiary-end) 100%
287
+ );
288
+ background-clip: text;
289
+ text-fill-color: transparent;
290
+ }
291
+ &-bottom {
292
+ color: transparent;
293
+ background: linear-gradient(
294
+ to bottom,
295
+ var(--color-primary-text-gradient-tertiary-start) 0%,
296
+ var(--color-primary-text-gradient-tertiary-end) 100%
297
+ );
298
+ background-clip: text;
299
+ text-fill-color: transparent;
300
+ }
301
+ }
302
+ &-quaternary {
303
+ &-left {
304
+ color: transparent;
305
+ background: linear-gradient(
306
+ to left,
307
+ var(--color-primary-text-gradient-quaternary-start) 0%,
308
+ var(--color-primary-text-gradient-quaternary-end) 100%
309
+ );
310
+ background-clip: text;
311
+ text-fill-color: transparent;
312
+ }
313
+ &-top {
314
+ color: transparent;
315
+ background: linear-gradient(
316
+ to top,
317
+ var(--color-primary-text-gradient-quaternary-start) 0%,
318
+ var(--color-primary-text-gradient-quaternary-end) 100%
319
+ );
320
+ background-clip: text;
321
+ text-fill-color: transparent;
322
+ }
323
+ &-right {
324
+ color: transparent;
325
+ background: linear-gradient(
326
+ to right,
327
+ var(--color-primary-text-gradient-quaternary-start) 0%,
328
+ var(--color-primary-text-gradient-quaternary-end) 100%
329
+ );
330
+ background-clip: text;
331
+ text-fill-color: transparent;
332
+ }
333
+ &-bottom {
334
+ color: transparent;
335
+ background: linear-gradient(
336
+ to bottom,
337
+ var(--color-primary-text-gradient-quaternary-start) 0%,
338
+ var(--color-primary-text-gradient-quaternary-end) 100%
339
+ );
340
+ background-clip: text;
341
+ text-fill-color: transparent;
342
+ }
343
+ }
344
+ }
345
+ &_secondary {
346
+ &-primary {
347
+ &-left {
348
+ color: transparent;
349
+ background: linear-gradient(
350
+ to left,
351
+ var(--color-secondary-text-gradient-primary-start) 0%,
352
+ var(--color-secondary-text-gradient-primary-end) 100%
353
+ );
354
+ background-clip: text;
355
+ text-fill-color: transparent;
356
+ }
357
+ &-top {
358
+ color: transparent;
359
+ background: linear-gradient(
360
+ to top,
361
+ var(--color-secondary-text-gradient-primary-start) 0%,
362
+ var(--color-secondary-text-gradient-primary-end) 100%
363
+ );
364
+ background-clip: text;
365
+ text-fill-color: transparent;
366
+ }
367
+ &-right {
368
+ color: transparent;
369
+ background: linear-gradient(
370
+ to right,
371
+ var(--color-secondary-text-gradient-primary-start) 0%,
372
+ var(--color-secondary-text-gradient-primary-end) 100%
373
+ );
374
+ background-clip: text;
375
+ text-fill-color: transparent;
376
+ }
377
+ &-bottom {
378
+ color: transparent;
379
+ background: linear-gradient(
380
+ to bottom,
381
+ var(--color-secondary-text-gradient-primary-start) 0%,
382
+ var(--color-secondary-text-gradient-primary-end) 100%
383
+ );
384
+ background-clip: text;
385
+ text-fill-color: transparent;
386
+ }
387
+ }
388
+ &-secondary {
389
+ &-left {
390
+ color: transparent;
391
+ background: linear-gradient(
392
+ to left,
393
+ var(--color-secondary-text-gradient-secondary-start) 0%,
394
+ var(--color-secondary-text-gradient-secondary-end) 100%
395
+ );
396
+ background-clip: text;
397
+ text-fill-color: transparent;
398
+ }
399
+ &-top {
400
+ color: transparent;
401
+ background: linear-gradient(
402
+ to top,
403
+ var(--color-secondary-text-gradient-secondary-start) 0%,
404
+ var(--color-secondary-text-gradient-secondary-end) 100%
405
+ );
406
+ background-clip: text;
407
+ text-fill-color: transparent;
408
+ }
409
+ &-right {
410
+ color: transparent;
411
+ background: linear-gradient(
412
+ to right,
413
+ var(--color-secondary-text-gradient-secondary-start) 0%,
414
+ var(--color-secondary-text-gradient-secondary-end) 100%
415
+ );
416
+ background-clip: text;
417
+ text-fill-color: transparent;
418
+ }
419
+ &-bottom {
420
+ color: transparent;
421
+ background: linear-gradient(
422
+ to bottom,
423
+ var(--color-secondary-text-gradient-secondary-start) 0%,
424
+ var(--color-secondary-text-gradient-secondary-end) 100%
425
+ );
426
+ background-clip: text;
427
+ text-fill-color: transparent;
428
+ }
429
+ }
430
+ &-tertiary {
431
+ &-left {
432
+ color: transparent;
433
+ background: linear-gradient(
434
+ to left,
435
+ var(--color-secondary-text-gradient-tertiary-start) 0%,
436
+ var(--color-secondary-text-gradient-tertiary-end) 100%
437
+ );
438
+ background-clip: text;
439
+ text-fill-color: transparent;
440
+ }
441
+ &-top {
442
+ color: transparent;
443
+ background: linear-gradient(
444
+ to top,
445
+ var(--color-secondary-text-gradient-tertiary-start) 0%,
446
+ var(--color-secondary-text-gradient-tertiary-end) 100%
447
+ );
448
+ background-clip: text;
449
+ text-fill-color: transparent;
450
+ }
451
+ &-right {
452
+ color: transparent;
453
+ background: linear-gradient(
454
+ to right,
455
+ var(--color-secondary-text-gradient-tertiary-start) 0%,
456
+ var(--color-secondary-text-gradient-tertiary-end) 100%
457
+ );
458
+ background-clip: text;
459
+ text-fill-color: transparent;
460
+ }
461
+ &-bottom {
462
+ color: transparent;
463
+ background: linear-gradient(
464
+ to bottom,
465
+ var(--color-secondary-text-gradient-tertiary-start) 0%,
466
+ var(--color-secondary-text-gradient-tertiary-end) 100%
467
+ );
468
+ background-clip: text;
469
+ text-fill-color: transparent;
470
+ }
471
+ }
472
+ &-quaternary {
473
+ &-left {
474
+ color: transparent;
475
+ background: linear-gradient(
476
+ to left,
477
+ var(--color-secondary-text-gradient-quaternary-start) 0%,
478
+ var(--color-secondary-text-gradient-quaternary-end) 100%
479
+ );
480
+ background-clip: text;
481
+ text-fill-color: transparent;
482
+ }
483
+ &-top {
484
+ color: transparent;
485
+ background: linear-gradient(
486
+ to top,
487
+ var(--color-secondary-text-gradient-quaternary-start) 0%,
488
+ var(--color-secondary-text-gradient-quaternary-end) 100%
489
+ );
490
+ background-clip: text;
491
+ text-fill-color: transparent;
492
+ }
493
+ &-right {
494
+ color: transparent;
495
+ background: linear-gradient(
496
+ to right,
497
+ var(--color-secondary-text-gradient-quaternary-start) 0%,
498
+ var(--color-secondary-text-gradient-quaternary-end) 100%
499
+ );
500
+ background-clip: text;
501
+ text-fill-color: transparent;
502
+ }
503
+ &-bottom {
504
+ color: transparent;
505
+ background: linear-gradient(
506
+ to bottom,
507
+ var(--color-secondary-text-gradient-quaternary-start) 0%,
508
+ var(--color-secondary-text-gradient-quaternary-end) 100%
509
+ );
510
+ background-clip: text;
511
+ text-fill-color: transparent;
512
+ }
513
+ }
514
+ }
515
+ &_tertiary {
516
+ &-primary {
517
+ &-left {
518
+ color: transparent;
519
+ background: linear-gradient(
520
+ to left,
521
+ var(--color-tertiary-text-gradient-primary-start) 0%,
522
+ var(--color-tertiary-text-gradient-primary-end) 100%
523
+ );
524
+ background-clip: text;
525
+ text-fill-color: transparent;
526
+ }
527
+ &-top {
528
+ color: transparent;
529
+ background: linear-gradient(
530
+ to top,
531
+ var(--color-tertiary-text-gradient-primary-start) 0%,
532
+ var(--color-tertiary-text-gradient-primary-end) 100%
533
+ );
534
+ background-clip: text;
535
+ text-fill-color: transparent;
536
+ }
537
+ &-right {
538
+ color: transparent;
539
+ background: linear-gradient(
540
+ to right,
541
+ var(--color-tertiary-text-gradient-primary-start) 0%,
542
+ var(--color-tertiary-text-gradient-primary-end) 100%
543
+ );
544
+ background-clip: text;
545
+ text-fill-color: transparent;
546
+ }
547
+ &-bottom {
548
+ color: transparent;
549
+ background: linear-gradient(
550
+ to bottom,
551
+ var(--color-tertiary-text-gradient-primary-start) 0%,
552
+ var(--color-tertiary-text-gradient-primary-end) 100%
553
+ );
554
+ background-clip: text;
555
+ text-fill-color: transparent;
556
+ }
557
+ }
558
+ &-secondary {
559
+ &-left {
560
+ color: transparent;
561
+ background: linear-gradient(
562
+ to left,
563
+ var(--color-tertiary-text-gradient-secondary-start) 0%,
564
+ var(--color-tertiary-text-gradient-secondary-end) 100%
565
+ );
566
+ background-clip: text;
567
+ text-fill-color: transparent;
568
+ }
569
+ &-top {
570
+ color: transparent;
571
+ background: linear-gradient(
572
+ to top,
573
+ var(--color-tertiary-text-gradient-secondary-start) 0%,
574
+ var(--color-tertiary-text-gradient-secondary-end) 100%
575
+ );
576
+ background-clip: text;
577
+ text-fill-color: transparent;
578
+ }
579
+ &-right {
580
+ color: transparent;
581
+ background: linear-gradient(
582
+ to right,
583
+ var(--color-tertiary-text-gradient-secondary-start) 0%,
584
+ var(--color-tertiary-text-gradient-secondary-end) 100%
585
+ );
586
+ background-clip: text;
587
+ text-fill-color: transparent;
588
+ }
589
+ &-bottom {
590
+ color: transparent;
591
+ background: linear-gradient(
592
+ to bottom,
593
+ var(--color-tertiary-text-gradient-secondary-start) 0%,
594
+ var(--color-tertiary-text-gradient-secondary-end) 100%
595
+ );
596
+ background-clip: text;
597
+ text-fill-color: transparent;
598
+ }
599
+ }
600
+ &-tertiary {
601
+ &-left {
602
+ color: transparent;
603
+ background: linear-gradient(
604
+ to left,
605
+ var(--color-tertiary-text-gradient-tertiary-start) 0%,
606
+ var(--color-tertiary-text-gradient-tertiary-end) 100%
607
+ );
608
+ background-clip: text;
609
+ text-fill-color: transparent;
610
+ }
611
+ &-top {
612
+ color: transparent;
613
+ background: linear-gradient(
614
+ to top,
615
+ var(--color-tertiary-text-gradient-tertiary-start) 0%,
616
+ var(--color-tertiary-text-gradient-tertiary-end) 100%
617
+ );
618
+ background-clip: text;
619
+ text-fill-color: transparent;
620
+ }
621
+ &-right {
622
+ color: transparent;
623
+ background: linear-gradient(
624
+ to right,
625
+ var(--color-tertiary-text-gradient-tertiary-start) 0%,
626
+ var(--color-tertiary-text-gradient-tertiary-end) 100%
627
+ );
628
+ background-clip: text;
629
+ text-fill-color: transparent;
630
+ }
631
+ &-bottom {
632
+ color: transparent;
633
+ background: linear-gradient(
634
+ to bottom,
635
+ var(--color-tertiary-text-gradient-tertiary-start) 0%,
636
+ var(--color-tertiary-text-gradient-tertiary-end) 100%
637
+ );
638
+ background-clip: text;
639
+ text-fill-color: transparent;
640
+ }
641
+ }
642
+ &-quaternary {
643
+ &-left {
644
+ color: transparent;
645
+ background: linear-gradient(
646
+ to left,
647
+ var(--color-tertiary-text-gradient-quaternary-start) 0%,
648
+ var(--color-tertiary-text-gradient-quaternary-end) 100%
649
+ );
650
+ background-clip: text;
651
+ text-fill-color: transparent;
652
+ }
653
+ &-top {
654
+ color: transparent;
655
+ background: linear-gradient(
656
+ to top,
657
+ var(--color-tertiary-text-gradient-quaternary-start) 0%,
658
+ var(--color-tertiary-text-gradient-quaternary-end) 100%
659
+ );
660
+ background-clip: text;
661
+ text-fill-color: transparent;
662
+ }
663
+ &-right {
664
+ color: transparent;
665
+ background: linear-gradient(
666
+ to right,
667
+ var(--color-tertiary-text-gradient-quaternary-start) 0%,
668
+ var(--color-tertiary-text-gradient-quaternary-end) 100%
669
+ );
670
+ background-clip: text;
671
+ text-fill-color: transparent;
672
+ }
673
+ &-bottom {
674
+ color: transparent;
675
+ background: linear-gradient(
676
+ to bottom,
677
+ var(--color-tertiary-text-gradient-quaternary-start) 0%,
678
+ var(--color-tertiary-text-gradient-quaternary-end) 100%
679
+ );
680
+ background-clip: text;
681
+ text-fill-color: transparent;
682
+ }
683
+ }
684
+ }
685
+ &_surface {
686
+ &-primary {
687
+ &-left {
688
+ color: transparent;
689
+ background: linear-gradient(
690
+ to left,
691
+ var(--color-surface-text-gradient-primary-start) 0%,
692
+ var(--color-surface-text-gradient-primary-end) 100%
693
+ );
694
+ background-clip: text;
695
+ text-fill-color: transparent;
696
+ }
697
+ &-top {
698
+ color: transparent;
699
+ background: linear-gradient(
700
+ to top,
701
+ var(--color-surface-text-gradient-primary-start) 0%,
702
+ var(--color-surface-text-gradient-primary-end) 100%
703
+ );
704
+ background-clip: text;
705
+ text-fill-color: transparent;
706
+ }
707
+ &-right {
708
+ color: transparent;
709
+ background: linear-gradient(
710
+ to right,
711
+ var(--color-surface-text-gradient-primary-start) 0%,
712
+ var(--color-surface-text-gradient-primary-end) 100%
713
+ );
714
+ background-clip: text;
715
+ text-fill-color: transparent;
716
+ }
717
+ &-bottom {
718
+ color: transparent;
719
+ background: linear-gradient(
720
+ to bottom,
721
+ var(--color-surface-text-gradient-primary-start) 0%,
722
+ var(--color-surface-text-gradient-primary-end) 100%
723
+ );
724
+ background-clip: text;
725
+ text-fill-color: transparent;
726
+ }
727
+ }
728
+ &-secondary {
729
+ &-left {
730
+ color: transparent;
731
+ background: linear-gradient(
732
+ to left,
733
+ var(--color-surface-text-gradient-secondary-start) 0%,
734
+ var(--color-surface-text-gradient-secondary-end) 100%
735
+ );
736
+ background-clip: text;
737
+ text-fill-color: transparent;
738
+ }
739
+ &-top {
740
+ color: transparent;
741
+ background: linear-gradient(
742
+ to top,
743
+ var(--color-surface-text-gradient-secondary-start) 0%,
744
+ var(--color-surface-text-gradient-secondary-end) 100%
745
+ );
746
+ background-clip: text;
747
+ text-fill-color: transparent;
748
+ }
749
+ &-right {
750
+ color: transparent;
751
+ background: linear-gradient(
752
+ to right,
753
+ var(--color-surface-text-gradient-secondary-start) 0%,
754
+ var(--color-surface-text-gradient-secondary-end) 100%
755
+ );
756
+ background-clip: text;
757
+ text-fill-color: transparent;
758
+ }
759
+ &-bottom {
760
+ color: transparent;
761
+ background: linear-gradient(
762
+ to bottom,
763
+ var(--color-surface-text-gradient-secondary-start) 0%,
764
+ var(--color-surface-text-gradient-secondary-end) 100%
765
+ );
766
+ background-clip: text;
767
+ text-fill-color: transparent;
768
+ }
769
+ }
770
+ &-tertiary {
771
+ &-left {
772
+ color: transparent;
773
+ background: linear-gradient(
774
+ to left,
775
+ var(--color-surface-text-gradient-tertiary-start) 0%,
776
+ var(--color-surface-text-gradient-tertiary-end) 100%
777
+ );
778
+ background-clip: text;
779
+ text-fill-color: transparent;
780
+ }
781
+ &-top {
782
+ color: transparent;
783
+ background: linear-gradient(
784
+ to top,
785
+ var(--color-surface-text-gradient-tertiary-start) 0%,
786
+ var(--color-surface-text-gradient-tertiary-end) 100%
787
+ );
788
+ background-clip: text;
789
+ text-fill-color: transparent;
790
+ }
791
+ &-right {
792
+ color: transparent;
793
+ background: linear-gradient(
794
+ to right,
795
+ var(--color-surface-text-gradient-tertiary-start) 0%,
796
+ var(--color-surface-text-gradient-tertiary-end) 100%
797
+ );
798
+ background-clip: text;
799
+ text-fill-color: transparent;
800
+ }
801
+ &-bottom {
802
+ color: transparent;
803
+ background: linear-gradient(
804
+ to bottom,
805
+ var(--color-surface-text-gradient-tertiary-start) 0%,
806
+ var(--color-surface-text-gradient-tertiary-end) 100%
807
+ );
808
+ background-clip: text;
809
+ text-fill-color: transparent;
810
+ }
811
+ }
812
+ &-quaternary {
813
+ &-left {
814
+ color: transparent;
815
+ background: linear-gradient(
816
+ to left,
817
+ var(--color-surface-text-gradient-quaternary-start) 0%,
818
+ var(--color-surface-text-gradient-quaternary-end) 100%
819
+ );
820
+ background-clip: text;
821
+ text-fill-color: transparent;
822
+ }
823
+ &-top {
824
+ color: transparent;
825
+ background: linear-gradient(
826
+ to top,
827
+ var(--color-surface-text-gradient-quaternary-start) 0%,
828
+ var(--color-surface-text-gradient-quaternary-end) 100%
829
+ );
830
+ background-clip: text;
831
+ text-fill-color: transparent;
832
+ }
833
+ &-right {
834
+ color: transparent;
835
+ background: linear-gradient(
836
+ to right,
837
+ var(--color-surface-text-gradient-quaternary-start) 0%,
838
+ var(--color-surface-text-gradient-quaternary-end) 100%
839
+ );
840
+ background-clip: text;
841
+ text-fill-color: transparent;
842
+ }
843
+ &-bottom {
844
+ color: transparent;
845
+ background: linear-gradient(
846
+ to bottom,
847
+ var(--color-surface-text-gradient-quaternary-start) 0%,
848
+ var(--color-surface-text-gradient-quaternary-end) 100%
849
+ );
850
+ background-clip: text;
851
+ text-fill-color: transparent;
852
+ }
853
+ }
854
+ }
855
+ &_success {
856
+ &-primary {
857
+ &-left {
858
+ color: transparent;
859
+ background: linear-gradient(
860
+ to left,
861
+ var(--color-success-text-gradient-primary-start) 0%,
862
+ var(--color-success-text-gradient-primary-end) 100%
863
+ );
864
+ background-clip: text;
865
+ text-fill-color: transparent;
866
+ }
867
+ &-top {
868
+ color: transparent;
869
+ background: linear-gradient(
870
+ to top,
871
+ var(--color-success-text-gradient-primary-start) 0%,
872
+ var(--color-success-text-gradient-primary-end) 100%
873
+ );
874
+ background-clip: text;
875
+ text-fill-color: transparent;
876
+ }
877
+ &-right {
878
+ color: transparent;
879
+ background: linear-gradient(
880
+ to right,
881
+ var(--color-success-text-gradient-primary-start) 0%,
882
+ var(--color-success-text-gradient-primary-end) 100%
883
+ );
884
+ background-clip: text;
885
+ text-fill-color: transparent;
886
+ }
887
+ &-bottom {
888
+ color: transparent;
889
+ background: linear-gradient(
890
+ to bottom,
891
+ var(--color-success-text-gradient-primary-start) 0%,
892
+ var(--color-success-text-gradient-primary-end) 100%
893
+ );
894
+ background-clip: text;
895
+ text-fill-color: transparent;
896
+ }
897
+ }
898
+ &-secondary {
899
+ &-left {
900
+ color: transparent;
901
+ background: linear-gradient(
902
+ to left,
903
+ var(--color-success-text-gradient-secondary-start) 0%,
904
+ var(--color-success-text-gradient-secondary-end) 100%
905
+ );
906
+ background-clip: text;
907
+ text-fill-color: transparent;
908
+ }
909
+ &-top {
910
+ color: transparent;
911
+ background: linear-gradient(
912
+ to top,
913
+ var(--color-success-text-gradient-secondary-start) 0%,
914
+ var(--color-success-text-gradient-secondary-end) 100%
915
+ );
916
+ background-clip: text;
917
+ text-fill-color: transparent;
918
+ }
919
+ &-right {
920
+ color: transparent;
921
+ background: linear-gradient(
922
+ to right,
923
+ var(--color-success-text-gradient-secondary-start) 0%,
924
+ var(--color-success-text-gradient-secondary-end) 100%
925
+ );
926
+ background-clip: text;
927
+ text-fill-color: transparent;
928
+ }
929
+ &-bottom {
930
+ color: transparent;
931
+ background: linear-gradient(
932
+ to bottom,
933
+ var(--color-success-text-gradient-secondary-start) 0%,
934
+ var(--color-success-text-gradient-secondary-end) 100%
935
+ );
936
+ background-clip: text;
937
+ text-fill-color: transparent;
938
+ }
939
+ }
940
+ &-tertiary {
941
+ &-left {
942
+ color: transparent;
943
+ background: linear-gradient(
944
+ to left,
945
+ var(--color-success-text-gradient-tertiary-start) 0%,
946
+ var(--color-success-text-gradient-tertiary-end) 100%
947
+ );
948
+ background-clip: text;
949
+ text-fill-color: transparent;
950
+ }
951
+ &-top {
952
+ color: transparent;
953
+ background: linear-gradient(
954
+ to top,
955
+ var(--color-success-text-gradient-tertiary-start) 0%,
956
+ var(--color-success-text-gradient-tertiary-end) 100%
957
+ );
958
+ background-clip: text;
959
+ text-fill-color: transparent;
960
+ }
961
+ &-right {
962
+ color: transparent;
963
+ background: linear-gradient(
964
+ to right,
965
+ var(--color-success-text-gradient-tertiary-start) 0%,
966
+ var(--color-success-text-gradient-tertiary-end) 100%
967
+ );
968
+ background-clip: text;
969
+ text-fill-color: transparent;
970
+ }
971
+ &-bottom {
972
+ color: transparent;
973
+ background: linear-gradient(
974
+ to bottom,
975
+ var(--color-success-text-gradient-tertiary-start) 0%,
976
+ var(--color-success-text-gradient-tertiary-end) 100%
977
+ );
978
+ background-clip: text;
979
+ text-fill-color: transparent;
980
+ }
981
+ }
982
+ &-quaternary {
983
+ &-left {
984
+ color: transparent;
985
+ background: linear-gradient(
986
+ to left,
987
+ var(--color-success-text-gradient-quaternary-start) 0%,
988
+ var(--color-success-text-gradient-quaternary-end) 100%
989
+ );
990
+ background-clip: text;
991
+ text-fill-color: transparent;
992
+ }
993
+ &-top {
994
+ color: transparent;
995
+ background: linear-gradient(
996
+ to top,
997
+ var(--color-success-text-gradient-quaternary-start) 0%,
998
+ var(--color-success-text-gradient-quaternary-end) 100%
999
+ );
1000
+ background-clip: text;
1001
+ text-fill-color: transparent;
1002
+ }
1003
+ &-right {
1004
+ color: transparent;
1005
+ background: linear-gradient(
1006
+ to right,
1007
+ var(--color-success-text-gradient-quaternary-start) 0%,
1008
+ var(--color-success-text-gradient-quaternary-end) 100%
1009
+ );
1010
+ background-clip: text;
1011
+ text-fill-color: transparent;
1012
+ }
1013
+ &-bottom {
1014
+ color: transparent;
1015
+ background: linear-gradient(
1016
+ to bottom,
1017
+ var(--color-success-text-gradient-quaternary-start) 0%,
1018
+ var(--color-success-text-gradient-quaternary-end) 100%
1019
+ );
1020
+ background-clip: text;
1021
+ text-fill-color: transparent;
1022
+ }
1023
+ }
1024
+ }
1025
+ &_error {
1026
+ &-primary {
1027
+ &-left {
1028
+ color: transparent;
1029
+ background: linear-gradient(
1030
+ to left,
1031
+ var(--color-error-text-gradient-primary-start) 0%,
1032
+ var(--color-error-text-gradient-primary-end) 100%
1033
+ );
1034
+ background-clip: text;
1035
+ text-fill-color: transparent;
1036
+ }
1037
+ &-top {
1038
+ color: transparent;
1039
+ background: linear-gradient(
1040
+ to top,
1041
+ var(--color-error-text-gradient-primary-start) 0%,
1042
+ var(--color-error-text-gradient-primary-end) 100%
1043
+ );
1044
+ background-clip: text;
1045
+ text-fill-color: transparent;
1046
+ }
1047
+ &-right {
1048
+ color: transparent;
1049
+ background: linear-gradient(
1050
+ to right,
1051
+ var(--color-error-text-gradient-primary-start) 0%,
1052
+ var(--color-error-text-gradient-primary-end) 100%
1053
+ );
1054
+ background-clip: text;
1055
+ text-fill-color: transparent;
1056
+ }
1057
+ &-bottom {
1058
+ color: transparent;
1059
+ background: linear-gradient(
1060
+ to bottom,
1061
+ var(--color-error-text-gradient-primary-start) 0%,
1062
+ var(--color-error-text-gradient-primary-end) 100%
1063
+ );
1064
+ background-clip: text;
1065
+ text-fill-color: transparent;
1066
+ }
1067
+ }
1068
+ &-secondary {
1069
+ &-left {
1070
+ color: transparent;
1071
+ background: linear-gradient(
1072
+ to left,
1073
+ var(--color-error-text-gradient-secondary-start) 0%,
1074
+ var(--color-error-text-gradient-secondary-end) 100%
1075
+ );
1076
+ background-clip: text;
1077
+ text-fill-color: transparent;
1078
+ }
1079
+ &-top {
1080
+ color: transparent;
1081
+ background: linear-gradient(
1082
+ to top,
1083
+ var(--color-error-text-gradient-secondary-start) 0%,
1084
+ var(--color-error-text-gradient-secondary-end) 100%
1085
+ );
1086
+ background-clip: text;
1087
+ text-fill-color: transparent;
1088
+ }
1089
+ &-right {
1090
+ color: transparent;
1091
+ background: linear-gradient(
1092
+ to right,
1093
+ var(--color-error-text-gradient-secondary-start) 0%,
1094
+ var(--color-error-text-gradient-secondary-end) 100%
1095
+ );
1096
+ background-clip: text;
1097
+ text-fill-color: transparent;
1098
+ }
1099
+ &-bottom {
1100
+ color: transparent;
1101
+ background: linear-gradient(
1102
+ to bottom,
1103
+ var(--color-error-text-gradient-secondary-start) 0%,
1104
+ var(--color-error-text-gradient-secondary-end) 100%
1105
+ );
1106
+ background-clip: text;
1107
+ text-fill-color: transparent;
1108
+ }
1109
+ }
1110
+ &-tertiary {
1111
+ &-left {
1112
+ color: transparent;
1113
+ background: linear-gradient(
1114
+ to left,
1115
+ var(--color-error-text-gradient-tertiary-start) 0%,
1116
+ var(--color-error-text-gradient-tertiary-end) 100%
1117
+ );
1118
+ background-clip: text;
1119
+ text-fill-color: transparent;
1120
+ }
1121
+ &-top {
1122
+ color: transparent;
1123
+ background: linear-gradient(
1124
+ to top,
1125
+ var(--color-error-text-gradient-tertiary-start) 0%,
1126
+ var(--color-error-text-gradient-tertiary-end) 100%
1127
+ );
1128
+ background-clip: text;
1129
+ text-fill-color: transparent;
1130
+ }
1131
+ &-right {
1132
+ color: transparent;
1133
+ background: linear-gradient(
1134
+ to right,
1135
+ var(--color-error-text-gradient-tertiary-start) 0%,
1136
+ var(--color-error-text-gradient-tertiary-end) 100%
1137
+ );
1138
+ background-clip: text;
1139
+ text-fill-color: transparent;
1140
+ }
1141
+ &-bottom {
1142
+ color: transparent;
1143
+ background: linear-gradient(
1144
+ to bottom,
1145
+ var(--color-error-text-gradient-tertiary-start) 0%,
1146
+ var(--color-error-text-gradient-tertiary-end) 100%
1147
+ );
1148
+ background-clip: text;
1149
+ text-fill-color: transparent;
1150
+ }
1151
+ }
1152
+ &-quaternary {
1153
+ &-left {
1154
+ color: transparent;
1155
+ background: linear-gradient(
1156
+ to left,
1157
+ var(--color-error-text-gradient-quaternary-start) 0%,
1158
+ var(--color-error-text-gradient-quaternary-end) 100%
1159
+ );
1160
+ background-clip: text;
1161
+ text-fill-color: transparent;
1162
+ }
1163
+ &-top {
1164
+ color: transparent;
1165
+ background: linear-gradient(
1166
+ to top,
1167
+ var(--color-error-text-gradient-quaternary-start) 0%,
1168
+ var(--color-error-text-gradient-quaternary-end) 100%
1169
+ );
1170
+ background-clip: text;
1171
+ text-fill-color: transparent;
1172
+ }
1173
+ &-right {
1174
+ color: transparent;
1175
+ background: linear-gradient(
1176
+ to right,
1177
+ var(--color-error-text-gradient-quaternary-start) 0%,
1178
+ var(--color-error-text-gradient-quaternary-end) 100%
1179
+ );
1180
+ background-clip: text;
1181
+ text-fill-color: transparent;
1182
+ }
1183
+ &-bottom {
1184
+ color: transparent;
1185
+ background: linear-gradient(
1186
+ to bottom,
1187
+ var(--color-error-text-gradient-quaternary-start) 0%,
1188
+ var(--color-error-text-gradient-quaternary-end) 100%
16
1189
  );
17
1190
  background-clip: text;
18
1191
  text-fill-color: transparent;
19
1192
  }
20
- }
21
1193
  }
22
- }
23
1194
  }
24
- }
25
1195
  }