@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/styles/core/theme.scss CHANGED
@@ -5,24 +5,14 @@
5
5
  .use-cobalt-light-theme {
6
6
  --c-background-primary: var(--c-white);
7
7
  --c-background-secondary: var(--c-white);
8
- --c-background-secondaryInteractive: var(--c-white);
9
- --c-background-secondaryInteractive--hover: var(--c-navy-50);
10
8
  --c-background-accent: var(--c-purple-500);
11
- --c-background-accentInteractive: var(--c-purple-500);
12
- --c-background-accentInteractive--hover: var(--c-purple-700);
13
9
  --c-background-accentAlt: var(--c-purple-100);
14
- --c-background-accentAltInteractive: var(--c-purple-100);
15
- --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
16
10
  --c-background-info: var(--c-yellow-100);
17
11
  --c-background-error: var(--c-red-500);
18
- --c-background-errorInteractive: var(--c-red-500);
19
- --c-background-errorInteractive--hover: var(--c-red-700);
20
12
  --c-background-errorAlt: var(--c-red-100);
21
13
  --c-background-success: var(--c-green-700);
22
14
  --c-background-successAlt: var(--c-green-100);
23
15
  --c-background-connect: var(--c-turquoise-500);
24
- --c-background-connectInteractive: var(--c-turquoise-500);
25
- --c-background-connectInteractive--hover: var(--c-turquoise-700);
26
16
  --c-background-connectAlt: var(--c-turquoise-50);
27
17
  --c-background-driver: var(--c-yellow-500);
28
18
  --c-background-owner: var(--c-navy-700);
@@ -32,322 +22,382 @@
32
22
  --c-background-seasonLow: var(--c-season-100);
33
23
  --c-background-seasonMedium: var(--c-season-200);
34
24
  --c-background-seasonHigh: var(--c-season-300);
35
- --c-background-seasonVeryHigh: var(--c-season-400);
36
- --c-background-rideShare: var(--c-black-1000);
25
+ --c-background-seasonVeryhigh: var(--c-season-400);
26
+ --c-background-rental: var(--c-turquoise-100);
27
+ --c-background-blocker: var(--c-navy-100);
28
+ --c-background-rideshare: var(--c-black-1000);
29
+ --c-background-secondaryInteractive: var(--c-white);
30
+ --c-background-secondaryInteractive--hover: var(--c-navy-50);
31
+ --c-background-accentInteractive: var(--c-purple-500);
32
+ --c-background-accentInteractive--hover: var(--c-purple-700);
33
+ --c-background-accentAltInteractive: var(--c-purple-100);
34
+ --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
35
+ --c-background-connectInteractive: var(--c-turquoise-500);
36
+ --c-background-connectInteractive--hover: var(--c-turquoise-700);
37
+ --c-background-errorInteractive: var(--c-red-500);
38
+ --c-background-errorInteractive--hover: var(--c-red-700);
37
39
  --c-text-base: var(--c-navy-700);
38
- --c-text-baseInteractive: var(--c-navy-700);
39
- --c-text-baseInteractive--hover: var(--c-navy-300);
40
40
  --c-text-subdued: var(--c-navy-300);
41
- --c-text-subduedInteractive: var(--c-navy-300);
42
- --c-text-subduedInteractive--hover: var(--c-navy-500);
43
41
  --c-text-accent: var(--c-purple-500);
44
- --c-text-accentInteractive: var(--c-purple-500);
45
- --c-text-accentInteractive--hover: var(--c-purple-700);
46
42
  --c-text-accentAlt: var(--c-purple-500);
47
- --c-text-accentAltInteractive: var(--c-purple-500);
48
- --c-text-accentAltInteractive--hover: var(--c-purple-700);
49
43
  --c-text-info: var(--c-yellow-900);
50
- --c-text-infoAlt: var(--c-yellow-500);
51
44
  --c-text-error: var(--c-red-500);
52
45
  --c-text-errorAlt: var(--c-red-500);
53
46
  --c-text-success: var(--c-green-700);
54
- --c-text-successAlt: var(--c-green-900);
55
- --c-text-warning: var(--c-orange-500);
47
+ --c-text-successAlt: var(--c-green-1000);
56
48
  --c-text-connect: var(--c-turquoise-500);
57
49
  --c-text-connectAlt: var(--c-turquoise-900);
58
50
  --c-text-driver: var(--c-navy-700);
59
51
  --c-text-owner: var(--c-white);
60
- --c-text-inversed: var(--c-white);
52
+ --c-text-warning: var(--c-orange-500);
53
+ --c-text-infoAlt: var(--c-yellow-700);
61
54
  --c-text-disabled: var(--c-navy-200);
62
55
  --c-text-onAccent: var(--c-white);
56
+ --c-text-onRideshare: var(--c-white);
63
57
  --c-text-onError: var(--c-white);
64
58
  --c-text-onSuccess: var(--c-white);
65
- --c-text-onConnect: var(--c-white);
66
- --c-text-onRideShare: var(--c-white);
67
- --c-buttonBackground-selected: var(--c-purple-100);
68
- --c-buttonBackground-destructiveInteractive: var(--c-red-100);
69
- --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
70
- --c-buttonBackground-destructiveInteractive--press: var(--c-red-150);
71
- --c-buttonBackground-disabled: var(--c-navy-100);
72
- --c-buttonBackground-primaryInteractive: var(--c-purple-500);
73
- --c-buttonBackground-primaryInteractive--hover: var(--c-purple-700);
74
- --c-buttonBackground-primaryInteractive--press: var(--c-purple-900);
75
- --c-buttonBackground-secondaryInteractive: var(--c-white);
76
- --c-buttonBackground-secondaryInteractive--hover: var(--c-white);
77
- --c-buttonBackground-secondaryInteractive--press: var(--c-white);
78
- --c-buttonBackground-success: var(--c-green-700);
79
- --c-buttonBackground-successAltInteractive: var(--c-green-100);
80
- --c-buttonBackground-successAltInteractive--hover: var(--c-green-120);
81
- --c-buttonBackground-successAltInteractive--press: var(--c-green-150);
82
- --c-buttonBackground-tertiaryInteractive: var(--c-white);
83
- --c-buttonBackground-tertiaryInteractive--hover: var(--c-white);
84
- --c-buttonBackground-tertiaryInteractive--press: var(--c-white);
85
- --c-buttonIcon-selected: var(--c-purple-500);
86
- --c-buttonIcon-destructiveInteractive: var(--c-red-500);
87
- --c-buttonIcon-destructiveInteractive--hover: var(--c-red-500);
88
- --c-buttonIcon-destructiveInteractive--press: var(--c-red-500);
89
- --c-buttonIcon-disabled: var(--c-navy-300);
90
- --c-buttonIcon-primaryInteractive: var(--c-white);
91
- --c-buttonIcon-primaryInteractive--hover: var(--c-white);
92
- --c-buttonIcon-primaryInteractive--press: var(--c-white);
93
- --c-buttonIcon-secondaryInteractive: var(--c-purple-500);
94
- --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-700);
95
- --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
96
- --c-buttonIcon-success: var(--c-white);
97
- --c-buttonIcon-successAltInteractive: var(--c-green-900);
98
- --c-buttonIcon-successAltInteractive--hover: var(--c-green-900);
99
- --c-buttonIcon-successAltInteractive--press: var(--c-green-900);
100
- --c-buttonIcon-tertiaryInteractive: var(--c-purple-500);
101
- --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-700);
102
- --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-900);
103
- --c-buttonLabel-selected: var(--c-purple-500);
104
- --c-buttonLabel-destructiveInteractive: var(--c-red-500);
105
- --c-buttonLabel-destructiveInteractive--hover: var(--c-red-500);
106
- --c-buttonLabel-destructiveInteractive--press: var(--c-red-500);
107
- --c-buttonLabel-disabled: var(--c-navy-300);
108
- --c-buttonLabel-primaryInteractive: var(--c-white);
109
- --c-buttonLabel-primaryInteractive--hover: var(--c-white);
110
- --c-buttonLabel-primaryInteractive--press: var(--c-white);
111
- --c-buttonLabel-secondaryInteractive: var(--c-purple-500);
112
- --c-buttonLabel-secondaryInteractive--hover: var(--c-purple-700);
113
- --c-buttonLabel-secondaryInteractive--press: var(--c-purple-900);
114
- --c-buttonLabel-success: var(--c-white);
115
- --c-buttonLabel-successAltInteractive: var(--c-green-900);
116
- --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
117
- --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
118
- --c-buttonLabel-tertiaryInteractive: var(--c-purple-500);
119
- --c-buttonLabel-tertiaryInteractive--hover: var(--c-purple-700);
120
- --c-buttonLabel-tertiaryInteractive--press: var(--c-purple-900);
59
+ --c-text-baseInteractive: var(--c-navy-700);
60
+ --c-text-baseInteractive--hover: var(--c-navy-900);
61
+ --c-text-subduedInteractive: var(--c-navy-300);
62
+ --c-text-subduedInteractive--hover: var(--c-navy-500);
63
+ --c-text-accentInteractive: var(--c-purple-500);
64
+ --c-text-accentInteractive--hover: var(--c-purple-700);
65
+ --c-text-accentAltInteractive: var(--c-purple-500);
66
+ --c-text-accentAltInteractive--hover: var(--c-purple-700);
121
67
  --c-icon-base: var(--c-navy-500);
122
- --c-icon-baseInteractive: var(--c-navy-500);
123
- --c-icon-baseInteractive--hover: var(--c-navy-700);
124
68
  --c-icon-subdued: var(--c-navy-300);
125
- --c-icon-subduedInteractive: var(--c-navy-300);
126
- --c-icon-subduedInteractive--hover: var(--c-navy-500);
127
69
  --c-icon-accent: var(--c-purple-500);
128
- --c-icon-accentInteractive: var(--c-purple-500);
129
- --c-icon-accentInteractive--hover: var(--c-purple-700);
130
70
  --c-icon-accentAlt: var(--c-purple-500);
131
- --c-icon-accentAltInteractive: var(--c-purple-500);
132
- --c-icon-accentAltInteractive--hover: var(--c-purple-700);
133
71
  --c-icon-info: var(--c-yellow-900);
134
- --c-icon-infoAlt: var(--c-yellow-500);
135
72
  --c-icon-error: var(--c-red-500);
136
73
  --c-icon-errorAlt: var(--c-red-500);
137
74
  --c-icon-success: var(--c-green-700);
138
- --c-icon-successAlt: var(--c-green-900);
139
- --c-icon-warning: var(--c-orange-500);
75
+ --c-icon-successAlt: var(--c-green-1000);
140
76
  --c-icon-connect: var(--c-turquoise-500);
141
77
  --c-icon-connectAlt: var(--c-turquoise-900);
142
78
  --c-icon-driver: var(--c-navy-700);
143
79
  --c-icon-owner: var(--c-white);
144
- --c-icon-inversed: var(--c-white);
145
80
  --c-icon-disabled: var(--c-navy-100);
146
- --c-icon-rideShare: var(--c-black-1000);
147
- --c-icon-onRideShare: var(--c-white);
81
+ --c-icon-disabledAlt: var(--c-navy-300);
82
+ --c-icon-warning: var(--c-orange-500);
83
+ --c-icon-infoAlt: var(--c-yellow-500);
84
+ --c-icon-onAccent: var(--c-white);
85
+ --c-icon-rideshare: var(--c-black-1000);
86
+ --c-icon-onRideshare: var(--c-white);
87
+ --c-icon-onSuccess: var(--c-white);
88
+ --c-icon-onError: var(--c-white);
89
+ --c-icon-baseInteractive: var(--c-navy-500);
90
+ --c-icon-baseInteractive--hover: var(--c-navy-700);
91
+ --c-icon-subduedInteractive: var(--c-navy-300);
92
+ --c-icon-subduedInteractive--hover: var(--c-navy-500);
93
+ --c-icon-accentInteractive: var(--c-purple-500);
94
+ --c-icon-accentInteractive--hover: var(--c-purple-700);
95
+ --c-icon-accentAltInteractive: var(--c-purple-500);
96
+ --c-icon-accentAltInteractive--hover: var(--c-purple-700);
148
97
  --c-stroke-base: var(--c-navy-100);
149
- --c-stroke-baseInteractive: var(--c-navy-100);
150
- --c-stroke-baseInteractive--hover: var(--c-navy-300);
151
- --c-stroke-baseInteractive--press: var(--c-navy-500);
152
- --c-stroke-strong: var(--c-navy-300);
153
- --c-stroke-strongInteractive: var(--c-navy-300);
154
- --c-stroke-strongInteractive--hover: var(--c-navy-500);
155
- --c-stroke-strongInteractive--press: var(--c-navy-700);
156
- --c-stroke-subdued: var(--c-navy-100);
98
+ --c-stroke-subdued: var(--c-navy-50);
157
99
  --c-stroke-accent: var(--c-purple-500);
158
- --c-stroke-accentInteractive: var(--c-purple-500);
159
- --c-stroke-accentInteractive--hover: var(--c-purple-700);
160
- --c-stroke-accentInteractive--press: var(--c-purple-900);
161
100
  --c-stroke-accentAlt: var(--c-purple-300);
162
- --c-stroke-error: var(--c-red-500);
163
- --c-stroke-errorAlt: var(--c-red-500);
164
101
  --c-stroke-success: var(--c-green-500);
165
102
  --c-stroke-successAlt: var(--c-green-500);
103
+ --c-stroke-error: var(--c-red-500);
104
+ --c-stroke-errorAlt: var(--c-red-500);
105
+ --c-stroke-strong: var(--c-navy-300);
166
106
  --c-stroke-onAccent: var(--c-white);
107
+ --c-stroke-rentals: var(--c-turquoise-500);
108
+ --c-stroke-blokers: var(--c-navy-300);
167
109
  --c-stroke-onError: var(--c-white);
110
+ --c-stroke-onSuccess: var(--c-white);
111
+ --c-stroke-baseInteractive: var(--c-navy-100);
112
+ --c-stroke-baseInteractive--hover: var(--c-navy-300);
113
+ --c-stroke-baseInteractive--press: var(--c-navy-500);
114
+ --c-stroke-accentInteractive: var(--c-purple-500);
115
+ --c-stroke-accentInteractive--hover: var(--c-purple-700);
116
+ --c-stroke-accentInteractive--press: var(--c-purple-900);
117
+ --c-buttonIcon-primary: var(--c-white);
118
+ --c-buttonIcon-secondary: var(--c-purple-500);
119
+ --c-buttonIcon-tertiary: var(--c-purple-500);
120
+ --c-buttonIcon-destructive: var(--c-red-500);
121
+ --c-buttonIcon-success: var(--c-white);
122
+ --c-buttonIcon-successAlt: var(--c-green-900);
123
+ --c-buttonIcon-disabled: var(--c-navy-300);
124
+ --c-buttonIcon-accentAlt: var(--c-purple-500);
125
+ --c-buttonIcon-primaryInteractive: var(--c-white);
126
+ --c-buttonIcon-primaryInteractive--hover: var(--c-white);
127
+ --c-buttonIcon-primaryInteractive--press: var(--c-white);
128
+ --c-buttonIcon-secondaryInteractive: var(--c-purple-500);
129
+ --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-700);
130
+ --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
131
+ --c-buttonIcon-tertiaryInteractive: var(--c-purple-500);
132
+ --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-700);
133
+ --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-900);
134
+ --c-buttonIcon-destructiveInteractive: var(--c-red-500);
135
+ --c-buttonIcon-destructiveInteractive--hover: var(--c-red-500);
136
+ --c-buttonIcon-destructiveInteractive--press: var(--c-red-500);
137
+ --c-buttonIcon-successAltInteractive: var(--c-green-900);
138
+ --c-buttonIcon-successAltInteractive--hover: var(--c-green-900);
139
+ --c-buttonIcon-successAltInteractive--press: var(--c-green-900);
140
+ --c-buttonLabel-primary: var(--c-white);
141
+ --c-buttonLabel-secondary: var(--c-purple-500);
142
+ --c-buttonLabel-tertiary: var(--c-purple-500);
143
+ --c-buttonLabel-disabled: var(--c-navy-300);
144
+ --c-buttonLabel-accentAlt: var(--c-purple-500);
145
+ --c-buttonLabel-destructive: var(--c-red-500);
146
+ --c-buttonLabel-success: var(--c-white);
147
+ --c-buttonLabel-successAlt: var(--c-green-900);
148
+ --c-buttonLabel-primaryInteractive: var(--c-white);
149
+ --c-buttonLabel-primaryInteractive--hover: var(--c-white);
150
+ --c-buttonLabel-primaryInteractive--press: var(--c-white);
151
+ --c-buttonLabel-secondaryInteractive: var(--c-purple-500);
152
+ --c-buttonLabel-secondaryInteractive--hover: var(--c-purple-700);
153
+ --c-buttonLabel-secondaryInteractive--press: var(--c-purple-900);
154
+ --c-buttonLabel-tertiaryInteractive: var(--c-purple-500);
155
+ --c-buttonLabel-tertiaryInteractive--hover: var(--c-purple-700);
156
+ --c-buttonLabel-tertiaryInteractive--press: var(--c-purple-900);
157
+ --c-buttonLabel-destructiveInteractive: var(--c-red-500);
158
+ --c-buttonLabel-destructiveInteractive--hover: var(--c-red-500);
159
+ --c-buttonLabel-destructiveInteractive--press: var(--c-red-500);
160
+ --c-buttonLabel-successAltInteractive: var(--c-green-900);
161
+ --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
162
+ --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
163
+ --c-buttonBackground-primary: var(--c-purple-500);
164
+ --c-buttonBackground-secondary: var(--c-white);
165
+ --c-buttonBackground-tertiary: var(--c-white);
166
+ --c-buttonBackground-accentAlt: var(--c-purple-100);
167
+ --c-buttonBackground-destructive: var(--c-red-100);
168
+ --c-buttonBackground-success: var(--c-green-700);
169
+ --c-buttonBackground-successAlt: var(--c-green-100);
170
+ --c-buttonBackground-disabled: var(--c-navy-100);
171
+ --c-buttonBackground-primaryInteractive: var(--c-purple-500);
172
+ --c-buttonBackground-primaryInteractive--hover: var(--c-purple-700);
173
+ --c-buttonBackground-primaryInteractive--press: var(--c-purple-900);
174
+ --c-buttonBackground-secondaryInteractive: var(--c-white);
175
+ --c-buttonBackground-secondaryInteractive--hover: var(--c-white);
176
+ --c-buttonBackground-secondaryInteractive--press: var(--c-white);
177
+ --c-buttonBackground-tertiaryInteractive: var(--c-white);
178
+ --c-buttonBackground-tertiaryInteractive--hover: var(--c-white);
179
+ --c-buttonBackground-tertiaryInteractive--press: var(--c-white);
180
+ --c-buttonBackground-destructiveInteractive: var(--c-red-100);
181
+ --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
182
+ --c-buttonBackground-destructiveInteractive--press: var(--c-red-150);
183
+ --c-buttonBackground-successAltInteractive: var(--c-green-100);
184
+ --c-buttonBackground-successAltInteractive--hover: var(--c-green-120);
185
+ --c-buttonBackground-successAltInteractive--press: var(--c-green-150);
168
186
  --c-fill-base: var(--c-navy-500);
187
+ --c-fill-accent: var(--c-purple-500);
169
188
  --c-fill-secondary: var(--c-yellow-500);
170
189
  --c-fill-subdued: var(--c-navy-100);
171
- --c-fill-accent: var(--c-purple-500);
190
+ --c-fill-neutral: var(--c-navy-50);
191
+ --c-fill-negative: var(--c-red-150);
172
192
  --c-fill-accentAlt: var(--c-purple-100);
193
+ --c-fill-disabled: var(--c-navy-300);
173
194
  --c-fill-error: var(--c-red-500);
174
- --c-fill-negative: var(--c-red-150);
175
195
  --c-fill-success: var(--c-green-500);
176
- --c-fill-disabled: var(--c-navy-300);
177
- --c-fill-neutral: var(--c-navy-50);
196
+ --c-fill-rentals: var(--c-turquoise-100);
197
+ --c-fill-blockers: var(--c-navy-120);
198
+ --c-illustrations-primary: var(--c-navy-500);
199
+ --c-illustrations-secondary: var(--c-white);
200
+ --c-illustrations-acccent1: var(--c-purple-500);
201
+ --c-illustrations-accent2: var(--c-blue-500);
202
+ --c-illustrations-foregroundDark: var(--c-white);
178
203
  }
179
204
 
180
205
  .use-cobalt-dark-theme {
181
206
  --c-background-primary: var(--c-black-500);
182
207
  --c-background-secondary: var(--c-black-300);
183
- --c-background-secondaryInteractive: var(--c-black-300);
184
- --c-background-secondaryInteractive--hover: var(--c-black-300);
185
- --c-background-accent: var(--c-purpleDeep-400);
186
- --c-background-accentInteractive: var(--c-purpleDeep-400);
187
- --c-background-accentInteractive--hover: var(--c-purpleDeep-400);
208
+ --c-background-accent: var(--c-purpleDeep-500);
188
209
  --c-background-accentAlt: var(--c-purpleDeep-900);
189
- --c-background-accentAltInteractive: var(--c-purpleDeep-900);
190
- --c-background-accentAltInteractive--hover: var(--c-purpleDeep-900);
191
210
  --c-background-info: var(--c-yellow-1000);
192
211
  --c-background-error: var(--c-red-500);
193
- --c-background-errorInteractive: var(--c-red-500);
194
- --c-background-errorInteractive--hover: var(--c-red-500);
195
212
  --c-background-errorAlt: var(--c-red-900);
196
213
  --c-background-success: var(--c-green-700);
197
214
  --c-background-successAlt: var(--c-green-1000);
198
- --c-background-connect: var(--c-turquoise-500);
199
- --c-background-connectInteractive: var(--c-turquoise-500);
200
- --c-background-connectInteractive--hover: var(--c-turquoise-500);
215
+ --c-background-connect: var(--c-turquoise-700);
201
216
  --c-background-connectAlt: var(--c-turquoise-900);
202
217
  --c-background-driver: var(--c-yellow-500);
203
218
  --c-background-owner: var(--c-navy-700);
204
- --c-background-disabled: var(--c-black-50);
219
+ --c-background-disabled: var(--c-black-100);
205
220
  --c-background-neutral: var(--c-black-50);
206
221
  --c-background-neutralAlt: var(--c-black-100);
207
222
  --c-background-seasonLow: var(--c-season-700);
208
223
  --c-background-seasonMedium: var(--c-season-800);
209
224
  --c-background-seasonHigh: var(--c-season-900);
210
- --c-background-seasonVeryHigh: var(--c-season-1000);
211
- --c-background-rideShare: var(--c-black-1000);
225
+ --c-background-seasonVeryhigh: var(--c-season-1000);
226
+ --c-background-rental: var(--c-turquoise-1200);
227
+ --c-background-blocker: var(--c-black-75);
228
+ --c-background-rideshare: var(--c-black-1000);
229
+ --c-background-secondaryInteractive: var(--c-black-300);
230
+ --c-background-secondaryInteractive--hover: var(--c-black-300);
231
+ --c-background-accentInteractive: var(--c-purpleDeep-500);
232
+ --c-background-accentInteractive--hover: var(--c-purpleDeep-400);
233
+ --c-background-accentAltInteractive: var(--c-purpleDeep-900);
234
+ --c-background-accentAltInteractive--hover: var(--c-purpleDeep-900);
235
+ --c-background-connectInteractive: var(--c-turquoise-700);
236
+ --c-background-connectInteractive--hover: var(--c-turquoise-700);
237
+ --c-background-errorInteractive: var(--c-red-500);
238
+ --c-background-errorInteractive--hover: var(--c-red-500);
212
239
  --c-text-base: var(--c-grey-100);
213
- --c-text-baseInteractive: var(--c-grey-100);
214
- --c-text-baseInteractive--hover: var(--c-grey-300);
215
240
  --c-text-subdued: var(--c-grey-300);
216
- --c-text-subduedInteractive: var(--c-grey-300);
217
- --c-text-subduedInteractive--hover: var(--c-grey-300);
218
241
  --c-text-accent: var(--c-purpleDeep-400);
219
- --c-text-accentInteractive: var(--c-purpleDeep-400);
220
- --c-text-accentInteractive--hover: var(--c-purpleDeep-400);
221
242
  --c-text-accentAlt: var(--c-grey-100);
222
- --c-text-accentAltInteractive: var(--c-grey-100);
223
- --c-text-accentAltInteractive--hover: var(--c-grey-100);
224
243
  --c-text-info: var(--c-yellow-300);
225
- --c-text-infoAlt: var(--c-yellow-700);
226
244
  --c-text-error: var(--c-red-400);
227
245
  --c-text-errorAlt: var(--c-red-500);
228
246
  --c-text-success: var(--c-green-700);
229
247
  --c-text-successAlt: var(--c-green-100);
230
- --c-text-warning: var(--c-orange-300);
231
- --c-text-connect: var(--c-turquoise-500);
232
- --c-text-connectAlt: var(--c-turquoise-50);
248
+ --c-text-connect: var(--c-turquoise-700);
249
+ --c-text-connectAlt: var(--c-white);
233
250
  --c-text-driver: var(--c-navy-700);
234
251
  --c-text-owner: var(--c-grey-100);
235
- --c-text-inversed: var(--c-white);
236
- --c-text-disabled: var(--c-navy-200);
237
- --c-text-onAccent: var(--c-white);
252
+ --c-text-warning: var(--c-orange-300);
253
+ --c-text-infoAlt: var(--c-yellow-700);
254
+ --c-text-disabled: var(--c-black-50);
255
+ --c-text-onAccent: var(--c-grey-100);
256
+ --c-text-onRideshare: var(--c-white);
238
257
  --c-text-onError: var(--c-white);
239
258
  --c-text-onSuccess: var(--c-white);
240
- --c-text-onConnect: var(--c-white);
241
- --c-text-onRideShare: var(--c-white);
242
- --c-buttonBackground-selected: var(--c-purpleDeep-900);
243
- --c-buttonBackground-destructiveInteractive: var(--c-red-900);
244
- --c-buttonBackground-destructiveInteractive--hover: var(--c-red-900);
245
- --c-buttonBackground-destructiveInteractive--press: var(--c-red-900);
246
- --c-buttonBackground-disabled: var(--c-black-50);
247
- --c-buttonBackground-primaryInteractive: var(--c-purpleDeep-500);
248
- --c-buttonBackground-primaryInteractive--hover: var(--c-purpleDeep-500);
249
- --c-buttonBackground-primaryInteractive--press: var(--c-purpleDeep-500);
250
- --c-buttonBackground-secondaryInteractive: var(--c-black-500);
251
- --c-buttonBackground-secondaryInteractive--hover: var(--c-black-500);
252
- --c-buttonBackground-secondaryInteractive--press: var(--c-black-500);
253
- --c-buttonBackground-success: var(--c-green-900);
254
- --c-buttonBackground-successAltInteractive: var(--c-green-1000);
255
- --c-buttonBackground-successAltInteractive--hover: var(--c-green-1000);
256
- --c-buttonBackground-successAltInteractive--press: var(--c-green-1000);
257
- --c-buttonBackground-tertiaryInteractive: var(--c-white);
258
- --c-buttonBackground-tertiaryInteractive--hover: var(--c-white);
259
- --c-buttonBackground-tertiaryInteractive--press: var(--c-white);
260
- --c-buttonIcon-selected: var(--c-grey-100);
261
- --c-buttonIcon-destructiveInteractive: var(--c-red-200);
262
- --c-buttonIcon-destructiveInteractive--hover: var(--c-red-200);
263
- --c-buttonIcon-destructiveInteractive--press: var(--c-red-200);
264
- --c-buttonIcon-disabled: var(--c-grey-300);
265
- --c-buttonIcon-primaryInteractive: var(--c-grey-100);
266
- --c-buttonIcon-primaryInteractive--hover: var(--c-grey-100);
267
- --c-buttonIcon-primaryInteractive--press: var(--c-grey-100);
268
- --c-buttonIcon-secondaryInteractive: var(--c-purpleDeep-400);
269
- --c-buttonIcon-secondaryInteractive--hover: var(--c-purpleDeep-400);
270
- --c-buttonIcon-secondaryInteractive--press: var(--c-purpleDeep-400);
271
- --c-buttonIcon-success: var(--c-green-100);
272
- --c-buttonIcon-successAltInteractive: var(--c-green-100);
273
- --c-buttonIcon-successAltInteractive--hover: var(--c-green-100);
274
- --c-buttonIcon-successAltInteractive--press: var(--c-green-100);
275
- --c-buttonIcon-tertiaryInteractive: var(--c-purpleDeep-400);
276
- --c-buttonIcon-tertiaryInteractive--hover: var(--c-purpleDeep-400);
277
- --c-buttonIcon-tertiaryInteractive--press: var(--c-purpleDeep-400);
278
- --c-buttonLabel-selected: var(--c-grey-100);
279
- --c-buttonLabel-destructiveInteractive: var(--c-red-200);
280
- --c-buttonLabel-destructiveInteractive--hover: var(--c-red-200);
281
- --c-buttonLabel-destructiveInteractive--press: var(--c-red-200);
282
- --c-buttonLabel-disabled: var(--c-grey-300);
283
- --c-buttonLabel-primaryInteractive: var(--c-grey-100);
284
- --c-buttonLabel-primaryInteractive--hover: var(--c-grey-100);
285
- --c-buttonLabel-primaryInteractive--press: var(--c-grey-100);
286
- --c-buttonLabel-secondaryInteractive: var(--c-purpleDeep-400);
287
- --c-buttonLabel-secondaryInteractive--hover: var(--c-purpleDeep-400);
288
- --c-buttonLabel-secondaryInteractive--press: var(--c-purpleDeep-400);
289
- --c-buttonLabel-success: var(--c-green-100);
290
- --c-buttonLabel-successAltInteractive: var(--c-green-100);
291
- --c-buttonLabel-successAltInteractive--hover: var(--c-green-100);
292
- --c-buttonLabel-successAltInteractive--press: var(--c-green-100);
293
- --c-buttonLabel-tertiaryInteractive: var(--c-purpleDeep-400);
294
- --c-buttonLabel-tertiaryInteractive--hover: var(--c-purpleDeep-400);
295
- --c-buttonLabel-tertiaryInteractive--press: var(--c-purpleDeep-400);
259
+ --c-text-baseInteractive: var(--c-grey-100);
260
+ --c-text-baseInteractive--hover: var(--c-grey-300);
261
+ --c-text-subduedInteractive: var(--c-grey-300);
262
+ --c-text-subduedInteractive--hover: var(--c-grey-300);
263
+ --c-text-accentInteractive: var(--c-purpleDeep-400);
264
+ --c-text-accentInteractive--hover: var(--c-purpleDeep-400);
265
+ --c-text-accentAltInteractive: var(--c-grey-100);
266
+ --c-text-accentAltInteractive--hover: var(--c-grey-100);
296
267
  --c-icon-base: var(--c-grey-100);
297
- --c-icon-baseInteractive: var(--c-grey-100);
298
- --c-icon-baseInteractive--hover: var(--c-grey-100);
299
268
  --c-icon-subdued: var(--c-grey-300);
300
- --c-icon-subduedInteractive: var(--c-grey-300);
301
- --c-icon-subduedInteractive--hover: var(--c-grey-300);
302
269
  --c-icon-accent: var(--c-purpleDeep-400);
303
- --c-icon-accentInteractive: var(--c-purpleDeep-400);
304
- --c-icon-accentInteractive--hover: var(--c-);
305
270
  --c-icon-accentAlt: var(--c-grey-100);
306
- --c-icon-accentAltInteractive: var(--c-grey-100);
307
- --c-icon-accentAltInteractive--hover: var(--c-grey-100);
308
271
  --c-icon-info: var(--c-yellow-300);
309
- --c-icon-infoAlt: var(--c-yellow-700);
310
272
  --c-icon-error: var(--c-red-400);
311
273
  --c-icon-errorAlt: var(--c-red-200);
312
274
  --c-icon-success: var(--c-green-700);
313
275
  --c-icon-successAlt: var(--c-green-100);
314
- --c-icon-warning: var(--c-orange-300);
315
- --c-icon-connect: var(--c-white);
276
+ --c-icon-connect: var(--c-turquoise-700);
316
277
  --c-icon-connectAlt: var(--c-turquoise-50);
317
- --c-icon-driver: var(--c-);
278
+ --c-icon-driver: var(--c-navy-700);
318
279
  --c-icon-owner: var(--c-white);
319
- --c-icon-inversed: var(--c-white);
320
280
  --c-icon-disabled: var(--c-black-50);
321
- --c-icon-rideShare: var(--c-white);
322
- --c-icon-onRideShare: var(--c-white);
281
+ --c-icon-disabledAlt: var(--c-grey-500);
282
+ --c-icon-warning: var(--c-orange-300);
283
+ --c-icon-infoAlt: var(--c-yellow-700);
284
+ --c-icon-onAccent: var(--c-white);
285
+ --c-icon-rideshare: var(--c-white);
286
+ --c-icon-onRideshare: var(--c-white);
287
+ --c-icon-onSuccess: var(--c-white);
288
+ --c-icon-onError: var(--c-white);
289
+ --c-icon-baseInteractive: var(--c-grey-100);
290
+ --c-icon-baseInteractive--hover: var(--c-grey-100);
291
+ --c-icon-subduedInteractive: var(--c-grey-300);
292
+ --c-icon-subduedInteractive--hover: var(--c-grey-300);
293
+ --c-icon-accentInteractive: var(--c-purpleDeep-400);
294
+ --c-icon-accentInteractive--hover: var(--c-purpleDeep-400);
295
+ --c-icon-accentAltInteractive: var(--c-grey-100);
296
+ --c-icon-accentAltInteractive--hover: var(--c-grey-100);
323
297
  --c-stroke-base: var(--c-black-50);
298
+ --c-stroke-subdued: var(--c-black-100);
299
+ --c-stroke-accent: var(--c-purpleDeep-500);
300
+ --c-stroke-accentAlt: var(--c-purpleDeep-400);
301
+ --c-stroke-success: var(--c-green-700);
302
+ --c-stroke-successAlt: var(--c-green-700);
303
+ --c-stroke-error: var(--c-red-200);
304
+ --c-stroke-errorAlt: var(--c-red-200);
305
+ --c-stroke-strong: var(--c-navy-200);
306
+ --c-stroke-onAccent: var(--c-grey-100);
307
+ --c-stroke-rentals: var(--c-turquoise-500);
308
+ --c-stroke-blokers: var(--c-grey-300);
309
+ --c-stroke-onError: var(--c-white);
310
+ --c-stroke-onSuccess: var(--c-white);
324
311
  --c-stroke-baseInteractive: var(--c-black-50);
325
312
  --c-stroke-baseInteractive--hover: var(--c-purpleDeep-400);
326
313
  --c-stroke-baseInteractive--press: var(--c-purpleDeep-400);
327
- --c-stroke-strong: var(--c-navy-200);
328
- --c-stroke-strongInteractive: var(--c-navy-200);
329
- --c-stroke-strongInteractive--hover: var(--c-purpleDeep-400);
330
- --c-stroke-strongInteractive--press: var(--c-purpleDeep-400);
331
- --c-stroke-subdued: var(--c-black-50);
332
- --c-stroke-accent: var(--c-purpleDeep-400);
333
- --c-stroke-accentInteractive: var(--c-purpleDeep-400);
314
+ --c-stroke-accentInteractive: var(--c-purpleDeep-500);
334
315
  --c-stroke-accentInteractive--hover: var(--c-purpleDeep-400);
335
316
  --c-stroke-accentInteractive--press: var(--c-purpleDeep-400);
336
- --c-stroke-accentAlt: var(--c-purpleDeep-700);
337
- --c-stroke-error: var(--c-red-200);
338
- --c-stroke-errorAlt: var(--c-red-200);
339
- --c-stroke-success: var(--c-green-700);
340
- --c-stroke-successAlt: var(--c-green-700);
341
- --c-stroke-onAccent: var(--c-white);
342
- --c-stroke-onError: var(--c-white);
343
- --c-fill-base: var(--c-grey-100);
317
+ --c-buttonIcon-primary: var(--c-grey-100);
318
+ --c-buttonIcon-secondary: var(--c-purpleDeep-400);
319
+ --c-buttonIcon-tertiary: var(--c-white);
320
+ --c-buttonIcon-destructive: var(--c-red-200);
321
+ --c-buttonIcon-success: var(--c-green-100);
322
+ --c-buttonIcon-successAlt: var(--c-green-100);
323
+ --c-buttonIcon-disabled: var(--c-grey-300);
324
+ --c-buttonIcon-accentAlt: var(--c-grey-100);
325
+ --c-buttonIcon-primaryInteractive: var(--c-grey-100);
326
+ --c-buttonIcon-primaryInteractive--hover: var(--c-white);
327
+ --c-buttonIcon-primaryInteractive--press: var(--c-white);
328
+ --c-buttonIcon-secondaryInteractive: var(--c-purpleDeep-400);
329
+ --c-buttonIcon-secondaryInteractive--hover: var(--c-purpleDeep-700);
330
+ --c-buttonIcon-secondaryInteractive--press: var(--c-purpleDeep-900);
331
+ --c-buttonIcon-tertiaryInteractive: var(--c-white);
332
+ --c-buttonIcon-tertiaryInteractive--hover: var(--c-purpleDeep-700);
333
+ --c-buttonIcon-tertiaryInteractive--press: var(--c-purpleDeep-900);
334
+ --c-buttonIcon-destructiveInteractive: var(--c-red-200);
335
+ --c-buttonIcon-destructiveInteractive--hover: var(--c-red-200);
336
+ --c-buttonIcon-destructiveInteractive--press: var(--c-red-200);
337
+ --c-buttonIcon-successAltInteractive: var(--c-green-100);
338
+ --c-buttonIcon-successAltInteractive--hover: var(--c-green-100);
339
+ --c-buttonIcon-successAltInteractive--press: var(--c-green-100);
340
+ --c-buttonLabel-primary: var(--c-grey-100);
341
+ --c-buttonLabel-secondary: var(--c-purpleDeep-400);
342
+ --c-buttonLabel-tertiary: var(--c-white);
343
+ --c-buttonLabel-disabled: var(--c-grey-300);
344
+ --c-buttonLabel-accentAlt: var(--c-grey-100);
345
+ --c-buttonLabel-destructive: var(--c-red-200);
346
+ --c-buttonLabel-success: var(--c-green-100);
347
+ --c-buttonLabel-successAlt: var(--c-green-100);
348
+ --c-buttonLabel-primaryInteractive: var(--c-grey-100);
349
+ --c-buttonLabel-primaryInteractive--hover: var(--c-white);
350
+ --c-buttonLabel-primaryInteractive--press: var(--c-white);
351
+ --c-buttonLabel-secondaryInteractive: var(--c-purpleDeep-400);
352
+ --c-buttonLabel-secondaryInteractive--hover: var(--c-purpleDeep-700);
353
+ --c-buttonLabel-secondaryInteractive--press: var(--c-purpleDeep-900);
354
+ --c-buttonLabel-tertiaryInteractive: var(--c-white);
355
+ --c-buttonLabel-tertiaryInteractive--hover: var(--c-purpleDeep-700);
356
+ --c-buttonLabel-tertiaryInteractive--press: var(--c-purpleDeep-900);
357
+ --c-buttonLabel-destructiveInteractive: var(--c-red-200);
358
+ --c-buttonLabel-destructiveInteractive--hover: var(--c-red-200);
359
+ --c-buttonLabel-destructiveInteractive--press: var(--c-red-200);
360
+ --c-buttonLabel-successAltInteractive: var(--c-green-100);
361
+ --c-buttonLabel-successAltInteractive--hover: var(--c-green-100);
362
+ --c-buttonLabel-successAltInteractive--press: var(--c-green-100);
363
+ --c-buttonBackground-primary: var(--c-purpleDeep-500);
364
+ --c-buttonBackground-secondary: var(--c-black-500);
365
+ --c-buttonBackground-tertiary: var(--c-white);
366
+ --c-buttonBackground-accentAlt: var(--c-purpleDeep-900);
367
+ --c-buttonBackground-destructive: var(--c-red-900);
368
+ --c-buttonBackground-success: var(--c-green-900);
369
+ --c-buttonBackground-successAlt: var(--c-green-1000);
370
+ --c-buttonBackground-disabled: var(--c-black-50);
371
+ --c-buttonBackground-primaryInteractive: var(--c-purpleDeep-500);
372
+ --c-buttonBackground-primaryInteractive--hover: var(--c-purpleDeep-700);
373
+ --c-buttonBackground-primaryInteractive--press: var(--c-purpleDeep-900);
374
+ --c-buttonBackground-secondaryInteractive: var(--c-black-500);
375
+ --c-buttonBackground-secondaryInteractive--hover: var(--c-black-500);
376
+ --c-buttonBackground-secondaryInteractive--press: var(--c-black-500);
377
+ --c-buttonBackground-tertiaryInteractive: var(--c-white);
378
+ --c-buttonBackground-tertiaryInteractive--hover: var(--c-black-500);
379
+ --c-buttonBackground-tertiaryInteractive--press: var(--c-black-500);
380
+ --c-buttonBackground-destructiveInteractive: var(--c-red-900);
381
+ --c-buttonBackground-destructiveInteractive--hover: var(--c-red-800);
382
+ --c-buttonBackground-destructiveInteractive--press: var(--c-red-900);
383
+ --c-buttonBackground-successAltInteractive: var(--c-green-1000);
384
+ --c-buttonBackground-successAltInteractive--hover: var(--c-green-900);
385
+ --c-buttonBackground-successAltInteractive--press: var(--c-green-1000);
386
+ --c-fill-base: var(--c-grey-300);
387
+ --c-fill-accent: var(--c-purpleDeep-400);
344
388
  --c-fill-secondary: var(--c-yellow-500);
345
389
  --c-fill-subdued: var(--c-black-50);
346
- --c-fill-accent: var(--c-purpleDeep-400);
390
+ --c-fill-neutral: var(--c-black-100);
391
+ --c-fill-negative: var(--c-red-800);
347
392
  --c-fill-accentAlt: var(--c-purpleDeep-900);
393
+ --c-fill-disabled: var(--c-grey-300);
348
394
  --c-fill-error: var(--c-red-500);
349
- --c-fill-negative: var(--c-red-900);
350
395
  --c-fill-success: var(--c-green-700);
351
- --c-fill-disabled: var(--c-grey-300);
352
- --c-fill-neutral: var(--c-black-100);
396
+ --c-fill-rentals: var(--c-turquoise-1200);
397
+ --c-fill-blockers: var(--c-black-75);
398
+ --c-illustrations-primary: var(--c-white);
399
+ --c-illustrations-secondary: var(--c-white);
400
+ --c-illustrations-acccent1: var(--c-white);
401
+ --c-illustrations-accent2: var(--c-white);
402
+ --c-illustrations-foregroundDark: var(--c-white);
353
403
  }