@drivy/cobalt 0.42.18 → 0.43.0

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 (21) 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/components/Layout/Components/LayoutStack.js +6 -2
  6. package/components/Layout/Components/LayoutStack.js.map +1 -1
  7. package/package.json +1 -1
  8. package/styles/components/Icon/iconColors.scss +40 -16
  9. package/styles/components/Layout/Components/index.scss +23 -1
  10. package/styles/core/_colors-map.scss +48 -24
  11. package/styles/core/default-theme.scss +52 -28
  12. package/styles/core/palette.scss +4 -1
  13. package/styles/core/theme.scss +105 -57
  14. package/tokens/palette.js +13 -4
  15. package/tokens/palette.js.map +1 -1
  16. package/tokens/theme.js +55 -31
  17. package/tokens/theme.js.map +1 -1
  18. package/types/src/components/Icon/index.d.ts +1 -1
  19. package/types/src/components/Layout/Components/LayoutStack.d.ts +8 -3
  20. package/types/src/tokens/index.d.ts +55 -24
  21. package/utilities.css +174 -71
package/styles/core/default-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,20 +217,20 @@
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
  }
package/styles/core/palette.scss CHANGED
@@ -10,7 +10,6 @@
10
10
  --c-purple-500: #b01aa7;
11
11
  --c-purple-700: #8d1586;
12
12
  --c-purple-900: #5f1159;
13
- --c-purple-2000: #d62929;
14
13
  --c-purpleDeep-100: #f2a6ee;
15
14
  --c-purpleDeep-300: #ea71e3;
16
15
  --c-purpleDeep-400: #c31dba;
@@ -82,4 +81,8 @@
82
81
  --c-season-800: #005100;
83
82
  --c-season-900: #030;
84
83
  --c-season-1000: #001900;
84
+ --c-newPurple-200: #e46fee;
85
+ --c-newPurple-500: #bc00cc;
86
+ --c-newViolet-200: #b86fff;
87
+ --c-newViolet-500: #6c06b5;
85
88
  }
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}