@drivy/cobalt 0.42.2 → 0.42.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/cjs/tokens/palette.js +78 -60
  2. package/cjs/tokens/palette.js.map +1 -1
  3. package/cjs/tokens/theme.js +194 -167
  4. package/cjs/tokens/theme.js.map +1 -1
  5. package/components/ContainedIcon/index.js +3 -2
  6. package/components/ContainedIcon/index.js.map +1 -1
  7. package/components/Flag/index.js +3 -3
  8. package/components/Flag/index.js.map +1 -1
  9. package/components/Form/RadioWithDetails.js +2 -2
  10. package/components/Form/RadioWithDetails.js.map +1 -1
  11. package/components/Layout/Components/LayoutCard.js +15 -0
  12. package/components/Layout/Components/LayoutCard.js.map +1 -0
  13. package/components/Layout/Components/LayoutSection.js +11 -0
  14. package/components/Layout/Components/LayoutSection.js.map +1 -0
  15. package/components/Layout/Components/LayoutSectionTitle.js +8 -0
  16. package/components/Layout/Components/LayoutSectionTitle.js.map +1 -0
  17. package/components/Layout/Components/LayoutStack.js +44 -0
  18. package/components/Layout/Components/LayoutStack.js.map +1 -0
  19. package/index.js +4 -0
  20. package/index.js.map +1 -1
  21. package/package.json +1 -1
  22. package/styles/components/Form/RadioWithDetails.scss +14 -3
  23. package/styles/components/Icon/iconColors.scss +64 -52
  24. package/styles/components/Icon/index.scss +5 -1
  25. package/styles/components/PlateNumber/index.scss +4 -0
  26. package/styles/components/Tag/index.scss +4 -0
  27. package/styles/core/_colors-map.scss +180 -155
  28. package/styles/core/default-theme.scss +136 -111
  29. package/styles/core/palette.scss +54 -40
  30. package/styles/core/theme.scss +281 -231
  31. package/tokens/palette.js +78 -61
  32. package/tokens/palette.js.map +1 -1
  33. package/tokens/theme.js +194 -168
  34. package/tokens/theme.js.map +1 -1
  35. package/types/src/components/ContainedIcon/index.d.ts +2 -1
  36. package/types/src/components/Flag/index.d.ts +2 -1
  37. package/types/src/components/Icon/index.d.ts +1 -1
  38. package/types/src/index.d.ts +2 -0
  39. package/types/src/tokens/index.d.ts +174 -133
  40. package/utilities.css +370 -327
package/utilities.css CHANGED
@@ -7,31 +7,14 @@
7
7
  /**********************************/
8
8
 
9
9
  :root {
10
- --c-black-50: #544f53;
11
- --c-black-100: #363036;
12
- --c-black-300: #282127;
13
- --c-black-500: #191218;
14
- --c-black-1000: #000;
15
- --c-grey-100: #e3e2e3;
16
- --c-grey-300: #a9a6a9;
17
- --c-green-100: #cdebcb;
18
- --c-green-120: #bfe5bd;
19
- --c-green-150: #b1e0ae;
20
- --c-green-500: #5cbf54;
21
- --c-green-700: #479d3e;
22
- --c-green-900: #2f6d1c;
23
- --c-green-1000: #15310d;
24
- --c-navy-50: #f1f1f4;
25
- --c-navy-100: #e3e2e8;
26
- --c-navy-200: #bbb8c7;
27
- --c-navy-300: #7b728e;
28
- --c-navy-500: #362e53;
29
- --c-navy-700: #261a48;
30
- --c-navy-900: #0f0429;
31
- --c-orange-100: #f1d5b1;
32
- --c-orange-300: #eec186;
33
- --c-orange-500: #e39735;
34
- --c-orange-900: #462e0c;
10
+ --c-white: #ffffff;
11
+ --c-purple-100: #f6e5f5;
12
+ --c-purple-300: #ca6bc3;
13
+ --c-purple-400: #c04fb8;
14
+ --c-purple-500: #b01aa7;
15
+ --c-purple-700: #8d1586;
16
+ --c-purple-900: #5f1159;
17
+ --c-purple-2000: #d62929;
35
18
  --c-purpleDeep-100: #f2a6ee;
36
19
  --c-purpleDeep-300: #ea71e3;
37
20
  --c-purpleDeep-400: #c31dba;
@@ -39,38 +22,69 @@
39
22
  --c-purpleDeep-700: #73116e;
40
23
  --c-purpleDeep-900: #4b0b48;
41
24
  --c-purpleLight-100: #ffdcfd;
42
- --c-purple-100: #f6e5f5;
43
- --c-purple-300: #ca6bc3;
44
- --c-purple-400: #c04fb8;
45
- --c-purple-500: #b01aa7;
46
- --c-purple-700: #8d1586;
47
- --c-purple-900: #5f1159;
25
+ --c-navy-50: #f1f1f4;
26
+ --c-navy-100: #e3e2e8;
27
+ --c-navy-120: #cac7d2;
28
+ --c-navy-200: #bbb8c7;
29
+ --c-navy-300: #7b728e;
30
+ --c-navy-500: #362e53;
31
+ --c-navy-700: #261a48;
32
+ --c-navy-900: #0f0429;
33
+ --c-yellow-100: #ffeed1;
34
+ --c-yellow-300: #ffdda3;
35
+ --c-yellow-500: #ffc766;
36
+ --c-yellow-700: #c59548;
37
+ --c-yellow-900: #75592d;
38
+ --c-yellow-1000: #3b2e17;
39
+ --c-green-100: #cdebcb;
40
+ --c-green-120: #bfe5bd;
41
+ --c-green-150: #b1e0ae;
42
+ --c-green-500: #5cbf54;
43
+ --c-green-700: #479d3e;
44
+ --c-green-900: #2f6d1c;
45
+ --c-green-1000: #1b500a;
48
46
  --c-red-100: #fdeded;
49
47
  --c-red-120: #fbdada;
50
48
  --c-red-150: #f9c8c8;
51
- --c-red-300: #e38c8c;
49
+ --c-red-200: #e38c8c;
52
50
  --c-red-400: #ed4545;
53
51
  --c-red-500: #c71414;
54
52
  --c-red-700: #af1212;
53
+ --c-red-800: #764747;
55
54
  --c-red-900: #3f2424;
55
+ --c-orange-100: #f1d5b1;
56
+ --c-orange-300: #eec186;
57
+ --c-orange-500: #e39735;
58
+ --c-orange-900: #462e0c;
59
+ --c-black-50: #544f53;
60
+ --c-black-75: #443f44;
61
+ --c-black-100: #363036;
62
+ --c-black-300: #282127;
63
+ --c-black-500: #191218;
64
+ --c-black-1000: #000000;
65
+ --c-grey-50: #f8f9fa;
66
+ --c-grey-100: #e3e2e3;
67
+ --c-grey-300: #a9a6a9;
68
+ --c-grey-500: #918d91;
69
+ --c-blue-500: #79a3f3;
56
70
  --c-turquoise-50: #ecf9fb;
71
+ --c-turquoise-100: #cfeff5;
72
+ --c-turquoise-200: #afe5ee;
73
+ --c-turquoise-300: #8edbe7;
74
+ --c-turquoise-400: #76d3e2;
57
75
  --c-turquoise-500: #5ecbdd;
76
+ --c-turquoise-600: #56c6d9;
58
77
  --c-turquoise-700: #4cbed4;
78
+ --c-turquoise-800: #42b8cf;
59
79
  --c-turquoise-900: #31acc7;
60
- --c-white: #fff;
61
- --c-yellow-100: #ffeed1;
62
- --c-yellow-300: #ffdda3;
63
- --c-yellow-500: #ffc766;
64
- --c-yellow-700: #c59548;
65
- --c-yellow-900: #75592d;
66
- --c-yellow-1000: #3b2e17;
80
+ --c-turquoise-1200: #11505e;
67
81
  --c-season-100: #bdffac;
68
82
  --c-season-200: #94ea84;
69
83
  --c-season-300: #73c865;
70
84
  --c-season-400: #54a949;
71
85
  --c-season-700: #0b7011;
72
86
  --c-season-800: #005100;
73
- --c-season-900: #030;
87
+ --c-season-900: #003300;
74
88
  --c-season-1000: #001900;
75
89
  }
76
90
 
@@ -85,24 +99,14 @@
85
99
  :root {
86
100
  --c-background-primary: var(--c-white);
87
101
  --c-background-secondary: var(--c-white);
88
- --c-background-secondaryInteractive: var(--c-white);
89
- --c-background-secondaryInteractive--hover: var(--c-navy-50);
90
102
  --c-background-accent: var(--c-purple-500);
91
- --c-background-accentInteractive: var(--c-purple-500);
92
- --c-background-accentInteractive--hover: var(--c-purple-700);
93
103
  --c-background-accentAlt: var(--c-purple-100);
94
- --c-background-accentAltInteractive: var(--c-purple-100);
95
- --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
96
104
  --c-background-info: var(--c-yellow-100);
97
105
  --c-background-error: var(--c-red-500);
98
- --c-background-errorInteractive: var(--c-red-500);
99
- --c-background-errorInteractive--hover: var(--c-red-700);
100
106
  --c-background-errorAlt: var(--c-red-100);
101
107
  --c-background-success: var(--c-green-700);
102
108
  --c-background-successAlt: var(--c-green-100);
103
109
  --c-background-connect: var(--c-turquoise-500);
104
- --c-background-connectInteractive: var(--c-turquoise-500);
105
- --c-background-connectInteractive--hover: var(--c-turquoise-700);
106
110
  --c-background-connectAlt: var(--c-turquoise-50);
107
111
  --c-background-driver: var(--c-yellow-500);
108
112
  --c-background-owner: var(--c-navy-700);
@@ -112,149 +116,184 @@
112
116
  --c-background-seasonLow: var(--c-season-100);
113
117
  --c-background-seasonMedium: var(--c-season-200);
114
118
  --c-background-seasonHigh: var(--c-season-300);
115
- --c-background-seasonVeryHigh: var(--c-season-400);
116
- --c-background-rideShare: var(--c-black-1000);
119
+ --c-background-seasonVeryhigh: var(--c-season-400);
120
+ --c-background-rental: var(--c-turquoise-100);
121
+ --c-background-blocker: var(--c-navy-100);
122
+ --c-background-rideshare: var(--c-black-1000);
123
+ --c-background-secondaryInteractive: var(--c-white);
124
+ --c-background-secondaryInteractive--hover: var(--c-navy-50);
125
+ --c-background-accentInteractive: var(--c-purple-500);
126
+ --c-background-accentInteractive--hover: var(--c-purple-700);
127
+ --c-background-accentAltInteractive: var(--c-purple-100);
128
+ --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
129
+ --c-background-connectInteractive: var(--c-turquoise-500);
130
+ --c-background-connectInteractive--hover: var(--c-turquoise-700);
131
+ --c-background-errorInteractive: var(--c-red-500);
132
+ --c-background-errorInteractive--hover: var(--c-red-700);
117
133
  --c-text-base: var(--c-navy-700);
118
- --c-text-baseInteractive: var(--c-navy-700);
119
- --c-text-baseInteractive--hover: var(--c-navy-300);
120
134
  --c-text-subdued: var(--c-navy-300);
121
- --c-text-subduedInteractive: var(--c-navy-300);
122
- --c-text-subduedInteractive--hover: var(--c-navy-500);
123
135
  --c-text-accent: var(--c-purple-500);
124
- --c-text-accentInteractive: var(--c-purple-500);
125
- --c-text-accentInteractive--hover: var(--c-purple-700);
126
136
  --c-text-accentAlt: var(--c-purple-500);
127
- --c-text-accentAltInteractive: var(--c-purple-500);
128
- --c-text-accentAltInteractive--hover: var(--c-purple-700);
129
137
  --c-text-info: var(--c-yellow-900);
130
- --c-text-infoAlt: var(--c-yellow-500);
131
138
  --c-text-error: var(--c-red-500);
132
139
  --c-text-errorAlt: var(--c-red-500);
133
140
  --c-text-success: var(--c-green-700);
134
- --c-text-successAlt: var(--c-green-900);
135
- --c-text-warning: var(--c-orange-500);
141
+ --c-text-successAlt: var(--c-green-1000);
136
142
  --c-text-connect: var(--c-turquoise-500);
137
143
  --c-text-connectAlt: var(--c-turquoise-900);
138
144
  --c-text-driver: var(--c-navy-700);
139
145
  --c-text-owner: var(--c-white);
140
- --c-text-inversed: var(--c-white);
146
+ --c-text-warning: var(--c-orange-500);
147
+ --c-text-infoAlt: var(--c-yellow-700);
141
148
  --c-text-disabled: var(--c-navy-200);
142
149
  --c-text-onAccent: var(--c-white);
150
+ --c-text-onRideshare: var(--c-white);
143
151
  --c-text-onError: var(--c-white);
144
152
  --c-text-onSuccess: var(--c-white);
145
- --c-text-onConnect: var(--c-white);
146
- --c-text-onRideShare: var(--c-white);
147
- --c-buttonBackground-selected: var(--c-purple-100);
148
- --c-buttonBackground-destructiveInteractive: var(--c-red-100);
149
- --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
150
- --c-buttonBackground-destructiveInteractive--press: var(--c-red-150);
151
- --c-buttonBackground-disabled: var(--c-navy-100);
152
- --c-buttonBackground-primaryInteractive: var(--c-purple-500);
153
- --c-buttonBackground-primaryInteractive--hover: var(--c-purple-700);
154
- --c-buttonBackground-primaryInteractive--press: var(--c-purple-900);
155
- --c-buttonBackground-secondaryInteractive: var(--c-white);
156
- --c-buttonBackground-secondaryInteractive--hover: var(--c-white);
157
- --c-buttonBackground-secondaryInteractive--press: var(--c-white);
158
- --c-buttonBackground-success: var(--c-green-700);
159
- --c-buttonBackground-successAltInteractive: var(--c-green-100);
160
- --c-buttonBackground-successAltInteractive--hover: var(--c-green-120);
161
- --c-buttonBackground-successAltInteractive--press: var(--c-green-150);
162
- --c-buttonBackground-tertiaryInteractive: var(--c-white);
163
- --c-buttonBackground-tertiaryInteractive--hover: var(--c-white);
164
- --c-buttonBackground-tertiaryInteractive--press: var(--c-white);
165
- --c-buttonIcon-selected: var(--c-purple-500);
166
- --c-buttonIcon-destructiveInteractive: var(--c-red-500);
167
- --c-buttonIcon-destructiveInteractive--hover: var(--c-red-500);
168
- --c-buttonIcon-destructiveInteractive--press: var(--c-red-500);
169
- --c-buttonIcon-disabled: var(--c-navy-300);
170
- --c-buttonIcon-primaryInteractive: var(--c-white);
171
- --c-buttonIcon-primaryInteractive--hover: var(--c-white);
172
- --c-buttonIcon-primaryInteractive--press: var(--c-white);
173
- --c-buttonIcon-secondaryInteractive: var(--c-purple-500);
174
- --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-700);
175
- --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
176
- --c-buttonIcon-success: var(--c-white);
177
- --c-buttonIcon-successAltInteractive: var(--c-green-900);
178
- --c-buttonIcon-successAltInteractive--hover: var(--c-green-900);
179
- --c-buttonIcon-successAltInteractive--press: var(--c-green-900);
180
- --c-buttonIcon-tertiaryInteractive: var(--c-purple-500);
181
- --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-700);
182
- --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-900);
183
- --c-buttonLabel-selected: var(--c-purple-500);
184
- --c-buttonLabel-destructiveInteractive: var(--c-red-500);
185
- --c-buttonLabel-destructiveInteractive--hover: var(--c-red-500);
186
- --c-buttonLabel-destructiveInteractive--press: var(--c-red-500);
187
- --c-buttonLabel-disabled: var(--c-navy-300);
188
- --c-buttonLabel-primaryInteractive: var(--c-white);
189
- --c-buttonLabel-primaryInteractive--hover: var(--c-white);
190
- --c-buttonLabel-primaryInteractive--press: var(--c-white);
191
- --c-buttonLabel-secondaryInteractive: var(--c-purple-500);
192
- --c-buttonLabel-secondaryInteractive--hover: var(--c-purple-700);
193
- --c-buttonLabel-secondaryInteractive--press: var(--c-purple-900);
194
- --c-buttonLabel-success: var(--c-white);
195
- --c-buttonLabel-successAltInteractive: var(--c-green-900);
196
- --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
197
- --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
198
- --c-buttonLabel-tertiaryInteractive: var(--c-purple-500);
199
- --c-buttonLabel-tertiaryInteractive--hover: var(--c-purple-700);
200
- --c-buttonLabel-tertiaryInteractive--press: var(--c-purple-900);
153
+ --c-text-baseInteractive: var(--c-navy-700);
154
+ --c-text-baseInteractive--hover: var(--c-navy-900);
155
+ --c-text-subduedInteractive: var(--c-navy-300);
156
+ --c-text-subduedInteractive--hover: var(--c-navy-500);
157
+ --c-text-accentInteractive: var(--c-purple-500);
158
+ --c-text-accentInteractive--hover: var(--c-purple-700);
159
+ --c-text-accentAltInteractive: var(--c-purple-500);
160
+ --c-text-accentAltInteractive--hover: var(--c-purple-700);
201
161
  --c-icon-base: var(--c-navy-500);
202
- --c-icon-baseInteractive: var(--c-navy-500);
203
- --c-icon-baseInteractive--hover: var(--c-navy-700);
204
162
  --c-icon-subdued: var(--c-navy-300);
205
- --c-icon-subduedInteractive: var(--c-navy-300);
206
- --c-icon-subduedInteractive--hover: var(--c-navy-500);
207
163
  --c-icon-accent: var(--c-purple-500);
208
- --c-icon-accentInteractive: var(--c-purple-500);
209
- --c-icon-accentInteractive--hover: var(--c-purple-700);
210
164
  --c-icon-accentAlt: var(--c-purple-500);
211
- --c-icon-accentAltInteractive: var(--c-purple-500);
212
- --c-icon-accentAltInteractive--hover: var(--c-purple-700);
213
165
  --c-icon-info: var(--c-yellow-900);
214
- --c-icon-infoAlt: var(--c-yellow-500);
215
166
  --c-icon-error: var(--c-red-500);
216
167
  --c-icon-errorAlt: var(--c-red-500);
217
168
  --c-icon-success: var(--c-green-700);
218
- --c-icon-successAlt: var(--c-green-900);
219
- --c-icon-warning: var(--c-orange-500);
169
+ --c-icon-successAlt: var(--c-green-1000);
220
170
  --c-icon-connect: var(--c-turquoise-500);
221
171
  --c-icon-connectAlt: var(--c-turquoise-900);
222
172
  --c-icon-driver: var(--c-navy-700);
223
173
  --c-icon-owner: var(--c-white);
224
- --c-icon-inversed: var(--c-white);
225
174
  --c-icon-disabled: var(--c-navy-100);
226
- --c-icon-rideShare: var(--c-black-1000);
227
- --c-icon-onRideShare: var(--c-white);
175
+ --c-icon-disabledAlt: var(--c-navy-300);
176
+ --c-icon-warning: var(--c-orange-500);
177
+ --c-icon-infoAlt: var(--c-yellow-500);
178
+ --c-icon-onAccent: var(--c-white);
179
+ --c-icon-rideshare: var(--c-black-1000);
180
+ --c-icon-onRideshare: var(--c-white);
181
+ --c-icon-onSuccess: var(--c-white);
182
+ --c-icon-onError: var(--c-white);
183
+ --c-icon-baseInteractive: var(--c-navy-500);
184
+ --c-icon-baseInteractive--hover: var(--c-navy-700);
185
+ --c-icon-subduedInteractive: var(--c-navy-300);
186
+ --c-icon-subduedInteractive--hover: var(--c-navy-500);
187
+ --c-icon-accentInteractive: var(--c-purple-500);
188
+ --c-icon-accentInteractive--hover: var(--c-purple-700);
189
+ --c-icon-accentAltInteractive: var(--c-purple-500);
190
+ --c-icon-accentAltInteractive--hover: var(--c-purple-700);
228
191
  --c-stroke-base: var(--c-navy-100);
229
- --c-stroke-baseInteractive: var(--c-navy-100);
230
- --c-stroke-baseInteractive--hover: var(--c-navy-300);
231
- --c-stroke-baseInteractive--press: var(--c-navy-500);
232
- --c-stroke-strong: var(--c-navy-300);
233
- --c-stroke-strongInteractive: var(--c-navy-300);
234
- --c-stroke-strongInteractive--hover: var(--c-navy-500);
235
- --c-stroke-strongInteractive--press: var(--c-navy-700);
236
- --c-stroke-subdued: var(--c-navy-100);
192
+ --c-stroke-subdued: var(--c-navy-50);
237
193
  --c-stroke-accent: var(--c-purple-500);
238
- --c-stroke-accentInteractive: var(--c-purple-500);
239
- --c-stroke-accentInteractive--hover: var(--c-purple-700);
240
- --c-stroke-accentInteractive--press: var(--c-purple-900);
241
194
  --c-stroke-accentAlt: var(--c-purple-300);
242
- --c-stroke-error: var(--c-red-500);
243
- --c-stroke-errorAlt: var(--c-red-500);
244
195
  --c-stroke-success: var(--c-green-500);
245
196
  --c-stroke-successAlt: var(--c-green-500);
197
+ --c-stroke-error: var(--c-red-500);
198
+ --c-stroke-errorAlt: var(--c-red-500);
199
+ --c-stroke-strong: var(--c-navy-300);
246
200
  --c-stroke-onAccent: var(--c-white);
201
+ --c-stroke-rentals: var(--c-turquoise-500);
202
+ --c-stroke-blokers: var(--c-navy-300);
247
203
  --c-stroke-onError: var(--c-white);
204
+ --c-stroke-onSuccess: var(--c-white);
205
+ --c-stroke-baseInteractive: var(--c-navy-100);
206
+ --c-stroke-baseInteractive--hover: var(--c-navy-300);
207
+ --c-stroke-baseInteractive--press: var(--c-navy-500);
208
+ --c-stroke-accentInteractive: var(--c-purple-500);
209
+ --c-stroke-accentInteractive--hover: var(--c-purple-700);
210
+ --c-stroke-accentInteractive--press: var(--c-purple-900);
211
+ --c-buttonIcon-primary: var(--c-white);
212
+ --c-buttonIcon-secondary: var(--c-purple-500);
213
+ --c-buttonIcon-tertiary: var(--c-purple-500);
214
+ --c-buttonIcon-destructive: var(--c-red-500);
215
+ --c-buttonIcon-success: var(--c-white);
216
+ --c-buttonIcon-successAlt: var(--c-green-900);
217
+ --c-buttonIcon-disabled: var(--c-navy-300);
218
+ --c-buttonIcon-accentAlt: var(--c-purple-500);
219
+ --c-buttonIcon-primaryInteractive: var(--c-white);
220
+ --c-buttonIcon-primaryInteractive--hover: var(--c-white);
221
+ --c-buttonIcon-primaryInteractive--press: var(--c-white);
222
+ --c-buttonIcon-secondaryInteractive: var(--c-purple-500);
223
+ --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-700);
224
+ --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
225
+ --c-buttonIcon-tertiaryInteractive: var(--c-purple-500);
226
+ --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-700);
227
+ --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-900);
228
+ --c-buttonIcon-destructiveInteractive: var(--c-red-500);
229
+ --c-buttonIcon-destructiveInteractive--hover: var(--c-red-500);
230
+ --c-buttonIcon-destructiveInteractive--press: var(--c-red-500);
231
+ --c-buttonIcon-successAltInteractive: var(--c-green-900);
232
+ --c-buttonIcon-successAltInteractive--hover: var(--c-green-900);
233
+ --c-buttonIcon-successAltInteractive--press: var(--c-green-900);
234
+ --c-buttonLabel-primary: var(--c-white);
235
+ --c-buttonLabel-secondary: var(--c-purple-500);
236
+ --c-buttonLabel-tertiary: var(--c-purple-500);
237
+ --c-buttonLabel-disabled: var(--c-navy-300);
238
+ --c-buttonLabel-accentAlt: var(--c-purple-500);
239
+ --c-buttonLabel-destructive: var(--c-red-500);
240
+ --c-buttonLabel-success: var(--c-white);
241
+ --c-buttonLabel-successAlt: var(--c-green-900);
242
+ --c-buttonLabel-primaryInteractive: var(--c-white);
243
+ --c-buttonLabel-primaryInteractive--hover: var(--c-white);
244
+ --c-buttonLabel-primaryInteractive--press: var(--c-white);
245
+ --c-buttonLabel-secondaryInteractive: var(--c-purple-500);
246
+ --c-buttonLabel-secondaryInteractive--hover: var(--c-purple-700);
247
+ --c-buttonLabel-secondaryInteractive--press: var(--c-purple-900);
248
+ --c-buttonLabel-tertiaryInteractive: var(--c-purple-500);
249
+ --c-buttonLabel-tertiaryInteractive--hover: var(--c-purple-700);
250
+ --c-buttonLabel-tertiaryInteractive--press: var(--c-purple-900);
251
+ --c-buttonLabel-destructiveInteractive: var(--c-red-500);
252
+ --c-buttonLabel-destructiveInteractive--hover: var(--c-red-500);
253
+ --c-buttonLabel-destructiveInteractive--press: var(--c-red-500);
254
+ --c-buttonLabel-successAltInteractive: var(--c-green-900);
255
+ --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
256
+ --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
257
+ --c-buttonBackground-primary: var(--c-purple-500);
258
+ --c-buttonBackground-secondary: var(--c-white);
259
+ --c-buttonBackground-tertiary: var(--c-white);
260
+ --c-buttonBackground-accentAlt: var(--c-purple-100);
261
+ --c-buttonBackground-destructive: var(--c-red-100);
262
+ --c-buttonBackground-success: var(--c-green-700);
263
+ --c-buttonBackground-successAlt: var(--c-green-100);
264
+ --c-buttonBackground-disabled: var(--c-navy-100);
265
+ --c-buttonBackground-primaryInteractive: var(--c-purple-500);
266
+ --c-buttonBackground-primaryInteractive--hover: var(--c-purple-700);
267
+ --c-buttonBackground-primaryInteractive--press: var(--c-purple-900);
268
+ --c-buttonBackground-secondaryInteractive: var(--c-white);
269
+ --c-buttonBackground-secondaryInteractive--hover: var(--c-white);
270
+ --c-buttonBackground-secondaryInteractive--press: var(--c-white);
271
+ --c-buttonBackground-tertiaryInteractive: var(--c-white);
272
+ --c-buttonBackground-tertiaryInteractive--hover: var(--c-white);
273
+ --c-buttonBackground-tertiaryInteractive--press: var(--c-white);
274
+ --c-buttonBackground-destructiveInteractive: var(--c-red-100);
275
+ --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
276
+ --c-buttonBackground-destructiveInteractive--press: var(--c-red-150);
277
+ --c-buttonBackground-successAltInteractive: var(--c-green-100);
278
+ --c-buttonBackground-successAltInteractive--hover: var(--c-green-120);
279
+ --c-buttonBackground-successAltInteractive--press: var(--c-green-150);
248
280
  --c-fill-base: var(--c-navy-500);
281
+ --c-fill-accent: var(--c-purple-500);
249
282
  --c-fill-secondary: var(--c-yellow-500);
250
283
  --c-fill-subdued: var(--c-navy-100);
251
- --c-fill-accent: var(--c-purple-500);
284
+ --c-fill-neutral: var(--c-navy-50);
285
+ --c-fill-negative: var(--c-red-150);
252
286
  --c-fill-accentAlt: var(--c-purple-100);
287
+ --c-fill-disabled: var(--c-navy-300);
253
288
  --c-fill-error: var(--c-red-500);
254
- --c-fill-negative: var(--c-red-150);
255
289
  --c-fill-success: var(--c-green-500);
256
- --c-fill-disabled: var(--c-navy-300);
257
- --c-fill-neutral: var(--c-navy-50);
290
+ --c-fill-rentals: var(--c-turquoise-100);
291
+ --c-fill-blockers: var(--c-navy-120);
292
+ --c-illustrations-primary: var(--c-navy-500);
293
+ --c-illustrations-secondary: var(--c-white);
294
+ --c-illustrations-acccent1: var(--c-purple-500);
295
+ --c-illustrations-accent2: var(--c-blue-500);
296
+ --c-illustrations-foregroundDark: var(--c-white);
258
297
  }
259
298
 
260
299
  .c-sr-only {
@@ -5129,42 +5168,6 @@
5129
5168
  border-color: var(--c-stroke-base);
5130
5169
  }
5131
5170
 
5132
- .c-border-baseInteractive {
5133
- border-color: var(--c-stroke-baseInteractive);
5134
- }
5135
-
5136
- .c-border-baseInteractive:hover {
5137
- border-color: var(--c-stroke-baseInteractive--hover);
5138
- }
5139
-
5140
- .c-border-baseInteractive:focus {
5141
- border-color: var(--c-stroke-baseInteractive--hover);
5142
- }
5143
-
5144
- .c-border-baseInteractive:active {
5145
- border-color: var(--c-stroke-baseInteractive--press);
5146
- }
5147
-
5148
- .c-border-strong {
5149
- border-color: var(--c-stroke-strong);
5150
- }
5151
-
5152
- .c-border-strongInteractive {
5153
- border-color: var(--c-stroke-strongInteractive);
5154
- }
5155
-
5156
- .c-border-strongInteractive:hover {
5157
- border-color: var(--c-stroke-strongInteractive--hover);
5158
- }
5159
-
5160
- .c-border-strongInteractive:focus {
5161
- border-color: var(--c-stroke-strongInteractive--hover);
5162
- }
5163
-
5164
- .c-border-strongInteractive:active {
5165
- border-color: var(--c-stroke-strongInteractive--press);
5166
- }
5167
-
5168
5171
  .c-border-subdued {
5169
5172
  border-color: var(--c-stroke-subdued);
5170
5173
  }
@@ -5173,24 +5176,16 @@
5173
5176
  border-color: var(--c-stroke-accent);
5174
5177
  }
5175
5178
 
5176
- .c-border-accentInteractive {
5177
- border-color: var(--c-stroke-accentInteractive);
5178
- }
5179
-
5180
- .c-border-accentInteractive:hover {
5181
- border-color: var(--c-stroke-accentInteractive--hover);
5182
- }
5183
-
5184
- .c-border-accentInteractive:focus {
5185
- border-color: var(--c-stroke-accentInteractive--hover);
5179
+ .c-border-accentAlt {
5180
+ border-color: var(--c-stroke-accentAlt);
5186
5181
  }
5187
5182
 
5188
- .c-border-accentInteractive:active {
5189
- border-color: var(--c-stroke-accentInteractive--press);
5183
+ .c-border-success {
5184
+ border-color: var(--c-stroke-success);
5190
5185
  }
5191
5186
 
5192
- .c-border-accentAlt {
5193
- border-color: var(--c-stroke-accentAlt);
5187
+ .c-border-successAlt {
5188
+ border-color: var(--c-stroke-successAlt);
5194
5189
  }
5195
5190
 
5196
5191
  .c-border-error {
@@ -5201,72 +5196,76 @@
5201
5196
  border-color: var(--c-stroke-errorAlt);
5202
5197
  }
5203
5198
 
5204
- .c-border-success {
5205
- border-color: var(--c-stroke-success);
5206
- }
5207
-
5208
- .c-border-successAlt {
5209
- border-color: var(--c-stroke-successAlt);
5199
+ .c-border-strong {
5200
+ border-color: var(--c-stroke-strong);
5210
5201
  }
5211
5202
 
5212
5203
  .c-border-onAccent {
5213
5204
  border-color: var(--c-stroke-onAccent);
5214
5205
  }
5215
5206
 
5207
+ .c-border-rentals {
5208
+ border-color: var(--c-stroke-rentals);
5209
+ }
5210
+
5211
+ .c-border-blokers {
5212
+ border-color: var(--c-stroke-blokers);
5213
+ }
5214
+
5216
5215
  .c-border-onError {
5217
5216
  border-color: var(--c-stroke-onError);
5218
5217
  }
5219
5218
 
5220
- .c-bg-primary {
5221
- background-color: var(--c-background-primary);
5219
+ .c-border-onSuccess {
5220
+ border-color: var(--c-stroke-onSuccess);
5222
5221
  }
5223
5222
 
5224
- .c-bg-secondary {
5225
- background-color: var(--c-background-secondary);
5223
+ .c-border-baseInteractive {
5224
+ border-color: var(--c-stroke-baseInteractive);
5226
5225
  }
5227
5226
 
5228
- .c-bg-secondaryInteractive {
5229
- background-color: var(--c-background-secondaryInteractive);
5227
+ .c-border-baseInteractive:hover {
5228
+ border-color: var(--c-stroke-baseInteractive--hover);
5230
5229
  }
5231
5230
 
5232
- .c-bg-secondaryInteractive:hover {
5233
- background-color: var(--c-background-secondaryInteractive--hover);
5231
+ .c-border-baseInteractive:focus {
5232
+ border-color: var(--c-stroke-baseInteractive--hover);
5234
5233
  }
5235
5234
 
5236
- .c-bg-secondaryInteractive:focus {
5237
- background-color: var(--c-background-secondaryInteractive--hover);
5235
+ .c-border-baseInteractive:active {
5236
+ border-color: var(--c-stroke-baseInteractive--press);
5238
5237
  }
5239
5238
 
5240
- .c-bg-accent {
5241
- background-color: var(--c-background-accent);
5239
+ .c-border-accentInteractive {
5240
+ border-color: var(--c-stroke-accentInteractive);
5242
5241
  }
5243
5242
 
5244
- .c-bg-accentInteractive {
5245
- background-color: var(--c-background-accentInteractive);
5243
+ .c-border-accentInteractive:hover {
5244
+ border-color: var(--c-stroke-accentInteractive--hover);
5246
5245
  }
5247
5246
 
5248
- .c-bg-accentInteractive:hover {
5249
- background-color: var(--c-background-accentInteractive--hover);
5247
+ .c-border-accentInteractive:focus {
5248
+ border-color: var(--c-stroke-accentInteractive--hover);
5250
5249
  }
5251
5250
 
5252
- .c-bg-accentInteractive:focus {
5253
- background-color: var(--c-background-accentInteractive--hover);
5251
+ .c-border-accentInteractive:active {
5252
+ border-color: var(--c-stroke-accentInteractive--press);
5254
5253
  }
5255
5254
 
5256
- .c-bg-accentAlt {
5257
- background-color: var(--c-background-accentAlt);
5255
+ .c-bg-primary {
5256
+ background-color: var(--c-background-primary);
5258
5257
  }
5259
5258
 
5260
- .c-bg-accentAltInteractive {
5261
- background-color: var(--c-background-accentAltInteractive);
5259
+ .c-bg-secondary {
5260
+ background-color: var(--c-background-secondary);
5262
5261
  }
5263
5262
 
5264
- .c-bg-accentAltInteractive:hover {
5265
- background-color: var(--c-background-accentAltInteractive--hover);
5263
+ .c-bg-accent {
5264
+ background-color: var(--c-background-accent);
5266
5265
  }
5267
5266
 
5268
- .c-bg-accentAltInteractive:focus {
5269
- background-color: var(--c-background-accentAltInteractive--hover);
5267
+ .c-bg-accentAlt {
5268
+ background-color: var(--c-background-accentAlt);
5270
5269
  }
5271
5270
 
5272
5271
  .c-bg-info {
@@ -5277,18 +5276,6 @@
5277
5276
  background-color: var(--c-background-error);
5278
5277
  }
5279
5278
 
5280
- .c-bg-errorInteractive {
5281
- background-color: var(--c-background-errorInteractive);
5282
- }
5283
-
5284
- .c-bg-errorInteractive:hover {
5285
- background-color: var(--c-background-errorInteractive--hover);
5286
- }
5287
-
5288
- .c-bg-errorInteractive:focus {
5289
- background-color: var(--c-background-errorInteractive--hover);
5290
- }
5291
-
5292
5279
  .c-bg-errorAlt {
5293
5280
  background-color: var(--c-background-errorAlt);
5294
5281
  }
@@ -5305,18 +5292,6 @@
5305
5292
  background-color: var(--c-background-connect);
5306
5293
  }
5307
5294
 
5308
- .c-bg-connectInteractive {
5309
- background-color: var(--c-background-connectInteractive);
5310
- }
5311
-
5312
- .c-bg-connectInteractive:hover {
5313
- background-color: var(--c-background-connectInteractive--hover);
5314
- }
5315
-
5316
- .c-bg-connectInteractive:focus {
5317
- background-color: var(--c-background-connectInteractive--hover);
5318
- }
5319
-
5320
5295
  .c-bg-connectAlt {
5321
5296
  background-color: var(--c-background-connectAlt);
5322
5297
  }
@@ -5353,124 +5328,148 @@
5353
5328
  background-color: var(--c-background-seasonHigh);
5354
5329
  }
5355
5330
 
5356
- .c-bg-seasonVeryHigh {
5357
- background-color: var(--c-background-seasonVeryHigh);
5331
+ .c-bg-seasonVeryhigh {
5332
+ background-color: var(--c-background-seasonVeryhigh);
5358
5333
  }
5359
5334
 
5360
- .c-bg-rideShare {
5361
- background-color: var(--c-background-rideShare);
5335
+ .c-bg-rental {
5336
+ background-color: var(--c-background-rental);
5362
5337
  }
5363
5338
 
5364
- .c-bg-fill-base {
5365
- background-color: var(--c-fill-base);
5339
+ .c-bg-blocker {
5340
+ background-color: var(--c-background-blocker);
5366
5341
  }
5367
5342
 
5368
- .c-bg-fill-secondary {
5369
- background-color: var(--c-fill-secondary);
5343
+ .c-bg-rideshare {
5344
+ background-color: var(--c-background-rideshare);
5370
5345
  }
5371
5346
 
5372
- .c-bg-fill-subdued {
5373
- background-color: var(--c-fill-subdued);
5347
+ .c-bg-secondaryInteractive {
5348
+ background-color: var(--c-background-secondaryInteractive);
5374
5349
  }
5375
5350
 
5376
- .c-bg-fill-accent {
5377
- background-color: var(--c-fill-accent);
5351
+ .c-bg-secondaryInteractive:hover {
5352
+ background-color: var(--c-background-secondaryInteractive--hover);
5378
5353
  }
5379
5354
 
5380
- .c-bg-fill-accentAlt {
5381
- background-color: var(--c-fill-accentAlt);
5355
+ .c-bg-secondaryInteractive:focus {
5356
+ background-color: var(--c-background-secondaryInteractive--hover);
5382
5357
  }
5383
5358
 
5384
- .c-bg-fill-error {
5385
- background-color: var(--c-fill-error);
5359
+ .c-bg-accentInteractive {
5360
+ background-color: var(--c-background-accentInteractive);
5386
5361
  }
5387
5362
 
5388
- .c-bg-fill-negative {
5389
- background-color: var(--c-fill-negative);
5363
+ .c-bg-accentInteractive:hover {
5364
+ background-color: var(--c-background-accentInteractive--hover);
5390
5365
  }
5391
5366
 
5392
- .c-bg-fill-success {
5393
- background-color: var(--c-fill-success);
5367
+ .c-bg-accentInteractive:focus {
5368
+ background-color: var(--c-background-accentInteractive--hover);
5394
5369
  }
5395
5370
 
5396
- .c-bg-fill-disabled {
5397
- background-color: var(--c-fill-disabled);
5371
+ .c-bg-accentAltInteractive {
5372
+ background-color: var(--c-background-accentAltInteractive);
5398
5373
  }
5399
5374
 
5400
- .c-bg-fill-neutral {
5401
- background-color: var(--c-fill-neutral);
5375
+ .c-bg-accentAltInteractive:hover {
5376
+ background-color: var(--c-background-accentAltInteractive--hover);
5402
5377
  }
5403
5378
 
5404
- .c-text-base {
5405
- color: var(--c-text-base);
5379
+ .c-bg-accentAltInteractive:focus {
5380
+ background-color: var(--c-background-accentAltInteractive--hover);
5406
5381
  }
5407
5382
 
5408
- .c-text-baseInteractive {
5409
- color: var(--c-text-baseInteractive);
5383
+ .c-bg-connectInteractive {
5384
+ background-color: var(--c-background-connectInteractive);
5410
5385
  }
5411
5386
 
5412
- .c-text-baseInteractive:hover {
5413
- color: var(--c-text-baseInteractive--hover);
5387
+ .c-bg-connectInteractive:hover {
5388
+ background-color: var(--c-background-connectInteractive--hover);
5414
5389
  }
5415
5390
 
5416
- .c-text-baseInteractive:focus {
5417
- color: var(--c-text-baseInteractive--hover);
5391
+ .c-bg-connectInteractive:focus {
5392
+ background-color: var(--c-background-connectInteractive--hover);
5418
5393
  }
5419
5394
 
5420
- .c-text-subdued {
5421
- color: var(--c-text-subdued);
5395
+ .c-bg-errorInteractive {
5396
+ background-color: var(--c-background-errorInteractive);
5422
5397
  }
5423
5398
 
5424
- .c-text-subduedInteractive {
5425
- color: var(--c-text-subduedInteractive);
5399
+ .c-bg-errorInteractive:hover {
5400
+ background-color: var(--c-background-errorInteractive--hover);
5426
5401
  }
5427
5402
 
5428
- .c-text-subduedInteractive:hover {
5429
- color: var(--c-text-subduedInteractive--hover);
5403
+ .c-bg-errorInteractive:focus {
5404
+ background-color: var(--c-background-errorInteractive--hover);
5430
5405
  }
5431
5406
 
5432
- .c-text-subduedInteractive:focus {
5433
- color: var(--c-text-subduedInteractive--hover);
5407
+ .c-bg-fill-base {
5408
+ background-color: var(--c-fill-base);
5434
5409
  }
5435
5410
 
5436
- .c-text-accent {
5437
- color: var(--c-text-accent);
5411
+ .c-bg-fill-accent {
5412
+ background-color: var(--c-fill-accent);
5438
5413
  }
5439
5414
 
5440
- .c-text-accentInteractive {
5441
- color: var(--c-text-accentInteractive);
5415
+ .c-bg-fill-secondary {
5416
+ background-color: var(--c-fill-secondary);
5442
5417
  }
5443
5418
 
5444
- .c-text-accentInteractive:hover {
5445
- color: var(--c-text-accentInteractive--hover);
5419
+ .c-bg-fill-subdued {
5420
+ background-color: var(--c-fill-subdued);
5446
5421
  }
5447
5422
 
5448
- .c-text-accentInteractive:focus {
5449
- color: var(--c-text-accentInteractive--hover);
5423
+ .c-bg-fill-neutral {
5424
+ background-color: var(--c-fill-neutral);
5450
5425
  }
5451
5426
 
5452
- .c-text-accentAlt {
5453
- color: var(--c-text-accentAlt);
5427
+ .c-bg-fill-negative {
5428
+ background-color: var(--c-fill-negative);
5454
5429
  }
5455
5430
 
5456
- .c-text-accentAltInteractive {
5457
- color: var(--c-text-accentAltInteractive);
5431
+ .c-bg-fill-accentAlt {
5432
+ background-color: var(--c-fill-accentAlt);
5458
5433
  }
5459
5434
 
5460
- .c-text-accentAltInteractive:hover {
5461
- color: var(--c-text-accentAltInteractive--hover);
5435
+ .c-bg-fill-disabled {
5436
+ background-color: var(--c-fill-disabled);
5462
5437
  }
5463
5438
 
5464
- .c-text-accentAltInteractive:focus {
5465
- color: var(--c-text-accentAltInteractive--hover);
5439
+ .c-bg-fill-error {
5440
+ background-color: var(--c-fill-error);
5466
5441
  }
5467
5442
 
5468
- .c-text-info {
5469
- color: var(--c-text-info);
5443
+ .c-bg-fill-success {
5444
+ background-color: var(--c-fill-success);
5470
5445
  }
5471
5446
 
5472
- .c-text-infoAlt {
5473
- color: var(--c-text-infoAlt);
5447
+ .c-bg-fill-rentals {
5448
+ background-color: var(--c-fill-rentals);
5449
+ }
5450
+
5451
+ .c-bg-fill-blockers {
5452
+ background-color: var(--c-fill-blockers);
5453
+ }
5454
+
5455
+ .c-text-base {
5456
+ color: var(--c-text-base);
5457
+ }
5458
+
5459
+ .c-text-subdued {
5460
+ color: var(--c-text-subdued);
5461
+ }
5462
+
5463
+ .c-text-accent {
5464
+ color: var(--c-text-accent);
5465
+ }
5466
+
5467
+ .c-text-accentAlt {
5468
+ color: var(--c-text-accentAlt);
5469
+ }
5470
+
5471
+ .c-text-info {
5472
+ color: var(--c-text-info);
5474
5473
  }
5475
5474
 
5476
5475
  .c-text-error {
@@ -5489,10 +5488,6 @@
5489
5488
  color: var(--c-text-successAlt);
5490
5489
  }
5491
5490
 
5492
- .c-text-warning {
5493
- color: var(--c-text-warning);
5494
- }
5495
-
5496
5491
  .c-text-connect {
5497
5492
  color: var(--c-text-connect);
5498
5493
  }
@@ -5509,8 +5504,12 @@
5509
5504
  color: var(--c-text-owner);
5510
5505
  }
5511
5506
 
5512
- .c-text-inversed {
5513
- color: var(--c-text-inversed);
5507
+ .c-text-warning {
5508
+ color: var(--c-text-warning);
5509
+ }
5510
+
5511
+ .c-text-infoAlt {
5512
+ color: var(--c-text-infoAlt);
5514
5513
  }
5515
5514
 
5516
5515
  .c-text-disabled {
@@ -5521,6 +5520,10 @@
5521
5520
  color: var(--c-text-onAccent);
5522
5521
  }
5523
5522
 
5523
+ .c-text-onRideshare {
5524
+ color: var(--c-text-onRideshare);
5525
+ }
5526
+
5524
5527
  .c-text-onError {
5525
5528
  color: var(--c-text-onError);
5526
5529
  }
@@ -5529,12 +5532,52 @@
5529
5532
  color: var(--c-text-onSuccess);
5530
5533
  }
5531
5534
 
5532
- .c-text-onConnect {
5533
- color: var(--c-text-onConnect);
5535
+ .c-text-baseInteractive {
5536
+ color: var(--c-text-baseInteractive);
5534
5537
  }
5535
5538
 
5536
- .c-text-onRideShare {
5537
- color: var(--c-text-onRideShare);
5539
+ .c-text-baseInteractive:hover {
5540
+ color: var(--c-text-baseInteractive--hover);
5541
+ }
5542
+
5543
+ .c-text-baseInteractive:focus {
5544
+ color: var(--c-text-baseInteractive--hover);
5545
+ }
5546
+
5547
+ .c-text-subduedInteractive {
5548
+ color: var(--c-text-subduedInteractive);
5549
+ }
5550
+
5551
+ .c-text-subduedInteractive:hover {
5552
+ color: var(--c-text-subduedInteractive--hover);
5553
+ }
5554
+
5555
+ .c-text-subduedInteractive:focus {
5556
+ color: var(--c-text-subduedInteractive--hover);
5557
+ }
5558
+
5559
+ .c-text-accentInteractive {
5560
+ color: var(--c-text-accentInteractive);
5561
+ }
5562
+
5563
+ .c-text-accentInteractive:hover {
5564
+ color: var(--c-text-accentInteractive--hover);
5565
+ }
5566
+
5567
+ .c-text-accentInteractive:focus {
5568
+ color: var(--c-text-accentInteractive--hover);
5569
+ }
5570
+
5571
+ .c-text-accentAltInteractive {
5572
+ color: var(--c-text-accentAltInteractive);
5573
+ }
5574
+
5575
+ .c-text-accentAltInteractive:hover {
5576
+ color: var(--c-text-accentAltInteractive--hover);
5577
+ }
5578
+
5579
+ .c-text-accentAltInteractive:focus {
5580
+ color: var(--c-text-accentAltInteractive--hover);
5538
5581
  }
5539
5582
 
5540
5583
  @media (min-width: 480px) {