@drivy/cobalt 0.42.3 → 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.
- package/cjs/tokens/palette.js +78 -60
- package/cjs/tokens/palette.js.map +1 -1
- package/cjs/tokens/theme.js +194 -167
- package/cjs/tokens/theme.js.map +1 -1
- package/components/ContainedIcon/index.js +3 -2
- package/components/ContainedIcon/index.js.map +1 -1
- package/components/Flag/index.js +3 -3
- package/components/Flag/index.js.map +1 -1
- package/components/Form/RadioWithDetails.js +2 -2
- package/components/Form/RadioWithDetails.js.map +1 -1
- package/components/Layout/Components/LayoutCard.js +15 -0
- package/components/Layout/Components/LayoutCard.js.map +1 -0
- package/components/Layout/Components/LayoutSection.js +11 -0
- package/components/Layout/Components/LayoutSection.js.map +1 -0
- package/components/Layout/Components/LayoutSectionTitle.js +8 -0
- package/components/Layout/Components/LayoutSectionTitle.js.map +1 -0
- package/components/Layout/Components/LayoutStack.js +44 -0
- package/components/Layout/Components/LayoutStack.js.map +1 -0
- package/index.js +4 -0
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/styles/components/Form/RadioWithDetails.scss +14 -3
- package/styles/components/Icon/iconColors.scss +64 -52
- package/styles/components/PlateNumber/index.scss +4 -0
- package/styles/components/Tag/index.scss +4 -0
- package/styles/core/_colors-map.scss +180 -155
- package/styles/core/default-theme.scss +136 -111
- package/styles/core/palette.scss +54 -40
- package/styles/core/theme.scss +281 -231
- package/tokens/palette.js +78 -61
- package/tokens/palette.js.map +1 -1
- package/tokens/theme.js +194 -168
- package/tokens/theme.js.map +1 -1
- package/types/src/components/ContainedIcon/index.d.ts +2 -1
- package/types/src/components/Flag/index.d.ts +2 -1
- package/types/src/components/Icon/index.d.ts +1 -1
- package/types/src/index.d.ts +2 -0
- package/types/src/tokens/index.d.ts +174 -133
- 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" | "
|
|
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;
|
package/types/src/index.d.ts
CHANGED
|
@@ -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
|
-
|
|
371
|
-
|
|
370
|
+
white: string;
|
|
371
|
+
purple: {
|
|
372
372
|
"100": string;
|
|
373
373
|
"300": string;
|
|
374
|
+
"400": string;
|
|
374
375
|
"500": string;
|
|
375
|
-
"
|
|
376
|
+
"700": string;
|
|
377
|
+
"900": string;
|
|
378
|
+
"2000": string;
|
|
376
379
|
};
|
|
377
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
409
|
+
green: {
|
|
406
410
|
"100": string;
|
|
407
|
-
"
|
|
408
|
-
"
|
|
411
|
+
"120": string;
|
|
412
|
+
"150": string;
|
|
409
413
|
"500": string;
|
|
410
414
|
"700": string;
|
|
411
415
|
"900": string;
|
|
416
|
+
"1000": string;
|
|
412
417
|
};
|
|
413
|
-
|
|
414
|
-
"100": string;
|
|
415
|
-
};
|
|
416
|
-
purple: {
|
|
418
|
+
red: {
|
|
417
419
|
"100": string;
|
|
418
|
-
"
|
|
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
|
-
|
|
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
|
-
|
|
435
|
+
black: {
|
|
435
436
|
"50": string;
|
|
437
|
+
"75": string;
|
|
438
|
+
"100": string;
|
|
439
|
+
"300": string;
|
|
436
440
|
"500": string;
|
|
437
|
-
"
|
|
438
|
-
"900": string;
|
|
441
|
+
"1000": string;
|
|
439
442
|
};
|
|
440
|
-
|
|
441
|
-
|
|
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
|
-
"
|
|
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
|
-
|
|
479
|
-
|
|
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
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
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
|
-
|
|
579
|
+
rideshare: string;
|
|
580
|
+
onRideshare: string;
|
|
540
581
|
onSuccess: string;
|
|
541
|
-
|
|
542
|
-
|
|
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
|
-
|
|
552
|
-
primaryInteractive: {
|
|
587
|
+
subduedInteractive: {
|
|
553
588
|
DEFAULT: string;
|
|
554
589
|
hover: string;
|
|
555
|
-
press: string;
|
|
556
590
|
};
|
|
557
|
-
|
|
591
|
+
accentInteractive: {
|
|
558
592
|
DEFAULT: string;
|
|
559
593
|
hover: string;
|
|
560
|
-
press: string;
|
|
561
594
|
};
|
|
562
|
-
|
|
563
|
-
successAltInteractive: {
|
|
595
|
+
accentAltInteractive: {
|
|
564
596
|
DEFAULT: string;
|
|
565
597
|
hover: string;
|
|
566
|
-
press: string;
|
|
567
598
|
};
|
|
568
|
-
|
|
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
|
-
|
|
593
|
-
successAltInteractive: {
|
|
645
|
+
tertiaryInteractive: {
|
|
594
646
|
DEFAULT: string;
|
|
595
647
|
hover: string;
|
|
596
648
|
press: string;
|
|
597
649
|
};
|
|
598
|
-
|
|
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
|
-
|
|
641
|
-
subduedInteractive: {
|
|
690
|
+
successAltInteractive: {
|
|
642
691
|
DEFAULT: string;
|
|
643
692
|
hover: string;
|
|
693
|
+
press: string;
|
|
644
694
|
};
|
|
645
|
-
|
|
646
|
-
|
|
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
|
-
|
|
651
|
-
accentAltInteractive: {
|
|
710
|
+
secondaryInteractive: {
|
|
652
711
|
DEFAULT: string;
|
|
653
712
|
hover: string;
|
|
713
|
+
press: string;
|
|
654
714
|
};
|
|
655
|
-
|
|
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
|
-
|
|
679
|
-
strongInteractive: {
|
|
720
|
+
destructiveInteractive: {
|
|
680
721
|
DEFAULT: string;
|
|
681
722
|
hover: string;
|
|
682
723
|
press: string;
|
|
683
724
|
};
|
|
684
|
-
|
|
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
|
-
|
|
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
|
-
|
|
709
|
-
|
|
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
|
};
|