@drivy/cobalt 0.46.1 → 0.46.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 (28) hide show
  1. package/cjs/tokens/palette.js +71 -43
  2. package/cjs/tokens/palette.js.map +1 -1
  3. package/cjs/tokens/theme.js +142 -134
  4. package/cjs/tokens/theme.js.map +1 -1
  5. package/cjs/tokens/zIndexes.js +5 -0
  6. package/cjs/tokens/zIndexes.js.map +1 -1
  7. package/components/Calendar/CalendarView/CalendarViewMonth.js +2 -2
  8. package/components/Calendar/CalendarView/CalendarViewMonth.js.map +1 -1
  9. package/package.json +1 -1
  10. package/styles/components/Calendar/CalendarView/index.scss +7 -16
  11. package/styles/components/Icon/iconColors.scss +30 -26
  12. package/styles/components/Sidepanel/index.scss +32 -0
  13. package/styles/components.scss +1 -0
  14. package/styles/core/_colors-map.scss +39 -31
  15. package/styles/core/default-theme.scss +74 -66
  16. package/styles/core/palette.scss +69 -33
  17. package/styles/core/theme.scss +206 -190
  18. package/styles/core/z-index.scss +2 -1
  19. package/tokens/palette.js +72 -42
  20. package/tokens/palette.js.map +1 -1
  21. package/tokens/theme.js +142 -134
  22. package/tokens/theme.js.map +1 -1
  23. package/tokens/zIndexes.js +5 -1
  24. package/tokens/zIndexes.js.map +1 -1
  25. package/types/src/components/Icon/index.d.ts +1 -1
  26. package/types/src/components/Sidepanel/index.d.ts +16 -0
  27. package/types/src/tokens/index.d.ts +87 -44
  28. package/utilities.css +289 -181
package/styles/core/theme.scss CHANGED
@@ -6,59 +6,56 @@
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);
13
13
  --c-background-success: var(--c-green-700);
14
- --c-background-successAlt: var(--c-green-100);
14
+ --c-background-successAlt: var(--c-green-300);
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
- --c-background-accentInteractive--hover: var(--c-purple-700);
36
- --c-background-accentAltInteractive: var(--c-purple-100);
37
- --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
36
+ --c-background-accentInteractive--hover: var(--c-purple-600);
37
+ --c-background-accentAltInteractive: var(--c-purple-200);
38
+ --c-background-accentAltInteractive--hover: var(--c-purple-200);
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
- --c-text-successAlt: var(--c-green-1000);
52
- --c-text-warning: var(--c-orange-500);
51
+ --c-text-successAlt: var(--c-green-900);
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
- --c-icon-successAlt: var(--c-green-1000);
88
- --c-icon-warning: var(--c-orange-500);
93
+ --c-icon-successAlt: var(--c-green-900);
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);
108
- --c-icon-baseInteractive--hover: var(--c-navy-700);
109
- --c-icon-subduedInteractive: var(--c-navy-300);
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);
116
+ --c-icon-baseInteractive--hover: var(--c-navy-900);
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);
@@ -141,9 +149,9 @@
141
149
  --c-stroke-accentInteractive: var(--c-purple-500);
142
150
  --c-stroke-accentInteractive--hover: var(--c-purple-700);
143
151
  --c-stroke-accentInteractive--press: var(--c-purple-900);
144
- --c-stroke-strongInteractive: var(--c-navy-300);
145
- --c-stroke-strongInteractive--hover: var(--c-navy-500);
146
- --c-stroke-strongInteractive--press: var(--c-navy-700);
152
+ --c-stroke-strongInteractive: var(--c-grey-300);
153
+ --c-stroke-strongInteractive--hover: var(--c-grey-400);
154
+ --c-stroke-strongInteractive--press: var(--c-grey-500);
147
155
  --c-buttonIcon-selected: var(--c-purple-500);
148
156
  --c-buttonIcon-primary: var(--c-white);
149
157
  --c-buttonIcon-secondary: var(--c-purple-500);
@@ -157,10 +165,10 @@
157
165
  --c-buttonIcon-primaryInteractive--hover: var(--c-white);
158
166
  --c-buttonIcon-primaryInteractive--press: var(--c-white);
159
167
  --c-buttonIcon-secondaryInteractive: var(--c-purple-500);
160
- --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-700);
168
+ --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-500);
161
169
  --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
162
170
  --c-buttonIcon-tertiaryInteractive: var(--c-purple-500);
163
- --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-700);
171
+ --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-500);
164
172
  --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-900);
165
173
  --c-buttonIcon-destructiveInteractive: var(--c-red-500);
166
174
  --c-buttonIcon-destructiveInteractive--hover: var(--c-red-500);
@@ -214,20 +222,20 @@
214
222
  --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
215
223
  --c-buttonBackground-destructiveInteractive--press: var(--c-red-150);
216
224
  --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);
225
+ --c-buttonBackground-successAltInteractive--hover: var(--c-green-300);
226
+ --c-buttonBackground-successAltInteractive--press: var(--c-green-400);
219
227
  --c-fill-base: var(--c-navy-500);
220
- --c-fill-subdued: var(--c-navy-100);
221
- --c-fill-secondary: var(--c-yellow-500);
222
228
  --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);
229
+ --c-fill-secondary: var(--c-yellow-500);
230
+ --c-fill-subdued: var(--c-navy-100);
226
231
  --c-fill-neutral: var(--c-navy-50);
227
232
  --c-fill-negative: var(--c-red-150);
233
+ --c-fill-accentAlt: var(--c-purple-100);
228
234
  --c-fill-disabled: var(--c-navy-300);
229
- --c-fill-rental: var(--c-turquoise-100);
230
- --c-fill-blocker: var(--c-navy-120);
235
+ --c-fill-error: var(--c-red-500);
236
+ --c-fill-success: var(--c-green-500);
237
+ --c-fill-rental: var(--c-blue-300);
238
+ --c-fill-blocker: var(--c-grey-100);
231
239
  --c-fill-primary: var(--c-white);
232
240
  --c-illustrations-primary: var(--c-navy-500);
233
241
  --c-illustrations-secondary: var(--c-white);
@@ -237,164 +245,172 @@
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-1000);
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);
268
- --c-background-accentInteractive--hover: var(--c-purpleDeep-400);
269
- --c-background-accentAltInteractive: var(--c-purpleDeep-900);
270
- --c-background-accentAltInteractive--hover: var(--c-purpleDeep-900);
276
+ --c-background-accentInteractive: var(--c-purple-400);
277
+ --c-background-accentInteractive--hover: var(--c-purple-700);
278
+ --c-background-accentAltInteractive: var(--c-purple-1000);
279
+ --c-background-accentAltInteractive--hover: var(--c-purple-900);
271
280
  --c-background-connectInteractive: var(--c-newPurple-200);
272
281
  --c-background-connectInteractive--hover: var(--c-turquoise-700);
273
282
  --c-background-errorInteractive: var(--c-red-500);
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-400);
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-300);
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
- --c-text-subduedInteractive--hover: var(--c-grey-300);
307
- --c-text-accentInteractive: var(--c-purpleDeep-400);
308
- --c-text-accentInteractive--hover: var(--c-purpleDeep-400);
309
- --c-text-accentAltInteractive: var(--c-grey-100);
310
- --c-text-accentAltInteractive--hover: var(--c-grey-100);
321
+ --c-text-subduedInteractive--hover: var(--c-grey-400);
322
+ --c-text-accentInteractive: var(--c-purple-400);
323
+ --c-text-accentInteractive--hover: var(--c-purple-500);
324
+ --c-text-accentAltInteractive: var(--c-purple-200);
325
+ --c-text-accentAltInteractive--hover: var(--c-purple-400);
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-400);
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-300);
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
- --c-icon-baseInteractive--hover: var(--c-grey-100);
357
+ --c-icon-baseInteractive--hover: var(--c-grey-200);
342
358
  --c-icon-subduedInteractive: var(--c-grey-300);
343
- --c-icon-subduedInteractive--hover: var(--c-grey-300);
344
- --c-icon-accentInteractive: var(--c-purpleDeep-400);
345
- --c-icon-accentInteractive--hover: var(--c-purpleDeep-400);
346
- --c-icon-accentAltInteractive: var(--c-grey-100);
347
- --c-icon-accentAltInteractive--hover: var(--c-grey-100);
348
- --c-stroke-base: var(--c-black-50);
359
+ --c-icon-subduedInteractive--hover: var(--c-grey-400);
360
+ --c-icon-accentInteractive: var(--c-purple-400);
361
+ --c-icon-accentInteractive--hover: var(--c-purple-500);
362
+ --c-icon-accentAltInteractive: var(--c-purple-200);
363
+ --c-icon-accentAltInteractive--hover: var(--c-purple-400);
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-400);
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);
372
- --c-stroke-baseInteractive--hover: var(--c-purpleDeep-400);
373
- --c-stroke-baseInteractive--press: var(--c-purpleDeep-400);
374
- --c-stroke-accentInteractive: var(--c-purpleDeep-500);
375
- --c-stroke-accentInteractive--hover: var(--c-purpleDeep-400);
376
- --c-stroke-accentInteractive--press: var(--c-purpleDeep-400);
377
- --c-stroke-strongInteractive: var(--c-navy-200);
378
- --c-stroke-strongInteractive--hover: var(--c-purpleDeep-400);
379
- --c-stroke-strongInteractive--press: var(--c-purpleDeep-400);
385
+ --c-stroke-rideshare: var(--c-white);
386
+ --c-stroke-onBase: var(--c-black-600);
387
+ --c-stroke-baseInteractive: var(--c-black-100);
388
+ --c-stroke-baseInteractive--hover: var(--c-black-300);
389
+ --c-stroke-baseInteractive--press: var(--c-black-500);
390
+ --c-stroke-accentInteractive: var(--c-purple-400);
391
+ --c-stroke-accentInteractive--hover: var(--c-purple-600);
392
+ --c-stroke-accentInteractive--press: var(--c-purple-800);
393
+ --c-stroke-strongInteractive: var(--c-grey-700);
394
+ --c-stroke-strongInteractive--hover: var(--c-black-50);
395
+ --c-stroke-strongInteractive--press: var(--c-black-100);
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);
390
- --c-buttonIcon-primaryInteractive--hover: var(--c-white);
391
- --c-buttonIcon-primaryInteractive--press: var(--c-white);
392
- --c-buttonIcon-secondaryInteractive: var(--c-purpleDeep-400);
393
- --c-buttonIcon-secondaryInteractive--hover: var(--c-purpleDeep-700);
394
- --c-buttonIcon-secondaryInteractive--press: var(--c-purpleDeep-900);
405
+ --c-buttonIcon-primaryInteractive: var(--c-black-1000);
406
+ --c-buttonIcon-primaryInteractive--hover: var(--c-black-1000);
407
+ --c-buttonIcon-primaryInteractive--press: var(--c-black-1000);
408
+ --c-buttonIcon-secondaryInteractive: var(--c-purple-300);
409
+ --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-300);
410
+ --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
395
411
  --c-buttonIcon-tertiaryInteractive: var(--c-white);
396
- --c-buttonIcon-tertiaryInteractive--hover: var(--c-purpleDeep-700);
397
- --c-buttonIcon-tertiaryInteractive--press: var(--c-purpleDeep-900);
412
+ --c-buttonIcon-tertiaryInteractive--hover: var(--c-white);
413
+ --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-1000);
398
414
  --c-buttonIcon-destructiveInteractive: var(--c-red-200);
399
415
  --c-buttonIcon-destructiveInteractive--hover: var(--c-red-200);
400
416
  --c-buttonIcon-destructiveInteractive--press: var(--c-red-200);
@@ -402,23 +418,23 @@
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);
414
- --c-buttonLabel-primaryInteractive--hover: var(--c-white);
415
- --c-buttonLabel-primaryInteractive--press: var(--c-white);
416
- --c-buttonLabel-secondaryInteractive: var(--c-purpleDeep-400);
417
- --c-buttonLabel-secondaryInteractive--hover: var(--c-purpleDeep-700);
418
- --c-buttonLabel-secondaryInteractive--press: var(--c-purpleDeep-900);
429
+ --c-buttonLabel-primaryInteractive: var(--c-black-1000);
430
+ --c-buttonLabel-primaryInteractive--hover: var(--c-black-1000);
431
+ --c-buttonLabel-primaryInteractive--press: var(--c-black-1000);
432
+ --c-buttonLabel-secondaryInteractive: var(--c-purple-300);
433
+ --c-buttonLabel-secondaryInteractive--hover: var(--c-purple-300);
434
+ --c-buttonLabel-secondaryInteractive--press: var(--c-purple-900);
419
435
  --c-buttonLabel-tertiaryInteractive: var(--c-white);
420
- --c-buttonLabel-tertiaryInteractive--hover: var(--c-purpleDeep-700);
421
- --c-buttonLabel-tertiaryInteractive--press: var(--c-purpleDeep-900);
436
+ --c-buttonLabel-tertiaryInteractive--hover: var(--c-white);
437
+ --c-buttonLabel-tertiaryInteractive--press: var(--c-purple-1000);
422
438
  --c-buttonLabel-destructiveInteractive: var(--c-red-200);
423
439
  --c-buttonLabel-destructiveInteractive--hover: var(--c-red-200);
424
440
  --c-buttonLabel-destructiveInteractive--press: var(--c-red-200);
@@ -426,18 +442,18 @@
426
442
  --c-buttonLabel-successAltInteractive--hover: var(--c-green-100);
427
443
  --c-buttonLabel-successAltInteractive--press: var(--c-green-100);
428
444
  --c-buttonBackground-selected: var(--c-purpleDeep-900);
429
- --c-buttonBackground-primary: var(--c-purpleDeep-500);
430
- --c-buttonBackground-secondary: var(--c-black-500);
445
+ --c-buttonBackground-primary: var(--c-purple-400);
446
+ --c-buttonBackground-secondary: var(--c-black-100);
431
447
  --c-buttonBackground-tertiary: var(--c-white);
432
- --c-buttonBackground-accentAlt: var(--c-purpleDeep-900);
448
+ --c-buttonBackground-accentAlt: var(--c-purple-900);
433
449
  --c-buttonBackground-destructive: var(--c-red-900);
434
450
  --c-buttonBackground-success: var(--c-green-900);
435
451
  --c-buttonBackground-successAlt: var(--c-green-1000);
436
452
  --c-buttonBackground-disabled: var(--c-black-50);
437
- --c-buttonBackground-primaryInteractive: var(--c-purpleDeep-500);
438
- --c-buttonBackground-primaryInteractive--hover: var(--c-purpleDeep-700);
439
- --c-buttonBackground-primaryInteractive--press: var(--c-purpleDeep-900);
440
- --c-buttonBackground-secondaryInteractive: var(--c-black-500);
453
+ --c-buttonBackground-primaryInteractive: var(--c-purple-400);
454
+ --c-buttonBackground-primaryInteractive--hover: var(--c-purple-800);
455
+ --c-buttonBackground-primaryInteractive--press: var(--c-purple-1000);
456
+ --c-buttonBackground-secondaryInteractive: var(--c-black-100);
441
457
  --c-buttonBackground-secondaryInteractive--hover: var(--c-black-500);
442
458
  --c-buttonBackground-secondaryInteractive--press: var(--c-black-500);
443
459
  --c-buttonBackground-tertiaryInteractive: var(--c-white);
@@ -449,18 +465,18 @@
449
465
  --c-buttonBackground-successAltInteractive: var(--c-green-1000);
450
466
  --c-buttonBackground-successAltInteractive--hover: var(--c-green-900);
451
467
  --c-buttonBackground-successAltInteractive--press: var(--c-green-1000);
452
- --c-fill-base: var(--c-grey-50);
468
+ --c-fill-base: var(--c-navy-50);
469
+ --c-fill-accent: var(--c-purple-400);
470
+ --c-fill-secondary: var(--c-yellow-400);
453
471
  --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
472
  --c-fill-neutral: var(--c-black-100);
460
473
  --c-fill-negative: var(--c-red-800);
474
+ --c-fill-accentAlt: var(--c-purple-900);
461
475
  --c-fill-disabled: var(--c-grey-300);
462
- --c-fill-rental: var(--c-turquoise-1200);
463
- --c-fill-blocker: var(--c-black-75);
476
+ --c-fill-error: var(--c-red-500);
477
+ --c-fill-success: var(--c-green-700);
478
+ --c-fill-rental: var(--c-blue-700);
479
+ --c-fill-blocker: var(--c-black-200);
464
480
  --c-fill-primary: var(--c-black-1000);
465
481
  --c-illustrations-primary: var(--c-white);
466
482
  --c-illustrations-secondary: var(--c-white);
package/styles/core/z-index.scss CHANGED
@@ -7,7 +7,8 @@ $z-index-data: (
7
7
  "header": 30,
8
8
  "modal": 90,
9
9
  "flash": 100,
10
- "alert": 100
10
+ "alert": 100,
11
+ "sidepanel": 80
11
12
  );
12
13
 
13
14
  @function zx($level: base) {