@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/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);
@@ -237,36 +245,37 @@
237
245
 
238
246
  .use-cobalt-dark-theme {
239
247
  --c-background-primary: var(--c-black-500);
240
- --c-background-secondary: var(--c-black-300);
241
- --c-background-accent: var(--c-purpleDeep-500);
242
- --c-background-accentAlt: var(--c-purpleDeep-900);
248
+ --c-background-secondary: var(--c-black-400);
249
+ --c-background-accent: var(--c-purple-400);
250
+ --c-background-accentAlt: var(--c-purple-900);
243
251
  --c-background-info: var(--c-yellow-1000);
244
252
  --c-background-error: var(--c-red-500);
245
- --c-background-errorAlt: var(--c-red-900);
253
+ --c-background-errorAlt: var(--c-red-1500);
246
254
  --c-background-success: var(--c-green-700);
247
- --c-background-successAlt: var(--c-green-1000);
255
+ --c-background-successAlt: var(--c-green-1200);
248
256
  --c-background-connect: var(--c-newPurple-200);
249
257
  --c-background-connectAlt: var(--c-turquoise-900);
250
- --c-background-keyExchange: var(--c-newViolet-200);
251
- --c-background-picked: var(--c-green-500);
252
- --c-background-rideshare: var(--c-black-1000);
253
258
  --c-background-driver: var(--c-yellow-500);
254
259
  --c-background-owner: var(--c-navy-700);
255
- --c-background-disabled: var(--c-black-100);
260
+ --c-background-disabled: var(--c-black-500);
256
261
  --c-background-neutral: var(--c-black-50);
257
262
  --c-background-neutralAlt: var(--c-black-100);
258
- --c-background-seasonLow: var(--c-season-700);
259
- --c-background-seasonMedium: var(--c-season-800);
263
+ --c-background-seasonLow: var(--c-season-300);
264
+ --c-background-seasonMedium: var(--c-season-600);
260
265
  --c-background-seasonHigh: var(--c-season-900);
261
- --c-background-seasonVeryhigh: var(--c-season-1000);
262
- --c-background-rental: var(--c-turquoise-1200);
263
- --c-background-blocker: var(--c-black-75);
266
+ --c-background-seasonVeryHigh: var(--c-season-1200);
267
+ --c-background-rental: var(--c-blue-700);
268
+ --c-background-rentalAlt: var(--c-blue-500);
269
+ --c-background-blocker: var(--c-black-200);
270
+ --c-background-rideshare: var(--c-black-1000);
271
+ --c-background-keyExchange: var(--c-newViolet-200);
272
+ --c-background-picked: var(--c-green-500);
264
273
  --c-background-base: var(--c-navy-50);
265
- --c-background-secondaryInteractive: var(--c-black-300);
274
+ --c-background-secondaryInteractive: var(--c-black-400);
266
275
  --c-background-secondaryInteractive--hover: var(--c-black-300);
267
- --c-background-accentInteractive: var(--c-purpleDeep-500);
276
+ --c-background-accentInteractive: var(--c-purple-400);
268
277
  --c-background-accentInteractive--hover: var(--c-purpleDeep-400);
269
- --c-background-accentAltInteractive: var(--c-purpleDeep-900);
278
+ --c-background-accentAltInteractive: var(--c-purple-900);
270
279
  --c-background-accentAltInteractive--hover: var(--c-purpleDeep-900);
271
280
  --c-background-connectInteractive: var(--c-newPurple-200);
272
281
  --c-background-connectInteractive--hover: var(--c-turquoise-700);
@@ -274,122 +283,129 @@
274
283
  --c-background-errorInteractive--hover: var(--c-red-500);
275
284
  --c-text-base: var(--c-grey-100);
276
285
  --c-text-subdued: var(--c-grey-300);
277
- --c-text-accent: var(--c-purpleDeep-400);
278
- --c-text-accentAlt: var(--c-grey-100);
279
- --c-text-info: var(--c-yellow-300);
280
- --c-text-infoAlt: var(--c-yellow-700);
286
+ --c-text-accent: var(--c-purple-300);
287
+ --c-text-accentAlt: var(--c-purple-200);
288
+ --c-text-info: var(--c-yellow-400);
281
289
  --c-text-error: var(--c-red-400);
282
- --c-text-errorAlt: var(--c-red-500);
283
- --c-text-success: var(--c-green-700);
284
- --c-text-successAlt: var(--c-green-100);
285
- --c-text-warning: var(--c-orange-300);
290
+ --c-text-errorAlt: var(--c-red-200);
291
+ --c-text-success: var(--c-green-400);
292
+ --c-text-successAlt: var(--c-green-400);
286
293
  --c-text-connect: var(--c-newPurple-200);
287
294
  --c-text-connectAlt: var(--c-white);
288
- --c-text-keyExchange: var(--c-newViolet-200);
289
- --c-text-picked: var(--c-green-500);
290
- --c-text-rideshare: var(--c-white);
291
295
  --c-text-driver: var(--c-navy-700);
292
296
  --c-text-owner: var(--c-grey-100);
297
+ --c-text-warning: var(--c-orange-300);
298
+ --c-text-infoAlt: var(--c-yellow-700);
293
299
  --c-text-disabled: var(--c-black-50);
294
- --c-text-inversed: var(--c-white);
295
- --c-text-onAccent: var(--c-grey-100);
300
+ --c-text-onAccent: var(--c-black-1000);
296
301
  --c-text-onRideshare: var(--c-white);
297
302
  --c-text-onError: var(--c-white);
298
303
  --c-text-onSuccess: var(--c-white);
299
- --c-text-onConnect: var(--c-navy-900);
300
- --c-text-onKeyExchange: var(--c-navy-900);
301
- --c-text-onPicked: var(--c-navy-900);
304
+ --c-text-onConnect: var(--c-black-1000);
305
+ --c-text-onKeyExchange: var(--c-black-1000);
306
+ --c-text-onPicked: var(--c-black-1000);
307
+ --c-text-keyExchange: var(--c-newViolet-200);
308
+ --c-text-picked: var(--c-green-500);
309
+ --c-text-rideshare: var(--c-white);
302
310
  --c-text-onBase: var(--c-navy-900);
311
+ --c-text-onSeasonLow: var(--c-black-800);
312
+ --c-text-onSeasonMedium: var(--c-white);
313
+ --c-text-onSeasonHigh: var(--c-white);
314
+ --c-text-onSeasonVeryHigh: var(--c-white);
315
+ --c-text-onRental: var(--c-white);
316
+ --c-text-onRentalAlt: var(--c-black-1000);
317
+ --c-text-inversed: var(--c-white);
303
318
  --c-text-baseInteractive: var(--c-grey-100);
304
319
  --c-text-baseInteractive--hover: var(--c-grey-300);
305
320
  --c-text-subduedInteractive: var(--c-grey-300);
306
321
  --c-text-subduedInteractive--hover: var(--c-grey-300);
307
- --c-text-accentInteractive: var(--c-purpleDeep-400);
322
+ --c-text-accentInteractive: var(--c-purple-300);
308
323
  --c-text-accentInteractive--hover: var(--c-purpleDeep-400);
309
- --c-text-accentAltInteractive: var(--c-grey-100);
324
+ --c-text-accentAltInteractive: var(--c-purple-200);
310
325
  --c-text-accentAltInteractive--hover: var(--c-grey-100);
311
326
  --c-icon-base: var(--c-grey-100);
312
327
  --c-icon-subdued: var(--c-grey-300);
313
- --c-icon-accent: var(--c-purpleDeep-400);
314
- --c-icon-accentAlt: var(--c-grey-100);
315
- --c-icon-info: var(--c-yellow-300);
316
- --c-icon-infoAlt: var(--c-yellow-700);
328
+ --c-icon-accent: var(--c-purple-300);
329
+ --c-icon-accentAlt: var(--c-purple-200);
330
+ --c-icon-info: var(--c-yellow-400);
317
331
  --c-icon-error: var(--c-red-400);
318
332
  --c-icon-errorAlt: var(--c-red-200);
319
- --c-icon-success: var(--c-green-700);
320
- --c-icon-successAlt: var(--c-green-100);
321
- --c-icon-warning: var(--c-orange-300);
333
+ --c-icon-success: var(--c-green-400);
334
+ --c-icon-successAlt: var(--c-green-400);
322
335
  --c-icon-connect: var(--c-newPurple-200);
323
336
  --c-icon-connectAlt: var(--c-turquoise-50);
324
- --c-icon-keyExchange: var(--c-newViolet-200);
325
- --c-icon-picked: var(--c-green-500);
326
- --c-icon-rideshare: var(--c-white);
327
337
  --c-icon-driver: var(--c-navy-700);
328
- --c-icon-owner: var(--c-white);
329
- --c-icon-disabled: var(--c-black-50);
330
- --c-icon-disabledAlt: var(--c-grey-500);
331
- --c-icon-inversed: var(--c-white);
332
- --c-icon-onAccent: var(--c-white);
338
+ --c-icon-owner: var(--c-grey-100);
339
+ --c-icon-warning: var(--c-orange-300);
340
+ --c-icon-infoAlt: var(--c-yellow-700);
341
+ --c-icon-disabled: var(--c-black-75);
342
+ --c-icon-onAccent: var(--c-black-1000);
333
343
  --c-icon-onRideshare: var(--c-white);
334
344
  --c-icon-onError: var(--c-white);
335
345
  --c-icon-onSuccess: var(--c-white);
336
- --c-icon-onConnect: var(--c-navy-900);
337
- --c-icon-onKeyExchange: var(--c-navy-900);
338
- --c-icon-onPicked: var(--c-navy-900);
346
+ --c-icon-onConnect: var(--c-black-1000);
347
+ --c-icon-onKeyExchange: var(--c-black-1000);
348
+ --c-icon-onPicked: var(--c-black-1000);
349
+ --c-icon-keyExchange: var(--c-newViolet-200);
350
+ --c-icon-picked: var(--c-green-500);
351
+ --c-icon-rideshare: var(--c-white);
339
352
  --c-icon-onBase: var(--c-navy-900);
353
+ --c-icon-disabledAlt: var(--c-black-50);
354
+ --c-icon-onRental: var(--c-white);
355
+ --c-icon-inversed: var(--c-white);
340
356
  --c-icon-baseInteractive: var(--c-grey-100);
341
357
  --c-icon-baseInteractive--hover: var(--c-grey-100);
342
358
  --c-icon-subduedInteractive: var(--c-grey-300);
343
359
  --c-icon-subduedInteractive--hover: var(--c-grey-300);
344
- --c-icon-accentInteractive: var(--c-purpleDeep-400);
360
+ --c-icon-accentInteractive: var(--c-purple-300);
345
361
  --c-icon-accentInteractive--hover: var(--c-purpleDeep-400);
346
- --c-icon-accentAltInteractive: var(--c-grey-100);
362
+ --c-icon-accentAltInteractive: var(--c-purple-200);
347
363
  --c-icon-accentAltInteractive--hover: var(--c-grey-100);
348
- --c-stroke-base: var(--c-black-50);
364
+ --c-stroke-base: var(--c-black-100);
349
365
  --c-stroke-subdued: var(--c-black-100);
350
- --c-stroke-strong: var(--c-navy-200);
351
- --c-stroke-accent: var(--c-purpleDeep-500);
352
- --c-stroke-accentAlt: var(--c-purpleDeep-400);
353
- --c-stroke-error: var(--c-red-200);
354
- --c-stroke-errorAlt: var(--c-red-200);
366
+ --c-stroke-accent: var(--c-purple-400);
367
+ --c-stroke-accentAlt: var(--c-purple-400);
355
368
  --c-stroke-success: var(--c-green-700);
356
369
  --c-stroke-successAlt: var(--c-green-700);
357
- --c-stroke-connect: var(--c-newPurple-200);
358
- --c-stroke-keyExchange: var(--c-newViolet-200);
359
- --c-stroke-picked: var(--c-green-500);
360
- --c-stroke-rideshare: var(--c-white);
361
- --c-stroke-rental: var(--c-turquoise-500);
362
- --c-stroke-blocker: var(--c-grey-300);
370
+ --c-stroke-error: var(--c-red-200);
371
+ --c-stroke-errorAlt: var(--c-red-200);
372
+ --c-stroke-strong: var(--c-grey-700);
363
373
  --c-stroke-onAccent: var(--c-grey-100);
374
+ --c-stroke-rental: var(--c-blue-500);
375
+ --c-stroke-blocker: var(--c-black-50);
364
376
  --c-stroke-onError: var(--c-white);
365
377
  --c-stroke-onSuccess: var(--c-white);
366
- --c-stroke-onConnect: var(--c-black-1000);
367
- --c-stroke-onPicked: var(--c-black-1000);
368
- --c-stroke-onKeyExchange: var(--c-black-1000);
378
+ --c-stroke-connect: var(--c-newPurple-200);
379
+ --c-stroke-keyExchange: var(--c-newViolet-200);
380
+ --c-stroke-picked: var(--c-green-500);
381
+ --c-stroke-onConnect: var(--c-black-75);
382
+ --c-stroke-onKeyExchange: var(--c-black-75);
383
+ --c-stroke-onPicked: var(--c-black-75);
369
384
  --c-stroke-onRideshare: var(--c-black-1000);
370
- --c-stroke-onBase: var(--c-black-1000);
371
- --c-stroke-baseInteractive: var(--c-black-50);
385
+ --c-stroke-rideshare: var(--c-white);
386
+ --c-stroke-onBase: var(--c-black-600);
387
+ --c-stroke-baseInteractive: var(--c-black-100);
372
388
  --c-stroke-baseInteractive--hover: var(--c-purpleDeep-400);
373
389
  --c-stroke-baseInteractive--press: var(--c-purpleDeep-400);
374
- --c-stroke-accentInteractive: var(--c-purpleDeep-500);
390
+ --c-stroke-accentInteractive: var(--c-purple-400);
375
391
  --c-stroke-accentInteractive--hover: var(--c-purpleDeep-400);
376
392
  --c-stroke-accentInteractive--press: var(--c-purpleDeep-400);
377
393
  --c-stroke-strongInteractive: var(--c-navy-200);
378
394
  --c-stroke-strongInteractive--hover: var(--c-purpleDeep-400);
379
395
  --c-stroke-strongInteractive--press: var(--c-purpleDeep-400);
380
396
  --c-buttonIcon-selected: var(--c-grey-100);
381
- --c-buttonIcon-primary: var(--c-grey-100);
382
- --c-buttonIcon-secondary: var(--c-purpleDeep-400);
397
+ --c-buttonIcon-primary: var(--c-black-1000);
398
+ --c-buttonIcon-secondary: var(--c-purple-300);
383
399
  --c-buttonIcon-tertiary: var(--c-white);
384
400
  --c-buttonIcon-destructive: var(--c-red-200);
385
401
  --c-buttonIcon-success: var(--c-green-100);
386
402
  --c-buttonIcon-successAlt: var(--c-green-100);
387
403
  --c-buttonIcon-disabled: var(--c-grey-300);
388
404
  --c-buttonIcon-accentAlt: var(--c-grey-100);
389
- --c-buttonIcon-primaryInteractive: var(--c-grey-100);
405
+ --c-buttonIcon-primaryInteractive: var(--c-black-1000);
390
406
  --c-buttonIcon-primaryInteractive--hover: var(--c-white);
391
407
  --c-buttonIcon-primaryInteractive--press: var(--c-white);
392
- --c-buttonIcon-secondaryInteractive: var(--c-purpleDeep-400);
408
+ --c-buttonIcon-secondaryInteractive: var(--c-purple-300);
393
409
  --c-buttonIcon-secondaryInteractive--hover: var(--c-purpleDeep-700);
394
410
  --c-buttonIcon-secondaryInteractive--press: var(--c-purpleDeep-900);
395
411
  --c-buttonIcon-tertiaryInteractive: var(--c-white);
@@ -402,18 +418,18 @@
402
418
  --c-buttonIcon-successAltInteractive--hover: var(--c-green-100);
403
419
  --c-buttonIcon-successAltInteractive--press: var(--c-green-100);
404
420
  --c-buttonLabel-selected: var(--c-grey-100);
405
- --c-buttonLabel-primary: var(--c-grey-100);
406
- --c-buttonLabel-secondary: var(--c-purpleDeep-400);
421
+ --c-buttonLabel-primary: var(--c-black-1000);
422
+ --c-buttonLabel-secondary: var(--c-purple-300);
407
423
  --c-buttonLabel-tertiary: var(--c-white);
408
424
  --c-buttonLabel-disabled: var(--c-grey-300);
409
425
  --c-buttonLabel-accentAlt: var(--c-grey-100);
410
426
  --c-buttonLabel-destructive: var(--c-red-200);
411
427
  --c-buttonLabel-success: var(--c-green-100);
412
428
  --c-buttonLabel-successAlt: var(--c-green-100);
413
- --c-buttonLabel-primaryInteractive: var(--c-grey-100);
429
+ --c-buttonLabel-primaryInteractive: var(--c-black-1000);
414
430
  --c-buttonLabel-primaryInteractive--hover: var(--c-white);
415
431
  --c-buttonLabel-primaryInteractive--press: var(--c-white);
416
- --c-buttonLabel-secondaryInteractive: var(--c-purpleDeep-400);
432
+ --c-buttonLabel-secondaryInteractive: var(--c-purple-300);
417
433
  --c-buttonLabel-secondaryInteractive--hover: var(--c-purpleDeep-700);
418
434
  --c-buttonLabel-secondaryInteractive--press: var(--c-purpleDeep-900);
419
435
  --c-buttonLabel-tertiaryInteractive: var(--c-white);
@@ -425,19 +441,32 @@
425
441
  --c-buttonLabel-successAltInteractive: var(--c-green-100);
426
442
  --c-buttonLabel-successAltInteractive--hover: var(--c-green-100);
427
443
  --c-buttonLabel-successAltInteractive--press: var(--c-green-100);
444
+ --c-fill-base: var(--c-navy-50);
445
+ --c-fill-accent: var(--c-purpleDeep-400);
446
+ --c-fill-secondary: var(--c-yellow-400);
447
+ --c-fill-subdued: var(--c-black-50);
448
+ --c-fill-neutral: var(--c-black-100);
449
+ --c-fill-negative: var(--c-red-800);
450
+ --c-fill-accentAlt: var(--c-purpleDeep-900);
451
+ --c-fill-disabled: var(--c-grey-300);
452
+ --c-fill-error: var(--c-red-500);
453
+ --c-fill-success: var(--c-green-700);
454
+ --c-fill-rental: var(--c-blue-700);
455
+ --c-fill-blocker: var(--c-black-200);
456
+ --c-fill-primary: var(--c-black-1000);
428
457
  --c-buttonBackground-selected: var(--c-purpleDeep-900);
429
- --c-buttonBackground-primary: var(--c-purpleDeep-500);
430
- --c-buttonBackground-secondary: var(--c-black-500);
458
+ --c-buttonBackground-primary: var(--c-purple-400);
459
+ --c-buttonBackground-secondary: var(--c-black-100);
431
460
  --c-buttonBackground-tertiary: var(--c-white);
432
461
  --c-buttonBackground-accentAlt: var(--c-purpleDeep-900);
433
462
  --c-buttonBackground-destructive: var(--c-red-900);
434
463
  --c-buttonBackground-success: var(--c-green-900);
435
464
  --c-buttonBackground-successAlt: var(--c-green-1000);
436
465
  --c-buttonBackground-disabled: var(--c-black-50);
437
- --c-buttonBackground-primaryInteractive: var(--c-purpleDeep-500);
466
+ --c-buttonBackground-primaryInteractive: var(--c-purple-400);
438
467
  --c-buttonBackground-primaryInteractive--hover: var(--c-purpleDeep-700);
439
468
  --c-buttonBackground-primaryInteractive--press: var(--c-purpleDeep-900);
440
- --c-buttonBackground-secondaryInteractive: var(--c-black-500);
469
+ --c-buttonBackground-secondaryInteractive: var(--c-black-100);
441
470
  --c-buttonBackground-secondaryInteractive--hover: var(--c-black-500);
442
471
  --c-buttonBackground-secondaryInteractive--press: var(--c-black-500);
443
472
  --c-buttonBackground-tertiaryInteractive: var(--c-white);
@@ -449,19 +478,6 @@
449
478
  --c-buttonBackground-successAltInteractive: var(--c-green-1000);
450
479
  --c-buttonBackground-successAltInteractive--hover: var(--c-green-900);
451
480
  --c-buttonBackground-successAltInteractive--press: var(--c-green-1000);
452
- --c-fill-base: var(--c-grey-50);
453
- --c-fill-subdued: var(--c-black-50);
454
- --c-fill-secondary: var(--c-yellow-500);
455
- --c-fill-accent: var(--c-purpleDeep-400);
456
- --c-fill-accentAlt: var(--c-purpleDeep-900);
457
- --c-fill-error: var(--c-red-500);
458
- --c-fill-success: var(--c-green-700);
459
- --c-fill-neutral: var(--c-black-100);
460
- --c-fill-negative: var(--c-red-800);
461
- --c-fill-disabled: var(--c-grey-300);
462
- --c-fill-rental: var(--c-turquoise-1200);
463
- --c-fill-blocker: var(--c-black-75);
464
- --c-fill-primary: var(--c-black-1000);
465
481
  --c-illustrations-primary: var(--c-white);
466
482
  --c-illustrations-secondary: var(--c-white);
467
483
  --c-illustrations-accent1: var(--c-white);