@drivy/cobalt 0.42.2 → 0.42.4

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 (40) hide show
  1. package/cjs/tokens/palette.js +78 -60
  2. package/cjs/tokens/palette.js.map +1 -1
  3. package/cjs/tokens/theme.js +194 -167
  4. package/cjs/tokens/theme.js.map +1 -1
  5. package/components/ContainedIcon/index.js +3 -2
  6. package/components/ContainedIcon/index.js.map +1 -1
  7. package/components/Flag/index.js +3 -3
  8. package/components/Flag/index.js.map +1 -1
  9. package/components/Form/RadioWithDetails.js +2 -2
  10. package/components/Form/RadioWithDetails.js.map +1 -1
  11. package/components/Layout/Components/LayoutCard.js +15 -0
  12. package/components/Layout/Components/LayoutCard.js.map +1 -0
  13. package/components/Layout/Components/LayoutSection.js +11 -0
  14. package/components/Layout/Components/LayoutSection.js.map +1 -0
  15. package/components/Layout/Components/LayoutSectionTitle.js +8 -0
  16. package/components/Layout/Components/LayoutSectionTitle.js.map +1 -0
  17. package/components/Layout/Components/LayoutStack.js +44 -0
  18. package/components/Layout/Components/LayoutStack.js.map +1 -0
  19. package/index.js +4 -0
  20. package/index.js.map +1 -1
  21. package/package.json +1 -1
  22. package/styles/components/Form/RadioWithDetails.scss +14 -3
  23. package/styles/components/Icon/iconColors.scss +64 -52
  24. package/styles/components/Icon/index.scss +5 -1
  25. package/styles/components/PlateNumber/index.scss +4 -0
  26. package/styles/components/Tag/index.scss +4 -0
  27. package/styles/core/_colors-map.scss +180 -155
  28. package/styles/core/default-theme.scss +136 -111
  29. package/styles/core/palette.scss +54 -40
  30. package/styles/core/theme.scss +281 -231
  31. package/tokens/palette.js +78 -61
  32. package/tokens/palette.js.map +1 -1
  33. package/tokens/theme.js +194 -168
  34. package/tokens/theme.js.map +1 -1
  35. package/types/src/components/ContainedIcon/index.d.ts +2 -1
  36. package/types/src/components/Flag/index.d.ts +2 -1
  37. package/types/src/components/Icon/index.d.ts +1 -1
  38. package/types/src/index.d.ts +2 -0
  39. package/types/src/tokens/index.d.ts +174 -133
  40. package/utilities.css +370 -327
@@ -5,7 +5,7 @@ interface IconsMap {
5
5
  }
6
6
  export declare const BUNDLED_ICONS: IconsMap;
7
7
  export type IconSources = keyof typeof iconTokens.icons;
8
- export declare const iconColors: ("amber" | "blue" | "coral" | "graphite" | "graphiteLight" | "green" | "greenDark" | "greenLight" | "grey" | "greyDark" | "greyLight" | "greyLighter" | "indigo" | "indigoDark" | "purple" | "purpleLight" | "red" | "turquoise" | "white" | "base" | "baseInteractive" | "subdued" | "subduedInteractive" | "accent" | "accentInteractive" | "accentAlt" | "accentAltInteractive" | "info" | "infoAlt" | "error" | "errorAlt" | "success" | "successAlt" | "warning" | "connect" | "connectAlt" | "driver" | "owner" | "inversed" | "disabled" | "rideShare" | "onRideShare")[];
8
+ export declare const iconColors: ("amber" | "blue" | "coral" | "graphite" | "graphiteLight" | "green" | "greenDark" | "greenLight" | "grey" | "greyDark" | "greyLight" | "greyLighter" | "indigo" | "indigoDark" | "purple" | "purpleLight" | "red" | "turquoise" | "white" | "base" | "subdued" | "accent" | "accentAlt" | "info" | "error" | "errorAlt" | "success" | "successAlt" | "connect" | "connectAlt" | "driver" | "owner" | "disabled" | "disabledAlt" | "warning" | "infoAlt" | "onAccent" | "rideshare" | "onRideshare" | "onSuccess" | "onError" | "baseInteractive" | "subduedInteractive" | "accentInteractive" | "accentAltInteractive")[];
9
9
  export type IconColorsType = (typeof iconColors)[number];
10
10
  export interface IconProps {
11
11
  source: IconSources;
@@ -47,6 +47,8 @@ export { ToggleSwitch } from "./components/Form/ToggleSwitch";
47
47
  export { CalendarView, MonthType, StatusByDateType, } from "./components/Calendar";
48
48
  export { default as Popover } from "./components/Popover";
49
49
  export { default as HorizontalList, HorizontalListPaddingBlock, } from "./components/HorizontalList";
50
+ /** Layouts */
51
+ export * from "./components/Layout/Components";
50
52
  /** HOOKS */
51
53
  export { default as useBreakpoint } from "./hooks/useBreakpoint";
52
54
  /** utils **/
@@ -367,84 +367,100 @@ export declare const zIndexes: {
367
367
  "alert-above": number;
368
368
  };
369
369
  export declare const palette: {
370
- black: {
371
- "50": string;
370
+ white: string;
371
+ purple: {
372
372
  "100": string;
373
373
  "300": string;
374
+ "400": string;
374
375
  "500": string;
375
- "1000": string;
376
+ "700": string;
377
+ "900": string;
378
+ "2000": string;
376
379
  };
377
- grey: {
380
+ purpleDeep: {
378
381
  "100": string;
379
382
  "300": string;
380
- };
381
- green: {
382
- "100": string;
383
- "120": string;
384
- "150": string;
383
+ "400": string;
385
384
  "500": string;
386
385
  "700": string;
387
386
  "900": string;
388
- "1000": string;
387
+ };
388
+ purpleLight: {
389
+ "100": string;
389
390
  };
390
391
  navy: {
391
392
  "50": string;
392
393
  "100": string;
394
+ "120": string;
393
395
  "200": string;
394
396
  "300": string;
395
397
  "500": string;
396
398
  "700": string;
397
399
  "900": string;
398
400
  };
399
- orange: {
401
+ yellow: {
400
402
  "100": string;
401
403
  "300": string;
402
404
  "500": string;
405
+ "700": string;
403
406
  "900": string;
407
+ "1000": string;
404
408
  };
405
- purpleDeep: {
409
+ green: {
406
410
  "100": string;
407
- "300": string;
408
- "400": string;
411
+ "120": string;
412
+ "150": string;
409
413
  "500": string;
410
414
  "700": string;
411
415
  "900": string;
416
+ "1000": string;
412
417
  };
413
- purpleLight: {
414
- "100": string;
415
- };
416
- purple: {
418
+ red: {
417
419
  "100": string;
418
- "300": string;
420
+ "120": string;
421
+ "150": string;
422
+ "200": string;
419
423
  "400": string;
420
424
  "500": string;
421
425
  "700": string;
426
+ "800": string;
422
427
  "900": string;
423
428
  };
424
- red: {
429
+ orange: {
425
430
  "100": string;
426
- "120": string;
427
- "150": string;
428
431
  "300": string;
429
- "400": string;
430
432
  "500": string;
431
- "700": string;
432
433
  "900": string;
433
434
  };
434
- turquoise: {
435
+ black: {
435
436
  "50": string;
437
+ "75": string;
438
+ "100": string;
439
+ "300": string;
436
440
  "500": string;
437
- "700": string;
438
- "900": string;
441
+ "1000": string;
439
442
  };
440
- white: string;
441
- yellow: {
443
+ grey: {
444
+ "50": string;
445
+ "100": string;
446
+ "300": string;
447
+ "500": string;
448
+ };
449
+ blue: {
450
+ "500": string;
451
+ };
452
+ turquoise: {
453
+ "50": string;
442
454
  "100": string;
455
+ "200": string;
443
456
  "300": string;
457
+ "400": string;
444
458
  "500": string;
459
+ "600": string;
445
460
  "700": string;
461
+ "800": string;
446
462
  "900": string;
447
- "1000": string;
463
+ "1200": string;
448
464
  };
449
465
  season: {
450
466
  "100": string;
@@ -461,124 +477,161 @@ export declare const theme: {
461
477
  background: {
462
478
  primary: string;
463
479
  secondary: string;
480
+ accent: string;
481
+ accentAlt: string;
482
+ info: string;
483
+ error: string;
484
+ errorAlt: string;
485
+ success: string;
486
+ successAlt: string;
487
+ connect: string;
488
+ connectAlt: string;
489
+ driver: string;
490
+ owner: string;
491
+ disabled: string;
492
+ neutral: string;
493
+ neutralAlt: string;
494
+ seasonLow: string;
495
+ seasonMedium: string;
496
+ seasonHigh: string;
497
+ seasonVeryhigh: string;
498
+ rental: string;
499
+ blocker: string;
500
+ rideshare: string;
464
501
  secondaryInteractive: {
465
502
  DEFAULT: string;
466
503
  hover: string;
467
504
  };
468
- accent: string;
469
505
  accentInteractive: {
470
506
  DEFAULT: string;
471
507
  hover: string;
472
508
  };
473
- accentAlt: string;
474
509
  accentAltInteractive: {
475
510
  DEFAULT: string;
476
511
  hover: string;
477
512
  };
478
- info: string;
479
- error: string;
513
+ connectInteractive: {
514
+ DEFAULT: string;
515
+ hover: string;
516
+ };
480
517
  errorInteractive: {
481
518
  DEFAULT: string;
482
519
  hover: string;
483
520
  };
521
+ };
522
+ text: {
523
+ base: string;
524
+ subdued: string;
525
+ accent: string;
526
+ accentAlt: string;
527
+ info: string;
528
+ error: string;
484
529
  errorAlt: string;
485
530
  success: string;
486
531
  successAlt: string;
487
532
  connect: string;
488
- connectInteractive: {
489
- DEFAULT: string;
490
- hover: string;
491
- };
492
533
  connectAlt: string;
493
534
  driver: string;
494
535
  owner: string;
536
+ warning: string;
537
+ infoAlt: string;
495
538
  disabled: string;
496
- neutral: string;
497
- neutralAlt: string;
498
- seasonLow: string;
499
- seasonMedium: string;
500
- seasonHigh: string;
501
- seasonVeryHigh: string;
502
- rideShare: string;
503
- };
504
- text: {
505
- base: string;
539
+ onAccent: string;
540
+ onRideshare: string;
541
+ onError: string;
542
+ onSuccess: string;
506
543
  baseInteractive: {
507
544
  DEFAULT: string;
508
545
  hover: string;
509
546
  };
510
- subdued: string;
511
547
  subduedInteractive: {
512
548
  DEFAULT: string;
513
549
  hover: string;
514
550
  };
515
- accent: string;
516
551
  accentInteractive: {
517
552
  DEFAULT: string;
518
553
  hover: string;
519
554
  };
520
- accentAlt: string;
521
555
  accentAltInteractive: {
522
556
  DEFAULT: string;
523
557
  hover: string;
524
558
  };
559
+ };
560
+ icon: {
561
+ base: string;
562
+ subdued: string;
563
+ accent: string;
564
+ accentAlt: string;
525
565
  info: string;
526
- infoAlt: string;
527
566
  error: string;
528
567
  errorAlt: string;
529
568
  success: string;
530
569
  successAlt: string;
531
- warning: string;
532
570
  connect: string;
533
571
  connectAlt: string;
534
572
  driver: string;
535
573
  owner: string;
536
- inversed: string;
537
574
  disabled: string;
575
+ disabledAlt: string;
576
+ warning: string;
577
+ infoAlt: string;
538
578
  onAccent: string;
539
- onError: string;
579
+ rideshare: string;
580
+ onRideshare: string;
540
581
  onSuccess: string;
541
- onConnect: string;
542
- onRideShare: string;
543
- };
544
- buttonBackground: {
545
- selected: string;
546
- destructiveInteractive: {
582
+ onError: string;
583
+ baseInteractive: {
547
584
  DEFAULT: string;
548
585
  hover: string;
549
- press: string;
550
586
  };
551
- disabled: string;
552
- primaryInteractive: {
587
+ subduedInteractive: {
553
588
  DEFAULT: string;
554
589
  hover: string;
555
- press: string;
556
590
  };
557
- secondaryInteractive: {
591
+ accentInteractive: {
558
592
  DEFAULT: string;
559
593
  hover: string;
560
- press: string;
561
594
  };
562
- success: string;
563
- successAltInteractive: {
595
+ accentAltInteractive: {
564
596
  DEFAULT: string;
565
597
  hover: string;
566
- press: string;
567
598
  };
568
- tertiaryInteractive: {
599
+ };
600
+ stroke: {
601
+ base: string;
602
+ subdued: string;
603
+ accent: string;
604
+ accentAlt: string;
605
+ success: string;
606
+ successAlt: string;
607
+ error: string;
608
+ errorAlt: string;
609
+ strong: string;
610
+ onAccent: string;
611
+ rentals: string;
612
+ blokers: string;
613
+ onError: string;
614
+ onSuccess: string;
615
+ baseInteractive: {
569
616
  DEFAULT: string;
570
617
  hover: string;
571
618
  press: string;
572
619
  };
573
- };
574
- buttonIcon: {
575
- selected: string;
576
- destructiveInteractive: {
620
+ accentInteractive: {
577
621
  DEFAULT: string;
578
622
  hover: string;
579
623
  press: string;
580
624
  };
625
+ };
626
+ buttonIcon: {
627
+ primary: string;
628
+ secondary: string;
629
+ tertiary: string;
630
+ destructive: string;
631
+ success: string;
632
+ successAlt: string;
581
633
  disabled: string;
634
+ accentAlt: string;
582
635
  primaryInteractive: {
583
636
  DEFAULT: string;
584
637
  hover: string;
@@ -589,26 +642,31 @@ export declare const theme: {
589
642
  hover: string;
590
643
  press: string;
591
644
  };
592
- success: string;
593
- successAltInteractive: {
645
+ tertiaryInteractive: {
594
646
  DEFAULT: string;
595
647
  hover: string;
596
648
  press: string;
597
649
  };
598
- tertiaryInteractive: {
650
+ destructiveInteractive: {
599
651
  DEFAULT: string;
600
652
  hover: string;
601
653
  press: string;
602
654
  };
603
- };
604
- buttonLabel: {
605
- selected: string;
606
- destructiveInteractive: {
655
+ successAltInteractive: {
607
656
  DEFAULT: string;
608
657
  hover: string;
609
658
  press: string;
610
659
  };
660
+ };
661
+ buttonLabel: {
662
+ primary: string;
663
+ secondary: string;
664
+ tertiary: string;
611
665
  disabled: string;
666
+ accentAlt: string;
667
+ destructive: string;
668
+ success: string;
669
+ successAlt: string;
612
670
  primaryInteractive: {
613
671
  DEFAULT: string;
614
672
  hover: string;
@@ -619,93 +677,76 @@ export declare const theme: {
619
677
  hover: string;
620
678
  press: string;
621
679
  };
622
- success: string;
623
- successAltInteractive: {
624
- DEFAULT: string;
625
- hover: string;
626
- press: string;
627
- };
628
680
  tertiaryInteractive: {
629
681
  DEFAULT: string;
630
682
  hover: string;
631
683
  press: string;
632
684
  };
633
- };
634
- icon: {
635
- base: string;
636
- baseInteractive: {
685
+ destructiveInteractive: {
637
686
  DEFAULT: string;
638
687
  hover: string;
688
+ press: string;
639
689
  };
640
- subdued: string;
641
- subduedInteractive: {
690
+ successAltInteractive: {
642
691
  DEFAULT: string;
643
692
  hover: string;
693
+ press: string;
644
694
  };
645
- accent: string;
646
- accentInteractive: {
695
+ };
696
+ buttonBackground: {
697
+ primary: string;
698
+ secondary: string;
699
+ tertiary: string;
700
+ accentAlt: string;
701
+ destructive: string;
702
+ success: string;
703
+ successAlt: string;
704
+ disabled: string;
705
+ primaryInteractive: {
647
706
  DEFAULT: string;
648
707
  hover: string;
708
+ press: string;
649
709
  };
650
- accentAlt: string;
651
- accentAltInteractive: {
710
+ secondaryInteractive: {
652
711
  DEFAULT: string;
653
712
  hover: string;
713
+ press: string;
654
714
  };
655
- info: string;
656
- infoAlt: string;
657
- error: string;
658
- errorAlt: string;
659
- success: string;
660
- successAlt: string;
661
- warning: string;
662
- connect: string;
663
- connectAlt: string;
664
- driver: string;
665
- owner: string;
666
- inversed: string;
667
- disabled: string;
668
- rideShare: string;
669
- onRideShare: string;
670
- };
671
- stroke: {
672
- base: string;
673
- baseInteractive: {
715
+ tertiaryInteractive: {
674
716
  DEFAULT: string;
675
717
  hover: string;
676
718
  press: string;
677
719
  };
678
- strong: string;
679
- strongInteractive: {
720
+ destructiveInteractive: {
680
721
  DEFAULT: string;
681
722
  hover: string;
682
723
  press: string;
683
724
  };
684
- subdued: string;
685
- accent: string;
686
- accentInteractive: {
725
+ successAltInteractive: {
687
726
  DEFAULT: string;
688
727
  hover: string;
689
728
  press: string;
690
729
  };
691
- accentAlt: string;
692
- error: string;
693
- errorAlt: string;
694
- success: string;
695
- successAlt: string;
696
- onAccent: string;
697
- onError: string;
698
730
  };
699
731
  fill: {
700
732
  base: string;
733
+ accent: string;
701
734
  secondary: string;
702
735
  subdued: string;
703
- accent: string;
736
+ neutral: string;
737
+ negative: string;
704
738
  accentAlt: string;
739
+ disabled: string;
705
740
  error: string;
706
- negative: string;
707
741
  success: string;
708
- disabled: string;
709
- neutral: string;
742
+ rentals: string;
743
+ blockers: string;
744
+ };
745
+ illustrations: {
746
+ primary: string;
747
+ secondary: string;
748
+ acccent1: string;
749
+ accent2: string;
750
+ foregroundDark: string;
710
751
  };
711
752
  };