@drivy/cobalt 0.46.2 → 0.46.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 (26) hide show
  1. package/cjs/tokens/palette.js +0 -16
  2. package/cjs/tokens/palette.js.map +1 -1
  3. package/cjs/tokens/theme.js +57 -57
  4. package/cjs/tokens/zIndexes.js +5 -0
  5. package/cjs/tokens/zIndexes.js.map +1 -1
  6. package/components/Sidepanel/index.js +59 -0
  7. package/components/Sidepanel/index.js.map +1 -0
  8. package/index.js +1 -0
  9. package/index.js.map +1 -1
  10. package/package.json +1 -1
  11. package/styles/components/Sidepanel/index.scss +32 -0
  12. package/styles/components.scss +1 -0
  13. package/styles/core/_colors-map.scss +15 -15
  14. package/styles/core/default-theme.scss +24 -24
  15. package/styles/core/palette.scss +0 -8
  16. package/styles/core/theme.scss +77 -77
  17. package/styles/core/z-index.scss +2 -1
  18. package/tokens/palette.js +1 -15
  19. package/tokens/palette.js.map +1 -1
  20. package/tokens/theme.js +57 -57
  21. package/tokens/zIndexes.js +5 -1
  22. package/tokens/zIndexes.js.map +1 -1
  23. package/types/src/components/Sidepanel/index.d.ts +16 -0
  24. package/types/src/index.d.ts +1 -0
  25. package/types/src/tokens/index.d.ts +18 -27
  26. package/utilities.css +60 -32
package/styles/core/theme.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  --c-background-error: var(--c-red-500);
12
12
  --c-background-errorAlt: var(--c-red-100);
13
13
  --c-background-success: var(--c-green-700);
14
- --c-background-successAlt: var(--c-green-100);
14
+ --c-background-successAlt: var(--c-green-300);
15
15
  --c-background-connect: var(--c-newPurple-500);
16
16
  --c-background-connectAlt: var(--c-turquoise-50);
17
17
  --c-background-driver: var(--c-yellow-500);
@@ -33,9 +33,9 @@
33
33
  --c-background-secondaryInteractive: var(--c-white);
34
34
  --c-background-secondaryInteractive--hover: var(--c-navy-50);
35
35
  --c-background-accentInteractive: var(--c-purple-500);
36
- --c-background-accentInteractive--hover: var(--c-purple-700);
36
+ --c-background-accentInteractive--hover: var(--c-purple-600);
37
37
  --c-background-accentAltInteractive: var(--c-purple-200);
38
- --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
38
+ --c-background-accentAltInteractive--hover: var(--c-purple-200);
39
39
  --c-background-connectInteractive: var(--c-newPurple-500);
40
40
  --c-background-connectInteractive--hover: var(--c-turquoise-700);
41
41
  --c-background-errorInteractive: var(--c-red-500);
@@ -48,7 +48,7 @@
48
48
  --c-text-error: var(--c-red-500);
49
49
  --c-text-errorAlt: var(--c-red-500);
50
50
  --c-text-success: var(--c-green-700);
51
- --c-text-successAlt: var(--c-green-1000);
51
+ --c-text-successAlt: var(--c-green-900);
52
52
  --c-text-connect: var(--c-newPurple-500);
53
53
  --c-text-connectAlt: var(--c-turquoise-900);
54
54
  --c-text-driver: var(--c-navy-700);
@@ -90,7 +90,7 @@
90
90
  --c-icon-error: var(--c-red-500);
91
91
  --c-icon-errorAlt: var(--c-red-500);
92
92
  --c-icon-success: var(--c-green-700);
93
- --c-icon-successAlt: var(--c-green-1000);
93
+ --c-icon-successAlt: var(--c-green-900);
94
94
  --c-icon-connect: var(--c-newPurple-500);
95
95
  --c-icon-connectAlt: var(--c-turquoise-900);
96
96
  --c-icon-driver: var(--c-navy-700);
@@ -113,7 +113,7 @@
113
113
  --c-icon-onRental: var(--c-white);
114
114
  --c-icon-inversed: var(--c-white);
115
115
  --c-icon-baseInteractive: var(--c-navy-700);
116
- --c-icon-baseInteractive--hover: var(--c-navy-700);
116
+ --c-icon-baseInteractive--hover: var(--c-navy-900);
117
117
  --c-icon-subduedInteractive: var(--c-navy-400);
118
118
  --c-icon-subduedInteractive--hover: var(--c-navy-500);
119
119
  --c-icon-accentInteractive: var(--c-purple-500);
@@ -149,9 +149,9 @@
149
149
  --c-stroke-accentInteractive: var(--c-purple-500);
150
150
  --c-stroke-accentInteractive--hover: var(--c-purple-700);
151
151
  --c-stroke-accentInteractive--press: var(--c-purple-900);
152
- --c-stroke-strongInteractive: var(--c-navy-300);
153
- --c-stroke-strongInteractive--hover: var(--c-navy-500);
154
- --c-stroke-strongInteractive--press: var(--c-navy-700);
152
+ --c-stroke-strongInteractive: var(--c-grey-300);
153
+ --c-stroke-strongInteractive--hover: var(--c-grey-400);
154
+ --c-stroke-strongInteractive--press: var(--c-grey-500);
155
155
  --c-buttonIcon-selected: var(--c-purple-500);
156
156
  --c-buttonIcon-primary: var(--c-white);
157
157
  --c-buttonIcon-secondary: var(--c-purple-500);
@@ -165,10 +165,10 @@
165
165
  --c-buttonIcon-primaryInteractive--hover: var(--c-white);
166
166
  --c-buttonIcon-primaryInteractive--press: var(--c-white);
167
167
  --c-buttonIcon-secondaryInteractive: var(--c-purple-500);
168
- --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-700);
168
+ --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-500);
169
169
  --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
170
170
  --c-buttonIcon-tertiaryInteractive: var(--c-purple-500);
171
- --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-700);
171
+ --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-500);
172
172
  --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-900);
173
173
  --c-buttonIcon-destructiveInteractive: var(--c-red-500);
174
174
  --c-buttonIcon-destructiveInteractive--hover: var(--c-red-500);
@@ -200,19 +200,6 @@
200
200
  --c-buttonLabel-successAltInteractive: var(--c-green-900);
201
201
  --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
202
202
  --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
203
- --c-fill-base: var(--c-navy-500);
204
- --c-fill-accent: var(--c-purple-500);
205
- --c-fill-secondary: var(--c-yellow-500);
206
- --c-fill-subdued: var(--c-navy-100);
207
- --c-fill-neutral: var(--c-navy-50);
208
- --c-fill-negative: var(--c-red-150);
209
- --c-fill-accentAlt: var(--c-purple-100);
210
- --c-fill-disabled: var(--c-navy-300);
211
- --c-fill-error: var(--c-red-500);
212
- --c-fill-success: var(--c-green-500);
213
- --c-fill-rental: var(--c-blue-300);
214
- --c-fill-blocker: var(--c-grey-100);
215
- --c-fill-primary: var(--c-white);
216
203
  --c-buttonBackground-selected: var(--c-purple-100);
217
204
  --c-buttonBackground-primary: var(--c-purple-500);
218
205
  --c-buttonBackground-secondary: var(--c-white);
@@ -237,6 +224,19 @@
237
224
  --c-buttonBackground-successAltInteractive: var(--c-green-100);
238
225
  --c-buttonBackground-successAltInteractive--hover: var(--c-green-300);
239
226
  --c-buttonBackground-successAltInteractive--press: var(--c-green-400);
227
+ --c-fill-base: var(--c-navy-500);
228
+ --c-fill-accent: var(--c-purple-500);
229
+ --c-fill-secondary: var(--c-yellow-500);
230
+ --c-fill-subdued: var(--c-navy-100);
231
+ --c-fill-neutral: var(--c-navy-50);
232
+ --c-fill-negative: var(--c-red-150);
233
+ --c-fill-accentAlt: var(--c-purple-100);
234
+ --c-fill-disabled: var(--c-navy-300);
235
+ --c-fill-error: var(--c-red-500);
236
+ --c-fill-success: var(--c-green-500);
237
+ --c-fill-rental: var(--c-blue-300);
238
+ --c-fill-blocker: var(--c-grey-100);
239
+ --c-fill-primary: var(--c-white);
240
240
  --c-illustrations-primary: var(--c-navy-500);
241
241
  --c-illustrations-secondary: var(--c-white);
242
242
  --c-illustrations-accent1: var(--c-purple-500);
@@ -247,7 +247,7 @@
247
247
  --c-background-primary: var(--c-black-500);
248
248
  --c-background-secondary: var(--c-black-400);
249
249
  --c-background-accent: var(--c-purple-400);
250
- --c-background-accentAlt: var(--c-purple-900);
250
+ --c-background-accentAlt: var(--c-purple-1000);
251
251
  --c-background-info: var(--c-yellow-1000);
252
252
  --c-background-error: var(--c-red-500);
253
253
  --c-background-errorAlt: var(--c-red-1500);
@@ -274,22 +274,22 @@
274
274
  --c-background-secondaryInteractive: var(--c-black-400);
275
275
  --c-background-secondaryInteractive--hover: var(--c-black-300);
276
276
  --c-background-accentInteractive: var(--c-purple-400);
277
- --c-background-accentInteractive--hover: var(--c-purpleDeep-400);
278
- --c-background-accentAltInteractive: var(--c-purple-900);
279
- --c-background-accentAltInteractive--hover: var(--c-purpleDeep-900);
277
+ --c-background-accentInteractive--hover: var(--c-purple-700);
278
+ --c-background-accentAltInteractive: var(--c-purple-1000);
279
+ --c-background-accentAltInteractive--hover: var(--c-purple-900);
280
280
  --c-background-connectInteractive: var(--c-newPurple-200);
281
281
  --c-background-connectInteractive--hover: var(--c-turquoise-700);
282
282
  --c-background-errorInteractive: var(--c-red-500);
283
283
  --c-background-errorInteractive--hover: var(--c-red-500);
284
284
  --c-text-base: var(--c-grey-100);
285
285
  --c-text-subdued: var(--c-grey-300);
286
- --c-text-accent: var(--c-purple-300);
286
+ --c-text-accent: var(--c-purple-400);
287
287
  --c-text-accentAlt: var(--c-purple-200);
288
288
  --c-text-info: var(--c-yellow-400);
289
289
  --c-text-error: var(--c-red-400);
290
290
  --c-text-errorAlt: var(--c-red-200);
291
291
  --c-text-success: var(--c-green-400);
292
- --c-text-successAlt: var(--c-green-400);
292
+ --c-text-successAlt: var(--c-green-300);
293
293
  --c-text-connect: var(--c-newPurple-200);
294
294
  --c-text-connectAlt: var(--c-white);
295
295
  --c-text-driver: var(--c-navy-700);
@@ -318,20 +318,20 @@
318
318
  --c-text-baseInteractive: var(--c-grey-100);
319
319
  --c-text-baseInteractive--hover: var(--c-grey-300);
320
320
  --c-text-subduedInteractive: var(--c-grey-300);
321
- --c-text-subduedInteractive--hover: var(--c-grey-300);
322
- --c-text-accentInteractive: var(--c-purple-300);
323
- --c-text-accentInteractive--hover: var(--c-purpleDeep-400);
321
+ --c-text-subduedInteractive--hover: var(--c-grey-400);
322
+ --c-text-accentInteractive: var(--c-purple-400);
323
+ --c-text-accentInteractive--hover: var(--c-purple-500);
324
324
  --c-text-accentAltInteractive: var(--c-purple-200);
325
- --c-text-accentAltInteractive--hover: var(--c-grey-100);
325
+ --c-text-accentAltInteractive--hover: var(--c-purple-400);
326
326
  --c-icon-base: var(--c-grey-100);
327
327
  --c-icon-subdued: var(--c-grey-300);
328
- --c-icon-accent: var(--c-purple-300);
328
+ --c-icon-accent: var(--c-purple-400);
329
329
  --c-icon-accentAlt: var(--c-purple-200);
330
330
  --c-icon-info: var(--c-yellow-400);
331
331
  --c-icon-error: var(--c-red-400);
332
332
  --c-icon-errorAlt: var(--c-red-200);
333
333
  --c-icon-success: var(--c-green-400);
334
- --c-icon-successAlt: var(--c-green-400);
334
+ --c-icon-successAlt: var(--c-green-300);
335
335
  --c-icon-connect: var(--c-newPurple-200);
336
336
  --c-icon-connectAlt: var(--c-turquoise-50);
337
337
  --c-icon-driver: var(--c-navy-700);
@@ -354,20 +354,20 @@
354
354
  --c-icon-onRental: var(--c-white);
355
355
  --c-icon-inversed: var(--c-white);
356
356
  --c-icon-baseInteractive: var(--c-grey-100);
357
- --c-icon-baseInteractive--hover: var(--c-grey-100);
357
+ --c-icon-baseInteractive--hover: var(--c-grey-200);
358
358
  --c-icon-subduedInteractive: var(--c-grey-300);
359
- --c-icon-subduedInteractive--hover: var(--c-grey-300);
360
- --c-icon-accentInteractive: var(--c-purple-300);
361
- --c-icon-accentInteractive--hover: var(--c-purpleDeep-400);
359
+ --c-icon-subduedInteractive--hover: var(--c-grey-400);
360
+ --c-icon-accentInteractive: var(--c-purple-400);
361
+ --c-icon-accentInteractive--hover: var(--c-purple-500);
362
362
  --c-icon-accentAltInteractive: var(--c-purple-200);
363
- --c-icon-accentAltInteractive--hover: var(--c-grey-100);
363
+ --c-icon-accentAltInteractive--hover: var(--c-purple-400);
364
364
  --c-stroke-base: var(--c-black-100);
365
365
  --c-stroke-subdued: var(--c-black-100);
366
366
  --c-stroke-accent: var(--c-purple-400);
367
367
  --c-stroke-accentAlt: var(--c-purple-400);
368
368
  --c-stroke-success: var(--c-green-700);
369
369
  --c-stroke-successAlt: var(--c-green-700);
370
- --c-stroke-error: var(--c-red-200);
370
+ --c-stroke-error: var(--c-red-400);
371
371
  --c-stroke-errorAlt: var(--c-red-200);
372
372
  --c-stroke-strong: var(--c-grey-700);
373
373
  --c-stroke-onAccent: var(--c-grey-100);
@@ -385,14 +385,14 @@
385
385
  --c-stroke-rideshare: var(--c-white);
386
386
  --c-stroke-onBase: var(--c-black-600);
387
387
  --c-stroke-baseInteractive: var(--c-black-100);
388
- --c-stroke-baseInteractive--hover: var(--c-purpleDeep-400);
389
- --c-stroke-baseInteractive--press: var(--c-purpleDeep-400);
388
+ --c-stroke-baseInteractive--hover: var(--c-black-300);
389
+ --c-stroke-baseInteractive--press: var(--c-black-500);
390
390
  --c-stroke-accentInteractive: var(--c-purple-400);
391
- --c-stroke-accentInteractive--hover: var(--c-purpleDeep-400);
392
- --c-stroke-accentInteractive--press: var(--c-purpleDeep-400);
393
- --c-stroke-strongInteractive: var(--c-navy-200);
394
- --c-stroke-strongInteractive--hover: var(--c-purpleDeep-400);
395
- --c-stroke-strongInteractive--press: var(--c-purpleDeep-400);
391
+ --c-stroke-accentInteractive--hover: var(--c-purple-600);
392
+ --c-stroke-accentInteractive--press: var(--c-purple-800);
393
+ --c-stroke-strongInteractive: var(--c-grey-700);
394
+ --c-stroke-strongInteractive--hover: var(--c-black-50);
395
+ --c-stroke-strongInteractive--press: var(--c-black-100);
396
396
  --c-buttonIcon-selected: var(--c-grey-100);
397
397
  --c-buttonIcon-primary: var(--c-black-1000);
398
398
  --c-buttonIcon-secondary: var(--c-purple-300);
@@ -403,14 +403,14 @@
403
403
  --c-buttonIcon-disabled: var(--c-grey-300);
404
404
  --c-buttonIcon-accentAlt: var(--c-grey-100);
405
405
  --c-buttonIcon-primaryInteractive: var(--c-black-1000);
406
- --c-buttonIcon-primaryInteractive--hover: var(--c-white);
407
- --c-buttonIcon-primaryInteractive--press: var(--c-white);
406
+ --c-buttonIcon-primaryInteractive--hover: var(--c-black-1000);
407
+ --c-buttonIcon-primaryInteractive--press: var(--c-black-1000);
408
408
  --c-buttonIcon-secondaryInteractive: var(--c-purple-300);
409
- --c-buttonIcon-secondaryInteractive--hover: var(--c-purpleDeep-700);
410
- --c-buttonIcon-secondaryInteractive--press: var(--c-purpleDeep-900);
409
+ --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-300);
410
+ --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
411
411
  --c-buttonIcon-tertiaryInteractive: var(--c-white);
412
- --c-buttonIcon-tertiaryInteractive--hover: var(--c-purpleDeep-700);
413
- --c-buttonIcon-tertiaryInteractive--press: var(--c-purpleDeep-900);
412
+ --c-buttonIcon-tertiaryInteractive--hover: var(--c-white);
413
+ --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-1000);
414
414
  --c-buttonIcon-destructiveInteractive: var(--c-red-200);
415
415
  --c-buttonIcon-destructiveInteractive--hover: var(--c-red-200);
416
416
  --c-buttonIcon-destructiveInteractive--press: var(--c-red-200);
@@ -427,45 +427,32 @@
427
427
  --c-buttonLabel-success: var(--c-green-100);
428
428
  --c-buttonLabel-successAlt: var(--c-green-100);
429
429
  --c-buttonLabel-primaryInteractive: var(--c-black-1000);
430
- --c-buttonLabel-primaryInteractive--hover: var(--c-white);
431
- --c-buttonLabel-primaryInteractive--press: var(--c-white);
430
+ --c-buttonLabel-primaryInteractive--hover: var(--c-black-1000);
431
+ --c-buttonLabel-primaryInteractive--press: var(--c-black-1000);
432
432
  --c-buttonLabel-secondaryInteractive: var(--c-purple-300);
433
- --c-buttonLabel-secondaryInteractive--hover: var(--c-purpleDeep-700);
434
- --c-buttonLabel-secondaryInteractive--press: var(--c-purpleDeep-900);
433
+ --c-buttonLabel-secondaryInteractive--hover: var(--c-purple-300);
434
+ --c-buttonLabel-secondaryInteractive--press: var(--c-purple-900);
435
435
  --c-buttonLabel-tertiaryInteractive: var(--c-white);
436
- --c-buttonLabel-tertiaryInteractive--hover: var(--c-purpleDeep-700);
437
- --c-buttonLabel-tertiaryInteractive--press: var(--c-purpleDeep-900);
436
+ --c-buttonLabel-tertiaryInteractive--hover: var(--c-white);
437
+ --c-buttonLabel-tertiaryInteractive--press: var(--c-purple-1000);
438
438
  --c-buttonLabel-destructiveInteractive: var(--c-red-200);
439
439
  --c-buttonLabel-destructiveInteractive--hover: var(--c-red-200);
440
440
  --c-buttonLabel-destructiveInteractive--press: var(--c-red-200);
441
441
  --c-buttonLabel-successAltInteractive: var(--c-green-100);
442
442
  --c-buttonLabel-successAltInteractive--hover: var(--c-green-100);
443
443
  --c-buttonLabel-successAltInteractive--press: var(--c-green-100);
444
- --c-fill-base: var(--c-navy-50);
445
- --c-fill-accent: var(--c-purpleDeep-400);
446
- --c-fill-secondary: var(--c-yellow-400);
447
- --c-fill-subdued: var(--c-black-50);
448
- --c-fill-neutral: var(--c-black-100);
449
- --c-fill-negative: var(--c-red-800);
450
- --c-fill-accentAlt: var(--c-purpleDeep-900);
451
- --c-fill-disabled: var(--c-grey-300);
452
- --c-fill-error: var(--c-red-500);
453
- --c-fill-success: var(--c-green-700);
454
- --c-fill-rental: var(--c-blue-700);
455
- --c-fill-blocker: var(--c-black-200);
456
- --c-fill-primary: var(--c-black-1000);
457
444
  --c-buttonBackground-selected: var(--c-purpleDeep-900);
458
445
  --c-buttonBackground-primary: var(--c-purple-400);
459
446
  --c-buttonBackground-secondary: var(--c-black-100);
460
447
  --c-buttonBackground-tertiary: var(--c-white);
461
- --c-buttonBackground-accentAlt: var(--c-purpleDeep-900);
448
+ --c-buttonBackground-accentAlt: var(--c-purple-900);
462
449
  --c-buttonBackground-destructive: var(--c-red-900);
463
450
  --c-buttonBackground-success: var(--c-green-900);
464
451
  --c-buttonBackground-successAlt: var(--c-green-1000);
465
452
  --c-buttonBackground-disabled: var(--c-black-50);
466
453
  --c-buttonBackground-primaryInteractive: var(--c-purple-400);
467
- --c-buttonBackground-primaryInteractive--hover: var(--c-purpleDeep-700);
468
- --c-buttonBackground-primaryInteractive--press: var(--c-purpleDeep-900);
454
+ --c-buttonBackground-primaryInteractive--hover: var(--c-purple-800);
455
+ --c-buttonBackground-primaryInteractive--press: var(--c-purple-1000);
469
456
  --c-buttonBackground-secondaryInteractive: var(--c-black-100);
470
457
  --c-buttonBackground-secondaryInteractive--hover: var(--c-black-500);
471
458
  --c-buttonBackground-secondaryInteractive--press: var(--c-black-500);
@@ -478,6 +465,19 @@
478
465
  --c-buttonBackground-successAltInteractive: var(--c-green-1000);
479
466
  --c-buttonBackground-successAltInteractive--hover: var(--c-green-900);
480
467
  --c-buttonBackground-successAltInteractive--press: var(--c-green-1000);
468
+ --c-fill-base: var(--c-navy-50);
469
+ --c-fill-accent: var(--c-purple-400);
470
+ --c-fill-secondary: var(--c-yellow-400);
471
+ --c-fill-subdued: var(--c-black-50);
472
+ --c-fill-neutral: var(--c-black-100);
473
+ --c-fill-negative: var(--c-red-800);
474
+ --c-fill-accentAlt: var(--c-purple-900);
475
+ --c-fill-disabled: var(--c-grey-300);
476
+ --c-fill-error: var(--c-red-500);
477
+ --c-fill-success: var(--c-green-700);
478
+ --c-fill-rental: var(--c-blue-700);
479
+ --c-fill-blocker: var(--c-black-200);
480
+ --c-fill-primary: var(--c-black-1000);
481
481
  --c-illustrations-primary: var(--c-white);
482
482
  --c-illustrations-secondary: var(--c-white);
483
483
  --c-illustrations-accent1: var(--c-white);
package/styles/core/z-index.scss CHANGED
@@ -7,7 +7,8 @@ $z-index-data: (
7
7
  "header": 30,
8
8
  "modal": 90,
9
9
  "flash": 100,
10
- "alert": 100
10
+ "alert": 100,
11
+ "sidepanel": 80
11
12
  );
12
13
 
13
14
  @function zx($level: base) {
package/tokens/palette.js CHANGED
@@ -13,18 +13,6 @@ const purple = {
13
13
  "1100": "#280626",
14
14
  "1200": "#160315"
15
15
  };
16
- const purpleDeep = {
17
- "100": "#F2A6EE",
18
- "300": "#EA71E3",
19
- "400": "#C31DBA",
20
- "500": "#9B1794",
21
- "700": "#73116E",
22
- "900": "#4B0B48",
23
- "1000": "#3E093C"
24
- };
25
- const purpleLight = {
26
- "100": "#FFDCFD"
27
- };
28
16
  const navy = {
29
17
  "50": "#F1F1F4",
30
18
  "100": "#E3E2E8",
@@ -157,8 +145,6 @@ const newViolet = {
157
145
  var _palette = {
158
146
  white: white,
159
147
  purple: purple,
160
- purpleDeep: purpleDeep,
161
- purpleLight: purpleLight,
162
148
  navy: navy,
163
149
  yellow: yellow,
164
150
  green: green,
@@ -173,5 +159,5 @@ var _palette = {
173
159
  newViolet: newViolet
174
160
  };
175
161
 
176
- export { black, blue, _palette as default, green, grey, navy, newPurple, newViolet, orange, purple, purpleDeep, purpleLight, red, season, turquoise, white, yellow };
162
+ export { black, blue, _palette as default, green, grey, navy, newPurple, newViolet, orange, purple, red, season, turquoise, white, yellow };
177
163
  //# 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
@@ -2,12 +2,12 @@ const background = {
2
2
  primary: "white/black.500",
3
3
  secondary: "white/black.400",
4
4
  accent: "purple.500/purple.400",
5
- accentAlt: "purple.200/purple.900",
5
+ accentAlt: "purple.200/purple.1000",
6
6
  info: "yellow.100/yellow.1000",
7
7
  error: "red.500/red.500",
8
8
  errorAlt: "red.100/red.1500",
9
9
  success: "green.700/green.700",
10
- successAlt: "green.100/green.1200",
10
+ successAlt: "green.300/green.1200",
11
11
  connect: "newPurple.500/newPurple.200",
12
12
  connectAlt: "turquoise.50/turquoise.900",
13
13
  driver: "yellow.500/yellow.500",
@@ -32,11 +32,11 @@ const background = {
32
32
  },
33
33
  accentInteractive: {
34
34
  DEFAULT: "purple.500/purple.400",
35
- hover: "purple.700/purpleDeep.400"
35
+ hover: "purple.600/purple.700"
36
36
  },
37
37
  accentAltInteractive: {
38
- DEFAULT: "purple.200/purple.900",
39
- hover: "purpleLight.100/purpleDeep.900"
38
+ DEFAULT: "purple.200/purple.1000",
39
+ hover: "purple.200/purple.900"
40
40
  },
41
41
  connectInteractive: {
42
42
  DEFAULT: "newPurple.500/newPurple.200",
@@ -50,13 +50,13 @@ const background = {
50
50
  const text = {
51
51
  base: "navy.700/grey.100",
52
52
  subdued: "navy.400/grey.300",
53
- accent: "purple.500/purple.300",
53
+ accent: "purple.500/purple.400",
54
54
  accentAlt: "purple.700/purple.200",
55
55
  info: "yellow.900/yellow.400",
56
56
  error: "red.500/red.400",
57
57
  errorAlt: "red.500/red.200",
58
58
  success: "green.700/green.400",
59
- successAlt: "green.1000/green.400",
59
+ successAlt: "green.900/green.300",
60
60
  connect: "newPurple.500/newPurple.200",
61
61
  connectAlt: "turquoise.900/white",
62
62
  driver: "navy.700/navy.700",
@@ -88,27 +88,27 @@ const text = {
88
88
  },
89
89
  subduedInteractive: {
90
90
  DEFAULT: "navy.400/grey.300",
91
- hover: "navy.500/grey.300"
91
+ hover: "navy.500/grey.400"
92
92
  },
93
93
  accentInteractive: {
94
- DEFAULT: "purple.500/purple.300",
95
- hover: "purple.700/purpleDeep.400"
94
+ DEFAULT: "purple.500/purple.400",
95
+ hover: "purple.700/purple.500"
96
96
  },
97
97
  accentAltInteractive: {
98
98
  DEFAULT: "purple.700/purple.200",
99
- hover: "purple.700/grey.100"
99
+ hover: "purple.700/purple.400"
100
100
  }
101
101
  };
102
102
  const icon = {
103
103
  base: "navy.700/grey.100",
104
104
  subdued: "navy.400/grey.300",
105
- accent: "purple.500/purple.300",
105
+ accent: "purple.500/purple.400",
106
106
  accentAlt: "purple.700/purple.200",
107
107
  info: "yellow.900/yellow.400",
108
108
  error: "red.500/red.400",
109
109
  errorAlt: "red.500/red.200",
110
110
  success: "green.700/green.400",
111
- successAlt: "green.1000/green.400",
111
+ successAlt: "green.900/green.300",
112
112
  connect: "newPurple.500/newPurple.200",
113
113
  connectAlt: "turquoise.900/turquoise.50",
114
114
  driver: "navy.700/navy.700",
@@ -132,19 +132,19 @@ const icon = {
132
132
  inversed: "white/white",
133
133
  baseInteractive: {
134
134
  DEFAULT: "navy.700/grey.100",
135
- hover: "navy.700/grey.100"
135
+ hover: "navy.900/grey.200"
136
136
  },
137
137
  subduedInteractive: {
138
138
  DEFAULT: "navy.400/grey.300",
139
- hover: "navy.500/grey.300"
139
+ hover: "navy.500/grey.400"
140
140
  },
141
141
  accentInteractive: {
142
- DEFAULT: "purple.500/purple.300",
143
- hover: "purple.700/purpleDeep.400"
142
+ DEFAULT: "purple.500/purple.400",
143
+ hover: "purple.700/purple.500"
144
144
  },
145
145
  accentAltInteractive: {
146
146
  DEFAULT: "purple.700/purple.200",
147
- hover: "purple.700/grey.100"
147
+ hover: "purple.700/purple.400"
148
148
  }
149
149
  };
150
150
  const stroke = {
@@ -154,7 +154,7 @@ const stroke = {
154
154
  accentAlt: "purple.600/purple.400",
155
155
  success: "green.500/green.700",
156
156
  successAlt: "green.500/green.700",
157
- error: "red.500/red.200",
157
+ error: "red.500/red.400",
158
158
  errorAlt: "red.500/red.200",
159
159
  strong: "grey.300/grey.700",
160
160
  onAccent: "white/grey.100",
@@ -173,18 +173,18 @@ const stroke = {
173
173
  onBase: "white/black.600",
174
174
  baseInteractive: {
175
175
  DEFAULT: "navy.100/black.100",
176
- hover: "navy.300/purpleDeep.400",
177
- press: "navy.500/purpleDeep.400"
176
+ hover: "navy.300/black.300",
177
+ press: "navy.500/black.500"
178
178
  },
179
179
  accentInteractive: {
180
180
  DEFAULT: "purple.500/purple.400",
181
- hover: "purple.700/purpleDeep.400",
182
- press: "purple.900/purpleDeep.400"
181
+ hover: "purple.700/purple.600",
182
+ press: "purple.900/purple.800"
183
183
  },
184
184
  strongInteractive: {
185
- DEFAULT: "navy.300/navy.200",
186
- hover: "navy.500/purpleDeep.400",
187
- press: "navy.700/purpleDeep.400"
185
+ DEFAULT: "grey.300/grey.700",
186
+ hover: "grey.400/black.50",
187
+ press: "grey.500/black.100"
188
188
  }
189
189
  };
190
190
  const buttonIcon = {
@@ -199,18 +199,18 @@ const buttonIcon = {
199
199
  accentAlt: "purple.500/grey.100",
200
200
  primaryInteractive: {
201
201
  DEFAULT: "white/black.1000",
202
- hover: "white/white",
203
- press: "white/white"
202
+ hover: "white/black.1000",
203
+ press: "white/black.1000"
204
204
  },
205
205
  secondaryInteractive: {
206
206
  DEFAULT: "purple.500/purple.300",
207
- hover: "purple.700/purpleDeep.700",
208
- press: "purple.900/purpleDeep.900"
207
+ hover: "purple.500/purple.300",
208
+ press: "purple.900/purple.900"
209
209
  },
210
210
  tertiaryInteractive: {
211
211
  DEFAULT: "purple.500/white",
212
- hover: "purple.700/purpleDeep.700",
213
- press: "purple.900/purpleDeep.900"
212
+ hover: "purple.500/white",
213
+ press: "purple.900/purple.1000"
214
214
  },
215
215
  destructiveInteractive: {
216
216
  DEFAULT: "red.500/red.200",
@@ -235,18 +235,18 @@ const buttonLabel = {
235
235
  successAlt: "green.900/green.100",
236
236
  primaryInteractive: {
237
237
  DEFAULT: "white/black.1000",
238
- hover: "white/white",
239
- press: "white/white"
238
+ hover: "white/black.1000",
239
+ press: "white/black.1000"
240
240
  },
241
241
  secondaryInteractive: {
242
242
  DEFAULT: "purple.500/purple.300",
243
- hover: "purple.700/purpleDeep.700",
244
- press: "purple.900/purpleDeep.900"
243
+ hover: "purple.700/purple.300",
244
+ press: "purple.900/purple.900"
245
245
  },
246
246
  tertiaryInteractive: {
247
247
  DEFAULT: "purple.500/white",
248
- hover: "purple.700/purpleDeep.700",
249
- press: "purple.900/purpleDeep.900"
248
+ hover: "purple.700/white",
249
+ press: "purple.900/purple.1000"
250
250
  },
251
251
  destructiveInteractive: {
252
252
  DEFAULT: "red.500/red.200",
@@ -259,35 +259,20 @@ const buttonLabel = {
259
259
  press: "green.900/green.100"
260
260
  }
261
261
  };
262
- const fill = {
263
- base: "navy.500/navy.50",
264
- accent: "purple.500/purpleDeep.400",
265
- secondary: "yellow.500/yellow.400",
266
- subdued: "navy.100/black.50",
267
- neutral: "navy.50/black.100",
268
- negative: "red.150/red.800",
269
- accentAlt: "purple.100/purpleDeep.900",
270
- disabled: "navy.300/grey.300",
271
- error: "red.500/red.500",
272
- success: "green.500/green.700",
273
- rental: "blue.300/blue.700",
274
- blocker: "grey.100/black.200",
275
- primary: "white/black.1000"
276
- };
277
262
  const buttonBackground = {
278
263
  selected: "purple.100/purpleDeep.900",
279
264
  primary: "purple.500/purple.400",
280
265
  secondary: "white/black.100",
281
266
  tertiary: "white/white",
282
- accentAlt: "purple.100/purpleDeep.900",
267
+ accentAlt: "purple.100/purple.900",
283
268
  destructive: "red.100/red.900",
284
269
  success: "green.700/green.900",
285
270
  successAlt: "green.100/green.1000",
286
271
  disabled: "navy.100/black.50",
287
272
  primaryInteractive: {
288
273
  DEFAULT: "purple.500/purple.400",
289
- hover: "purple.700/purpleDeep.700",
290
- press: "purple.900/purpleDeep.900"
274
+ hover: "purple.700/purple.800",
275
+ press: "purple.900/purple.1000"
291
276
  },
292
277
  secondaryInteractive: {
293
278
  DEFAULT: "white/black.100",
@@ -310,6 +295,21 @@ const buttonBackground = {
310
295
  press: "green.400/green.1000"
311
296
  }
312
297
  };
298
+ const fill = {
299
+ base: "navy.500/navy.50",
300
+ accent: "purple.500/purple.400",
301
+ secondary: "yellow.500/yellow.400",
302
+ subdued: "navy.100/black.50",
303
+ neutral: "navy.50/black.100",
304
+ negative: "red.150/red.800",
305
+ accentAlt: "purple.100/purple.900",
306
+ disabled: "navy.300/grey.300",
307
+ error: "red.500/red.500",
308
+ success: "green.500/green.700",
309
+ rental: "blue.300/blue.700",
310
+ blocker: "grey.100/black.200",
311
+ primary: "white/black.1000"
312
+ };
313
313
  const illustrations = {
314
314
  primary: "navy.500/white",
315
315
  secondary: "white/white",
@@ -323,8 +323,8 @@ var _theme = {
323
323
  stroke: stroke,
324
324
  buttonIcon: buttonIcon,
325
325
  buttonLabel: buttonLabel,
326
- fill: fill,
327
326
  buttonBackground: buttonBackground,
327
+ fill: fill,
328
328
  illustrations: illustrations
329
329
  };
330
330
 
package/tokens/zIndexes.js CHANGED
@@ -4,6 +4,7 @@ const above = 1;
4
4
  const dropdown = 10;
5
5
  const nav = 20;
6
6
  const header = 30;
7
+ const sidepanel = 80;
7
8
  const modal = 90;
8
9
  const alert = 100;
9
10
  var _zIndexes = {
@@ -19,6 +20,9 @@ var _zIndexes = {
19
20
  "header-below": 29,
20
21
  header: header,
21
22
  "header-above": 31,
23
+ "sidepanel-below": 79,
24
+ sidepanel: sidepanel,
25
+ "sidepanel-above": 81,
22
26
  "modal-below": 89,
23
27
  modal: modal,
24
28
  "modal-above": 91,
@@ -27,5 +31,5 @@ var _zIndexes = {
27
31
  "alert-above": 101
28
32
  };
29
33
 
30
- export { above, alert, base, below, _zIndexes as default, dropdown, header, modal, nav };
34
+ export { above, alert, base, below, _zIndexes as default, dropdown, header, modal, nav, sidepanel };
31
35
  //# sourceMappingURL=zIndexes.js.map
package/tokens/zIndexes.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"zIndexes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"zIndexes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}