@drivy/cobalt 0.42.3 → 0.42.5

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 (39) 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 +196 -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/PlateNumber/index.scss +4 -0
  25. package/styles/components/Tag/index.scss +4 -0
  26. package/styles/core/_colors-map.scss +180 -153
  27. package/styles/core/default-theme.scss +136 -109
  28. package/styles/core/palette.scss +54 -40
  29. package/styles/core/theme.scss +281 -227
  30. package/tokens/palette.js +78 -61
  31. package/tokens/palette.js.map +1 -1
  32. package/tokens/theme.js +196 -168
  33. package/tokens/theme.js.map +1 -1
  34. package/types/src/components/ContainedIcon/index.d.ts +2 -1
  35. package/types/src/components/Flag/index.d.ts +2 -1
  36. package/types/src/components/Icon/index.d.ts +1 -1
  37. package/types/src/index.d.ts +2 -0
  38. package/types/src/tokens/index.d.ts +176 -133
  39. package/utilities.css +374 -321
package/styles/core/_colors-map.scss CHANGED
@@ -6,34 +6,14 @@ $theme-colors-map: (
6
6
  background: (
7
7
  primary: var(--c-background-primary),
8
8
  secondary: var(--c-background-secondary),
9
- secondaryInteractive: (
10
- DEFAULT: var(--c-background-secondaryInteractive),
11
- hover: var(--c-background-secondaryInteractive--hover)
12
- ),
13
9
  accent: var(--c-background-accent),
14
- accentInteractive: (
15
- DEFAULT: var(--c-background-accentInteractive),
16
- hover: var(--c-background-accentInteractive--hover)
17
- ),
18
10
  accentAlt: var(--c-background-accentAlt),
19
- accentAltInteractive: (
20
- DEFAULT: var(--c-background-accentAltInteractive),
21
- hover: var(--c-background-accentAltInteractive--hover)
22
- ),
23
11
  info: var(--c-background-info),
24
12
  error: var(--c-background-error),
25
- errorInteractive: (
26
- DEFAULT: var(--c-background-errorInteractive),
27
- hover: var(--c-background-errorInteractive--hover)
28
- ),
29
13
  errorAlt: var(--c-background-errorAlt),
30
14
  success: var(--c-background-success),
31
15
  successAlt: var(--c-background-successAlt),
32
16
  connect: var(--c-background-connect),
33
- connectInteractive: (
34
- DEFAULT: var(--c-background-connectInteractive),
35
- hover: var(--c-background-connectInteractive--hover)
36
- ),
37
17
  connectAlt: var(--c-background-connectAlt),
38
18
  driver: var(--c-background-driver),
39
19
  owner: var(--c-background-owner),
@@ -43,87 +23,146 @@ $theme-colors-map: (
43
23
  seasonLow: var(--c-background-seasonLow),
44
24
  seasonMedium: var(--c-background-seasonMedium),
45
25
  seasonHigh: var(--c-background-seasonHigh),
46
- seasonVeryHigh: var(--c-background-seasonVeryHigh),
47
- rideShare: var(--c-background-rideShare)
26
+ seasonVeryhigh: var(--c-background-seasonVeryhigh),
27
+ rental: var(--c-background-rental),
28
+ blocker: var(--c-background-blocker),
29
+ rideshare: var(--c-background-rideshare),
30
+ secondaryInteractive: (
31
+ DEFAULT: var(--c-background-secondaryInteractive),
32
+ hover: var(--c-background-secondaryInteractive--hover)
33
+ ),
34
+ accentInteractive: (
35
+ DEFAULT: var(--c-background-accentInteractive),
36
+ hover: var(--c-background-accentInteractive--hover)
37
+ ),
38
+ accentAltInteractive: (
39
+ DEFAULT: var(--c-background-accentAltInteractive),
40
+ hover: var(--c-background-accentAltInteractive--hover)
41
+ ),
42
+ connectInteractive: (
43
+ DEFAULT: var(--c-background-connectInteractive),
44
+ hover: var(--c-background-connectInteractive--hover)
45
+ ),
46
+ errorInteractive: (
47
+ DEFAULT: var(--c-background-errorInteractive),
48
+ hover: var(--c-background-errorInteractive--hover)
49
+ )
48
50
  ),
49
51
  text: (
50
52
  base: var(--c-text-base),
51
- baseInteractive: (
52
- DEFAULT: var(--c-text-baseInteractive),
53
- hover: var(--c-text-baseInteractive--hover)
54
- ),
55
53
  subdued: var(--c-text-subdued),
56
- subduedInteractive: (
57
- DEFAULT: var(--c-text-subduedInteractive),
58
- hover: var(--c-text-subduedInteractive--hover)
59
- ),
60
54
  accent: var(--c-text-accent),
61
- accentInteractive: (
62
- DEFAULT: var(--c-text-accentInteractive),
63
- hover: var(--c-text-accentInteractive--hover)
64
- ),
65
55
  accentAlt: var(--c-text-accentAlt),
66
- accentAltInteractive: (
67
- DEFAULT: var(--c-text-accentAltInteractive),
68
- hover: var(--c-text-accentAltInteractive--hover)
69
- ),
70
56
  info: var(--c-text-info),
71
- infoAlt: var(--c-text-infoAlt),
72
57
  error: var(--c-text-error),
73
58
  errorAlt: var(--c-text-errorAlt),
74
59
  success: var(--c-text-success),
75
60
  successAlt: var(--c-text-successAlt),
76
- warning: var(--c-text-warning),
77
61
  connect: var(--c-text-connect),
78
62
  connectAlt: var(--c-text-connectAlt),
79
63
  driver: var(--c-text-driver),
80
64
  owner: var(--c-text-owner),
65
+ warning: var(--c-text-warning),
66
+ infoAlt: var(--c-text-infoAlt),
81
67
  inversed: var(--c-text-inversed),
82
68
  disabled: var(--c-text-disabled),
83
69
  onAccent: var(--c-text-onAccent),
70
+ onRideshare: var(--c-text-onRideshare),
84
71
  onError: var(--c-text-onError),
85
72
  onSuccess: var(--c-text-onSuccess),
86
73
  onConnect: var(--c-text-onConnect),
87
- onRideShare: var(--c-text-onRideShare)
74
+ baseInteractive: (
75
+ DEFAULT: var(--c-text-baseInteractive),
76
+ hover: var(--c-text-baseInteractive--hover)
77
+ ),
78
+ subduedInteractive: (
79
+ DEFAULT: var(--c-text-subduedInteractive),
80
+ hover: var(--c-text-subduedInteractive--hover)
81
+ ),
82
+ accentInteractive: (
83
+ DEFAULT: var(--c-text-accentInteractive),
84
+ hover: var(--c-text-accentInteractive--hover)
85
+ ),
86
+ accentAltInteractive: (
87
+ DEFAULT: var(--c-text-accentAltInteractive),
88
+ hover: var(--c-text-accentAltInteractive--hover)
89
+ )
88
90
  ),
89
- buttonBackground: (
90
- selected: var(--c-buttonBackground-selected),
91
- destructiveInteractive: (
92
- DEFAULT: var(--c-buttonBackground-destructiveInteractive),
93
- hover: var(--c-buttonBackground-destructiveInteractive--hover),
94
- press: var(--c-buttonBackground-destructiveInteractive--press)
91
+ icon: (
92
+ base: var(--c-icon-base),
93
+ subdued: var(--c-icon-subdued),
94
+ accent: var(--c-icon-accent),
95
+ accentAlt: var(--c-icon-accentAlt),
96
+ info: var(--c-icon-info),
97
+ error: var(--c-icon-error),
98
+ errorAlt: var(--c-icon-errorAlt),
99
+ success: var(--c-icon-success),
100
+ successAlt: var(--c-icon-successAlt),
101
+ connect: var(--c-icon-connect),
102
+ connectAlt: var(--c-icon-connectAlt),
103
+ driver: var(--c-icon-driver),
104
+ owner: var(--c-icon-owner),
105
+ disabled: var(--c-icon-disabled),
106
+ disabledAlt: var(--c-icon-disabledAlt),
107
+ warning: var(--c-icon-warning),
108
+ infoAlt: var(--c-icon-infoAlt),
109
+ onAccent: var(--c-icon-onAccent),
110
+ rideshare: var(--c-icon-rideshare),
111
+ onRideshare: var(--c-icon-onRideshare),
112
+ onSuccess: var(--c-icon-onSuccess),
113
+ onError: var(--c-icon-onError),
114
+ baseInteractive: (
115
+ DEFAULT: var(--c-icon-baseInteractive),
116
+ hover: var(--c-icon-baseInteractive--hover)
95
117
  ),
96
- disabled: var(--c-buttonBackground-disabled),
97
- primaryInteractive: (
98
- DEFAULT: var(--c-buttonBackground-primaryInteractive),
99
- hover: var(--c-buttonBackground-primaryInteractive--hover),
100
- press: var(--c-buttonBackground-primaryInteractive--press)
118
+ subduedInteractive: (
119
+ DEFAULT: var(--c-icon-subduedInteractive),
120
+ hover: var(--c-icon-subduedInteractive--hover)
101
121
  ),
102
- secondaryInteractive: (
103
- DEFAULT: var(--c-buttonBackground-secondaryInteractive),
104
- hover: var(--c-buttonBackground-secondaryInteractive--hover),
105
- press: var(--c-buttonBackground-secondaryInteractive--press)
122
+ accentInteractive: (
123
+ DEFAULT: var(--c-icon-accentInteractive),
124
+ hover: var(--c-icon-accentInteractive--hover)
106
125
  ),
107
- success: var(--c-buttonBackground-success),
108
- successAltInteractive: (
109
- DEFAULT: var(--c-buttonBackground-successAltInteractive),
110
- hover: var(--c-buttonBackground-successAltInteractive--hover),
111
- press: var(--c-buttonBackground-successAltInteractive--press)
126
+ accentAltInteractive: (
127
+ DEFAULT: var(--c-icon-accentAltInteractive),
128
+ hover: var(--c-icon-accentAltInteractive--hover)
129
+ )
130
+ ),
131
+ stroke: (
132
+ base: var(--c-stroke-base),
133
+ subdued: var(--c-stroke-subdued),
134
+ accent: var(--c-stroke-accent),
135
+ accentAlt: var(--c-stroke-accentAlt),
136
+ success: var(--c-stroke-success),
137
+ successAlt: var(--c-stroke-successAlt),
138
+ error: var(--c-stroke-error),
139
+ errorAlt: var(--c-stroke-errorAlt),
140
+ strong: var(--c-stroke-strong),
141
+ onAccent: var(--c-stroke-onAccent),
142
+ rentals: var(--c-stroke-rentals),
143
+ blokers: var(--c-stroke-blokers),
144
+ onError: var(--c-stroke-onError),
145
+ onSuccess: var(--c-stroke-onSuccess),
146
+ baseInteractive: (
147
+ DEFAULT: var(--c-stroke-baseInteractive),
148
+ hover: var(--c-stroke-baseInteractive--hover),
149
+ press: var(--c-stroke-baseInteractive--press)
112
150
  ),
113
- tertiaryInteractive: (
114
- DEFAULT: var(--c-buttonBackground-tertiaryInteractive),
115
- hover: var(--c-buttonBackground-tertiaryInteractive--hover),
116
- press: var(--c-buttonBackground-tertiaryInteractive--press)
151
+ accentInteractive: (
152
+ DEFAULT: var(--c-stroke-accentInteractive),
153
+ hover: var(--c-stroke-accentInteractive--hover),
154
+ press: var(--c-stroke-accentInteractive--press)
117
155
  )
118
156
  ),
119
157
  buttonIcon: (
120
- selected: var(--c-buttonIcon-selected),
121
- destructiveInteractive: (
122
- DEFAULT: var(--c-buttonIcon-destructiveInteractive),
123
- hover: var(--c-buttonIcon-destructiveInteractive--hover),
124
- press: var(--c-buttonIcon-destructiveInteractive--press)
125
- ),
158
+ primary: var(--c-buttonIcon-primary),
159
+ secondary: var(--c-buttonIcon-secondary),
160
+ tertiary: var(--c-buttonIcon-tertiary),
161
+ destructive: var(--c-buttonIcon-destructive),
162
+ success: var(--c-buttonIcon-success),
163
+ successAlt: var(--c-buttonIcon-successAlt),
126
164
  disabled: var(--c-buttonIcon-disabled),
165
+ accentAlt: var(--c-buttonIcon-accentAlt),
127
166
  primaryInteractive: (
128
167
  DEFAULT: var(--c-buttonIcon-primaryInteractive),
129
168
  hover: var(--c-buttonIcon-primaryInteractive--hover),
@@ -134,26 +173,31 @@ $theme-colors-map: (
134
173
  hover: var(--c-buttonIcon-secondaryInteractive--hover),
135
174
  press: var(--c-buttonIcon-secondaryInteractive--press)
136
175
  ),
137
- success: var(--c-buttonIcon-success),
138
- successAltInteractive: (
139
- DEFAULT: var(--c-buttonIcon-successAltInteractive),
140
- hover: var(--c-buttonIcon-successAltInteractive--hover),
141
- press: var(--c-buttonIcon-successAltInteractive--press)
142
- ),
143
176
  tertiaryInteractive: (
144
177
  DEFAULT: var(--c-buttonIcon-tertiaryInteractive),
145
178
  hover: var(--c-buttonIcon-tertiaryInteractive--hover),
146
179
  press: var(--c-buttonIcon-tertiaryInteractive--press)
180
+ ),
181
+ destructiveInteractive: (
182
+ DEFAULT: var(--c-buttonIcon-destructiveInteractive),
183
+ hover: var(--c-buttonIcon-destructiveInteractive--hover),
184
+ press: var(--c-buttonIcon-destructiveInteractive--press)
185
+ ),
186
+ successAltInteractive: (
187
+ DEFAULT: var(--c-buttonIcon-successAltInteractive),
188
+ hover: var(--c-buttonIcon-successAltInteractive--hover),
189
+ press: var(--c-buttonIcon-successAltInteractive--press)
147
190
  )
148
191
  ),
149
192
  buttonLabel: (
150
- selected: var(--c-buttonLabel-selected),
151
- destructiveInteractive: (
152
- DEFAULT: var(--c-buttonLabel-destructiveInteractive),
153
- hover: var(--c-buttonLabel-destructiveInteractive--hover),
154
- press: var(--c-buttonLabel-destructiveInteractive--press)
155
- ),
193
+ primary: var(--c-buttonLabel-primary),
194
+ secondary: var(--c-buttonLabel-secondary),
195
+ tertiary: var(--c-buttonLabel-tertiary),
156
196
  disabled: var(--c-buttonLabel-disabled),
197
+ accentAlt: var(--c-buttonLabel-accentAlt),
198
+ destructive: var(--c-buttonLabel-destructive),
199
+ success: var(--c-buttonLabel-success),
200
+ successAlt: var(--c-buttonLabel-successAlt),
157
201
  primaryInteractive: (
158
202
  DEFAULT: var(--c-buttonLabel-primaryInteractive),
159
203
  hover: var(--c-buttonLabel-primaryInteractive--hover),
@@ -164,93 +208,76 @@ $theme-colors-map: (
164
208
  hover: var(--c-buttonLabel-secondaryInteractive--hover),
165
209
  press: var(--c-buttonLabel-secondaryInteractive--press)
166
210
  ),
167
- success: var(--c-buttonLabel-success),
168
- successAltInteractive: (
169
- DEFAULT: var(--c-buttonLabel-successAltInteractive),
170
- hover: var(--c-buttonLabel-successAltInteractive--hover),
171
- press: var(--c-buttonLabel-successAltInteractive--press)
172
- ),
173
211
  tertiaryInteractive: (
174
212
  DEFAULT: var(--c-buttonLabel-tertiaryInteractive),
175
213
  hover: var(--c-buttonLabel-tertiaryInteractive--hover),
176
214
  press: var(--c-buttonLabel-tertiaryInteractive--press)
177
- )
178
- ),
179
- icon: (
180
- base: var(--c-icon-base),
181
- baseInteractive: (
182
- DEFAULT: var(--c-icon-baseInteractive),
183
- hover: var(--c-icon-baseInteractive--hover)
184
215
  ),
185
- subdued: var(--c-icon-subdued),
186
- subduedInteractive: (
187
- DEFAULT: var(--c-icon-subduedInteractive),
188
- hover: var(--c-icon-subduedInteractive--hover)
189
- ),
190
- accent: var(--c-icon-accent),
191
- accentInteractive: (
192
- DEFAULT: var(--c-icon-accentInteractive),
193
- hover: var(--c-icon-accentInteractive--hover)
194
- ),
195
- accentAlt: var(--c-icon-accentAlt),
196
- accentAltInteractive: (
197
- DEFAULT: var(--c-icon-accentAltInteractive),
198
- hover: var(--c-icon-accentAltInteractive--hover)
216
+ destructiveInteractive: (
217
+ DEFAULT: var(--c-buttonLabel-destructiveInteractive),
218
+ hover: var(--c-buttonLabel-destructiveInteractive--hover),
219
+ press: var(--c-buttonLabel-destructiveInteractive--press)
199
220
  ),
200
- info: var(--c-icon-info),
201
- infoAlt: var(--c-icon-infoAlt),
202
- error: var(--c-icon-error),
203
- errorAlt: var(--c-icon-errorAlt),
204
- success: var(--c-icon-success),
205
- successAlt: var(--c-icon-successAlt),
206
- warning: var(--c-icon-warning),
207
- connect: var(--c-icon-connect),
208
- connectAlt: var(--c-icon-connectAlt),
209
- driver: var(--c-icon-driver),
210
- owner: var(--c-icon-owner),
211
- inversed: var(--c-icon-inversed),
212
- disabled: var(--c-icon-disabled),
213
- rideShare: var(--c-icon-rideShare),
214
- onRideShare: var(--c-icon-onRideShare)
221
+ successAltInteractive: (
222
+ DEFAULT: var(--c-buttonLabel-successAltInteractive),
223
+ hover: var(--c-buttonLabel-successAltInteractive--hover),
224
+ press: var(--c-buttonLabel-successAltInteractive--press)
225
+ )
215
226
  ),
216
- stroke: (
217
- base: var(--c-stroke-base),
218
- baseInteractive: (
219
- DEFAULT: var(--c-stroke-baseInteractive),
220
- hover: var(--c-stroke-baseInteractive--hover),
221
- press: var(--c-stroke-baseInteractive--press)
227
+ buttonBackground: (
228
+ primary: var(--c-buttonBackground-primary),
229
+ secondary: var(--c-buttonBackground-secondary),
230
+ tertiary: var(--c-buttonBackground-tertiary),
231
+ accentAlt: var(--c-buttonBackground-accentAlt),
232
+ destructive: var(--c-buttonBackground-destructive),
233
+ success: var(--c-buttonBackground-success),
234
+ successAlt: var(--c-buttonBackground-successAlt),
235
+ disabled: var(--c-buttonBackground-disabled),
236
+ primaryInteractive: (
237
+ DEFAULT: var(--c-buttonBackground-primaryInteractive),
238
+ hover: var(--c-buttonBackground-primaryInteractive--hover),
239
+ press: var(--c-buttonBackground-primaryInteractive--press)
222
240
  ),
223
- strong: var(--c-stroke-strong),
224
- strongInteractive: (
225
- DEFAULT: var(--c-stroke-strongInteractive),
226
- hover: var(--c-stroke-strongInteractive--hover),
227
- press: var(--c-stroke-strongInteractive--press)
241
+ secondaryInteractive: (
242
+ DEFAULT: var(--c-buttonBackground-secondaryInteractive),
243
+ hover: var(--c-buttonBackground-secondaryInteractive--hover),
244
+ press: var(--c-buttonBackground-secondaryInteractive--press)
228
245
  ),
229
- subdued: var(--c-stroke-subdued),
230
- accent: var(--c-stroke-accent),
231
- accentInteractive: (
232
- DEFAULT: var(--c-stroke-accentInteractive),
233
- hover: var(--c-stroke-accentInteractive--hover),
234
- press: var(--c-stroke-accentInteractive--press)
246
+ tertiaryInteractive: (
247
+ DEFAULT: var(--c-buttonBackground-tertiaryInteractive),
248
+ hover: var(--c-buttonBackground-tertiaryInteractive--hover),
249
+ press: var(--c-buttonBackground-tertiaryInteractive--press)
235
250
  ),
236
- accentAlt: var(--c-stroke-accentAlt),
237
- error: var(--c-stroke-error),
238
- errorAlt: var(--c-stroke-errorAlt),
239
- success: var(--c-stroke-success),
240
- successAlt: var(--c-stroke-successAlt),
241
- onAccent: var(--c-stroke-onAccent),
242
- onError: var(--c-stroke-onError)
251
+ destructiveInteractive: (
252
+ DEFAULT: var(--c-buttonBackground-destructiveInteractive),
253
+ hover: var(--c-buttonBackground-destructiveInteractive--hover),
254
+ press: var(--c-buttonBackground-destructiveInteractive--press)
255
+ ),
256
+ successAltInteractive: (
257
+ DEFAULT: var(--c-buttonBackground-successAltInteractive),
258
+ hover: var(--c-buttonBackground-successAltInteractive--hover),
259
+ press: var(--c-buttonBackground-successAltInteractive--press)
260
+ )
243
261
  ),
244
262
  fill: (
245
263
  base: var(--c-fill-base),
264
+ accent: var(--c-fill-accent),
246
265
  secondary: var(--c-fill-secondary),
247
266
  subdued: var(--c-fill-subdued),
248
- accent: var(--c-fill-accent),
267
+ neutral: var(--c-fill-neutral),
268
+ negative: var(--c-fill-negative),
249
269
  accentAlt: var(--c-fill-accentAlt),
270
+ disabled: var(--c-fill-disabled),
250
271
  error: var(--c-fill-error),
251
- negative: var(--c-fill-negative),
252
272
  success: var(--c-fill-success),
253
- disabled: var(--c-fill-disabled),
254
- neutral: var(--c-fill-neutral)
273
+ rentals: var(--c-fill-rentals),
274
+ blockers: var(--c-fill-blockers)
275
+ ),
276
+ illustrations: (
277
+ primary: var(--c-illustrations-primary),
278
+ secondary: var(--c-illustrations-secondary),
279
+ acccent1: var(--c-illustrations-acccent1),
280
+ accent2: var(--c-illustrations-accent2),
281
+ foregroundDark: var(--c-illustrations-foregroundDark)
255
282
  )
256
283
  );