@semcore/core 17.0.0-prerelease.31 → 17.0.0-prerelease.36

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 (36) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/lib/core-types/Component.d.ts +8 -1
  3. package/lib/core-types/Component.js.map +1 -1
  4. package/lib/core-types/Component.mjs.map +1 -1
  5. package/lib/theme/themes/auto.css +198 -198
  6. package/lib/theme/themes/dark.css +99 -99
  7. package/lib/theme/themes/dark.d.ts +59 -59
  8. package/lib/theme/themes/dark.js +59 -59
  9. package/lib/theme/themes/dark.js.map +1 -1
  10. package/lib/theme/themes/dark.mjs +59 -59
  11. package/lib/theme/themes/dark.mjs.map +1 -1
  12. package/lib/theme/themes/default.css +100 -100
  13. package/lib/theme/themes/default.d.ts +59 -59
  14. package/lib/theme/themes/default.js +59 -59
  15. package/lib/theme/themes/default.js.map +1 -1
  16. package/lib/theme/themes/default.mjs +59 -59
  17. package/lib/theme/themes/default.mjs.map +1 -1
  18. package/lib/theme/themes/light.css +100 -100
  19. package/lib/theme/themes/light.d.ts +59 -59
  20. package/lib/theme/themes/light.js +59 -59
  21. package/lib/theme/themes/light.js.map +1 -1
  22. package/lib/theme/themes/light.mjs +59 -59
  23. package/lib/theme/themes/light.mjs.map +1 -1
  24. package/package.json +1 -1
  25. package/lib/theme/dark.json +0 -2695
  26. package/lib/theme/light.json +0 -2730
  27. package/lib/theme/processor.d.ts +0 -1
  28. package/lib/theme/processor.js +0 -227
  29. package/lib/theme/processor.js.map +0 -1
  30. package/lib/theme/processor.mjs +0 -219
  31. package/lib/theme/processor.mjs.map +0 -1
  32. package/lib/theme/utils.d.ts +0 -58
  33. package/lib/theme/utils.js +0 -251
  34. package/lib/theme/utils.js.map +0 -1
  35. package/lib/theme/utils.mjs +0 -240
  36. package/lib/theme/utils.mjs.map +0 -1
package/lib/theme/dark.json DELETED
@@ -1,2695 +0,0 @@
1
- {
2
- "base": {
3
- "gray": {
4
- "white": {
5
- "value": "#ffffff",
6
- "type": "color"
7
- },
8
- "50": {
9
- "value": "#f4f5f9",
10
- "type": "color",
11
- "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision."
12
- },
13
- "100": {
14
- "value": "#e0e1e9",
15
- "type": "color",
16
- "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements."
17
- },
18
- "200": {
19
- "value": "#c4c7cf",
20
- "type": "color"
21
- },
22
- "300": {
23
- "value": "#a9abb6",
24
- "type": "color"
25
- },
26
- "400": {
27
- "value": "#8a8e9b",
28
- "type": "color"
29
- },
30
- "500": {
31
- "value": "#6c6e79",
32
- "type": "color"
33
- },
34
- "600": {
35
- "value": "#484a54",
36
- "type": "color"
37
- },
38
- "700": {
39
- "value": "#2b2e38",
40
- "type": "color"
41
- },
42
- "800": {
43
- "value": "#191b23",
44
- "type": "color"
45
- }
46
- },
47
- "blue": {
48
- "50": {
49
- "value": "#e9f7ff",
50
- "type": "color",
51
- "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision."
52
- },
53
- "100": {
54
- "value": "#c4e5fe",
55
- "type": "color",
56
- "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements."
57
- },
58
- "200": {
59
- "value": "#8ecdff",
60
- "type": "color"
61
- },
62
- "300": {
63
- "value": "#2bb3ff",
64
- "type": "color"
65
- },
66
- "400": {
67
- "value": "#008ff8",
68
- "type": "color"
69
- },
70
- "500": {
71
- "value": "#006dca",
72
- "type": "color"
73
- },
74
- "600": {
75
- "value": "#044792",
76
- "type": "color"
77
- },
78
- "700": {
79
- "value": "#002b5f",
80
- "type": "color"
81
- },
82
- "800": {
83
- "value": "#001b3d",
84
- "type": "color"
85
- }
86
- },
87
- "green": {
88
- "50": {
89
- "value": "#dbfee8",
90
- "type": "color",
91
- "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision."
92
- },
93
- "100": {
94
- "value": "#9ef2c9",
95
- "type": "color",
96
- "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements."
97
- },
98
- "200": {
99
- "value": "#59ddaa",
100
- "type": "color"
101
- },
102
- "300": {
103
- "value": "#00c192",
104
- "type": "color"
105
- },
106
- "400": {
107
- "value": "#009f81",
108
- "type": "color"
109
- },
110
- "500": {
111
- "value": "#007c65",
112
- "type": "color"
113
- },
114
- "600": {
115
- "value": "#055345",
116
- "type": "color"
117
- },
118
- "700": {
119
- "value": "#00342d",
120
- "type": "color"
121
- },
122
- "800": {
123
- "value": "#00201e",
124
- "type": "color"
125
- }
126
- },
127
- "red": {
128
- "50": {
129
- "value": "#fff0f7",
130
- "type": "color",
131
- "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision."
132
- },
133
- "100": {
134
- "value": "#ffd7df",
135
- "type": "color",
136
- "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements."
137
- },
138
- "200": {
139
- "value": "#ffaeb5",
140
- "type": "color"
141
- },
142
- "300": {
143
- "value": "#ff8786",
144
- "type": "color"
145
- },
146
- "400": {
147
- "value": "#ff4953",
148
- "type": "color"
149
- },
150
- "500": {
151
- "value": "#d1002f",
152
- "type": "color"
153
- },
154
- "600": {
155
- "value": "#8e0016",
156
- "type": "color"
157
- },
158
- "700": {
159
- "value": "#58000a",
160
- "type": "color"
161
- },
162
- "800": {
163
- "value": "#410101",
164
- "type": "color"
165
- }
166
- },
167
- "orange": {
168
- "50": {
169
- "value": "#fff3d9",
170
- "type": "color",
171
- "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision."
172
- },
173
- "100": {
174
- "value": "#ffdca2",
175
- "type": "color",
176
- "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements."
177
- },
178
- "200": {
179
- "value": "#ffb26e",
180
- "type": "color"
181
- },
182
- "300": {
183
- "value": "#ff8c43",
184
- "type": "color"
185
- },
186
- "400": {
187
- "value": "#ff642d",
188
- "type": "color"
189
- },
190
- "500": {
191
- "value": "#c33909",
192
- "type": "color"
193
- },
194
- "600": {
195
- "value": "#8b1500",
196
- "type": "color"
197
- },
198
- "700": {
199
- "value": "#551200",
200
- "type": "color"
201
- },
202
- "800": {
203
- "value": "#351000",
204
- "type": "color"
205
- }
206
- },
207
- "yellow": {
208
- "50": {
209
- "value": "#fdf7c8",
210
- "type": "color",
211
- "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision."
212
- },
213
- "100": {
214
- "value": "#fce081",
215
- "type": "color",
216
- "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements."
217
- },
218
- "200": {
219
- "value": "#fdc23c",
220
- "type": "color"
221
- },
222
- "300": {
223
- "value": "#ef9800",
224
- "type": "color"
225
- },
226
- "400": {
227
- "value": "#d87900",
228
- "type": "color"
229
- },
230
- "500": {
231
- "value": "#a75800",
232
- "type": "color"
233
- },
234
- "600": {
235
- "value": "#743a00",
236
- "type": "color"
237
- },
238
- "700": {
239
- "value": "#462500",
240
- "type": "color"
241
- },
242
- "800": {
243
- "value": "#2c1600",
244
- "type": "color"
245
- }
246
- },
247
- "violet": {
248
- "50": {
249
- "value": "#f9f2ff",
250
- "type": "color",
251
- "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision."
252
- },
253
- "100": {
254
- "value": "#edd9ff",
255
- "type": "color",
256
- "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements."
257
- },
258
- "200": {
259
- "value": "#dcb8ff",
260
- "type": "color"
261
- },
262
- "300": {
263
- "value": "#c695ff",
264
- "type": "color"
265
- },
266
- "400": {
267
- "value": "#ab6cfe",
268
- "type": "color"
269
- },
270
- "500": {
271
- "value": "#8649e1",
272
- "type": "color"
273
- },
274
- "600": {
275
- "value": "#5925ab",
276
- "type": "color"
277
- },
278
- "700": {
279
- "value": "#421983",
280
- "type": "color"
281
- },
282
- "800": {
283
- "value": "#220358",
284
- "type": "color"
285
- },
286
- "dusty": {
287
- "50": {
288
- "value": "#F5F4FF",
289
- "type": "color",
290
- "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision."
291
- },
292
- "100": {
293
- "value": "#E2DDFF",
294
- "type": "color",
295
- "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements."
296
- },
297
- "200": {
298
- "value": "#BCB1E9",
299
- "type": "color"
300
- },
301
- "300": {
302
- "value": "#A79CD6",
303
- "type": "color"
304
- },
305
- "400": {
306
- "value": "#9083C5",
307
- "type": "color"
308
- },
309
- "500": {
310
- "value": "#6D619F",
311
- "type": "color"
312
- },
313
- "600": {
314
- "value": "#4D407E",
315
- "type": "color"
316
- },
317
- "700": {
318
- "value": "#382E5E",
319
- "type": "color"
320
- },
321
- "800": {
322
- "value": "#1D113E",
323
- "type": "color"
324
- }
325
- }
326
- },
327
- "pink": {
328
- "50": {
329
- "value": "#fff0ff",
330
- "type": "color",
331
- "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision."
332
- },
333
- "100": {
334
- "value": "#ffd3ff",
335
- "type": "color",
336
- "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements."
337
- },
338
- "200": {
339
- "value": "#ffa9fa",
340
- "type": "color"
341
- },
342
- "300": {
343
- "value": "#f67cf2",
344
- "type": "color"
345
- },
346
- "400": {
347
- "value": "#e14adf",
348
- "type": "color"
349
- },
350
- "500": {
351
- "value": "#b229b9",
352
- "type": "color"
353
- },
354
- "600": {
355
- "value": "#7d0480",
356
- "type": "color"
357
- },
358
- "700": {
359
- "value": "#4d0050",
360
- "type": "color"
361
- },
362
- "800": {
363
- "value": "#340439",
364
- "type": "color"
365
- }
366
- },
367
- "salad": {
368
- "50": {
369
- "value": "#ecfbcd",
370
- "type": "color",
371
- "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision."
372
- },
373
- "100": {
374
- "value": "#c7ee96",
375
- "type": "color",
376
- "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements."
377
- },
378
- "200": {
379
- "value": "#9bd85d",
380
- "type": "color"
381
- },
382
- "300": {
383
- "value": "#66c030",
384
- "type": "color"
385
- },
386
- "400": {
387
- "value": "#35a21e",
388
- "type": "color"
389
- },
390
- "500": {
391
- "value": "#0a7e22",
392
- "type": "color"
393
- },
394
- "600": {
395
- "value": "#005613",
396
- "type": "color"
397
- },
398
- "700": {
399
- "value": "#003509",
400
- "type": "color"
401
- },
402
- "800": {
403
- "value": "#002203",
404
- "type": "color"
405
- }
406
- }
407
- },
408
- "tokens": {
409
- "bg": {
410
- "primary": {
411
- "neutral": {
412
- "value": "rgba(30, 34, 49, 1)",
413
- "type": "color",
414
- "description": "Primary background of the interface which contains the main data and information."
415
- },
416
- "neutral-hover": {
417
- "value": "rgba(54, 56, 67, 1)",
418
- "type": "color",
419
- "description": "Hover state of the primary background of the interface which contains the main data and information."
420
- },
421
- "neutral-active": {
422
- "value": "rgba(54, 56, 67, 1)",
423
- "type": "color",
424
- "description": "Active (selected) state of the primary background of the interface which contains the main data and information."
425
- },
426
- "info": {
427
- "value": "{blue.400}",
428
- "type": "color",
429
- "description": "Accent background of the message with regular information."
430
- },
431
- "success": {
432
- "value": "{green.400}",
433
- "type": "color",
434
- "description": "Accent background of the message or banner with information about the successful result."
435
- },
436
- "critical": {
437
- "value": "{red.400}",
438
- "type": "color",
439
- "description": "Accent background of a message or a banner with a critical information."
440
- },
441
- "warning": {
442
- "value": "{orange.400}",
443
- "type": "color",
444
- "description": "Accent background of a message or a banner with a warning information."
445
- },
446
- "highlight": {
447
- "value": "{yellow.100}",
448
- "type": "color",
449
- "description": "Accent background of the information you want to highlight."
450
- },
451
- "advertising": {
452
- "value": "{violet.700}",
453
- "type": "color",
454
- "description": "Accent background for the advertising banners and controls."
455
- },
456
- "muted": {
457
- "value": "{gray.500}",
458
- "type": "color",
459
- "description": "Accented muted background for a message with regular information."
460
- },
461
- "invert": {
462
- "value": "{gray.800}",
463
- "type": "color",
464
- "description": "Inverted version of the primary background of the interface that contains the main data and information."
465
- },
466
- "invert-hover": {
467
- "value": "{gray.700}",
468
- "type": "color",
469
- "description": "Hover state for the inverted version of the primary background of the interface that contains the main data and information."
470
- },
471
- "invert-active": {
472
- "value": "{gray.600}",
473
- "type": "color",
474
- "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information."
475
- }
476
- },
477
- "secondary": {
478
- "neutral": {
479
- "value": "rgba(45, 48, 62, 1)",
480
- "type": "color",
481
- "description": "Secondary background of the interface which contains the main data and information."
482
- },
483
- "neutral-hover": {
484
- "value": "{gray.100}",
485
- "type": "color",
486
- "description": "Hover state of the secondary background of the interface which contains the main data and information."
487
- },
488
- "neutral-active": {
489
- "value": "{gray.200}",
490
- "type": "color",
491
- "description": "Active (selected) state of the secondary background of the interface which contains the main data and information."
492
- },
493
- "info": {
494
- "value": "rgba(52, 68, 90, 1)",
495
- "type": "color",
496
- "description": "Secondary background of a message with regular information."
497
- },
498
- "info-hover": {
499
- "value": "rgba(23, 55, 83, 1)",
500
- "type": "color",
501
- "description": "Hover state of the secondary background of a message with regular information."
502
- },
503
- "info-active": {
504
- "value": "{blue.200}",
505
- "type": "color",
506
- "description": "Active (selected) state of the secondary background of a message with regular information."
507
- },
508
- "success": {
509
- "value": "{green.50}",
510
- "type": "color",
511
- "description": "Secondary background of the message with success information you want to accent."
512
- },
513
- "success-hover": {
514
- "value": "{green.100}",
515
- "type": "color",
516
- "description": "Hover state of the secondary background of the message with success information you want to accent."
517
- },
518
- "success-active": {
519
- "value": "{green.200}",
520
- "type": "color",
521
- "description": "Active (selected) state of the secondary background of the message with success information you want to accent."
522
- },
523
- "critical": {
524
- "value": "{red.50}",
525
- "type": "color",
526
- "description": "Secondary background of the message with critical information you want to accent."
527
- },
528
- "critical-hover": {
529
- "value": "{red.100}",
530
- "type": "color",
531
- "description": "Hover state of the secondary background of the message with critical information you want to accent."
532
- },
533
- "critical-active": {
534
- "value": "{red.200}",
535
- "type": "color",
536
- "description": "Active (selected) state of the secondary background of the message with critical information you want to accent."
537
- },
538
- "warning": {
539
- "value": "{orange.50}",
540
- "type": "color",
541
- "description": "Secondary background of the message with warning information you want to accent."
542
- },
543
- "warning-hover": {
544
- "value": "{orange.100}",
545
- "type": "color",
546
- "description": "Hover state of the secondary background of the message with warning information you want to accent."
547
- },
548
- "warning-active": {
549
- "value": "{orange.200}",
550
- "type": "color",
551
- "description": "Active (selected) state of the secondary background of the message with critical information you want to accent."
552
- },
553
- "highlight": {
554
- "value": "{yellow.50}",
555
- "type": "color",
556
- "description": "Secondary background of the information you want to highlight."
557
- },
558
- "highlight-hover": {
559
- "value": "{yellow.100}",
560
- "type": "color",
561
- "description": "Hover state of the secondary background of the information you want to highlight."
562
- },
563
- "highlight-active": {
564
- "value": "{yellow.200}",
565
- "type": "color",
566
- "description": "Active (selected) state of the secondary background of the information you want to highlight."
567
- },
568
- "advertising": {
569
- "value": "rgba(75, 49, 125, 1)",
570
- "type": "color",
571
- "description": "Secondary background for the advertising message you want to accent."
572
- },
573
- "advertising-hover": {
574
- "value": "{violet.100}",
575
- "type": "color",
576
- "description": "Hover state of the secondary background for the advertising message you want to accent."
577
- },
578
- "advertising-active": {
579
- "value": "{violet.200}",
580
- "type": "color",
581
- "description": "Active (selected) state of the secondary background for the advertising message you want to accent."
582
- }
583
- },
584
- "highlight-results": {
585
- "value": "rgba({yellow.300}, 0.4)",
586
- "type": "color",
587
- "description": "Highlighting the search results."
588
- },
589
- "highlight-focus": {
590
- "value": "rgba({blue.400}, 0.2)",
591
- "type": "color",
592
- "description": "Focusing values in the input."
593
- }
594
- },
595
- "text": {
596
- "primary": {
597
- "value": "{gray.50}",
598
- "type": "color",
599
- "description": "Primary text."
600
- },
601
- "secondary": {
602
- "value": "{gray.300}",
603
- "type": "color",
604
- "description": "Secondary text."
605
- },
606
- "placeholder": {
607
- "value": "{gray.400}",
608
- "type": "color",
609
- "description": "Placeholder text only."
610
- },
611
- "success": {
612
- "value": "rgba(68, 209, 164, 1)",
613
- "type": "color",
614
- "description": "Text associated with success states and data."
615
- },
616
- "success-hover-active": {
617
- "value": "{green.600}",
618
- "type": "color",
619
- "description": "Hover and active states for the text associated with success states and data."
620
- },
621
- "critical": {
622
- "value": "rgba(255, 155, 148, 1)",
623
- "type": "color",
624
- "description": "Text associated with critical states and data."
625
- },
626
- "critical-hover-active": {
627
- "value": "{red.600}",
628
- "type": "color",
629
- "description": "Hover and active states for the text associated with critical states and data."
630
- },
631
- "primary-invert": {
632
- "value": "{gray.white}",
633
- "type": "color",
634
- "description": "Inverted version of the primary text."
635
- },
636
- "secondary-invert": {
637
- "value": "{gray.white}, 0.75",
638
- "type": "color",
639
- "description": "Inverted version of the secondary text."
640
- },
641
- "link": {
642
- "value": "{blue.200}",
643
- "type": "color",
644
- "description": "Link text."
645
- },
646
- "link-hover-active": {
647
- "value": "{blue.300}",
648
- "type": "color",
649
- "description": "Hover and active states for the link text."
650
- },
651
- "link-invert": {
652
- "value": "{blue.200}",
653
- "type": "color",
654
- "description": "Inverted version of the link text. Use on dark background only."
655
- },
656
- "link-invert-hover": {
657
- "value": "{blue.300}",
658
- "type": "color",
659
- "description": "Hover and active states of the inverted version of the link text. Use on dark background only."
660
- },
661
- "link-visited": {
662
- "value": "{violet.500}",
663
- "type": "color",
664
- "description": "Visited link text."
665
- },
666
- "hint": {
667
- "value": "{gray.300}",
668
- "type": "color",
669
- "description": "Hint link text."
670
- },
671
- "hint-hover-active": {
672
- "value": "{gray.100}",
673
- "type": "color",
674
- "description": "Hover and active states of the hint link text."
675
- },
676
- "hint-invert": {
677
- "value": "{gray.200}",
678
- "type": "color",
679
- "description": "Inverted version of the hint link text."
680
- },
681
- "hint-invert-hover-active": {
682
- "value": "{gray.300}",
683
- "type": "color",
684
- "description": "Hover and active states of the inverted version of the hint link text."
685
- },
686
- "large-secondary": {
687
- "value": "{gray.300}",
688
- "type": "color",
689
- "description": "Secondary text. Use with font-size ≥20px."
690
- },
691
- "large-info": {
692
- "value": "{blue.400}",
693
- "type": "color",
694
- "description": "Link text with font-size ≥20px."
695
- },
696
- "large-info-hover-active": {
697
- "value": "{blue.500}",
698
- "type": "color",
699
- "description": "Hover and active states of the link text with font-size ≥20px."
700
- },
701
- "large-success": {
702
- "value": "{green.400}",
703
- "type": "color",
704
- "description": "Text with font-size ≥20px associated with success states and data."
705
- },
706
- "large-success-hover-active": {
707
- "value": "{green.500}",
708
- "type": "color",
709
- "description": "Hover and active states of the text with font-size ≥20px associated with success states and data."
710
- },
711
- "large-critical": {
712
- "value": "{red.400}",
713
- "type": "color",
714
- "description": "Text with font-size ≥20px associated with critical states and data."
715
- },
716
- "large-critical-hover-active": {
717
- "value": "{red.500}",
718
- "type": "color",
719
- "description": "Hover and active states of the text with font-size ≥20px associated with critical states and data."
720
- },
721
- "advertising": {
722
- "value": "{violet.700}",
723
- "type": "color",
724
- "description": "Advertising text."
725
- }
726
- },
727
- "border": {
728
- "primary": {
729
- "value": "{gray.600}",
730
- "type": "color",
731
- "description": "Neutral primary border."
732
- },
733
- "secondary": {
734
- "value": "{gray.600}",
735
- "type": "color",
736
- "description": "Subtle secondary border."
737
- },
738
- "info": {
739
- "value": "{blue.200}",
740
- "type": "color",
741
- "description": "Subtle secondary border in the informational message."
742
- },
743
- "info-active": {
744
- "value": "{blue.100}",
745
- "type": "color",
746
- "description": "Active border in focused input filed."
747
- },
748
- "success": {
749
- "value": "{green.200}",
750
- "type": "color",
751
- "description": "Subtle secondary border in the successful message and input field."
752
- },
753
- "success-active": {
754
- "value": "{green.50}",
755
- "type": "color",
756
- "description": "Active border in the focused input field with valid state."
757
- },
758
- "critical": {
759
- "value": "{red.200}",
760
- "type": "color",
761
- "description": "Subtle secondary border in the critical message and invalid input field."
762
- },
763
- "critical-active": {
764
- "value": "rgba(253, 182, 177, 1)",
765
- "type": "color",
766
- "description": "Active border in the focused input field with invalid state, and active state of the other components with invalid state."
767
- },
768
- "warning": {
769
- "value": "{orange.200}",
770
- "type": "color",
771
- "description": "Subtle secondary border in the warning message."
772
- },
773
- "warning-active": {
774
- "value": "{orange.500}",
775
- "type": "color",
776
- "description": "Active border in components with warning intention."
777
- },
778
- "primary-invert": {
779
- "value": "{gray.white}",
780
- "type": "color",
781
- "description": "Inverted version of the neutral primary border. Use it for borders on the dark or color background."
782
- },
783
- "secondary-invert": {
784
- "value": "rgba({gray.white}, 0.3)",
785
- "type": "color",
786
- "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background."
787
- },
788
- "tooltip-invert": {
789
- "value": "{gray.500}",
790
- "type": "color",
791
- "description": "Border of the Tooltip with dark theme."
792
- },
793
- "table-accent": {
794
- "value": "{gray.300}",
795
- "type": "color",
796
- "description": "Accent borders in the Table: for the accordion in the table and for the header of the secondary table."
797
- },
798
- "date-picker-range-comparison": {
799
- "value": "{violet.500}",
800
- "type": "color",
801
- "description": "Border color of the second period for the comparison mode in the DatePicker."
802
- }
803
- },
804
- "control": {
805
- "switch-bg": {
806
- "value": "{gray.300}",
807
- "type": "color",
808
- "description": "Subtle background of the Switch control."
809
- },
810
- "primary": {
811
- "info": {
812
- "value": "{blue.400}",
813
- "type": "color",
814
- "description": "Background of the regular primary control."
815
- },
816
- "info-hover": {
817
- "value": "{blue.500}",
818
- "type": "color",
819
- "description": "Hover state of the regular primary control."
820
- },
821
- "info-active": {
822
- "value": "{blue.600}",
823
- "type": "color",
824
- "description": "Active (selected) state of the regular primary control."
825
- },
826
- "success": {
827
- "value": "{green.400}",
828
- "type": "color",
829
- "description": "Background of the primary control with successful theme."
830
- },
831
- "success-hover": {
832
- "value": "{green.500}",
833
- "type": "color",
834
- "description": "Hover state of the primary control with successful theme."
835
- },
836
- "success-active": {
837
- "value": "{green.600}",
838
- "type": "color",
839
- "description": "Active (selected) state of the primary control with successful theme."
840
- },
841
- "critical": {
842
- "value": "{red.400}",
843
- "type": "color",
844
- "description": "Background of the primary control with danger theme."
845
- },
846
- "critical-hover": {
847
- "value": "{red.500}",
848
- "type": "color",
849
- "description": "Hover state of the primary control with danger theme."
850
- },
851
- "critical-active": {
852
- "value": "{red.600}",
853
- "type": "color",
854
- "description": "Active (selected) state of the primary control with danger theme."
855
- },
856
- "brand": {
857
- "value": "{orange.400}",
858
- "type": "color",
859
- "description": "Background of the primary brand colored control."
860
- },
861
- "brand-hover": {
862
- "value": "{orange.500}",
863
- "type": "color",
864
- "description": "Hover state of the primary brand colored control."
865
- },
866
- "brand-active": {
867
- "value": "{orange.500}",
868
- "type": "color",
869
- "description": "Active state of the primary brand colored control."
870
- },
871
- "advertising": {
872
- "value": "{violet.600}",
873
- "type": "color",
874
- "description": "Background of the advertising primary control."
875
- },
876
- "advertising-hover": {
877
- "value": "{violet.700}",
878
- "type": "color",
879
- "description": "Hover state of the advertising primary control."
880
- },
881
- "advertising-active": {
882
- "value": "{violet.500}",
883
- "type": "color",
884
- "description": "Active (selected) state of the advertising primary control."
885
- },
886
- "invert": {
887
- "value": "rgba(30, 34, 49, 1)",
888
- "type": "color",
889
- "description": "Inverted background of the primary control."
890
- },
891
- "invert-hover": {
892
- "value": "rgba(43, 46, 57, 1)",
893
- "type": "color",
894
- "description": "Hover state of the inverted primary control."
895
- },
896
- "invert-active": {
897
- "value": "rgba(43, 46, 57, 1)",
898
- "type": "color",
899
- "description": "Active (selected) state of the inverted primary control."
900
- }
901
- },
902
- "secondary": {
903
- "neutral": {
904
- "value": "rgba({gray.400}, 0.1)",
905
- "type": "color",
906
- "description": "Background of the regular secondary control."
907
- },
908
- "neutral-hover": {
909
- "value": "rgba({gray.400}, 0.2)",
910
- "type": "color",
911
- "description": "Hover state of the regular secondary control."
912
- },
913
- "neutral-active": {
914
- "value": "rgba({gray.400}, 0.3)",
915
- "type": "color",
916
- "description": "Active (selected) state of the regular secondary control."
917
- },
918
- "info": {
919
- "value": "rgba({blue.400}, 0.1)",
920
- "type": "color",
921
- "description": "Background of the accent secondary control."
922
- },
923
- "info-hover": {
924
- "value": "rgba({blue.400}, 0.2)",
925
- "type": "color",
926
- "description": "Hover state of the accent secondary control."
927
- },
928
- "info-active": {
929
- "value": "rgba({blue.400}, 0.3)",
930
- "type": "color",
931
- "description": "Active (selected) state of the accent secondary control."
932
- },
933
- "invert": {
934
- "value": "rgba({gray.white}, 0.05)",
935
- "type": "color",
936
- "description": "Background of the inverted version of the secondary control."
937
- },
938
- "invert-hover": {
939
- "value": "rgba({gray.white}, 0.1)",
940
- "type": "color",
941
- "description": "Hover state of the inverted version of the secondary control."
942
- },
943
- "invert-active": {
944
- "value": "rgba({gray.white}, 0.3)",
945
- "type": "color",
946
- "description": "Active (selected) state of the inverted version of the secondary control."
947
- }
948
- },
949
- "tertiary": {
950
- "neutral": {
951
- "value": "rgba({gray.400}, 0)",
952
- "type": "color",
953
- "description": "Background of the regular tertiary control."
954
- },
955
- "neutral-hover": {
956
- "value": "rgba({gray.400}, 0.2)",
957
- "type": "color",
958
- "description": "Hover state of the regular tertiary control."
959
- },
960
- "neutral-active": {
961
- "value": "rgba({gray.400}, 0.3)",
962
- "type": "color",
963
- "description": "Active (selected) state of the regular tertiary control."
964
- },
965
- "info": {
966
- "value": "rgba({blue.400}, 0)",
967
- "type": "color",
968
- "description": "Background of the accent and link-lookalike tertiary control."
969
- },
970
- "info-hover": {
971
- "value": "rgba({blue.400}, 0.2)",
972
- "type": "color",
973
- "description": "Hover state of the accent and link-lookalike tertiary control."
974
- },
975
- "info-active": {
976
- "value": "rgba({blue.400}, 0.3)",
977
- "type": "color",
978
- "description": "Active (selected) state of the accent and link-lookalike tertiary control."
979
- },
980
- "invert": {
981
- "value": "rgba({gray.white}, 0)",
982
- "type": "color",
983
- "description": "Background of the inverted version of the tertiary control."
984
- },
985
- "invert-hover": {
986
- "value": "rgba({gray.white}, 0.1)",
987
- "type": "color",
988
- "description": "Hover state of the inverted version of the tertiary control."
989
- },
990
- "invert-active": {
991
- "value": "rgba({gray.white}, 0.3)",
992
- "type": "color",
993
- "description": "Active (selected) state of the inverted version of the tertiary control."
994
- }
995
- }
996
- },
997
- "icon": {
998
- "primary": {
999
- "neutral": {
1000
- "value": "{gray.300}",
1001
- "type": "color",
1002
- "description": "Primary neutral icon."
1003
- },
1004
- "neutral-hover-active": {
1005
- "value": "{gray.200}",
1006
- "type": "color",
1007
- "description": "Hover and active (selected) states of the primary neutral icon."
1008
- },
1009
- "info": {
1010
- "value": "{blue.500}",
1011
- "type": "color",
1012
- "description": "Primary link-lookalike icon."
1013
- },
1014
- "info-hover-active": {
1015
- "value": "{blue.600}",
1016
- "type": "color",
1017
- "description": "Hover and active (selected) states of the primary link-lookalike icon."
1018
- },
1019
- "success": {
1020
- "value": "{green.400}",
1021
- "type": "color",
1022
- "description": "Primary success icon."
1023
- },
1024
- "success-hover-active": {
1025
- "value": "{green.500}",
1026
- "type": "color",
1027
- "description": "Hover and active (selected) states of the primary successful icon."
1028
- },
1029
- "critical": {
1030
- "value": "{red.400}",
1031
- "type": "color",
1032
- "description": "Primary critical icon."
1033
- },
1034
- "critical-hover-active": {
1035
- "value": "{red.500}",
1036
- "type": "color",
1037
- "description": "Hover and active (selected) states of the primary critical icon."
1038
- },
1039
- "warning": {
1040
- "value": "{orange.400}",
1041
- "type": "color",
1042
- "description": "Primary warning icon."
1043
- },
1044
- "warning-hover-active": {
1045
- "value": "{orange.500}",
1046
- "type": "color",
1047
- "description": "Hover and active (selected) states of the primary warning icon."
1048
- },
1049
- "invert": {
1050
- "value": "{gray.white}",
1051
- "type": "color",
1052
- "description": "Inverted version of the primary icon."
1053
- },
1054
- "invert-hover-active": {
1055
- "value": "{gray.100}",
1056
- "type": "color",
1057
- "description": "Hover and active (selected) states of the inverted version of the primary icon."
1058
- }
1059
- },
1060
- "secondary": {
1061
- "neutral": {
1062
- "value": "{gray.200}",
1063
- "type": "color",
1064
- "description": "Secondary neutral icon."
1065
- },
1066
- "neutral-hover-active": {
1067
- "value": "{gray.100}",
1068
- "type": "color",
1069
- "description": "Hover and active (selected) states of the secondary neutral icon."
1070
- },
1071
- "info": {
1072
- "value": "{blue.300}",
1073
- "type": "color",
1074
- "description": "Secondary link-lookalike icon."
1075
- },
1076
- "info-hover-active": {
1077
- "value": "{blue.400}",
1078
- "type": "color",
1079
- "description": "Hover and active (selected) states of the secondary link-lookalike icon."
1080
- },
1081
- "success": {
1082
- "value": "{green.300}",
1083
- "type": "color",
1084
- "description": "Secondary success icon."
1085
- },
1086
- "success-hover-active": {
1087
- "value": "{green.400}",
1088
- "type": "color",
1089
- "description": "Hover and active (selected) states of the secondary successful icon."
1090
- },
1091
- "critical": {
1092
- "value": "{red.300}",
1093
- "type": "color",
1094
- "description": "Secondary critical icon."
1095
- },
1096
- "critical-hover-active": {
1097
- "value": "{red.400}",
1098
- "type": "color",
1099
- "description": "Hover and active (selected) states of the secondary critical icon."
1100
- },
1101
- "warning": {
1102
- "value": "{orange.300}",
1103
- "type": "color",
1104
- "description": "Secondary warning icon."
1105
- },
1106
- "warning-hover-active": {
1107
- "value": "{orange.400}",
1108
- "type": "color",
1109
- "description": "Hover and active (selected) states of the secondary warning icon."
1110
- }
1111
- },
1112
- "non-interactive": {
1113
- "value": "{gray.50}",
1114
- "type": "color",
1115
- "description": "Color for the default non-interactive icon."
1116
- }
1117
- },
1118
- "illustration": {
1119
- "red": {
1120
- "value": "#FF788F",
1121
- "type": "color",
1122
- "description": "⚠️ Use only for illustrations."
1123
- },
1124
- "orange": {
1125
- "value": "#FFB26E",
1126
- "type": "color",
1127
- "description": "⚠️ Use only for illustrations."
1128
- },
1129
- "yellow": {
1130
- "value": "#FFE84D",
1131
- "type": "color",
1132
- "description": "⚠️ Use only for illustrations."
1133
- },
1134
- "salad": {
1135
- "value": "#C7FA73",
1136
- "type": "color",
1137
- "description": "⚠️ Use only for illustrations."
1138
- },
1139
- "green": {
1140
- "value": "#45E0A8",
1141
- "type": "color",
1142
- "description": "⚠️ Use only for illustrations."
1143
- },
1144
- "blue": {
1145
- "value": "#6EDBFF",
1146
- "type": "color",
1147
- "description": "⚠️ Use only for illustrations."
1148
- },
1149
- "violet": {
1150
- "value": "#B880FF",
1151
- "type": "color",
1152
- "description": "⚠️ Use only for illustrations."
1153
- },
1154
- "pink": {
1155
- "value": "#FF7AD1",
1156
- "type": "color",
1157
- "description": "⚠️ Use only for illustrations."
1158
- }
1159
- },
1160
- "date-picker": {
1161
- "cell": {
1162
- "value": "rgba(30, 34, 49, 1)",
1163
- "type": "color",
1164
- "description": "Default date-picker cell background."
1165
- },
1166
- "cell-current": {
1167
- "value": "{gray.700}",
1168
- "type": "color",
1169
- "description": "Color for marking the cell with the current date, month or year in the date-picker."
1170
- },
1171
- "cell-hover": {
1172
- "value": "{gray.600}",
1173
- "type": "color",
1174
- "description": "Hover state of the default date-picker cell background."
1175
- },
1176
- "cell-range": {
1177
- "value": "{blue.700}",
1178
- "type": "color",
1179
- "description": "Background for the cell which is included in the date range in the date-picker."
1180
- },
1181
- "cell-range-hover": {
1182
- "value": "{blue.600}",
1183
- "type": "color",
1184
- "description": "Hover state of the background for the cell which is included in the date range in the date-picker."
1185
- },
1186
- "cell-active": {
1187
- "value": "{blue.300}",
1188
- "type": "color",
1189
- "description": "Active (selected) date-picker cell background."
1190
- },
1191
- "cell-active-hover": {
1192
- "value": "{blue.400}",
1193
- "type": "color",
1194
- "description": "Hover for the active (selected) date-picker cell background."
1195
- },
1196
- "cell-current-invert": {
1197
- "value": "rgba({gray.white}, 0.5)",
1198
- "type": "color",
1199
- "description": "Color for marking the active cell with the current date, month or year in the date-picker."
1200
- },
1201
- "cell-comparison-active": {
1202
- "value": "{violet.500}",
1203
- "type": "color",
1204
- "description": "Active (selected) date-picker cell background for comparison periods."
1205
- },
1206
- "cell-comparison-active-hover": {
1207
- "value": "{violet.600}",
1208
- "type": "color",
1209
- "description": "Hover for the active (selected) date-picker cell background for comparison periods."
1210
- }
1211
- },
1212
- "dropdown-menu": {
1213
- "item": {
1214
- "value": "rgba(54, 56, 67, 1)",
1215
- "type": "color",
1216
- "description": "Default background color for the list item in the dropdown-menu."
1217
- },
1218
- "item-hover": {
1219
- "value": "rgba(79, 82, 93, 1)",
1220
- "type": "color",
1221
- "description": "Hover state of the default background color for the list item in the dropdown-menu."
1222
- },
1223
- "item-selected": {
1224
- "value": "rgba(66, 103, 123, 1)",
1225
- "type": "color",
1226
- "description": "Active (selected) state of the default background color for the list item in the dropdown-menu."
1227
- },
1228
- "item-selected-hover": {
1229
- "value": "rgba(75, 117, 139, 1)",
1230
- "type": "color",
1231
- "description": "Hover state for the selected state of the default background color for the list item in the dropdown-menu."
1232
- }
1233
- },
1234
- "feature-popover": {
1235
- "bg": {
1236
- "value": "{bg.primary.highlight}",
1237
- "type": "color",
1238
- "description": "Color of the FeaturePopover background with accent theme."
1239
- },
1240
- "dot-outer-border": {
1241
- "value": "{feature-popover.bg}",
1242
- "type": "color",
1243
- "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme."
1244
- },
1245
- "bg-neutral": {
1246
- "value": "{violet.dusty.800}",
1247
- "type": "color",
1248
- "description": "Color of the FeaturePopover background with neutral theme."
1249
- },
1250
- "dot-neutral": {
1251
- "value": "{green.300}",
1252
- "type": "color",
1253
- "description": "Color of the FeaturePopover.Spot for FeaturePopover with neutral theme."
1254
- },
1255
- "dot-neutral-outer-border": {
1256
- "value": "{feature-popover.dot-neutral}",
1257
- "type": "color",
1258
- "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme."
1259
- }
1260
- },
1261
- "progress-bar": {
1262
- "bg": {
1263
- "value": "{gray.600}",
1264
- "type": "color",
1265
- "description": "Background color of the ProgressBar."
1266
- },
1267
- "bg-hover": {
1268
- "value": "{gray.200}",
1269
- "type": "color",
1270
- "description": "Hover state of the background color of the ProgressBar."
1271
- },
1272
- "bg-invert": {
1273
- "value": "rgba({gray.white}, 0.2)",
1274
- "type": "color",
1275
- "description": "Inverted version of the background color of the ProgressBar."
1276
- },
1277
- "bg-invert-hover": {
1278
- "value": "rgba({gray.white}, 0.4)",
1279
- "type": "color",
1280
- "description": "Hover state for the inverted version of the background color of the ProgressBar."
1281
- },
1282
- "value": {
1283
- "value": "{green.400}",
1284
- "type": "color",
1285
- "description": "Value color of the ProgressBar."
1286
- },
1287
- "value-gradient": {
1288
- "value": "linear-gradient(-45deg, rgba(0, 159, 129, 0.9) 25%, rgba(0, 159, 129, 1) 0%, rgba(0, 159, 129, 1) 50%, rgba(0, 159, 129, 0.9) 0%, rgba(0, 159, 129, 0.9) 75%, rgba(0, 159, 129, 1) 0%)",
1289
- "type": "color",
1290
- "description": "Value with gradient for the ProgressBar."
1291
- },
1292
- "pattern-gradient": {
1293
- "value": "linear-gradient(-45deg, rgba(224, 225, 233, 0.9) 25%, rgba(224, 225, 233, 1) 0%, rgba(224, 225, 233, 1) 50%, rgba(224, 225, 233, 0.9) 0%, rgba(224, 225, 233, 0.9) 75%, rgba(224, 225, 233, 1) 0%)",
1294
- "type": "color",
1295
- "description": "Null value gradient for the ProgressBar."
1296
- },
1297
- "value-bg": {
1298
- "value": "#000000",
1299
- "type": "color",
1300
- "description": "Base value background for the ProgressBar. It is used to create gradients for the values."
1301
- }
1302
- },
1303
- "skeleton": {
1304
- "bg": {
1305
- "value": "{gray.600}",
1306
- "type": "color",
1307
- "description": "Default color for the Skeleton."
1308
- },
1309
- "bg-invert": {
1310
- "value": "rgba({gray.white}, 0.3)",
1311
- "type": "color",
1312
- "description": "Inverted version of the default color for the Skeleton."
1313
- }
1314
- },
1315
- "table": {
1316
- "th": {
1317
- "primary": {
1318
- "cell": {
1319
- "value": "rgba(62, 64, 75, 1)",
1320
- "type": "color",
1321
- "description": "Background of the header cell in the primary Table."
1322
- },
1323
- "cell-hover": {
1324
- "value": "rgba(83, 85, 97, 1)",
1325
- "type": "color",
1326
- "description": "Background of the hovered header cell in the primary Table."
1327
- },
1328
- "cell-active": {
1329
- "value": "rgba(108, 110, 121, 1)",
1330
- "type": "color",
1331
- "description": "Background of the active header cell in the primary Table."
1332
- }
1333
- },
1334
- "secondary": {
1335
- "cell": {
1336
- "value": "rgba(62, 64, 75, 1)",
1337
- "type": "color",
1338
- "description": "Background of the header cell in the secondary Table."
1339
- }
1340
- },
1341
- "gradient": {
1342
- "value": "linear-gradient(to right, rgba($gray.100, 0) 0%, rgba($gray.100, 1) 100%)",
1343
- "type": "color",
1344
- "description": "Background gradient for sorting icon that absolute positioned in the table head."
1345
- }
1346
- },
1347
- "td": {
1348
- "cell": {
1349
- "value": "{gray.800}",
1350
- "type": "color",
1351
- "description": "Background of the default cell in the Table."
1352
- },
1353
- "cell-hover": {
1354
- "value": "{gray.700}",
1355
- "type": "color",
1356
- "description": "Background of the default hovered cell in the Table."
1357
- },
1358
- "cell-active": {
1359
- "value": "{gray.700}",
1360
- "type": "color",
1361
- "description": "Background of the default active cell in the Table."
1362
- },
1363
- "cell-unread": {
1364
- "value": "{gray.50}",
1365
- "type": "color",
1366
- "description": "Background of the unread cell in the Table."
1367
- },
1368
- "cell-accordion": {
1369
- "value": "rgba(54, 56, 67, 1)",
1370
- "type": "color",
1371
- "description": "Background of the cell inside an Accordion in the Table."
1372
- },
1373
- "cell-selected": {
1374
- "value": "rgba(43, 54, 69, 1)",
1375
- "type": "color",
1376
- "description": "Background of the selected cell in the Table."
1377
- },
1378
- "cell-selected-hover": {
1379
- "value": "{blue.100}",
1380
- "type": "color",
1381
- "description": "Background of the hovered selected cell in the Table."
1382
- },
1383
- "cell-selected-active": {
1384
- "value": "{blue.100}",
1385
- "type": "color",
1386
- "description": "Background of the active selected cell in the Table."
1387
- },
1388
- "cell-new": {
1389
- "value": "{green.50}",
1390
- "type": "color",
1391
- "description": "Background of the cell with new information in the Table."
1392
- },
1393
- "cell-new-hover": {
1394
- "value": "{green.100}",
1395
- "type": "color",
1396
- "description": "Background of the hovered cell with new information in the Table."
1397
- },
1398
- "cell-new-active": {
1399
- "value": "{green.100}",
1400
- "type": "color",
1401
- "description": "Background of the active cell with new information in the Table."
1402
- },
1403
- "cell-critical": {
1404
- "value": "{red.50}",
1405
- "type": "color",
1406
- "description": "Background of the cell with critical information in the Table."
1407
- },
1408
- "cell-critical-hover": {
1409
- "value": "{red.100}",
1410
- "type": "color",
1411
- "description": "Background of the hovered cell with critical information in the Table."
1412
- },
1413
- "cell-critical-active": {
1414
- "value": "{red.100}",
1415
- "type": "color",
1416
- "description": "Background of the active cell with critical information in the Table."
1417
- },
1418
- "cell-warning": {
1419
- "value": "{orange.50}",
1420
- "type": "color",
1421
- "description": "Background of the cell with warning information in the Table."
1422
- },
1423
- "cell-warning-hover": {
1424
- "value": "{orange.100}",
1425
- "type": "color",
1426
- "description": "Background of the hovered cell with warning information in the Table."
1427
- },
1428
- "cell-warning-active": {
1429
- "value": "{orange.100}",
1430
- "type": "color",
1431
- "description": "Background of the active cell with warning information in the Table."
1432
- }
1433
- }
1434
- },
1435
- "brand": {
1436
- "primary": {
1437
- "value": "{violet.200}",
1438
- "type": "color",
1439
- "description": "Primary brand color."
1440
- },
1441
- "secondary": {
1442
- "value": "{violet.700}",
1443
- "type": "color",
1444
- "description": "Secondary brand color."
1445
- },
1446
- "pinterest": {
1447
- "value": "#bd081c",
1448
- "type": "color",
1449
- "description": "Pinterest brand color."
1450
- },
1451
- "instagram": {
1452
- "value": "#e4405f",
1453
- "type": "color",
1454
- "description": "Instagram brand color."
1455
- },
1456
- "youtube": {
1457
- "value": "#ff0000",
1458
- "type": "color",
1459
- "description": "Youtube brand color."
1460
- },
1461
- "facebook": {
1462
- "value": "#1877F2",
1463
- "type": "color",
1464
- "description": "Facebook brand color."
1465
- },
1466
- "linkedIn": {
1467
- "value": "#0A66C2",
1468
- "type": "color",
1469
- "description": "LinkedIn brand color."
1470
- },
1471
- "twitter": {
1472
- "value": "#1D9BF0",
1473
- "type": "color",
1474
- "description": "Twitter brand color."
1475
- },
1476
- "google-blue": {
1477
- "value": "#1a0dab",
1478
- "type": "color",
1479
- "description": "Google brand color for the link."
1480
- },
1481
- "google-green": {
1482
- "value": "#016723",
1483
- "type": "color",
1484
- "description": "Google green brand color for the link."
1485
- },
1486
- "google-my-business": {
1487
- "value": "#1a73e8",
1488
- "type": "color",
1489
- "description": "Google My Business brand color."
1490
- }
1491
- },
1492
- "box-shadow": {
1493
- "card": {
1494
- "value": "0px 0px 1px 0px rgba({gray.800}, 0.16); 0px 1px 2px 0px rgba({gray.800}, 0.12)",
1495
- "type": "boxShadow",
1496
- "description": "Default shadow of the Card."
1497
- },
1498
- "card-hover": {
1499
- "value": "3px 3px 30px 0px rgba({gray.800}, 0.15)",
1500
- "type": "boxShadow",
1501
- "description": "Hover state for the shadow of the Card with hover state."
1502
- },
1503
- "dnd": {
1504
- "value": "0px 0px 1px 0px rgba({gray.800}, 0.16); 0px 12px 40px 0px rgba({gray.800}, 0.16)",
1505
- "type": "boxShadow",
1506
- "description": "Shadow for show that element are being drag-and-drop."
1507
- },
1508
- "modal": {
1509
- "value": "0px 3px 8px 0px rgba({gray.800}, 0.2)",
1510
- "type": "boxShadow",
1511
- "description": "Default shadow if the Modal window."
1512
- },
1513
- "popper": {
1514
- "value": "0px 1px 15px 0px rgba({gray.800}, 0.60)",
1515
- "type": "boxShadow",
1516
- "description": "Default shadow of all Poppers, Dropdowns and Tooltips."
1517
- },
1518
- "float-control": {
1519
- "value": [
1520
- {
1521
- "x": "0",
1522
- "y": "0",
1523
- "blur": "1",
1524
- "spread": "0",
1525
- "color": "rgba(0,0,0,0.16)",
1526
- "type": "dropShadow"
1527
- },
1528
- {
1529
- "x": "0",
1530
- "y": "1",
1531
- "blur": "2",
1532
- "spread": "0",
1533
- "color": "rgba(0,0,0,0.12)",
1534
- "type": "dropShadow"
1535
- }
1536
- ],
1537
- "type": "boxShadow",
1538
- "description": "Use it only for controls that float above the whole interface."
1539
- },
1540
- "float-control-hover": {
1541
- "value": [
1542
- {
1543
- "x": "0",
1544
- "y": "0",
1545
- "blur": "2",
1546
- "spread": "0",
1547
- "color": "rgba(0,0,0,0.2)",
1548
- "type": "dropShadow"
1549
- },
1550
- {
1551
- "x": "0",
1552
- "y": "1",
1553
- "blur": "4",
1554
- "spread": "0",
1555
- "color": "rgba(0,0,0,0.16)",
1556
- "type": "dropShadow"
1557
- }
1558
- ],
1559
- "type": "boxShadow",
1560
- "description": "Use it only for controls that float above the whole interface."
1561
- }
1562
- },
1563
- "keyboard-focus": {
1564
- "value": "0px 0px 0px 3px rgba({keyboard-focus.outline}, 0.5)",
1565
- "type": "boxShadow",
1566
- "description": "Default keyboard focus box-shadow styles.",
1567
- "outline": {
1568
- "value": "{blue.400}",
1569
- "type": "color",
1570
- "description": "Color for default keyboard focus outline styles."
1571
- },
1572
- "invalid": {
1573
- "value": "0px 0px 0px 3px rgba({keyboard-focus.invalid.outline}, 0.5)",
1574
- "type": "boxShadow",
1575
- "description": "Keyboard focus styles for elements with invalid state.",
1576
- "outline": {
1577
- "value": "{red.400}",
1578
- "type": "color",
1579
- "description": "Color for keyboard focus outline styles for elements with invalid state."
1580
- }
1581
- },
1582
- "valid": {
1583
- "value": "0px 0px 0px 3px rgba({keyboard-focus.valid.outline}, 0.5)",
1584
- "type": "boxShadow",
1585
- "description": "Keyboard focus styles for elements with valid state.",
1586
- "outline": {
1587
- "value": "{green.400}",
1588
- "type": "color",
1589
- "description": "Color for keyboard focus outline styles for elements with valid state."
1590
- }
1591
- },
1592
- "invert": {
1593
- "value": "0px 0px 0px 3px {keyboard-focus.invert.outline}",
1594
- "type": "boxShadow",
1595
- "description": "Keyboard focus styles for use on dark backgrounds.",
1596
- "outline": {
1597
- "value": "rgba({gray.white}, 0.8)",
1598
- "type": "color",
1599
- "description": "Color for keyboard focus outline styles to use on the dark and color background."
1600
- }
1601
- }
1602
- },
1603
- "base": {
1604
- "value": "Inter",
1605
- "type": "fontFamilies",
1606
- "description": "Base font family."
1607
- },
1608
- "lh-800": {
1609
- "value": "117%",
1610
- "type": "lineHeights",
1611
- "description": "Use with font-size-800."
1612
- },
1613
- "lh-700": {
1614
- "value": "110%",
1615
- "type": "lineHeights",
1616
- "description": "Use with font-size-700."
1617
- },
1618
- "lh-600": {
1619
- "value": "125%",
1620
- "type": "lineHeights",
1621
- "description": "Use with font-size-600."
1622
- },
1623
- "lh-500": {
1624
- "value": "117%",
1625
- "type": "lineHeights",
1626
- "description": "Use with font-size-500."
1627
- },
1628
- "lh-400": {
1629
- "value": "120%",
1630
- "type": "lineHeights",
1631
- "description": "Use with font-size-400."
1632
- },
1633
- "lh-300": {
1634
- "value": "150%",
1635
- "type": "lineHeights",
1636
- "description": "Use with font-size-300."
1637
- },
1638
- "lh-200": {
1639
- "value": "142%",
1640
- "type": "lineHeights",
1641
- "description": "Use with font-size-200."
1642
- },
1643
- "lh-100": {
1644
- "value": "133%",
1645
- "type": "lineHeights",
1646
- "description": "Use with font-size-100."
1647
- },
1648
- "semi-bold": {
1649
- "value": "600",
1650
- "type": "fontWeights",
1651
- "description": "Semi-bold font weight."
1652
- },
1653
- "bold": {
1654
- "value": "700",
1655
- "type": "fontWeights",
1656
- "description": "Bold font weight."
1657
- },
1658
- "regular": {
1659
- "value": "400",
1660
- "type": "fontWeights",
1661
- "description": "Regular font weight."
1662
- },
1663
- "medium": {
1664
- "value": "500",
1665
- "type": "fontWeights",
1666
- "description": "Medium font weight."
1667
- },
1668
- "fs-50": {
1669
- "value": "10px",
1670
- "type": "fontSizes",
1671
- "description": "Use only for text in Badge component."
1672
- },
1673
- "fs-100": {
1674
- "value": "12px",
1675
- "type": "fontSizes",
1676
- "description": "Use this font-size with caution for text in some additional messages. Always check its contrast and readability."
1677
- },
1678
- "fs-200": {
1679
- "value": "14px",
1680
- "type": "fontSizes"
1681
- },
1682
- "fs-300": {
1683
- "value": "16px",
1684
- "type": "fontSizes"
1685
- },
1686
- "fs-400": {
1687
- "value": "20px",
1688
- "type": "fontSizes"
1689
- },
1690
- "fs-500": {
1691
- "value": "24px",
1692
- "type": "fontSizes"
1693
- },
1694
- "fs-600": {
1695
- "value": "32px",
1696
- "type": "fontSizes"
1697
- },
1698
- "fs-700": {
1699
- "value": "36px",
1700
- "type": "fontSizes"
1701
- },
1702
- "fs-800": {
1703
- "value": "48px",
1704
- "type": "fontSizes"
1705
- },
1706
- "compact": {
1707
- "value": "0.3",
1708
- "type": "letterSpacing",
1709
- "description": "Compact letter spacing."
1710
- },
1711
- "heading-h1": {
1712
- "value": {
1713
- "fontFamily": "{base}",
1714
- "fontWeight": "{semi-bold}",
1715
- "lineHeight": "{lh-800}",
1716
- "fontSize": "{fs-800}"
1717
- },
1718
- "type": "typography"
1719
- },
1720
- "heading-h2": {
1721
- "value": {
1722
- "fontFamily": "{base}",
1723
- "fontWeight": "{semi-bold}",
1724
- "lineHeight": "{lh-700}",
1725
- "fontSize": "{fs-700}"
1726
- },
1727
- "type": "typography",
1728
- "description": "Landing headings"
1729
- },
1730
- "heading-h3": {
1731
- "value": {
1732
- "fontFamily": "{base}",
1733
- "fontWeight": "{semi-bold}",
1734
- "lineHeight": "{lh-600}",
1735
- "fontSize": "{fs-600}"
1736
- },
1737
- "type": "typography",
1738
- "description": "Tool page main heading"
1739
- },
1740
- "heading-h4": {
1741
- "value": {
1742
- "fontFamily": "{base}",
1743
- "fontWeight": "{semi-bold}",
1744
- "lineHeight": "{lh-500}",
1745
- "fontSize": "{fs-500}"
1746
- },
1747
- "type": "typography",
1748
- "description": "Tool page heading"
1749
- },
1750
- "heading-h5": {
1751
- "value": {
1752
- "fontFamily": "{base}",
1753
- "fontWeight": "{semi-bold}",
1754
- "lineHeight": "{lh-400}",
1755
- "fontSize": "{fs-400}"
1756
- },
1757
- "type": "typography",
1758
- "description": "Widget heading"
1759
- },
1760
- "heading-h6": {
1761
- "value": {
1762
- "fontFamily": "{base}",
1763
- "fontWeight": "{bold}",
1764
- "lineHeight": "{lh-300}",
1765
- "fontSize": "{fs-300}"
1766
- },
1767
- "type": "typography",
1768
- "description": "Widget, notice & dropdown heading"
1769
- },
1770
- "subtitle": {
1771
- "value": {
1772
- "fontFamily": "{base}",
1773
- "fontWeight": "{regular}",
1774
- "lineHeight": "{lh-400}",
1775
- "fontSize": "{fs-400}"
1776
- },
1777
- "type": "typography",
1778
- "description": "Use for big subtitles on the landing pages."
1779
- },
1780
- "scale-indent": {
1781
- "value": "4px",
1782
- "type": "spacing",
1783
- "description": "Base denominator of the design system."
1784
- },
1785
- "form-control-s": {
1786
- "value": "{scale-indent}*5",
1787
- "type": "sizing",
1788
- "description": "Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions."
1789
- },
1790
- "form-control-m": {
1791
- "value": "{scale-indent}*7",
1792
- "type": "sizing",
1793
- "description": "Default size of the controls."
1794
- },
1795
- "form-control-l": {
1796
- "value": "{scale-indent}*10",
1797
- "type": "sizing",
1798
- "description": "Large size of the controls."
1799
- },
1800
- "spacing-05x": {
1801
- "value": "{scale-indent}*0.5",
1802
- "type": "spacing",
1803
- "description": "2px"
1804
- },
1805
- "spacing-1x": {
1806
- "value": "{scale-indent}*1",
1807
- "type": "spacing",
1808
- "description": "4px"
1809
- },
1810
- "spacing-2x": {
1811
- "value": "{scale-indent}*2",
1812
- "type": "spacing",
1813
- "description": "8px"
1814
- },
1815
- "spacing-3x": {
1816
- "value": "{scale-indent}*3",
1817
- "type": "spacing",
1818
- "description": "12px"
1819
- },
1820
- "spacing-4x": {
1821
- "value": "{scale-indent}*4",
1822
- "type": "spacing",
1823
- "description": "16px"
1824
- },
1825
- "spacing-5x": {
1826
- "value": "{scale-indent}*5",
1827
- "type": "spacing",
1828
- "description": "20px"
1829
- },
1830
- "spacing-6x": {
1831
- "value": "{scale-indent}*6",
1832
- "type": "spacing",
1833
- "description": "24px"
1834
- },
1835
- "spacing-8x": {
1836
- "value": "{scale-indent}*8",
1837
- "type": "spacing",
1838
- "description": "32px"
1839
- },
1840
- "spacing-10x": {
1841
- "value": "{scale-indent}*10",
1842
- "type": "spacing",
1843
- "description": "40px"
1844
- },
1845
- "spacing-14x": {
1846
- "value": "{scale-indent}*14",
1847
- "type": "spacing",
1848
- "description": "56px"
1849
- },
1850
- "spacing-20x": {
1851
- "value": "{scale-indent}*20",
1852
- "type": "spacing",
1853
- "description": "80px"
1854
- },
1855
- "spacing-24x": {
1856
- "value": "{scale-indent}*24",
1857
- "type": "spacing",
1858
- "description": "96px"
1859
- },
1860
- "spacing-30x": {
1861
- "value": "{scale-indent}*30",
1862
- "type": "spacing",
1863
- "description": "120px"
1864
- },
1865
- "rounded-extra-small": {
1866
- "value": "2px",
1867
- "type": "borderRadius"
1868
- },
1869
- "rounded-small": {
1870
- "value": "4px",
1871
- "type": "borderRadius"
1872
- },
1873
- "rounded-medium": {
1874
- "value": "6px",
1875
- "type": "borderRadius"
1876
- },
1877
- "rounded-large": {
1878
- "value": "12px",
1879
- "type": "borderRadius"
1880
- },
1881
- "rounded-extra-large": {
1882
- "value": "24px",
1883
- "type": "borderRadius"
1884
- },
1885
- "addon-rounded": {
1886
- "value": "{rounded-small}",
1887
- "type": "borderRadius",
1888
- "description": "Use for rounding addons and small controls like Checkbox."
1889
- },
1890
- "badge-rounded": {
1891
- "value": "{rounded-medium}",
1892
- "type": "borderRadius",
1893
- "description": "Use for rounding Badge."
1894
- },
1895
- "chart-rounded": {
1896
- "value": "{rounded-extra-small}",
1897
- "type": "borderRadius",
1898
- "description": "Use for rounding big and small charts like bar, histogram and others."
1899
- },
1900
- "counter-rounded": {
1901
- "value": "{rounded-large}",
1902
- "type": "borderRadius",
1903
- "description": "Use for rounding Counter."
1904
- },
1905
- "tag-rounded": {
1906
- "value": "{rounded-extra-large}",
1907
- "type": "borderRadius",
1908
- "description": "Use for rounding Tag."
1909
- },
1910
- "switch-rounded": {
1911
- "value": "{rounded-extra-large}",
1912
- "type": "borderRadius",
1913
- "description": "Use for rounding Switch."
1914
- },
1915
- "control-rounded": {
1916
- "value": "{rounded-medium}",
1917
- "type": "borderRadius",
1918
- "description": "Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc."
1919
- },
1920
- "progress-bar-rounded": {
1921
- "value": "{rounded-medium}",
1922
- "type": "borderRadius",
1923
- "description": "Use for rounding bars: ProgressBar, SliderBar, etc."
1924
- },
1925
- "surface-rounded": {
1926
- "value": "{rounded-medium}",
1927
- "type": "borderRadius",
1928
- "description": "Use for rounding surfaces like Card, blocks, widgets, Notice, etc."
1929
- },
1930
- "popper-rounded": {
1931
- "value": "{rounded-medium}",
1932
- "type": "borderRadius",
1933
- "description": "Use for rounding all kinds of poppers and dropdowns."
1934
- },
1935
- "modal-rounded": {
1936
- "value": "{rounded-large}",
1937
- "type": "borderRadius",
1938
- "description": "Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard)."
1939
- },
1940
- "disabled-opacity": {
1941
- "value": "0.3",
1942
- "type": "opacity",
1943
- "description": "Use for the disabled state of all kind of the controls and elements."
1944
- },
1945
- "screen-extra-small": {
1946
- "value": "320px",
1947
- "type": "sizing",
1948
- "description": "Extra small screens (small phones)."
1949
- },
1950
- "screen-small": {
1951
- "value": "768px",
1952
- "type": "sizing",
1953
- "description": "Small screens (phones and small tablets)."
1954
- },
1955
- "screen-medium": {
1956
- "value": "1200px",
1957
- "type": "sizing",
1958
- "description": "Medium screens (tablets and small laptops)."
1959
- },
1960
- "screen-large": {
1961
- "value": "1920px",
1962
- "type": "sizing",
1963
- "description": "Large screens (tablets and laptops)."
1964
- },
1965
- "overlay": {
1966
- "primary": {
1967
- "value": "rgba({gray.800}, 0.7)",
1968
- "type": "color",
1969
- "description": "Use for cover the content under the modal dialogs."
1970
- },
1971
- "secondary": {
1972
- "value": "rgba({gray.800}, 0.4)",
1973
- "type": "color",
1974
- "description": "Use for the secondary modal dialogs that were opened upon the other modal dialogs."
1975
- },
1976
- "limitation-primary": {
1977
- "value": "{gray.50}",
1978
- "type": "color",
1979
- "description": "Use as a primary cover of the content under the messages about limitations."
1980
- },
1981
- "limitation-secondary": {
1982
- "value": "rgba({gray.white}, 0.85)",
1983
- "type": "color",
1984
- "description": "Use as a secondary cover of the content under the messages about limitations."
1985
- }
1986
- },
1987
- "z-index": {
1988
- "deep": {
1989
- "value": "-999",
1990
- "type": "other"
1991
- },
1992
- "overlay": {
1993
- "value": "500",
1994
- "type": "other"
1995
- },
1996
- "modal": {
1997
- "value": "900",
1998
- "type": "other"
1999
- },
2000
- "popper": {
2001
- "value": "700",
2002
- "type": "other"
2003
- },
2004
- "dropdown": {
2005
- "value": "750",
2006
- "type": "other"
2007
- },
2008
- "tooltip": {
2009
- "value": "800",
2010
- "type": "other"
2011
- },
2012
- "notice-bubble": {
2013
- "value": "999",
2014
- "type": "other"
2015
- }
2016
- },
2017
- "tooltip": {
2018
- "default": {
2019
- "value": "{gray.600}",
2020
- "type": "color",
2021
- "description": "Default Tooltip background."
2022
- },
2023
- "warning": {
2024
- "value": "rgba(160, 13, 42, 1)",
2025
- "type": "color",
2026
- "description": "Warning Tooltip background."
2027
- },
2028
- "invert": {
2029
- "value": "{gray.800}",
2030
- "type": "color",
2031
- "description": "Inverted version of the default Tooltip background."
2032
- }
2033
- },
2034
- "neighbor-location": {
2035
- "neutral": {
2036
- "value": "rgba(255, 255, 255, 0.5)",
2037
- "type": "color",
2038
- "description": "Neutral border of the components that are combined with neighbor-location property."
2039
- },
2040
- "invert": {
2041
- "value": "rgba(0, 0, 0, 0.5)",
2042
- "type": "color",
2043
- "description": "Inverted border of the components that are combined with neighbor-location property."
2044
- }
2045
- },
2046
- "scroll-area": {
2047
- "shadow-left": {
2048
- "value": "linear-gradient(to right, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)",
2049
- "type": "color",
2050
- "description": "Left-to-right fade shadow for the ScrollArea."
2051
- },
2052
- "shadow-right": {
2053
- "value": "linear-gradient(to left, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)",
2054
- "type": "color",
2055
- "description": "Right-to-left fade shadow for the ScrollArea."
2056
- },
2057
- "shadow-top": {
2058
- "value": "linear-gradient(to bottom, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)",
2059
- "type": "color",
2060
- "description": "Top-to-bottom fade shadow for the ScrollArea."
2061
- },
2062
- "shadow-bottom": {
2063
- "value": "linear-gradient(to top, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)",
2064
- "type": "color",
2065
- "description": "Bottom-to-top fade shadow for the ScrollArea."
2066
- },
2067
- "dropdown-menu-left": {
2068
- "value": "linear-gradient(to right, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)",
2069
- "type": "color",
2070
- "description": "Left-to-right fade shadow for the ScrollArea inside the DropdownMenu."
2071
- },
2072
- "dropdown-menu-right": {
2073
- "value": "linear-gradient(to left, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)",
2074
- "type": "color",
2075
- "description": "Right-to-left fade shadow for the ScrollArea inside the DropdownMenu."
2076
- },
2077
- "dropdown-menu-bottom": {
2078
- "value": "linear-gradient(to top, rgba($gray.700, 1) 34.38%, rgba(54, 56, 67, 0) 100%)",
2079
- "type": "color",
2080
- "description": "Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu."
2081
- },
2082
- "dropdown-menu-top": {
2083
- "value": "linear-gradient(to bottom, rgba($gray.700, 1) 34.38%, rgba(54, 56, 67, 0) 100%)",
2084
- "type": "color",
2085
- "description": "Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu."
2086
- }
2087
- },
2088
- "scroll-bar": {
2089
- "background": {
2090
- "value": "rgba({gray.800}, 0.3)",
2091
- "type": "color",
2092
- "description": "Background color for ScrollBar."
2093
- }
2094
- },
2095
- "tag": {
2096
- "primary": {
2097
- "gray-normal": {
2098
- "value": "rgba(69, 70, 81, 1)",
2099
- "type": "color",
2100
- "description": "Gray background color for the primary tag."
2101
- },
2102
- "gray-hover-active": {
2103
- "value": "{gray.100}",
2104
- "type": "color",
2105
- "description": "Gray background color for the hover and active states of the primary tag."
2106
- },
2107
- "blue-normal": {
2108
- "value": "rgba(7, 77, 141, 1)",
2109
- "type": "color",
2110
- "description": "Blue background color for primary tag."
2111
- },
2112
- "blue-hover-active": {
2113
- "value": "{blue.100}",
2114
- "type": "color",
2115
- "description": "Blue background color for the hover and active states of the primary tag."
2116
- },
2117
- "green-normal": {
2118
- "value": "rgba(9, 99, 82, 1)",
2119
- "type": "color",
2120
- "description": "Green background color for the primary tag."
2121
- },
2122
- "green-hover-active": {
2123
- "value": "{green.100}",
2124
- "type": "color",
2125
- "description": "Green background color for the hover and active states of the primary tag."
2126
- },
2127
- "orange-normal": {
2128
- "value": "rgba(156, 49, 11, 1)",
2129
- "type": "color",
2130
- "description": "Orange background color for the primary tag."
2131
- },
2132
- "orange-hover-active": {
2133
- "value": "{orange.100}",
2134
- "type": "color",
2135
- "description": "Orange background color for the hover and active states of the primary tag."
2136
- },
2137
- "red-normal": {
2138
- "value": "rgba(160, 13, 42, 1)",
2139
- "type": "color",
2140
- "description": "Red background color for the primary tag."
2141
- },
2142
- "red-hover-active": {
2143
- "value": "{red.100}",
2144
- "type": "color",
2145
- "description": "Red background color for the hover and active states of the primary tag."
2146
- },
2147
- "violet-normal": {
2148
- "value": "rgba(95, 62, 157, 1)",
2149
- "type": "color",
2150
- "description": "Violet background color for the primary tag."
2151
- },
2152
- "violet-hover-active": {
2153
- "value": "{violet.100}",
2154
- "type": "color",
2155
- "description": "Violet background color for the hover and active states of the primary tag."
2156
- },
2157
- "yellow-normal": {
2158
- "value": "{yellow.100}, 0.5",
2159
- "type": "color",
2160
- "description": "Yellow background color for the primary tag."
2161
- },
2162
- "yellow-hover-active": {
2163
- "value": "{yellow.100}",
2164
- "type": "color",
2165
- "description": "Yellow background color for the hover and active states of the primary tag."
2166
- },
2167
- "white-normal": {
2168
- "value": "{gray.white}, 0.15",
2169
- "type": "color",
2170
- "description": "Primary white tag."
2171
- },
2172
- "white-hover-active": {
2173
- "value": "{gray.white}, 0.3",
2174
- "type": "color",
2175
- "description": "Hover and active (selected) state of the primary white tag."
2176
- },
2177
- "gray-text": {
2178
- "value": "{gray.50}",
2179
- "type": "color",
2180
- "description": "Gray text for the primary gray tag."
2181
- },
2182
- "blue-text": {
2183
- "value": "{blue.50}",
2184
- "type": "color",
2185
- "description": "Blue text for the primary blue tag."
2186
- },
2187
- "green-text": {
2188
- "value": "{green.50}",
2189
- "type": "color",
2190
- "description": "Green text for the primary green tag."
2191
- },
2192
- "orange-text": {
2193
- "value": "{orange.50}",
2194
- "type": "color",
2195
- "description": "Orange text for the primary orange tag."
2196
- },
2197
- "red-text": {
2198
- "value": "{red.50}",
2199
- "type": "color",
2200
- "description": "Red text for the primary red tag."
2201
- },
2202
- "violet-text": {
2203
- "value": "rgba(244, 245, 249, 1)",
2204
- "type": "color",
2205
- "description": "Violet text for the primary violet tag."
2206
- },
2207
- "yellow-text": {
2208
- "value": "{yellow.500}",
2209
- "type": "color",
2210
- "description": "Yellow text for the primary yellow tag."
2211
- },
2212
- "white-text": {
2213
- "value": "{gray.white}",
2214
- "type": "color",
2215
- "description": "White text for the primary white tag."
2216
- }
2217
- },
2218
- "secondary": {
2219
- "normal": {
2220
- "value": "{gray.white}",
2221
- "type": "color",
2222
- "description": "Background color for the default secondary tag."
2223
- },
2224
- "hover-active": {
2225
- "value": "{gray.50}",
2226
- "type": "color",
2227
- "description": "Hover and active (selected) states of the background color for the default secondary tag."
2228
- },
2229
- "white-normal": {
2230
- "value": "rgba({gray.white}, 0)",
2231
- "type": "color",
2232
- "description": "White secondary tag."
2233
- },
2234
- "white-hover-active": {
2235
- "value": "rgba({gray.white}, 0.1)",
2236
- "type": "color",
2237
- "description": "Active state of the secondary white tag."
2238
- },
2239
- "gray-text": {
2240
- "value": "{gray.500}",
2241
- "type": "color",
2242
- "description": "Gray text for the default secondary tag."
2243
- },
2244
- "white-text": {
2245
- "value": "{gray.white}",
2246
- "type": "color",
2247
- "description": "White text for the secondary white tag."
2248
- }
2249
- }
2250
- },
2251
- "chart": {
2252
- "palette-order": {
2253
- "1": {
2254
- "value": "{blue.300}",
2255
- "type": "color",
2256
- "description": "1 color in the default list of colors for charts."
2257
- },
2258
- "2": {
2259
- "value": "{green.200}",
2260
- "type": "color",
2261
- "description": "2 color in the default list of colors for charts."
2262
- },
2263
- "3": {
2264
- "value": "{orange.400}",
2265
- "type": "color",
2266
- "description": "3 color in the default list of colors for charts."
2267
- },
2268
- "4": {
2269
- "value": "{pink.300}",
2270
- "type": "color",
2271
- "description": "4 color in the default list of colors for charts."
2272
- },
2273
- "5": {
2274
- "value": "{yellow.200}",
2275
- "type": "color",
2276
- "description": "5 color in the default list of colors for charts."
2277
- },
2278
- "6": {
2279
- "value": "{violet.400}",
2280
- "type": "color",
2281
- "description": "6 color in the default list of colors for charts."
2282
- },
2283
- "7": {
2284
- "value": "{red.300}",
2285
- "type": "color",
2286
- "description": "7 color in the default list of colors for charts."
2287
- },
2288
- "8": {
2289
- "value": "{salad.200}",
2290
- "type": "color",
2291
- "description": "8 color in the default list of colors for charts."
2292
- },
2293
- "9": {
2294
- "value": "{blue.400}",
2295
- "type": "color",
2296
- "description": "9 color in the default list of colors for charts."
2297
- },
2298
- "10": {
2299
- "value": "{green.300}",
2300
- "type": "color",
2301
- "description": "10 color in the default list of colors for charts."
2302
- },
2303
- "11": {
2304
- "value": "{orange.200}",
2305
- "type": "color",
2306
- "description": "11 color in the default list of colors for charts."
2307
- },
2308
- "12": {
2309
- "value": "{pink.400}",
2310
- "type": "color",
2311
- "description": "12 color in the default list of colors for charts."
2312
- },
2313
- "13": {
2314
- "value": "{yellow.300}",
2315
- "type": "color",
2316
- "description": "13 color in the default list of colors for charts."
2317
- },
2318
- "14": {
2319
- "value": "{violet.200}",
2320
- "type": "color",
2321
- "description": "14 color in the default list of colors for charts."
2322
- },
2323
- "15": {
2324
- "value": "{red.400}",
2325
- "type": "color",
2326
- "description": "15 color in the default list of colors for charts."
2327
- },
2328
- "16": {
2329
- "value": "{salad.300}",
2330
- "type": "color",
2331
- "description": "16 color in the default list of colors for charts."
2332
- },
2333
- "17": {
2334
- "value": "{blue.200}",
2335
- "type": "color",
2336
- "description": "17 color in the default list of colors for charts."
2337
- },
2338
- "18": {
2339
- "value": "{green.400}",
2340
- "type": "color",
2341
- "description": "18 color in the default list of colors for charts."
2342
- },
2343
- "19": {
2344
- "value": "{orange.300}",
2345
- "type": "color",
2346
- "description": "19 color in the default list of colors for charts."
2347
- },
2348
- "20": {
2349
- "value": "{pink.200}",
2350
- "type": "color",
2351
- "description": "20 color in the default list of colors for charts."
2352
- },
2353
- "21": {
2354
- "value": "{yellow.400}",
2355
- "type": "color",
2356
- "description": "21 color in the default list of colors for charts."
2357
- },
2358
- "22": {
2359
- "value": "{violet.300}",
2360
- "type": "color",
2361
- "description": "22 color in the default list of colors for charts."
2362
- },
2363
- "23": {
2364
- "value": "{red.200}",
2365
- "type": "color",
2366
- "description": "23 color in the default list of colors for charts."
2367
- },
2368
- "24": {
2369
- "value": "{salad.400}",
2370
- "type": "color",
2371
- "description": "24 color in the default list of colors for charts."
2372
- },
2373
- "total-amount": {
2374
- "value": "{gray.400}",
2375
- "type": "color",
2376
- "description": "Use it to show total value."
2377
- },
2378
- "other-data": {
2379
- "value": "{gray.200}",
2380
- "type": "color",
2381
- "description": "Use it to indicate voids, missing or some other data."
2382
- },
2383
- "null": {
2384
- "value": "{gray.100}",
2385
- "type": "color",
2386
- "description": "Use it to show null value."
2387
- }
2388
- },
2389
- "grid": {
2390
- "line": {
2391
- "value": "{gray.100}",
2392
- "type": "color",
2393
- "description": "Default chart grid line."
2394
- },
2395
- "x-axis": {
2396
- "value": "{gray.200}",
2397
- "type": "color",
2398
- "description": "X-axis line on the chart grid."
2399
- },
2400
- "y-accent-hover-line": {
2401
- "value": "{gray.300}",
2402
- "type": "color",
2403
- "description": "Accent line for the hover state on the chart grid."
2404
- },
2405
- "text-label": {
2406
- "value": "{gray.500}",
2407
- "type": "color",
2408
- "description": "Text label on the chart grid."
2409
- },
2410
- "bar-chart-hover": {
2411
- "value": "rgba({gray.200}, 0.3)",
2412
- "type": "color",
2413
- "description": "Background color for the hover state of a bar on the chart grid."
2414
- },
2415
- "bar-chart-base-bg": {
2416
- "value": "{gray.100}",
2417
- "type": "color",
2418
- "description": "Default background color of a bar in the BarChart."
2419
- },
2420
- "period-bg": {
2421
- "value": "rgba({gray.200}, 0.2)",
2422
- "type": "color",
2423
- "description": "Use for highlighting a period on the chart grid."
2424
- },
2425
- "period-pattern": {
2426
- "value": "rgba({gray.800}, 0.15)",
2427
- "type": "color",
2428
- "description": "Stripe color for diagonal pattern background."
2429
- },
2430
- "border": {
2431
- "value": "{gray.800}",
2432
- "type": "color",
2433
- "description": "Border for distinguishing data sets and chart dots on the chart grid."
2434
- }
2435
- },
2436
- "x-axis-accent": {
2437
- "period-active": {
2438
- "value": "{gray.400}",
2439
- "type": "color",
2440
- "description": "Background color for the clickable date on the X-axis of the chart grid."
2441
- },
2442
- "data-start-tracking": {
2443
- "value": "rgba({green.400}, 0.2)",
2444
- "type": "color",
2445
- "description": "Background color for the \"Start tracking\" date on the X-axis of the chart grid."
2446
- }
2447
- },
2448
- "axis-label": {
2449
- "value": {
2450
- "fontFamily": "{base}",
2451
- "fontWeight": "{bold}",
2452
- "fontSize": "{fs-100}"
2453
- },
2454
- "type": "typography"
2455
- },
2456
- "axis-label-bold": {
2457
- "value": {
2458
- "fontFamily": "{base}",
2459
- "fontWeight": "{bold}",
2460
- "fontSize": "{fs-100}"
2461
- },
2462
- "type": "typography"
2463
- }
2464
- },
2465
- "header": {
2466
- "bg": {
2467
- "value": "{violet.dusty.700}",
2468
- "type": "color"
2469
- },
2470
- "border": {
2471
- "primary": {
2472
- "value": "{violet.dusty.700}",
2473
- "type": "color"
2474
- },
2475
- "secondary": {
2476
- "value": "rgba(255,255,255,0.15)",
2477
- "type": "color"
2478
- }
2479
- }
2480
- },
2481
- "sidebar-nav": {
2482
- "control-hover": {
2483
- "value": "rgba({gray.100}, 0.7)",
2484
- "type": "color"
2485
- },
2486
- "control-active": {
2487
- "value": "{violet.dusty.100}",
2488
- "type": "color"
2489
- },
2490
- "control": {
2491
- "text": {
2492
- "normal": {
2493
- "value": "{violet.dusty.500}",
2494
- "type": "color"
2495
- },
2496
- "active": {
2497
- "value": "{violet.dusty.600}",
2498
- "type": "color"
2499
- }
2500
- },
2501
- "icon": {
2502
- "normal": {
2503
- "value": "{violet.dusty.400}",
2504
- "type": "color"
2505
- },
2506
- "active": {
2507
- "value": "{violet.dusty.600}",
2508
- "type": "color"
2509
- }
2510
- }
2511
- }
2512
- },
2513
- "duration": {
2514
- "extra-slow": {
2515
- "value": "500",
2516
- "type": "other",
2517
- "description": "Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen)"
2518
- },
2519
- "slow": {
2520
- "value": "400",
2521
- "type": "other",
2522
- "description": "Should be used for more larger scale animations (such as page transitions)"
2523
- },
2524
- "medium": {
2525
- "value": "300",
2526
- "type": "other",
2527
- "description": "Should be used for more complex effects (such as Modal)"
2528
- },
2529
- "fast": {
2530
- "value": "200",
2531
- "type": "other",
2532
- "description": "Should be used for more complex effects (such as Dropdown or Accordion)"
2533
- },
2534
- "extra-fast": {
2535
- "value": "100",
2536
- "type": "other",
2537
- "description": "Should be used for simpler effects and relatively small-sized animations (such as fades or color changes)"
2538
- },
2539
- "switch": {
2540
- "value": "{duration.extra-fast}",
2541
- "type": "other",
2542
- "description": "Use for small controls like Switch or Slider."
2543
- },
2544
- "popper": {
2545
- "value": "{duration.fast}",
2546
- "type": "other",
2547
- "description": "Use for components based on popper like Tooltip, Dropdown or Filter trigger."
2548
- },
2549
- "control": {
2550
- "value": "{duration.fast}",
2551
- "type": "other",
2552
- "description": "Use for small controls like Checkbox or Radio."
2553
- },
2554
- "modal": {
2555
- "value": "{duration.fast}",
2556
- "type": "other",
2557
- "description": "Use for Modal, Fullscreen Modal, Side panel or other kind of windows."
2558
- },
2559
- "accordion": {
2560
- "value": "{duration.fast}",
2561
- "type": "other",
2562
- "description": "Use for Accordion."
2563
- },
2564
- "counter": {
2565
- "value": "{duration.fast}",
2566
- "type": "other",
2567
- "description": "Use for Summary or Counter."
2568
- }
2569
- }
2570
- },
2571
- "featureHighlight": {
2572
- "bg": {
2573
- "primary": {
2574
- "feature-highlight": {
2575
- "value": "rgba(30, 34, 49, 1)",
2576
- "type": "color",
2577
- "description": "Primary background for highlighted controls."
2578
- },
2579
- "feature-highlight-hover-active": {
2580
- "value": "linear-gradient(90deg, {violet.50}, {blue.50})",
2581
- "type": "color",
2582
- "description": "Primary background for hover and active (selected) state of highlighted controls."
2583
- }
2584
- },
2585
- "secondary": {
2586
- "feature-highlight": {
2587
- "value": "linear-gradient(90deg, {violet.50}, {blue.50})",
2588
- "type": "color",
2589
- "description": "Secondary background for the highlighted message."
2590
- }
2591
- }
2592
- },
2593
- "border": {
2594
- "feature-highlight": {
2595
- "value": "linear-gradient(90deg, {violet.300}, {blue.300})",
2596
- "type": "color",
2597
- "description": "Primary border for highlighted controls."
2598
- },
2599
- "feature-highlight-active": {
2600
- "value": "linear-gradient(90deg, {violet.400}, {blue.400})",
2601
- "type": "color",
2602
- "description": "Primary border for the active state of highlighted controls."
2603
- },
2604
- "feature-highlight-secondary": {
2605
- "value": "linear-gradient(90deg, {violet.200}, {blue.200})",
2606
- "type": "color",
2607
- "description": "Secondary border for highlighted controls."
2608
- }
2609
- },
2610
- "control": {
2611
- "primary": {
2612
- "feature-highlight": {
2613
- "value": "linear-gradient(90deg, {violet.400}, {blue.400})",
2614
- "type": "color",
2615
- "description": "Background of the highlighted primary control."
2616
- },
2617
- "feature-highlight-hover": {
2618
- "value": "linear-gradient(90deg, {violet.500}, {blue.500})",
2619
- "type": "color",
2620
- "description": "Hover state of the highlighted primary control."
2621
- },
2622
- "feature-highlight-active": {
2623
- "value": "linear-gradient(90deg, {violet.600}, {blue.600})",
2624
- "type": "color",
2625
- "description": "Active (selected) state of the highlighted primary control."
2626
- }
2627
- },
2628
- "secondary": {
2629
- "feature-highlight": {
2630
- "value": "linear-gradient(90deg, {violet.50}, {blue.50})",
2631
- "type": "color",
2632
- "description": "Background of the highlighted secondary control."
2633
- },
2634
- "feature-highlight-hover": {
2635
- "value": "linear-gradient(90deg, {violet.100}, {blue.100})",
2636
- "type": "color",
2637
- "description": "Hover state of the highlighted secondary control.",
2638
- "$extensions": {
2639
- "studio.tokens": {
2640
- "modify": {
2641
- "type": "lighten",
2642
- "value": "0.3",
2643
- "space": "hsl"
2644
- }
2645
- }
2646
- }
2647
- },
2648
- "feature-highlight-active": {
2649
- "value": "linear-gradient(90deg, {violet.100}, {blue.100})",
2650
- "type": "color",
2651
- "description": "Active (selected) state of the highlighted secondary control."
2652
- }
2653
- }
2654
- },
2655
- "text": {
2656
- "feature-highlight": {
2657
- "value": "linear-gradient(90deg, {violet.500}, {blue.500})",
2658
- "type": "color",
2659
- "description": "Text for highlighted features."
2660
- },
2661
- "feature-highlight-hover-active": {
2662
- "value": "linear-gradient(90deg, {violet.700}, {blue.700})",
2663
- "type": "color",
2664
- "description": "Text for hover and active states of highlighted features."
2665
- }
2666
- },
2667
- "icon": {
2668
- "primary": {
2669
- "feature-highlight": {
2670
- "value": "{violet.500}",
2671
- "type": "color",
2672
- "description": "Primary highlighted icon."
2673
- },
2674
- "feature-highlight-hover-active": {
2675
- "value": "#6B3AB4",
2676
- "type": "color",
2677
- "description": "Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color."
2678
- }
2679
- }
2680
- },
2681
- "keyboard-focus-feature-highlight": {
2682
- "value": {
2683
- "width": "3px",
2684
- "color": "{keyboard-focus-feature-highlight.outline}"
2685
- },
2686
- "type": "border",
2687
- "description": "Keyboard focus styles for highlighted controls.",
2688
- "outline": {
2689
- "value": "linear-gradient(90deg, {violet.400}, {blue.400})",
2690
- "type": "color",
2691
- "description": "Color for keyboard focus outline styles for highlighted controls."
2692
- }
2693
- }
2694
- }
2695
- }