@drivy/cobalt 0.42.18 → 0.42.19

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 (17) hide show
  1. package/cjs/tokens/palette.js +14 -3
  2. package/cjs/tokens/palette.js.map +1 -1
  3. package/cjs/tokens/theme.js +55 -31
  4. package/cjs/tokens/theme.js.map +1 -1
  5. package/package.json +1 -1
  6. package/styles/components/Icon/iconColors.scss +40 -16
  7. package/styles/core/_colors-map.scss +48 -24
  8. package/styles/core/default-theme.scss +52 -28
  9. package/styles/core/palette.scss +4 -1
  10. package/styles/core/theme.scss +105 -57
  11. package/tokens/palette.js +13 -4
  12. package/tokens/palette.js.map +1 -1
  13. package/tokens/theme.js +55 -31
  14. package/tokens/theme.js.map +1 -1
  15. package/types/src/components/Icon/index.d.ts +1 -1
  16. package/types/src/tokens/index.d.ts +55 -24
  17. package/utilities.css +174 -71
package/styles/core/theme.scss CHANGED
@@ -12,8 +12,11 @@
12
12
  --c-background-errorAlt: var(--c-red-100);
13
13
  --c-background-success: var(--c-green-700);
14
14
  --c-background-successAlt: var(--c-green-100);
15
- --c-background-connect: var(--c-turquoise-500);
15
+ --c-background-connect: var(--c-newPurple-500);
16
16
  --c-background-connectAlt: var(--c-turquoise-50);
17
+ --c-background-keyExchange: var(--c-newViolet-500);
18
+ --c-background-picked: var(--c-green-700);
19
+ --c-background-rideshare: var(--c-black-1000);
17
20
  --c-background-driver: var(--c-yellow-500);
18
21
  --c-background-owner: var(--c-navy-700);
19
22
  --c-background-disabled: var(--c-navy-100);
@@ -25,14 +28,14 @@
25
28
  --c-background-seasonVeryhigh: var(--c-season-400);
26
29
  --c-background-rental: var(--c-turquoise-100);
27
30
  --c-background-blocker: var(--c-navy-100);
28
- --c-background-rideshare: var(--c-black-1000);
31
+ --c-background-base: var(--c-navy-900);
29
32
  --c-background-secondaryInteractive: var(--c-white);
30
33
  --c-background-secondaryInteractive--hover: var(--c-navy-50);
31
34
  --c-background-accentInteractive: var(--c-purple-500);
32
35
  --c-background-accentInteractive--hover: var(--c-purple-700);
33
36
  --c-background-accentAltInteractive: var(--c-purple-100);
34
37
  --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
35
- --c-background-connectInteractive: var(--c-turquoise-500);
38
+ --c-background-connectInteractive: var(--c-newPurple-500);
36
39
  --c-background-connectInteractive--hover: var(--c-turquoise-700);
37
40
  --c-background-errorInteractive: var(--c-red-500);
38
41
  --c-background-errorInteractive--hover: var(--c-red-700);
@@ -41,23 +44,29 @@
41
44
  --c-text-accent: var(--c-purple-500);
42
45
  --c-text-accentAlt: var(--c-purple-500);
43
46
  --c-text-info: var(--c-yellow-900);
47
+ --c-text-infoAlt: var(--c-yellow-700);
44
48
  --c-text-error: var(--c-red-500);
45
49
  --c-text-errorAlt: var(--c-red-500);
46
50
  --c-text-success: var(--c-green-700);
47
51
  --c-text-successAlt: var(--c-green-1000);
48
- --c-text-connect: var(--c-turquoise-500);
52
+ --c-text-warning: var(--c-orange-500);
53
+ --c-text-connect: var(--c-newPurple-500);
49
54
  --c-text-connectAlt: var(--c-turquoise-900);
55
+ --c-text-keyExchange: var(--c-newViolet-500);
56
+ --c-text-picked: var(--c-green-700);
57
+ --c-text-rideshare: var(--c-black-1000);
50
58
  --c-text-driver: var(--c-navy-700);
51
59
  --c-text-owner: var(--c-white);
52
- --c-text-warning: var(--c-orange-500);
53
- --c-text-infoAlt: var(--c-yellow-700);
54
- --c-text-inversed: var(--c-white);
55
60
  --c-text-disabled: var(--c-navy-200);
61
+ --c-text-inversed: var(--c-white);
56
62
  --c-text-onAccent: var(--c-white);
57
63
  --c-text-onRideshare: var(--c-white);
58
64
  --c-text-onError: var(--c-white);
59
65
  --c-text-onSuccess: var(--c-white);
60
66
  --c-text-onConnect: var(--c-white);
67
+ --c-text-onKeyExchange: var(--c-white);
68
+ --c-text-onPicked: var(--c-white);
69
+ --c-text-onBase: var(--c-white);
61
70
  --c-text-baseInteractive: var(--c-navy-700);
62
71
  --c-text-baseInteractive--hover: var(--c-navy-900);
63
72
  --c-text-subduedInteractive: var(--c-navy-300);
@@ -71,24 +80,30 @@
71
80
  --c-icon-accent: var(--c-purple-500);
72
81
  --c-icon-accentAlt: var(--c-purple-500);
73
82
  --c-icon-info: var(--c-yellow-900);
83
+ --c-icon-infoAlt: var(--c-yellow-500);
74
84
  --c-icon-error: var(--c-red-500);
75
85
  --c-icon-errorAlt: var(--c-red-500);
76
86
  --c-icon-success: var(--c-green-700);
77
87
  --c-icon-successAlt: var(--c-green-1000);
78
- --c-icon-connect: var(--c-turquoise-500);
88
+ --c-icon-warning: var(--c-orange-500);
89
+ --c-icon-connect: var(--c-newPurple-500);
79
90
  --c-icon-connectAlt: var(--c-turquoise-900);
91
+ --c-icon-keyExchange: var(--c-newViolet-500);
92
+ --c-icon-picked: var(--c-green-700);
93
+ --c-icon-rideshare: var(--c-black-1000);
80
94
  --c-icon-driver: var(--c-navy-700);
81
95
  --c-icon-owner: var(--c-white);
82
- --c-icon-inversed: var(--c-white);
83
- --c-icon-disabled: var(--c-navy-100);
96
+ --c-icon-disabled: var(--c-navy-200);
84
97
  --c-icon-disabledAlt: var(--c-navy-300);
85
- --c-icon-warning: var(--c-orange-500);
86
- --c-icon-infoAlt: var(--c-yellow-500);
98
+ --c-icon-inversed: var(--c-white);
87
99
  --c-icon-onAccent: var(--c-white);
88
- --c-icon-rideshare: var(--c-black-1000);
89
100
  --c-icon-onRideshare: var(--c-white);
90
- --c-icon-onSuccess: var(--c-white);
91
101
  --c-icon-onError: var(--c-white);
102
+ --c-icon-onSuccess: var(--c-white);
103
+ --c-icon-onConnect: var(--c-white);
104
+ --c-icon-onKeyExchange: var(--c-white);
105
+ --c-icon-onPicked: var(--c-white);
106
+ --c-icon-onBase: var(--c-white);
92
107
  --c-icon-baseInteractive: var(--c-navy-500);
93
108
  --c-icon-baseInteractive--hover: var(--c-navy-700);
94
109
  --c-icon-subduedInteractive: var(--c-navy-300);
@@ -99,18 +114,27 @@
99
114
  --c-icon-accentAltInteractive--hover: var(--c-purple-700);
100
115
  --c-stroke-base: var(--c-navy-100);
101
116
  --c-stroke-subdued: var(--c-navy-50);
117
+ --c-stroke-strong: var(--c-navy-300);
102
118
  --c-stroke-accent: var(--c-purple-500);
103
119
  --c-stroke-accentAlt: var(--c-purple-300);
104
- --c-stroke-success: var(--c-green-500);
105
- --c-stroke-successAlt: var(--c-green-500);
106
120
  --c-stroke-error: var(--c-red-500);
107
121
  --c-stroke-errorAlt: var(--c-red-500);
108
- --c-stroke-strong: var(--c-navy-300);
122
+ --c-stroke-success: var(--c-green-500);
123
+ --c-stroke-successAlt: var(--c-green-500);
124
+ --c-stroke-connect: var(--c-newPurple-500);
125
+ --c-stroke-keyExchange: var(--c-newViolet-500);
126
+ --c-stroke-picked: var(--c-green-700);
127
+ --c-stroke-rideshare: var(--c-black-1000);
128
+ --c-stroke-rental: var(--c-turquoise-500);
129
+ --c-stroke-blocker: var(--c-navy-300);
109
130
  --c-stroke-onAccent: var(--c-white);
110
- --c-stroke-rentals: var(--c-turquoise-500);
111
- --c-stroke-blokers: var(--c-navy-300);
112
131
  --c-stroke-onError: var(--c-white);
113
132
  --c-stroke-onSuccess: var(--c-white);
133
+ --c-stroke-onConnect: var(--c-white);
134
+ --c-stroke-onPicked: var(--c-white);
135
+ --c-stroke-onKeyExchange: var(--c-white);
136
+ --c-stroke-onRideshare: var(--c-white);
137
+ --c-stroke-onBase: var(--c-white);
114
138
  --c-stroke-baseInteractive: var(--c-navy-100);
115
139
  --c-stroke-baseInteractive--hover: var(--c-navy-300);
116
140
  --c-stroke-baseInteractive--press: var(--c-navy-500);
@@ -193,22 +217,22 @@
193
217
  --c-buttonBackground-successAltInteractive--hover: var(--c-green-120);
194
218
  --c-buttonBackground-successAltInteractive--press: var(--c-green-150);
195
219
  --c-fill-base: var(--c-navy-500);
196
- --c-fill-accent: var(--c-purple-500);
197
- --c-fill-secondary: var(--c-yellow-500);
198
220
  --c-fill-subdued: var(--c-navy-100);
199
- --c-fill-neutral: var(--c-navy-50);
200
- --c-fill-negative: var(--c-red-150);
221
+ --c-fill-secondary: var(--c-yellow-500);
222
+ --c-fill-accent: var(--c-purple-500);
201
223
  --c-fill-accentAlt: var(--c-purple-100);
202
- --c-fill-disabled: var(--c-navy-300);
203
224
  --c-fill-error: var(--c-red-500);
204
225
  --c-fill-success: var(--c-green-500);
205
- --c-fill-rentals: var(--c-turquoise-100);
206
- --c-fill-blockers: var(--c-navy-120);
226
+ --c-fill-neutral: var(--c-navy-50);
227
+ --c-fill-negative: var(--c-red-150);
228
+ --c-fill-disabled: var(--c-navy-300);
229
+ --c-fill-rental: var(--c-turquoise-100);
230
+ --c-fill-blocker: var(--c-navy-120);
231
+ --c-fill-primary: var(--c-white);
207
232
  --c-illustrations-primary: var(--c-navy-500);
208
233
  --c-illustrations-secondary: var(--c-white);
209
- --c-illustrations-acccent1: var(--c-purple-500);
234
+ --c-illustrations-accent1: var(--c-purple-500);
210
235
  --c-illustrations-accent2: var(--c-blue-500);
211
- --c-illustrations-foregroundDark: var(--c-white);
212
236
  }
213
237
 
214
238
  .use-cobalt-dark-theme {
@@ -221,8 +245,11 @@
221
245
  --c-background-errorAlt: var(--c-red-900);
222
246
  --c-background-success: var(--c-green-700);
223
247
  --c-background-successAlt: var(--c-green-1000);
224
- --c-background-connect: var(--c-turquoise-700);
248
+ --c-background-connect: var(--c-newPurple-200);
225
249
  --c-background-connectAlt: var(--c-turquoise-900);
250
+ --c-background-keyExchange: var(--c-newViolet-200);
251
+ --c-background-picked: var(--c-green-500);
252
+ --c-background-rideshare: var(--c-black-1000);
226
253
  --c-background-driver: var(--c-yellow-500);
227
254
  --c-background-owner: var(--c-navy-700);
228
255
  --c-background-disabled: var(--c-black-100);
@@ -234,14 +261,14 @@
234
261
  --c-background-seasonVeryhigh: var(--c-season-1000);
235
262
  --c-background-rental: var(--c-turquoise-1200);
236
263
  --c-background-blocker: var(--c-black-75);
237
- --c-background-rideshare: var(--c-black-1000);
264
+ --c-background-base: var(--c-navy-50);
238
265
  --c-background-secondaryInteractive: var(--c-black-300);
239
266
  --c-background-secondaryInteractive--hover: var(--c-black-300);
240
267
  --c-background-accentInteractive: var(--c-purpleDeep-500);
241
268
  --c-background-accentInteractive--hover: var(--c-purpleDeep-400);
242
269
  --c-background-accentAltInteractive: var(--c-purpleDeep-900);
243
270
  --c-background-accentAltInteractive--hover: var(--c-purpleDeep-900);
244
- --c-background-connectInteractive: var(--c-turquoise-700);
271
+ --c-background-connectInteractive: var(--c-newPurple-200);
245
272
  --c-background-connectInteractive--hover: var(--c-turquoise-700);
246
273
  --c-background-errorInteractive: var(--c-red-500);
247
274
  --c-background-errorInteractive--hover: var(--c-red-500);
@@ -250,23 +277,29 @@
250
277
  --c-text-accent: var(--c-purpleDeep-400);
251
278
  --c-text-accentAlt: var(--c-grey-100);
252
279
  --c-text-info: var(--c-yellow-300);
280
+ --c-text-infoAlt: var(--c-yellow-700);
253
281
  --c-text-error: var(--c-red-400);
254
282
  --c-text-errorAlt: var(--c-red-500);
255
283
  --c-text-success: var(--c-green-700);
256
284
  --c-text-successAlt: var(--c-green-100);
257
- --c-text-connect: var(--c-turquoise-700);
285
+ --c-text-warning: var(--c-orange-300);
286
+ --c-text-connect: var(--c-newPurple-200);
258
287
  --c-text-connectAlt: var(--c-white);
288
+ --c-text-keyExchange: var(--c-newViolet-200);
289
+ --c-text-picked: var(--c-green-500);
290
+ --c-text-rideshare: var(--c-white);
259
291
  --c-text-driver: var(--c-navy-700);
260
292
  --c-text-owner: var(--c-grey-100);
261
- --c-text-warning: var(--c-orange-300);
262
- --c-text-infoAlt: var(--c-yellow-700);
263
- --c-text-inversed: var(--c-white);
264
293
  --c-text-disabled: var(--c-black-50);
294
+ --c-text-inversed: var(--c-white);
265
295
  --c-text-onAccent: var(--c-grey-100);
266
296
  --c-text-onRideshare: var(--c-white);
267
297
  --c-text-onError: var(--c-white);
268
298
  --c-text-onSuccess: var(--c-white);
269
- --c-text-onConnect: var(--c-white);
299
+ --c-text-onConnect: var(--c-navy-900);
300
+ --c-text-onKeyExchange: var(--c-navy-900);
301
+ --c-text-onPicked: var(--c-navy-900);
302
+ --c-text-onBase: var(--c-navy-900);
270
303
  --c-text-baseInteractive: var(--c-grey-100);
271
304
  --c-text-baseInteractive--hover: var(--c-grey-300);
272
305
  --c-text-subduedInteractive: var(--c-grey-300);
@@ -280,24 +313,30 @@
280
313
  --c-icon-accent: var(--c-purpleDeep-400);
281
314
  --c-icon-accentAlt: var(--c-grey-100);
282
315
  --c-icon-info: var(--c-yellow-300);
316
+ --c-icon-infoAlt: var(--c-yellow-700);
283
317
  --c-icon-error: var(--c-red-400);
284
318
  --c-icon-errorAlt: var(--c-red-200);
285
319
  --c-icon-success: var(--c-green-700);
286
320
  --c-icon-successAlt: var(--c-green-100);
287
- --c-icon-connect: var(--c-turquoise-700);
321
+ --c-icon-warning: var(--c-orange-300);
322
+ --c-icon-connect: var(--c-newPurple-200);
288
323
  --c-icon-connectAlt: var(--c-turquoise-50);
324
+ --c-icon-keyExchange: var(--c-newViolet-200);
325
+ --c-icon-picked: var(--c-green-500);
326
+ --c-icon-rideshare: var(--c-white);
289
327
  --c-icon-driver: var(--c-navy-700);
290
328
  --c-icon-owner: var(--c-white);
291
- --c-icon-inversed: var(--c-white);
292
329
  --c-icon-disabled: var(--c-black-50);
293
330
  --c-icon-disabledAlt: var(--c-grey-500);
294
- --c-icon-warning: var(--c-orange-300);
295
- --c-icon-infoAlt: var(--c-yellow-700);
331
+ --c-icon-inversed: var(--c-white);
296
332
  --c-icon-onAccent: var(--c-white);
297
- --c-icon-rideshare: var(--c-white);
298
333
  --c-icon-onRideshare: var(--c-white);
299
- --c-icon-onSuccess: var(--c-white);
300
334
  --c-icon-onError: var(--c-white);
335
+ --c-icon-onSuccess: var(--c-white);
336
+ --c-icon-onConnect: var(--c-navy-900);
337
+ --c-icon-onKeyExchange: var(--c-navy-900);
338
+ --c-icon-onPicked: var(--c-navy-900);
339
+ --c-icon-onBase: var(--c-navy-900);
301
340
  --c-icon-baseInteractive: var(--c-grey-100);
302
341
  --c-icon-baseInteractive--hover: var(--c-grey-100);
303
342
  --c-icon-subduedInteractive: var(--c-grey-300);
@@ -308,18 +347,27 @@
308
347
  --c-icon-accentAltInteractive--hover: var(--c-grey-100);
309
348
  --c-stroke-base: var(--c-black-50);
310
349
  --c-stroke-subdued: var(--c-black-100);
350
+ --c-stroke-strong: var(--c-navy-200);
311
351
  --c-stroke-accent: var(--c-purpleDeep-500);
312
352
  --c-stroke-accentAlt: var(--c-purpleDeep-400);
313
- --c-stroke-success: var(--c-green-700);
314
- --c-stroke-successAlt: var(--c-green-700);
315
353
  --c-stroke-error: var(--c-red-200);
316
354
  --c-stroke-errorAlt: var(--c-red-200);
317
- --c-stroke-strong: var(--c-navy-200);
355
+ --c-stroke-success: var(--c-green-700);
356
+ --c-stroke-successAlt: var(--c-green-700);
357
+ --c-stroke-connect: var(--c-newPurple-200);
358
+ --c-stroke-keyExchange: var(--c-newViolet-200);
359
+ --c-stroke-picked: var(--c-green-500);
360
+ --c-stroke-rideshare: var(--c-white);
361
+ --c-stroke-rental: var(--c-turquoise-500);
362
+ --c-stroke-blocker: var(--c-grey-300);
318
363
  --c-stroke-onAccent: var(--c-grey-100);
319
- --c-stroke-rentals: var(--c-turquoise-500);
320
- --c-stroke-blokers: var(--c-grey-300);
321
364
  --c-stroke-onError: var(--c-white);
322
365
  --c-stroke-onSuccess: var(--c-white);
366
+ --c-stroke-onConnect: var(--c-black-1000);
367
+ --c-stroke-onPicked: var(--c-black-1000);
368
+ --c-stroke-onKeyExchange: var(--c-black-1000);
369
+ --c-stroke-onRideshare: var(--c-black-1000);
370
+ --c-stroke-onBase: var(--c-black-1000);
323
371
  --c-stroke-baseInteractive: var(--c-black-50);
324
372
  --c-stroke-baseInteractive--hover: var(--c-purpleDeep-400);
325
373
  --c-stroke-baseInteractive--press: var(--c-purpleDeep-400);
@@ -401,21 +449,21 @@
401
449
  --c-buttonBackground-successAltInteractive: var(--c-green-1000);
402
450
  --c-buttonBackground-successAltInteractive--hover: var(--c-green-900);
403
451
  --c-buttonBackground-successAltInteractive--press: var(--c-green-1000);
404
- --c-fill-base: var(--c-grey-300);
405
- --c-fill-accent: var(--c-purpleDeep-400);
406
- --c-fill-secondary: var(--c-yellow-500);
452
+ --c-fill-base: var(--c-grey-50);
407
453
  --c-fill-subdued: var(--c-black-50);
408
- --c-fill-neutral: var(--c-black-100);
409
- --c-fill-negative: var(--c-red-800);
454
+ --c-fill-secondary: var(--c-yellow-500);
455
+ --c-fill-accent: var(--c-purpleDeep-400);
410
456
  --c-fill-accentAlt: var(--c-purpleDeep-900);
411
- --c-fill-disabled: var(--c-grey-300);
412
457
  --c-fill-error: var(--c-red-500);
413
458
  --c-fill-success: var(--c-green-700);
414
- --c-fill-rentals: var(--c-turquoise-1200);
415
- --c-fill-blockers: var(--c-black-75);
459
+ --c-fill-neutral: var(--c-black-100);
460
+ --c-fill-negative: var(--c-red-800);
461
+ --c-fill-disabled: var(--c-grey-300);
462
+ --c-fill-rental: var(--c-turquoise-1200);
463
+ --c-fill-blocker: var(--c-black-75);
464
+ --c-fill-primary: var(--c-black-1000);
416
465
  --c-illustrations-primary: var(--c-white);
417
466
  --c-illustrations-secondary: var(--c-white);
418
- --c-illustrations-acccent1: var(--c-white);
467
+ --c-illustrations-accent1: var(--c-white);
419
468
  --c-illustrations-accent2: var(--c-white);
420
- --c-illustrations-foregroundDark: var(--c-white);
421
469
  }
package/tokens/palette.js CHANGED
@@ -5,8 +5,7 @@ const purple = {
5
5
  "400": "#C04FB8",
6
6
  "500": "#B01AA7",
7
7
  "700": "#8D1586",
8
- "900": "#5F1159",
9
- "2000": "#D62929"
8
+ "900": "#5F1159"
10
9
  };
11
10
  const purpleDeep = {
12
11
  "100": "#F2A6EE",
@@ -103,6 +102,14 @@ const season = {
103
102
  "900": "#030",
104
103
  "1000": "#001900"
105
104
  };
105
+ const newPurple = {
106
+ "200": "#E46FEE",
107
+ "500": "#BC00CC"
108
+ };
109
+ const newViolet = {
110
+ "200": "#B86FFF",
111
+ "500": "#6C06B5"
112
+ };
106
113
  var _palette = {
107
114
  white: white,
108
115
  purple: purple,
@@ -117,8 +124,10 @@ var _palette = {
117
124
  grey: grey,
118
125
  blue: blue,
119
126
  turquoise: turquoise,
120
- season: season
127
+ season: season,
128
+ newPurple: newPurple,
129
+ newViolet: newViolet
121
130
  };
122
131
 
123
- export { black, blue, _palette as default, green, grey, navy, orange, purple, purpleDeep, purpleLight, red, season, turquoise, white, yellow };
132
+ export { black, blue, _palette as default, green, grey, navy, newPurple, newViolet, orange, purple, purpleDeep, purpleLight, red, season, turquoise, white, yellow };
124
133
  //# sourceMappingURL=palette.js.map
package/tokens/palette.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"palette.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"palette.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/tokens/theme.js CHANGED
@@ -8,8 +8,11 @@ const background = {
8
8
  errorAlt: "red.100/red.900",
9
9
  success: "green.700/green.700",
10
10
  successAlt: "green.100/green.1000",
11
- connect: "turquoise.500/turquoise.700",
11
+ connect: "newPurple.500/newPurple.200",
12
12
  connectAlt: "turquoise.50/turquoise.900",
13
+ keyExchange: "newViolet.500/newViolet.200",
14
+ picked: "green.700/green.500",
15
+ rideshare: "black.1000/black.1000",
13
16
  driver: "yellow.500/yellow.500",
14
17
  owner: "navy.700/navy.700",
15
18
  disabled: "navy.100/black.100",
@@ -21,7 +24,7 @@ const background = {
21
24
  seasonVeryhigh: "season.400/season.1000",
22
25
  rental: "turquoise.100/turquoise.1200",
23
26
  blocker: "navy.100/black.75",
24
- rideshare: "black.1000/black.1000",
27
+ base: "navy.900/navy.50",
25
28
  secondaryInteractive: {
26
29
  DEFAULT: "white/black.300",
27
30
  hover: "navy.50/black.300"
@@ -35,7 +38,7 @@ const background = {
35
38
  hover: "purpleLight.100/purpleDeep.900"
36
39
  },
37
40
  connectInteractive: {
38
- DEFAULT: "turquoise.500/turquoise.700",
41
+ DEFAULT: "newPurple.500/newPurple.200",
39
42
  hover: "turquoise.700/turquoise.700"
40
43
  },
41
44
  errorInteractive: {
@@ -49,23 +52,29 @@ const text = {
49
52
  accent: "purple.500/purpleDeep.400",
50
53
  accentAlt: "purple.500/grey.100",
51
54
  info: "yellow.900/yellow.300",
55
+ infoAlt: "yellow.700/yellow.700",
52
56
  error: "red.500/red.400",
53
57
  errorAlt: "red.500/red.500",
54
58
  success: "green.700/green.700",
55
59
  successAlt: "green.1000/green.100",
56
- connect: "turquoise.500/turquoise.700",
60
+ warning: "orange.500/orange.300",
61
+ connect: "newPurple.500/newPurple.200",
57
62
  connectAlt: "turquoise.900/white",
63
+ keyExchange: "newViolet.500/newViolet.200",
64
+ picked: "green.700/green.500",
65
+ rideshare: "black.1000/white",
58
66
  driver: "navy.700/navy.700",
59
67
  owner: "white/grey.100",
60
- warning: "orange.500/orange.300",
61
- infoAlt: "yellow.700/yellow.700",
62
- inversed: "white/white",
63
68
  disabled: "navy.200/black.50",
69
+ inversed: "white/white",
64
70
  onAccent: "white/grey.100",
65
71
  onRideshare: "white/white",
66
72
  onError: "white/white",
67
73
  onSuccess: "white/white",
68
- onConnect: "white/white",
74
+ onConnect: "white/navy.900",
75
+ onKeyExchange: "white/navy.900",
76
+ onPicked: "white/navy.900",
77
+ onBase: "white/navy.900",
69
78
  baseInteractive: {
70
79
  DEFAULT: "navy.700/grey.100",
71
80
  hover: "navy.900/grey.300"
@@ -89,24 +98,30 @@ const icon = {
89
98
  accent: "purple.500/purpleDeep.400",
90
99
  accentAlt: "purple.500/grey.100",
91
100
  info: "yellow.900/yellow.300",
101
+ infoAlt: "yellow.500/yellow.700",
92
102
  error: "red.500/red.400",
93
103
  errorAlt: "red.500/red.200",
94
104
  success: "green.700/green.700",
95
105
  successAlt: "green.1000/green.100",
96
- connect: "turquoise.500/turquoise.700",
106
+ warning: "orange.500/orange.300",
107
+ connect: "newPurple.500/newPurple.200",
97
108
  connectAlt: "turquoise.900/turquoise.50",
109
+ keyExchange: "newViolet.500/newViolet.200",
110
+ picked: "green.700/green.500",
111
+ rideshare: "black.1000/white",
98
112
  driver: "navy.700/navy.700",
99
113
  owner: "white/white",
100
- inversed: "white/white",
101
- disabled: "navy.100/black.50",
114
+ disabled: "navy.200/black.50",
102
115
  disabledAlt: "navy.300/grey.500",
103
- warning: "orange.500/orange.300",
104
- infoAlt: "yellow.500/yellow.700",
116
+ inversed: "white/white",
105
117
  onAccent: "white/white",
106
- rideshare: "black.1000/white",
107
118
  onRideshare: "white/white",
108
- onSuccess: "white/white",
109
119
  onError: "white/white",
120
+ onSuccess: "white/white",
121
+ onConnect: "white/navy.900",
122
+ onKeyExchange: "white/navy.900",
123
+ onPicked: "white/navy.900",
124
+ onBase: "white/navy.900",
110
125
  baseInteractive: {
111
126
  DEFAULT: "navy.500/grey.100",
112
127
  hover: "navy.700/grey.100"
@@ -127,18 +142,27 @@ const icon = {
127
142
  const stroke = {
128
143
  base: "navy.100/black.50",
129
144
  subdued: "navy.50/black.100",
145
+ strong: "navy.300/navy.200",
130
146
  accent: "purple.500/purpleDeep.500",
131
147
  accentAlt: "purple.300/purpleDeep.400",
132
- success: "green.500/green.700",
133
- successAlt: "green.500/green.700",
134
148
  error: "red.500/red.200",
135
149
  errorAlt: "red.500/red.200",
136
- strong: "navy.300/navy.200",
150
+ success: "green.500/green.700",
151
+ successAlt: "green.500/green.700",
152
+ connect: "newPurple.500/newPurple.200",
153
+ keyExchange: "newViolet.500/newViolet.200",
154
+ picked: "green.700/green.500",
155
+ rideshare: "black.1000/white",
156
+ rental: "turquoise.500/turquoise.500",
157
+ blocker: "navy.300/grey.300",
137
158
  onAccent: "white/grey.100",
138
- rentals: "turquoise.500/turquoise.500",
139
- blokers: "navy.300/grey.300",
140
159
  onError: "white/white",
141
160
  onSuccess: "white/white",
161
+ onConnect: "white/black.1000",
162
+ onPicked: "white/black.1000",
163
+ onKeyExchange: "white/black.1000",
164
+ onRideshare: "white/black.1000",
165
+ onBase: "white/black.1000",
142
166
  baseInteractive: {
143
167
  DEFAULT: "navy.100/black.50",
144
168
  hover: "navy.300/purpleDeep.400",
@@ -264,25 +288,25 @@ const buttonBackground = {
264
288
  }
265
289
  };
266
290
  const fill = {
267
- base: "navy.500/grey.300",
268
- accent: "purple.500/purpleDeep.400",
269
- secondary: "yellow.500/yellow.500",
291
+ base: "navy.500/grey.50",
270
292
  subdued: "navy.100/black.50",
271
- neutral: "navy.50/black.100",
272
- negative: "red.150/red.800",
293
+ secondary: "yellow.500/yellow.500",
294
+ accent: "purple.500/purpleDeep.400",
273
295
  accentAlt: "purple.100/purpleDeep.900",
274
- disabled: "navy.300/grey.300",
275
296
  error: "red.500/red.500",
276
297
  success: "green.500/green.700",
277
- rentals: "turquoise.100/turquoise.1200",
278
- blockers: "navy.120/black.75"
298
+ neutral: "navy.50/black.100",
299
+ negative: "red.150/red.800",
300
+ disabled: "navy.300/grey.300",
301
+ rental: "turquoise.100/turquoise.1200",
302
+ blocker: "navy.120/black.75",
303
+ primary: "white/black.1000"
279
304
  };
280
305
  const illustrations = {
281
306
  primary: "navy.500/white",
282
307
  secondary: "white/white",
283
- acccent1: "purple.500/white",
284
- accent2: "blue.500/white",
285
- foregroundDark: "white/white"
308
+ accent1: "purple.500/white",
309
+ accent2: "blue.500/white"
286
310
  };
287
311
  var _theme = {
288
312
  background: background,
package/tokens/theme.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/types/src/components/Icon/index.d.ts CHANGED
@@ -5,7 +5,7 @@ interface IconsMap {
5
5
  }
6
6
  export declare const BUNDLED_ICONS: IconsMap;
7
7
  export type IconSources = keyof typeof iconTokens.icons;
8
- export declare const iconColors: ("amber" | "blue" | "coral" | "graphite" | "graphiteLight" | "green" | "greenDark" | "greenLight" | "grey" | "greyDark" | "greyLight" | "greyLighter" | "indigo" | "indigoDark" | "purple" | "purpleLight" | "red" | "turquoise" | "white" | "base" | "subdued" | "accent" | "accentAlt" | "info" | "error" | "errorAlt" | "success" | "successAlt" | "connect" | "connectAlt" | "driver" | "owner" | "inversed" | "disabled" | "disabledAlt" | "warning" | "infoAlt" | "onAccent" | "rideshare" | "onRideshare" | "onSuccess" | "onError" | "baseInteractive" | "subduedInteractive" | "accentInteractive" | "accentAltInteractive")[];
8
+ export declare const iconColors: ("amber" | "blue" | "coral" | "graphite" | "graphiteLight" | "green" | "greenDark" | "greenLight" | "grey" | "greyDark" | "greyLight" | "greyLighter" | "indigo" | "indigoDark" | "purple" | "purpleLight" | "red" | "turquoise" | "white" | "base" | "subdued" | "accent" | "accentAlt" | "info" | "infoAlt" | "error" | "errorAlt" | "success" | "successAlt" | "warning" | "connect" | "connectAlt" | "keyExchange" | "picked" | "rideshare" | "driver" | "owner" | "disabled" | "disabledAlt" | "inversed" | "onAccent" | "onRideshare" | "onError" | "onSuccess" | "onConnect" | "onKeyExchange" | "onPicked" | "onBase" | "baseInteractive" | "subduedInteractive" | "accentInteractive" | "accentAltInteractive")[];
9
9
  export type IconColorsType = (typeof iconColors)[number];
10
10
  export interface IconProps {
11
11
  source: IconSources;