@neo4j-ndl/base 1.7.2 → 1.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/lib/cjs/tokens/js/storybook-design-token.js +822 -626
  3. package/lib/cjs/tokens/js/storybook-design-token.js.map +1 -1
  4. package/lib/cjs/tokens/js/tokens-esm.js +96 -68
  5. package/lib/cjs/tokens/js/tokens-esm.js.map +1 -1
  6. package/lib/cjs/tokens/js/tokens.js +96 -68
  7. package/lib/cjs/tokens/js/tokens.js.map +1 -1
  8. package/lib/esm/tokens/js/storybook-design-token.js +822 -626
  9. package/lib/esm/tokens/js/storybook-design-token.js.map +1 -1
  10. package/lib/esm/tokens/js/tokens-esm.js +96 -68
  11. package/lib/esm/tokens/js/tokens-esm.js.map +1 -1
  12. package/lib/esm/tokens/js/tokens.js +96 -68
  13. package/lib/esm/tokens/js/tokens.js.map +1 -1
  14. package/lib/neo4j-ds-styles.css +76 -52
  15. package/lib/tokens/css/tokens.css +76 -52
  16. package/lib/tokens/js/tokens-raw.js +2748 -2288
  17. package/lib/tokens/js/tokens.js +96 -68
  18. package/lib/tokens/scss/tokens.scss +76 -52
  19. package/lib/types/tokens/js/storybook-design-token.d.ts +10 -2
  20. package/lib/types/tokens/js/tokens-esm.d.ts +114 -86
  21. package/lib/types/tokens/js/tokens.d.ts +114 -86
  22. package/package.json +1 -1
package/lib/esm/tokens/js/storybook-design-token.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 20 Jun 2023 08:49:26 GMT
3
+ * Generated on Wed, 21 Jun 2023 08:24:49 GMT
4
4
  */
5
5
  export const tokens = {
6
6
  "transitions": [
@@ -186,1428 +186,1624 @@ export const tokens = {
186
186
  "description": "Desktop size"
187
187
  }
188
188
  ],
189
- "colors": [
189
+ "palette-categorical": [
190
190
  {
191
191
  "path": [
192
- "colors",
193
- "primary",
194
- "10"
192
+ "palette",
193
+ "categorical",
194
+ "1"
195
195
  ],
196
- "value": "#e6f8ff"
196
+ "value": "#55BDC5"
197
197
  },
198
198
  {
199
199
  "path": [
200
- "colors",
201
- "primary",
202
- "20"
200
+ "palette",
201
+ "categorical",
202
+ "2"
203
203
  ],
204
- "value": "#a3e2ff"
204
+ "value": "#4D49CB"
205
205
  },
206
206
  {
207
207
  "path": [
208
- "colors",
209
- "primary",
210
- "30"
208
+ "palette",
209
+ "categorical",
210
+ "3"
211
211
  ],
212
- "value": "#7ad1ff"
212
+ "value": "#DC8B39"
213
213
  },
214
214
  {
215
215
  "path": [
216
- "colors",
217
- "primary",
218
- "40"
216
+ "palette",
217
+ "categorical",
218
+ "4"
219
219
  ],
220
- "value": "#018bff"
220
+ "value": "#C9458D"
221
221
  },
222
222
  {
223
223
  "path": [
224
- "colors",
225
- "primary",
226
- "50"
224
+ "palette",
225
+ "categorical",
226
+ "5"
227
227
  ],
228
- "value": "#006FD6"
228
+ "value": "#8E8CF3"
229
229
  },
230
230
  {
231
231
  "path": [
232
- "colors",
233
- "primary",
234
- "60"
232
+ "palette",
233
+ "categorical",
234
+ "6"
235
235
  ],
236
- "value": "#0056b3"
236
+ "value": "#78DE7C"
237
237
  },
238
238
  {
239
239
  "path": [
240
- "colors",
241
- "primary",
242
- "70"
240
+ "palette",
241
+ "categorical",
242
+ "7"
243
243
  ],
244
- "value": "#004092"
244
+ "value": "#3F80E3"
245
245
  },
246
246
  {
247
247
  "path": [
248
- "colors",
249
- "danger",
250
- "10"
248
+ "palette",
249
+ "categorical",
250
+ "8"
251
251
  ],
252
- "value": "#ffe6e9"
252
+ "value": "#673FAB"
253
253
  },
254
254
  {
255
255
  "path": [
256
- "colors",
257
- "danger",
258
- "20"
256
+ "palette",
257
+ "categorical",
258
+ "9"
259
259
  ],
260
- "value": "#ffb8c4"
260
+ "value": "#DBBF40"
261
261
  },
262
262
  {
263
263
  "path": [
264
- "colors",
265
- "danger",
266
- "30"
264
+ "palette",
265
+ "categorical",
266
+ "10"
267
267
  ],
268
- "value": "#ff668a"
268
+ "value": "#BF732D"
269
269
  },
270
270
  {
271
271
  "path": [
272
- "colors",
273
- "danger",
274
- "40"
272
+ "palette",
273
+ "categorical",
274
+ "11"
275
275
  ],
276
- "value": "#ed1252"
276
+ "value": "#478A6E"
277
277
  },
278
278
  {
279
279
  "path": [
280
- "colors",
281
- "danger",
282
- "50"
280
+ "palette",
281
+ "categorical",
282
+ "12"
283
283
  ],
284
- "value": "#cc254b"
285
- },
284
+ "value": "#ADE86B"
285
+ }
286
+ ],
287
+ "palette-dark": [
286
288
  {
287
289
  "path": [
288
- "colors",
289
- "danger",
290
- "60"
290
+ "palette",
291
+ "dark",
292
+ "neutral",
293
+ "text",
294
+ "weakest"
291
295
  ],
292
- "value": "#a1003b"
296
+ "value": "#717780",
297
+ "description": "Should be used mainly for disabled text"
293
298
  },
294
299
  {
295
300
  "path": [
296
- "colors",
297
- "danger",
298
- "70"
301
+ "palette",
302
+ "dark",
303
+ "neutral",
304
+ "text",
305
+ "weaker"
299
306
  ],
300
- "value": "#7a0031"
307
+ "value": "#B2B7BD",
308
+ "description": "Should be used sparsely and mainly for headers and subtitles to differentiate from input text"
301
309
  },
302
310
  {
303
311
  "path": [
304
- "colors",
305
- "success",
306
- "10"
312
+ "palette",
313
+ "dark",
314
+ "neutral",
315
+ "text",
316
+ "weak"
307
317
  ],
308
- "value": "#E1FAEF"
318
+ "value": "#C4C8CD",
319
+ "description": "Used for labels, icon color and descriptions"
309
320
  },
310
321
  {
311
322
  "path": [
312
- "colors",
313
- "success",
314
- "20"
323
+ "palette",
324
+ "dark",
325
+ "neutral",
326
+ "text",
327
+ "default"
315
328
  ],
316
- "value": "#98EDCB"
329
+ "value": "#F5F7FA",
330
+ "description": "Used for all default text"
317
331
  },
318
332
  {
319
333
  "path": [
320
- "colors",
321
- "success",
322
- "30"
334
+ "palette",
335
+ "dark",
336
+ "neutral",
337
+ "text",
338
+ "inverse"
323
339
  ],
324
- "value": "#44D4A4"
340
+ "value": "#151E29",
341
+ "description": "Default text on Neutral-bg-strongest or other dark backgrounds"
325
342
  },
326
343
  {
327
344
  "path": [
328
- "colors",
329
- "success",
330
- "40"
345
+ "palette",
346
+ "dark",
347
+ "neutral",
348
+ "icon"
331
349
  ],
332
- "value": "#00BA88"
350
+ "value": "#C4C8CD",
351
+ "description": "Used as a default neutral icon color"
333
352
  },
334
353
  {
335
354
  "path": [
336
- "colors",
337
- "success",
338
- "50"
355
+ "palette",
356
+ "dark",
357
+ "neutral",
358
+ "bg",
359
+ "weak"
339
360
  ],
340
- "value": "#327D60"
361
+ "value": "29, 38, 49",
362
+ "description": "Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default"
341
363
  },
342
364
  {
343
365
  "path": [
344
- "colors",
345
- "success",
346
- "60"
366
+ "palette",
367
+ "dark",
368
+ "neutral",
369
+ "bg",
370
+ "default"
347
371
  ],
348
- "value": "#006E58"
372
+ "value": "#151E29",
373
+ "description": "Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak"
349
374
  },
350
375
  {
351
376
  "path": [
352
- "colors",
353
- "success",
354
- "70"
377
+ "palette",
378
+ "dark",
379
+ "neutral",
380
+ "bg",
381
+ "strong"
355
382
  ],
356
- "value": "#00473B"
383
+ "value": "45, 53, 63",
384
+ "description": "Use sparsely, mainly included in some component states"
357
385
  },
358
386
  {
359
387
  "path": [
360
- "colors",
361
- "warning",
362
- "10"
388
+ "palette",
389
+ "dark",
390
+ "neutral",
391
+ "bg",
392
+ "strongest"
363
393
  ],
364
- "value": "#FFFBDE"
394
+ "value": "#FFFFFF",
395
+ "description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout"
365
396
  },
366
397
  {
367
398
  "path": [
368
- "colors",
369
- "warning",
370
- "20"
399
+ "palette",
400
+ "dark",
401
+ "neutral",
402
+ "border",
403
+ "weak"
371
404
  ],
372
- "value": "#FFF4B5"
405
+ "value": "37, 47, 59",
406
+ "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"
373
407
  },
374
408
  {
375
409
  "path": [
376
- "colors",
377
- "warning",
378
- "30"
410
+ "palette",
411
+ "dark",
412
+ "neutral",
413
+ "border",
414
+ "strong"
379
415
  ],
380
- "value": "#FFEA8C"
416
+ "value": "#717780",
417
+ "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"
381
418
  },
382
419
  {
383
420
  "path": [
384
- "colors",
385
- "warning",
386
- "40"
421
+ "palette",
422
+ "dark",
423
+ "neutral",
424
+ "hover"
387
425
  ],
388
- "value": "#FFDE63"
426
+ "value": "rgba(196, 200, 205,0.1)",
427
+ "description": "Used for neutral hover states on components"
389
428
  },
390
429
  {
391
430
  "path": [
392
- "colors",
393
- "warning",
394
- "50"
431
+ "palette",
432
+ "dark",
433
+ "neutral",
434
+ "pressed"
395
435
  ],
396
- "value": "#D9B54A"
436
+ "value": "rgba(196, 200, 205,0.2)",
437
+ "description": "Used for neutral pressed states on components"
397
438
  },
398
439
  {
399
440
  "path": [
400
- "colors",
401
- "warning",
402
- "60"
441
+ "palette",
442
+ "dark",
443
+ "primary",
444
+ "text"
403
445
  ],
404
- "value": "#966c2e"
446
+ "value": "#a3e2ff",
447
+ "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"
405
448
  },
406
449
  {
407
450
  "path": [
408
- "colors",
409
- "warning",
410
- "70"
451
+ "palette",
452
+ "dark",
453
+ "primary",
454
+ "icon"
411
455
  ],
412
- "value": "#664817"
456
+ "value": "#a3e2ff",
457
+ "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"
413
458
  },
414
459
  {
415
460
  "path": [
416
- "colors",
417
- "blueberry",
418
- "10"
461
+ "palette",
462
+ "dark",
463
+ "primary",
464
+ "bg",
465
+ "strong"
419
466
  ],
420
- "value": "#E8EBF6"
467
+ "value": "#a3e2ff",
468
+ "description": "Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors"
421
469
  },
422
470
  {
423
471
  "path": [
424
- "colors",
425
- "blueberry",
426
- "20"
472
+ "palette",
473
+ "dark",
474
+ "primary",
475
+ "bg",
476
+ "weak"
427
477
  ],
428
- "value": "#C4CCE9"
478
+ "value": "49, 69, 84",
479
+ "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"
429
480
  },
430
481
  {
431
482
  "path": [
432
- "colors",
433
- "blueberry",
434
- "30"
483
+ "palette",
484
+ "dark",
485
+ "primary",
486
+ "border",
487
+ "strong"
435
488
  ],
436
- "value": "#9DABD9"
489
+ "value": "#a3e2ff",
490
+ "description": "Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard"
437
491
  },
438
492
  {
439
493
  "path": [
440
- "colors",
441
- "blueberry",
442
- "40"
494
+ "palette",
495
+ "dark",
496
+ "primary",
497
+ "border",
498
+ "weak"
443
499
  ],
444
- "value": "#768ACA"
500
+ "value": "78, 108, 126",
501
+ "description": "Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background"
445
502
  },
446
503
  {
447
504
  "path": [
448
- "colors",
449
- "blueberry",
450
- "50"
505
+ "palette",
506
+ "dark",
507
+ "primary",
508
+ "focus"
451
509
  ],
452
- "value": "#3557B4"
510
+ "value": "#7ad1ff",
511
+ "description": "Used for all focused states"
453
512
  },
454
513
  {
455
514
  "path": [
456
- "colors",
457
- "blueberry",
458
- "60"
515
+ "palette",
516
+ "dark",
517
+ "primary",
518
+ "hover",
519
+ "weak"
459
520
  ],
460
- "value": "#25459E"
521
+ "value": "rgba(122, 209, 255,0.08)",
522
+ "description": "Used for hover states where the background is either transparent or use Neutral-bg-weak"
461
523
  },
462
524
  {
463
525
  "path": [
464
- "colors",
465
- "blueberry",
466
- "70"
526
+ "palette",
527
+ "dark",
528
+ "primary",
529
+ "hover",
530
+ "strong"
467
531
  ],
468
- "value": "#0B297D"
532
+ "value": "#7ad1ff",
533
+ "description": "Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
469
534
  },
470
535
  {
471
536
  "path": [
472
- "colors",
473
- "mint",
474
- "10"
537
+ "palette",
538
+ "dark",
539
+ "primary",
540
+ "pressed",
541
+ "weak"
475
542
  ],
476
- "value": "#F0FFFA"
543
+ "value": "rgba(122, 209, 255,0.12)",
544
+ "description": "Used for pressed states where the background is either transparent or use Neutral-bg-weak"
477
545
  },
478
546
  {
479
547
  "path": [
480
- "colors",
481
- "mint",
482
- "20"
548
+ "palette",
549
+ "dark",
550
+ "primary",
551
+ "pressed",
552
+ "strong"
483
553
  ],
484
- "value": "#D1FFF4"
554
+ "value": "#7ad1ff",
555
+ "description": "Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
485
556
  },
486
557
  {
487
558
  "path": [
488
- "colors",
489
- "mint",
490
- "30"
559
+ "palette",
560
+ "dark",
561
+ "danger",
562
+ "text"
491
563
  ],
492
- "value": "#A8FFEE"
564
+ "value": "#ffb8c4",
565
+ "description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
493
566
  },
494
567
  {
495
568
  "path": [
496
- "colors",
497
- "mint",
498
- "40"
569
+ "palette",
570
+ "dark",
571
+ "danger",
572
+ "icon"
499
573
  ],
500
- "value": "#55F9E2"
574
+ "value": "#ffb8c4",
575
+ "description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
501
576
  },
502
577
  {
503
578
  "path": [
504
- "colors",
505
- "mint",
506
- "50"
579
+ "palette",
580
+ "dark",
581
+ "danger",
582
+ "bg",
583
+ "strong"
507
584
  ],
508
- "value": "#3DD4C5"
585
+ "value": "#ffb8c4",
586
+ "description": "Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states"
509
587
  },
510
588
  {
511
589
  "path": [
512
- "colors",
513
- "mint",
514
- "60"
590
+ "palette",
591
+ "dark",
592
+ "danger",
593
+ "bg",
594
+ "weak"
515
595
  ],
516
- "value": "#2AADA5"
596
+ "value": "68, 61, 72",
597
+ "description": "Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags"
517
598
  },
518
599
  {
519
600
  "path": [
520
- "colors",
521
- "mint",
522
- "70"
601
+ "palette",
602
+ "dark",
603
+ "danger",
604
+ "border",
605
+ "strong"
523
606
  ],
524
- "value": "#116161"
607
+ "value": "#ffb8c4",
608
+ "description": "Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels"
525
609
  },
526
610
  {
527
611
  "path": [
528
- "colors",
529
- "neutral",
530
- "10"
612
+ "palette",
613
+ "dark",
614
+ "danger",
615
+ "border",
616
+ "weak"
531
617
  ],
532
- "value": "#FFFFFF"
618
+ "value": "114, 91, 103",
619
+ "description": "Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background"
533
620
  },
534
621
  {
535
622
  "path": [
536
- "colors",
537
- "neutral",
538
- "20"
623
+ "palette",
624
+ "dark",
625
+ "danger",
626
+ "hover",
627
+ "weak"
539
628
  ],
540
- "value": "#F5F7FA"
629
+ "value": "rgba(255, 102, 138,0.08)",
630
+ "description": "Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak"
541
631
  },
542
632
  {
543
633
  "path": [
544
- "colors",
545
- "neutral",
546
- "30"
634
+ "palette",
635
+ "dark",
636
+ "danger",
637
+ "hover",
638
+ "strong"
547
639
  ],
548
- "value": "#EEF1F6"
640
+ "value": "#ff668a",
641
+ "description": "Only used for hover states in critical filled buttons"
549
642
  },
550
643
  {
551
644
  "path": [
552
- "colors",
553
- "neutral",
554
- "40"
645
+ "palette",
646
+ "dark",
647
+ "danger",
648
+ "pressed",
649
+ "weak"
555
650
  ],
556
- "value": "#E6E9EE"
651
+ "value": "rgba(255, 102, 138,0.12)",
652
+ "description": "Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak"
557
653
  },
558
654
  {
559
655
  "path": [
560
- "colors",
561
- "neutral",
562
- "50"
656
+ "palette",
657
+ "dark",
658
+ "danger",
659
+ "pressed",
660
+ "strong"
563
661
  ],
564
- "value": "#C4C8CD"
662
+ "value": "#ff668a",
663
+ "description": "Only used for pressed states in critical filled buttons"
565
664
  },
566
665
  {
567
666
  "path": [
568
- "colors",
569
- "neutral",
570
- "60"
667
+ "palette",
668
+ "dark",
669
+ "warning",
670
+ "text"
571
671
  ],
572
- "value": "#B2B7BD"
672
+ "value": "#FFEA8C",
673
+ "description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
573
674
  },
574
675
  {
575
676
  "path": [
576
- "colors",
577
- "neutral",
578
- "70"
677
+ "palette",
678
+ "dark",
679
+ "warning",
680
+ "icon"
579
681
  ],
580
- "value": "#717780"
682
+ "value": "#FFEA8C",
683
+ "description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
581
684
  },
582
685
  {
583
686
  "path": [
584
- "colors",
585
- "neutral",
586
- "80"
687
+ "palette",
688
+ "dark",
689
+ "warning",
690
+ "bg",
691
+ "strong"
587
692
  ],
588
- "value": "#535B66"
693
+ "value": "#FFEA8C",
694
+ "description": "Use sparsely. Only used for filled labels"
589
695
  },
590
696
  {
591
697
  "path": [
592
- "colors",
593
- "neutral",
594
- "90"
698
+ "palette",
699
+ "dark",
700
+ "warning",
701
+ "bg",
702
+ "weak"
595
703
  ],
596
- "value": "#151E29"
597
- }
598
- ],
599
- "palette-dark": [
704
+ "value": "68, 71, 60",
705
+ "description": "Used as backgrounds for warning components states such as banner and semi-filled labels"
706
+ },
600
707
  {
601
708
  "path": [
602
709
  "palette",
603
710
  "dark",
604
- "neutral",
605
- "text",
606
- "weakest"
711
+ "warning",
712
+ "border",
713
+ "strong"
607
714
  ],
608
- "value": "#717780",
609
- "description": "Should be used mainly for disabled text"
715
+ "value": "#FFEA8C",
716
+ "description": "Use sparsely. Only used for outlined labels"
610
717
  },
611
718
  {
612
719
  "path": [
613
720
  "palette",
614
721
  "dark",
615
- "neutral",
616
- "text",
617
- "weaker"
722
+ "warning",
723
+ "border",
724
+ "weak"
725
+ ],
726
+ "value": "114, 111, 80",
727
+ "description": "Use sparsely. Mainly used in combination with elements that use the Warning-bg-weak to stand out more from the background"
728
+ },
729
+ {
730
+ "path": [
731
+ "palette",
732
+ "dark",
733
+ "success",
734
+ "text"
735
+ ],
736
+ "value": "#98EDCB",
737
+ "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
738
+ },
739
+ {
740
+ "path": [
741
+ "palette",
742
+ "dark",
743
+ "success",
744
+ "icon"
745
+ ],
746
+ "value": "#98EDCB",
747
+ "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
748
+ },
749
+ {
750
+ "path": [
751
+ "palette",
752
+ "dark",
753
+ "success",
754
+ "bg",
755
+ "strong"
756
+ ],
757
+ "value": "#98EDCB",
758
+ "description": "Use sparsely. Only used for filled labels"
759
+ },
760
+ {
761
+ "path": [
762
+ "palette",
763
+ "dark",
764
+ "success",
765
+ "bg",
766
+ "weak"
767
+ ],
768
+ "value": "47, 71, 73",
769
+ "description": "Used as backgrounds for success components states such as banner and semi-filled labels"
770
+ },
771
+ {
772
+ "path": [
773
+ "palette",
774
+ "dark",
775
+ "success",
776
+ "border",
777
+ "strong"
778
+ ],
779
+ "value": "#98EDCB",
780
+ "description": "Use sparsely. Only used for outlined labels"
781
+ },
782
+ {
783
+ "path": [
784
+ "palette",
785
+ "dark",
786
+ "success",
787
+ "border",
788
+ "weak"
789
+ ],
790
+ "value": "73, 113, 106",
791
+ "description": "Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background"
792
+ }
793
+ ],
794
+ "palette-graph": [
795
+ {
796
+ "path": [
797
+ "palette",
798
+ "graph",
799
+ "1"
800
+ ],
801
+ "value": "#FFDF81"
802
+ },
803
+ {
804
+ "path": [
805
+ "palette",
806
+ "graph",
807
+ "2"
808
+ ],
809
+ "value": "#C990C0"
810
+ },
811
+ {
812
+ "path": [
813
+ "palette",
814
+ "graph",
815
+ "3"
816
+ ],
817
+ "value": "#F79767"
818
+ },
819
+ {
820
+ "path": [
821
+ "palette",
822
+ "graph",
823
+ "4"
824
+ ],
825
+ "value": "#56C7E4"
826
+ },
827
+ {
828
+ "path": [
829
+ "palette",
830
+ "graph",
831
+ "5"
832
+ ],
833
+ "value": "#F16767"
834
+ },
835
+ {
836
+ "path": [
837
+ "palette",
838
+ "graph",
839
+ "6"
840
+ ],
841
+ "value": "#D8C7AE"
842
+ },
843
+ {
844
+ "path": [
845
+ "palette",
846
+ "graph",
847
+ "7"
848
+ ],
849
+ "value": "#8DCC93"
850
+ },
851
+ {
852
+ "path": [
853
+ "palette",
854
+ "graph",
855
+ "8"
856
+ ],
857
+ "value": "#ECB4C9"
858
+ },
859
+ {
860
+ "path": [
861
+ "palette",
862
+ "graph",
863
+ "9"
864
+ ],
865
+ "value": "#4D8DDA"
866
+ },
867
+ {
868
+ "path": [
869
+ "palette",
870
+ "graph",
871
+ "10"
872
+ ],
873
+ "value": "#FFC354"
874
+ },
875
+ {
876
+ "path": [
877
+ "palette",
878
+ "graph",
879
+ "11"
880
+ ],
881
+ "value": "#DA7294"
882
+ },
883
+ {
884
+ "path": [
885
+ "palette",
886
+ "graph",
887
+ "12"
888
+ ],
889
+ "value": "#579380"
890
+ }
891
+ ],
892
+ "palette-light": [
893
+ {
894
+ "path": [
895
+ "palette",
896
+ "light",
897
+ "neutral",
898
+ "text",
899
+ "weakest"
618
900
  ],
619
901
  "value": "#B2B7BD",
902
+ "description": "Should be used mainly for disabled text"
903
+ },
904
+ {
905
+ "path": [
906
+ "palette",
907
+ "light",
908
+ "neutral",
909
+ "text",
910
+ "weaker"
911
+ ],
912
+ "value": "#717780",
620
913
  "description": "Should be used sparsely and mainly for headers and subtitles to differentiate from input text"
621
914
  },
622
915
  {
623
916
  "path": [
624
917
  "palette",
625
- "dark",
918
+ "light",
626
919
  "neutral",
627
920
  "text",
628
921
  "weak"
629
922
  ],
630
- "value": "#C4C8CD",
923
+ "value": "#535B66",
631
924
  "description": "Used for labels, icon color and descriptions"
632
925
  },
633
926
  {
634
927
  "path": [
635
928
  "palette",
636
- "dark",
929
+ "light",
637
930
  "neutral",
638
931
  "text",
639
932
  "default"
640
933
  ],
641
- "value": "#F5F7FA",
934
+ "value": "#151E29",
642
935
  "description": "Used for all default text"
643
936
  },
644
937
  {
645
938
  "path": [
646
939
  "palette",
647
- "dark",
940
+ "light",
648
941
  "neutral",
649
942
  "text",
650
943
  "inverse"
651
944
  ],
652
- "value": "#151E29",
945
+ "value": "#FFFFFF",
653
946
  "description": "Default text on Neutral-bg-strongest or other dark backgrounds"
654
947
  },
655
948
  {
656
949
  "path": [
657
950
  "palette",
658
- "dark",
951
+ "light",
659
952
  "neutral",
660
953
  "icon"
661
954
  ],
662
- "value": "#C4C8CD",
955
+ "value": "#535B66",
663
956
  "description": "Used as a default neutral icon color"
664
957
  },
665
958
  {
666
959
  "path": [
667
960
  "palette",
668
- "dark",
961
+ "light",
669
962
  "neutral",
670
963
  "bg",
671
964
  "weak"
672
965
  ],
673
- "value": "29, 38, 49",
966
+ "value": "#FFFFFF",
674
967
  "description": "Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default"
675
968
  },
676
969
  {
677
970
  "path": [
678
971
  "palette",
679
- "dark",
972
+ "light",
680
973
  "neutral",
681
974
  "bg",
682
975
  "default"
683
976
  ],
684
- "value": "#151E29",
977
+ "value": "#F5F7FA",
685
978
  "description": "Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak"
686
979
  },
687
980
  {
688
981
  "path": [
689
982
  "palette",
690
- "dark",
983
+ "light",
691
984
  "neutral",
692
985
  "bg",
693
986
  "strong"
694
987
  ],
695
- "value": "45, 53, 63",
988
+ "value": "#E6E9EE",
696
989
  "description": "Use sparsely, mainly included in some component states"
697
990
  },
698
991
  {
699
992
  "path": [
700
993
  "palette",
701
- "dark",
994
+ "light",
702
995
  "neutral",
703
996
  "bg",
704
997
  "strongest"
705
998
  ],
706
- "value": "#FFFFFF",
999
+ "value": "#535B66",
707
1000
  "description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout"
708
1001
  },
709
1002
  {
710
1003
  "path": [
711
1004
  "palette",
712
- "dark",
1005
+ "light",
713
1006
  "neutral",
714
1007
  "border",
715
1008
  "weak"
716
1009
  ],
717
- "value": "37, 47, 59",
1010
+ "value": "#EEF1F6",
718
1011
  "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"
719
1012
  },
720
1013
  {
721
1014
  "path": [
722
1015
  "palette",
723
- "dark",
1016
+ "light",
724
1017
  "neutral",
725
1018
  "border",
726
1019
  "strong"
727
1020
  ],
728
- "value": "#717780",
1021
+ "value": "#C4C8CD",
729
1022
  "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"
730
1023
  },
731
1024
  {
732
1025
  "path": [
733
1026
  "palette",
734
- "dark",
1027
+ "light",
735
1028
  "neutral",
736
1029
  "hover"
737
1030
  ],
738
- "value": "rgba(196, 200, 205,0.1)",
1031
+ "value": "rgba(113,119,128,0.1)",
739
1032
  "description": "Used for neutral hover states on components"
740
1033
  },
741
1034
  {
742
1035
  "path": [
743
1036
  "palette",
744
- "dark",
1037
+ "light",
745
1038
  "neutral",
746
1039
  "pressed"
747
1040
  ],
748
- "value": "rgba(196, 200, 205,0.2)",
1041
+ "value": "rgba(113,119,128,0.2)",
749
1042
  "description": "Used for neutral pressed states on components"
750
1043
  },
751
1044
  {
752
1045
  "path": [
753
1046
  "palette",
754
- "dark",
1047
+ "light",
755
1048
  "primary",
756
1049
  "text"
757
1050
  ],
758
- "value": "#a3e2ff",
1051
+ "value": "#006FD6",
759
1052
  "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"
760
1053
  },
761
1054
  {
762
1055
  "path": [
763
1056
  "palette",
764
- "dark",
1057
+ "light",
765
1058
  "primary",
766
1059
  "icon"
767
1060
  ],
768
- "value": "#a3e2ff",
1061
+ "value": "#006FD6",
769
1062
  "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"
770
1063
  },
771
1064
  {
772
1065
  "path": [
773
1066
  "palette",
774
- "dark",
1067
+ "light",
775
1068
  "primary",
776
1069
  "bg",
777
1070
  "strong"
778
1071
  ],
779
- "value": "#a3e2ff",
1072
+ "value": "#006FD6",
780
1073
  "description": "Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors"
781
1074
  },
782
1075
  {
783
1076
  "path": [
784
1077
  "palette",
785
- "dark",
1078
+ "light",
786
1079
  "primary",
787
1080
  "bg",
788
1081
  "weak"
789
1082
  ],
790
- "value": "49, 69, 84",
1083
+ "value": "#e6f8ff",
791
1084
  "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"
792
1085
  },
793
1086
  {
794
1087
  "path": [
795
1088
  "palette",
796
- "dark",
1089
+ "light",
797
1090
  "primary",
798
1091
  "border",
799
1092
  "strong"
800
1093
  ],
801
- "value": "#a3e2ff",
1094
+ "value": "#006FD6",
802
1095
  "description": "Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard"
803
1096
  },
804
1097
  {
805
1098
  "path": [
806
1099
  "palette",
807
- "dark",
1100
+ "light",
808
1101
  "primary",
809
1102
  "border",
810
1103
  "weak"
811
1104
  ],
812
- "value": "78, 108, 126",
1105
+ "value": "#7ad1ff",
813
1106
  "description": "Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background"
814
1107
  },
815
1108
  {
816
1109
  "path": [
817
1110
  "palette",
818
- "dark",
1111
+ "light",
819
1112
  "primary",
820
1113
  "focus"
821
1114
  ],
822
- "value": "#7ad1ff",
1115
+ "value": "#018bff",
823
1116
  "description": "Used for all focused states"
824
1117
  },
825
1118
  {
826
1119
  "path": [
827
1120
  "palette",
828
- "dark",
1121
+ "light",
829
1122
  "primary",
830
1123
  "hover",
831
1124
  "weak"
832
1125
  ],
833
- "value": "rgba(122, 209, 255,0.08)",
1126
+ "value": "rgba(1,139,255,0.08)",
834
1127
  "description": "Used for hover states where the background is either transparent or use Neutral-bg-weak"
835
1128
  },
836
1129
  {
837
1130
  "path": [
838
1131
  "palette",
839
- "dark",
1132
+ "light",
840
1133
  "primary",
841
1134
  "hover",
842
1135
  "strong"
843
1136
  ],
844
- "value": "#7ad1ff",
1137
+ "value": "#0056b3",
845
1138
  "description": "Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
846
1139
  },
847
1140
  {
848
1141
  "path": [
849
1142
  "palette",
850
- "dark",
1143
+ "light",
851
1144
  "primary",
852
1145
  "pressed",
853
1146
  "weak"
854
1147
  ],
855
- "value": "rgba(122, 209, 255,0.12)",
1148
+ "value": "rgba(1,139,255,0.12)",
856
1149
  "description": "Used for pressed states where the background is either transparent or use Neutral-bg-weak"
857
1150
  },
858
1151
  {
859
1152
  "path": [
860
1153
  "palette",
861
- "dark",
1154
+ "light",
862
1155
  "primary",
863
1156
  "pressed",
864
1157
  "strong"
865
1158
  ],
866
- "value": "#7ad1ff",
1159
+ "value": "#004092",
867
1160
  "description": "Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
868
1161
  },
869
1162
  {
870
1163
  "path": [
871
1164
  "palette",
872
- "dark",
1165
+ "light",
873
1166
  "danger",
874
1167
  "text"
875
1168
  ],
876
- "value": "#ffb8c4",
1169
+ "value": "#cc254b",
877
1170
  "description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
878
1171
  },
879
1172
  {
880
1173
  "path": [
881
1174
  "palette",
882
- "dark",
1175
+ "light",
883
1176
  "danger",
884
1177
  "icon"
885
1178
  ],
886
- "value": "#ffb8c4",
1179
+ "value": "#cc254b",
887
1180
  "description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
888
1181
  },
889
1182
  {
890
1183
  "path": [
891
1184
  "palette",
892
- "dark",
1185
+ "light",
893
1186
  "danger",
894
1187
  "bg",
895
1188
  "strong"
896
1189
  ],
897
- "value": "#ffb8c4",
1190
+ "value": "#cc254b",
898
1191
  "description": "Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states"
899
1192
  },
900
1193
  {
901
1194
  "path": [
902
1195
  "palette",
903
- "dark",
1196
+ "light",
904
1197
  "danger",
905
1198
  "bg",
906
1199
  "weak"
907
1200
  ],
908
- "value": "68, 61, 72",
1201
+ "value": "#ffe6e9",
909
1202
  "description": "Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags"
910
1203
  },
911
1204
  {
912
1205
  "path": [
913
1206
  "palette",
914
- "dark",
1207
+ "light",
915
1208
  "danger",
916
1209
  "border",
917
1210
  "strong"
918
1211
  ],
919
- "value": "#ffb8c4",
1212
+ "value": "#cc254b",
920
1213
  "description": "Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels"
921
1214
  },
922
1215
  {
923
1216
  "path": [
924
1217
  "palette",
925
- "dark",
1218
+ "light",
926
1219
  "danger",
927
1220
  "border",
928
1221
  "weak"
929
1222
  ],
930
- "value": "114, 91, 103",
1223
+ "value": "#ffb8c4",
931
1224
  "description": "Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background"
932
1225
  },
933
1226
  {
934
1227
  "path": [
935
1228
  "palette",
936
- "dark",
1229
+ "light",
937
1230
  "danger",
938
1231
  "hover",
939
1232
  "weak"
940
1233
  ],
941
- "value": "rgba(255, 102, 138,0.08)",
1234
+ "value": "rgba(237,18,82,0.08)",
942
1235
  "description": "Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak"
943
1236
  },
944
1237
  {
945
1238
  "path": [
946
1239
  "palette",
947
- "dark",
1240
+ "light",
948
1241
  "danger",
949
1242
  "hover",
950
1243
  "strong"
951
1244
  ],
952
- "value": "#ff668a",
1245
+ "value": "#a1003b",
953
1246
  "description": "Only used for hover states in critical filled buttons"
954
1247
  },
955
1248
  {
956
1249
  "path": [
957
1250
  "palette",
958
- "dark",
1251
+ "light",
959
1252
  "danger",
960
1253
  "pressed",
961
1254
  "weak"
962
1255
  ],
963
- "value": "rgba(255, 102, 138,0.12)",
1256
+ "value": "rgba(237,18,82,0.12)",
964
1257
  "description": "Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak"
965
1258
  },
966
1259
  {
967
1260
  "path": [
968
1261
  "palette",
969
- "dark",
1262
+ "light",
970
1263
  "danger",
971
1264
  "pressed",
972
1265
  "strong"
973
1266
  ],
974
- "value": "#ff668a",
1267
+ "value": "#7a0031",
975
1268
  "description": "Only used for pressed states in critical filled buttons"
976
1269
  },
977
1270
  {
978
1271
  "path": [
979
1272
  "palette",
980
- "dark",
1273
+ "light",
981
1274
  "warning",
982
1275
  "text"
983
1276
  ],
984
- "value": "#FFEA8C",
1277
+ "value": "#966c2e",
985
1278
  "description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
986
1279
  },
987
1280
  {
988
1281
  "path": [
989
1282
  "palette",
990
- "dark",
1283
+ "light",
991
1284
  "warning",
992
1285
  "icon"
993
1286
  ],
994
- "value": "#FFEA8C",
1287
+ "value": "#966c2e",
995
1288
  "description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
996
1289
  },
997
1290
  {
998
1291
  "path": [
999
1292
  "palette",
1000
- "dark",
1293
+ "light",
1001
1294
  "warning",
1002
1295
  "bg",
1003
1296
  "strong"
1004
1297
  ],
1005
- "value": "#FFEA8C",
1298
+ "value": "#966c2e",
1006
1299
  "description": "Use sparsely. Only used for filled labels"
1007
1300
  },
1008
1301
  {
1009
1302
  "path": [
1010
1303
  "palette",
1011
- "dark",
1304
+ "light",
1012
1305
  "warning",
1013
1306
  "bg",
1014
1307
  "weak"
1015
1308
  ],
1016
- "value": "68, 71, 60",
1309
+ "value": "#FFFBDE",
1017
1310
  "description": "Used as backgrounds for warning components states such as banner and semi-filled labels"
1018
1311
  },
1019
1312
  {
1020
1313
  "path": [
1021
1314
  "palette",
1022
- "dark",
1315
+ "light",
1023
1316
  "warning",
1024
1317
  "border",
1025
1318
  "strong"
1026
1319
  ],
1027
- "value": "#FFEA8C",
1320
+ "value": "#966c2e",
1028
1321
  "description": "Use sparsely. Only used for outlined labels"
1029
1322
  },
1030
1323
  {
1031
1324
  "path": [
1032
1325
  "palette",
1033
- "dark",
1326
+ "light",
1034
1327
  "warning",
1035
1328
  "border",
1036
1329
  "weak"
1037
1330
  ],
1038
- "value": "114, 111, 80",
1331
+ "value": "#FFEA8C",
1039
1332
  "description": "Use sparsely. Mainly used in combination with elements that use the Warning-bg-weak to stand out more from the background"
1040
1333
  },
1041
1334
  {
1042
1335
  "path": [
1043
1336
  "palette",
1044
- "dark",
1337
+ "light",
1045
1338
  "success",
1046
1339
  "text"
1047
1340
  ],
1048
- "value": "#98EDCB",
1341
+ "value": "#327D60",
1049
1342
  "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
1050
1343
  },
1051
1344
  {
1052
1345
  "path": [
1053
1346
  "palette",
1054
- "dark",
1347
+ "light",
1055
1348
  "success",
1056
1349
  "icon"
1057
1350
  ],
1058
- "value": "#98EDCB",
1351
+ "value": "#327D60",
1059
1352
  "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
1060
1353
  },
1061
1354
  {
1062
1355
  "path": [
1063
1356
  "palette",
1064
- "dark",
1357
+ "light",
1065
1358
  "success",
1066
1359
  "bg",
1067
1360
  "strong"
1068
1361
  ],
1069
- "value": "#98EDCB",
1362
+ "value": "#327D60",
1070
1363
  "description": "Use sparsely. Only used for filled labels"
1071
1364
  },
1072
1365
  {
1073
1366
  "path": [
1074
1367
  "palette",
1075
- "dark",
1368
+ "light",
1076
1369
  "success",
1077
1370
  "bg",
1078
1371
  "weak"
1079
1372
  ],
1080
- "value": "47, 71, 73",
1373
+ "value": "#E1FAEF",
1081
1374
  "description": "Used as backgrounds for success components states such as banner and semi-filled labels"
1082
1375
  },
1083
1376
  {
1084
1377
  "path": [
1085
1378
  "palette",
1086
- "dark",
1379
+ "light",
1087
1380
  "success",
1088
1381
  "border",
1089
1382
  "strong"
1090
1383
  ],
1091
- "value": "#98EDCB",
1384
+ "value": "#327D60",
1092
1385
  "description": "Use sparsely. Only used for outlined labels"
1093
1386
  },
1094
1387
  {
1095
1388
  "path": [
1096
1389
  "palette",
1097
- "dark",
1390
+ "light",
1098
1391
  "success",
1099
1392
  "border",
1100
1393
  "weak"
1101
1394
  ],
1102
- "value": "73, 113, 106",
1395
+ "value": "#98EDCB",
1103
1396
  "description": "Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background"
1104
1397
  }
1105
1398
  ],
1106
- "palette-light": [
1399
+ "colors": [
1107
1400
  {
1108
1401
  "path": [
1109
- "palette",
1110
- "light",
1111
- "neutral",
1112
- "text",
1113
- "weakest"
1402
+ "colors",
1403
+ "primary",
1404
+ "10"
1114
1405
  ],
1115
- "value": "#B2B7BD",
1116
- "description": "Should be used mainly for disabled text"
1406
+ "value": "#e6f8ff"
1117
1407
  },
1118
1408
  {
1119
1409
  "path": [
1120
- "palette",
1121
- "light",
1122
- "neutral",
1123
- "text",
1124
- "weaker"
1410
+ "colors",
1411
+ "primary",
1412
+ "20"
1125
1413
  ],
1126
- "value": "#717780",
1127
- "description": "Should be used sparsely and mainly for headers and subtitles to differentiate from input text"
1414
+ "value": "#a3e2ff"
1128
1415
  },
1129
1416
  {
1130
1417
  "path": [
1131
- "palette",
1132
- "light",
1133
- "neutral",
1134
- "text",
1135
- "weak"
1418
+ "colors",
1419
+ "primary",
1420
+ "30"
1136
1421
  ],
1137
- "value": "#535B66",
1138
- "description": "Used for labels, icon color and descriptions"
1422
+ "value": "#7ad1ff"
1139
1423
  },
1140
1424
  {
1141
1425
  "path": [
1142
- "palette",
1143
- "light",
1144
- "neutral",
1145
- "text",
1146
- "default"
1426
+ "colors",
1427
+ "primary",
1428
+ "40"
1147
1429
  ],
1148
- "value": "#151E29",
1149
- "description": "Used for all default text"
1430
+ "value": "#018bff"
1150
1431
  },
1151
1432
  {
1152
1433
  "path": [
1153
- "palette",
1154
- "light",
1155
- "neutral",
1156
- "text",
1157
- "inverse"
1434
+ "colors",
1435
+ "primary",
1436
+ "50"
1158
1437
  ],
1159
- "value": "#FFFFFF",
1160
- "description": "Default text on Neutral-bg-strongest or other dark backgrounds"
1438
+ "value": "#006FD6"
1161
1439
  },
1162
1440
  {
1163
1441
  "path": [
1164
- "palette",
1165
- "light",
1166
- "neutral",
1167
- "icon"
1442
+ "colors",
1443
+ "primary",
1444
+ "60"
1168
1445
  ],
1169
- "value": "#535B66",
1170
- "description": "Used as a default neutral icon color"
1446
+ "value": "#0056b3"
1171
1447
  },
1172
1448
  {
1173
1449
  "path": [
1174
- "palette",
1175
- "light",
1176
- "neutral",
1177
- "bg",
1178
- "weak"
1450
+ "colors",
1451
+ "primary",
1452
+ "70"
1179
1453
  ],
1180
- "value": "#FFFFFF",
1181
- "description": "Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default"
1454
+ "value": "#004092"
1182
1455
  },
1183
1456
  {
1184
1457
  "path": [
1185
- "palette",
1186
- "light",
1187
- "neutral",
1188
- "bg",
1189
- "default"
1458
+ "colors",
1459
+ "danger",
1460
+ "10"
1190
1461
  ],
1191
- "value": "#F5F7FA",
1192
- "description": "Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak"
1462
+ "value": "#ffe6e9"
1193
1463
  },
1194
1464
  {
1195
1465
  "path": [
1196
- "palette",
1197
- "light",
1198
- "neutral",
1199
- "bg",
1200
- "strong"
1466
+ "colors",
1467
+ "danger",
1468
+ "20"
1201
1469
  ],
1202
- "value": "#E6E9EE",
1203
- "description": "Use sparsely, mainly included in some component states"
1470
+ "value": "#ffb8c4"
1204
1471
  },
1205
1472
  {
1206
1473
  "path": [
1207
- "palette",
1208
- "light",
1209
- "neutral",
1210
- "bg",
1211
- "strongest"
1474
+ "colors",
1475
+ "danger",
1476
+ "30"
1212
1477
  ],
1213
- "value": "#535B66",
1214
- "description": "Use sparsely, mainly for tooltips or other elements that should stand out from the light layout"
1478
+ "value": "#ff668a"
1215
1479
  },
1216
1480
  {
1217
1481
  "path": [
1218
- "palette",
1219
- "light",
1220
- "neutral",
1221
- "border",
1222
- "weak"
1482
+ "colors",
1483
+ "danger",
1484
+ "40"
1223
1485
  ],
1224
- "value": "#EEF1F6",
1225
- "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"
1486
+ "value": "#ed1252"
1226
1487
  },
1227
1488
  {
1228
1489
  "path": [
1229
- "palette",
1230
- "light",
1231
- "neutral",
1232
- "border",
1233
- "strong"
1490
+ "colors",
1491
+ "danger",
1492
+ "50"
1234
1493
  ],
1235
- "value": "#C4C8CD",
1236
- "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"
1494
+ "value": "#cc254b"
1237
1495
  },
1238
1496
  {
1239
1497
  "path": [
1240
- "palette",
1241
- "light",
1242
- "neutral",
1243
- "hover"
1498
+ "colors",
1499
+ "danger",
1500
+ "60"
1244
1501
  ],
1245
- "value": "rgba(113,119,128,0.1)",
1246
- "description": "Used for neutral hover states on components"
1502
+ "value": "#a1003b"
1247
1503
  },
1248
1504
  {
1249
1505
  "path": [
1250
- "palette",
1251
- "light",
1252
- "neutral",
1253
- "pressed"
1506
+ "colors",
1507
+ "danger",
1508
+ "70"
1254
1509
  ],
1255
- "value": "rgba(113,119,128,0.2)",
1256
- "description": "Used for neutral pressed states on components"
1510
+ "value": "#7a0031"
1257
1511
  },
1258
1512
  {
1259
1513
  "path": [
1260
- "palette",
1261
- "light",
1262
- "primary",
1263
- "text"
1514
+ "colors",
1515
+ "success",
1516
+ "10"
1264
1517
  ],
1265
- "value": "#006FD6",
1266
- "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"
1518
+ "value": "#E1FAEF"
1267
1519
  },
1268
1520
  {
1269
1521
  "path": [
1270
- "palette",
1271
- "light",
1272
- "primary",
1273
- "icon"
1522
+ "colors",
1523
+ "success",
1524
+ "20"
1274
1525
  ],
1275
- "value": "#006FD6",
1276
- "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"
1526
+ "value": "#98EDCB"
1277
1527
  },
1278
1528
  {
1279
1529
  "path": [
1280
- "palette",
1281
- "light",
1282
- "primary",
1283
- "bg",
1284
- "strong"
1530
+ "colors",
1531
+ "success",
1532
+ "30"
1285
1533
  ],
1286
- "value": "#006FD6",
1287
- "description": "Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors"
1534
+ "value": "#44D4A4"
1288
1535
  },
1289
1536
  {
1290
1537
  "path": [
1291
- "palette",
1292
- "light",
1293
- "primary",
1294
- "bg",
1295
- "weak"
1538
+ "colors",
1539
+ "success",
1540
+ "40"
1296
1541
  ],
1297
- "value": "#e6f8ff",
1298
- "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"
1542
+ "value": "#00BA88"
1299
1543
  },
1300
1544
  {
1301
1545
  "path": [
1302
- "palette",
1303
- "light",
1304
- "primary",
1305
- "border",
1306
- "strong"
1546
+ "colors",
1547
+ "success",
1548
+ "50"
1307
1549
  ],
1308
- "value": "#006FD6",
1309
- "description": "Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard"
1550
+ "value": "#327D60"
1310
1551
  },
1311
1552
  {
1312
1553
  "path": [
1313
- "palette",
1314
- "light",
1315
- "primary",
1316
- "border",
1317
- "weak"
1554
+ "colors",
1555
+ "success",
1556
+ "60"
1318
1557
  ],
1319
- "value": "#7ad1ff",
1320
- "description": "Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background"
1558
+ "value": "#006E58"
1321
1559
  },
1322
1560
  {
1323
1561
  "path": [
1324
- "palette",
1325
- "light",
1326
- "primary",
1327
- "focus"
1562
+ "colors",
1563
+ "success",
1564
+ "70"
1328
1565
  ],
1329
- "value": "#018bff",
1330
- "description": "Used for all focused states"
1566
+ "value": "#00473B"
1331
1567
  },
1332
1568
  {
1333
1569
  "path": [
1334
- "palette",
1335
- "light",
1336
- "primary",
1337
- "hover",
1338
- "weak"
1570
+ "colors",
1571
+ "warning",
1572
+ "10"
1339
1573
  ],
1340
- "value": "rgba(1,139,255,0.08)",
1341
- "description": "Used for hover states where the background is either transparent or use Neutral-bg-weak"
1574
+ "value": "#FFFBDE"
1342
1575
  },
1343
1576
  {
1344
1577
  "path": [
1345
- "palette",
1346
- "light",
1347
- "primary",
1348
- "hover",
1349
- "strong"
1578
+ "colors",
1579
+ "warning",
1580
+ "20"
1350
1581
  ],
1351
- "value": "#0056b3",
1352
- "description": "Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
1582
+ "value": "#FFF4B5"
1353
1583
  },
1354
1584
  {
1355
1585
  "path": [
1356
- "palette",
1357
- "light",
1358
- "primary",
1359
- "pressed",
1360
- "weak"
1586
+ "colors",
1587
+ "warning",
1588
+ "30"
1361
1589
  ],
1362
- "value": "rgba(1,139,255,0.12)",
1363
- "description": "Used for pressed states where the background is either transparent or use Neutral-bg-weak"
1590
+ "value": "#FFEA8C"
1364
1591
  },
1365
1592
  {
1366
1593
  "path": [
1367
- "palette",
1368
- "light",
1369
- "primary",
1370
- "pressed",
1371
- "strong"
1594
+ "colors",
1595
+ "warning",
1596
+ "40"
1372
1597
  ],
1373
- "value": "#004092",
1374
- "description": "Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse"
1598
+ "value": "#FFDE63"
1375
1599
  },
1376
1600
  {
1377
1601
  "path": [
1378
- "palette",
1379
- "light",
1380
- "danger",
1381
- "text"
1602
+ "colors",
1603
+ "warning",
1604
+ "50"
1382
1605
  ],
1383
- "value": "#cc254b",
1384
- "description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
1606
+ "value": "#D9B54A"
1385
1607
  },
1386
1608
  {
1387
1609
  "path": [
1388
- "palette",
1389
- "light",
1390
- "danger",
1391
- "icon"
1610
+ "colors",
1611
+ "warning",
1612
+ "60"
1392
1613
  ],
1393
- "value": "#cc254b",
1394
- "description": "Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors"
1614
+ "value": "#966c2e"
1395
1615
  },
1396
1616
  {
1397
1617
  "path": [
1398
- "palette",
1399
- "light",
1400
- "danger",
1401
- "bg",
1402
- "strong"
1618
+ "colors",
1619
+ "warning",
1620
+ "70"
1403
1621
  ],
1404
- "value": "#cc254b",
1405
- "description": "Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states"
1622
+ "value": "#664817"
1406
1623
  },
1407
1624
  {
1408
1625
  "path": [
1409
- "palette",
1410
- "light",
1411
- "danger",
1412
- "bg",
1413
- "weak"
1626
+ "colors",
1627
+ "blueberry",
1628
+ "10"
1414
1629
  ],
1415
- "value": "#ffe6e9",
1416
- "description": "Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags"
1630
+ "value": "#E8EBF6"
1417
1631
  },
1418
1632
  {
1419
1633
  "path": [
1420
- "palette",
1421
- "light",
1422
- "danger",
1423
- "border",
1424
- "strong"
1634
+ "colors",
1635
+ "blueberry",
1636
+ "20"
1425
1637
  ],
1426
- "value": "#cc254b",
1427
- "description": "Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels"
1638
+ "value": "#C4CCE9"
1428
1639
  },
1429
1640
  {
1430
1641
  "path": [
1431
- "palette",
1432
- "light",
1433
- "danger",
1434
- "border",
1435
- "weak"
1642
+ "colors",
1643
+ "blueberry",
1644
+ "30"
1436
1645
  ],
1437
- "value": "#ffb8c4",
1438
- "description": "Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background"
1646
+ "value": "#9DABD9"
1439
1647
  },
1440
1648
  {
1441
1649
  "path": [
1442
- "palette",
1443
- "light",
1444
- "danger",
1445
- "hover",
1446
- "weak"
1650
+ "colors",
1651
+ "blueberry",
1652
+ "40"
1447
1653
  ],
1448
- "value": "rgba(237,18,82,0.08)",
1449
- "description": "Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak"
1654
+ "value": "#768ACA"
1450
1655
  },
1451
1656
  {
1452
1657
  "path": [
1453
- "palette",
1454
- "light",
1455
- "danger",
1456
- "hover",
1457
- "strong"
1658
+ "colors",
1659
+ "blueberry",
1660
+ "50"
1458
1661
  ],
1459
- "value": "#a1003b",
1460
- "description": "Only used for hover states in critical filled buttons"
1662
+ "value": "#3557B4"
1461
1663
  },
1462
1664
  {
1463
1665
  "path": [
1464
- "palette",
1465
- "light",
1466
- "danger",
1467
- "pressed",
1468
- "weak"
1666
+ "colors",
1667
+ "blueberry",
1668
+ "60"
1469
1669
  ],
1470
- "value": "rgba(237,18,82,0.12)",
1471
- "description": "Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak"
1670
+ "value": "#25459E"
1472
1671
  },
1473
1672
  {
1474
1673
  "path": [
1475
- "palette",
1476
- "light",
1477
- "danger",
1478
- "pressed",
1479
- "strong"
1674
+ "colors",
1675
+ "blueberry",
1676
+ "70"
1480
1677
  ],
1481
- "value": "#7a0031",
1482
- "description": "Only used for pressed states in critical filled buttons"
1678
+ "value": "#0B297D"
1483
1679
  },
1484
1680
  {
1485
1681
  "path": [
1486
- "palette",
1487
- "light",
1488
- "warning",
1489
- "text"
1682
+ "colors",
1683
+ "mint",
1684
+ "10"
1490
1685
  ],
1491
- "value": "#966c2e",
1492
- "description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
1686
+ "value": "#F0FFFA"
1493
1687
  },
1494
1688
  {
1495
1689
  "path": [
1496
- "palette",
1497
- "light",
1498
- "warning",
1499
- "icon"
1690
+ "colors",
1691
+ "mint",
1692
+ "20"
1500
1693
  ],
1501
- "value": "#966c2e",
1502
- "description": "Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors"
1694
+ "value": "#D1FFF4"
1503
1695
  },
1504
1696
  {
1505
1697
  "path": [
1506
- "palette",
1507
- "light",
1508
- "warning",
1509
- "bg",
1510
- "strong"
1698
+ "colors",
1699
+ "mint",
1700
+ "30"
1511
1701
  ],
1512
- "value": "#966c2e",
1513
- "description": "Use sparsely. Only used for filled labels"
1702
+ "value": "#A8FFEE"
1514
1703
  },
1515
1704
  {
1516
1705
  "path": [
1517
- "palette",
1518
- "light",
1519
- "warning",
1520
- "bg",
1521
- "weak"
1706
+ "colors",
1707
+ "mint",
1708
+ "40"
1522
1709
  ],
1523
- "value": "#FFFBDE",
1524
- "description": "Used as backgrounds for warning components states such as banner and semi-filled labels"
1710
+ "value": "#55F9E2"
1525
1711
  },
1526
1712
  {
1527
1713
  "path": [
1528
- "palette",
1529
- "light",
1530
- "warning",
1531
- "border",
1532
- "strong"
1714
+ "colors",
1715
+ "mint",
1716
+ "50"
1533
1717
  ],
1534
- "value": "#966c2e",
1535
- "description": "Use sparsely. Only used for outlined labels"
1718
+ "value": "#3DD4C5"
1536
1719
  },
1537
1720
  {
1538
1721
  "path": [
1539
- "palette",
1540
- "light",
1541
- "warning",
1542
- "border",
1543
- "weak"
1722
+ "colors",
1723
+ "mint",
1724
+ "60"
1544
1725
  ],
1545
- "value": "#FFEA8C",
1546
- "description": "Use sparsely. Mainly used in combination with elements that use the Warning-bg-weak to stand out more from the background"
1726
+ "value": "#2AADA5"
1547
1727
  },
1548
1728
  {
1549
1729
  "path": [
1550
- "palette",
1551
- "light",
1552
- "success",
1553
- "text"
1730
+ "colors",
1731
+ "mint",
1732
+ "70"
1554
1733
  ],
1555
- "value": "#327D60",
1556
- "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
1734
+ "value": "#116161"
1557
1735
  },
1558
1736
  {
1559
1737
  "path": [
1560
- "palette",
1561
- "light",
1562
- "success",
1563
- "icon"
1738
+ "colors",
1739
+ "neutral",
1740
+ "10"
1564
1741
  ],
1565
- "value": "#327D60",
1566
- "description": "Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors"
1742
+ "value": "#FFFFFF"
1567
1743
  },
1568
1744
  {
1569
1745
  "path": [
1570
- "palette",
1571
- "light",
1572
- "success",
1573
- "bg",
1574
- "strong"
1746
+ "colors",
1747
+ "neutral",
1748
+ "20"
1575
1749
  ],
1576
- "value": "#327D60",
1577
- "description": "Use sparsely. Only used for filled labels"
1750
+ "value": "#F5F7FA"
1578
1751
  },
1579
1752
  {
1580
1753
  "path": [
1581
- "palette",
1582
- "light",
1583
- "success",
1584
- "bg",
1585
- "weak"
1754
+ "colors",
1755
+ "neutral",
1756
+ "30"
1586
1757
  ],
1587
- "value": "#E1FAEF",
1588
- "description": "Used as backgrounds for success components states such as banner and semi-filled labels"
1758
+ "value": "#EEF1F6"
1589
1759
  },
1590
1760
  {
1591
1761
  "path": [
1592
- "palette",
1593
- "light",
1594
- "success",
1595
- "border",
1596
- "strong"
1762
+ "colors",
1763
+ "neutral",
1764
+ "40"
1597
1765
  ],
1598
- "value": "#327D60",
1599
- "description": "Use sparsely. Only used for outlined labels"
1766
+ "value": "#E6E9EE"
1600
1767
  },
1601
1768
  {
1602
1769
  "path": [
1603
- "palette",
1604
- "light",
1605
- "success",
1606
- "border",
1607
- "weak"
1770
+ "colors",
1771
+ "neutral",
1772
+ "50"
1608
1773
  ],
1609
- "value": "#98EDCB",
1610
- "description": "Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background"
1774
+ "value": "#C4C8CD"
1775
+ },
1776
+ {
1777
+ "path": [
1778
+ "colors",
1779
+ "neutral",
1780
+ "60"
1781
+ ],
1782
+ "value": "#B2B7BD"
1783
+ },
1784
+ {
1785
+ "path": [
1786
+ "colors",
1787
+ "neutral",
1788
+ "70"
1789
+ ],
1790
+ "value": "#717780"
1791
+ },
1792
+ {
1793
+ "path": [
1794
+ "colors",
1795
+ "neutral",
1796
+ "80"
1797
+ ],
1798
+ "value": "#535B66"
1799
+ },
1800
+ {
1801
+ "path": [
1802
+ "colors",
1803
+ "neutral",
1804
+ "90"
1805
+ ],
1806
+ "value": "#151E29"
1611
1807
  }
1612
1808
  ],
1613
1809
  "font": [