@drivy/cobalt 0.42.3 → 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 (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 +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/PlateNumber/index.scss +4 -0
  25. package/styles/components/Tag/index.scss +4 -0
  26. package/styles/core/_colors-map.scss +180 -155
  27. package/styles/core/default-theme.scss +136 -111
  28. package/styles/core/palette.scss +54 -40
  29. package/styles/core/theme.scss +281 -231
  30. package/tokens/palette.js +78 -61
  31. package/tokens/palette.js.map +1 -1
  32. package/tokens/theme.js +194 -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 +174 -133
  39. package/utilities.css +370 -327
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,144 @@ $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),
81
- inversed: var(--c-text-inversed),
65
+ warning: var(--c-text-warning),
66
+ infoAlt: var(--c-text-infoAlt),
82
67
  disabled: var(--c-text-disabled),
83
68
  onAccent: var(--c-text-onAccent),
69
+ onRideshare: var(--c-text-onRideshare),
84
70
  onError: var(--c-text-onError),
85
71
  onSuccess: var(--c-text-onSuccess),
86
- onConnect: var(--c-text-onConnect),
87
- onRideShare: var(--c-text-onRideShare)
72
+ baseInteractive: (
73
+ DEFAULT: var(--c-text-baseInteractive),
74
+ hover: var(--c-text-baseInteractive--hover)
75
+ ),
76
+ subduedInteractive: (
77
+ DEFAULT: var(--c-text-subduedInteractive),
78
+ hover: var(--c-text-subduedInteractive--hover)
79
+ ),
80
+ accentInteractive: (
81
+ DEFAULT: var(--c-text-accentInteractive),
82
+ hover: var(--c-text-accentInteractive--hover)
83
+ ),
84
+ accentAltInteractive: (
85
+ DEFAULT: var(--c-text-accentAltInteractive),
86
+ hover: var(--c-text-accentAltInteractive--hover)
87
+ )
88
88
  ),
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)
89
+ icon: (
90
+ base: var(--c-icon-base),
91
+ subdued: var(--c-icon-subdued),
92
+ accent: var(--c-icon-accent),
93
+ accentAlt: var(--c-icon-accentAlt),
94
+ info: var(--c-icon-info),
95
+ error: var(--c-icon-error),
96
+ errorAlt: var(--c-icon-errorAlt),
97
+ success: var(--c-icon-success),
98
+ successAlt: var(--c-icon-successAlt),
99
+ connect: var(--c-icon-connect),
100
+ connectAlt: var(--c-icon-connectAlt),
101
+ driver: var(--c-icon-driver),
102
+ owner: var(--c-icon-owner),
103
+ disabled: var(--c-icon-disabled),
104
+ disabledAlt: var(--c-icon-disabledAlt),
105
+ warning: var(--c-icon-warning),
106
+ infoAlt: var(--c-icon-infoAlt),
107
+ onAccent: var(--c-icon-onAccent),
108
+ rideshare: var(--c-icon-rideshare),
109
+ onRideshare: var(--c-icon-onRideshare),
110
+ onSuccess: var(--c-icon-onSuccess),
111
+ onError: var(--c-icon-onError),
112
+ baseInteractive: (
113
+ DEFAULT: var(--c-icon-baseInteractive),
114
+ hover: var(--c-icon-baseInteractive--hover)
95
115
  ),
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)
116
+ subduedInteractive: (
117
+ DEFAULT: var(--c-icon-subduedInteractive),
118
+ hover: var(--c-icon-subduedInteractive--hover)
101
119
  ),
102
- secondaryInteractive: (
103
- DEFAULT: var(--c-buttonBackground-secondaryInteractive),
104
- hover: var(--c-buttonBackground-secondaryInteractive--hover),
105
- press: var(--c-buttonBackground-secondaryInteractive--press)
120
+ accentInteractive: (
121
+ DEFAULT: var(--c-icon-accentInteractive),
122
+ hover: var(--c-icon-accentInteractive--hover)
106
123
  ),
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)
124
+ accentAltInteractive: (
125
+ DEFAULT: var(--c-icon-accentAltInteractive),
126
+ hover: var(--c-icon-accentAltInteractive--hover)
127
+ )
128
+ ),
129
+ stroke: (
130
+ base: var(--c-stroke-base),
131
+ subdued: var(--c-stroke-subdued),
132
+ accent: var(--c-stroke-accent),
133
+ accentAlt: var(--c-stroke-accentAlt),
134
+ success: var(--c-stroke-success),
135
+ successAlt: var(--c-stroke-successAlt),
136
+ error: var(--c-stroke-error),
137
+ errorAlt: var(--c-stroke-errorAlt),
138
+ strong: var(--c-stroke-strong),
139
+ onAccent: var(--c-stroke-onAccent),
140
+ rentals: var(--c-stroke-rentals),
141
+ blokers: var(--c-stroke-blokers),
142
+ onError: var(--c-stroke-onError),
143
+ onSuccess: var(--c-stroke-onSuccess),
144
+ baseInteractive: (
145
+ DEFAULT: var(--c-stroke-baseInteractive),
146
+ hover: var(--c-stroke-baseInteractive--hover),
147
+ press: var(--c-stroke-baseInteractive--press)
112
148
  ),
113
- tertiaryInteractive: (
114
- DEFAULT: var(--c-buttonBackground-tertiaryInteractive),
115
- hover: var(--c-buttonBackground-tertiaryInteractive--hover),
116
- press: var(--c-buttonBackground-tertiaryInteractive--press)
149
+ accentInteractive: (
150
+ DEFAULT: var(--c-stroke-accentInteractive),
151
+ hover: var(--c-stroke-accentInteractive--hover),
152
+ press: var(--c-stroke-accentInteractive--press)
117
153
  )
118
154
  ),
119
155
  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
- ),
156
+ primary: var(--c-buttonIcon-primary),
157
+ secondary: var(--c-buttonIcon-secondary),
158
+ tertiary: var(--c-buttonIcon-tertiary),
159
+ destructive: var(--c-buttonIcon-destructive),
160
+ success: var(--c-buttonIcon-success),
161
+ successAlt: var(--c-buttonIcon-successAlt),
126
162
  disabled: var(--c-buttonIcon-disabled),
163
+ accentAlt: var(--c-buttonIcon-accentAlt),
127
164
  primaryInteractive: (
128
165
  DEFAULT: var(--c-buttonIcon-primaryInteractive),
129
166
  hover: var(--c-buttonIcon-primaryInteractive--hover),
@@ -134,26 +171,31 @@ $theme-colors-map: (
134
171
  hover: var(--c-buttonIcon-secondaryInteractive--hover),
135
172
  press: var(--c-buttonIcon-secondaryInteractive--press)
136
173
  ),
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
174
  tertiaryInteractive: (
144
175
  DEFAULT: var(--c-buttonIcon-tertiaryInteractive),
145
176
  hover: var(--c-buttonIcon-tertiaryInteractive--hover),
146
177
  press: var(--c-buttonIcon-tertiaryInteractive--press)
178
+ ),
179
+ destructiveInteractive: (
180
+ DEFAULT: var(--c-buttonIcon-destructiveInteractive),
181
+ hover: var(--c-buttonIcon-destructiveInteractive--hover),
182
+ press: var(--c-buttonIcon-destructiveInteractive--press)
183
+ ),
184
+ successAltInteractive: (
185
+ DEFAULT: var(--c-buttonIcon-successAltInteractive),
186
+ hover: var(--c-buttonIcon-successAltInteractive--hover),
187
+ press: var(--c-buttonIcon-successAltInteractive--press)
147
188
  )
148
189
  ),
149
190
  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
- ),
191
+ primary: var(--c-buttonLabel-primary),
192
+ secondary: var(--c-buttonLabel-secondary),
193
+ tertiary: var(--c-buttonLabel-tertiary),
156
194
  disabled: var(--c-buttonLabel-disabled),
195
+ accentAlt: var(--c-buttonLabel-accentAlt),
196
+ destructive: var(--c-buttonLabel-destructive),
197
+ success: var(--c-buttonLabel-success),
198
+ successAlt: var(--c-buttonLabel-successAlt),
157
199
  primaryInteractive: (
158
200
  DEFAULT: var(--c-buttonLabel-primaryInteractive),
159
201
  hover: var(--c-buttonLabel-primaryInteractive--hover),
@@ -164,93 +206,76 @@ $theme-colors-map: (
164
206
  hover: var(--c-buttonLabel-secondaryInteractive--hover),
165
207
  press: var(--c-buttonLabel-secondaryInteractive--press)
166
208
  ),
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
209
  tertiaryInteractive: (
174
210
  DEFAULT: var(--c-buttonLabel-tertiaryInteractive),
175
211
  hover: var(--c-buttonLabel-tertiaryInteractive--hover),
176
212
  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
213
  ),
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)
214
+ destructiveInteractive: (
215
+ DEFAULT: var(--c-buttonLabel-destructiveInteractive),
216
+ hover: var(--c-buttonLabel-destructiveInteractive--hover),
217
+ press: var(--c-buttonLabel-destructiveInteractive--press)
199
218
  ),
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)
219
+ successAltInteractive: (
220
+ DEFAULT: var(--c-buttonLabel-successAltInteractive),
221
+ hover: var(--c-buttonLabel-successAltInteractive--hover),
222
+ press: var(--c-buttonLabel-successAltInteractive--press)
223
+ )
215
224
  ),
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)
225
+ buttonBackground: (
226
+ primary: var(--c-buttonBackground-primary),
227
+ secondary: var(--c-buttonBackground-secondary),
228
+ tertiary: var(--c-buttonBackground-tertiary),
229
+ accentAlt: var(--c-buttonBackground-accentAlt),
230
+ destructive: var(--c-buttonBackground-destructive),
231
+ success: var(--c-buttonBackground-success),
232
+ successAlt: var(--c-buttonBackground-successAlt),
233
+ disabled: var(--c-buttonBackground-disabled),
234
+ primaryInteractive: (
235
+ DEFAULT: var(--c-buttonBackground-primaryInteractive),
236
+ hover: var(--c-buttonBackground-primaryInteractive--hover),
237
+ press: var(--c-buttonBackground-primaryInteractive--press)
222
238
  ),
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)
239
+ secondaryInteractive: (
240
+ DEFAULT: var(--c-buttonBackground-secondaryInteractive),
241
+ hover: var(--c-buttonBackground-secondaryInteractive--hover),
242
+ press: var(--c-buttonBackground-secondaryInteractive--press)
228
243
  ),
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)
244
+ tertiaryInteractive: (
245
+ DEFAULT: var(--c-buttonBackground-tertiaryInteractive),
246
+ hover: var(--c-buttonBackground-tertiaryInteractive--hover),
247
+ press: var(--c-buttonBackground-tertiaryInteractive--press)
235
248
  ),
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)
249
+ destructiveInteractive: (
250
+ DEFAULT: var(--c-buttonBackground-destructiveInteractive),
251
+ hover: var(--c-buttonBackground-destructiveInteractive--hover),
252
+ press: var(--c-buttonBackground-destructiveInteractive--press)
253
+ ),
254
+ successAltInteractive: (
255
+ DEFAULT: var(--c-buttonBackground-successAltInteractive),
256
+ hover: var(--c-buttonBackground-successAltInteractive--hover),
257
+ press: var(--c-buttonBackground-successAltInteractive--press)
258
+ )
243
259
  ),
244
260
  fill: (
245
261
  base: var(--c-fill-base),
262
+ accent: var(--c-fill-accent),
246
263
  secondary: var(--c-fill-secondary),
247
264
  subdued: var(--c-fill-subdued),
248
- accent: var(--c-fill-accent),
265
+ neutral: var(--c-fill-neutral),
266
+ negative: var(--c-fill-negative),
249
267
  accentAlt: var(--c-fill-accentAlt),
268
+ disabled: var(--c-fill-disabled),
250
269
  error: var(--c-fill-error),
251
- negative: var(--c-fill-negative),
252
270
  success: var(--c-fill-success),
253
- disabled: var(--c-fill-disabled),
254
- neutral: var(--c-fill-neutral)
271
+ rentals: var(--c-fill-rentals),
272
+ blockers: var(--c-fill-blockers)
273
+ ),
274
+ illustrations: (
275
+ primary: var(--c-illustrations-primary),
276
+ secondary: var(--c-illustrations-secondary),
277
+ acccent1: var(--c-illustrations-acccent1),
278
+ accent2: var(--c-illustrations-accent2),
279
+ foregroundDark: var(--c-illustrations-foregroundDark)
255
280
  )
256
281
  );