@neo4j-ndl/base 1.10.2 → 2.0.0-alpha-e609471
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.
- package/lib/LICENSES.txt +2131 -67
- package/lib/NOTICE.txt +34 -31
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/tailwind-preset.config.js +8 -8
- package/lib/cjs/tailwindTheme.js +77 -34
- package/lib/cjs/tailwindTheme.js.map +1 -1
- package/lib/cjs/tokens/js/storybook-design-token.js +1972 -882
- package/lib/cjs/tokens/js/storybook-design-token.js.map +1 -1
- package/lib/cjs/tokens/js/tokens-esm.js +374 -238
- package/lib/cjs/tokens/js/tokens-esm.js.map +1 -1
- package/lib/cjs/tokens/js/tokens.js +373 -237
- package/lib/cjs/tokens/js/tokens.js.map +1 -1
- package/lib/cjs/typescale.js +16 -16
- package/lib/cjs/typings.js +1 -1
- package/lib/esm/tailwindTheme.js +66 -26
- package/lib/esm/tailwindTheme.js.map +1 -1
- package/lib/esm/tokens/js/storybook-design-token.js +1971 -881
- package/lib/esm/tokens/js/storybook-design-token.js.map +1 -1
- package/lib/esm/tokens/js/tokens-esm.js +373 -237
- package/lib/esm/tokens/js/tokens-esm.js.map +1 -1
- package/lib/esm/tokens/js/tokens.js +373 -237
- package/lib/esm/tokens/js/tokens.js.map +1 -1
- package/lib/neo4j-ds-styles.css +41086 -31403
- package/lib/tokens/css/tokens.css +260 -150
- package/lib/tokens/js/tokens-raw.js +5445 -3032
- package/lib/tokens/js/tokens.js +373 -237
- package/lib/tokens/scss/tokens.scss +260 -150
- package/lib/types/tokens/js/storybook-design-token.d.ts +22 -9
- package/lib/types/tokens/js/tokens-esm.d.ts +486 -328
- package/lib/types/tokens/js/tokens.d.ts +486 -328
- package/lib/types/typings.d.ts +1 -1
- package/package.json +8 -9
- package/CHANGELOG.md +0 -801
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"use strict";
|
|
23
23
|
/**
|
|
24
24
|
* Do not edit directly
|
|
25
|
-
* Generated on
|
|
25
|
+
* Generated on Thu, 07 Sep 2023 09:38:23 GMT
|
|
26
26
|
*/
|
|
27
|
-
exports
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
28
|
exports.tokens = void 0;
|
|
29
29
|
exports.tokens = {
|
|
30
30
|
"transitions": [
|
|
@@ -308,1526 +308,2650 @@ exports.tokens = {
|
|
|
308
308
|
"value": "#ADE86B"
|
|
309
309
|
}
|
|
310
310
|
],
|
|
311
|
-
"palette-
|
|
311
|
+
"palette-graph": [
|
|
312
312
|
{
|
|
313
313
|
"path": [
|
|
314
314
|
"palette",
|
|
315
|
-
"
|
|
316
|
-
"
|
|
317
|
-
"text",
|
|
318
|
-
"weakest"
|
|
315
|
+
"graph",
|
|
316
|
+
"1"
|
|
319
317
|
],
|
|
320
|
-
"value": "#
|
|
321
|
-
"description": "Should be used mainly for disabled text"
|
|
318
|
+
"value": "#FFDF81"
|
|
322
319
|
},
|
|
323
320
|
{
|
|
324
321
|
"path": [
|
|
325
322
|
"palette",
|
|
326
|
-
"
|
|
327
|
-
"
|
|
328
|
-
"text",
|
|
329
|
-
"weaker"
|
|
323
|
+
"graph",
|
|
324
|
+
"2"
|
|
330
325
|
],
|
|
331
|
-
"value": "#
|
|
332
|
-
"description": "Should be used sparsely and mainly for headers and subtitles to differentiate from input text"
|
|
326
|
+
"value": "#C990C0"
|
|
333
327
|
},
|
|
334
328
|
{
|
|
335
329
|
"path": [
|
|
336
330
|
"palette",
|
|
337
|
-
"
|
|
338
|
-
"
|
|
339
|
-
"text",
|
|
340
|
-
"weak"
|
|
331
|
+
"graph",
|
|
332
|
+
"3"
|
|
341
333
|
],
|
|
342
|
-
"value": "#
|
|
343
|
-
"description": "Used for labels, icon color and descriptions"
|
|
334
|
+
"value": "#F79767"
|
|
344
335
|
},
|
|
345
336
|
{
|
|
346
337
|
"path": [
|
|
347
338
|
"palette",
|
|
348
|
-
"
|
|
349
|
-
"
|
|
350
|
-
"text",
|
|
351
|
-
"default"
|
|
339
|
+
"graph",
|
|
340
|
+
"4"
|
|
352
341
|
],
|
|
353
|
-
"value": "#
|
|
354
|
-
"description": "Used for all default text"
|
|
342
|
+
"value": "#56C7E4"
|
|
355
343
|
},
|
|
356
344
|
{
|
|
357
345
|
"path": [
|
|
358
346
|
"palette",
|
|
359
|
-
"
|
|
360
|
-
"
|
|
361
|
-
"text",
|
|
362
|
-
"inverse"
|
|
347
|
+
"graph",
|
|
348
|
+
"5"
|
|
363
349
|
],
|
|
364
|
-
"value": "#
|
|
365
|
-
"description": "Default text on Neutral-bg-strongest or other dark backgrounds"
|
|
350
|
+
"value": "#F16767"
|
|
366
351
|
},
|
|
367
352
|
{
|
|
368
353
|
"path": [
|
|
369
354
|
"palette",
|
|
370
|
-
"
|
|
371
|
-
"
|
|
372
|
-
"icon"
|
|
355
|
+
"graph",
|
|
356
|
+
"6"
|
|
373
357
|
],
|
|
374
|
-
"value": "#
|
|
375
|
-
"description": "Used as a default neutral icon color"
|
|
358
|
+
"value": "#D8C7AE"
|
|
376
359
|
},
|
|
377
360
|
{
|
|
378
361
|
"path": [
|
|
379
362
|
"palette",
|
|
380
|
-
"
|
|
381
|
-
"
|
|
382
|
-
"bg",
|
|
383
|
-
"weak"
|
|
363
|
+
"graph",
|
|
364
|
+
"7"
|
|
384
365
|
],
|
|
385
|
-
"value": "
|
|
386
|
-
"description": "Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default"
|
|
366
|
+
"value": "#8DCC93"
|
|
387
367
|
},
|
|
388
368
|
{
|
|
389
369
|
"path": [
|
|
390
370
|
"palette",
|
|
391
|
-
"
|
|
392
|
-
"
|
|
393
|
-
"bg",
|
|
394
|
-
"default"
|
|
371
|
+
"graph",
|
|
372
|
+
"8"
|
|
395
373
|
],
|
|
396
|
-
"value": "#
|
|
397
|
-
"description": "Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak"
|
|
374
|
+
"value": "#ECB4C9"
|
|
398
375
|
},
|
|
399
376
|
{
|
|
400
377
|
"path": [
|
|
401
378
|
"palette",
|
|
402
|
-
"
|
|
403
|
-
"
|
|
404
|
-
"bg",
|
|
405
|
-
"strong"
|
|
379
|
+
"graph",
|
|
380
|
+
"9"
|
|
406
381
|
],
|
|
407
|
-
"value": "
|
|
408
|
-
"description": "Use sparsely, mainly included in some component states"
|
|
382
|
+
"value": "#4D8DDA"
|
|
409
383
|
},
|
|
410
384
|
{
|
|
411
385
|
"path": [
|
|
412
386
|
"palette",
|
|
413
|
-
"
|
|
414
|
-
"
|
|
415
|
-
"bg",
|
|
416
|
-
"strongest"
|
|
387
|
+
"graph",
|
|
388
|
+
"10"
|
|
417
389
|
],
|
|
418
|
-
"value": "#
|
|
419
|
-
"description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout"
|
|
390
|
+
"value": "#FFC354"
|
|
420
391
|
},
|
|
421
392
|
{
|
|
422
393
|
"path": [
|
|
423
394
|
"palette",
|
|
424
|
-
"
|
|
425
|
-
"
|
|
426
|
-
"border",
|
|
427
|
-
"weak"
|
|
395
|
+
"graph",
|
|
396
|
+
"11"
|
|
428
397
|
],
|
|
429
|
-
"value": "
|
|
430
|
-
"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"
|
|
398
|
+
"value": "#DA7294"
|
|
431
399
|
},
|
|
432
400
|
{
|
|
433
401
|
"path": [
|
|
434
402
|
"palette",
|
|
435
|
-
"
|
|
436
|
-
"
|
|
437
|
-
"border",
|
|
438
|
-
"strong"
|
|
403
|
+
"graph",
|
|
404
|
+
"12"
|
|
439
405
|
],
|
|
440
|
-
"value": "#
|
|
441
|
-
|
|
406
|
+
"value": "#579380"
|
|
407
|
+
}
|
|
408
|
+
],
|
|
409
|
+
"colors": [
|
|
410
|
+
{
|
|
411
|
+
"path": [
|
|
412
|
+
"colors",
|
|
413
|
+
"baltic",
|
|
414
|
+
"10"
|
|
415
|
+
],
|
|
416
|
+
"value": "#E7FAFB"
|
|
442
417
|
},
|
|
443
418
|
{
|
|
444
419
|
"path": [
|
|
445
|
-
"
|
|
446
|
-
"
|
|
447
|
-
"
|
|
448
|
-
"hover"
|
|
420
|
+
"colors",
|
|
421
|
+
"baltic",
|
|
422
|
+
"15"
|
|
449
423
|
],
|
|
450
|
-
"value": "
|
|
451
|
-
"description": "Used for neutral hover states on components"
|
|
424
|
+
"value": "#C3F8FB"
|
|
452
425
|
},
|
|
453
426
|
{
|
|
454
427
|
"path": [
|
|
455
|
-
"
|
|
456
|
-
"
|
|
457
|
-
"
|
|
458
|
-
"pressed"
|
|
428
|
+
"colors",
|
|
429
|
+
"baltic",
|
|
430
|
+
"20"
|
|
459
431
|
],
|
|
460
|
-
"value": "
|
|
461
|
-
"description": "Used for neutral pressed states on components"
|
|
432
|
+
"value": "#8FE3E8"
|
|
462
433
|
},
|
|
463
434
|
{
|
|
464
435
|
"path": [
|
|
465
|
-
"
|
|
466
|
-
"
|
|
467
|
-
"
|
|
468
|
-
"text"
|
|
436
|
+
"colors",
|
|
437
|
+
"baltic",
|
|
438
|
+
"25"
|
|
469
439
|
],
|
|
470
|
-
"value": "#
|
|
471
|
-
"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"
|
|
440
|
+
"value": "#5CC3C9"
|
|
472
441
|
},
|
|
473
442
|
{
|
|
474
443
|
"path": [
|
|
475
|
-
"
|
|
476
|
-
"
|
|
477
|
-
"
|
|
478
|
-
"icon"
|
|
444
|
+
"colors",
|
|
445
|
+
"baltic",
|
|
446
|
+
"30"
|
|
479
447
|
],
|
|
480
|
-
"value": "#
|
|
481
|
-
"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"
|
|
448
|
+
"value": "#5DB3BF"
|
|
482
449
|
},
|
|
483
450
|
{
|
|
484
451
|
"path": [
|
|
485
|
-
"
|
|
486
|
-
"
|
|
487
|
-
"
|
|
488
|
-
"bg",
|
|
489
|
-
"strong"
|
|
452
|
+
"colors",
|
|
453
|
+
"baltic",
|
|
454
|
+
"35"
|
|
490
455
|
],
|
|
491
|
-
"value": "#
|
|
492
|
-
"description": "Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors"
|
|
456
|
+
"value": "#51A6B1"
|
|
493
457
|
},
|
|
494
458
|
{
|
|
495
459
|
"path": [
|
|
496
|
-
"
|
|
497
|
-
"
|
|
498
|
-
"
|
|
499
|
-
"bg",
|
|
500
|
-
"weak"
|
|
460
|
+
"colors",
|
|
461
|
+
"baltic",
|
|
462
|
+
"40"
|
|
501
463
|
],
|
|
502
|
-
"value": "
|
|
503
|
-
"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"
|
|
464
|
+
"value": "#4C99A4"
|
|
504
465
|
},
|
|
505
466
|
{
|
|
506
467
|
"path": [
|
|
507
|
-
"
|
|
508
|
-
"
|
|
509
|
-
"
|
|
510
|
-
"border",
|
|
511
|
-
"strong"
|
|
468
|
+
"colors",
|
|
469
|
+
"baltic",
|
|
470
|
+
"45"
|
|
512
471
|
],
|
|
513
|
-
"value": "#
|
|
514
|
-
"description": "Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard"
|
|
472
|
+
"value": "#30839D"
|
|
515
473
|
},
|
|
516
474
|
{
|
|
517
475
|
"path": [
|
|
518
|
-
"
|
|
519
|
-
"
|
|
520
|
-
"
|
|
521
|
-
"border",
|
|
522
|
-
"weak"
|
|
476
|
+
"colors",
|
|
477
|
+
"baltic",
|
|
478
|
+
"50"
|
|
523
479
|
],
|
|
524
|
-
"value": "
|
|
525
|
-
"description": "Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background"
|
|
480
|
+
"value": "#0A6190"
|
|
526
481
|
},
|
|
527
482
|
{
|
|
528
483
|
"path": [
|
|
529
|
-
"
|
|
530
|
-
"
|
|
531
|
-
"
|
|
532
|
-
"focus"
|
|
484
|
+
"colors",
|
|
485
|
+
"baltic",
|
|
486
|
+
"55"
|
|
533
487
|
],
|
|
534
|
-
"value": "#
|
|
535
|
-
"description": "Used for all focused states"
|
|
488
|
+
"value": "#02507B"
|
|
536
489
|
},
|
|
537
490
|
{
|
|
538
491
|
"path": [
|
|
539
|
-
"
|
|
540
|
-
"
|
|
541
|
-
"
|
|
542
|
-
"hover",
|
|
543
|
-
"weak"
|
|
492
|
+
"colors",
|
|
493
|
+
"baltic",
|
|
494
|
+
"60"
|
|
544
495
|
],
|
|
545
|
-
"value": "
|
|
546
|
-
"description": "Used for hover states where the background is either transparent or use Neutral-bg-weak"
|
|
496
|
+
"value": "#014063"
|
|
547
497
|
},
|
|
548
498
|
{
|
|
549
499
|
"path": [
|
|
550
|
-
"
|
|
551
|
-
"
|
|
552
|
-
"
|
|
553
|
-
"hover",
|
|
554
|
-
"strong"
|
|
500
|
+
"colors",
|
|
501
|
+
"baltic",
|
|
502
|
+
"65"
|
|
555
503
|
],
|
|
556
|
-
"value": "#
|
|
557
|
-
"description": "Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
|
|
504
|
+
"value": "#262F31"
|
|
558
505
|
},
|
|
559
506
|
{
|
|
560
507
|
"path": [
|
|
561
|
-
"
|
|
562
|
-
"
|
|
563
|
-
"
|
|
564
|
-
"pressed",
|
|
565
|
-
"weak"
|
|
508
|
+
"colors",
|
|
509
|
+
"baltic",
|
|
510
|
+
"70"
|
|
566
511
|
],
|
|
567
|
-
"value": "
|
|
568
|
-
"description": "Used for pressed states where the background is either transparent or use Neutral-bg-weak"
|
|
512
|
+
"value": "#081E2B"
|
|
569
513
|
},
|
|
570
514
|
{
|
|
571
515
|
"path": [
|
|
572
|
-
"
|
|
573
|
-
"
|
|
574
|
-
"
|
|
575
|
-
"pressed",
|
|
576
|
-
"strong"
|
|
516
|
+
"colors",
|
|
517
|
+
"baltic",
|
|
518
|
+
"75"
|
|
577
519
|
],
|
|
578
|
-
"value": "#
|
|
579
|
-
"description": "Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
|
|
520
|
+
"value": "#041823"
|
|
580
521
|
},
|
|
581
522
|
{
|
|
582
523
|
"path": [
|
|
583
|
-
"
|
|
584
|
-
"
|
|
585
|
-
"
|
|
586
|
-
"text"
|
|
524
|
+
"colors",
|
|
525
|
+
"baltic",
|
|
526
|
+
"80"
|
|
587
527
|
],
|
|
588
|
-
"value": "#
|
|
589
|
-
"description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
528
|
+
"value": "#01121C"
|
|
590
529
|
},
|
|
591
530
|
{
|
|
592
531
|
"path": [
|
|
593
|
-
"
|
|
594
|
-
"
|
|
595
|
-
"
|
|
596
|
-
"icon"
|
|
532
|
+
"colors",
|
|
533
|
+
"hibiscus",
|
|
534
|
+
"10"
|
|
597
535
|
],
|
|
598
|
-
"value": "#
|
|
599
|
-
"description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
536
|
+
"value": "#FFE9E7"
|
|
600
537
|
},
|
|
601
538
|
{
|
|
602
539
|
"path": [
|
|
603
|
-
"
|
|
604
|
-
"
|
|
605
|
-
"
|
|
606
|
-
"bg",
|
|
607
|
-
"strong"
|
|
540
|
+
"colors",
|
|
541
|
+
"hibiscus",
|
|
542
|
+
"15"
|
|
608
543
|
],
|
|
609
|
-
"value": "#
|
|
610
|
-
"description": "Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states"
|
|
544
|
+
"value": "#FFD7D2"
|
|
611
545
|
},
|
|
612
546
|
{
|
|
613
547
|
"path": [
|
|
614
|
-
"
|
|
615
|
-
"
|
|
616
|
-
"
|
|
617
|
-
"bg",
|
|
618
|
-
"weak"
|
|
548
|
+
"colors",
|
|
549
|
+
"hibiscus",
|
|
550
|
+
"20"
|
|
619
551
|
],
|
|
620
|
-
"value": "
|
|
621
|
-
"description": "Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags"
|
|
552
|
+
"value": "#FFAA97"
|
|
622
553
|
},
|
|
623
554
|
{
|
|
624
555
|
"path": [
|
|
625
|
-
"
|
|
626
|
-
"
|
|
627
|
-
"
|
|
628
|
-
"border",
|
|
629
|
-
"strong"
|
|
556
|
+
"colors",
|
|
557
|
+
"hibiscus",
|
|
558
|
+
"25"
|
|
630
559
|
],
|
|
631
|
-
"value": "#
|
|
632
|
-
"description": "Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels"
|
|
560
|
+
"value": "#FF8E6A"
|
|
633
561
|
},
|
|
634
562
|
{
|
|
635
563
|
"path": [
|
|
636
|
-
"
|
|
637
|
-
"
|
|
638
|
-
"
|
|
639
|
-
"border",
|
|
640
|
-
"weak"
|
|
564
|
+
"colors",
|
|
565
|
+
"hibiscus",
|
|
566
|
+
"30"
|
|
641
567
|
],
|
|
642
|
-
"value": "
|
|
643
|
-
"description": "Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background"
|
|
568
|
+
"value": "#F96746"
|
|
644
569
|
},
|
|
645
570
|
{
|
|
646
571
|
"path": [
|
|
647
|
-
"
|
|
648
|
-
"
|
|
649
|
-
"
|
|
650
|
-
"hover",
|
|
651
|
-
"weak"
|
|
572
|
+
"colors",
|
|
573
|
+
"hibiscus",
|
|
574
|
+
"35"
|
|
652
575
|
],
|
|
653
|
-
"value": "
|
|
654
|
-
"description": "Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak"
|
|
576
|
+
"value": "#E84E2C"
|
|
655
577
|
},
|
|
656
578
|
{
|
|
657
579
|
"path": [
|
|
658
|
-
"
|
|
659
|
-
"
|
|
660
|
-
"
|
|
661
|
-
"hover",
|
|
662
|
-
"strong"
|
|
580
|
+
"colors",
|
|
581
|
+
"hibiscus",
|
|
582
|
+
"40"
|
|
663
583
|
],
|
|
664
|
-
"value": "#
|
|
665
|
-
"description": "Only used for hover states in critical filled buttons"
|
|
584
|
+
"value": "#D43300"
|
|
666
585
|
},
|
|
667
586
|
{
|
|
668
587
|
"path": [
|
|
669
|
-
"
|
|
670
|
-
"
|
|
671
|
-
"
|
|
672
|
-
"pressed",
|
|
673
|
-
"weak"
|
|
588
|
+
"colors",
|
|
589
|
+
"hibiscus",
|
|
590
|
+
"45"
|
|
674
591
|
],
|
|
675
|
-
"value": "
|
|
676
|
-
"description": "Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak"
|
|
592
|
+
"value": "#BB2D00"
|
|
677
593
|
},
|
|
678
594
|
{
|
|
679
595
|
"path": [
|
|
680
|
-
"
|
|
681
|
-
"
|
|
682
|
-
"
|
|
683
|
-
"pressed",
|
|
684
|
-
"strong"
|
|
596
|
+
"colors",
|
|
597
|
+
"hibiscus",
|
|
598
|
+
"50"
|
|
685
599
|
],
|
|
686
|
-
"value": "#
|
|
687
|
-
"description": "Only used for pressed states in critical filled buttons"
|
|
600
|
+
"value": "#961200"
|
|
688
601
|
},
|
|
689
602
|
{
|
|
690
603
|
"path": [
|
|
691
|
-
"
|
|
692
|
-
"
|
|
693
|
-
"
|
|
694
|
-
"text"
|
|
604
|
+
"colors",
|
|
605
|
+
"hibiscus",
|
|
606
|
+
"55"
|
|
695
607
|
],
|
|
696
|
-
"value": "#
|
|
697
|
-
"description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
608
|
+
"value": "#730E00"
|
|
698
609
|
},
|
|
699
610
|
{
|
|
700
611
|
"path": [
|
|
701
|
-
"
|
|
702
|
-
"
|
|
703
|
-
"
|
|
704
|
-
"icon"
|
|
612
|
+
"colors",
|
|
613
|
+
"hibiscus",
|
|
614
|
+
"60"
|
|
705
615
|
],
|
|
706
|
-
"value": "#
|
|
707
|
-
"description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
616
|
+
"value": "#432520"
|
|
708
617
|
},
|
|
709
618
|
{
|
|
710
619
|
"path": [
|
|
711
|
-
"
|
|
712
|
-
"
|
|
713
|
-
"
|
|
714
|
-
"bg",
|
|
715
|
-
"strong"
|
|
620
|
+
"colors",
|
|
621
|
+
"hibiscus",
|
|
622
|
+
"65"
|
|
716
623
|
],
|
|
717
|
-
"value": "#
|
|
718
|
-
"description": "Use sparsely. Only used for filled labels"
|
|
624
|
+
"value": "#4E0900"
|
|
719
625
|
},
|
|
720
626
|
{
|
|
721
627
|
"path": [
|
|
722
|
-
"
|
|
723
|
-
"
|
|
724
|
-
"
|
|
725
|
-
"bg",
|
|
726
|
-
"weak"
|
|
628
|
+
"colors",
|
|
629
|
+
"hibiscus",
|
|
630
|
+
"70"
|
|
727
631
|
],
|
|
728
|
-
"value": "
|
|
729
|
-
"description": "Used as backgrounds for warning components states such as banner and semi-filled labels"
|
|
632
|
+
"value": "#3F0800"
|
|
730
633
|
},
|
|
731
634
|
{
|
|
732
635
|
"path": [
|
|
733
|
-
"
|
|
734
|
-
"
|
|
735
|
-
"
|
|
736
|
-
"border",
|
|
737
|
-
"strong"
|
|
636
|
+
"colors",
|
|
637
|
+
"hibiscus",
|
|
638
|
+
"75"
|
|
738
639
|
],
|
|
739
|
-
"value": "#
|
|
740
|
-
"description": "Use sparsely. Only used for outlined labels"
|
|
640
|
+
"value": "#360700"
|
|
741
641
|
},
|
|
742
642
|
{
|
|
743
643
|
"path": [
|
|
744
|
-
"
|
|
745
|
-
"
|
|
746
|
-
"
|
|
747
|
-
"border",
|
|
748
|
-
"weak"
|
|
644
|
+
"colors",
|
|
645
|
+
"hibiscus",
|
|
646
|
+
"80"
|
|
749
647
|
],
|
|
750
|
-
"value": "
|
|
751
|
-
"description": "Use sparsely. Mainly used in combination with elements that use the Warning-bg-weak to stand out more from the background"
|
|
648
|
+
"value": "#280500"
|
|
752
649
|
},
|
|
753
650
|
{
|
|
754
651
|
"path": [
|
|
755
|
-
"
|
|
756
|
-
"
|
|
757
|
-
"
|
|
758
|
-
"text"
|
|
652
|
+
"colors",
|
|
653
|
+
"forest",
|
|
654
|
+
"10"
|
|
759
655
|
],
|
|
760
|
-
"value": "#
|
|
761
|
-
"description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
656
|
+
"value": "#E7FCD7"
|
|
762
657
|
},
|
|
763
658
|
{
|
|
764
659
|
"path": [
|
|
765
|
-
"
|
|
766
|
-
"
|
|
767
|
-
"
|
|
768
|
-
"icon"
|
|
660
|
+
"colors",
|
|
661
|
+
"forest",
|
|
662
|
+
"15"
|
|
769
663
|
],
|
|
770
|
-
"value": "#
|
|
771
|
-
"description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
664
|
+
"value": "#BCF194"
|
|
772
665
|
},
|
|
773
666
|
{
|
|
774
667
|
"path": [
|
|
775
|
-
"
|
|
776
|
-
"
|
|
777
|
-
"
|
|
778
|
-
"bg",
|
|
779
|
-
"strong"
|
|
668
|
+
"colors",
|
|
669
|
+
"forest",
|
|
670
|
+
"20"
|
|
780
671
|
],
|
|
781
|
-
"value": "#
|
|
782
|
-
"description": "Use sparsely. Only used for filled labels"
|
|
672
|
+
"value": "#90CB62"
|
|
783
673
|
},
|
|
784
674
|
{
|
|
785
675
|
"path": [
|
|
786
|
-
"
|
|
787
|
-
"
|
|
788
|
-
"
|
|
789
|
-
"bg",
|
|
790
|
-
"weak"
|
|
676
|
+
"colors",
|
|
677
|
+
"forest",
|
|
678
|
+
"25"
|
|
791
679
|
],
|
|
792
|
-
"value": "
|
|
793
|
-
"description": "Used as backgrounds for success components states such as banner and semi-filled labels"
|
|
680
|
+
"value": "#80BB53"
|
|
794
681
|
},
|
|
795
682
|
{
|
|
796
683
|
"path": [
|
|
797
|
-
"
|
|
798
|
-
"
|
|
799
|
-
"
|
|
800
|
-
"border",
|
|
801
|
-
"strong"
|
|
684
|
+
"colors",
|
|
685
|
+
"forest",
|
|
686
|
+
"30"
|
|
802
687
|
],
|
|
803
|
-
"value": "#
|
|
804
|
-
"description": "Use sparsely. Only used for outlined labels"
|
|
688
|
+
"value": "#6FA646"
|
|
805
689
|
},
|
|
806
690
|
{
|
|
807
691
|
"path": [
|
|
808
|
-
"
|
|
809
|
-
"
|
|
810
|
-
"
|
|
811
|
-
"border",
|
|
812
|
-
"weak"
|
|
692
|
+
"colors",
|
|
693
|
+
"forest",
|
|
694
|
+
"35"
|
|
813
695
|
],
|
|
814
|
-
"value": "
|
|
815
|
-
|
|
816
|
-
}
|
|
817
|
-
],
|
|
818
|
-
"palette-graph": [
|
|
696
|
+
"value": "#5B992B"
|
|
697
|
+
},
|
|
819
698
|
{
|
|
820
699
|
"path": [
|
|
821
|
-
"
|
|
822
|
-
"
|
|
823
|
-
"
|
|
700
|
+
"colors",
|
|
701
|
+
"forest",
|
|
702
|
+
"40"
|
|
824
703
|
],
|
|
825
|
-
"value": "#
|
|
704
|
+
"value": "#4D8622"
|
|
826
705
|
},
|
|
827
706
|
{
|
|
828
707
|
"path": [
|
|
829
|
-
"
|
|
830
|
-
"
|
|
831
|
-
"
|
|
708
|
+
"colors",
|
|
709
|
+
"forest",
|
|
710
|
+
"45"
|
|
832
711
|
],
|
|
833
|
-
"value": "#
|
|
712
|
+
"value": "#3F7824"
|
|
834
713
|
},
|
|
835
714
|
{
|
|
836
715
|
"path": [
|
|
837
|
-
"
|
|
838
|
-
"
|
|
839
|
-
"
|
|
716
|
+
"colors",
|
|
717
|
+
"forest",
|
|
718
|
+
"50"
|
|
840
719
|
],
|
|
841
|
-
"value": "#
|
|
720
|
+
"value": "#296127"
|
|
842
721
|
},
|
|
843
722
|
{
|
|
844
723
|
"path": [
|
|
845
|
-
"
|
|
846
|
-
"
|
|
847
|
-
"
|
|
724
|
+
"colors",
|
|
725
|
+
"forest",
|
|
726
|
+
"55"
|
|
848
727
|
],
|
|
849
|
-
"value": "#
|
|
728
|
+
"value": "#145439"
|
|
850
729
|
},
|
|
851
730
|
{
|
|
852
731
|
"path": [
|
|
853
|
-
"
|
|
854
|
-
"
|
|
855
|
-
"
|
|
732
|
+
"colors",
|
|
733
|
+
"forest",
|
|
734
|
+
"60"
|
|
856
735
|
],
|
|
857
|
-
"value": "#
|
|
736
|
+
"value": "#0C4D31"
|
|
858
737
|
},
|
|
859
738
|
{
|
|
860
739
|
"path": [
|
|
861
|
-
"
|
|
862
|
-
"
|
|
863
|
-
"
|
|
740
|
+
"colors",
|
|
741
|
+
"forest",
|
|
742
|
+
"65"
|
|
864
743
|
],
|
|
865
|
-
"value": "#
|
|
744
|
+
"value": "#0A4324"
|
|
866
745
|
},
|
|
867
746
|
{
|
|
868
747
|
"path": [
|
|
869
|
-
"
|
|
870
|
-
"
|
|
871
|
-
"
|
|
748
|
+
"colors",
|
|
749
|
+
"forest",
|
|
750
|
+
"70"
|
|
872
751
|
],
|
|
873
|
-
"value": "#
|
|
752
|
+
"value": "#262D24"
|
|
874
753
|
},
|
|
875
754
|
{
|
|
876
755
|
"path": [
|
|
877
|
-
"
|
|
878
|
-
"
|
|
879
|
-
"
|
|
756
|
+
"colors",
|
|
757
|
+
"forest",
|
|
758
|
+
"75"
|
|
880
759
|
],
|
|
881
|
-
"value": "#
|
|
760
|
+
"value": "#052618"
|
|
882
761
|
},
|
|
883
762
|
{
|
|
884
763
|
"path": [
|
|
885
|
-
"
|
|
886
|
-
"
|
|
887
|
-
"
|
|
764
|
+
"colors",
|
|
765
|
+
"forest",
|
|
766
|
+
"80"
|
|
888
767
|
],
|
|
889
|
-
"value": "#
|
|
768
|
+
"value": "#021D11"
|
|
890
769
|
},
|
|
891
770
|
{
|
|
892
771
|
"path": [
|
|
893
|
-
"
|
|
894
|
-
"
|
|
772
|
+
"colors",
|
|
773
|
+
"lemon",
|
|
895
774
|
"10"
|
|
896
775
|
],
|
|
897
|
-
"value": "#
|
|
776
|
+
"value": "#FFFAD1"
|
|
898
777
|
},
|
|
899
778
|
{
|
|
900
779
|
"path": [
|
|
901
|
-
"
|
|
902
|
-
"
|
|
903
|
-
"
|
|
780
|
+
"colors",
|
|
781
|
+
"lemon",
|
|
782
|
+
"15"
|
|
904
783
|
],
|
|
905
|
-
"value": "#
|
|
784
|
+
"value": "#FFF8BD"
|
|
906
785
|
},
|
|
907
786
|
{
|
|
908
787
|
"path": [
|
|
909
|
-
"
|
|
910
|
-
"
|
|
911
|
-
"
|
|
788
|
+
"colors",
|
|
789
|
+
"lemon",
|
|
790
|
+
"20"
|
|
912
791
|
],
|
|
913
|
-
"value": "#
|
|
914
|
-
}
|
|
915
|
-
],
|
|
916
|
-
"palette-light": [
|
|
792
|
+
"value": "#FFF178"
|
|
793
|
+
},
|
|
917
794
|
{
|
|
918
795
|
"path": [
|
|
919
|
-
"
|
|
920
|
-
"
|
|
921
|
-
"
|
|
922
|
-
"text",
|
|
923
|
-
"weakest"
|
|
796
|
+
"colors",
|
|
797
|
+
"lemon",
|
|
798
|
+
"25"
|
|
924
799
|
],
|
|
925
|
-
"value": "#
|
|
926
|
-
"description": "Should be used mainly for disabled text"
|
|
800
|
+
"value": "#FFE500"
|
|
927
801
|
},
|
|
928
802
|
{
|
|
929
803
|
"path": [
|
|
930
|
-
"
|
|
931
|
-
"
|
|
932
|
-
"
|
|
933
|
-
"text",
|
|
934
|
-
"weaker"
|
|
804
|
+
"colors",
|
|
805
|
+
"lemon",
|
|
806
|
+
"30"
|
|
935
807
|
],
|
|
936
|
-
"value": "#
|
|
937
|
-
"description": "Should be used sparsely and mainly for headers and subtitles to differentiate from input text"
|
|
808
|
+
"value": "#FFD600"
|
|
938
809
|
},
|
|
939
810
|
{
|
|
940
811
|
"path": [
|
|
941
|
-
"
|
|
942
|
-
"
|
|
943
|
-
"
|
|
944
|
-
"text",
|
|
945
|
-
"weak"
|
|
812
|
+
"colors",
|
|
813
|
+
"lemon",
|
|
814
|
+
"35"
|
|
946
815
|
],
|
|
947
|
-
"value": "#
|
|
948
|
-
"description": "Used for labels, icon color and descriptions"
|
|
816
|
+
"value": "#F4C318"
|
|
949
817
|
},
|
|
950
818
|
{
|
|
951
819
|
"path": [
|
|
952
|
-
"
|
|
953
|
-
"
|
|
954
|
-
"
|
|
955
|
-
"text",
|
|
956
|
-
"default"
|
|
820
|
+
"colors",
|
|
821
|
+
"lemon",
|
|
822
|
+
"40"
|
|
957
823
|
],
|
|
958
|
-
"value": "#
|
|
959
|
-
"description": "Used for all default text"
|
|
824
|
+
"value": "#D7AA0A"
|
|
960
825
|
},
|
|
961
826
|
{
|
|
962
827
|
"path": [
|
|
963
|
-
"
|
|
964
|
-
"
|
|
965
|
-
"
|
|
966
|
-
"text",
|
|
967
|
-
"inverse"
|
|
828
|
+
"colors",
|
|
829
|
+
"lemon",
|
|
830
|
+
"45"
|
|
968
831
|
],
|
|
969
|
-
"value": "#
|
|
970
|
-
"description": "Default text on Neutral-bg-strongest or other dark backgrounds"
|
|
832
|
+
"value": "#B48409"
|
|
971
833
|
},
|
|
972
834
|
{
|
|
973
835
|
"path": [
|
|
974
|
-
"
|
|
975
|
-
"
|
|
976
|
-
"
|
|
977
|
-
"icon"
|
|
836
|
+
"colors",
|
|
837
|
+
"lemon",
|
|
838
|
+
"50"
|
|
978
839
|
],
|
|
979
|
-
"value": "#
|
|
980
|
-
"description": "Used as a default neutral icon color"
|
|
840
|
+
"value": "#996E00"
|
|
981
841
|
},
|
|
982
842
|
{
|
|
983
843
|
"path": [
|
|
984
|
-
"
|
|
985
|
-
"
|
|
986
|
-
"
|
|
987
|
-
"bg",
|
|
988
|
-
"weak"
|
|
844
|
+
"colors",
|
|
845
|
+
"lemon",
|
|
846
|
+
"55"
|
|
989
847
|
],
|
|
990
|
-
"value": "#
|
|
991
|
-
"description": "Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default"
|
|
848
|
+
"value": "#765500"
|
|
992
849
|
},
|
|
993
850
|
{
|
|
994
851
|
"path": [
|
|
995
|
-
"
|
|
996
|
-
"
|
|
997
|
-
"
|
|
998
|
-
"bg",
|
|
999
|
-
"default"
|
|
852
|
+
"colors",
|
|
853
|
+
"lemon",
|
|
854
|
+
"60"
|
|
1000
855
|
],
|
|
1001
|
-
"value": "#
|
|
1002
|
-
"description": "Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak"
|
|
856
|
+
"value": "#614600"
|
|
1003
857
|
},
|
|
1004
858
|
{
|
|
1005
859
|
"path": [
|
|
1006
|
-
"
|
|
1007
|
-
"
|
|
1008
|
-
"
|
|
1009
|
-
"bg",
|
|
1010
|
-
"strong"
|
|
860
|
+
"colors",
|
|
861
|
+
"lemon",
|
|
862
|
+
"65"
|
|
1011
863
|
],
|
|
1012
|
-
"value": "#
|
|
1013
|
-
"description": "Use sparsely, mainly included in some component states"
|
|
864
|
+
"value": "#4D3700"
|
|
1014
865
|
},
|
|
1015
866
|
{
|
|
1016
867
|
"path": [
|
|
1017
|
-
"
|
|
1018
|
-
"
|
|
1019
|
-
"
|
|
1020
|
-
"bg",
|
|
1021
|
-
"strongest"
|
|
868
|
+
"colors",
|
|
869
|
+
"lemon",
|
|
870
|
+
"70"
|
|
1022
871
|
],
|
|
1023
|
-
"value": "#
|
|
1024
|
-
"description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout"
|
|
872
|
+
"value": "#312E1A"
|
|
1025
873
|
},
|
|
1026
874
|
{
|
|
1027
875
|
"path": [
|
|
1028
|
-
"
|
|
1029
|
-
"
|
|
1030
|
-
"
|
|
1031
|
-
"border",
|
|
1032
|
-
"weak"
|
|
876
|
+
"colors",
|
|
877
|
+
"lemon",
|
|
878
|
+
"75"
|
|
1033
879
|
],
|
|
1034
|
-
"value": "#
|
|
1035
|
-
"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"
|
|
880
|
+
"value": "#2E2100"
|
|
1036
881
|
},
|
|
1037
882
|
{
|
|
1038
883
|
"path": [
|
|
1039
|
-
"
|
|
1040
|
-
"
|
|
1041
|
-
"
|
|
1042
|
-
"border",
|
|
1043
|
-
"strong"
|
|
884
|
+
"colors",
|
|
885
|
+
"lemon",
|
|
886
|
+
"80"
|
|
1044
887
|
],
|
|
1045
|
-
"value": "#
|
|
1046
|
-
"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"
|
|
888
|
+
"value": "#251B00"
|
|
1047
889
|
},
|
|
1048
890
|
{
|
|
1049
891
|
"path": [
|
|
1050
|
-
"
|
|
1051
|
-
"
|
|
1052
|
-
"
|
|
1053
|
-
"hover"
|
|
892
|
+
"colors",
|
|
893
|
+
"lavender",
|
|
894
|
+
"10"
|
|
1054
895
|
],
|
|
1055
|
-
"value": "
|
|
1056
|
-
"description": "Used for neutral hover states on components"
|
|
896
|
+
"value": "#F7F3FF"
|
|
1057
897
|
},
|
|
1058
898
|
{
|
|
1059
899
|
"path": [
|
|
1060
|
-
"
|
|
1061
|
-
"
|
|
1062
|
-
"
|
|
1063
|
-
"pressed"
|
|
900
|
+
"colors",
|
|
901
|
+
"lavender",
|
|
902
|
+
"15"
|
|
1064
903
|
],
|
|
1065
|
-
"value": "
|
|
1066
|
-
"description": "Used for neutral pressed states on components"
|
|
904
|
+
"value": "#E9DEFF"
|
|
1067
905
|
},
|
|
1068
906
|
{
|
|
1069
907
|
"path": [
|
|
1070
|
-
"
|
|
1071
|
-
"
|
|
1072
|
-
"
|
|
1073
|
-
"text"
|
|
908
|
+
"colors",
|
|
909
|
+
"lavender",
|
|
910
|
+
"20"
|
|
1074
911
|
],
|
|
1075
|
-
"value": "#
|
|
1076
|
-
"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"
|
|
912
|
+
"value": "#CCB4FF"
|
|
1077
913
|
},
|
|
1078
914
|
{
|
|
1079
915
|
"path": [
|
|
1080
|
-
"
|
|
1081
|
-
"
|
|
1082
|
-
"
|
|
1083
|
-
"icon"
|
|
916
|
+
"colors",
|
|
917
|
+
"lavender",
|
|
918
|
+
"25"
|
|
1084
919
|
],
|
|
1085
|
-
"value": "#
|
|
1086
|
-
"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"
|
|
920
|
+
"value": "#B38EFF"
|
|
1087
921
|
},
|
|
1088
922
|
{
|
|
1089
923
|
"path": [
|
|
1090
|
-
"
|
|
1091
|
-
"
|
|
1092
|
-
"
|
|
1093
|
-
"bg",
|
|
1094
|
-
"strong"
|
|
924
|
+
"colors",
|
|
925
|
+
"lavender",
|
|
926
|
+
"30"
|
|
1095
927
|
],
|
|
1096
|
-
"value": "#
|
|
1097
|
-
"description": "Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors"
|
|
928
|
+
"value": "#A07BEC"
|
|
1098
929
|
},
|
|
1099
930
|
{
|
|
1100
931
|
"path": [
|
|
1101
|
-
"
|
|
1102
|
-
"
|
|
1103
|
-
"
|
|
1104
|
-
"bg",
|
|
1105
|
-
"weak"
|
|
932
|
+
"colors",
|
|
933
|
+
"lavender",
|
|
934
|
+
"35"
|
|
1106
935
|
],
|
|
1107
|
-
"value": "#
|
|
1108
|
-
"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"
|
|
936
|
+
"value": "#8C68D9"
|
|
1109
937
|
},
|
|
1110
938
|
{
|
|
1111
939
|
"path": [
|
|
1112
|
-
"
|
|
1113
|
-
"
|
|
1114
|
-
"
|
|
1115
|
-
"border",
|
|
1116
|
-
"strong"
|
|
940
|
+
"colors",
|
|
941
|
+
"lavender",
|
|
942
|
+
"40"
|
|
1117
943
|
],
|
|
1118
|
-
"value": "#
|
|
1119
|
-
"description": "Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard"
|
|
944
|
+
"value": "#754EC8"
|
|
1120
945
|
},
|
|
1121
946
|
{
|
|
1122
947
|
"path": [
|
|
1123
|
-
"
|
|
1124
|
-
"
|
|
1125
|
-
"
|
|
1126
|
-
"border",
|
|
1127
|
-
"weak"
|
|
948
|
+
"colors",
|
|
949
|
+
"lavender",
|
|
950
|
+
"45"
|
|
1128
951
|
],
|
|
1129
|
-
"value": "#
|
|
1130
|
-
"description": "Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background"
|
|
952
|
+
"value": "#5A34AA"
|
|
1131
953
|
},
|
|
1132
954
|
{
|
|
1133
955
|
"path": [
|
|
1134
|
-
"
|
|
1135
|
-
"
|
|
1136
|
-
"
|
|
1137
|
-
"focus"
|
|
956
|
+
"colors",
|
|
957
|
+
"lavender",
|
|
958
|
+
"50"
|
|
1138
959
|
],
|
|
1139
|
-
"value": "#
|
|
1140
|
-
"description": "Used for all focused states"
|
|
960
|
+
"value": "#4B2894"
|
|
1141
961
|
},
|
|
1142
962
|
{
|
|
1143
963
|
"path": [
|
|
1144
|
-
"
|
|
1145
|
-
"
|
|
1146
|
-
"
|
|
1147
|
-
"hover",
|
|
1148
|
-
"weak"
|
|
964
|
+
"colors",
|
|
965
|
+
"lavender",
|
|
966
|
+
"55"
|
|
1149
967
|
],
|
|
1150
|
-
"value": "
|
|
1151
|
-
"description": "Used for hover states where the background is either transparent or use Neutral-bg-weak"
|
|
968
|
+
"value": "#3B1982"
|
|
1152
969
|
},
|
|
1153
970
|
{
|
|
1154
971
|
"path": [
|
|
1155
|
-
"
|
|
1156
|
-
"
|
|
1157
|
-
"
|
|
1158
|
-
"hover",
|
|
1159
|
-
"strong"
|
|
972
|
+
"colors",
|
|
973
|
+
"lavender",
|
|
974
|
+
"60"
|
|
1160
975
|
],
|
|
1161
|
-
"value": "#
|
|
1162
|
-
"description": "Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
|
|
976
|
+
"value": "#2C2A34"
|
|
1163
977
|
},
|
|
1164
978
|
{
|
|
1165
979
|
"path": [
|
|
1166
|
-
"
|
|
1167
|
-
"
|
|
1168
|
-
"
|
|
1169
|
-
"pressed",
|
|
1170
|
-
"weak"
|
|
980
|
+
"colors",
|
|
981
|
+
"lavender",
|
|
982
|
+
"65"
|
|
1171
983
|
],
|
|
1172
|
-
"value": "
|
|
1173
|
-
"description": "Used for pressed states where the background is either transparent or use Neutral-bg-weak"
|
|
984
|
+
"value": "#220954"
|
|
1174
985
|
},
|
|
1175
986
|
{
|
|
1176
987
|
"path": [
|
|
1177
|
-
"
|
|
1178
|
-
"
|
|
1179
|
-
"
|
|
1180
|
-
"pressed",
|
|
1181
|
-
"strong"
|
|
988
|
+
"colors",
|
|
989
|
+
"lavender",
|
|
990
|
+
"70"
|
|
1182
991
|
],
|
|
1183
|
-
"value": "#
|
|
1184
|
-
"description": "Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
|
|
992
|
+
"value": "#170146"
|
|
1185
993
|
},
|
|
1186
994
|
{
|
|
1187
995
|
"path": [
|
|
1188
|
-
"
|
|
1189
|
-
"
|
|
1190
|
-
"
|
|
1191
|
-
"text"
|
|
996
|
+
"colors",
|
|
997
|
+
"lavender",
|
|
998
|
+
"75"
|
|
1192
999
|
],
|
|
1193
|
-
"value": "#
|
|
1194
|
-
"description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1000
|
+
"value": "#0E002D"
|
|
1195
1001
|
},
|
|
1196
1002
|
{
|
|
1197
1003
|
"path": [
|
|
1198
|
-
"
|
|
1199
|
-
"
|
|
1200
|
-
"
|
|
1201
|
-
"icon"
|
|
1004
|
+
"colors",
|
|
1005
|
+
"lavender",
|
|
1006
|
+
"80"
|
|
1202
1007
|
],
|
|
1203
|
-
"value": "#
|
|
1204
|
-
"description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1008
|
+
"value": "#09001C"
|
|
1205
1009
|
},
|
|
1206
1010
|
{
|
|
1207
1011
|
"path": [
|
|
1208
|
-
"
|
|
1209
|
-
"
|
|
1210
|
-
"
|
|
1211
|
-
"bg",
|
|
1212
|
-
"strong"
|
|
1012
|
+
"colors",
|
|
1013
|
+
"marigold",
|
|
1014
|
+
"10"
|
|
1213
1015
|
],
|
|
1214
|
-
"value": "#
|
|
1215
|
-
"description": "Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states"
|
|
1016
|
+
"value": "#FFF0D2"
|
|
1216
1017
|
},
|
|
1217
1018
|
{
|
|
1218
1019
|
"path": [
|
|
1219
|
-
"
|
|
1220
|
-
"
|
|
1221
|
-
"
|
|
1222
|
-
"bg",
|
|
1223
|
-
"weak"
|
|
1020
|
+
"colors",
|
|
1021
|
+
"marigold",
|
|
1022
|
+
"15"
|
|
1224
1023
|
],
|
|
1225
|
-
"value": "#
|
|
1226
|
-
"description": "Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags"
|
|
1024
|
+
"value": "#FFDE9D"
|
|
1227
1025
|
},
|
|
1228
1026
|
{
|
|
1229
1027
|
"path": [
|
|
1230
|
-
"
|
|
1231
|
-
"
|
|
1232
|
-
"
|
|
1233
|
-
"border",
|
|
1234
|
-
"strong"
|
|
1028
|
+
"colors",
|
|
1029
|
+
"marigold",
|
|
1030
|
+
"20"
|
|
1235
1031
|
],
|
|
1236
|
-
"value": "#
|
|
1237
|
-
"description": "Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels"
|
|
1032
|
+
"value": "#FFCF72"
|
|
1238
1033
|
},
|
|
1239
1034
|
{
|
|
1240
1035
|
"path": [
|
|
1241
|
-
"
|
|
1242
|
-
"
|
|
1243
|
-
"
|
|
1244
|
-
"border",
|
|
1245
|
-
"weak"
|
|
1036
|
+
"colors",
|
|
1037
|
+
"marigold",
|
|
1038
|
+
"25"
|
|
1246
1039
|
],
|
|
1247
|
-
"value": "#
|
|
1248
|
-
"description": "Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background"
|
|
1040
|
+
"value": "#FFC450"
|
|
1249
1041
|
},
|
|
1250
1042
|
{
|
|
1251
1043
|
"path": [
|
|
1252
|
-
"
|
|
1253
|
-
"
|
|
1254
|
-
"
|
|
1255
|
-
"hover",
|
|
1256
|
-
"weak"
|
|
1044
|
+
"colors",
|
|
1045
|
+
"marigold",
|
|
1046
|
+
"30"
|
|
1257
1047
|
],
|
|
1258
|
-
"value": "
|
|
1259
|
-
"description": "Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak"
|
|
1048
|
+
"value": "#FFB422"
|
|
1260
1049
|
},
|
|
1261
1050
|
{
|
|
1262
1051
|
"path": [
|
|
1263
|
-
"
|
|
1264
|
-
"
|
|
1265
|
-
"
|
|
1266
|
-
"hover",
|
|
1267
|
-
"strong"
|
|
1052
|
+
"colors",
|
|
1053
|
+
"marigold",
|
|
1054
|
+
"35"
|
|
1268
1055
|
],
|
|
1269
|
-
"value": "#
|
|
1270
|
-
"description": "Only used for hover states in critical filled buttons"
|
|
1056
|
+
"value": "#FFA901"
|
|
1271
1057
|
},
|
|
1272
1058
|
{
|
|
1273
1059
|
"path": [
|
|
1274
|
-
"
|
|
1275
|
-
"
|
|
1276
|
-
"
|
|
1277
|
-
"pressed",
|
|
1278
|
-
"weak"
|
|
1060
|
+
"colors",
|
|
1061
|
+
"marigold",
|
|
1062
|
+
"40"
|
|
1279
1063
|
],
|
|
1280
|
-
"value": "
|
|
1281
|
-
"description": "Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak"
|
|
1064
|
+
"value": "#EC9C00"
|
|
1282
1065
|
},
|
|
1283
1066
|
{
|
|
1284
1067
|
"path": [
|
|
1285
|
-
"
|
|
1286
|
-
"
|
|
1287
|
-
"
|
|
1288
|
-
"pressed",
|
|
1289
|
-
"strong"
|
|
1068
|
+
"colors",
|
|
1069
|
+
"marigold",
|
|
1070
|
+
"45"
|
|
1290
1071
|
],
|
|
1291
|
-
"value": "#
|
|
1292
|
-
"description": "Only used for pressed states in critical filled buttons"
|
|
1072
|
+
"value": "#DA9105"
|
|
1293
1073
|
},
|
|
1294
1074
|
{
|
|
1295
1075
|
"path": [
|
|
1296
|
-
"
|
|
1297
|
-
"
|
|
1298
|
-
"
|
|
1299
|
-
"text"
|
|
1076
|
+
"colors",
|
|
1077
|
+
"marigold",
|
|
1078
|
+
"50"
|
|
1300
1079
|
],
|
|
1301
|
-
"value": "#
|
|
1302
|
-
"description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1080
|
+
"value": "#BA7A00"
|
|
1303
1081
|
},
|
|
1304
1082
|
{
|
|
1305
1083
|
"path": [
|
|
1306
|
-
"
|
|
1307
|
-
"
|
|
1308
|
-
"
|
|
1309
|
-
"icon"
|
|
1084
|
+
"colors",
|
|
1085
|
+
"marigold",
|
|
1086
|
+
"55"
|
|
1310
1087
|
],
|
|
1311
|
-
"value": "#
|
|
1312
|
-
"description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1088
|
+
"value": "#986400"
|
|
1313
1089
|
},
|
|
1314
1090
|
{
|
|
1315
1091
|
"path": [
|
|
1316
|
-
"
|
|
1317
|
-
"
|
|
1318
|
-
"
|
|
1319
|
-
"bg",
|
|
1320
|
-
"strong"
|
|
1092
|
+
"colors",
|
|
1093
|
+
"marigold",
|
|
1094
|
+
"60"
|
|
1321
1095
|
],
|
|
1322
|
-
"value": "#
|
|
1323
|
-
"description": "Use sparsely. Only used for filled labels"
|
|
1096
|
+
"value": "#795000"
|
|
1324
1097
|
},
|
|
1325
1098
|
{
|
|
1326
1099
|
"path": [
|
|
1327
|
-
"
|
|
1328
|
-
"
|
|
1329
|
-
"
|
|
1330
|
-
"bg",
|
|
1331
|
-
"weak"
|
|
1100
|
+
"colors",
|
|
1101
|
+
"marigold",
|
|
1102
|
+
"65"
|
|
1332
1103
|
],
|
|
1333
|
-
"value": "#
|
|
1334
|
-
"description": "Used as backgrounds for warning components states such as banner and semi-filled labels"
|
|
1104
|
+
"value": "#624100"
|
|
1335
1105
|
},
|
|
1336
1106
|
{
|
|
1337
1107
|
"path": [
|
|
1338
|
-
"
|
|
1339
|
-
"
|
|
1340
|
-
"
|
|
1341
|
-
"border",
|
|
1342
|
-
"strong"
|
|
1108
|
+
"colors",
|
|
1109
|
+
"marigold",
|
|
1110
|
+
"70"
|
|
1343
1111
|
],
|
|
1344
|
-
"value": "#
|
|
1345
|
-
"description": "Use sparsely. Only used for outlined labels"
|
|
1112
|
+
"value": "#543800"
|
|
1346
1113
|
},
|
|
1347
1114
|
{
|
|
1348
1115
|
"path": [
|
|
1349
|
-
"
|
|
1350
|
-
"
|
|
1351
|
-
"
|
|
1352
|
-
"border",
|
|
1353
|
-
"weak"
|
|
1116
|
+
"colors",
|
|
1117
|
+
"marigold",
|
|
1118
|
+
"75"
|
|
1354
1119
|
],
|
|
1355
|
-
"value": "#
|
|
1356
|
-
"description": "Use sparsely. Mainly used in combination with elements that use the Warning-bg-weak to stand out more from the background"
|
|
1120
|
+
"value": "#422C00"
|
|
1357
1121
|
},
|
|
1358
1122
|
{
|
|
1359
1123
|
"path": [
|
|
1360
|
-
"
|
|
1361
|
-
"
|
|
1362
|
-
"
|
|
1363
|
-
"text"
|
|
1124
|
+
"colors",
|
|
1125
|
+
"marigold",
|
|
1126
|
+
"80"
|
|
1364
1127
|
],
|
|
1365
|
-
"value": "#
|
|
1366
|
-
"description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1128
|
+
"value": "#251900"
|
|
1367
1129
|
},
|
|
1368
1130
|
{
|
|
1369
1131
|
"path": [
|
|
1370
|
-
"
|
|
1371
|
-
"
|
|
1372
|
-
"
|
|
1373
|
-
"icon"
|
|
1132
|
+
"colors",
|
|
1133
|
+
"earth",
|
|
1134
|
+
"10"
|
|
1374
1135
|
],
|
|
1375
|
-
"value": "#
|
|
1376
|
-
"description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1136
|
+
"value": "#FFF7F0"
|
|
1377
1137
|
},
|
|
1378
1138
|
{
|
|
1379
1139
|
"path": [
|
|
1380
|
-
"
|
|
1381
|
-
"
|
|
1382
|
-
"
|
|
1383
|
-
"bg",
|
|
1384
|
-
"strong"
|
|
1140
|
+
"colors",
|
|
1141
|
+
"earth",
|
|
1142
|
+
"15"
|
|
1385
1143
|
],
|
|
1386
|
-
"value": "#
|
|
1387
|
-
"description": "Use sparsely. Only used for filled labels"
|
|
1144
|
+
"value": "#FDEDDA"
|
|
1388
1145
|
},
|
|
1389
1146
|
{
|
|
1390
1147
|
"path": [
|
|
1391
|
-
"
|
|
1392
|
-
"
|
|
1393
|
-
"
|
|
1394
|
-
"bg",
|
|
1395
|
-
"weak"
|
|
1148
|
+
"colors",
|
|
1149
|
+
"earth",
|
|
1150
|
+
"20"
|
|
1396
1151
|
],
|
|
1397
|
-
"value": "#
|
|
1398
|
-
"description": "Used as backgrounds for success components states such as banner and semi-filled labels"
|
|
1152
|
+
"value": "#FFE1C5"
|
|
1399
1153
|
},
|
|
1400
1154
|
{
|
|
1401
1155
|
"path": [
|
|
1402
|
-
"
|
|
1403
|
-
"
|
|
1404
|
-
"
|
|
1405
|
-
"border",
|
|
1406
|
-
"strong"
|
|
1156
|
+
"colors",
|
|
1157
|
+
"earth",
|
|
1158
|
+
"25"
|
|
1407
1159
|
],
|
|
1408
|
-
"value": "#
|
|
1409
|
-
"description": "Use sparsely. Only used for outlined labels"
|
|
1160
|
+
"value": "#F8D1AE"
|
|
1410
1161
|
},
|
|
1411
1162
|
{
|
|
1412
1163
|
"path": [
|
|
1413
|
-
"
|
|
1414
|
-
"
|
|
1415
|
-
"
|
|
1416
|
-
"border",
|
|
1417
|
-
"weak"
|
|
1164
|
+
"colors",
|
|
1165
|
+
"earth",
|
|
1166
|
+
"30"
|
|
1418
1167
|
],
|
|
1419
|
-
"value": "#
|
|
1420
|
-
|
|
1421
|
-
}
|
|
1422
|
-
],
|
|
1423
|
-
"colors": [
|
|
1168
|
+
"value": "#ECBF96"
|
|
1169
|
+
},
|
|
1424
1170
|
{
|
|
1425
1171
|
"path": [
|
|
1426
1172
|
"colors",
|
|
1427
|
-
"
|
|
1428
|
-
"
|
|
1173
|
+
"earth",
|
|
1174
|
+
"35"
|
|
1429
1175
|
],
|
|
1430
|
-
"value": "#
|
|
1176
|
+
"value": "#E0AE7F"
|
|
1431
1177
|
},
|
|
1432
1178
|
{
|
|
1433
1179
|
"path": [
|
|
1434
1180
|
"colors",
|
|
1435
|
-
"
|
|
1436
|
-
"
|
|
1181
|
+
"earth",
|
|
1182
|
+
"40"
|
|
1437
1183
|
],
|
|
1438
|
-
"value": "#
|
|
1184
|
+
"value": "#D19660"
|
|
1439
1185
|
},
|
|
1440
1186
|
{
|
|
1441
1187
|
"path": [
|
|
1442
1188
|
"colors",
|
|
1443
|
-
"
|
|
1444
|
-
"
|
|
1189
|
+
"earth",
|
|
1190
|
+
"45"
|
|
1445
1191
|
],
|
|
1446
|
-
"value": "#
|
|
1192
|
+
"value": "#AF7C4D"
|
|
1447
1193
|
},
|
|
1448
1194
|
{
|
|
1449
1195
|
"path": [
|
|
1450
1196
|
"colors",
|
|
1451
|
-
"
|
|
1452
|
-
"
|
|
1197
|
+
"earth",
|
|
1198
|
+
"50"
|
|
1453
1199
|
],
|
|
1454
|
-
"value": "#
|
|
1200
|
+
"value": "#8D5D31"
|
|
1455
1201
|
},
|
|
1456
1202
|
{
|
|
1457
1203
|
"path": [
|
|
1458
1204
|
"colors",
|
|
1459
|
-
"
|
|
1460
|
-
"
|
|
1205
|
+
"earth",
|
|
1206
|
+
"55"
|
|
1461
1207
|
],
|
|
1462
|
-
"value": "#
|
|
1208
|
+
"value": "#763F18"
|
|
1463
1209
|
},
|
|
1464
1210
|
{
|
|
1465
1211
|
"path": [
|
|
1466
1212
|
"colors",
|
|
1467
|
-
"
|
|
1213
|
+
"earth",
|
|
1468
1214
|
"60"
|
|
1469
1215
|
],
|
|
1470
|
-
"value": "#
|
|
1216
|
+
"value": "#66310B"
|
|
1471
1217
|
},
|
|
1472
1218
|
{
|
|
1473
1219
|
"path": [
|
|
1474
1220
|
"colors",
|
|
1475
|
-
"
|
|
1221
|
+
"earth",
|
|
1222
|
+
"65"
|
|
1223
|
+
],
|
|
1224
|
+
"value": "#5B2B09"
|
|
1225
|
+
},
|
|
1226
|
+
{
|
|
1227
|
+
"path": [
|
|
1228
|
+
"colors",
|
|
1229
|
+
"earth",
|
|
1476
1230
|
"70"
|
|
1477
1231
|
],
|
|
1478
|
-
"value": "#
|
|
1232
|
+
"value": "#481F01"
|
|
1479
1233
|
},
|
|
1480
1234
|
{
|
|
1481
1235
|
"path": [
|
|
1482
1236
|
"colors",
|
|
1483
|
-
"
|
|
1237
|
+
"earth",
|
|
1238
|
+
"75"
|
|
1239
|
+
],
|
|
1240
|
+
"value": "#361700"
|
|
1241
|
+
},
|
|
1242
|
+
{
|
|
1243
|
+
"path": [
|
|
1244
|
+
"colors",
|
|
1245
|
+
"earth",
|
|
1246
|
+
"80"
|
|
1247
|
+
],
|
|
1248
|
+
"value": "#220E00"
|
|
1249
|
+
},
|
|
1250
|
+
{
|
|
1251
|
+
"path": [
|
|
1252
|
+
"colors",
|
|
1253
|
+
"neutral",
|
|
1484
1254
|
"10"
|
|
1485
1255
|
],
|
|
1486
|
-
"value": "#
|
|
1256
|
+
"value": "#FFFFFF"
|
|
1487
1257
|
},
|
|
1488
1258
|
{
|
|
1489
1259
|
"path": [
|
|
1490
1260
|
"colors",
|
|
1491
|
-
"
|
|
1261
|
+
"neutral",
|
|
1262
|
+
"15"
|
|
1263
|
+
],
|
|
1264
|
+
"value": "#F5F6F6"
|
|
1265
|
+
},
|
|
1266
|
+
{
|
|
1267
|
+
"path": [
|
|
1268
|
+
"colors",
|
|
1269
|
+
"neutral",
|
|
1492
1270
|
"20"
|
|
1493
1271
|
],
|
|
1494
|
-
"value": "#
|
|
1272
|
+
"value": "#E2E3E5"
|
|
1495
1273
|
},
|
|
1496
1274
|
{
|
|
1497
1275
|
"path": [
|
|
1498
1276
|
"colors",
|
|
1499
|
-
"
|
|
1277
|
+
"neutral",
|
|
1278
|
+
"25"
|
|
1279
|
+
],
|
|
1280
|
+
"value": "#CFD1D4"
|
|
1281
|
+
},
|
|
1282
|
+
{
|
|
1283
|
+
"path": [
|
|
1284
|
+
"colors",
|
|
1285
|
+
"neutral",
|
|
1500
1286
|
"30"
|
|
1501
1287
|
],
|
|
1502
|
-
"value": "#
|
|
1288
|
+
"value": "#BBBEC3"
|
|
1503
1289
|
},
|
|
1504
1290
|
{
|
|
1505
1291
|
"path": [
|
|
1506
1292
|
"colors",
|
|
1507
|
-
"
|
|
1293
|
+
"neutral",
|
|
1294
|
+
"35"
|
|
1295
|
+
],
|
|
1296
|
+
"value": "#A8ACB2"
|
|
1297
|
+
},
|
|
1298
|
+
{
|
|
1299
|
+
"path": [
|
|
1300
|
+
"colors",
|
|
1301
|
+
"neutral",
|
|
1508
1302
|
"40"
|
|
1509
1303
|
],
|
|
1510
|
-
"value": "#
|
|
1304
|
+
"value": "#959AA1"
|
|
1511
1305
|
},
|
|
1512
1306
|
{
|
|
1513
1307
|
"path": [
|
|
1514
1308
|
"colors",
|
|
1515
|
-
"
|
|
1309
|
+
"neutral",
|
|
1310
|
+
"45"
|
|
1311
|
+
],
|
|
1312
|
+
"value": "#818790"
|
|
1313
|
+
},
|
|
1314
|
+
{
|
|
1315
|
+
"path": [
|
|
1316
|
+
"colors",
|
|
1317
|
+
"neutral",
|
|
1516
1318
|
"50"
|
|
1517
1319
|
],
|
|
1518
|
-
"value": "#
|
|
1320
|
+
"value": "#6F757E"
|
|
1519
1321
|
},
|
|
1520
1322
|
{
|
|
1521
1323
|
"path": [
|
|
1522
1324
|
"colors",
|
|
1523
|
-
"
|
|
1325
|
+
"neutral",
|
|
1326
|
+
"55"
|
|
1327
|
+
],
|
|
1328
|
+
"value": "#5E636A"
|
|
1329
|
+
},
|
|
1330
|
+
{
|
|
1331
|
+
"path": [
|
|
1332
|
+
"colors",
|
|
1333
|
+
"neutral",
|
|
1524
1334
|
"60"
|
|
1525
1335
|
],
|
|
1526
|
-
"value": "#
|
|
1336
|
+
"value": "#4D5157"
|
|
1527
1337
|
},
|
|
1528
1338
|
{
|
|
1529
1339
|
"path": [
|
|
1530
1340
|
"colors",
|
|
1531
|
-
"
|
|
1341
|
+
"neutral",
|
|
1342
|
+
"65"
|
|
1343
|
+
],
|
|
1344
|
+
"value": "#3C3F44"
|
|
1345
|
+
},
|
|
1346
|
+
{
|
|
1347
|
+
"path": [
|
|
1348
|
+
"colors",
|
|
1349
|
+
"neutral",
|
|
1532
1350
|
"70"
|
|
1533
1351
|
],
|
|
1534
|
-
"value": "#
|
|
1352
|
+
"value": "#212325"
|
|
1535
1353
|
},
|
|
1536
1354
|
{
|
|
1537
1355
|
"path": [
|
|
1538
1356
|
"colors",
|
|
1539
|
-
"
|
|
1357
|
+
"neutral",
|
|
1358
|
+
"75"
|
|
1359
|
+
],
|
|
1360
|
+
"value": "#1A1B1D"
|
|
1361
|
+
},
|
|
1362
|
+
{
|
|
1363
|
+
"path": [
|
|
1364
|
+
"colors",
|
|
1365
|
+
"neutral",
|
|
1366
|
+
"80"
|
|
1367
|
+
],
|
|
1368
|
+
"value": "#09090A"
|
|
1369
|
+
},
|
|
1370
|
+
{
|
|
1371
|
+
"path": [
|
|
1372
|
+
"colors",
|
|
1373
|
+
"beige",
|
|
1540
1374
|
"10"
|
|
1541
1375
|
],
|
|
1542
|
-
"value": "#
|
|
1376
|
+
"value": "#FFFCF4"
|
|
1543
1377
|
},
|
|
1544
1378
|
{
|
|
1545
1379
|
"path": [
|
|
1546
1380
|
"colors",
|
|
1547
|
-
"
|
|
1381
|
+
"beige",
|
|
1548
1382
|
"20"
|
|
1549
1383
|
],
|
|
1550
|
-
"value": "#
|
|
1384
|
+
"value": "#FFF7E3"
|
|
1551
1385
|
},
|
|
1552
1386
|
{
|
|
1553
1387
|
"path": [
|
|
1554
1388
|
"colors",
|
|
1555
|
-
"
|
|
1389
|
+
"beige",
|
|
1556
1390
|
"30"
|
|
1557
1391
|
],
|
|
1558
|
-
"value": "#
|
|
1392
|
+
"value": "#F2EAD4"
|
|
1559
1393
|
},
|
|
1560
1394
|
{
|
|
1561
1395
|
"path": [
|
|
1562
1396
|
"colors",
|
|
1563
|
-
"
|
|
1397
|
+
"beige",
|
|
1564
1398
|
"40"
|
|
1565
1399
|
],
|
|
1566
|
-
"value": "#
|
|
1400
|
+
"value": "#C1B9A0"
|
|
1567
1401
|
},
|
|
1568
1402
|
{
|
|
1569
1403
|
"path": [
|
|
1570
1404
|
"colors",
|
|
1571
|
-
"
|
|
1405
|
+
"beige",
|
|
1572
1406
|
"50"
|
|
1573
1407
|
],
|
|
1574
|
-
"value": "#
|
|
1408
|
+
"value": "#999384"
|
|
1575
1409
|
},
|
|
1576
1410
|
{
|
|
1577
1411
|
"path": [
|
|
1578
1412
|
"colors",
|
|
1579
|
-
"
|
|
1413
|
+
"beige",
|
|
1580
1414
|
"60"
|
|
1581
1415
|
],
|
|
1582
|
-
"value": "#
|
|
1416
|
+
"value": "#666050"
|
|
1583
1417
|
},
|
|
1584
1418
|
{
|
|
1585
1419
|
"path": [
|
|
1586
1420
|
"colors",
|
|
1587
|
-
"
|
|
1421
|
+
"beige",
|
|
1588
1422
|
"70"
|
|
1589
1423
|
],
|
|
1590
|
-
"value": "#
|
|
1424
|
+
"value": "#3F3824"
|
|
1425
|
+
},
|
|
1426
|
+
{
|
|
1427
|
+
"path": [
|
|
1428
|
+
"colors",
|
|
1429
|
+
"highlights",
|
|
1430
|
+
"yellow"
|
|
1431
|
+
],
|
|
1432
|
+
"value": "#FAFF00"
|
|
1433
|
+
},
|
|
1434
|
+
{
|
|
1435
|
+
"path": [
|
|
1436
|
+
"colors",
|
|
1437
|
+
"highlights",
|
|
1438
|
+
"periwinkle"
|
|
1439
|
+
],
|
|
1440
|
+
"value": "#6A82FF"
|
|
1441
|
+
}
|
|
1442
|
+
],
|
|
1443
|
+
"theme-dark-shadow": [
|
|
1444
|
+
{
|
|
1445
|
+
"path": [
|
|
1446
|
+
"theme",
|
|
1447
|
+
"dark",
|
|
1448
|
+
"boxShadow",
|
|
1449
|
+
"raised"
|
|
1450
|
+
],
|
|
1451
|
+
"value": "0px 1px 2px 0px rgba(9, 9, 10, 0.50)",
|
|
1452
|
+
"description": "Used for small components that need sharper shadows to illustrate elevation."
|
|
1453
|
+
},
|
|
1454
|
+
{
|
|
1455
|
+
"path": [
|
|
1456
|
+
"theme",
|
|
1457
|
+
"dark",
|
|
1458
|
+
"boxShadow",
|
|
1459
|
+
"overlay"
|
|
1460
|
+
],
|
|
1461
|
+
"value": "0px 8px 20px 0px rgba(9, 9, 10, 0.50)",
|
|
1462
|
+
"description": "Used for most mid/large sized components with floating states. Components include banner, button, card, drop down, progress bar and view selector"
|
|
1463
|
+
}
|
|
1464
|
+
],
|
|
1465
|
+
"theme-dark-palette": [
|
|
1466
|
+
{
|
|
1467
|
+
"path": [
|
|
1468
|
+
"theme",
|
|
1469
|
+
"dark",
|
|
1470
|
+
"palette",
|
|
1471
|
+
"neutral",
|
|
1472
|
+
"text",
|
|
1473
|
+
"weakest"
|
|
1474
|
+
],
|
|
1475
|
+
"value": "#818790",
|
|
1476
|
+
"description": "Should be used mainly for disabled text"
|
|
1477
|
+
},
|
|
1478
|
+
{
|
|
1479
|
+
"path": [
|
|
1480
|
+
"theme",
|
|
1481
|
+
"dark",
|
|
1482
|
+
"palette",
|
|
1483
|
+
"neutral",
|
|
1484
|
+
"text",
|
|
1485
|
+
"weaker"
|
|
1486
|
+
],
|
|
1487
|
+
"value": "#A8ACB2",
|
|
1488
|
+
"description": "Should be used sparsely and mainly for headers and subtitles to differentiate from input text"
|
|
1489
|
+
},
|
|
1490
|
+
{
|
|
1491
|
+
"path": [
|
|
1492
|
+
"theme",
|
|
1493
|
+
"dark",
|
|
1494
|
+
"palette",
|
|
1495
|
+
"neutral",
|
|
1496
|
+
"text",
|
|
1497
|
+
"weak"
|
|
1498
|
+
],
|
|
1499
|
+
"value": "#CFD1D4",
|
|
1500
|
+
"description": "Used for labels, icon color and descriptions"
|
|
1501
|
+
},
|
|
1502
|
+
{
|
|
1503
|
+
"path": [
|
|
1504
|
+
"theme",
|
|
1505
|
+
"dark",
|
|
1506
|
+
"palette",
|
|
1507
|
+
"neutral",
|
|
1508
|
+
"text",
|
|
1509
|
+
"default"
|
|
1510
|
+
],
|
|
1511
|
+
"value": "#F5F6F6",
|
|
1512
|
+
"description": "Used for all default text"
|
|
1513
|
+
},
|
|
1514
|
+
{
|
|
1515
|
+
"path": [
|
|
1516
|
+
"theme",
|
|
1517
|
+
"dark",
|
|
1518
|
+
"palette",
|
|
1519
|
+
"neutral",
|
|
1520
|
+
"text",
|
|
1521
|
+
"inverse"
|
|
1522
|
+
],
|
|
1523
|
+
"value": "#1A1B1D",
|
|
1524
|
+
"description": "Default text on Neutral-bg-strongest or other dark backgrounds"
|
|
1525
|
+
},
|
|
1526
|
+
{
|
|
1527
|
+
"path": [
|
|
1528
|
+
"theme",
|
|
1529
|
+
"dark",
|
|
1530
|
+
"palette",
|
|
1531
|
+
"neutral",
|
|
1532
|
+
"icon"
|
|
1533
|
+
],
|
|
1534
|
+
"value": "#CFD1D4",
|
|
1535
|
+
"description": "Used as a default neutral icon color"
|
|
1536
|
+
},
|
|
1537
|
+
{
|
|
1538
|
+
"path": [
|
|
1539
|
+
"theme",
|
|
1540
|
+
"dark",
|
|
1541
|
+
"palette",
|
|
1542
|
+
"neutral",
|
|
1543
|
+
"bg",
|
|
1544
|
+
"weak"
|
|
1545
|
+
],
|
|
1546
|
+
"value": "#212325",
|
|
1547
|
+
"description": "Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default"
|
|
1548
|
+
},
|
|
1549
|
+
{
|
|
1550
|
+
"path": [
|
|
1551
|
+
"theme",
|
|
1552
|
+
"dark",
|
|
1553
|
+
"palette",
|
|
1554
|
+
"neutral",
|
|
1555
|
+
"bg",
|
|
1556
|
+
"default"
|
|
1557
|
+
],
|
|
1558
|
+
"value": "#1A1B1D",
|
|
1559
|
+
"description": "Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak"
|
|
1560
|
+
},
|
|
1561
|
+
{
|
|
1562
|
+
"path": [
|
|
1563
|
+
"theme",
|
|
1564
|
+
"dark",
|
|
1565
|
+
"palette",
|
|
1566
|
+
"neutral",
|
|
1567
|
+
"bg",
|
|
1568
|
+
"strong"
|
|
1569
|
+
],
|
|
1570
|
+
"value": "#3C3F44",
|
|
1571
|
+
"description": "Use sparsely, mainly included in some component states"
|
|
1572
|
+
},
|
|
1573
|
+
{
|
|
1574
|
+
"path": [
|
|
1575
|
+
"theme",
|
|
1576
|
+
"dark",
|
|
1577
|
+
"palette",
|
|
1578
|
+
"neutral",
|
|
1579
|
+
"bg",
|
|
1580
|
+
"stronger"
|
|
1581
|
+
],
|
|
1582
|
+
"value": "#6F757E"
|
|
1583
|
+
},
|
|
1584
|
+
{
|
|
1585
|
+
"path": [
|
|
1586
|
+
"theme",
|
|
1587
|
+
"dark",
|
|
1588
|
+
"palette",
|
|
1589
|
+
"neutral",
|
|
1590
|
+
"bg",
|
|
1591
|
+
"strongest"
|
|
1592
|
+
],
|
|
1593
|
+
"value": "#FFFFFF",
|
|
1594
|
+
"description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout"
|
|
1595
|
+
},
|
|
1596
|
+
{
|
|
1597
|
+
"path": [
|
|
1598
|
+
"theme",
|
|
1599
|
+
"dark",
|
|
1600
|
+
"palette",
|
|
1601
|
+
"neutral",
|
|
1602
|
+
"bg",
|
|
1603
|
+
"status"
|
|
1604
|
+
],
|
|
1605
|
+
"value": "#A8ACB2",
|
|
1606
|
+
"description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout"
|
|
1607
|
+
},
|
|
1608
|
+
{
|
|
1609
|
+
"path": [
|
|
1610
|
+
"theme",
|
|
1611
|
+
"dark",
|
|
1612
|
+
"palette",
|
|
1613
|
+
"neutral",
|
|
1614
|
+
"bg",
|
|
1615
|
+
"on-bg-weak"
|
|
1616
|
+
],
|
|
1617
|
+
"value": "#818790"
|
|
1618
|
+
},
|
|
1619
|
+
{
|
|
1620
|
+
"path": [
|
|
1621
|
+
"theme",
|
|
1622
|
+
"dark",
|
|
1623
|
+
"palette",
|
|
1624
|
+
"neutral",
|
|
1625
|
+
"border",
|
|
1626
|
+
"weak"
|
|
1627
|
+
],
|
|
1628
|
+
"value": "#3C3F44",
|
|
1629
|
+
"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"
|
|
1630
|
+
},
|
|
1631
|
+
{
|
|
1632
|
+
"path": [
|
|
1633
|
+
"theme",
|
|
1634
|
+
"dark",
|
|
1635
|
+
"palette",
|
|
1636
|
+
"neutral",
|
|
1637
|
+
"border",
|
|
1638
|
+
"strong"
|
|
1639
|
+
],
|
|
1640
|
+
"value": "#6F757E",
|
|
1641
|
+
"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"
|
|
1642
|
+
},
|
|
1643
|
+
{
|
|
1644
|
+
"path": [
|
|
1645
|
+
"theme",
|
|
1646
|
+
"dark",
|
|
1647
|
+
"palette",
|
|
1648
|
+
"neutral",
|
|
1649
|
+
"border",
|
|
1650
|
+
"strongest"
|
|
1651
|
+
],
|
|
1652
|
+
"value": "#BBBEC3"
|
|
1653
|
+
},
|
|
1654
|
+
{
|
|
1655
|
+
"path": [
|
|
1656
|
+
"theme",
|
|
1657
|
+
"dark",
|
|
1658
|
+
"palette",
|
|
1659
|
+
"neutral",
|
|
1660
|
+
"hover"
|
|
1661
|
+
],
|
|
1662
|
+
"value": "#959AA1",
|
|
1663
|
+
"description": "Used for neutral hover states on components"
|
|
1664
|
+
},
|
|
1665
|
+
{
|
|
1666
|
+
"path": [
|
|
1667
|
+
"theme",
|
|
1668
|
+
"dark",
|
|
1669
|
+
"palette",
|
|
1670
|
+
"neutral",
|
|
1671
|
+
"pressed"
|
|
1672
|
+
],
|
|
1673
|
+
"value": "#959AA1",
|
|
1674
|
+
"description": "Used for neutral pressed states on components"
|
|
1675
|
+
},
|
|
1676
|
+
{
|
|
1677
|
+
"path": [
|
|
1678
|
+
"theme",
|
|
1679
|
+
"dark",
|
|
1680
|
+
"palette",
|
|
1681
|
+
"primary",
|
|
1682
|
+
"text"
|
|
1683
|
+
],
|
|
1684
|
+
"value": "#8FE3E8",
|
|
1685
|
+
"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"
|
|
1686
|
+
},
|
|
1687
|
+
{
|
|
1688
|
+
"path": [
|
|
1689
|
+
"theme",
|
|
1690
|
+
"dark",
|
|
1691
|
+
"palette",
|
|
1692
|
+
"primary",
|
|
1693
|
+
"icon"
|
|
1694
|
+
],
|
|
1695
|
+
"value": "#8FE3E8",
|
|
1696
|
+
"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"
|
|
1697
|
+
},
|
|
1698
|
+
{
|
|
1699
|
+
"path": [
|
|
1700
|
+
"theme",
|
|
1701
|
+
"dark",
|
|
1702
|
+
"palette",
|
|
1703
|
+
"primary",
|
|
1704
|
+
"bg",
|
|
1705
|
+
"weak"
|
|
1706
|
+
],
|
|
1707
|
+
"value": "#262F31",
|
|
1708
|
+
"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"
|
|
1709
|
+
},
|
|
1710
|
+
{
|
|
1711
|
+
"path": [
|
|
1712
|
+
"theme",
|
|
1713
|
+
"dark",
|
|
1714
|
+
"palette",
|
|
1715
|
+
"primary",
|
|
1716
|
+
"bg",
|
|
1717
|
+
"strong"
|
|
1718
|
+
],
|
|
1719
|
+
"value": "#8FE3E8",
|
|
1720
|
+
"description": "Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors"
|
|
1721
|
+
},
|
|
1722
|
+
{
|
|
1723
|
+
"path": [
|
|
1724
|
+
"theme",
|
|
1725
|
+
"dark",
|
|
1726
|
+
"palette",
|
|
1727
|
+
"primary",
|
|
1728
|
+
"bg",
|
|
1729
|
+
"status"
|
|
1730
|
+
],
|
|
1731
|
+
"value": "#8FE3E8"
|
|
1732
|
+
},
|
|
1733
|
+
{
|
|
1734
|
+
"path": [
|
|
1735
|
+
"theme",
|
|
1736
|
+
"dark",
|
|
1737
|
+
"palette",
|
|
1738
|
+
"primary",
|
|
1739
|
+
"bg",
|
|
1740
|
+
"selected"
|
|
1741
|
+
],
|
|
1742
|
+
"value": "#262F31"
|
|
1743
|
+
},
|
|
1744
|
+
{
|
|
1745
|
+
"path": [
|
|
1746
|
+
"theme",
|
|
1747
|
+
"dark",
|
|
1748
|
+
"palette",
|
|
1749
|
+
"primary",
|
|
1750
|
+
"border",
|
|
1751
|
+
"strong"
|
|
1752
|
+
],
|
|
1753
|
+
"value": "#8FE3E8",
|
|
1754
|
+
"description": "Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard"
|
|
1755
|
+
},
|
|
1756
|
+
{
|
|
1757
|
+
"path": [
|
|
1758
|
+
"theme",
|
|
1759
|
+
"dark",
|
|
1760
|
+
"palette",
|
|
1761
|
+
"primary",
|
|
1762
|
+
"border",
|
|
1763
|
+
"weak"
|
|
1764
|
+
],
|
|
1765
|
+
"value": "#02507B",
|
|
1766
|
+
"description": "Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background"
|
|
1767
|
+
},
|
|
1768
|
+
{
|
|
1769
|
+
"path": [
|
|
1770
|
+
"theme",
|
|
1771
|
+
"dark",
|
|
1772
|
+
"palette",
|
|
1773
|
+
"primary",
|
|
1774
|
+
"focus"
|
|
1775
|
+
],
|
|
1776
|
+
"value": "#5DB3BF",
|
|
1777
|
+
"description": "Used for all focused states"
|
|
1778
|
+
},
|
|
1779
|
+
{
|
|
1780
|
+
"path": [
|
|
1781
|
+
"theme",
|
|
1782
|
+
"dark",
|
|
1783
|
+
"palette",
|
|
1784
|
+
"primary",
|
|
1785
|
+
"hover",
|
|
1786
|
+
"weak"
|
|
1787
|
+
],
|
|
1788
|
+
"value": "#8FE3E8",
|
|
1789
|
+
"description": "Used for hover states where the background is either transparent or use Neutral-bg-weak"
|
|
1790
|
+
},
|
|
1791
|
+
{
|
|
1792
|
+
"path": [
|
|
1793
|
+
"theme",
|
|
1794
|
+
"dark",
|
|
1795
|
+
"palette",
|
|
1796
|
+
"primary",
|
|
1797
|
+
"hover",
|
|
1798
|
+
"strong"
|
|
1799
|
+
],
|
|
1800
|
+
"value": "#5DB3BF",
|
|
1801
|
+
"description": "Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
|
|
1802
|
+
},
|
|
1803
|
+
{
|
|
1804
|
+
"path": [
|
|
1805
|
+
"theme",
|
|
1806
|
+
"dark",
|
|
1807
|
+
"palette",
|
|
1808
|
+
"primary",
|
|
1809
|
+
"pressed",
|
|
1810
|
+
"weak"
|
|
1811
|
+
],
|
|
1812
|
+
"value": "#8FE3E8",
|
|
1813
|
+
"description": "Used for pressed states where the background is either transparent or use Neutral-bg-weak"
|
|
1814
|
+
},
|
|
1815
|
+
{
|
|
1816
|
+
"path": [
|
|
1817
|
+
"theme",
|
|
1818
|
+
"dark",
|
|
1819
|
+
"palette",
|
|
1820
|
+
"primary",
|
|
1821
|
+
"pressed",
|
|
1822
|
+
"strong"
|
|
1823
|
+
],
|
|
1824
|
+
"value": "#4C99A4",
|
|
1825
|
+
"description": "Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
|
|
1826
|
+
},
|
|
1827
|
+
{
|
|
1828
|
+
"path": [
|
|
1829
|
+
"theme",
|
|
1830
|
+
"dark",
|
|
1831
|
+
"palette",
|
|
1832
|
+
"danger",
|
|
1833
|
+
"text"
|
|
1834
|
+
],
|
|
1835
|
+
"value": "#FFAA97",
|
|
1836
|
+
"description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1837
|
+
},
|
|
1838
|
+
{
|
|
1839
|
+
"path": [
|
|
1840
|
+
"theme",
|
|
1841
|
+
"dark",
|
|
1842
|
+
"palette",
|
|
1843
|
+
"danger",
|
|
1844
|
+
"icon"
|
|
1845
|
+
],
|
|
1846
|
+
"value": "#FFAA97",
|
|
1847
|
+
"description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1848
|
+
},
|
|
1849
|
+
{
|
|
1850
|
+
"path": [
|
|
1851
|
+
"theme",
|
|
1852
|
+
"dark",
|
|
1853
|
+
"palette",
|
|
1854
|
+
"danger",
|
|
1855
|
+
"bg",
|
|
1856
|
+
"strong"
|
|
1857
|
+
],
|
|
1858
|
+
"value": "#FFAA97",
|
|
1859
|
+
"description": "Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states"
|
|
1860
|
+
},
|
|
1861
|
+
{
|
|
1862
|
+
"path": [
|
|
1863
|
+
"theme",
|
|
1864
|
+
"dark",
|
|
1865
|
+
"palette",
|
|
1866
|
+
"danger",
|
|
1867
|
+
"bg",
|
|
1868
|
+
"weak"
|
|
1869
|
+
],
|
|
1870
|
+
"value": "#432520",
|
|
1871
|
+
"description": "Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags"
|
|
1872
|
+
},
|
|
1873
|
+
{
|
|
1874
|
+
"path": [
|
|
1875
|
+
"theme",
|
|
1876
|
+
"dark",
|
|
1877
|
+
"palette",
|
|
1878
|
+
"danger",
|
|
1879
|
+
"bg",
|
|
1880
|
+
"status"
|
|
1881
|
+
],
|
|
1882
|
+
"value": "#FFAA97"
|
|
1883
|
+
},
|
|
1884
|
+
{
|
|
1885
|
+
"path": [
|
|
1886
|
+
"theme",
|
|
1887
|
+
"dark",
|
|
1888
|
+
"palette",
|
|
1889
|
+
"danger",
|
|
1890
|
+
"border",
|
|
1891
|
+
"strong"
|
|
1892
|
+
],
|
|
1893
|
+
"value": "#FFAA97",
|
|
1894
|
+
"description": "Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels"
|
|
1895
|
+
},
|
|
1896
|
+
{
|
|
1897
|
+
"path": [
|
|
1898
|
+
"theme",
|
|
1899
|
+
"dark",
|
|
1900
|
+
"palette",
|
|
1901
|
+
"danger",
|
|
1902
|
+
"border",
|
|
1903
|
+
"weak"
|
|
1904
|
+
],
|
|
1905
|
+
"value": "#730E00",
|
|
1906
|
+
"description": "Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background"
|
|
1907
|
+
},
|
|
1908
|
+
{
|
|
1909
|
+
"path": [
|
|
1910
|
+
"theme",
|
|
1911
|
+
"dark",
|
|
1912
|
+
"palette",
|
|
1913
|
+
"danger",
|
|
1914
|
+
"hover",
|
|
1915
|
+
"weak"
|
|
1916
|
+
],
|
|
1917
|
+
"value": "#FFAA97",
|
|
1918
|
+
"description": "Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak"
|
|
1919
|
+
},
|
|
1920
|
+
{
|
|
1921
|
+
"path": [
|
|
1922
|
+
"theme",
|
|
1923
|
+
"dark",
|
|
1924
|
+
"palette",
|
|
1925
|
+
"danger",
|
|
1926
|
+
"hover",
|
|
1927
|
+
"strong"
|
|
1928
|
+
],
|
|
1929
|
+
"value": "#F96746",
|
|
1930
|
+
"description": "Only used for hover states in critical filled buttons"
|
|
1931
|
+
},
|
|
1932
|
+
{
|
|
1933
|
+
"path": [
|
|
1934
|
+
"theme",
|
|
1935
|
+
"dark",
|
|
1936
|
+
"palette",
|
|
1937
|
+
"danger",
|
|
1938
|
+
"pressed",
|
|
1939
|
+
"weak"
|
|
1940
|
+
],
|
|
1941
|
+
"value": "#FFAA97",
|
|
1942
|
+
"description": "Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak"
|
|
1943
|
+
},
|
|
1944
|
+
{
|
|
1945
|
+
"path": [
|
|
1946
|
+
"theme",
|
|
1947
|
+
"dark",
|
|
1948
|
+
"palette",
|
|
1949
|
+
"danger",
|
|
1950
|
+
"pressed",
|
|
1951
|
+
"strong"
|
|
1952
|
+
],
|
|
1953
|
+
"value": "#E84E2C",
|
|
1954
|
+
"description": "Only used for pressed states in critical filled buttons"
|
|
1955
|
+
},
|
|
1956
|
+
{
|
|
1957
|
+
"path": [
|
|
1958
|
+
"theme",
|
|
1959
|
+
"dark",
|
|
1960
|
+
"palette",
|
|
1961
|
+
"warning",
|
|
1962
|
+
"text"
|
|
1963
|
+
],
|
|
1964
|
+
"value": "#FFD600",
|
|
1965
|
+
"description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1966
|
+
},
|
|
1967
|
+
{
|
|
1968
|
+
"path": [
|
|
1969
|
+
"theme",
|
|
1970
|
+
"dark",
|
|
1971
|
+
"palette",
|
|
1972
|
+
"warning",
|
|
1973
|
+
"icon"
|
|
1974
|
+
],
|
|
1975
|
+
"value": "#FFD600",
|
|
1976
|
+
"description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1977
|
+
},
|
|
1978
|
+
{
|
|
1979
|
+
"path": [
|
|
1980
|
+
"theme",
|
|
1981
|
+
"dark",
|
|
1982
|
+
"palette",
|
|
1983
|
+
"warning",
|
|
1984
|
+
"bg",
|
|
1985
|
+
"strong"
|
|
1986
|
+
],
|
|
1987
|
+
"value": "#FFD600",
|
|
1988
|
+
"description": "Use sparsely. Only used for filled labels"
|
|
1989
|
+
},
|
|
1990
|
+
{
|
|
1991
|
+
"path": [
|
|
1992
|
+
"theme",
|
|
1993
|
+
"dark",
|
|
1994
|
+
"palette",
|
|
1995
|
+
"warning",
|
|
1996
|
+
"bg",
|
|
1997
|
+
"weak"
|
|
1998
|
+
],
|
|
1999
|
+
"value": "#312E1A",
|
|
2000
|
+
"description": "Used as backgrounds for warning components states such as banner and semi-filled labels"
|
|
2001
|
+
},
|
|
2002
|
+
{
|
|
2003
|
+
"path": [
|
|
2004
|
+
"theme",
|
|
2005
|
+
"dark",
|
|
2006
|
+
"palette",
|
|
2007
|
+
"warning",
|
|
2008
|
+
"bg",
|
|
2009
|
+
"status"
|
|
2010
|
+
],
|
|
2011
|
+
"value": "#FFD600"
|
|
2012
|
+
},
|
|
2013
|
+
{
|
|
2014
|
+
"path": [
|
|
2015
|
+
"theme",
|
|
2016
|
+
"dark",
|
|
2017
|
+
"palette",
|
|
2018
|
+
"warning",
|
|
2019
|
+
"border",
|
|
2020
|
+
"strong"
|
|
2021
|
+
],
|
|
2022
|
+
"value": "#FFD600",
|
|
2023
|
+
"description": "Use sparsely. Only used for outlined labels"
|
|
2024
|
+
},
|
|
2025
|
+
{
|
|
2026
|
+
"path": [
|
|
2027
|
+
"theme",
|
|
2028
|
+
"dark",
|
|
2029
|
+
"palette",
|
|
2030
|
+
"warning",
|
|
2031
|
+
"border",
|
|
2032
|
+
"weak"
|
|
2033
|
+
],
|
|
2034
|
+
"value": "#765500",
|
|
2035
|
+
"description": "Use sparsely. Mainly used in combination with elements that use the Warning-bg-weak to stand out more from the background"
|
|
2036
|
+
},
|
|
2037
|
+
{
|
|
2038
|
+
"path": [
|
|
2039
|
+
"theme",
|
|
2040
|
+
"dark",
|
|
2041
|
+
"palette",
|
|
2042
|
+
"success",
|
|
2043
|
+
"text"
|
|
2044
|
+
],
|
|
2045
|
+
"value": "#90CB62",
|
|
2046
|
+
"description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
2047
|
+
},
|
|
2048
|
+
{
|
|
2049
|
+
"path": [
|
|
2050
|
+
"theme",
|
|
2051
|
+
"dark",
|
|
2052
|
+
"palette",
|
|
2053
|
+
"success",
|
|
2054
|
+
"icon"
|
|
2055
|
+
],
|
|
2056
|
+
"value": "#90CB62",
|
|
2057
|
+
"description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
2058
|
+
},
|
|
2059
|
+
{
|
|
2060
|
+
"path": [
|
|
2061
|
+
"theme",
|
|
2062
|
+
"dark",
|
|
2063
|
+
"palette",
|
|
2064
|
+
"success",
|
|
2065
|
+
"bg",
|
|
2066
|
+
"strong"
|
|
2067
|
+
],
|
|
2068
|
+
"value": "#90CB62",
|
|
2069
|
+
"description": "Use sparsely. Only used for filled labels"
|
|
2070
|
+
},
|
|
2071
|
+
{
|
|
2072
|
+
"path": [
|
|
2073
|
+
"theme",
|
|
2074
|
+
"dark",
|
|
2075
|
+
"palette",
|
|
2076
|
+
"success",
|
|
2077
|
+
"bg",
|
|
2078
|
+
"weak"
|
|
2079
|
+
],
|
|
2080
|
+
"value": "#262D24",
|
|
2081
|
+
"description": "Used as backgrounds for success components states such as banner and semi-filled labels"
|
|
2082
|
+
},
|
|
2083
|
+
{
|
|
2084
|
+
"path": [
|
|
2085
|
+
"theme",
|
|
2086
|
+
"dark",
|
|
2087
|
+
"palette",
|
|
2088
|
+
"success",
|
|
2089
|
+
"bg",
|
|
2090
|
+
"status"
|
|
2091
|
+
],
|
|
2092
|
+
"value": "#90CB62"
|
|
2093
|
+
},
|
|
2094
|
+
{
|
|
2095
|
+
"path": [
|
|
2096
|
+
"theme",
|
|
2097
|
+
"dark",
|
|
2098
|
+
"palette",
|
|
2099
|
+
"success",
|
|
2100
|
+
"border",
|
|
2101
|
+
"strong"
|
|
2102
|
+
],
|
|
2103
|
+
"value": "#90CB62",
|
|
2104
|
+
"description": "Use sparsely. Only used for outlined labels"
|
|
2105
|
+
},
|
|
2106
|
+
{
|
|
2107
|
+
"path": [
|
|
2108
|
+
"theme",
|
|
2109
|
+
"dark",
|
|
2110
|
+
"palette",
|
|
2111
|
+
"success",
|
|
2112
|
+
"border",
|
|
2113
|
+
"weak"
|
|
2114
|
+
],
|
|
2115
|
+
"value": "#296127",
|
|
2116
|
+
"description": "Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background"
|
|
2117
|
+
},
|
|
2118
|
+
{
|
|
2119
|
+
"path": [
|
|
2120
|
+
"theme",
|
|
2121
|
+
"dark",
|
|
2122
|
+
"palette",
|
|
2123
|
+
"discovery",
|
|
2124
|
+
"text"
|
|
2125
|
+
],
|
|
2126
|
+
"value": "#CCB4FF",
|
|
2127
|
+
"description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
2128
|
+
},
|
|
2129
|
+
{
|
|
2130
|
+
"path": [
|
|
2131
|
+
"theme",
|
|
2132
|
+
"dark",
|
|
2133
|
+
"palette",
|
|
2134
|
+
"discovery",
|
|
2135
|
+
"icon"
|
|
2136
|
+
],
|
|
2137
|
+
"value": "#CCB4FF",
|
|
2138
|
+
"description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
2139
|
+
},
|
|
2140
|
+
{
|
|
2141
|
+
"path": [
|
|
2142
|
+
"theme",
|
|
2143
|
+
"dark",
|
|
2144
|
+
"palette",
|
|
2145
|
+
"discovery",
|
|
2146
|
+
"bg",
|
|
2147
|
+
"strong"
|
|
2148
|
+
],
|
|
2149
|
+
"value": "#CCB4FF",
|
|
2150
|
+
"description": "Use sparsely. Only used for filled labels"
|
|
2151
|
+
},
|
|
2152
|
+
{
|
|
2153
|
+
"path": [
|
|
2154
|
+
"theme",
|
|
2155
|
+
"dark",
|
|
2156
|
+
"palette",
|
|
2157
|
+
"discovery",
|
|
2158
|
+
"bg",
|
|
2159
|
+
"weak"
|
|
2160
|
+
],
|
|
2161
|
+
"value": "#2C2A34",
|
|
2162
|
+
"description": "Used as backgrounds for success components states such as banner and semi-filled labels"
|
|
2163
|
+
},
|
|
2164
|
+
{
|
|
2165
|
+
"path": [
|
|
2166
|
+
"theme",
|
|
2167
|
+
"dark",
|
|
2168
|
+
"palette",
|
|
2169
|
+
"discovery",
|
|
2170
|
+
"bg",
|
|
2171
|
+
"status"
|
|
2172
|
+
],
|
|
2173
|
+
"value": "#CCB4FF"
|
|
2174
|
+
},
|
|
2175
|
+
{
|
|
2176
|
+
"path": [
|
|
2177
|
+
"theme",
|
|
2178
|
+
"dark",
|
|
2179
|
+
"palette",
|
|
2180
|
+
"discovery",
|
|
2181
|
+
"border",
|
|
2182
|
+
"strong"
|
|
2183
|
+
],
|
|
2184
|
+
"value": "#CCB4FF",
|
|
2185
|
+
"description": "Use sparsely. Only used for outlined labels"
|
|
2186
|
+
},
|
|
2187
|
+
{
|
|
2188
|
+
"path": [
|
|
2189
|
+
"theme",
|
|
2190
|
+
"dark",
|
|
2191
|
+
"palette",
|
|
2192
|
+
"discovery",
|
|
2193
|
+
"border",
|
|
2194
|
+
"weak"
|
|
2195
|
+
],
|
|
2196
|
+
"value": "#4B2894",
|
|
2197
|
+
"description": "Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background"
|
|
2198
|
+
}
|
|
2199
|
+
],
|
|
2200
|
+
"theme-light-shadow": [
|
|
2201
|
+
{
|
|
2202
|
+
"path": [
|
|
2203
|
+
"theme",
|
|
2204
|
+
"light",
|
|
2205
|
+
"boxShadow",
|
|
2206
|
+
"raised"
|
|
2207
|
+
],
|
|
2208
|
+
"value": "0px 1px 2px 0px rgba(26, 27, 29, 0.18)",
|
|
2209
|
+
"description": "Used for small components that need sharper shadows to illustrate elevation."
|
|
2210
|
+
},
|
|
2211
|
+
{
|
|
2212
|
+
"path": [
|
|
2213
|
+
"theme",
|
|
2214
|
+
"light",
|
|
2215
|
+
"boxShadow",
|
|
2216
|
+
"overlay"
|
|
2217
|
+
],
|
|
2218
|
+
"value": "0px 4px 8px 0px rgba(26, 27, 29, 0.12)",
|
|
2219
|
+
"description": "Used for most mid/large sized components with floating states. Components include banner, button, card, drop down, progress bar and view selector"
|
|
2220
|
+
}
|
|
2221
|
+
],
|
|
2222
|
+
"theme-light-palette": [
|
|
2223
|
+
{
|
|
2224
|
+
"path": [
|
|
2225
|
+
"theme",
|
|
2226
|
+
"light",
|
|
2227
|
+
"palette",
|
|
2228
|
+
"neutral",
|
|
2229
|
+
"text",
|
|
2230
|
+
"weakest"
|
|
2231
|
+
],
|
|
2232
|
+
"value": "#A8ACB2",
|
|
2233
|
+
"description": "Should be used mainly for disabled text"
|
|
2234
|
+
},
|
|
2235
|
+
{
|
|
2236
|
+
"path": [
|
|
2237
|
+
"theme",
|
|
2238
|
+
"light",
|
|
2239
|
+
"palette",
|
|
2240
|
+
"neutral",
|
|
2241
|
+
"text",
|
|
2242
|
+
"weaker"
|
|
2243
|
+
],
|
|
2244
|
+
"value": "#5E636A",
|
|
2245
|
+
"description": "Should be used sparsely and mainly for headers and subtitles to differentiate from input text"
|
|
2246
|
+
},
|
|
2247
|
+
{
|
|
2248
|
+
"path": [
|
|
2249
|
+
"theme",
|
|
2250
|
+
"light",
|
|
2251
|
+
"palette",
|
|
2252
|
+
"neutral",
|
|
2253
|
+
"text",
|
|
2254
|
+
"weak"
|
|
2255
|
+
],
|
|
2256
|
+
"value": "#4D5157",
|
|
2257
|
+
"description": "Used for labels, icon color and descriptions"
|
|
2258
|
+
},
|
|
2259
|
+
{
|
|
2260
|
+
"path": [
|
|
2261
|
+
"theme",
|
|
2262
|
+
"light",
|
|
2263
|
+
"palette",
|
|
2264
|
+
"neutral",
|
|
2265
|
+
"text",
|
|
2266
|
+
"default"
|
|
2267
|
+
],
|
|
2268
|
+
"value": "#1A1B1D",
|
|
2269
|
+
"description": "Used for all default text"
|
|
2270
|
+
},
|
|
2271
|
+
{
|
|
2272
|
+
"path": [
|
|
2273
|
+
"theme",
|
|
2274
|
+
"light",
|
|
2275
|
+
"palette",
|
|
2276
|
+
"neutral",
|
|
2277
|
+
"text",
|
|
2278
|
+
"inverse"
|
|
2279
|
+
],
|
|
2280
|
+
"value": "#FFFFFF",
|
|
2281
|
+
"description": "Default text on neutral-bg-strongest or other dark backgrounds"
|
|
2282
|
+
},
|
|
2283
|
+
{
|
|
2284
|
+
"path": [
|
|
2285
|
+
"theme",
|
|
2286
|
+
"light",
|
|
2287
|
+
"palette",
|
|
2288
|
+
"neutral",
|
|
2289
|
+
"icon"
|
|
2290
|
+
],
|
|
2291
|
+
"value": "#4D5157",
|
|
2292
|
+
"description": "Used as a default neutral icon color"
|
|
2293
|
+
},
|
|
2294
|
+
{
|
|
2295
|
+
"path": [
|
|
2296
|
+
"theme",
|
|
2297
|
+
"light",
|
|
2298
|
+
"palette",
|
|
2299
|
+
"neutral",
|
|
2300
|
+
"bg",
|
|
2301
|
+
"weak"
|
|
2302
|
+
],
|
|
2303
|
+
"value": "#FFFFFF",
|
|
2304
|
+
"description": "Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default"
|
|
2305
|
+
},
|
|
2306
|
+
{
|
|
2307
|
+
"path": [
|
|
2308
|
+
"theme",
|
|
2309
|
+
"light",
|
|
2310
|
+
"palette",
|
|
2311
|
+
"neutral",
|
|
2312
|
+
"bg",
|
|
2313
|
+
"default"
|
|
2314
|
+
],
|
|
2315
|
+
"value": "#F5F6F6",
|
|
2316
|
+
"description": "Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak"
|
|
2317
|
+
},
|
|
2318
|
+
{
|
|
2319
|
+
"path": [
|
|
2320
|
+
"theme",
|
|
2321
|
+
"light",
|
|
2322
|
+
"palette",
|
|
2323
|
+
"neutral",
|
|
2324
|
+
"bg",
|
|
2325
|
+
"on-bg-weak"
|
|
2326
|
+
],
|
|
2327
|
+
"value": "#F5F6F6"
|
|
2328
|
+
},
|
|
2329
|
+
{
|
|
2330
|
+
"path": [
|
|
2331
|
+
"theme",
|
|
2332
|
+
"light",
|
|
2333
|
+
"palette",
|
|
2334
|
+
"neutral",
|
|
2335
|
+
"bg",
|
|
2336
|
+
"strong"
|
|
2337
|
+
],
|
|
2338
|
+
"value": "#E2E3E5",
|
|
2339
|
+
"description": "Use sparsely, mainly included in some component states"
|
|
2340
|
+
},
|
|
2341
|
+
{
|
|
2342
|
+
"path": [
|
|
2343
|
+
"theme",
|
|
2344
|
+
"light",
|
|
2345
|
+
"palette",
|
|
2346
|
+
"neutral",
|
|
2347
|
+
"bg",
|
|
2348
|
+
"stronger"
|
|
2349
|
+
],
|
|
2350
|
+
"value": "#A8ACB2",
|
|
2351
|
+
"description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout"
|
|
2352
|
+
},
|
|
2353
|
+
{
|
|
2354
|
+
"path": [
|
|
2355
|
+
"theme",
|
|
2356
|
+
"light",
|
|
2357
|
+
"palette",
|
|
2358
|
+
"neutral",
|
|
2359
|
+
"bg",
|
|
2360
|
+
"strongest"
|
|
2361
|
+
],
|
|
2362
|
+
"value": "#4D5157",
|
|
2363
|
+
"description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout"
|
|
2364
|
+
},
|
|
2365
|
+
{
|
|
2366
|
+
"path": [
|
|
2367
|
+
"theme",
|
|
2368
|
+
"light",
|
|
2369
|
+
"palette",
|
|
2370
|
+
"neutral",
|
|
2371
|
+
"bg",
|
|
2372
|
+
"status"
|
|
2373
|
+
],
|
|
2374
|
+
"value": "#A8ACB2"
|
|
2375
|
+
},
|
|
2376
|
+
{
|
|
2377
|
+
"path": [
|
|
2378
|
+
"theme",
|
|
2379
|
+
"light",
|
|
2380
|
+
"palette",
|
|
2381
|
+
"neutral",
|
|
2382
|
+
"border",
|
|
2383
|
+
"weak"
|
|
2384
|
+
],
|
|
2385
|
+
"value": "#E2E3E5",
|
|
2386
|
+
"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"
|
|
2387
|
+
},
|
|
2388
|
+
{
|
|
2389
|
+
"path": [
|
|
2390
|
+
"theme",
|
|
2391
|
+
"light",
|
|
2392
|
+
"palette",
|
|
2393
|
+
"neutral",
|
|
2394
|
+
"border",
|
|
2395
|
+
"strong"
|
|
2396
|
+
],
|
|
2397
|
+
"value": "#BBBEC3",
|
|
2398
|
+
"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"
|
|
2399
|
+
},
|
|
2400
|
+
{
|
|
2401
|
+
"path": [
|
|
2402
|
+
"theme",
|
|
2403
|
+
"light",
|
|
2404
|
+
"palette",
|
|
2405
|
+
"neutral",
|
|
2406
|
+
"border",
|
|
2407
|
+
"strongest"
|
|
2408
|
+
],
|
|
2409
|
+
"value": "#6F757E"
|
|
2410
|
+
},
|
|
2411
|
+
{
|
|
2412
|
+
"path": [
|
|
2413
|
+
"theme",
|
|
2414
|
+
"light",
|
|
2415
|
+
"palette",
|
|
2416
|
+
"neutral",
|
|
2417
|
+
"hover"
|
|
2418
|
+
],
|
|
2419
|
+
"value": "#6F757E",
|
|
2420
|
+
"description": "Used for neutral hover states on components"
|
|
2421
|
+
},
|
|
2422
|
+
{
|
|
2423
|
+
"path": [
|
|
2424
|
+
"theme",
|
|
2425
|
+
"light",
|
|
2426
|
+
"palette",
|
|
2427
|
+
"neutral",
|
|
2428
|
+
"pressed"
|
|
2429
|
+
],
|
|
2430
|
+
"value": "#6F757E",
|
|
2431
|
+
"description": "Used for neutral pressed states on components"
|
|
2432
|
+
},
|
|
2433
|
+
{
|
|
2434
|
+
"path": [
|
|
2435
|
+
"theme",
|
|
2436
|
+
"light",
|
|
2437
|
+
"palette",
|
|
2438
|
+
"primary",
|
|
2439
|
+
"text"
|
|
2440
|
+
],
|
|
2441
|
+
"value": "#0A6190",
|
|
2442
|
+
"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"
|
|
2443
|
+
},
|
|
2444
|
+
{
|
|
2445
|
+
"path": [
|
|
2446
|
+
"theme",
|
|
2447
|
+
"light",
|
|
2448
|
+
"palette",
|
|
2449
|
+
"primary",
|
|
2450
|
+
"icon"
|
|
2451
|
+
],
|
|
2452
|
+
"value": "#0A6190",
|
|
2453
|
+
"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"
|
|
2454
|
+
},
|
|
2455
|
+
{
|
|
2456
|
+
"path": [
|
|
2457
|
+
"theme",
|
|
2458
|
+
"light",
|
|
2459
|
+
"palette",
|
|
2460
|
+
"primary",
|
|
2461
|
+
"bg",
|
|
2462
|
+
"weak"
|
|
2463
|
+
],
|
|
2464
|
+
"value": "#E7FAFB",
|
|
2465
|
+
"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"
|
|
2466
|
+
},
|
|
2467
|
+
{
|
|
2468
|
+
"path": [
|
|
2469
|
+
"theme",
|
|
2470
|
+
"light",
|
|
2471
|
+
"palette",
|
|
2472
|
+
"primary",
|
|
2473
|
+
"bg",
|
|
2474
|
+
"strong"
|
|
2475
|
+
],
|
|
2476
|
+
"value": "#0A6190",
|
|
2477
|
+
"description": "Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors"
|
|
2478
|
+
},
|
|
2479
|
+
{
|
|
2480
|
+
"path": [
|
|
2481
|
+
"theme",
|
|
2482
|
+
"light",
|
|
2483
|
+
"palette",
|
|
2484
|
+
"primary",
|
|
2485
|
+
"bg",
|
|
2486
|
+
"status"
|
|
2487
|
+
],
|
|
2488
|
+
"value": "#4C99A4"
|
|
2489
|
+
},
|
|
2490
|
+
{
|
|
2491
|
+
"path": [
|
|
2492
|
+
"theme",
|
|
2493
|
+
"light",
|
|
2494
|
+
"palette",
|
|
2495
|
+
"primary",
|
|
2496
|
+
"bg",
|
|
2497
|
+
"selected"
|
|
2498
|
+
],
|
|
2499
|
+
"value": "#E7FAFB"
|
|
2500
|
+
},
|
|
2501
|
+
{
|
|
2502
|
+
"path": [
|
|
2503
|
+
"theme",
|
|
2504
|
+
"light",
|
|
2505
|
+
"palette",
|
|
2506
|
+
"primary",
|
|
2507
|
+
"border",
|
|
2508
|
+
"strong"
|
|
2509
|
+
],
|
|
2510
|
+
"value": "#0A6190",
|
|
2511
|
+
"description": "Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard"
|
|
2512
|
+
},
|
|
2513
|
+
{
|
|
2514
|
+
"path": [
|
|
2515
|
+
"theme",
|
|
2516
|
+
"light",
|
|
2517
|
+
"palette",
|
|
2518
|
+
"primary",
|
|
2519
|
+
"border",
|
|
2520
|
+
"weak"
|
|
2521
|
+
],
|
|
2522
|
+
"value": "#8FE3E8",
|
|
2523
|
+
"description": "Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background"
|
|
2524
|
+
},
|
|
2525
|
+
{
|
|
2526
|
+
"path": [
|
|
2527
|
+
"theme",
|
|
2528
|
+
"light",
|
|
2529
|
+
"palette",
|
|
2530
|
+
"primary",
|
|
2531
|
+
"focus"
|
|
2532
|
+
],
|
|
2533
|
+
"value": "#30839D",
|
|
2534
|
+
"description": "Used for all focused states"
|
|
2535
|
+
},
|
|
2536
|
+
{
|
|
2537
|
+
"path": [
|
|
2538
|
+
"theme",
|
|
2539
|
+
"light",
|
|
2540
|
+
"palette",
|
|
2541
|
+
"primary",
|
|
2542
|
+
"hover",
|
|
2543
|
+
"weak"
|
|
2544
|
+
],
|
|
2545
|
+
"value": "#30839D",
|
|
2546
|
+
"description": "Used for hover states where the background is either transparent or use Neutral-bg-weak"
|
|
2547
|
+
},
|
|
2548
|
+
{
|
|
2549
|
+
"path": [
|
|
2550
|
+
"theme",
|
|
2551
|
+
"light",
|
|
2552
|
+
"palette",
|
|
2553
|
+
"primary",
|
|
2554
|
+
"hover",
|
|
2555
|
+
"strong"
|
|
2556
|
+
],
|
|
2557
|
+
"value": "#02507B",
|
|
2558
|
+
"description": "Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
|
|
2559
|
+
},
|
|
2560
|
+
{
|
|
2561
|
+
"path": [
|
|
2562
|
+
"theme",
|
|
2563
|
+
"light",
|
|
2564
|
+
"palette",
|
|
2565
|
+
"primary",
|
|
2566
|
+
"pressed",
|
|
2567
|
+
"weak"
|
|
2568
|
+
],
|
|
2569
|
+
"value": "#30839D",
|
|
2570
|
+
"description": "Used for pressed states where the background is either transparent or use Neutral-bg-weak"
|
|
2571
|
+
},
|
|
2572
|
+
{
|
|
2573
|
+
"path": [
|
|
2574
|
+
"theme",
|
|
2575
|
+
"light",
|
|
2576
|
+
"palette",
|
|
2577
|
+
"primary",
|
|
2578
|
+
"pressed",
|
|
2579
|
+
"strong"
|
|
2580
|
+
],
|
|
2581
|
+
"value": "#014063",
|
|
2582
|
+
"description": "Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
|
|
2583
|
+
},
|
|
2584
|
+
{
|
|
2585
|
+
"path": [
|
|
2586
|
+
"theme",
|
|
2587
|
+
"light",
|
|
2588
|
+
"palette",
|
|
2589
|
+
"danger",
|
|
2590
|
+
"text"
|
|
2591
|
+
],
|
|
2592
|
+
"value": "#BB2D00",
|
|
2593
|
+
"description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
2594
|
+
},
|
|
2595
|
+
{
|
|
2596
|
+
"path": [
|
|
2597
|
+
"theme",
|
|
2598
|
+
"light",
|
|
2599
|
+
"palette",
|
|
2600
|
+
"danger",
|
|
2601
|
+
"icon"
|
|
2602
|
+
],
|
|
2603
|
+
"value": "#BB2D00",
|
|
2604
|
+
"description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1591
2605
|
},
|
|
1592
2606
|
{
|
|
1593
2607
|
"path": [
|
|
1594
|
-
"
|
|
1595
|
-
"
|
|
1596
|
-
"
|
|
2608
|
+
"theme",
|
|
2609
|
+
"light",
|
|
2610
|
+
"palette",
|
|
2611
|
+
"danger",
|
|
2612
|
+
"bg",
|
|
2613
|
+
"strong"
|
|
1597
2614
|
],
|
|
1598
|
-
"value": "#
|
|
2615
|
+
"value": "#BB2D00",
|
|
2616
|
+
"description": "Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states"
|
|
1599
2617
|
},
|
|
1600
2618
|
{
|
|
1601
2619
|
"path": [
|
|
1602
|
-
"
|
|
1603
|
-
"
|
|
1604
|
-
"
|
|
2620
|
+
"theme",
|
|
2621
|
+
"light",
|
|
2622
|
+
"palette",
|
|
2623
|
+
"danger",
|
|
2624
|
+
"bg",
|
|
2625
|
+
"weak"
|
|
1605
2626
|
],
|
|
1606
|
-
"value": "#
|
|
2627
|
+
"value": "#FFE9E7",
|
|
2628
|
+
"description": "Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags"
|
|
1607
2629
|
},
|
|
1608
2630
|
{
|
|
1609
2631
|
"path": [
|
|
1610
|
-
"
|
|
1611
|
-
"
|
|
1612
|
-
"
|
|
2632
|
+
"theme",
|
|
2633
|
+
"light",
|
|
2634
|
+
"palette",
|
|
2635
|
+
"danger",
|
|
2636
|
+
"bg",
|
|
2637
|
+
"status"
|
|
1613
2638
|
],
|
|
1614
|
-
"value": "#
|
|
2639
|
+
"value": "#E84E2C"
|
|
1615
2640
|
},
|
|
1616
2641
|
{
|
|
1617
2642
|
"path": [
|
|
1618
|
-
"
|
|
1619
|
-
"
|
|
1620
|
-
"
|
|
2643
|
+
"theme",
|
|
2644
|
+
"light",
|
|
2645
|
+
"palette",
|
|
2646
|
+
"danger",
|
|
2647
|
+
"border",
|
|
2648
|
+
"strong"
|
|
1621
2649
|
],
|
|
1622
|
-
"value": "#
|
|
2650
|
+
"value": "#BB2D00",
|
|
2651
|
+
"description": "Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels"
|
|
1623
2652
|
},
|
|
1624
2653
|
{
|
|
1625
2654
|
"path": [
|
|
1626
|
-
"
|
|
1627
|
-
"
|
|
1628
|
-
"
|
|
2655
|
+
"theme",
|
|
2656
|
+
"light",
|
|
2657
|
+
"palette",
|
|
2658
|
+
"danger",
|
|
2659
|
+
"border",
|
|
2660
|
+
"weak"
|
|
1629
2661
|
],
|
|
1630
|
-
"value": "#
|
|
2662
|
+
"value": "#FFAA97",
|
|
2663
|
+
"description": "Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background"
|
|
1631
2664
|
},
|
|
1632
2665
|
{
|
|
1633
2666
|
"path": [
|
|
1634
|
-
"
|
|
1635
|
-
"
|
|
1636
|
-
"
|
|
2667
|
+
"theme",
|
|
2668
|
+
"light",
|
|
2669
|
+
"palette",
|
|
2670
|
+
"danger",
|
|
2671
|
+
"hover",
|
|
2672
|
+
"weak"
|
|
1637
2673
|
],
|
|
1638
|
-
"value": "#
|
|
2674
|
+
"value": "#D43300",
|
|
2675
|
+
"description": "Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak"
|
|
1639
2676
|
},
|
|
1640
2677
|
{
|
|
1641
2678
|
"path": [
|
|
1642
|
-
"
|
|
1643
|
-
"
|
|
1644
|
-
"
|
|
2679
|
+
"theme",
|
|
2680
|
+
"light",
|
|
2681
|
+
"palette",
|
|
2682
|
+
"danger",
|
|
2683
|
+
"hover",
|
|
2684
|
+
"strong"
|
|
1645
2685
|
],
|
|
1646
|
-
"value": "#
|
|
2686
|
+
"value": "#961200",
|
|
2687
|
+
"description": "Only used for hover states in critical filled buttons"
|
|
1647
2688
|
},
|
|
1648
2689
|
{
|
|
1649
2690
|
"path": [
|
|
1650
|
-
"
|
|
1651
|
-
"
|
|
1652
|
-
"
|
|
2691
|
+
"theme",
|
|
2692
|
+
"light",
|
|
2693
|
+
"palette",
|
|
2694
|
+
"danger",
|
|
2695
|
+
"pressed",
|
|
2696
|
+
"weak"
|
|
1653
2697
|
],
|
|
1654
|
-
"value": "#
|
|
2698
|
+
"value": "#D43300",
|
|
2699
|
+
"description": "Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak"
|
|
1655
2700
|
},
|
|
1656
2701
|
{
|
|
1657
2702
|
"path": [
|
|
1658
|
-
"
|
|
1659
|
-
"
|
|
1660
|
-
"
|
|
2703
|
+
"theme",
|
|
2704
|
+
"light",
|
|
2705
|
+
"palette",
|
|
2706
|
+
"danger",
|
|
2707
|
+
"pressed",
|
|
2708
|
+
"strong"
|
|
1661
2709
|
],
|
|
1662
|
-
"value": "#
|
|
2710
|
+
"value": "#730E00",
|
|
2711
|
+
"description": "Only used for pressed states in critical filled buttons"
|
|
1663
2712
|
},
|
|
1664
2713
|
{
|
|
1665
2714
|
"path": [
|
|
1666
|
-
"
|
|
1667
|
-
"
|
|
1668
|
-
"
|
|
2715
|
+
"theme",
|
|
2716
|
+
"light",
|
|
2717
|
+
"palette",
|
|
2718
|
+
"warning",
|
|
2719
|
+
"text"
|
|
1669
2720
|
],
|
|
1670
|
-
"value": "#
|
|
2721
|
+
"value": "#765500",
|
|
2722
|
+
"description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1671
2723
|
},
|
|
1672
2724
|
{
|
|
1673
2725
|
"path": [
|
|
1674
|
-
"
|
|
1675
|
-
"
|
|
1676
|
-
"
|
|
2726
|
+
"theme",
|
|
2727
|
+
"light",
|
|
2728
|
+
"palette",
|
|
2729
|
+
"warning",
|
|
2730
|
+
"icon"
|
|
1677
2731
|
],
|
|
1678
|
-
"value": "#
|
|
2732
|
+
"value": "#765500",
|
|
2733
|
+
"description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1679
2734
|
},
|
|
1680
2735
|
{
|
|
1681
2736
|
"path": [
|
|
1682
|
-
"
|
|
1683
|
-
"
|
|
1684
|
-
"
|
|
2737
|
+
"theme",
|
|
2738
|
+
"light",
|
|
2739
|
+
"palette",
|
|
2740
|
+
"warning",
|
|
2741
|
+
"bg",
|
|
2742
|
+
"strong"
|
|
1685
2743
|
],
|
|
1686
|
-
"value": "#
|
|
2744
|
+
"value": "#765500",
|
|
2745
|
+
"description": "Use sparsely. Only used for filled labels"
|
|
1687
2746
|
},
|
|
1688
2747
|
{
|
|
1689
2748
|
"path": [
|
|
1690
|
-
"
|
|
1691
|
-
"
|
|
1692
|
-
"
|
|
2749
|
+
"theme",
|
|
2750
|
+
"light",
|
|
2751
|
+
"palette",
|
|
2752
|
+
"warning",
|
|
2753
|
+
"bg",
|
|
2754
|
+
"weak"
|
|
1693
2755
|
],
|
|
1694
|
-
"value": "#
|
|
2756
|
+
"value": "#FFFAD1",
|
|
2757
|
+
"description": "Used as backgrounds for warning components states such as banner and semi-filled labels"
|
|
1695
2758
|
},
|
|
1696
2759
|
{
|
|
1697
2760
|
"path": [
|
|
1698
|
-
"
|
|
1699
|
-
"
|
|
1700
|
-
"
|
|
2761
|
+
"theme",
|
|
2762
|
+
"light",
|
|
2763
|
+
"palette",
|
|
2764
|
+
"warning",
|
|
2765
|
+
"bg",
|
|
2766
|
+
"status"
|
|
1701
2767
|
],
|
|
1702
|
-
"value": "#
|
|
2768
|
+
"value": "#D7AA0A"
|
|
1703
2769
|
},
|
|
1704
2770
|
{
|
|
1705
2771
|
"path": [
|
|
1706
|
-
"
|
|
1707
|
-
"
|
|
1708
|
-
"
|
|
2772
|
+
"theme",
|
|
2773
|
+
"light",
|
|
2774
|
+
"palette",
|
|
2775
|
+
"warning",
|
|
2776
|
+
"border",
|
|
2777
|
+
"strong"
|
|
1709
2778
|
],
|
|
1710
|
-
"value": "#
|
|
2779
|
+
"value": "#996E00",
|
|
2780
|
+
"description": "Use sparsely. Only used for outlined labels"
|
|
1711
2781
|
},
|
|
1712
2782
|
{
|
|
1713
2783
|
"path": [
|
|
1714
|
-
"
|
|
1715
|
-
"
|
|
1716
|
-
"
|
|
2784
|
+
"theme",
|
|
2785
|
+
"light",
|
|
2786
|
+
"palette",
|
|
2787
|
+
"warning",
|
|
2788
|
+
"border",
|
|
2789
|
+
"weak"
|
|
1717
2790
|
],
|
|
1718
|
-
"value": "#
|
|
2791
|
+
"value": "#FFD600",
|
|
2792
|
+
"description": "Use sparsely. Mainly used in combination with elements that use the Warning-bg-weak to stand out more from the background"
|
|
1719
2793
|
},
|
|
1720
2794
|
{
|
|
1721
2795
|
"path": [
|
|
1722
|
-
"
|
|
1723
|
-
"
|
|
1724
|
-
"
|
|
2796
|
+
"theme",
|
|
2797
|
+
"light",
|
|
2798
|
+
"palette",
|
|
2799
|
+
"success",
|
|
2800
|
+
"text"
|
|
1725
2801
|
],
|
|
1726
|
-
"value": "#
|
|
2802
|
+
"value": "#3F7824",
|
|
2803
|
+
"description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1727
2804
|
},
|
|
1728
2805
|
{
|
|
1729
2806
|
"path": [
|
|
1730
|
-
"
|
|
1731
|
-
"
|
|
1732
|
-
"
|
|
2807
|
+
"theme",
|
|
2808
|
+
"light",
|
|
2809
|
+
"palette",
|
|
2810
|
+
"success",
|
|
2811
|
+
"icon"
|
|
1733
2812
|
],
|
|
1734
|
-
"value": "#
|
|
2813
|
+
"value": "#3F7824",
|
|
2814
|
+
"description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1735
2815
|
},
|
|
1736
2816
|
{
|
|
1737
2817
|
"path": [
|
|
1738
|
-
"
|
|
1739
|
-
"
|
|
1740
|
-
"
|
|
2818
|
+
"theme",
|
|
2819
|
+
"light",
|
|
2820
|
+
"palette",
|
|
2821
|
+
"success",
|
|
2822
|
+
"bg",
|
|
2823
|
+
"strong"
|
|
1741
2824
|
],
|
|
1742
|
-
"value": "#
|
|
2825
|
+
"value": "#3F7824",
|
|
2826
|
+
"description": "Use sparsely. Only used for filled labels"
|
|
1743
2827
|
},
|
|
1744
2828
|
{
|
|
1745
2829
|
"path": [
|
|
1746
|
-
"
|
|
1747
|
-
"
|
|
1748
|
-
"
|
|
2830
|
+
"theme",
|
|
2831
|
+
"light",
|
|
2832
|
+
"palette",
|
|
2833
|
+
"success",
|
|
2834
|
+
"bg",
|
|
2835
|
+
"weak"
|
|
1749
2836
|
],
|
|
1750
|
-
"value": "#
|
|
2837
|
+
"value": "#E7FCD7",
|
|
2838
|
+
"description": "Used as backgrounds for success components states such as banner and semi-filled labels"
|
|
1751
2839
|
},
|
|
1752
2840
|
{
|
|
1753
2841
|
"path": [
|
|
1754
|
-
"
|
|
1755
|
-
"
|
|
1756
|
-
"
|
|
2842
|
+
"theme",
|
|
2843
|
+
"light",
|
|
2844
|
+
"palette",
|
|
2845
|
+
"success",
|
|
2846
|
+
"bg",
|
|
2847
|
+
"status"
|
|
1757
2848
|
],
|
|
1758
|
-
"value": "#
|
|
2849
|
+
"value": "#5B992B"
|
|
1759
2850
|
},
|
|
1760
2851
|
{
|
|
1761
2852
|
"path": [
|
|
1762
|
-
"
|
|
1763
|
-
"
|
|
1764
|
-
"
|
|
2853
|
+
"theme",
|
|
2854
|
+
"light",
|
|
2855
|
+
"palette",
|
|
2856
|
+
"success",
|
|
2857
|
+
"border",
|
|
2858
|
+
"strong"
|
|
1765
2859
|
],
|
|
1766
|
-
"value": "#
|
|
2860
|
+
"value": "#3F7824",
|
|
2861
|
+
"description": "Use sparsely. Only used for outlined labels"
|
|
1767
2862
|
},
|
|
1768
2863
|
{
|
|
1769
2864
|
"path": [
|
|
1770
|
-
"
|
|
1771
|
-
"
|
|
1772
|
-
"
|
|
2865
|
+
"theme",
|
|
2866
|
+
"light",
|
|
2867
|
+
"palette",
|
|
2868
|
+
"success",
|
|
2869
|
+
"border",
|
|
2870
|
+
"weak"
|
|
1773
2871
|
],
|
|
1774
|
-
"value": "#
|
|
2872
|
+
"value": "#90CB62",
|
|
2873
|
+
"description": "Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background"
|
|
1775
2874
|
},
|
|
1776
2875
|
{
|
|
1777
2876
|
"path": [
|
|
1778
|
-
"
|
|
1779
|
-
"
|
|
1780
|
-
"
|
|
2877
|
+
"theme",
|
|
2878
|
+
"light",
|
|
2879
|
+
"palette",
|
|
2880
|
+
"discovery",
|
|
2881
|
+
"text"
|
|
1781
2882
|
],
|
|
1782
|
-
"value": "#
|
|
2883
|
+
"value": "#3F7824",
|
|
2884
|
+
"description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1783
2885
|
},
|
|
1784
2886
|
{
|
|
1785
2887
|
"path": [
|
|
1786
|
-
"
|
|
1787
|
-
"
|
|
1788
|
-
"
|
|
2888
|
+
"theme",
|
|
2889
|
+
"light",
|
|
2890
|
+
"palette",
|
|
2891
|
+
"discovery",
|
|
2892
|
+
"icon"
|
|
1789
2893
|
],
|
|
1790
|
-
"value": "#
|
|
2894
|
+
"value": "#3F7824",
|
|
2895
|
+
"description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
|
|
1791
2896
|
},
|
|
1792
2897
|
{
|
|
1793
2898
|
"path": [
|
|
1794
|
-
"
|
|
1795
|
-
"
|
|
1796
|
-
"
|
|
2899
|
+
"theme",
|
|
2900
|
+
"light",
|
|
2901
|
+
"palette",
|
|
2902
|
+
"discovery",
|
|
2903
|
+
"bg",
|
|
2904
|
+
"strong"
|
|
1797
2905
|
],
|
|
1798
|
-
"value": "#
|
|
2906
|
+
"value": "#3F7824",
|
|
2907
|
+
"description": "Use sparsely. Only used for filled labels"
|
|
1799
2908
|
},
|
|
1800
2909
|
{
|
|
1801
2910
|
"path": [
|
|
1802
|
-
"
|
|
1803
|
-
"
|
|
1804
|
-
"
|
|
2911
|
+
"theme",
|
|
2912
|
+
"light",
|
|
2913
|
+
"palette",
|
|
2914
|
+
"discovery",
|
|
2915
|
+
"bg",
|
|
2916
|
+
"weak"
|
|
1805
2917
|
],
|
|
1806
|
-
"value": "#
|
|
2918
|
+
"value": "#BCF194",
|
|
2919
|
+
"description": "Used as backgrounds for success components states such as banner and semi-filled labels"
|
|
1807
2920
|
},
|
|
1808
2921
|
{
|
|
1809
2922
|
"path": [
|
|
1810
|
-
"
|
|
1811
|
-
"
|
|
1812
|
-
"
|
|
2923
|
+
"theme",
|
|
2924
|
+
"light",
|
|
2925
|
+
"palette",
|
|
2926
|
+
"discovery",
|
|
2927
|
+
"bg",
|
|
2928
|
+
"status"
|
|
1813
2929
|
],
|
|
1814
|
-
"value": "#
|
|
2930
|
+
"value": "#4D8622"
|
|
1815
2931
|
},
|
|
1816
2932
|
{
|
|
1817
2933
|
"path": [
|
|
1818
|
-
"
|
|
1819
|
-
"
|
|
1820
|
-
"
|
|
2934
|
+
"theme",
|
|
2935
|
+
"light",
|
|
2936
|
+
"palette",
|
|
2937
|
+
"discovery",
|
|
2938
|
+
"border",
|
|
2939
|
+
"strong"
|
|
1821
2940
|
],
|
|
1822
|
-
"value": "#
|
|
2941
|
+
"value": "#3F7824",
|
|
2942
|
+
"description": "Use sparsely. Only used for outlined labels"
|
|
1823
2943
|
},
|
|
1824
2944
|
{
|
|
1825
2945
|
"path": [
|
|
1826
|
-
"
|
|
1827
|
-
"
|
|
1828
|
-
"
|
|
2946
|
+
"theme",
|
|
2947
|
+
"light",
|
|
2948
|
+
"palette",
|
|
2949
|
+
"discovery",
|
|
2950
|
+
"border",
|
|
2951
|
+
"weak"
|
|
1829
2952
|
],
|
|
1830
|
-
"value": "#
|
|
2953
|
+
"value": "#80BB53",
|
|
2954
|
+
"description": "Use sparsely. Mainly used in combination with elements that use the discovery-bg-weak to stand out more from the background"
|
|
1831
2955
|
}
|
|
1832
2956
|
],
|
|
1833
2957
|
"font": [
|
|
@@ -1998,40 +3122,6 @@ exports.tokens = {
|
|
|
1998
3122
|
"value": "300"
|
|
1999
3123
|
}
|
|
2000
3124
|
],
|
|
2001
|
-
"boxShadow": [
|
|
2002
|
-
{
|
|
2003
|
-
"path": [
|
|
2004
|
-
"boxShadow",
|
|
2005
|
-
"l2"
|
|
2006
|
-
],
|
|
2007
|
-
"value": "0px 1px 2px 0px rgba(12, 26, 37, 0.18)",
|
|
2008
|
-
"description": "Used for small components that need sharper shadows to illustrate elevation. Only switch is using level 2"
|
|
2009
|
-
},
|
|
2010
|
-
{
|
|
2011
|
-
"path": [
|
|
2012
|
-
"boxShadow",
|
|
2013
|
-
"l3"
|
|
2014
|
-
],
|
|
2015
|
-
"value": "0px 4px 8px 0px rgba(12, 26, 37, 0.04)",
|
|
2016
|
-
"description": "Not used in any components, do not use it since it will most likely be removed"
|
|
2017
|
-
},
|
|
2018
|
-
{
|
|
2019
|
-
"path": [
|
|
2020
|
-
"boxShadow",
|
|
2021
|
-
"l4"
|
|
2022
|
-
],
|
|
2023
|
-
"value": "0px 4px 8px 0px rgba(12, 26, 37, 0.08)",
|
|
2024
|
-
"description": "Used for most mid/large sized components with floating states. Components include banner, button, card, drop down, progress bar and view selector"
|
|
2025
|
-
},
|
|
2026
|
-
{
|
|
2027
|
-
"path": [
|
|
2028
|
-
"boxShadow",
|
|
2029
|
-
"l5"
|
|
2030
|
-
],
|
|
2031
|
-
"value": "0px 8px 20px 0px rgba(12, 26, 37, 0.12)",
|
|
2032
|
-
"description": "Use for large containers such as dialogs, login screens and context menus"
|
|
2033
|
-
}
|
|
2034
|
-
],
|
|
2035
3125
|
"space": [
|
|
2036
3126
|
{
|
|
2037
3127
|
"path": [
|