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