@neo4j-ndl/base 3.7.22 → 4.0.0-alpha.0.c084490

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 (39) hide show
  1. package/lib/cjs/index.js +1 -2
  2. package/lib/cjs/index.js.map +1 -1
  3. package/lib/cjs/tailwind-preset.config.js +34 -1
  4. package/lib/cjs/tailwind-preset.config.js.map +1 -1
  5. package/lib/cjs/tailwindTheme.mjs +16 -66
  6. package/lib/cjs/tailwindTheme.mjs.map +1 -1
  7. package/lib/cjs/tokens/js/tokens-esm.js +491 -478
  8. package/lib/cjs/tokens/js/tokens-esm.js.map +1 -1
  9. package/lib/cjs/tokens/js/tokens.js +494 -479
  10. package/lib/cjs/tokens/js/tokens.js.map +1 -1
  11. package/lib/esm/index.js +1 -2
  12. package/lib/esm/index.js.map +1 -1
  13. package/lib/esm/tailwind-preset.config.js +33 -1
  14. package/lib/esm/tailwind-preset.config.js.map +1 -1
  15. package/lib/esm/tailwindTheme.mjs +16 -64
  16. package/lib/esm/tailwindTheme.mjs.map +1 -1
  17. package/lib/esm/tokens/js/tokens-esm.js +491 -478
  18. package/lib/esm/tokens/js/tokens-esm.js.map +1 -1
  19. package/lib/esm/tokens/js/tokens.js +492 -480
  20. package/lib/esm/tokens/js/tokens.js.map +1 -1
  21. package/lib/neo4j-ds-styles.css +39256 -103698
  22. package/lib/tokens/css/tokens.css +435 -419
  23. package/lib/types/index.d.ts +1 -2
  24. package/lib/types/tokens/js/tokens-esm.d.ts +306 -299
  25. package/lib/types/tokens/js/tokens.d.ts +651 -642
  26. package/package.json +8 -6
  27. package/lib/cjs/tokens/js/storybook-design-token.js +0 -3969
  28. package/lib/cjs/tokens/js/storybook-design-token.js.map +0 -1
  29. package/lib/cjs/typescale.js +0 -147
  30. package/lib/cjs/typescale.js.map +0 -1
  31. package/lib/esm/tokens/js/storybook-design-token.js +0 -3966
  32. package/lib/esm/tokens/js/storybook-design-token.js.map +0 -1
  33. package/lib/esm/typescale.js +0 -144
  34. package/lib/esm/typescale.js.map +0 -1
  35. package/lib/tokens/js/tokens-raw.js +0 -9291
  36. package/lib/tokens/js/tokens.js +0 -637
  37. package/lib/tokens/scss/tokens.scss +0 -427
  38. package/lib/types/tokens/js/storybook-design-token.d.ts +0 -126
  39. package/lib/types/typescale.d.ts +0 -93
package/lib/cjs/tokens/js/storybook-design-token.js DELETED
@@ -1,3969 +0,0 @@
1
- /**
2
- *
3
- * Copyright (c) "Neo4j"
4
- * Neo4j Sweden AB [http://neo4j.com]
5
- *
6
- * This file is part of Neo4j.
7
- *
8
- * Neo4j is free software: you can redistribute it and/or modify
9
- * it under the terms of the GNU General Public License as published by
10
- * the Free Software Foundation, either version 3 of the License, or
11
- * (at your option) any later version.
12
- *
13
- * This program is distributed in the hope that it will be useful,
14
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
15
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16
- * GNU General Public License for more details.
17
- *
18
- * You should have received a copy of the GNU General Public License
19
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
20
- */
21
-
22
- "use strict";
23
- /**
24
- * Do not edit directly
25
- * Generated on Mon, 18 Aug 2025 14:04:54 GMT
26
- */
27
- Object.defineProperty(exports, "__esModule", { value: true });
28
- exports.tokens = void 0;
29
- exports.tokens = {
30
- "transitions": [
31
- {
32
- "path": [
33
- "transitions",
34
- "values",
35
- "properties",
36
- "default"
37
- ],
38
- "value": "all"
39
- },
40
- {
41
- "path": [
42
- "transitions",
43
- "values",
44
- "duration",
45
- "quick"
46
- ],
47
- "value": "100ms"
48
- },
49
- {
50
- "path": [
51
- "transitions",
52
- "values",
53
- "duration",
54
- "slow"
55
- ],
56
- "value": "250ms"
57
- },
58
- {
59
- "path": [
60
- "transitions",
61
- "values",
62
- "timing-function",
63
- "default"
64
- ],
65
- "value": "cubic-bezier(0.420, 0.000, 0.580, 1.000)"
66
- },
67
- {
68
- "path": [
69
- "transitions",
70
- "stripped",
71
- "quick"
72
- ],
73
- "value": "100ms cubic-bezier(0.420, 0.000, 0.580, 1.000)"
74
- },
75
- {
76
- "path": [
77
- "transitions",
78
- "stripped",
79
- "slow"
80
- ],
81
- "value": "250ms cubic-bezier(0.420, 0.000, 0.580, 1.000)"
82
- },
83
- {
84
- "path": [
85
- "transitions",
86
- "full",
87
- "quick"
88
- ],
89
- "value": "all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000)"
90
- },
91
- {
92
- "path": [
93
- "transitions",
94
- "full",
95
- "slow"
96
- ],
97
- "value": "all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000)"
98
- }
99
- ],
100
- "borderRadius": [
101
- {
102
- "path": [
103
- "borderRadius",
104
- "none"
105
- ],
106
- "value": "0px",
107
- "description": "Avoid since we want to usually have a slightly rounded layout style"
108
- },
109
- {
110
- "path": [
111
- "borderRadius",
112
- "sm"
113
- ],
114
- "value": "4px",
115
- "description": "Most common radius. Used in most smaller components such as buttons, checkboxes, text fields, radio buttons, tags and tooltips"
116
- },
117
- {
118
- "path": [
119
- "borderRadius",
120
- "md"
121
- ],
122
- "value": "6px",
123
- "description": "Do not use"
124
- },
125
- {
126
- "path": [
127
- "borderRadius",
128
- "lg"
129
- ],
130
- "value": "8px",
131
- "description": "Used for slightly larger components such as context menu and view selector"
132
- },
133
- {
134
- "path": [
135
- "borderRadius",
136
- "xl"
137
- ],
138
- "value": "10px",
139
- "description": "Do not use"
140
- },
141
- {
142
- "path": [
143
- "borderRadius",
144
- "1xl"
145
- ],
146
- "value": "12px",
147
- "description": "Do not use"
148
- },
149
- {
150
- "path": [
151
- "borderRadius",
152
- "2xl"
153
- ],
154
- "value": "14px",
155
- "description": "Do not use"
156
- },
157
- {
158
- "path": [
159
- "borderRadius",
160
- "3xl"
161
- ],
162
- "value": "16px",
163
- "description": "Used for larger components such as cards, widgets and dialogs"
164
- },
165
- {
166
- "path": [
167
- "borderRadius",
168
- "4xl"
169
- ],
170
- "value": "18px",
171
- "description": "Do not use"
172
- },
173
- {
174
- "path": [
175
- "borderRadius",
176
- "5xl"
177
- ],
178
- "value": "20px",
179
- "description": "Do not use"
180
- },
181
- {
182
- "path": [
183
- "borderRadius",
184
- "full"
185
- ],
186
- "value": "9999px",
187
- "description": "Fully rounded. Use this with caution since Neo4j does not have an overall rounded style. Rounded is used mainly for labels but also in commonly round components such as progress bar, switch and wizard steps"
188
- }
189
- ],
190
- "breakpointNextOne": [
191
- {
192
- "path": [
193
- "breakpointNextOne",
194
- "xs",
195
- "min"
196
- ],
197
- "value": "320px",
198
- "description": ""
199
- },
200
- {
201
- "path": [
202
- "breakpointNextOne",
203
- "xs",
204
- "med"
205
- ],
206
- "value": "360px",
207
- "description": ""
208
- },
209
- {
210
- "path": [
211
- "breakpointNextOne",
212
- "xs",
213
- "max"
214
- ],
215
- "value": "375px",
216
- "description": ""
217
- },
218
- {
219
- "path": [
220
- "breakpointNextOne",
221
- "sm",
222
- "min"
223
- ],
224
- "value": "512px",
225
- "description": ""
226
- },
227
- {
228
- "path": [
229
- "breakpointNextOne",
230
- "sm",
231
- "med"
232
- ],
233
- "value": "768px",
234
- "description": ""
235
- },
236
- {
237
- "path": [
238
- "breakpointNextOne",
239
- "sm",
240
- "max"
241
- ],
242
- "value": "864px",
243
- "description": ""
244
- },
245
- {
246
- "path": [
247
- "breakpointNextOne",
248
- "md",
249
- "min"
250
- ],
251
- "value": "1024px",
252
- "description": ""
253
- },
254
- {
255
- "path": [
256
- "breakpointNextOne",
257
- "md",
258
- "med"
259
- ],
260
- "value": "1280px",
261
- "description": ""
262
- },
263
- {
264
- "path": [
265
- "breakpointNextOne",
266
- "md",
267
- "max"
268
- ],
269
- "value": "1440px",
270
- "description": ""
271
- },
272
- {
273
- "path": [
274
- "breakpointNextOne",
275
- "lg",
276
- "min"
277
- ],
278
- "value": "1680px",
279
- "description": ""
280
- },
281
- {
282
- "path": [
283
- "breakpointNextOne",
284
- "lg",
285
- "max"
286
- ],
287
- "value": "1920px",
288
- "description": ""
289
- }
290
- ],
291
- "breakpointNextTwo": [
292
- {
293
- "path": [
294
- "breakpointNextTwo",
295
- "5xs"
296
- ],
297
- "value": "320px",
298
- "description": ""
299
- },
300
- {
301
- "path": [
302
- "breakpointNextTwo",
303
- "4xs"
304
- ],
305
- "value": "360px",
306
- "description": ""
307
- },
308
- {
309
- "path": [
310
- "breakpointNextTwo",
311
- "3xs"
312
- ],
313
- "value": "375px",
314
- "description": ""
315
- },
316
- {
317
- "path": [
318
- "breakpointNextTwo",
319
- "2xs"
320
- ],
321
- "value": "512px",
322
- "description": ""
323
- },
324
- {
325
- "path": [
326
- "breakpointNextTwo",
327
- "xs"
328
- ],
329
- "value": "768px",
330
- "description": ""
331
- },
332
- {
333
- "path": [
334
- "breakpointNextTwo",
335
- "sm"
336
- ],
337
- "value": "864px",
338
- "description": ""
339
- },
340
- {
341
- "path": [
342
- "breakpointNextTwo",
343
- "md"
344
- ],
345
- "value": "1024px",
346
- "description": ""
347
- },
348
- {
349
- "path": [
350
- "breakpointNextTwo",
351
- "lg"
352
- ],
353
- "value": "1280px",
354
- "description": ""
355
- },
356
- {
357
- "path": [
358
- "breakpointNextTwo",
359
- "xl"
360
- ],
361
- "value": "1440px",
362
- "description": ""
363
- },
364
- {
365
- "path": [
366
- "breakpointNextTwo",
367
- "2xl"
368
- ],
369
- "value": "1680px",
370
- "description": ""
371
- },
372
- {
373
- "path": [
374
- "breakpointNextTwo",
375
- "3xl"
376
- ],
377
- "value": "1920px",
378
- "description": ""
379
- }
380
- ],
381
- "breakpoints": [
382
- {
383
- "path": [
384
- "breakpoints",
385
- "xs"
386
- ],
387
- "value": "450px",
388
- "description": "Smallest breakpoint, mainly for mobile and also the smallest browser width that is supported"
389
- },
390
- {
391
- "path": [
392
- "breakpoints",
393
- "sm"
394
- ],
395
- "value": "640px",
396
- "description": "Mainly used for small tablets"
397
- },
398
- {
399
- "path": [
400
- "breakpoints",
401
- "md"
402
- ],
403
- "value": "768px",
404
- "description": "Tablets and usually the smallest laptop size"
405
- },
406
- {
407
- "path": [
408
- "breakpoints",
409
- "lg"
410
- ],
411
- "value": "1024px",
412
- "description": "Smaller laptop size"
413
- },
414
- {
415
- "path": [
416
- "breakpoints",
417
- "xl"
418
- ],
419
- "value": "1280px",
420
- "description": "Common laptop size"
421
- },
422
- {
423
- "path": [
424
- "breakpoints",
425
- "2xl"
426
- ],
427
- "value": "1536px",
428
- "description": "Desktop size"
429
- }
430
- ],
431
- "palette-categorical": [
432
- {
433
- "path": [
434
- "palette",
435
- "categorical",
436
- "1"
437
- ],
438
- "value": "#55BDC5"
439
- },
440
- {
441
- "path": [
442
- "palette",
443
- "categorical",
444
- "2"
445
- ],
446
- "value": "#4D49CB"
447
- },
448
- {
449
- "path": [
450
- "palette",
451
- "categorical",
452
- "3"
453
- ],
454
- "value": "#DC8B39"
455
- },
456
- {
457
- "path": [
458
- "palette",
459
- "categorical",
460
- "4"
461
- ],
462
- "value": "#C9458D"
463
- },
464
- {
465
- "path": [
466
- "palette",
467
- "categorical",
468
- "5"
469
- ],
470
- "value": "#8E8CF3"
471
- },
472
- {
473
- "path": [
474
- "palette",
475
- "categorical",
476
- "6"
477
- ],
478
- "value": "#78DE7C"
479
- },
480
- {
481
- "path": [
482
- "palette",
483
- "categorical",
484
- "7"
485
- ],
486
- "value": "#3F80E3"
487
- },
488
- {
489
- "path": [
490
- "palette",
491
- "categorical",
492
- "8"
493
- ],
494
- "value": "#673FAB"
495
- },
496
- {
497
- "path": [
498
- "palette",
499
- "categorical",
500
- "9"
501
- ],
502
- "value": "#DBBF40"
503
- },
504
- {
505
- "path": [
506
- "palette",
507
- "categorical",
508
- "10"
509
- ],
510
- "value": "#BF732D"
511
- },
512
- {
513
- "path": [
514
- "palette",
515
- "categorical",
516
- "11"
517
- ],
518
- "value": "#478A6E"
519
- },
520
- {
521
- "path": [
522
- "palette",
523
- "categorical",
524
- "12"
525
- ],
526
- "value": "#ADE86B"
527
- }
528
- ],
529
- "palette-code": [
530
- {
531
- "path": [
532
- "palette",
533
- "code",
534
- "light",
535
- "comment"
536
- ],
537
- "value": "#5E636A"
538
- },
539
- {
540
- "path": [
541
- "palette",
542
- "code",
543
- "light",
544
- "keyword"
545
- ],
546
- "value": "#3F7824"
547
- },
548
- {
549
- "path": [
550
- "palette",
551
- "code",
552
- "light",
553
- "keywordLiteral"
554
- ],
555
- "value": "#3F7824"
556
- },
557
- {
558
- "path": [
559
- "palette",
560
- "code",
561
- "light",
562
- "operator"
563
- ],
564
- "value": "#3F7824"
565
- },
566
- {
567
- "path": [
568
- "palette",
569
- "code",
570
- "light",
571
- "label"
572
- ],
573
- "value": "#D43300"
574
- },
575
- {
576
- "path": [
577
- "palette",
578
- "code",
579
- "light",
580
- "predicateFunction"
581
- ],
582
- "value": "#0A6190"
583
- },
584
- {
585
- "path": [
586
- "palette",
587
- "code",
588
- "light",
589
- "function"
590
- ],
591
- "value": "#0A6190"
592
- },
593
- {
594
- "path": [
595
- "palette",
596
- "code",
597
- "light",
598
- "procedure"
599
- ],
600
- "value": "#0A6190"
601
- },
602
- {
603
- "path": [
604
- "palette",
605
- "code",
606
- "light",
607
- "stringLiteral"
608
- ],
609
- "value": "#986400"
610
- },
611
- {
612
- "path": [
613
- "palette",
614
- "code",
615
- "light",
616
- "numberLiteral"
617
- ],
618
- "value": "#754EC8"
619
- },
620
- {
621
- "path": [
622
- "palette",
623
- "code",
624
- "light",
625
- "booleanLiteral"
626
- ],
627
- "value": "#754EC8"
628
- },
629
- {
630
- "path": [
631
- "palette",
632
- "code",
633
- "light",
634
- "paramValue"
635
- ],
636
- "value": "#754EC8"
637
- },
638
- {
639
- "path": [
640
- "palette",
641
- "code",
642
- "light",
643
- "property"
644
- ],
645
- "value": "#730E00"
646
- },
647
- {
648
- "path": [
649
- "palette",
650
- "code",
651
- "dark",
652
- "comment"
653
- ],
654
- "value": "#959AA1"
655
- },
656
- {
657
- "path": [
658
- "palette",
659
- "code",
660
- "dark",
661
- "keyword"
662
- ],
663
- "value": "#FFC450"
664
- },
665
- {
666
- "path": [
667
- "palette",
668
- "code",
669
- "dark",
670
- "keywordLiteral"
671
- ],
672
- "value": "#FFC450"
673
- },
674
- {
675
- "path": [
676
- "palette",
677
- "code",
678
- "dark",
679
- "operator"
680
- ],
681
- "value": "#FFC450"
682
- },
683
- {
684
- "path": [
685
- "palette",
686
- "code",
687
- "dark",
688
- "label"
689
- ],
690
- "value": "#F96746"
691
- },
692
- {
693
- "path": [
694
- "palette",
695
- "code",
696
- "dark",
697
- "predicateFunction"
698
- ],
699
- "value": "#8FE3E8"
700
- },
701
- {
702
- "path": [
703
- "palette",
704
- "code",
705
- "dark",
706
- "function"
707
- ],
708
- "value": "#8FE3E8"
709
- },
710
- {
711
- "path": [
712
- "palette",
713
- "code",
714
- "dark",
715
- "procedure"
716
- ],
717
- "value": "#8FE3E8"
718
- },
719
- {
720
- "path": [
721
- "palette",
722
- "code",
723
- "dark",
724
- "stringLiteral"
725
- ],
726
- "value": "#90CB62"
727
- },
728
- {
729
- "path": [
730
- "palette",
731
- "code",
732
- "dark",
733
- "numberLiteral"
734
- ],
735
- "value": "#CCB4FF"
736
- },
737
- {
738
- "path": [
739
- "palette",
740
- "code",
741
- "dark",
742
- "booleanLiteral"
743
- ],
744
- "value": "#CCB4FF"
745
- },
746
- {
747
- "path": [
748
- "palette",
749
- "code",
750
- "dark",
751
- "paramValue"
752
- ],
753
- "value": "#CCB4FF"
754
- },
755
- {
756
- "path": [
757
- "palette",
758
- "code",
759
- "dark",
760
- "property"
761
- ],
762
- "value": "#FFAA97"
763
- }
764
- ],
765
- "palette-graph": [
766
- {
767
- "path": [
768
- "palette",
769
- "graph",
770
- "1"
771
- ],
772
- "value": "#FFDF81"
773
- },
774
- {
775
- "path": [
776
- "palette",
777
- "graph",
778
- "2"
779
- ],
780
- "value": "#C990C0"
781
- },
782
- {
783
- "path": [
784
- "palette",
785
- "graph",
786
- "3"
787
- ],
788
- "value": "#F79767"
789
- },
790
- {
791
- "path": [
792
- "palette",
793
- "graph",
794
- "4"
795
- ],
796
- "value": "#56C7E4"
797
- },
798
- {
799
- "path": [
800
- "palette",
801
- "graph",
802
- "5"
803
- ],
804
- "value": "#F16767"
805
- },
806
- {
807
- "path": [
808
- "palette",
809
- "graph",
810
- "6"
811
- ],
812
- "value": "#D8C7AE"
813
- },
814
- {
815
- "path": [
816
- "palette",
817
- "graph",
818
- "7"
819
- ],
820
- "value": "#8DCC93"
821
- },
822
- {
823
- "path": [
824
- "palette",
825
- "graph",
826
- "8"
827
- ],
828
- "value": "#ECB4C9"
829
- },
830
- {
831
- "path": [
832
- "palette",
833
- "graph",
834
- "9"
835
- ],
836
- "value": "#4D8DDA"
837
- },
838
- {
839
- "path": [
840
- "palette",
841
- "graph",
842
- "10"
843
- ],
844
- "value": "#FFC354"
845
- },
846
- {
847
- "path": [
848
- "palette",
849
- "graph",
850
- "11"
851
- ],
852
- "value": "#DA7294"
853
- },
854
- {
855
- "path": [
856
- "palette",
857
- "graph",
858
- "12"
859
- ],
860
- "value": "#579380"
861
- }
862
- ],
863
- "colors": [
864
- {
865
- "path": [
866
- "colors",
867
- "baltic",
868
- "10"
869
- ],
870
- "value": "#E7FAFB"
871
- },
872
- {
873
- "path": [
874
- "colors",
875
- "baltic",
876
- "15"
877
- ],
878
- "value": "#C3F8FB"
879
- },
880
- {
881
- "path": [
882
- "colors",
883
- "baltic",
884
- "20"
885
- ],
886
- "value": "#8FE3E8"
887
- },
888
- {
889
- "path": [
890
- "colors",
891
- "baltic",
892
- "25"
893
- ],
894
- "value": "#5CC3C9"
895
- },
896
- {
897
- "path": [
898
- "colors",
899
- "baltic",
900
- "30"
901
- ],
902
- "value": "#5DB3BF"
903
- },
904
- {
905
- "path": [
906
- "colors",
907
- "baltic",
908
- "35"
909
- ],
910
- "value": "#51A6B1"
911
- },
912
- {
913
- "path": [
914
- "colors",
915
- "baltic",
916
- "40"
917
- ],
918
- "value": "#4C99A4"
919
- },
920
- {
921
- "path": [
922
- "colors",
923
- "baltic",
924
- "45"
925
- ],
926
- "value": "#30839D"
927
- },
928
- {
929
- "path": [
930
- "colors",
931
- "baltic",
932
- "50"
933
- ],
934
- "value": "#0A6190"
935
- },
936
- {
937
- "path": [
938
- "colors",
939
- "baltic",
940
- "55"
941
- ],
942
- "value": "#02507B"
943
- },
944
- {
945
- "path": [
946
- "colors",
947
- "baltic",
948
- "60"
949
- ],
950
- "value": "#014063"
951
- },
952
- {
953
- "path": [
954
- "colors",
955
- "baltic",
956
- "65"
957
- ],
958
- "value": "#262F31"
959
- },
960
- {
961
- "path": [
962
- "colors",
963
- "baltic",
964
- "70"
965
- ],
966
- "value": "#081E2B"
967
- },
968
- {
969
- "path": [
970
- "colors",
971
- "baltic",
972
- "75"
973
- ],
974
- "value": "#041823"
975
- },
976
- {
977
- "path": [
978
- "colors",
979
- "baltic",
980
- "80"
981
- ],
982
- "value": "#01121C"
983
- },
984
- {
985
- "path": [
986
- "colors",
987
- "hibiscus",
988
- "10"
989
- ],
990
- "value": "#FFE9E7"
991
- },
992
- {
993
- "path": [
994
- "colors",
995
- "hibiscus",
996
- "15"
997
- ],
998
- "value": "#FFD7D2"
999
- },
1000
- {
1001
- "path": [
1002
- "colors",
1003
- "hibiscus",
1004
- "20"
1005
- ],
1006
- "value": "#FFAA97"
1007
- },
1008
- {
1009
- "path": [
1010
- "colors",
1011
- "hibiscus",
1012
- "25"
1013
- ],
1014
- "value": "#FF8E6A"
1015
- },
1016
- {
1017
- "path": [
1018
- "colors",
1019
- "hibiscus",
1020
- "30"
1021
- ],
1022
- "value": "#F96746"
1023
- },
1024
- {
1025
- "path": [
1026
- "colors",
1027
- "hibiscus",
1028
- "35"
1029
- ],
1030
- "value": "#E84E2C"
1031
- },
1032
- {
1033
- "path": [
1034
- "colors",
1035
- "hibiscus",
1036
- "40"
1037
- ],
1038
- "value": "#D43300"
1039
- },
1040
- {
1041
- "path": [
1042
- "colors",
1043
- "hibiscus",
1044
- "45"
1045
- ],
1046
- "value": "#BB2D00"
1047
- },
1048
- {
1049
- "path": [
1050
- "colors",
1051
- "hibiscus",
1052
- "50"
1053
- ],
1054
- "value": "#961200"
1055
- },
1056
- {
1057
- "path": [
1058
- "colors",
1059
- "hibiscus",
1060
- "55"
1061
- ],
1062
- "value": "#730E00"
1063
- },
1064
- {
1065
- "path": [
1066
- "colors",
1067
- "hibiscus",
1068
- "60"
1069
- ],
1070
- "value": "#432520"
1071
- },
1072
- {
1073
- "path": [
1074
- "colors",
1075
- "hibiscus",
1076
- "65"
1077
- ],
1078
- "value": "#4E0900"
1079
- },
1080
- {
1081
- "path": [
1082
- "colors",
1083
- "hibiscus",
1084
- "70"
1085
- ],
1086
- "value": "#3F0800"
1087
- },
1088
- {
1089
- "path": [
1090
- "colors",
1091
- "hibiscus",
1092
- "75"
1093
- ],
1094
- "value": "#360700"
1095
- },
1096
- {
1097
- "path": [
1098
- "colors",
1099
- "hibiscus",
1100
- "80"
1101
- ],
1102
- "value": "#280500"
1103
- },
1104
- {
1105
- "path": [
1106
- "colors",
1107
- "forest",
1108
- "10"
1109
- ],
1110
- "value": "#E7FCD7"
1111
- },
1112
- {
1113
- "path": [
1114
- "colors",
1115
- "forest",
1116
- "15"
1117
- ],
1118
- "value": "#BCF194"
1119
- },
1120
- {
1121
- "path": [
1122
- "colors",
1123
- "forest",
1124
- "20"
1125
- ],
1126
- "value": "#90CB62"
1127
- },
1128
- {
1129
- "path": [
1130
- "colors",
1131
- "forest",
1132
- "25"
1133
- ],
1134
- "value": "#80BB53"
1135
- },
1136
- {
1137
- "path": [
1138
- "colors",
1139
- "forest",
1140
- "30"
1141
- ],
1142
- "value": "#6FA646"
1143
- },
1144
- {
1145
- "path": [
1146
- "colors",
1147
- "forest",
1148
- "35"
1149
- ],
1150
- "value": "#5B992B"
1151
- },
1152
- {
1153
- "path": [
1154
- "colors",
1155
- "forest",
1156
- "40"
1157
- ],
1158
- "value": "#4D8622"
1159
- },
1160
- {
1161
- "path": [
1162
- "colors",
1163
- "forest",
1164
- "45"
1165
- ],
1166
- "value": "#3F7824"
1167
- },
1168
- {
1169
- "path": [
1170
- "colors",
1171
- "forest",
1172
- "50"
1173
- ],
1174
- "value": "#296127"
1175
- },
1176
- {
1177
- "path": [
1178
- "colors",
1179
- "forest",
1180
- "55"
1181
- ],
1182
- "value": "#145439"
1183
- },
1184
- {
1185
- "path": [
1186
- "colors",
1187
- "forest",
1188
- "60"
1189
- ],
1190
- "value": "#0C4D31"
1191
- },
1192
- {
1193
- "path": [
1194
- "colors",
1195
- "forest",
1196
- "65"
1197
- ],
1198
- "value": "#0A4324"
1199
- },
1200
- {
1201
- "path": [
1202
- "colors",
1203
- "forest",
1204
- "70"
1205
- ],
1206
- "value": "#262D24"
1207
- },
1208
- {
1209
- "path": [
1210
- "colors",
1211
- "forest",
1212
- "75"
1213
- ],
1214
- "value": "#052618"
1215
- },
1216
- {
1217
- "path": [
1218
- "colors",
1219
- "forest",
1220
- "80"
1221
- ],
1222
- "value": "#021D11"
1223
- },
1224
- {
1225
- "path": [
1226
- "colors",
1227
- "lemon",
1228
- "10"
1229
- ],
1230
- "value": "#FFFAD1"
1231
- },
1232
- {
1233
- "path": [
1234
- "colors",
1235
- "lemon",
1236
- "15"
1237
- ],
1238
- "value": "#FFF8BD"
1239
- },
1240
- {
1241
- "path": [
1242
- "colors",
1243
- "lemon",
1244
- "20"
1245
- ],
1246
- "value": "#FFF178"
1247
- },
1248
- {
1249
- "path": [
1250
- "colors",
1251
- "lemon",
1252
- "25"
1253
- ],
1254
- "value": "#FFE500"
1255
- },
1256
- {
1257
- "path": [
1258
- "colors",
1259
- "lemon",
1260
- "30"
1261
- ],
1262
- "value": "#FFD600"
1263
- },
1264
- {
1265
- "path": [
1266
- "colors",
1267
- "lemon",
1268
- "35"
1269
- ],
1270
- "value": "#F4C318"
1271
- },
1272
- {
1273
- "path": [
1274
- "colors",
1275
- "lemon",
1276
- "40"
1277
- ],
1278
- "value": "#D7AA0A"
1279
- },
1280
- {
1281
- "path": [
1282
- "colors",
1283
- "lemon",
1284
- "45"
1285
- ],
1286
- "value": "#B48409"
1287
- },
1288
- {
1289
- "path": [
1290
- "colors",
1291
- "lemon",
1292
- "50"
1293
- ],
1294
- "value": "#996E00"
1295
- },
1296
- {
1297
- "path": [
1298
- "colors",
1299
- "lemon",
1300
- "55"
1301
- ],
1302
- "value": "#765500"
1303
- },
1304
- {
1305
- "path": [
1306
- "colors",
1307
- "lemon",
1308
- "60"
1309
- ],
1310
- "value": "#614600"
1311
- },
1312
- {
1313
- "path": [
1314
- "colors",
1315
- "lemon",
1316
- "65"
1317
- ],
1318
- "value": "#4D3700"
1319
- },
1320
- {
1321
- "path": [
1322
- "colors",
1323
- "lemon",
1324
- "70"
1325
- ],
1326
- "value": "#312E1A"
1327
- },
1328
- {
1329
- "path": [
1330
- "colors",
1331
- "lemon",
1332
- "75"
1333
- ],
1334
- "value": "#2E2100"
1335
- },
1336
- {
1337
- "path": [
1338
- "colors",
1339
- "lemon",
1340
- "80"
1341
- ],
1342
- "value": "#251B00"
1343
- },
1344
- {
1345
- "path": [
1346
- "colors",
1347
- "lavender",
1348
- "10"
1349
- ],
1350
- "value": "#F7F3FF"
1351
- },
1352
- {
1353
- "path": [
1354
- "colors",
1355
- "lavender",
1356
- "15"
1357
- ],
1358
- "value": "#E9DEFF"
1359
- },
1360
- {
1361
- "path": [
1362
- "colors",
1363
- "lavender",
1364
- "20"
1365
- ],
1366
- "value": "#CCB4FF"
1367
- },
1368
- {
1369
- "path": [
1370
- "colors",
1371
- "lavender",
1372
- "25"
1373
- ],
1374
- "value": "#B38EFF"
1375
- },
1376
- {
1377
- "path": [
1378
- "colors",
1379
- "lavender",
1380
- "30"
1381
- ],
1382
- "value": "#A07BEC"
1383
- },
1384
- {
1385
- "path": [
1386
- "colors",
1387
- "lavender",
1388
- "35"
1389
- ],
1390
- "value": "#8C68D9"
1391
- },
1392
- {
1393
- "path": [
1394
- "colors",
1395
- "lavender",
1396
- "40"
1397
- ],
1398
- "value": "#754EC8"
1399
- },
1400
- {
1401
- "path": [
1402
- "colors",
1403
- "lavender",
1404
- "45"
1405
- ],
1406
- "value": "#5A34AA"
1407
- },
1408
- {
1409
- "path": [
1410
- "colors",
1411
- "lavender",
1412
- "50"
1413
- ],
1414
- "value": "#4B2894"
1415
- },
1416
- {
1417
- "path": [
1418
- "colors",
1419
- "lavender",
1420
- "55"
1421
- ],
1422
- "value": "#3B1982"
1423
- },
1424
- {
1425
- "path": [
1426
- "colors",
1427
- "lavender",
1428
- "60"
1429
- ],
1430
- "value": "#2C2A34"
1431
- },
1432
- {
1433
- "path": [
1434
- "colors",
1435
- "lavender",
1436
- "65"
1437
- ],
1438
- "value": "#220954"
1439
- },
1440
- {
1441
- "path": [
1442
- "colors",
1443
- "lavender",
1444
- "70"
1445
- ],
1446
- "value": "#170146"
1447
- },
1448
- {
1449
- "path": [
1450
- "colors",
1451
- "lavender",
1452
- "75"
1453
- ],
1454
- "value": "#0E002D"
1455
- },
1456
- {
1457
- "path": [
1458
- "colors",
1459
- "lavender",
1460
- "80"
1461
- ],
1462
- "value": "#09001C"
1463
- },
1464
- {
1465
- "path": [
1466
- "colors",
1467
- "marigold",
1468
- "10"
1469
- ],
1470
- "value": "#FFF0D2"
1471
- },
1472
- {
1473
- "path": [
1474
- "colors",
1475
- "marigold",
1476
- "15"
1477
- ],
1478
- "value": "#FFDE9D"
1479
- },
1480
- {
1481
- "path": [
1482
- "colors",
1483
- "marigold",
1484
- "20"
1485
- ],
1486
- "value": "#FFCF72"
1487
- },
1488
- {
1489
- "path": [
1490
- "colors",
1491
- "marigold",
1492
- "25"
1493
- ],
1494
- "value": "#FFC450"
1495
- },
1496
- {
1497
- "path": [
1498
- "colors",
1499
- "marigold",
1500
- "30"
1501
- ],
1502
- "value": "#FFB422"
1503
- },
1504
- {
1505
- "path": [
1506
- "colors",
1507
- "marigold",
1508
- "35"
1509
- ],
1510
- "value": "#FFA901"
1511
- },
1512
- {
1513
- "path": [
1514
- "colors",
1515
- "marigold",
1516
- "40"
1517
- ],
1518
- "value": "#EC9C00"
1519
- },
1520
- {
1521
- "path": [
1522
- "colors",
1523
- "marigold",
1524
- "45"
1525
- ],
1526
- "value": "#DA9105"
1527
- },
1528
- {
1529
- "path": [
1530
- "colors",
1531
- "marigold",
1532
- "50"
1533
- ],
1534
- "value": "#BA7A00"
1535
- },
1536
- {
1537
- "path": [
1538
- "colors",
1539
- "marigold",
1540
- "55"
1541
- ],
1542
- "value": "#986400"
1543
- },
1544
- {
1545
- "path": [
1546
- "colors",
1547
- "marigold",
1548
- "60"
1549
- ],
1550
- "value": "#795000"
1551
- },
1552
- {
1553
- "path": [
1554
- "colors",
1555
- "marigold",
1556
- "65"
1557
- ],
1558
- "value": "#624100"
1559
- },
1560
- {
1561
- "path": [
1562
- "colors",
1563
- "marigold",
1564
- "70"
1565
- ],
1566
- "value": "#543800"
1567
- },
1568
- {
1569
- "path": [
1570
- "colors",
1571
- "marigold",
1572
- "75"
1573
- ],
1574
- "value": "#422C00"
1575
- },
1576
- {
1577
- "path": [
1578
- "colors",
1579
- "marigold",
1580
- "80"
1581
- ],
1582
- "value": "#251900"
1583
- },
1584
- {
1585
- "path": [
1586
- "colors",
1587
- "earth",
1588
- "10"
1589
- ],
1590
- "value": "#FFF7F0"
1591
- },
1592
- {
1593
- "path": [
1594
- "colors",
1595
- "earth",
1596
- "15"
1597
- ],
1598
- "value": "#FDEDDA"
1599
- },
1600
- {
1601
- "path": [
1602
- "colors",
1603
- "earth",
1604
- "20"
1605
- ],
1606
- "value": "#FFE1C5"
1607
- },
1608
- {
1609
- "path": [
1610
- "colors",
1611
- "earth",
1612
- "25"
1613
- ],
1614
- "value": "#F8D1AE"
1615
- },
1616
- {
1617
- "path": [
1618
- "colors",
1619
- "earth",
1620
- "30"
1621
- ],
1622
- "value": "#ECBF96"
1623
- },
1624
- {
1625
- "path": [
1626
- "colors",
1627
- "earth",
1628
- "35"
1629
- ],
1630
- "value": "#E0AE7F"
1631
- },
1632
- {
1633
- "path": [
1634
- "colors",
1635
- "earth",
1636
- "40"
1637
- ],
1638
- "value": "#D19660"
1639
- },
1640
- {
1641
- "path": [
1642
- "colors",
1643
- "earth",
1644
- "45"
1645
- ],
1646
- "value": "#AF7C4D"
1647
- },
1648
- {
1649
- "path": [
1650
- "colors",
1651
- "earth",
1652
- "50"
1653
- ],
1654
- "value": "#8D5D31"
1655
- },
1656
- {
1657
- "path": [
1658
- "colors",
1659
- "earth",
1660
- "55"
1661
- ],
1662
- "value": "#763F18"
1663
- },
1664
- {
1665
- "path": [
1666
- "colors",
1667
- "earth",
1668
- "60"
1669
- ],
1670
- "value": "#66310B"
1671
- },
1672
- {
1673
- "path": [
1674
- "colors",
1675
- "earth",
1676
- "65"
1677
- ],
1678
- "value": "#5B2B09"
1679
- },
1680
- {
1681
- "path": [
1682
- "colors",
1683
- "earth",
1684
- "70"
1685
- ],
1686
- "value": "#481F01"
1687
- },
1688
- {
1689
- "path": [
1690
- "colors",
1691
- "earth",
1692
- "75"
1693
- ],
1694
- "value": "#361700"
1695
- },
1696
- {
1697
- "path": [
1698
- "colors",
1699
- "earth",
1700
- "80"
1701
- ],
1702
- "value": "#220E00"
1703
- },
1704
- {
1705
- "path": [
1706
- "colors",
1707
- "neutral",
1708
- "10"
1709
- ],
1710
- "value": "#FFFFFF"
1711
- },
1712
- {
1713
- "path": [
1714
- "colors",
1715
- "neutral",
1716
- "15"
1717
- ],
1718
- "value": "#F5F6F6"
1719
- },
1720
- {
1721
- "path": [
1722
- "colors",
1723
- "neutral",
1724
- "20"
1725
- ],
1726
- "value": "#E2E3E5"
1727
- },
1728
- {
1729
- "path": [
1730
- "colors",
1731
- "neutral",
1732
- "25"
1733
- ],
1734
- "value": "#CFD1D4"
1735
- },
1736
- {
1737
- "path": [
1738
- "colors",
1739
- "neutral",
1740
- "30"
1741
- ],
1742
- "value": "#BBBEC3"
1743
- },
1744
- {
1745
- "path": [
1746
- "colors",
1747
- "neutral",
1748
- "35"
1749
- ],
1750
- "value": "#A8ACB2"
1751
- },
1752
- {
1753
- "path": [
1754
- "colors",
1755
- "neutral",
1756
- "40"
1757
- ],
1758
- "value": "#959AA1"
1759
- },
1760
- {
1761
- "path": [
1762
- "colors",
1763
- "neutral",
1764
- "45"
1765
- ],
1766
- "value": "#818790"
1767
- },
1768
- {
1769
- "path": [
1770
- "colors",
1771
- "neutral",
1772
- "50"
1773
- ],
1774
- "value": "#6F757E"
1775
- },
1776
- {
1777
- "path": [
1778
- "colors",
1779
- "neutral",
1780
- "55"
1781
- ],
1782
- "value": "#5E636A"
1783
- },
1784
- {
1785
- "path": [
1786
- "colors",
1787
- "neutral",
1788
- "60"
1789
- ],
1790
- "value": "#4D5157"
1791
- },
1792
- {
1793
- "path": [
1794
- "colors",
1795
- "neutral",
1796
- "65"
1797
- ],
1798
- "value": "#3C3F44"
1799
- },
1800
- {
1801
- "path": [
1802
- "colors",
1803
- "neutral",
1804
- "70"
1805
- ],
1806
- "value": "#212325"
1807
- },
1808
- {
1809
- "path": [
1810
- "colors",
1811
- "neutral",
1812
- "75"
1813
- ],
1814
- "value": "#1A1B1D"
1815
- },
1816
- {
1817
- "path": [
1818
- "colors",
1819
- "neutral",
1820
- "80"
1821
- ],
1822
- "value": "#09090A"
1823
- },
1824
- {
1825
- "path": [
1826
- "colors",
1827
- "beige",
1828
- "10"
1829
- ],
1830
- "value": "#FFFCF4"
1831
- },
1832
- {
1833
- "path": [
1834
- "colors",
1835
- "beige",
1836
- "20"
1837
- ],
1838
- "value": "#FFF7E3"
1839
- },
1840
- {
1841
- "path": [
1842
- "colors",
1843
- "beige",
1844
- "30"
1845
- ],
1846
- "value": "#F2EAD4"
1847
- },
1848
- {
1849
- "path": [
1850
- "colors",
1851
- "beige",
1852
- "40"
1853
- ],
1854
- "value": "#C1B9A0"
1855
- },
1856
- {
1857
- "path": [
1858
- "colors",
1859
- "beige",
1860
- "50"
1861
- ],
1862
- "value": "#999384"
1863
- },
1864
- {
1865
- "path": [
1866
- "colors",
1867
- "beige",
1868
- "60"
1869
- ],
1870
- "value": "#666050"
1871
- },
1872
- {
1873
- "path": [
1874
- "colors",
1875
- "beige",
1876
- "70"
1877
- ],
1878
- "value": "#3F3824"
1879
- },
1880
- {
1881
- "path": [
1882
- "colors",
1883
- "highlights",
1884
- "yellow"
1885
- ],
1886
- "value": "#FAFF00"
1887
- },
1888
- {
1889
- "path": [
1890
- "colors",
1891
- "highlights",
1892
- "periwinkle"
1893
- ],
1894
- "value": "#6A82FF"
1895
- }
1896
- ],
1897
- "contentMaxWidthNext": [
1898
- {
1899
- "path": [
1900
- "contentMaxWidthNext",
1901
- "extraLight"
1902
- ],
1903
- "value": "768px",
1904
- "description": ""
1905
- },
1906
- {
1907
- "path": [
1908
- "contentMaxWidthNext",
1909
- "light"
1910
- ],
1911
- "value": "1024px",
1912
- "description": ""
1913
- },
1914
- {
1915
- "path": [
1916
- "contentMaxWidthNext",
1917
- "heavy"
1918
- ],
1919
- "value": "1680px",
1920
- "description": ""
1921
- },
1922
- {
1923
- "path": [
1924
- "contentMaxWidthNext",
1925
- "max"
1926
- ],
1927
- "value": "1920px",
1928
- "description": ""
1929
- },
1930
- {
1931
- "path": [
1932
- "contentMaxWidthNext",
1933
- "full"
1934
- ],
1935
- "value": "100%",
1936
- "description": ""
1937
- }
1938
- ],
1939
- "theme-dark-shadow": [
1940
- {
1941
- "path": [
1942
- "theme",
1943
- "dark",
1944
- "boxShadow",
1945
- "raised"
1946
- ],
1947
- "value": "0px 1px 2px 0px rgba(9, 9, 10, 0.50)",
1948
- "description": "Used for small components that need sharper shadows to illustrate elevation."
1949
- },
1950
- {
1951
- "path": [
1952
- "theme",
1953
- "dark",
1954
- "boxShadow",
1955
- "overlay"
1956
- ],
1957
- "value": "0px 8px 20px 0px rgba(9, 9, 10, 0.50)",
1958
- "description": "Used for most mid/large sized components with floating states. Components include banner, button, card, drop down, progress bar and view selector"
1959
- }
1960
- ],
1961
- "theme-dark-palette": [
1962
- {
1963
- "path": [
1964
- "theme",
1965
- "dark",
1966
- "palette",
1967
- "neutral",
1968
- "text",
1969
- "weakest"
1970
- ],
1971
- "value": "#818790",
1972
- "description": "Should be used mainly for disabled text"
1973
- },
1974
- {
1975
- "path": [
1976
- "theme",
1977
- "dark",
1978
- "palette",
1979
- "neutral",
1980
- "text",
1981
- "weaker"
1982
- ],
1983
- "value": "#A8ACB2",
1984
- "description": "Should be used sparsely and mainly for headers and subtitles to differentiate from input text"
1985
- },
1986
- {
1987
- "path": [
1988
- "theme",
1989
- "dark",
1990
- "palette",
1991
- "neutral",
1992
- "text",
1993
- "weak"
1994
- ],
1995
- "value": "#CFD1D4",
1996
- "description": "Used for labels, icon color and descriptions"
1997
- },
1998
- {
1999
- "path": [
2000
- "theme",
2001
- "dark",
2002
- "palette",
2003
- "neutral",
2004
- "text",
2005
- "default"
2006
- ],
2007
- "value": "#F5F6F6",
2008
- "description": "Used for all default text"
2009
- },
2010
- {
2011
- "path": [
2012
- "theme",
2013
- "dark",
2014
- "palette",
2015
- "neutral",
2016
- "text",
2017
- "inverse"
2018
- ],
2019
- "value": "#1A1B1D",
2020
- "description": "Default text on Neutral-bg-strongest or other dark backgrounds"
2021
- },
2022
- {
2023
- "path": [
2024
- "theme",
2025
- "dark",
2026
- "palette",
2027
- "neutral",
2028
- "icon"
2029
- ],
2030
- "value": "#CFD1D4",
2031
- "description": "Used as a default neutral icon color"
2032
- },
2033
- {
2034
- "path": [
2035
- "theme",
2036
- "dark",
2037
- "palette",
2038
- "neutral",
2039
- "bg",
2040
- "weak"
2041
- ],
2042
- "value": "#212325",
2043
- "description": "Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default"
2044
- },
2045
- {
2046
- "path": [
2047
- "theme",
2048
- "dark",
2049
- "palette",
2050
- "neutral",
2051
- "bg",
2052
- "default"
2053
- ],
2054
- "value": "#1A1B1D",
2055
- "description": "Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak"
2056
- },
2057
- {
2058
- "path": [
2059
- "theme",
2060
- "dark",
2061
- "palette",
2062
- "neutral",
2063
- "bg",
2064
- "strong"
2065
- ],
2066
- "value": "#3C3F44",
2067
- "description": "Use sparsely, mainly included in some component states"
2068
- },
2069
- {
2070
- "path": [
2071
- "theme",
2072
- "dark",
2073
- "palette",
2074
- "neutral",
2075
- "bg",
2076
- "stronger"
2077
- ],
2078
- "value": "#6F757E"
2079
- },
2080
- {
2081
- "path": [
2082
- "theme",
2083
- "dark",
2084
- "palette",
2085
- "neutral",
2086
- "bg",
2087
- "strongest"
2088
- ],
2089
- "value": "#F5F6F6",
2090
- "description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout"
2091
- },
2092
- {
2093
- "path": [
2094
- "theme",
2095
- "dark",
2096
- "palette",
2097
- "neutral",
2098
- "bg",
2099
- "status"
2100
- ],
2101
- "value": "#A8ACB2",
2102
- "description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout"
2103
- },
2104
- {
2105
- "path": [
2106
- "theme",
2107
- "dark",
2108
- "palette",
2109
- "neutral",
2110
- "bg",
2111
- "on-bg-weak"
2112
- ],
2113
- "value": "#818790"
2114
- },
2115
- {
2116
- "path": [
2117
- "theme",
2118
- "dark",
2119
- "palette",
2120
- "neutral",
2121
- "border",
2122
- "weak"
2123
- ],
2124
- "value": "#3C3F44",
2125
- "description": "Used for light borders such as dividers and tables as well as some components such as context menu and code block to make them stand out more from the background"
2126
- },
2127
- {
2128
- "path": [
2129
- "theme",
2130
- "dark",
2131
- "palette",
2132
- "neutral",
2133
- "border",
2134
- "strong"
2135
- ],
2136
- "value": "#6F757E",
2137
- "description": "Used for components that are outlined and need to stand out such as text fields, search fields, drop-downs, buttons, checkboxes and radio buttons"
2138
- },
2139
- {
2140
- "path": [
2141
- "theme",
2142
- "dark",
2143
- "palette",
2144
- "neutral",
2145
- "border",
2146
- "strongest"
2147
- ],
2148
- "value": "#BBBEC3"
2149
- },
2150
- {
2151
- "path": [
2152
- "theme",
2153
- "dark",
2154
- "palette",
2155
- "neutral",
2156
- "hover"
2157
- ],
2158
- "value": "#959AA1",
2159
- "description": "Used for neutral hover states on components"
2160
- },
2161
- {
2162
- "path": [
2163
- "theme",
2164
- "dark",
2165
- "palette",
2166
- "neutral",
2167
- "pressed"
2168
- ],
2169
- "value": "#959AA1",
2170
- "description": "Used for neutral pressed states on components"
2171
- },
2172
- {
2173
- "path": [
2174
- "theme",
2175
- "dark",
2176
- "palette",
2177
- "primary",
2178
- "text"
2179
- ],
2180
- "value": "#8FE3E8",
2181
- "description": "Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states"
2182
- },
2183
- {
2184
- "path": [
2185
- "theme",
2186
- "dark",
2187
- "palette",
2188
- "primary",
2189
- "icon"
2190
- ],
2191
- "value": "#8FE3E8",
2192
- "description": "Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states"
2193
- },
2194
- {
2195
- "path": [
2196
- "theme",
2197
- "dark",
2198
- "palette",
2199
- "primary",
2200
- "bg",
2201
- "weak"
2202
- ],
2203
- "value": "#262F31",
2204
- "description": "Used as a light primary background and usually in combination with Primary-text,icon. Components include banners, semi-filled labels, drag & drops and filled tabs"
2205
- },
2206
- {
2207
- "path": [
2208
- "theme",
2209
- "dark",
2210
- "palette",
2211
- "primary",
2212
- "bg",
2213
- "strong"
2214
- ],
2215
- "value": "#8FE3E8",
2216
- "description": "Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors"
2217
- },
2218
- {
2219
- "path": [
2220
- "theme",
2221
- "dark",
2222
- "palette",
2223
- "primary",
2224
- "bg",
2225
- "status"
2226
- ],
2227
- "value": "#8FE3E8"
2228
- },
2229
- {
2230
- "path": [
2231
- "theme",
2232
- "dark",
2233
- "palette",
2234
- "primary",
2235
- "bg",
2236
- "selected"
2237
- ],
2238
- "value": "#262F31"
2239
- },
2240
- {
2241
- "path": [
2242
- "theme",
2243
- "dark",
2244
- "palette",
2245
- "primary",
2246
- "border",
2247
- "strong"
2248
- ],
2249
- "value": "#8FE3E8",
2250
- "description": "Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard"
2251
- },
2252
- {
2253
- "path": [
2254
- "theme",
2255
- "dark",
2256
- "palette",
2257
- "primary",
2258
- "border",
2259
- "weak"
2260
- ],
2261
- "value": "#02507B",
2262
- "description": "Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background"
2263
- },
2264
- {
2265
- "path": [
2266
- "theme",
2267
- "dark",
2268
- "palette",
2269
- "primary",
2270
- "focus"
2271
- ],
2272
- "value": "#5DB3BF",
2273
- "description": "Used for all focused states"
2274
- },
2275
- {
2276
- "path": [
2277
- "theme",
2278
- "dark",
2279
- "palette",
2280
- "primary",
2281
- "hover",
2282
- "weak"
2283
- ],
2284
- "value": "#8FE3E8",
2285
- "description": "Used for hover states where the background is either transparent or use Neutral-bg-weak"
2286
- },
2287
- {
2288
- "path": [
2289
- "theme",
2290
- "dark",
2291
- "palette",
2292
- "primary",
2293
- "hover",
2294
- "strong"
2295
- ],
2296
- "value": "#5DB3BF",
2297
- "description": "Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
2298
- },
2299
- {
2300
- "path": [
2301
- "theme",
2302
- "dark",
2303
- "palette",
2304
- "primary",
2305
- "pressed",
2306
- "weak"
2307
- ],
2308
- "value": "#8FE3E8",
2309
- "description": "Used for pressed states where the background is either transparent or use Neutral-bg-weak"
2310
- },
2311
- {
2312
- "path": [
2313
- "theme",
2314
- "dark",
2315
- "palette",
2316
- "primary",
2317
- "pressed",
2318
- "strong"
2319
- ],
2320
- "value": "#4C99A4",
2321
- "description": "Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
2322
- },
2323
- {
2324
- "path": [
2325
- "theme",
2326
- "dark",
2327
- "palette",
2328
- "danger",
2329
- "text"
2330
- ],
2331
- "value": "#FFAA97",
2332
- "description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
2333
- },
2334
- {
2335
- "path": [
2336
- "theme",
2337
- "dark",
2338
- "palette",
2339
- "danger",
2340
- "icon"
2341
- ],
2342
- "value": "#FFAA97",
2343
- "description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
2344
- },
2345
- {
2346
- "path": [
2347
- "theme",
2348
- "dark",
2349
- "palette",
2350
- "danger",
2351
- "bg",
2352
- "strong"
2353
- ],
2354
- "value": "#FFAA97",
2355
- "description": "Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states"
2356
- },
2357
- {
2358
- "path": [
2359
- "theme",
2360
- "dark",
2361
- "palette",
2362
- "danger",
2363
- "bg",
2364
- "weak"
2365
- ],
2366
- "value": "#432520",
2367
- "description": "Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags"
2368
- },
2369
- {
2370
- "path": [
2371
- "theme",
2372
- "dark",
2373
- "palette",
2374
- "danger",
2375
- "bg",
2376
- "status"
2377
- ],
2378
- "value": "#FFAA97"
2379
- },
2380
- {
2381
- "path": [
2382
- "theme",
2383
- "dark",
2384
- "palette",
2385
- "danger",
2386
- "border",
2387
- "strong"
2388
- ],
2389
- "value": "#FFAA97",
2390
- "description": "Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels"
2391
- },
2392
- {
2393
- "path": [
2394
- "theme",
2395
- "dark",
2396
- "palette",
2397
- "danger",
2398
- "border",
2399
- "weak"
2400
- ],
2401
- "value": "#730E00",
2402
- "description": "Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background"
2403
- },
2404
- {
2405
- "path": [
2406
- "theme",
2407
- "dark",
2408
- "palette",
2409
- "danger",
2410
- "hover",
2411
- "weak"
2412
- ],
2413
- "value": "#FFAA97",
2414
- "description": "Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak"
2415
- },
2416
- {
2417
- "path": [
2418
- "theme",
2419
- "dark",
2420
- "palette",
2421
- "danger",
2422
- "hover",
2423
- "strong"
2424
- ],
2425
- "value": "#F96746",
2426
- "description": "Only used for hover states in critical filled buttons"
2427
- },
2428
- {
2429
- "path": [
2430
- "theme",
2431
- "dark",
2432
- "palette",
2433
- "danger",
2434
- "pressed",
2435
- "weak"
2436
- ],
2437
- "value": "#FFAA97",
2438
- "description": "Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak"
2439
- },
2440
- {
2441
- "path": [
2442
- "theme",
2443
- "dark",
2444
- "palette",
2445
- "danger",
2446
- "pressed",
2447
- "strong"
2448
- ],
2449
- "value": "#E84E2C",
2450
- "description": "Only used for pressed states in critical filled buttons"
2451
- },
2452
- {
2453
- "path": [
2454
- "theme",
2455
- "dark",
2456
- "palette",
2457
- "warning",
2458
- "text"
2459
- ],
2460
- "value": "#FFD600",
2461
- "description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
2462
- },
2463
- {
2464
- "path": [
2465
- "theme",
2466
- "dark",
2467
- "palette",
2468
- "warning",
2469
- "icon"
2470
- ],
2471
- "value": "#FFD600",
2472
- "description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
2473
- },
2474
- {
2475
- "path": [
2476
- "theme",
2477
- "dark",
2478
- "palette",
2479
- "warning",
2480
- "bg",
2481
- "strong"
2482
- ],
2483
- "value": "#FFD600",
2484
- "description": "Use sparsely. Only used for filled labels"
2485
- },
2486
- {
2487
- "path": [
2488
- "theme",
2489
- "dark",
2490
- "palette",
2491
- "warning",
2492
- "bg",
2493
- "weak"
2494
- ],
2495
- "value": "#312E1A",
2496
- "description": "Used as backgrounds for warning components states such as banner and semi-filled labels"
2497
- },
2498
- {
2499
- "path": [
2500
- "theme",
2501
- "dark",
2502
- "palette",
2503
- "warning",
2504
- "bg",
2505
- "status"
2506
- ],
2507
- "value": "#FFD600"
2508
- },
2509
- {
2510
- "path": [
2511
- "theme",
2512
- "dark",
2513
- "palette",
2514
- "warning",
2515
- "border",
2516
- "strong"
2517
- ],
2518
- "value": "#FFD600",
2519
- "description": "Use sparsely. Only used for outlined labels"
2520
- },
2521
- {
2522
- "path": [
2523
- "theme",
2524
- "dark",
2525
- "palette",
2526
- "warning",
2527
- "border",
2528
- "weak"
2529
- ],
2530
- "value": "#765500",
2531
- "description": "Use sparsely. Mainly used in combination with elements that use the Warning-bg-weak to stand out more from the background"
2532
- },
2533
- {
2534
- "path": [
2535
- "theme",
2536
- "dark",
2537
- "palette",
2538
- "success",
2539
- "text"
2540
- ],
2541
- "value": "#90CB62",
2542
- "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
2543
- },
2544
- {
2545
- "path": [
2546
- "theme",
2547
- "dark",
2548
- "palette",
2549
- "success",
2550
- "icon"
2551
- ],
2552
- "value": "#90CB62",
2553
- "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
2554
- },
2555
- {
2556
- "path": [
2557
- "theme",
2558
- "dark",
2559
- "palette",
2560
- "success",
2561
- "bg",
2562
- "strong"
2563
- ],
2564
- "value": "#90CB62",
2565
- "description": "Use sparsely. Only used for filled labels"
2566
- },
2567
- {
2568
- "path": [
2569
- "theme",
2570
- "dark",
2571
- "palette",
2572
- "success",
2573
- "bg",
2574
- "weak"
2575
- ],
2576
- "value": "#262D24",
2577
- "description": "Used as backgrounds for success components states such as banner and semi-filled labels"
2578
- },
2579
- {
2580
- "path": [
2581
- "theme",
2582
- "dark",
2583
- "palette",
2584
- "success",
2585
- "bg",
2586
- "status"
2587
- ],
2588
- "value": "#90CB62"
2589
- },
2590
- {
2591
- "path": [
2592
- "theme",
2593
- "dark",
2594
- "palette",
2595
- "success",
2596
- "border",
2597
- "strong"
2598
- ],
2599
- "value": "#90CB62",
2600
- "description": "Use sparsely. Only used for outlined labels"
2601
- },
2602
- {
2603
- "path": [
2604
- "theme",
2605
- "dark",
2606
- "palette",
2607
- "success",
2608
- "border",
2609
- "weak"
2610
- ],
2611
- "value": "#296127",
2612
- "description": "Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background"
2613
- },
2614
- {
2615
- "path": [
2616
- "theme",
2617
- "dark",
2618
- "palette",
2619
- "discovery",
2620
- "text"
2621
- ],
2622
- "value": "#CCB4FF",
2623
- "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
2624
- },
2625
- {
2626
- "path": [
2627
- "theme",
2628
- "dark",
2629
- "palette",
2630
- "discovery",
2631
- "icon"
2632
- ],
2633
- "value": "#CCB4FF",
2634
- "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
2635
- },
2636
- {
2637
- "path": [
2638
- "theme",
2639
- "dark",
2640
- "palette",
2641
- "discovery",
2642
- "bg",
2643
- "strong"
2644
- ],
2645
- "value": "#CCB4FF",
2646
- "description": "Use sparsely. Only used for filled labels"
2647
- },
2648
- {
2649
- "path": [
2650
- "theme",
2651
- "dark",
2652
- "palette",
2653
- "discovery",
2654
- "bg",
2655
- "weak"
2656
- ],
2657
- "value": "#2C2A34",
2658
- "description": "Used as backgrounds for success components states such as banner and semi-filled labels"
2659
- },
2660
- {
2661
- "path": [
2662
- "theme",
2663
- "dark",
2664
- "palette",
2665
- "discovery",
2666
- "bg",
2667
- "status"
2668
- ],
2669
- "value": "#CCB4FF"
2670
- },
2671
- {
2672
- "path": [
2673
- "theme",
2674
- "dark",
2675
- "palette",
2676
- "discovery",
2677
- "border",
2678
- "strong"
2679
- ],
2680
- "value": "#CCB4FF",
2681
- "description": "Use sparsely. Only used for outlined labels"
2682
- },
2683
- {
2684
- "path": [
2685
- "theme",
2686
- "dark",
2687
- "palette",
2688
- "discovery",
2689
- "border",
2690
- "weak"
2691
- ],
2692
- "value": "#4B2894",
2693
- "description": "Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background"
2694
- }
2695
- ],
2696
- "theme-light-shadow": [
2697
- {
2698
- "path": [
2699
- "theme",
2700
- "light",
2701
- "boxShadow",
2702
- "raised"
2703
- ],
2704
- "value": "0px 1px 2px 0px rgba(26, 27, 29, 0.18)",
2705
- "description": "Used for small components that need sharper shadows to illustrate elevation."
2706
- },
2707
- {
2708
- "path": [
2709
- "theme",
2710
- "light",
2711
- "boxShadow",
2712
- "overlay"
2713
- ],
2714
- "value": "0px 4px 8px 0px rgba(26, 27, 29, 0.12)",
2715
- "description": "Used for most mid/large sized components with floating states. Components include banner, button, card, drop down, progress bar and view selector"
2716
- }
2717
- ],
2718
- "theme-light-palette": [
2719
- {
2720
- "path": [
2721
- "theme",
2722
- "light",
2723
- "palette",
2724
- "neutral",
2725
- "text",
2726
- "weakest"
2727
- ],
2728
- "value": "#A8ACB2",
2729
- "description": "Should be used mainly for disabled text"
2730
- },
2731
- {
2732
- "path": [
2733
- "theme",
2734
- "light",
2735
- "palette",
2736
- "neutral",
2737
- "text",
2738
- "weaker"
2739
- ],
2740
- "value": "#5E636A",
2741
- "description": "Should be used sparsely and mainly for headers and subtitles to differentiate from input text"
2742
- },
2743
- {
2744
- "path": [
2745
- "theme",
2746
- "light",
2747
- "palette",
2748
- "neutral",
2749
- "text",
2750
- "weak"
2751
- ],
2752
- "value": "#4D5157",
2753
- "description": "Used for labels, icon color and descriptions"
2754
- },
2755
- {
2756
- "path": [
2757
- "theme",
2758
- "light",
2759
- "palette",
2760
- "neutral",
2761
- "text",
2762
- "default"
2763
- ],
2764
- "value": "#1A1B1D",
2765
- "description": "Used for all default text"
2766
- },
2767
- {
2768
- "path": [
2769
- "theme",
2770
- "light",
2771
- "palette",
2772
- "neutral",
2773
- "text",
2774
- "inverse"
2775
- ],
2776
- "value": "#FFFFFF",
2777
- "description": "Default text on neutral-bg-strongest or other dark backgrounds"
2778
- },
2779
- {
2780
- "path": [
2781
- "theme",
2782
- "light",
2783
- "palette",
2784
- "neutral",
2785
- "icon"
2786
- ],
2787
- "value": "#4D5157",
2788
- "description": "Used as a default neutral icon color"
2789
- },
2790
- {
2791
- "path": [
2792
- "theme",
2793
- "light",
2794
- "palette",
2795
- "neutral",
2796
- "bg",
2797
- "weak"
2798
- ],
2799
- "value": "#FFFFFF",
2800
- "description": "Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default"
2801
- },
2802
- {
2803
- "path": [
2804
- "theme",
2805
- "light",
2806
- "palette",
2807
- "neutral",
2808
- "bg",
2809
- "default"
2810
- ],
2811
- "value": "#F5F6F6",
2812
- "description": "Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak"
2813
- },
2814
- {
2815
- "path": [
2816
- "theme",
2817
- "light",
2818
- "palette",
2819
- "neutral",
2820
- "bg",
2821
- "on-bg-weak"
2822
- ],
2823
- "value": "#F5F6F6"
2824
- },
2825
- {
2826
- "path": [
2827
- "theme",
2828
- "light",
2829
- "palette",
2830
- "neutral",
2831
- "bg",
2832
- "strong"
2833
- ],
2834
- "value": "#E2E3E5",
2835
- "description": "Use sparsely, mainly included in some component states"
2836
- },
2837
- {
2838
- "path": [
2839
- "theme",
2840
- "light",
2841
- "palette",
2842
- "neutral",
2843
- "bg",
2844
- "stronger"
2845
- ],
2846
- "value": "#A8ACB2",
2847
- "description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout"
2848
- },
2849
- {
2850
- "path": [
2851
- "theme",
2852
- "light",
2853
- "palette",
2854
- "neutral",
2855
- "bg",
2856
- "strongest"
2857
- ],
2858
- "value": "#3C3F44",
2859
- "description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout"
2860
- },
2861
- {
2862
- "path": [
2863
- "theme",
2864
- "light",
2865
- "palette",
2866
- "neutral",
2867
- "bg",
2868
- "status"
2869
- ],
2870
- "value": "#A8ACB2"
2871
- },
2872
- {
2873
- "path": [
2874
- "theme",
2875
- "light",
2876
- "palette",
2877
- "neutral",
2878
- "border",
2879
- "weak"
2880
- ],
2881
- "value": "#E2E3E5",
2882
- "description": "Used for light borders such as dividers and tables as well as some components such as context menu and code block to make them stand out more from the background"
2883
- },
2884
- {
2885
- "path": [
2886
- "theme",
2887
- "light",
2888
- "palette",
2889
- "neutral",
2890
- "border",
2891
- "strong"
2892
- ],
2893
- "value": "#BBBEC3",
2894
- "description": "Used for components that are outlined and need to stand out such as text fields, search fields, drop-downs, buttons, checkboxes and radio buttons"
2895
- },
2896
- {
2897
- "path": [
2898
- "theme",
2899
- "light",
2900
- "palette",
2901
- "neutral",
2902
- "border",
2903
- "strongest"
2904
- ],
2905
- "value": "#6F757E"
2906
- },
2907
- {
2908
- "path": [
2909
- "theme",
2910
- "light",
2911
- "palette",
2912
- "neutral",
2913
- "hover"
2914
- ],
2915
- "value": "#6F757E",
2916
- "description": "Used for neutral hover states on components"
2917
- },
2918
- {
2919
- "path": [
2920
- "theme",
2921
- "light",
2922
- "palette",
2923
- "neutral",
2924
- "pressed"
2925
- ],
2926
- "value": "#6F757E",
2927
- "description": "Used for neutral pressed states on components"
2928
- },
2929
- {
2930
- "path": [
2931
- "theme",
2932
- "light",
2933
- "palette",
2934
- "primary",
2935
- "text"
2936
- ],
2937
- "value": "#0A6190",
2938
- "description": "Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states"
2939
- },
2940
- {
2941
- "path": [
2942
- "theme",
2943
- "light",
2944
- "palette",
2945
- "primary",
2946
- "icon"
2947
- ],
2948
- "value": "#0A6190",
2949
- "description": "Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states"
2950
- },
2951
- {
2952
- "path": [
2953
- "theme",
2954
- "light",
2955
- "palette",
2956
- "primary",
2957
- "bg",
2958
- "weak"
2959
- ],
2960
- "value": "#E7FAFB",
2961
- "description": "Used as a light primary background and usually in combination with Primary-text,icon. Components include banners, semi-filled labels, drag & drops and filled tabs"
2962
- },
2963
- {
2964
- "path": [
2965
- "theme",
2966
- "light",
2967
- "palette",
2968
- "primary",
2969
- "bg",
2970
- "strong"
2971
- ],
2972
- "value": "#0A6190",
2973
- "description": "Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors"
2974
- },
2975
- {
2976
- "path": [
2977
- "theme",
2978
- "light",
2979
- "palette",
2980
- "primary",
2981
- "bg",
2982
- "status"
2983
- ],
2984
- "value": "#4C99A4"
2985
- },
2986
- {
2987
- "path": [
2988
- "theme",
2989
- "light",
2990
- "palette",
2991
- "primary",
2992
- "bg",
2993
- "selected"
2994
- ],
2995
- "value": "#E7FAFB"
2996
- },
2997
- {
2998
- "path": [
2999
- "theme",
3000
- "light",
3001
- "palette",
3002
- "primary",
3003
- "border",
3004
- "strong"
3005
- ],
3006
- "value": "#0A6190",
3007
- "description": "Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard"
3008
- },
3009
- {
3010
- "path": [
3011
- "theme",
3012
- "light",
3013
- "palette",
3014
- "primary",
3015
- "border",
3016
- "weak"
3017
- ],
3018
- "value": "#8FE3E8",
3019
- "description": "Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background"
3020
- },
3021
- {
3022
- "path": [
3023
- "theme",
3024
- "light",
3025
- "palette",
3026
- "primary",
3027
- "focus"
3028
- ],
3029
- "value": "#30839D",
3030
- "description": "Used for all focused states"
3031
- },
3032
- {
3033
- "path": [
3034
- "theme",
3035
- "light",
3036
- "palette",
3037
- "primary",
3038
- "hover",
3039
- "weak"
3040
- ],
3041
- "value": "#30839D",
3042
- "description": "Used for hover states where the background is either transparent or use Neutral-bg-weak"
3043
- },
3044
- {
3045
- "path": [
3046
- "theme",
3047
- "light",
3048
- "palette",
3049
- "primary",
3050
- "hover",
3051
- "strong"
3052
- ],
3053
- "value": "#02507B",
3054
- "description": "Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
3055
- },
3056
- {
3057
- "path": [
3058
- "theme",
3059
- "light",
3060
- "palette",
3061
- "primary",
3062
- "pressed",
3063
- "weak"
3064
- ],
3065
- "value": "#30839D",
3066
- "description": "Used for pressed states where the background is either transparent or use Neutral-bg-weak"
3067
- },
3068
- {
3069
- "path": [
3070
- "theme",
3071
- "light",
3072
- "palette",
3073
- "primary",
3074
- "pressed",
3075
- "strong"
3076
- ],
3077
- "value": "#014063",
3078
- "description": "Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
3079
- },
3080
- {
3081
- "path": [
3082
- "theme",
3083
- "light",
3084
- "palette",
3085
- "danger",
3086
- "text"
3087
- ],
3088
- "value": "#BB2D00",
3089
- "description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
3090
- },
3091
- {
3092
- "path": [
3093
- "theme",
3094
- "light",
3095
- "palette",
3096
- "danger",
3097
- "icon"
3098
- ],
3099
- "value": "#BB2D00",
3100
- "description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
3101
- },
3102
- {
3103
- "path": [
3104
- "theme",
3105
- "light",
3106
- "palette",
3107
- "danger",
3108
- "bg",
3109
- "strong"
3110
- ],
3111
- "value": "#BB2D00",
3112
- "description": "Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states"
3113
- },
3114
- {
3115
- "path": [
3116
- "theme",
3117
- "light",
3118
- "palette",
3119
- "danger",
3120
- "bg",
3121
- "weak"
3122
- ],
3123
- "value": "#FFE9E7",
3124
- "description": "Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags"
3125
- },
3126
- {
3127
- "path": [
3128
- "theme",
3129
- "light",
3130
- "palette",
3131
- "danger",
3132
- "bg",
3133
- "status"
3134
- ],
3135
- "value": "#E84E2C"
3136
- },
3137
- {
3138
- "path": [
3139
- "theme",
3140
- "light",
3141
- "palette",
3142
- "danger",
3143
- "border",
3144
- "strong"
3145
- ],
3146
- "value": "#BB2D00",
3147
- "description": "Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels"
3148
- },
3149
- {
3150
- "path": [
3151
- "theme",
3152
- "light",
3153
- "palette",
3154
- "danger",
3155
- "border",
3156
- "weak"
3157
- ],
3158
- "value": "#FFAA97",
3159
- "description": "Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background"
3160
- },
3161
- {
3162
- "path": [
3163
- "theme",
3164
- "light",
3165
- "palette",
3166
- "danger",
3167
- "hover",
3168
- "weak"
3169
- ],
3170
- "value": "#D43300",
3171
- "description": "Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak"
3172
- },
3173
- {
3174
- "path": [
3175
- "theme",
3176
- "light",
3177
- "palette",
3178
- "danger",
3179
- "hover",
3180
- "strong"
3181
- ],
3182
- "value": "#961200",
3183
- "description": "Only used for hover states in critical filled buttons"
3184
- },
3185
- {
3186
- "path": [
3187
- "theme",
3188
- "light",
3189
- "palette",
3190
- "danger",
3191
- "pressed",
3192
- "weak"
3193
- ],
3194
- "value": "#D43300",
3195
- "description": "Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak"
3196
- },
3197
- {
3198
- "path": [
3199
- "theme",
3200
- "light",
3201
- "palette",
3202
- "danger",
3203
- "pressed",
3204
- "strong"
3205
- ],
3206
- "value": "#730E00",
3207
- "description": "Only used for pressed states in critical filled buttons"
3208
- },
3209
- {
3210
- "path": [
3211
- "theme",
3212
- "light",
3213
- "palette",
3214
- "warning",
3215
- "text"
3216
- ],
3217
- "value": "#765500",
3218
- "description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
3219
- },
3220
- {
3221
- "path": [
3222
- "theme",
3223
- "light",
3224
- "palette",
3225
- "warning",
3226
- "icon"
3227
- ],
3228
- "value": "#765500",
3229
- "description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
3230
- },
3231
- {
3232
- "path": [
3233
- "theme",
3234
- "light",
3235
- "palette",
3236
- "warning",
3237
- "bg",
3238
- "strong"
3239
- ],
3240
- "value": "#765500",
3241
- "description": "Use sparsely. Only used for filled labels"
3242
- },
3243
- {
3244
- "path": [
3245
- "theme",
3246
- "light",
3247
- "palette",
3248
- "warning",
3249
- "bg",
3250
- "weak"
3251
- ],
3252
- "value": "#FFFAD1",
3253
- "description": "Used as backgrounds for warning components states such as banner and semi-filled labels"
3254
- },
3255
- {
3256
- "path": [
3257
- "theme",
3258
- "light",
3259
- "palette",
3260
- "warning",
3261
- "bg",
3262
- "status"
3263
- ],
3264
- "value": "#D7AA0A"
3265
- },
3266
- {
3267
- "path": [
3268
- "theme",
3269
- "light",
3270
- "palette",
3271
- "warning",
3272
- "border",
3273
- "strong"
3274
- ],
3275
- "value": "#996E00",
3276
- "description": "Use sparsely. Only used for outlined labels"
3277
- },
3278
- {
3279
- "path": [
3280
- "theme",
3281
- "light",
3282
- "palette",
3283
- "warning",
3284
- "border",
3285
- "weak"
3286
- ],
3287
- "value": "#FFD600",
3288
- "description": "Use sparsely. Mainly used in combination with elements that use the Warning-bg-weak to stand out more from the background"
3289
- },
3290
- {
3291
- "path": [
3292
- "theme",
3293
- "light",
3294
- "palette",
3295
- "success",
3296
- "text"
3297
- ],
3298
- "value": "#3F7824",
3299
- "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
3300
- },
3301
- {
3302
- "path": [
3303
- "theme",
3304
- "light",
3305
- "palette",
3306
- "success",
3307
- "icon"
3308
- ],
3309
- "value": "#3F7824",
3310
- "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
3311
- },
3312
- {
3313
- "path": [
3314
- "theme",
3315
- "light",
3316
- "palette",
3317
- "success",
3318
- "bg",
3319
- "strong"
3320
- ],
3321
- "value": "#3F7824",
3322
- "description": "Use sparsely. Only used for filled labels"
3323
- },
3324
- {
3325
- "path": [
3326
- "theme",
3327
- "light",
3328
- "palette",
3329
- "success",
3330
- "bg",
3331
- "weak"
3332
- ],
3333
- "value": "#E7FCD7",
3334
- "description": "Used as backgrounds for success components states such as banner and semi-filled labels"
3335
- },
3336
- {
3337
- "path": [
3338
- "theme",
3339
- "light",
3340
- "palette",
3341
- "success",
3342
- "bg",
3343
- "status"
3344
- ],
3345
- "value": "#5B992B"
3346
- },
3347
- {
3348
- "path": [
3349
- "theme",
3350
- "light",
3351
- "palette",
3352
- "success",
3353
- "border",
3354
- "strong"
3355
- ],
3356
- "value": "#3F7824",
3357
- "description": "Use sparsely. Only used for outlined labels"
3358
- },
3359
- {
3360
- "path": [
3361
- "theme",
3362
- "light",
3363
- "palette",
3364
- "success",
3365
- "border",
3366
- "weak"
3367
- ],
3368
- "value": "#90CB62",
3369
- "description": "Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background"
3370
- },
3371
- {
3372
- "path": [
3373
- "theme",
3374
- "light",
3375
- "palette",
3376
- "discovery",
3377
- "text"
3378
- ],
3379
- "value": "#5A34AA",
3380
- "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
3381
- },
3382
- {
3383
- "path": [
3384
- "theme",
3385
- "light",
3386
- "palette",
3387
- "discovery",
3388
- "icon"
3389
- ],
3390
- "value": "#5A34AA",
3391
- "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
3392
- },
3393
- {
3394
- "path": [
3395
- "theme",
3396
- "light",
3397
- "palette",
3398
- "discovery",
3399
- "bg",
3400
- "strong"
3401
- ],
3402
- "value": "#5A34AA",
3403
- "description": "Use sparsely. Only used for filled labels"
3404
- },
3405
- {
3406
- "path": [
3407
- "theme",
3408
- "light",
3409
- "palette",
3410
- "discovery",
3411
- "bg",
3412
- "weak"
3413
- ],
3414
- "value": "#E9DEFF",
3415
- "description": "Used as backgrounds for success components states such as banner and semi-filled labels"
3416
- },
3417
- {
3418
- "path": [
3419
- "theme",
3420
- "light",
3421
- "palette",
3422
- "discovery",
3423
- "bg",
3424
- "status"
3425
- ],
3426
- "value": "#754EC8"
3427
- },
3428
- {
3429
- "path": [
3430
- "theme",
3431
- "light",
3432
- "palette",
3433
- "discovery",
3434
- "border",
3435
- "strong"
3436
- ],
3437
- "value": "#5A34AA",
3438
- "description": "Use sparsely. Only used for outlined labels"
3439
- },
3440
- {
3441
- "path": [
3442
- "theme",
3443
- "light",
3444
- "palette",
3445
- "discovery",
3446
- "border",
3447
- "weak"
3448
- ],
3449
- "value": "#B38EFF",
3450
- "description": "Use sparsely. Mainly used in combination with elements that use the discovery-bg-weak to stand out more from the background"
3451
- }
3452
- ],
3453
- "font": [
3454
- {
3455
- "path": [
3456
- "font",
3457
- "size",
3458
- "h1"
3459
- ],
3460
- "value": "3rem",
3461
- "description": "Do not use, mainly for web"
3462
- },
3463
- {
3464
- "path": [
3465
- "font",
3466
- "size",
3467
- "h2"
3468
- ],
3469
- "value": "2.5rem",
3470
- "description": "Use for page headers"
3471
- },
3472
- {
3473
- "path": [
3474
- "font",
3475
- "size",
3476
- "h3"
3477
- ],
3478
- "value": "1.875rem",
3479
- "description": "Use cautiously. Used for larger container header such as login screen and dialogs"
3480
- },
3481
- {
3482
- "path": [
3483
- "font",
3484
- "size",
3485
- "h4"
3486
- ],
3487
- "value": "1.5rem",
3488
- "description": "Use cautiously. Not used in any components"
3489
- },
3490
- {
3491
- "path": [
3492
- "font",
3493
- "size",
3494
- "h5"
3495
- ],
3496
- "value": "1.25rem",
3497
- "description": "Used for larger containers such as drag & drop and drawer. Use instead of H3 if you want a more compact layout with less spacing and padding inside the container"
3498
- },
3499
- {
3500
- "path": [
3501
- "font",
3502
- "size",
3503
- "h6"
3504
- ],
3505
- "value": "1rem",
3506
- "description": "Common smaller header. Used in banner, buttons, context menu, widget and wizard"
3507
- },
3508
- {
3509
- "path": [
3510
- "font",
3511
- "size",
3512
- "subheading-large"
3513
- ],
3514
- "value": "1.25rem",
3515
- "description": "Pair with larger headers. Not used in any components"
3516
- },
3517
- {
3518
- "path": [
3519
- "font",
3520
- "size",
3521
- "subheading-medium"
3522
- ],
3523
- "value": "1rem",
3524
- "description": "Use with medium sized headers or as a header of its own. Is used as header in smaller components and as a selected state to differentiate from body text. Is used in view selector, tabs and code block"
3525
- },
3526
- {
3527
- "path": [
3528
- "font",
3529
- "size",
3530
- "subheading-small"
3531
- ],
3532
- "value": "0.875rem",
3533
- "description": "Use cautiously. Not used in any components"
3534
- },
3535
- {
3536
- "path": [
3537
- "font",
3538
- "size",
3539
- "body-large"
3540
- ],
3541
- "value": "1rem",
3542
- "description": "Use cautiously. Mainly used as the base font in web experiences. Can be used when wanting to create a subtle hierarchy such as in tables, dialogs. Is also used in some components where we provide a size “large”"
3543
- },
3544
- {
3545
- "path": [
3546
- "font",
3547
- "size",
3548
- "body-medium"
3549
- ],
3550
- "value": "0.875rem",
3551
- "description": "This is the base font and should be used as much as possible"
3552
- },
3553
- {
3554
- "path": [
3555
- "font",
3556
- "size",
3557
- "body-small"
3558
- ],
3559
- "value": "0.75rem",
3560
- "description": "Smallest accessible font. Use when having little space or crowded layouts.Examples include charts (widgets) and help texts"
3561
- },
3562
- {
3563
- "path": [
3564
- "font",
3565
- "size",
3566
- "code"
3567
- ],
3568
- "value": "0.875rem",
3569
- "description": "Base font for code. Uses the same font size as the base font for regular text (body/medium)"
3570
- },
3571
- {
3572
- "path": [
3573
- "font",
3574
- "size",
3575
- "label"
3576
- ],
3577
- "value": "0.875rem",
3578
- "description": "Mainly used for the label component but can also be used when needing a bold label inside a small component or space"
3579
- },
3580
- {
3581
- "path": [
3582
- "font",
3583
- "weight",
3584
- "bold"
3585
- ],
3586
- "value": "700"
3587
- },
3588
- {
3589
- "path": [
3590
- "font",
3591
- "weight",
3592
- "semibold"
3593
- ],
3594
- "value": "600"
3595
- },
3596
- {
3597
- "path": [
3598
- "font",
3599
- "weight",
3600
- "normal"
3601
- ],
3602
- "value": "400"
3603
- },
3604
- {
3605
- "path": [
3606
- "font",
3607
- "weight",
3608
- "medium"
3609
- ],
3610
- "value": "500"
3611
- },
3612
- {
3613
- "path": [
3614
- "font",
3615
- "weight",
3616
- "light"
3617
- ],
3618
- "value": "300"
3619
- },
3620
- {
3621
- "path": [
3622
- "font",
3623
- "font-family",
3624
- "h1"
3625
- ],
3626
- "value": "Syne Neo",
3627
- "description": "Do not use, mainly for web"
3628
- },
3629
- {
3630
- "path": [
3631
- "font",
3632
- "font-family",
3633
- "h2"
3634
- ],
3635
- "value": "Syne Neo",
3636
- "description": "Use for page headers"
3637
- },
3638
- {
3639
- "path": [
3640
- "font",
3641
- "font-family",
3642
- "h3"
3643
- ],
3644
- "value": "Public Sans",
3645
- "description": "Use cautiously. Used for larger container header such as login screen and dialogs"
3646
- },
3647
- {
3648
- "path": [
3649
- "font",
3650
- "font-family",
3651
- "h4"
3652
- ],
3653
- "value": "Public Sans",
3654
- "description": "Use cautiously. Not used in any components"
3655
- },
3656
- {
3657
- "path": [
3658
- "font",
3659
- "font-family",
3660
- "h5"
3661
- ],
3662
- "value": "Public Sans",
3663
- "description": "Used for larger containers such as drag & drop and drawer. Use instead of H3 if you want a more compact layout with less spacing and padding inside the container"
3664
- },
3665
- {
3666
- "path": [
3667
- "font",
3668
- "font-family",
3669
- "h6"
3670
- ],
3671
- "value": "Public Sans",
3672
- "description": "Common smaller header. Used in banner, buttons, context menu, widget and wizard"
3673
- },
3674
- {
3675
- "path": [
3676
- "font",
3677
- "font-family",
3678
- "subheading-large"
3679
- ],
3680
- "value": "Public Sans",
3681
- "description": "Pair with larger headers. Not used in any components"
3682
- },
3683
- {
3684
- "path": [
3685
- "font",
3686
- "font-family",
3687
- "subheading-medium"
3688
- ],
3689
- "value": "Public Sans",
3690
- "description": "Use with medium sized headers or as a header of its own. Is used as header in smaller components and as a selected state to differentiate from body text. Is used in view selector, tabs and code block"
3691
- },
3692
- {
3693
- "path": [
3694
- "font",
3695
- "font-family",
3696
- "subheading-small"
3697
- ],
3698
- "value": "Public Sans",
3699
- "description": "Use cautiously. Not used in any components"
3700
- },
3701
- {
3702
- "path": [
3703
- "font",
3704
- "font-family",
3705
- "body-large"
3706
- ],
3707
- "value": "Public Sans",
3708
- "description": "Use cautiously. Mainly used as the base font in web experiences. Can be used when wanting to create a subtle hierarchy such as in tables, dialogs. Is also used in some components where we provide a size “large”"
3709
- },
3710
- {
3711
- "path": [
3712
- "font",
3713
- "font-family",
3714
- "body-medium"
3715
- ],
3716
- "value": "Public Sans",
3717
- "description": "This is the base font and should be used as much as possible"
3718
- },
3719
- {
3720
- "path": [
3721
- "font",
3722
- "font-family",
3723
- "body-small"
3724
- ],
3725
- "value": "Public Sans",
3726
- "description": "Smallest accessible font. Use when having little space or crowded layouts.Examples include charts (widgets) and help texts"
3727
- },
3728
- {
3729
- "path": [
3730
- "font",
3731
- "font-family",
3732
- "code"
3733
- ],
3734
- "value": "Fira Code",
3735
- "description": "Base font for code. Uses the same font size as the base font for regular text (body/medium)"
3736
- },
3737
- {
3738
- "path": [
3739
- "font",
3740
- "font-family",
3741
- "label"
3742
- ],
3743
- "value": "Public Sans",
3744
- "description": "Mainly used for the label component but can also be used when needing a bold label inside a small component or space"
3745
- }
3746
- ],
3747
- "space": [
3748
- {
3749
- "path": [
3750
- "space",
3751
- "0"
3752
- ],
3753
- "value": "0px"
3754
- },
3755
- {
3756
- "path": [
3757
- "space",
3758
- "1"
3759
- ],
3760
- "value": "1px"
3761
- },
3762
- {
3763
- "path": [
3764
- "space",
3765
- "2"
3766
- ],
3767
- "value": "2px"
3768
- },
3769
- {
3770
- "path": [
3771
- "space",
3772
- "3"
3773
- ],
3774
- "value": "4px"
3775
- },
3776
- {
3777
- "path": [
3778
- "space",
3779
- "4"
3780
- ],
3781
- "value": "8px"
3782
- },
3783
- {
3784
- "path": [
3785
- "space",
3786
- "5"
3787
- ],
3788
- "value": "12px"
3789
- },
3790
- {
3791
- "path": [
3792
- "space",
3793
- "6"
3794
- ],
3795
- "value": "16px"
3796
- },
3797
- {
3798
- "path": [
3799
- "space",
3800
- "7"
3801
- ],
3802
- "value": "24px"
3803
- },
3804
- {
3805
- "path": [
3806
- "space",
3807
- "8"
3808
- ],
3809
- "value": "32px"
3810
- },
3811
- {
3812
- "path": [
3813
- "space",
3814
- "9"
3815
- ],
3816
- "value": "48px"
3817
- },
3818
- {
3819
- "path": [
3820
- "space",
3821
- "10"
3822
- ],
3823
- "value": "64px"
3824
- },
3825
- {
3826
- "path": [
3827
- "space",
3828
- "11"
3829
- ],
3830
- "value": "96px"
3831
- },
3832
- {
3833
- "path": [
3834
- "space",
3835
- "12"
3836
- ],
3837
- "value": "128px"
3838
- },
3839
- {
3840
- "path": [
3841
- "space",
3842
- "13"
3843
- ],
3844
- "value": "320px"
3845
- }
3846
- ],
3847
- "zIndex": [
3848
- {
3849
- "path": [
3850
- "zIndex",
3851
- "0"
3852
- ],
3853
- "value": 0,
3854
- "description": "Useful for creating a new stacking context."
3855
- },
3856
- {
3857
- "path": [
3858
- "zIndex",
3859
- "10"
3860
- ],
3861
- "value": 10,
3862
- "description": "Used for overlay elements, like button groups on canvas elements. Can be used with an alias token."
3863
- },
3864
- {
3865
- "path": [
3866
- "zIndex",
3867
- "20"
3868
- ],
3869
- "value": 20,
3870
- "description": "Used for banners. Can be used with an alias token."
3871
- },
3872
- {
3873
- "path": [
3874
- "zIndex",
3875
- "30"
3876
- ],
3877
- "value": 30,
3878
- "description": "Used as a blanket layer that covers the underlying UI. For example can be used to detect clicks and close the content on top of it. Can be used with an alias token."
3879
- },
3880
- {
3881
- "path": [
3882
- "zIndex",
3883
- "40"
3884
- ],
3885
- "value": 40,
3886
- "description": "Used for popover elements like Dropdown menu. Can be used with an alias token."
3887
- },
3888
- {
3889
- "path": [
3890
- "zIndex",
3891
- "50"
3892
- ],
3893
- "value": 50,
3894
- "description": "Used in tooltip components, should be above everything as it will be probably visible on hover effects. There are exceptions for canvas tooltips (like in Bloom). Can be used with an alias token."
3895
- },
3896
- {
3897
- "path": [
3898
- "zIndex",
3899
- "60"
3900
- ],
3901
- "value": 60,
3902
- "description": "Used for modals, always sitting on top of a blanket, can be a custom element or a Dialog. Can be used with an alias token."
3903
- },
3904
- {
3905
- "path": [
3906
- "zIndex",
3907
- "deep"
3908
- ],
3909
- "value": -999999,
3910
- "description": "Deep z-index is used to stack something behind everything else."
3911
- },
3912
- {
3913
- "path": [
3914
- "zIndex",
3915
- "auto"
3916
- ],
3917
- "value": "auto"
3918
- },
3919
- {
3920
- "path": [
3921
- "zIndex",
3922
- "alias",
3923
- "overlay"
3924
- ],
3925
- "value": 10
3926
- },
3927
- {
3928
- "path": [
3929
- "zIndex",
3930
- "alias",
3931
- "banner"
3932
- ],
3933
- "value": 20
3934
- },
3935
- {
3936
- "path": [
3937
- "zIndex",
3938
- "alias",
3939
- "blanket"
3940
- ],
3941
- "value": 30
3942
- },
3943
- {
3944
- "path": [
3945
- "zIndex",
3946
- "alias",
3947
- "popover"
3948
- ],
3949
- "value": 40
3950
- },
3951
- {
3952
- "path": [
3953
- "zIndex",
3954
- "alias",
3955
- "tooltip"
3956
- ],
3957
- "value": 50
3958
- },
3959
- {
3960
- "path": [
3961
- "zIndex",
3962
- "alias",
3963
- "modal"
3964
- ],
3965
- "value": 60
3966
- }
3967
- ]
3968
- };
3969
- //# sourceMappingURL=storybook-design-token.js.map