@drivy/cobalt 0.46.0 → 0.46.2

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 (23) hide show
  1. package/cjs/tokens/palette.js +73 -29
  2. package/cjs/tokens/palette.js.map +1 -1
  3. package/cjs/tokens/theme.js +119 -111
  4. package/cjs/tokens/theme.js.map +1 -1
  5. package/components/Calendar/CalendarView/CalendarViewMonth.js +2 -2
  6. package/components/Calendar/CalendarView/CalendarViewMonth.js.map +1 -1
  7. package/package.json +1 -1
  8. package/styles/components/Calendar/CalendarView/index.scss +7 -16
  9. package/styles/components/ContainedIcon/index.scss +2 -0
  10. package/styles/components/Icon/iconColors.scss +42 -30
  11. package/styles/components/Layout/Surfaces/index.scss +36 -20
  12. package/styles/core/_colors-map.scss +49 -41
  13. package/styles/core/breakpoints.scss +20 -0
  14. package/styles/core/default-theme.scss +69 -61
  15. package/styles/core/palette.scss +70 -26
  16. package/styles/core/theme.scss +175 -159
  17. package/tokens/palette.js +73 -29
  18. package/tokens/palette.js.map +1 -1
  19. package/tokens/theme.js +119 -111
  20. package/tokens/theme.js.map +1 -1
  21. package/types/src/components/Icon/index.d.ts +1 -1
  22. package/types/src/tokens/index.d.ts +95 -43
  23. package/utilities.css +249 -169
package/styles/core/default-theme.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  --c-background-primary: var(--c-white);
7
7
  --c-background-secondary: var(--c-white);
8
8
  --c-background-accent: var(--c-purple-500);
9
- --c-background-accentAlt: var(--c-purple-100);
9
+ --c-background-accentAlt: var(--c-purple-200);
10
10
  --c-background-info: var(--c-yellow-100);
11
11
  --c-background-error: var(--c-red-500);
12
12
  --c-background-errorAlt: var(--c-red-100);
@@ -14,51 +14,48 @@
14
14
  --c-background-successAlt: var(--c-green-100);
15
15
  --c-background-connect: var(--c-newPurple-500);
16
16
  --c-background-connectAlt: var(--c-turquoise-50);
17
- --c-background-keyExchange: var(--c-newViolet-500);
18
- --c-background-picked: var(--c-green-700);
19
- --c-background-rideshare: var(--c-black-1000);
20
17
  --c-background-driver: var(--c-yellow-500);
21
18
  --c-background-owner: var(--c-navy-700);
22
- --c-background-disabled: var(--c-navy-100);
19
+ --c-background-disabled: var(--c-navy-50);
23
20
  --c-background-neutral: var(--c-navy-100);
24
21
  --c-background-neutralAlt: var(--c-navy-50);
25
22
  --c-background-seasonLow: var(--c-season-100);
26
- --c-background-seasonMedium: var(--c-season-200);
27
- --c-background-seasonHigh: var(--c-season-300);
28
- --c-background-seasonVeryhigh: var(--c-season-400);
29
- --c-background-rental: var(--c-turquoise-100);
30
- --c-background-blocker: var(--c-navy-100);
23
+ --c-background-seasonMedium: var(--c-season-300);
24
+ --c-background-seasonHigh: var(--c-season-700);
25
+ --c-background-seasonVeryHigh: var(--c-season-1100);
26
+ --c-background-rental: var(--c-blue-500);
27
+ --c-background-rentalAlt: var(--c-blue-300);
28
+ --c-background-blocker: var(--c-grey-100);
29
+ --c-background-rideshare: var(--c-black-1000);
30
+ --c-background-keyExchange: var(--c-newViolet-500);
31
+ --c-background-picked: var(--c-green-700);
31
32
  --c-background-base: var(--c-navy-900);
32
33
  --c-background-secondaryInteractive: var(--c-white);
33
34
  --c-background-secondaryInteractive--hover: var(--c-navy-50);
34
35
  --c-background-accentInteractive: var(--c-purple-500);
35
36
  --c-background-accentInteractive--hover: var(--c-purple-700);
36
- --c-background-accentAltInteractive: var(--c-purple-100);
37
+ --c-background-accentAltInteractive: var(--c-purple-200);
37
38
  --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
38
39
  --c-background-connectInteractive: var(--c-newPurple-500);
39
40
  --c-background-connectInteractive--hover: var(--c-turquoise-700);
40
41
  --c-background-errorInteractive: var(--c-red-500);
41
42
  --c-background-errorInteractive--hover: var(--c-red-700);
42
43
  --c-text-base: var(--c-navy-700);
43
- --c-text-subdued: var(--c-navy-300);
44
+ --c-text-subdued: var(--c-navy-400);
44
45
  --c-text-accent: var(--c-purple-500);
45
- --c-text-accentAlt: var(--c-purple-500);
46
+ --c-text-accentAlt: var(--c-purple-700);
46
47
  --c-text-info: var(--c-yellow-900);
47
- --c-text-infoAlt: var(--c-yellow-700);
48
48
  --c-text-error: var(--c-red-500);
49
49
  --c-text-errorAlt: var(--c-red-500);
50
50
  --c-text-success: var(--c-green-700);
51
51
  --c-text-successAlt: var(--c-green-1000);
52
- --c-text-warning: var(--c-orange-500);
53
52
  --c-text-connect: var(--c-newPurple-500);
54
53
  --c-text-connectAlt: var(--c-turquoise-900);
55
- --c-text-keyExchange: var(--c-newViolet-500);
56
- --c-text-picked: var(--c-green-700);
57
- --c-text-rideshare: var(--c-black-1000);
58
54
  --c-text-driver: var(--c-navy-700);
59
55
  --c-text-owner: var(--c-white);
60
- --c-text-disabled: var(--c-navy-200);
61
- --c-text-inversed: var(--c-white);
56
+ --c-text-warning: var(--c-orange-500);
57
+ --c-text-infoAlt: var(--c-yellow-700);
58
+ --c-text-disabled: var(--c-navy-120);
62
59
  --c-text-onAccent: var(--c-white);
63
60
  --c-text-onRideshare: var(--c-white);
64
61
  --c-text-onError: var(--c-white);
@@ -66,36 +63,41 @@
66
63
  --c-text-onConnect: var(--c-white);
67
64
  --c-text-onKeyExchange: var(--c-white);
68
65
  --c-text-onPicked: var(--c-white);
66
+ --c-text-keyExchange: var(--c-newViolet-500);
67
+ --c-text-picked: var(--c-green-700);
68
+ --c-text-rideshare: var(--c-black-1000);
69
69
  --c-text-onBase: var(--c-white);
70
+ --c-text-onSeasonLow: var(--c-black-800);
71
+ --c-text-onSeasonMedium: var(--c-black-800);
72
+ --c-text-onSeasonHigh: var(--c-white);
73
+ --c-text-onSeasonVeryHigh: var(--c-white);
74
+ --c-text-onRental: var(--c-white);
75
+ --c-text-onRentalAlt: var(--c-black-300);
76
+ --c-text-inversed: var(--c-white);
70
77
  --c-text-baseInteractive: var(--c-navy-700);
71
78
  --c-text-baseInteractive--hover: var(--c-navy-900);
72
- --c-text-subduedInteractive: var(--c-navy-300);
79
+ --c-text-subduedInteractive: var(--c-navy-400);
73
80
  --c-text-subduedInteractive--hover: var(--c-navy-500);
74
81
  --c-text-accentInteractive: var(--c-purple-500);
75
82
  --c-text-accentInteractive--hover: var(--c-purple-700);
76
- --c-text-accentAltInteractive: var(--c-purple-500);
83
+ --c-text-accentAltInteractive: var(--c-purple-700);
77
84
  --c-text-accentAltInteractive--hover: var(--c-purple-700);
78
- --c-icon-base: var(--c-navy-500);
79
- --c-icon-subdued: var(--c-navy-300);
85
+ --c-icon-base: var(--c-navy-700);
86
+ --c-icon-subdued: var(--c-navy-400);
80
87
  --c-icon-accent: var(--c-purple-500);
81
- --c-icon-accentAlt: var(--c-purple-500);
88
+ --c-icon-accentAlt: var(--c-purple-700);
82
89
  --c-icon-info: var(--c-yellow-900);
83
- --c-icon-infoAlt: var(--c-yellow-500);
84
90
  --c-icon-error: var(--c-red-500);
85
91
  --c-icon-errorAlt: var(--c-red-500);
86
92
  --c-icon-success: var(--c-green-700);
87
93
  --c-icon-successAlt: var(--c-green-1000);
88
- --c-icon-warning: var(--c-orange-500);
89
94
  --c-icon-connect: var(--c-newPurple-500);
90
95
  --c-icon-connectAlt: var(--c-turquoise-900);
91
- --c-icon-keyExchange: var(--c-newViolet-500);
92
- --c-icon-picked: var(--c-green-700);
93
- --c-icon-rideshare: var(--c-black-1000);
94
96
  --c-icon-driver: var(--c-navy-700);
95
97
  --c-icon-owner: var(--c-white);
98
+ --c-icon-warning: var(--c-orange-500);
99
+ --c-icon-infoAlt: var(--c-yellow-500);
96
100
  --c-icon-disabled: var(--c-navy-200);
97
- --c-icon-disabledAlt: var(--c-navy-300);
98
- --c-icon-inversed: var(--c-white);
99
101
  --c-icon-onAccent: var(--c-white);
100
102
  --c-icon-onRideshare: var(--c-white);
101
103
  --c-icon-onError: var(--c-white);
@@ -103,37 +105,43 @@
103
105
  --c-icon-onConnect: var(--c-white);
104
106
  --c-icon-onKeyExchange: var(--c-white);
105
107
  --c-icon-onPicked: var(--c-white);
108
+ --c-icon-keyExchange: var(--c-newViolet-500);
109
+ --c-icon-picked: var(--c-green-700);
110
+ --c-icon-rideshare: var(--c-black-1000);
106
111
  --c-icon-onBase: var(--c-white);
107
- --c-icon-baseInteractive: var(--c-navy-500);
112
+ --c-icon-disabledAlt: var(--c-navy-120);
113
+ --c-icon-onRental: var(--c-white);
114
+ --c-icon-inversed: var(--c-white);
115
+ --c-icon-baseInteractive: var(--c-navy-700);
108
116
  --c-icon-baseInteractive--hover: var(--c-navy-700);
109
- --c-icon-subduedInteractive: var(--c-navy-300);
117
+ --c-icon-subduedInteractive: var(--c-navy-400);
110
118
  --c-icon-subduedInteractive--hover: var(--c-navy-500);
111
119
  --c-icon-accentInteractive: var(--c-purple-500);
112
120
  --c-icon-accentInteractive--hover: var(--c-purple-700);
113
- --c-icon-accentAltInteractive: var(--c-purple-500);
121
+ --c-icon-accentAltInteractive: var(--c-purple-700);
114
122
  --c-icon-accentAltInteractive--hover: var(--c-purple-700);
115
123
  --c-stroke-base: var(--c-navy-100);
116
124
  --c-stroke-subdued: var(--c-navy-50);
117
- --c-stroke-strong: var(--c-navy-300);
118
125
  --c-stroke-accent: var(--c-purple-500);
119
- --c-stroke-accentAlt: var(--c-purple-300);
120
- --c-stroke-error: var(--c-red-500);
121
- --c-stroke-errorAlt: var(--c-red-500);
126
+ --c-stroke-accentAlt: var(--c-purple-600);
122
127
  --c-stroke-success: var(--c-green-500);
123
128
  --c-stroke-successAlt: var(--c-green-500);
124
- --c-stroke-connect: var(--c-newPurple-500);
125
- --c-stroke-keyExchange: var(--c-newViolet-500);
126
- --c-stroke-picked: var(--c-green-700);
127
- --c-stroke-rideshare: var(--c-black-1000);
128
- --c-stroke-rental: var(--c-turquoise-500);
129
- --c-stroke-blocker: var(--c-navy-300);
129
+ --c-stroke-error: var(--c-red-500);
130
+ --c-stroke-errorAlt: var(--c-red-500);
131
+ --c-stroke-strong: var(--c-grey-300);
130
132
  --c-stroke-onAccent: var(--c-white);
133
+ --c-stroke-rental: var(--c-blue-700);
134
+ --c-stroke-blocker: var(--c-grey-200);
131
135
  --c-stroke-onError: var(--c-white);
132
136
  --c-stroke-onSuccess: var(--c-white);
137
+ --c-stroke-connect: var(--c-newPurple-500);
138
+ --c-stroke-keyExchange: var(--c-newViolet-500);
139
+ --c-stroke-picked: var(--c-green-700);
133
140
  --c-stroke-onConnect: var(--c-white);
134
- --c-stroke-onPicked: var(--c-white);
135
141
  --c-stroke-onKeyExchange: var(--c-white);
142
+ --c-stroke-onPicked: var(--c-white);
136
143
  --c-stroke-onRideshare: var(--c-white);
144
+ --c-stroke-rideshare: var(--c-black-1000);
137
145
  --c-stroke-onBase: var(--c-white);
138
146
  --c-stroke-baseInteractive: var(--c-navy-100);
139
147
  --c-stroke-baseInteractive--hover: var(--c-navy-300);
@@ -192,6 +200,19 @@
192
200
  --c-buttonLabel-successAltInteractive: var(--c-green-900);
193
201
  --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
194
202
  --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
203
+ --c-fill-base: var(--c-navy-500);
204
+ --c-fill-accent: var(--c-purple-500);
205
+ --c-fill-secondary: var(--c-yellow-500);
206
+ --c-fill-subdued: var(--c-navy-100);
207
+ --c-fill-neutral: var(--c-navy-50);
208
+ --c-fill-negative: var(--c-red-150);
209
+ --c-fill-accentAlt: var(--c-purple-100);
210
+ --c-fill-disabled: var(--c-navy-300);
211
+ --c-fill-error: var(--c-red-500);
212
+ --c-fill-success: var(--c-green-500);
213
+ --c-fill-rental: var(--c-blue-300);
214
+ --c-fill-blocker: var(--c-grey-100);
215
+ --c-fill-primary: var(--c-white);
195
216
  --c-buttonBackground-selected: var(--c-purple-100);
196
217
  --c-buttonBackground-primary: var(--c-purple-500);
197
218
  --c-buttonBackground-secondary: var(--c-white);
@@ -214,21 +235,8 @@
214
235
  --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
215
236
  --c-buttonBackground-destructiveInteractive--press: var(--c-red-150);
216
237
  --c-buttonBackground-successAltInteractive: var(--c-green-100);
217
- --c-buttonBackground-successAltInteractive--hover: var(--c-green-120);
218
- --c-buttonBackground-successAltInteractive--press: var(--c-green-150);
219
- --c-fill-base: var(--c-navy-500);
220
- --c-fill-subdued: var(--c-navy-100);
221
- --c-fill-secondary: var(--c-yellow-500);
222
- --c-fill-accent: var(--c-purple-500);
223
- --c-fill-accentAlt: var(--c-purple-100);
224
- --c-fill-error: var(--c-red-500);
225
- --c-fill-success: var(--c-green-500);
226
- --c-fill-neutral: var(--c-navy-50);
227
- --c-fill-negative: var(--c-red-150);
228
- --c-fill-disabled: var(--c-navy-300);
229
- --c-fill-rental: var(--c-turquoise-100);
230
- --c-fill-blocker: var(--c-navy-120);
231
- --c-fill-primary: var(--c-white);
238
+ --c-buttonBackground-successAltInteractive--hover: var(--c-green-300);
239
+ --c-buttonBackground-successAltInteractive--press: var(--c-green-400);
232
240
  --c-illustrations-primary: var(--c-navy-500);
233
241
  --c-illustrations-secondary: var(--c-white);
234
242
  --c-illustrations-accent1: var(--c-purple-500);
package/styles/core/palette.scss CHANGED
@@ -3,50 +3,70 @@
3
3
  /*** DO NOT MODIFY IT DIRECTLY ****/
4
4
  /**********************************/
5
5
  :root {
6
- --c-white: #fff;
7
- --c-purple-100: #f6e5f5;
8
- --c-purple-300: #ca6bc3;
9
- --c-purple-400: #c04fb8;
6
+ --c-white: #ffffff;
7
+ --c-purple-100: #f8f2f8;
8
+ --c-purple-200: #f0e1ee;
9
+ --c-purple-300: #db97d5;
10
+ --c-purple-400: #c758bd;
10
11
  --c-purple-500: #b01aa7;
11
- --c-purple-700: #8d1586;
12
- --c-purple-900: #5f1159;
12
+ --c-purple-600: #a6199d;
13
+ --c-purple-700: #901588;
14
+ --c-purple-800: #75116f;
15
+ --c-purple-900: #530c4f;
16
+ --c-purple-1000: #3e093b;
17
+ --c-purple-1100: #280626;
18
+ --c-purple-1200: #160315;
13
19
  --c-purpleDeep-100: #f2a6ee;
14
20
  --c-purpleDeep-300: #ea71e3;
15
21
  --c-purpleDeep-400: #c31dba;
16
22
  --c-purpleDeep-500: #9b1794;
17
23
  --c-purpleDeep-700: #73116e;
18
24
  --c-purpleDeep-900: #4b0b48;
25
+ --c-purpleDeep-1000: #3e093c;
19
26
  --c-purpleLight-100: #ffdcfd;
20
27
  --c-navy-50: #f1f1f4;
21
28
  --c-navy-100: #e3e2e8;
22
29
  --c-navy-120: #cac7d2;
23
30
  --c-navy-200: #bbb8c7;
24
31
  --c-navy-300: #7b728e;
32
+ --c-navy-400: #554b70;
25
33
  --c-navy-500: #362e53;
26
34
  --c-navy-700: #261a48;
27
35
  --c-navy-900: #0f0429;
28
36
  --c-yellow-100: #ffeed1;
29
37
  --c-yellow-300: #ffdda3;
38
+ --c-yellow-400: #ffd387;
30
39
  --c-yellow-500: #ffc766;
31
40
  --c-yellow-700: #c59548;
32
41
  --c-yellow-900: #75592d;
33
42
  --c-yellow-1000: #3b2e17;
34
- --c-green-100: #cdebcb;
35
- --c-green-120: #bfe5bd;
36
- --c-green-150: #b1e0ae;
43
+ --c-green-100: #f4f9f3;
44
+ --c-green-200: #e5f2e4;
45
+ --c-green-300: #c8e5c6;
46
+ --c-green-400: #93d790;
37
47
  --c-green-500: #5cbf54;
38
48
  --c-green-700: #479d3e;
39
49
  --c-green-900: #2f6d1c;
40
50
  --c-green-1000: #1b500a;
51
+ --c-green-1100: #143b05;
52
+ --c-green-1200: #102e03;
41
53
  --c-red-100: #fdeded;
42
- --c-red-120: #fbdada;
43
- --c-red-150: #f9c8c8;
44
- --c-red-200: #e38c8c;
45
- --c-red-400: #ed4545;
54
+ --c-red-120: #f7e9e9;
55
+ --c-red-150: #eed0d0;
56
+ --c-red-200: #e5b5b5;
57
+ --c-red-300: #db9494;
58
+ --c-red-400: #d16969;
46
59
  --c-red-500: #c71414;
47
- --c-red-700: #af1212;
48
- --c-red-800: #764747;
49
- --c-red-900: #3f2424;
60
+ --c-red-600: #b61212;
61
+ --c-red-700: #a21010;
62
+ --c-red-800: #8d0e0e;
63
+ --c-red-900: #730c0c;
64
+ --c-red-1000: #510808;
65
+ --c-red-1200: #4a0707;
66
+ --c-red-1300: #420707;
67
+ --c-red-1400: #390606;
68
+ --c-red-1500: #2f0505;
69
+ --c-red-1600: #210303;
50
70
  --c-orange-100: #f1d5b1;
51
71
  --c-orange-300: #eec186;
52
72
  --c-orange-500: #e39735;
@@ -54,14 +74,34 @@
54
74
  --c-black-50: #544f53;
55
75
  --c-black-75: #443f44;
56
76
  --c-black-100: #363036;
77
+ --c-black-200: #2e292e;
57
78
  --c-black-300: #282127;
79
+ --c-black-400: #251d24;
58
80
  --c-black-500: #191218;
59
- --c-black-1000: #000;
81
+ --c-black-600: #0f0a0e;
82
+ --c-black-700: #090609;
83
+ --c-black-800: #030203;
84
+ --c-black-1000: #000000;
60
85
  --c-grey-50: #f8f9fa;
61
86
  --c-grey-100: #e3e2e3;
87
+ --c-grey-200: #c3c1c3;
62
88
  --c-grey-300: #a9a6a9;
89
+ --c-grey-400: #9d9a9d;
63
90
  --c-grey-500: #918d91;
64
- --c-blue-500: #79a3f3;
91
+ --c-grey-600: #7d787d;
92
+ --c-grey-700: #6a676a;
93
+ --c-blue-100: #f5f8ff;
94
+ --c-blue-200: #e5edff;
95
+ --c-blue-300: #b7d3ff;
96
+ --c-blue-400: #74b0ff;
97
+ --c-blue-500: #1f81f3;
98
+ --c-blue-600: #185bd1;
99
+ --c-blue-700: #1b3b8b;
100
+ --c-blue-800: #19255c;
101
+ --c-blue-900: #151c38;
102
+ --c-blue-1000: #101423;
103
+ --c-blue-1100: #0d1016;
104
+ --c-blue-1200: #0a0b0f;
65
105
  --c-turquoise-50: #ecf9fb;
66
106
  --c-turquoise-100: #cfeff5;
67
107
  --c-turquoise-200: #afe5ee;
@@ -73,14 +113,18 @@
73
113
  --c-turquoise-800: #42b8cf;
74
114
  --c-turquoise-900: #31acc7;
75
115
  --c-turquoise-1200: #11505e;
76
- --c-season-100: #bdffac;
77
- --c-season-200: #94ea84;
78
- --c-season-300: #73c865;
79
- --c-season-400: #54a949;
80
- --c-season-700: #0b7011;
81
- --c-season-800: #005100;
82
- --c-season-900: #030;
83
- --c-season-1000: #001900;
116
+ --c-season-100: #a9d4a8;
117
+ --c-season-200: #9fd09e;
118
+ --c-season-300: #7cc27b;
119
+ --c-season-400: #56b654;
120
+ --c-season-500: #24aa1f;
121
+ --c-season-600: #229f1c;
122
+ --c-season-700: #1f931a;
123
+ --c-season-800: #1d8618;
124
+ --c-season-900: #1a7816;
125
+ --c-season-1000: #166612;
126
+ --c-season-1100: #11510f;
127
+ --c-season-1200: #0a3109;
84
128
  --c-newPurple-200: #e46fee;
85
129
  --c-newPurple-500: #bc00cc;
86
130
  --c-newViolet-200: #b86fff;