@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/utilities.css CHANGED
@@ -7,50 +7,62 @@
7
7
  /**********************************/
8
8
 
9
9
  :root {
10
- --c-white: #fff;
11
- --c-purple-100: #f6e5f5;
12
- --c-purple-300: #ca6bc3;
13
- --c-purple-400: #c04fb8;
10
+ --c-white: #ffffff;
11
+ --c-purple-100: #f8f2f8;
12
+ --c-purple-200: #f0e1ee;
13
+ --c-purple-300: #db97d5;
14
+ --c-purple-400: #c758bd;
14
15
  --c-purple-500: #b01aa7;
15
- --c-purple-700: #8d1586;
16
- --c-purple-900: #5f1159;
17
- --c-purpleDeep-100: #f2a6ee;
18
- --c-purpleDeep-300: #ea71e3;
19
- --c-purpleDeep-400: #c31dba;
20
- --c-purpleDeep-500: #9b1794;
21
- --c-purpleDeep-700: #73116e;
22
- --c-purpleDeep-900: #4b0b48;
23
- --c-purpleLight-100: #ffdcfd;
16
+ --c-purple-600: #a6199d;
17
+ --c-purple-700: #901588;
18
+ --c-purple-800: #75116f;
19
+ --c-purple-900: #530c4f;
20
+ --c-purple-1000: #3e093b;
21
+ --c-purple-1100: #280626;
22
+ --c-purple-1200: #160315;
24
23
  --c-navy-50: #f1f1f4;
25
24
  --c-navy-100: #e3e2e8;
26
25
  --c-navy-120: #cac7d2;
27
26
  --c-navy-200: #bbb8c7;
28
27
  --c-navy-300: #7b728e;
28
+ --c-navy-400: #554b70;
29
29
  --c-navy-500: #362e53;
30
30
  --c-navy-700: #261a48;
31
31
  --c-navy-900: #0f0429;
32
32
  --c-yellow-100: #ffeed1;
33
33
  --c-yellow-300: #ffdda3;
34
+ --c-yellow-400: #ffd387;
34
35
  --c-yellow-500: #ffc766;
35
36
  --c-yellow-700: #c59548;
36
37
  --c-yellow-900: #75592d;
37
38
  --c-yellow-1000: #3b2e17;
38
- --c-green-100: #cdebcb;
39
- --c-green-120: #bfe5bd;
40
- --c-green-150: #b1e0ae;
39
+ --c-green-100: #f4f9f3;
40
+ --c-green-200: #e5f2e4;
41
+ --c-green-300: #c8e5c6;
42
+ --c-green-400: #93d790;
41
43
  --c-green-500: #5cbf54;
42
44
  --c-green-700: #479d3e;
43
45
  --c-green-900: #2f6d1c;
44
46
  --c-green-1000: #1b500a;
47
+ --c-green-1100: #143b05;
48
+ --c-green-1200: #102e03;
45
49
  --c-red-100: #fdeded;
46
- --c-red-120: #fbdada;
47
- --c-red-150: #f9c8c8;
48
- --c-red-200: #e38c8c;
49
- --c-red-400: #ed4545;
50
+ --c-red-120: #f7e9e9;
51
+ --c-red-150: #eed0d0;
52
+ --c-red-200: #e5b5b5;
53
+ --c-red-300: #db9494;
54
+ --c-red-400: #d16969;
50
55
  --c-red-500: #c71414;
51
- --c-red-700: #af1212;
52
- --c-red-800: #764747;
53
- --c-red-900: #3f2424;
56
+ --c-red-600: #b61212;
57
+ --c-red-700: #a21010;
58
+ --c-red-800: #8d0e0e;
59
+ --c-red-900: #730c0c;
60
+ --c-red-1000: #510808;
61
+ --c-red-1200: #4a0707;
62
+ --c-red-1300: #420707;
63
+ --c-red-1400: #390606;
64
+ --c-red-1500: #2f0505;
65
+ --c-red-1600: #210303;
54
66
  --c-orange-100: #f1d5b1;
55
67
  --c-orange-300: #eec186;
56
68
  --c-orange-500: #e39735;
@@ -58,14 +70,34 @@
58
70
  --c-black-50: #544f53;
59
71
  --c-black-75: #443f44;
60
72
  --c-black-100: #363036;
73
+ --c-black-200: #2e292e;
61
74
  --c-black-300: #282127;
75
+ --c-black-400: #251d24;
62
76
  --c-black-500: #191218;
63
- --c-black-1000: #000;
77
+ --c-black-600: #0f0a0e;
78
+ --c-black-700: #090609;
79
+ --c-black-800: #030203;
80
+ --c-black-1000: #000000;
64
81
  --c-grey-50: #f8f9fa;
65
82
  --c-grey-100: #e3e2e3;
83
+ --c-grey-200: #c3c1c3;
66
84
  --c-grey-300: #a9a6a9;
85
+ --c-grey-400: #9d9a9d;
67
86
  --c-grey-500: #918d91;
68
- --c-blue-500: #79a3f3;
87
+ --c-grey-600: #7d787d;
88
+ --c-grey-700: #6a676a;
89
+ --c-blue-100: #f5f8ff;
90
+ --c-blue-200: #e5edff;
91
+ --c-blue-300: #b7d3ff;
92
+ --c-blue-400: #74b0ff;
93
+ --c-blue-500: #1f81f3;
94
+ --c-blue-600: #185bd1;
95
+ --c-blue-700: #1b3b8b;
96
+ --c-blue-800: #19255c;
97
+ --c-blue-900: #151c38;
98
+ --c-blue-1000: #101423;
99
+ --c-blue-1100: #0d1016;
100
+ --c-blue-1200: #0a0b0f;
69
101
  --c-turquoise-50: #ecf9fb;
70
102
  --c-turquoise-100: #cfeff5;
71
103
  --c-turquoise-200: #afe5ee;
@@ -77,14 +109,18 @@
77
109
  --c-turquoise-800: #42b8cf;
78
110
  --c-turquoise-900: #31acc7;
79
111
  --c-turquoise-1200: #11505e;
80
- --c-season-100: #bdffac;
81
- --c-season-200: #94ea84;
82
- --c-season-300: #73c865;
83
- --c-season-400: #54a949;
84
- --c-season-700: #0b7011;
85
- --c-season-800: #005100;
86
- --c-season-900: #030;
87
- --c-season-1000: #001900;
112
+ --c-season-100: #a9d4a8;
113
+ --c-season-200: #9fd09e;
114
+ --c-season-300: #7cc27b;
115
+ --c-season-400: #56b654;
116
+ --c-season-500: #24aa1f;
117
+ --c-season-600: #229f1c;
118
+ --c-season-700: #1f931a;
119
+ --c-season-800: #1d8618;
120
+ --c-season-900: #1a7816;
121
+ --c-season-1000: #166612;
122
+ --c-season-1100: #11510f;
123
+ --c-season-1200: #0a3109;
88
124
  --c-newPurple-200: #e46fee;
89
125
  --c-newPurple-500: #bc00cc;
90
126
  --c-newViolet-200: #b86fff;
@@ -103,59 +139,56 @@
103
139
  --c-background-primary: var(--c-white);
104
140
  --c-background-secondary: var(--c-white);
105
141
  --c-background-accent: var(--c-purple-500);
106
- --c-background-accentAlt: var(--c-purple-100);
142
+ --c-background-accentAlt: var(--c-purple-200);
107
143
  --c-background-info: var(--c-yellow-100);
108
144
  --c-background-error: var(--c-red-500);
109
145
  --c-background-errorAlt: var(--c-red-100);
110
146
  --c-background-success: var(--c-green-700);
111
- --c-background-successAlt: var(--c-green-100);
147
+ --c-background-successAlt: var(--c-green-300);
112
148
  --c-background-connect: var(--c-newPurple-500);
113
149
  --c-background-connectAlt: var(--c-turquoise-50);
114
- --c-background-keyExchange: var(--c-newViolet-500);
115
- --c-background-picked: var(--c-green-700);
116
- --c-background-rideshare: var(--c-black-1000);
117
150
  --c-background-driver: var(--c-yellow-500);
118
151
  --c-background-owner: var(--c-navy-700);
119
- --c-background-disabled: var(--c-navy-100);
152
+ --c-background-disabled: var(--c-navy-50);
120
153
  --c-background-neutral: var(--c-navy-100);
121
154
  --c-background-neutralAlt: var(--c-navy-50);
122
155
  --c-background-seasonLow: var(--c-season-100);
123
- --c-background-seasonMedium: var(--c-season-200);
124
- --c-background-seasonHigh: var(--c-season-300);
125
- --c-background-seasonVeryhigh: var(--c-season-400);
126
- --c-background-rental: var(--c-turquoise-100);
127
- --c-background-blocker: var(--c-navy-100);
156
+ --c-background-seasonMedium: var(--c-season-300);
157
+ --c-background-seasonHigh: var(--c-season-700);
158
+ --c-background-seasonVeryHigh: var(--c-season-1100);
159
+ --c-background-rental: var(--c-blue-500);
160
+ --c-background-rentalAlt: var(--c-blue-300);
161
+ --c-background-blocker: var(--c-grey-100);
162
+ --c-background-rideshare: var(--c-black-1000);
163
+ --c-background-keyExchange: var(--c-newViolet-500);
164
+ --c-background-picked: var(--c-green-700);
128
165
  --c-background-base: var(--c-navy-900);
129
166
  --c-background-secondaryInteractive: var(--c-white);
130
167
  --c-background-secondaryInteractive--hover: var(--c-navy-50);
131
168
  --c-background-accentInteractive: var(--c-purple-500);
132
- --c-background-accentInteractive--hover: var(--c-purple-700);
133
- --c-background-accentAltInteractive: var(--c-purple-100);
134
- --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
169
+ --c-background-accentInteractive--hover: var(--c-purple-600);
170
+ --c-background-accentAltInteractive: var(--c-purple-200);
171
+ --c-background-accentAltInteractive--hover: var(--c-purple-200);
135
172
  --c-background-connectInteractive: var(--c-newPurple-500);
136
173
  --c-background-connectInteractive--hover: var(--c-turquoise-700);
137
174
  --c-background-errorInteractive: var(--c-red-500);
138
175
  --c-background-errorInteractive--hover: var(--c-red-700);
139
176
  --c-text-base: var(--c-navy-700);
140
- --c-text-subdued: var(--c-navy-300);
177
+ --c-text-subdued: var(--c-navy-400);
141
178
  --c-text-accent: var(--c-purple-500);
142
- --c-text-accentAlt: var(--c-purple-500);
179
+ --c-text-accentAlt: var(--c-purple-700);
143
180
  --c-text-info: var(--c-yellow-900);
144
- --c-text-infoAlt: var(--c-yellow-700);
145
181
  --c-text-error: var(--c-red-500);
146
182
  --c-text-errorAlt: var(--c-red-500);
147
183
  --c-text-success: var(--c-green-700);
148
- --c-text-successAlt: var(--c-green-1000);
149
- --c-text-warning: var(--c-orange-500);
184
+ --c-text-successAlt: var(--c-green-900);
150
185
  --c-text-connect: var(--c-newPurple-500);
151
186
  --c-text-connectAlt: var(--c-turquoise-900);
152
- --c-text-keyExchange: var(--c-newViolet-500);
153
- --c-text-picked: var(--c-green-700);
154
- --c-text-rideshare: var(--c-black-1000);
155
187
  --c-text-driver: var(--c-navy-700);
156
188
  --c-text-owner: var(--c-white);
157
- --c-text-disabled: var(--c-navy-200);
158
- --c-text-inversed: var(--c-white);
189
+ --c-text-warning: var(--c-orange-500);
190
+ --c-text-infoAlt: var(--c-yellow-700);
191
+ --c-text-disabled: var(--c-navy-120);
159
192
  --c-text-onAccent: var(--c-white);
160
193
  --c-text-onRideshare: var(--c-white);
161
194
  --c-text-onError: var(--c-white);
@@ -163,36 +196,41 @@
163
196
  --c-text-onConnect: var(--c-white);
164
197
  --c-text-onKeyExchange: var(--c-white);
165
198
  --c-text-onPicked: var(--c-white);
199
+ --c-text-keyExchange: var(--c-newViolet-500);
200
+ --c-text-picked: var(--c-green-700);
201
+ --c-text-rideshare: var(--c-black-1000);
166
202
  --c-text-onBase: var(--c-white);
203
+ --c-text-onSeasonLow: var(--c-black-800);
204
+ --c-text-onSeasonMedium: var(--c-black-800);
205
+ --c-text-onSeasonHigh: var(--c-white);
206
+ --c-text-onSeasonVeryHigh: var(--c-white);
207
+ --c-text-onRental: var(--c-white);
208
+ --c-text-onRentalAlt: var(--c-black-300);
209
+ --c-text-inversed: var(--c-white);
167
210
  --c-text-baseInteractive: var(--c-navy-700);
168
211
  --c-text-baseInteractive--hover: var(--c-navy-900);
169
- --c-text-subduedInteractive: var(--c-navy-300);
212
+ --c-text-subduedInteractive: var(--c-navy-400);
170
213
  --c-text-subduedInteractive--hover: var(--c-navy-500);
171
214
  --c-text-accentInteractive: var(--c-purple-500);
172
215
  --c-text-accentInteractive--hover: var(--c-purple-700);
173
- --c-text-accentAltInteractive: var(--c-purple-500);
216
+ --c-text-accentAltInteractive: var(--c-purple-700);
174
217
  --c-text-accentAltInteractive--hover: var(--c-purple-700);
175
- --c-icon-base: var(--c-navy-500);
176
- --c-icon-subdued: var(--c-navy-300);
218
+ --c-icon-base: var(--c-navy-700);
219
+ --c-icon-subdued: var(--c-navy-400);
177
220
  --c-icon-accent: var(--c-purple-500);
178
- --c-icon-accentAlt: var(--c-purple-500);
221
+ --c-icon-accentAlt: var(--c-purple-700);
179
222
  --c-icon-info: var(--c-yellow-900);
180
- --c-icon-infoAlt: var(--c-yellow-500);
181
223
  --c-icon-error: var(--c-red-500);
182
224
  --c-icon-errorAlt: var(--c-red-500);
183
225
  --c-icon-success: var(--c-green-700);
184
- --c-icon-successAlt: var(--c-green-1000);
185
- --c-icon-warning: var(--c-orange-500);
226
+ --c-icon-successAlt: var(--c-green-900);
186
227
  --c-icon-connect: var(--c-newPurple-500);
187
228
  --c-icon-connectAlt: var(--c-turquoise-900);
188
- --c-icon-keyExchange: var(--c-newViolet-500);
189
- --c-icon-picked: var(--c-green-700);
190
- --c-icon-rideshare: var(--c-black-1000);
191
229
  --c-icon-driver: var(--c-navy-700);
192
230
  --c-icon-owner: var(--c-white);
231
+ --c-icon-warning: var(--c-orange-500);
232
+ --c-icon-infoAlt: var(--c-yellow-500);
193
233
  --c-icon-disabled: var(--c-navy-200);
194
- --c-icon-disabledAlt: var(--c-navy-300);
195
- --c-icon-inversed: var(--c-white);
196
234
  --c-icon-onAccent: var(--c-white);
197
235
  --c-icon-onRideshare: var(--c-white);
198
236
  --c-icon-onError: var(--c-white);
@@ -200,37 +238,43 @@
200
238
  --c-icon-onConnect: var(--c-white);
201
239
  --c-icon-onKeyExchange: var(--c-white);
202
240
  --c-icon-onPicked: var(--c-white);
241
+ --c-icon-keyExchange: var(--c-newViolet-500);
242
+ --c-icon-picked: var(--c-green-700);
243
+ --c-icon-rideshare: var(--c-black-1000);
203
244
  --c-icon-onBase: var(--c-white);
204
- --c-icon-baseInteractive: var(--c-navy-500);
205
- --c-icon-baseInteractive--hover: var(--c-navy-700);
206
- --c-icon-subduedInteractive: var(--c-navy-300);
245
+ --c-icon-disabledAlt: var(--c-navy-120);
246
+ --c-icon-onRental: var(--c-white);
247
+ --c-icon-inversed: var(--c-white);
248
+ --c-icon-baseInteractive: var(--c-navy-700);
249
+ --c-icon-baseInteractive--hover: var(--c-navy-900);
250
+ --c-icon-subduedInteractive: var(--c-navy-400);
207
251
  --c-icon-subduedInteractive--hover: var(--c-navy-500);
208
252
  --c-icon-accentInteractive: var(--c-purple-500);
209
253
  --c-icon-accentInteractive--hover: var(--c-purple-700);
210
- --c-icon-accentAltInteractive: var(--c-purple-500);
254
+ --c-icon-accentAltInteractive: var(--c-purple-700);
211
255
  --c-icon-accentAltInteractive--hover: var(--c-purple-700);
212
256
  --c-stroke-base: var(--c-navy-100);
213
257
  --c-stroke-subdued: var(--c-navy-50);
214
- --c-stroke-strong: var(--c-navy-300);
215
258
  --c-stroke-accent: var(--c-purple-500);
216
- --c-stroke-accentAlt: var(--c-purple-300);
217
- --c-stroke-error: var(--c-red-500);
218
- --c-stroke-errorAlt: var(--c-red-500);
259
+ --c-stroke-accentAlt: var(--c-purple-600);
219
260
  --c-stroke-success: var(--c-green-500);
220
261
  --c-stroke-successAlt: var(--c-green-500);
221
- --c-stroke-connect: var(--c-newPurple-500);
222
- --c-stroke-keyExchange: var(--c-newViolet-500);
223
- --c-stroke-picked: var(--c-green-700);
224
- --c-stroke-rideshare: var(--c-black-1000);
225
- --c-stroke-rental: var(--c-turquoise-500);
226
- --c-stroke-blocker: var(--c-navy-300);
262
+ --c-stroke-error: var(--c-red-500);
263
+ --c-stroke-errorAlt: var(--c-red-500);
264
+ --c-stroke-strong: var(--c-grey-300);
227
265
  --c-stroke-onAccent: var(--c-white);
266
+ --c-stroke-rental: var(--c-blue-700);
267
+ --c-stroke-blocker: var(--c-grey-200);
228
268
  --c-stroke-onError: var(--c-white);
229
269
  --c-stroke-onSuccess: var(--c-white);
270
+ --c-stroke-connect: var(--c-newPurple-500);
271
+ --c-stroke-keyExchange: var(--c-newViolet-500);
272
+ --c-stroke-picked: var(--c-green-700);
230
273
  --c-stroke-onConnect: var(--c-white);
231
- --c-stroke-onPicked: var(--c-white);
232
274
  --c-stroke-onKeyExchange: var(--c-white);
275
+ --c-stroke-onPicked: var(--c-white);
233
276
  --c-stroke-onRideshare: var(--c-white);
277
+ --c-stroke-rideshare: var(--c-black-1000);
234
278
  --c-stroke-onBase: var(--c-white);
235
279
  --c-stroke-baseInteractive: var(--c-navy-100);
236
280
  --c-stroke-baseInteractive--hover: var(--c-navy-300);
@@ -238,9 +282,9 @@
238
282
  --c-stroke-accentInteractive: var(--c-purple-500);
239
283
  --c-stroke-accentInteractive--hover: var(--c-purple-700);
240
284
  --c-stroke-accentInteractive--press: var(--c-purple-900);
241
- --c-stroke-strongInteractive: var(--c-navy-300);
242
- --c-stroke-strongInteractive--hover: var(--c-navy-500);
243
- --c-stroke-strongInteractive--press: var(--c-navy-700);
285
+ --c-stroke-strongInteractive: var(--c-grey-300);
286
+ --c-stroke-strongInteractive--hover: var(--c-grey-400);
287
+ --c-stroke-strongInteractive--press: var(--c-grey-500);
244
288
  --c-buttonIcon-selected: var(--c-purple-500);
245
289
  --c-buttonIcon-primary: var(--c-white);
246
290
  --c-buttonIcon-secondary: var(--c-purple-500);
@@ -254,10 +298,10 @@
254
298
  --c-buttonIcon-primaryInteractive--hover: var(--c-white);
255
299
  --c-buttonIcon-primaryInteractive--press: var(--c-white);
256
300
  --c-buttonIcon-secondaryInteractive: var(--c-purple-500);
257
- --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-700);
301
+ --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-500);
258
302
  --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
259
303
  --c-buttonIcon-tertiaryInteractive: var(--c-purple-500);
260
- --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-700);
304
+ --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-500);
261
305
  --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-900);
262
306
  --c-buttonIcon-destructiveInteractive: var(--c-red-500);
263
307
  --c-buttonIcon-destructiveInteractive--hover: var(--c-red-500);
@@ -311,20 +355,20 @@
311
355
  --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
312
356
  --c-buttonBackground-destructiveInteractive--press: var(--c-red-150);
313
357
  --c-buttonBackground-successAltInteractive: var(--c-green-100);
314
- --c-buttonBackground-successAltInteractive--hover: var(--c-green-120);
315
- --c-buttonBackground-successAltInteractive--press: var(--c-green-150);
358
+ --c-buttonBackground-successAltInteractive--hover: var(--c-green-300);
359
+ --c-buttonBackground-successAltInteractive--press: var(--c-green-400);
316
360
  --c-fill-base: var(--c-navy-500);
317
- --c-fill-subdued: var(--c-navy-100);
318
- --c-fill-secondary: var(--c-yellow-500);
319
361
  --c-fill-accent: var(--c-purple-500);
320
- --c-fill-accentAlt: var(--c-purple-100);
321
- --c-fill-error: var(--c-red-500);
322
- --c-fill-success: var(--c-green-500);
362
+ --c-fill-secondary: var(--c-yellow-500);
363
+ --c-fill-subdued: var(--c-navy-100);
323
364
  --c-fill-neutral: var(--c-navy-50);
324
365
  --c-fill-negative: var(--c-red-150);
366
+ --c-fill-accentAlt: var(--c-purple-100);
325
367
  --c-fill-disabled: var(--c-navy-300);
326
- --c-fill-rental: var(--c-turquoise-100);
327
- --c-fill-blocker: var(--c-navy-120);
368
+ --c-fill-error: var(--c-red-500);
369
+ --c-fill-success: var(--c-green-500);
370
+ --c-fill-rental: var(--c-blue-300);
371
+ --c-fill-blocker: var(--c-grey-100);
328
372
  --c-fill-primary: var(--c-white);
329
373
  --c-illustrations-primary: var(--c-navy-500);
330
374
  --c-illustrations-secondary: var(--c-white);
@@ -1459,6 +1503,18 @@
1459
1503
  z-index: 31;
1460
1504
  }
1461
1505
 
1506
+ .c-z-sidepanel-below {
1507
+ z-index: 79;
1508
+ }
1509
+
1510
+ .c-z-sidepanel {
1511
+ z-index: 80;
1512
+ }
1513
+
1514
+ .c-z-sidepanel-above {
1515
+ z-index: 81;
1516
+ }
1517
+
1462
1518
  .c-z-modal-below {
1463
1519
  z-index: 89;
1464
1520
  }
@@ -1531,6 +1587,18 @@
1531
1587
  z-index: 31;
1532
1588
  }
1533
1589
 
1590
+ .hover\:c-z-sidepanel-below:hover {
1591
+ z-index: 79;
1592
+ }
1593
+
1594
+ .hover\:c-z-sidepanel:hover {
1595
+ z-index: 80;
1596
+ }
1597
+
1598
+ .hover\:c-z-sidepanel-above:hover {
1599
+ z-index: 81;
1600
+ }
1601
+
1534
1602
  .hover\:c-z-modal-below:hover {
1535
1603
  z-index: 89;
1536
1604
  }
@@ -1603,6 +1671,18 @@
1603
1671
  z-index: 31;
1604
1672
  }
1605
1673
 
1674
+ .focus\:c-z-sidepanel-below:focus {
1675
+ z-index: 79;
1676
+ }
1677
+
1678
+ .focus\:c-z-sidepanel:focus {
1679
+ z-index: 80;
1680
+ }
1681
+
1682
+ .focus\:c-z-sidepanel-above:focus {
1683
+ z-index: 81;
1684
+ }
1685
+
1606
1686
  .focus\:c-z-modal-below:focus {
1607
1687
  z-index: 89;
1608
1688
  }
@@ -5220,10 +5300,6 @@
5220
5300
  border-color: var(--c-stroke-subdued);
5221
5301
  }
5222
5302
 
5223
- .c-border-strong {
5224
- border-color: var(--c-stroke-strong);
5225
- }
5226
-
5227
5303
  .c-border-accent {
5228
5304
  border-color: var(--c-stroke-accent);
5229
5305
  }
@@ -5232,14 +5308,6 @@
5232
5308
  border-color: var(--c-stroke-accentAlt);
5233
5309
  }
5234
5310
 
5235
- .c-border-error {
5236
- border-color: var(--c-stroke-error);
5237
- }
5238
-
5239
- .c-border-errorAlt {
5240
- border-color: var(--c-stroke-errorAlt);
5241
- }
5242
-
5243
5311
  .c-border-success {
5244
5312
  border-color: var(--c-stroke-success);
5245
5313
  }
@@ -5248,20 +5316,20 @@
5248
5316
  border-color: var(--c-stroke-successAlt);
5249
5317
  }
5250
5318
 
5251
- .c-border-connect {
5252
- border-color: var(--c-stroke-connect);
5319
+ .c-border-error {
5320
+ border-color: var(--c-stroke-error);
5253
5321
  }
5254
5322
 
5255
- .c-border-keyExchange {
5256
- border-color: var(--c-stroke-keyExchange);
5323
+ .c-border-errorAlt {
5324
+ border-color: var(--c-stroke-errorAlt);
5257
5325
  }
5258
5326
 
5259
- .c-border-picked {
5260
- border-color: var(--c-stroke-picked);
5327
+ .c-border-strong {
5328
+ border-color: var(--c-stroke-strong);
5261
5329
  }
5262
5330
 
5263
- .c-border-rideshare {
5264
- border-color: var(--c-stroke-rideshare);
5331
+ .c-border-onAccent {
5332
+ border-color: var(--c-stroke-onAccent);
5265
5333
  }
5266
5334
 
5267
5335
  .c-border-rental {
@@ -5272,10 +5340,6 @@
5272
5340
  border-color: var(--c-stroke-blocker);
5273
5341
  }
5274
5342
 
5275
- .c-border-onAccent {
5276
- border-color: var(--c-stroke-onAccent);
5277
- }
5278
-
5279
5343
  .c-border-onError {
5280
5344
  border-color: var(--c-stroke-onError);
5281
5345
  }
@@ -5284,22 +5348,38 @@
5284
5348
  border-color: var(--c-stroke-onSuccess);
5285
5349
  }
5286
5350
 
5287
- .c-border-onConnect {
5288
- border-color: var(--c-stroke-onConnect);
5351
+ .c-border-connect {
5352
+ border-color: var(--c-stroke-connect);
5289
5353
  }
5290
5354
 
5291
- .c-border-onPicked {
5292
- border-color: var(--c-stroke-onPicked);
5355
+ .c-border-keyExchange {
5356
+ border-color: var(--c-stroke-keyExchange);
5357
+ }
5358
+
5359
+ .c-border-picked {
5360
+ border-color: var(--c-stroke-picked);
5361
+ }
5362
+
5363
+ .c-border-onConnect {
5364
+ border-color: var(--c-stroke-onConnect);
5293
5365
  }
5294
5366
 
5295
5367
  .c-border-onKeyExchange {
5296
5368
  border-color: var(--c-stroke-onKeyExchange);
5297
5369
  }
5298
5370
 
5371
+ .c-border-onPicked {
5372
+ border-color: var(--c-stroke-onPicked);
5373
+ }
5374
+
5299
5375
  .c-border-onRideshare {
5300
5376
  border-color: var(--c-stroke-onRideshare);
5301
5377
  }
5302
5378
 
5379
+ .c-border-rideshare {
5380
+ border-color: var(--c-stroke-rideshare);
5381
+ }
5382
+
5303
5383
  .c-border-onBase {
5304
5384
  border-color: var(--c-stroke-onBase);
5305
5385
  }
@@ -5396,18 +5476,6 @@
5396
5476
  background-color: var(--c-background-connectAlt);
5397
5477
  }
5398
5478
 
5399
- .c-bg-keyExchange {
5400
- background-color: var(--c-background-keyExchange);
5401
- }
5402
-
5403
- .c-bg-picked {
5404
- background-color: var(--c-background-picked);
5405
- }
5406
-
5407
- .c-bg-rideshare {
5408
- background-color: var(--c-background-rideshare);
5409
- }
5410
-
5411
5479
  .c-bg-driver {
5412
5480
  background-color: var(--c-background-driver);
5413
5481
  }
@@ -5440,18 +5508,34 @@
5440
5508
  background-color: var(--c-background-seasonHigh);
5441
5509
  }
5442
5510
 
5443
- .c-bg-seasonVeryhigh {
5444
- background-color: var(--c-background-seasonVeryhigh);
5511
+ .c-bg-seasonVeryHigh {
5512
+ background-color: var(--c-background-seasonVeryHigh);
5445
5513
  }
5446
5514
 
5447
5515
  .c-bg-rental {
5448
5516
  background-color: var(--c-background-rental);
5449
5517
  }
5450
5518
 
5519
+ .c-bg-rentalAlt {
5520
+ background-color: var(--c-background-rentalAlt);
5521
+ }
5522
+
5451
5523
  .c-bg-blocker {
5452
5524
  background-color: var(--c-background-blocker);
5453
5525
  }
5454
5526
 
5527
+ .c-bg-rideshare {
5528
+ background-color: var(--c-background-rideshare);
5529
+ }
5530
+
5531
+ .c-bg-keyExchange {
5532
+ background-color: var(--c-background-keyExchange);
5533
+ }
5534
+
5535
+ .c-bg-picked {
5536
+ background-color: var(--c-background-picked);
5537
+ }
5538
+
5455
5539
  .c-bg-base {
5456
5540
  background-color: var(--c-background-base);
5457
5541
  }
@@ -5520,28 +5604,16 @@
5520
5604
  background-color: var(--c-fill-base);
5521
5605
  }
5522
5606
 
5523
- .c-bg-fill-subdued {
5524
- background-color: var(--c-fill-subdued);
5525
- }
5526
-
5527
- .c-bg-fill-secondary {
5528
- background-color: var(--c-fill-secondary);
5529
- }
5530
-
5531
5607
  .c-bg-fill-accent {
5532
5608
  background-color: var(--c-fill-accent);
5533
5609
  }
5534
5610
 
5535
- .c-bg-fill-accentAlt {
5536
- background-color: var(--c-fill-accentAlt);
5537
- }
5538
-
5539
- .c-bg-fill-error {
5540
- background-color: var(--c-fill-error);
5611
+ .c-bg-fill-secondary {
5612
+ background-color: var(--c-fill-secondary);
5541
5613
  }
5542
5614
 
5543
- .c-bg-fill-success {
5544
- background-color: var(--c-fill-success);
5615
+ .c-bg-fill-subdued {
5616
+ background-color: var(--c-fill-subdued);
5545
5617
  }
5546
5618
 
5547
5619
  .c-bg-fill-neutral {
@@ -5552,10 +5624,22 @@
5552
5624
  background-color: var(--c-fill-negative);
5553
5625
  }
5554
5626
 
5627
+ .c-bg-fill-accentAlt {
5628
+ background-color: var(--c-fill-accentAlt);
5629
+ }
5630
+
5555
5631
  .c-bg-fill-disabled {
5556
5632
  background-color: var(--c-fill-disabled);
5557
5633
  }
5558
5634
 
5635
+ .c-bg-fill-error {
5636
+ background-color: var(--c-fill-error);
5637
+ }
5638
+
5639
+ .c-bg-fill-success {
5640
+ background-color: var(--c-fill-success);
5641
+ }
5642
+
5559
5643
  .c-bg-fill-rental {
5560
5644
  background-color: var(--c-fill-rental);
5561
5645
  }
@@ -5588,10 +5672,6 @@
5588
5672
  color: var(--c-text-info);
5589
5673
  }
5590
5674
 
5591
- .c-text-infoAlt {
5592
- color: var(--c-text-infoAlt);
5593
- }
5594
-
5595
5675
  .c-text-error {
5596
5676
  color: var(--c-text-error);
5597
5677
  }
@@ -5608,10 +5688,6 @@
5608
5688
  color: var(--c-text-successAlt);
5609
5689
  }
5610
5690
 
5611
- .c-text-warning {
5612
- color: var(--c-text-warning);
5613
- }
5614
-
5615
5691
  .c-text-connect {
5616
5692
  color: var(--c-text-connect);
5617
5693
  }
@@ -5620,18 +5696,6 @@
5620
5696
  color: var(--c-text-connectAlt);
5621
5697
  }
5622
5698
 
5623
- .c-text-keyExchange {
5624
- color: var(--c-text-keyExchange);
5625
- }
5626
-
5627
- .c-text-picked {
5628
- color: var(--c-text-picked);
5629
- }
5630
-
5631
- .c-text-rideshare {
5632
- color: var(--c-text-rideshare);
5633
- }
5634
-
5635
5699
  .c-text-driver {
5636
5700
  color: var(--c-text-driver);
5637
5701
  }
@@ -5640,12 +5704,16 @@
5640
5704
  color: var(--c-text-owner);
5641
5705
  }
5642
5706
 
5643
- .c-text-disabled {
5644
- color: var(--c-text-disabled);
5707
+ .c-text-warning {
5708
+ color: var(--c-text-warning);
5645
5709
  }
5646
5710
 
5647
- .c-text-inversed {
5648
- color: var(--c-text-inversed);
5711
+ .c-text-infoAlt {
5712
+ color: var(--c-text-infoAlt);
5713
+ }
5714
+
5715
+ .c-text-disabled {
5716
+ color: var(--c-text-disabled);
5649
5717
  }
5650
5718
 
5651
5719
  .c-text-onAccent {
@@ -5676,10 +5744,50 @@
5676
5744
  color: var(--c-text-onPicked);
5677
5745
  }
5678
5746
 
5747
+ .c-text-keyExchange {
5748
+ color: var(--c-text-keyExchange);
5749
+ }
5750
+
5751
+ .c-text-picked {
5752
+ color: var(--c-text-picked);
5753
+ }
5754
+
5755
+ .c-text-rideshare {
5756
+ color: var(--c-text-rideshare);
5757
+ }
5758
+
5679
5759
  .c-text-onBase {
5680
5760
  color: var(--c-text-onBase);
5681
5761
  }
5682
5762
 
5763
+ .c-text-onSeasonLow {
5764
+ color: var(--c-text-onSeasonLow);
5765
+ }
5766
+
5767
+ .c-text-onSeasonMedium {
5768
+ color: var(--c-text-onSeasonMedium);
5769
+ }
5770
+
5771
+ .c-text-onSeasonHigh {
5772
+ color: var(--c-text-onSeasonHigh);
5773
+ }
5774
+
5775
+ .c-text-onSeasonVeryHigh {
5776
+ color: var(--c-text-onSeasonVeryHigh);
5777
+ }
5778
+
5779
+ .c-text-onRental {
5780
+ color: var(--c-text-onRental);
5781
+ }
5782
+
5783
+ .c-text-onRentalAlt {
5784
+ color: var(--c-text-onRentalAlt);
5785
+ }
5786
+
5787
+ .c-text-inversed {
5788
+ color: var(--c-text-inversed);
5789
+ }
5790
+
5683
5791
  .c-text-baseInteractive {
5684
5792
  color: var(--c-text-baseInteractive);
5685
5793
  }