@drivy/cobalt 0.42.4 → 0.42.6

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 (12) hide show
  1. package/cjs/tokens/theme.js +11 -0
  2. package/cjs/tokens/theme.js.map +1 -1
  3. package/package.json +1 -1
  4. package/styles/components/Icon/iconColors.scss +4 -0
  5. package/styles/core/_colors-map.scss +11 -0
  6. package/styles/core/default-theme.scss +9 -0
  7. package/styles/core/theme.scss +18 -0
  8. package/tokens/theme.js +11 -0
  9. package/tokens/theme.js.map +1 -1
  10. package/types/src/components/Icon/index.d.ts +1 -1
  11. package/types/src/tokens/index.d.ts +11 -0
  12. package/utilities.css +33 -0
package/cjs/tokens/theme.js CHANGED
@@ -63,11 +63,13 @@ const text = {
63
63
  owner: "white/grey.100",
64
64
  warning: "orange.500/orange.300",
65
65
  infoAlt: "yellow.700/yellow.700",
66
+ inversed: "white/white",
66
67
  disabled: "navy.200/black.50",
67
68
  onAccent: "white/grey.100",
68
69
  onRideshare: "white/white",
69
70
  onError: "white/white",
70
71
  onSuccess: "white/white",
72
+ onConnect: "white/white",
71
73
  baseInteractive: {
72
74
  DEFAULT: "navy.700/grey.100",
73
75
  hover: "navy.900/grey.300"
@@ -99,6 +101,7 @@ const icon = {
99
101
  connectAlt: "turquoise.900/turquoise.50",
100
102
  driver: "navy.700/navy.700",
101
103
  owner: "white/white",
104
+ inversed: "white/white",
102
105
  disabled: "navy.100/black.50",
103
106
  disabledAlt: "navy.300/grey.500",
104
107
  warning: "orange.500/orange.300",
@@ -149,9 +152,15 @@ const stroke = {
149
152
  DEFAULT: "purple.500/purpleDeep.500",
150
153
  hover: "purple.700/purpleDeep.400",
151
154
  press: "purple.900/purpleDeep.400"
155
+ },
156
+ strongInteractive: {
157
+ DEFAULT: "navy.300/navy.200",
158
+ hover: "navy.500/purpleDeep.400",
159
+ press: "navy.700/purpleDeep.400"
152
160
  }
153
161
  };
154
162
  const buttonIcon = {
163
+ selected: "purple.500/grey.100",
155
164
  primary: "white/grey.100",
156
165
  secondary: "purple.500/purpleDeep.400",
157
166
  tertiary: "purple.500/white",
@@ -187,6 +196,7 @@ const buttonIcon = {
187
196
  }
188
197
  };
189
198
  const buttonLabel = {
199
+ selected: "purple.500/grey.100",
190
200
  primary: "white/grey.100",
191
201
  secondary: "purple.500/purpleDeep.400",
192
202
  tertiary: "purple.500/white",
@@ -222,6 +232,7 @@ const buttonLabel = {
222
232
  }
223
233
  };
224
234
  const buttonBackground = {
235
+ selected: "purple.100/purpleDeep.900",
225
236
  primary: "purple.500/purpleDeep.500",
226
237
  secondary: "white/black.500",
227
238
  tertiary: "white/white",
package/cjs/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drivy/cobalt",
3
- "version": "0.42.4",
3
+ "version": "0.42.6",
4
4
  "description": "Opinionated design system for Drivy's projects.",
5
5
  "main": "src/index.js",
6
6
  "types": "types/index.d.ts",
package/styles/components/Icon/iconColors.scss CHANGED
@@ -54,6 +54,10 @@
54
54
  fill: var(--c-icon-owner);
55
55
  }
56
56
 
57
+ .cobalt-Icon--colorInversed {
58
+ fill: var(--c-icon-inversed);
59
+ }
60
+
57
61
  .cobalt-Icon--colorDisabled {
58
62
  fill: var(--c-icon-disabled);
59
63
  }
package/styles/core/_colors-map.scss CHANGED
@@ -64,11 +64,13 @@ $theme-colors-map: (
64
64
  owner: var(--c-text-owner),
65
65
  warning: var(--c-text-warning),
66
66
  infoAlt: var(--c-text-infoAlt),
67
+ inversed: var(--c-text-inversed),
67
68
  disabled: var(--c-text-disabled),
68
69
  onAccent: var(--c-text-onAccent),
69
70
  onRideshare: var(--c-text-onRideshare),
70
71
  onError: var(--c-text-onError),
71
72
  onSuccess: var(--c-text-onSuccess),
73
+ onConnect: var(--c-text-onConnect),
72
74
  baseInteractive: (
73
75
  DEFAULT: var(--c-text-baseInteractive),
74
76
  hover: var(--c-text-baseInteractive--hover)
@@ -100,6 +102,7 @@ $theme-colors-map: (
100
102
  connectAlt: var(--c-icon-connectAlt),
101
103
  driver: var(--c-icon-driver),
102
104
  owner: var(--c-icon-owner),
105
+ inversed: var(--c-icon-inversed),
103
106
  disabled: var(--c-icon-disabled),
104
107
  disabledAlt: var(--c-icon-disabledAlt),
105
108
  warning: var(--c-icon-warning),
@@ -150,9 +153,15 @@ $theme-colors-map: (
150
153
  DEFAULT: var(--c-stroke-accentInteractive),
151
154
  hover: var(--c-stroke-accentInteractive--hover),
152
155
  press: var(--c-stroke-accentInteractive--press)
156
+ ),
157
+ strongInteractive: (
158
+ DEFAULT: var(--c-stroke-strongInteractive),
159
+ hover: var(--c-stroke-strongInteractive--hover),
160
+ press: var(--c-stroke-strongInteractive--press)
153
161
  )
154
162
  ),
155
163
  buttonIcon: (
164
+ selected: var(--c-buttonIcon-selected),
156
165
  primary: var(--c-buttonIcon-primary),
157
166
  secondary: var(--c-buttonIcon-secondary),
158
167
  tertiary: var(--c-buttonIcon-tertiary),
@@ -188,6 +197,7 @@ $theme-colors-map: (
188
197
  )
189
198
  ),
190
199
  buttonLabel: (
200
+ selected: var(--c-buttonLabel-selected),
191
201
  primary: var(--c-buttonLabel-primary),
192
202
  secondary: var(--c-buttonLabel-secondary),
193
203
  tertiary: var(--c-buttonLabel-tertiary),
@@ -223,6 +233,7 @@ $theme-colors-map: (
223
233
  )
224
234
  ),
225
235
  buttonBackground: (
236
+ selected: var(--c-buttonBackground-selected),
226
237
  primary: var(--c-buttonBackground-primary),
227
238
  secondary: var(--c-buttonBackground-secondary),
228
239
  tertiary: var(--c-buttonBackground-tertiary),
package/styles/core/default-theme.scss CHANGED
@@ -51,11 +51,13 @@
51
51
  --c-text-owner: var(--c-white);
52
52
  --c-text-warning: var(--c-orange-500);
53
53
  --c-text-infoAlt: var(--c-yellow-700);
54
+ --c-text-inversed: var(--c-white);
54
55
  --c-text-disabled: var(--c-navy-200);
55
56
  --c-text-onAccent: var(--c-white);
56
57
  --c-text-onRideshare: var(--c-white);
57
58
  --c-text-onError: var(--c-white);
58
59
  --c-text-onSuccess: var(--c-white);
60
+ --c-text-onConnect: var(--c-white);
59
61
  --c-text-baseInteractive: var(--c-navy-700);
60
62
  --c-text-baseInteractive--hover: var(--c-navy-900);
61
63
  --c-text-subduedInteractive: var(--c-navy-300);
@@ -77,6 +79,7 @@
77
79
  --c-icon-connectAlt: var(--c-turquoise-900);
78
80
  --c-icon-driver: var(--c-navy-700);
79
81
  --c-icon-owner: var(--c-white);
82
+ --c-icon-inversed: var(--c-white);
80
83
  --c-icon-disabled: var(--c-navy-100);
81
84
  --c-icon-disabledAlt: var(--c-navy-300);
82
85
  --c-icon-warning: var(--c-orange-500);
@@ -114,6 +117,10 @@
114
117
  --c-stroke-accentInteractive: var(--c-purple-500);
115
118
  --c-stroke-accentInteractive--hover: var(--c-purple-700);
116
119
  --c-stroke-accentInteractive--press: var(--c-purple-900);
120
+ --c-stroke-strongInteractive: var(--c-navy-300);
121
+ --c-stroke-strongInteractive--hover: var(--c-navy-500);
122
+ --c-stroke-strongInteractive--press: var(--c-navy-700);
123
+ --c-buttonIcon-selected: var(--c-purple-500);
117
124
  --c-buttonIcon-primary: var(--c-white);
118
125
  --c-buttonIcon-secondary: var(--c-purple-500);
119
126
  --c-buttonIcon-tertiary: var(--c-purple-500);
@@ -137,6 +144,7 @@
137
144
  --c-buttonIcon-successAltInteractive: var(--c-green-900);
138
145
  --c-buttonIcon-successAltInteractive--hover: var(--c-green-900);
139
146
  --c-buttonIcon-successAltInteractive--press: var(--c-green-900);
147
+ --c-buttonLabel-selected: var(--c-purple-500);
140
148
  --c-buttonLabel-primary: var(--c-white);
141
149
  --c-buttonLabel-secondary: var(--c-purple-500);
142
150
  --c-buttonLabel-tertiary: var(--c-purple-500);
@@ -160,6 +168,7 @@
160
168
  --c-buttonLabel-successAltInteractive: var(--c-green-900);
161
169
  --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
162
170
  --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
171
+ --c-buttonBackground-selected: var(--c-purple-100);
163
172
  --c-buttonBackground-primary: var(--c-purple-500);
164
173
  --c-buttonBackground-secondary: var(--c-white);
165
174
  --c-buttonBackground-tertiary: var(--c-white);
package/styles/core/theme.scss CHANGED
@@ -51,11 +51,13 @@
51
51
  --c-text-owner: var(--c-white);
52
52
  --c-text-warning: var(--c-orange-500);
53
53
  --c-text-infoAlt: var(--c-yellow-700);
54
+ --c-text-inversed: var(--c-white);
54
55
  --c-text-disabled: var(--c-navy-200);
55
56
  --c-text-onAccent: var(--c-white);
56
57
  --c-text-onRideshare: var(--c-white);
57
58
  --c-text-onError: var(--c-white);
58
59
  --c-text-onSuccess: var(--c-white);
60
+ --c-text-onConnect: var(--c-white);
59
61
  --c-text-baseInteractive: var(--c-navy-700);
60
62
  --c-text-baseInteractive--hover: var(--c-navy-900);
61
63
  --c-text-subduedInteractive: var(--c-navy-300);
@@ -77,6 +79,7 @@
77
79
  --c-icon-connectAlt: var(--c-turquoise-900);
78
80
  --c-icon-driver: var(--c-navy-700);
79
81
  --c-icon-owner: var(--c-white);
82
+ --c-icon-inversed: var(--c-white);
80
83
  --c-icon-disabled: var(--c-navy-100);
81
84
  --c-icon-disabledAlt: var(--c-navy-300);
82
85
  --c-icon-warning: var(--c-orange-500);
@@ -114,6 +117,10 @@
114
117
  --c-stroke-accentInteractive: var(--c-purple-500);
115
118
  --c-stroke-accentInteractive--hover: var(--c-purple-700);
116
119
  --c-stroke-accentInteractive--press: var(--c-purple-900);
120
+ --c-stroke-strongInteractive: var(--c-navy-300);
121
+ --c-stroke-strongInteractive--hover: var(--c-navy-500);
122
+ --c-stroke-strongInteractive--press: var(--c-navy-700);
123
+ --c-buttonIcon-selected: var(--c-purple-500);
117
124
  --c-buttonIcon-primary: var(--c-white);
118
125
  --c-buttonIcon-secondary: var(--c-purple-500);
119
126
  --c-buttonIcon-tertiary: var(--c-purple-500);
@@ -137,6 +144,7 @@
137
144
  --c-buttonIcon-successAltInteractive: var(--c-green-900);
138
145
  --c-buttonIcon-successAltInteractive--hover: var(--c-green-900);
139
146
  --c-buttonIcon-successAltInteractive--press: var(--c-green-900);
147
+ --c-buttonLabel-selected: var(--c-purple-500);
140
148
  --c-buttonLabel-primary: var(--c-white);
141
149
  --c-buttonLabel-secondary: var(--c-purple-500);
142
150
  --c-buttonLabel-tertiary: var(--c-purple-500);
@@ -160,6 +168,7 @@
160
168
  --c-buttonLabel-successAltInteractive: var(--c-green-900);
161
169
  --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
162
170
  --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
171
+ --c-buttonBackground-selected: var(--c-purple-100);
163
172
  --c-buttonBackground-primary: var(--c-purple-500);
164
173
  --c-buttonBackground-secondary: var(--c-white);
165
174
  --c-buttonBackground-tertiary: var(--c-white);
@@ -251,11 +260,13 @@
251
260
  --c-text-owner: var(--c-grey-100);
252
261
  --c-text-warning: var(--c-orange-300);
253
262
  --c-text-infoAlt: var(--c-yellow-700);
263
+ --c-text-inversed: var(--c-white);
254
264
  --c-text-disabled: var(--c-black-50);
255
265
  --c-text-onAccent: var(--c-grey-100);
256
266
  --c-text-onRideshare: var(--c-white);
257
267
  --c-text-onError: var(--c-white);
258
268
  --c-text-onSuccess: var(--c-white);
269
+ --c-text-onConnect: var(--c-white);
259
270
  --c-text-baseInteractive: var(--c-grey-100);
260
271
  --c-text-baseInteractive--hover: var(--c-grey-300);
261
272
  --c-text-subduedInteractive: var(--c-grey-300);
@@ -277,6 +288,7 @@
277
288
  --c-icon-connectAlt: var(--c-turquoise-50);
278
289
  --c-icon-driver: var(--c-navy-700);
279
290
  --c-icon-owner: var(--c-white);
291
+ --c-icon-inversed: var(--c-white);
280
292
  --c-icon-disabled: var(--c-black-50);
281
293
  --c-icon-disabledAlt: var(--c-grey-500);
282
294
  --c-icon-warning: var(--c-orange-300);
@@ -314,6 +326,10 @@
314
326
  --c-stroke-accentInteractive: var(--c-purpleDeep-500);
315
327
  --c-stroke-accentInteractive--hover: var(--c-purpleDeep-400);
316
328
  --c-stroke-accentInteractive--press: var(--c-purpleDeep-400);
329
+ --c-stroke-strongInteractive: var(--c-navy-200);
330
+ --c-stroke-strongInteractive--hover: var(--c-purpleDeep-400);
331
+ --c-stroke-strongInteractive--press: var(--c-purpleDeep-400);
332
+ --c-buttonIcon-selected: var(--c-grey-100);
317
333
  --c-buttonIcon-primary: var(--c-grey-100);
318
334
  --c-buttonIcon-secondary: var(--c-purpleDeep-400);
319
335
  --c-buttonIcon-tertiary: var(--c-white);
@@ -337,6 +353,7 @@
337
353
  --c-buttonIcon-successAltInteractive: var(--c-green-100);
338
354
  --c-buttonIcon-successAltInteractive--hover: var(--c-green-100);
339
355
  --c-buttonIcon-successAltInteractive--press: var(--c-green-100);
356
+ --c-buttonLabel-selected: var(--c-grey-100);
340
357
  --c-buttonLabel-primary: var(--c-grey-100);
341
358
  --c-buttonLabel-secondary: var(--c-purpleDeep-400);
342
359
  --c-buttonLabel-tertiary: var(--c-white);
@@ -360,6 +377,7 @@
360
377
  --c-buttonLabel-successAltInteractive: var(--c-green-100);
361
378
  --c-buttonLabel-successAltInteractive--hover: var(--c-green-100);
362
379
  --c-buttonLabel-successAltInteractive--press: var(--c-green-100);
380
+ --c-buttonBackground-selected: var(--c-purpleDeep-900);
363
381
  --c-buttonBackground-primary: var(--c-purpleDeep-500);
364
382
  --c-buttonBackground-secondary: var(--c-black-500);
365
383
  --c-buttonBackground-tertiary: var(--c-white);
package/tokens/theme.js CHANGED
@@ -59,11 +59,13 @@ const text = {
59
59
  owner: "white/grey.100",
60
60
  warning: "orange.500/orange.300",
61
61
  infoAlt: "yellow.700/yellow.700",
62
+ inversed: "white/white",
62
63
  disabled: "navy.200/black.50",
63
64
  onAccent: "white/grey.100",
64
65
  onRideshare: "white/white",
65
66
  onError: "white/white",
66
67
  onSuccess: "white/white",
68
+ onConnect: "white/white",
67
69
  baseInteractive: {
68
70
  DEFAULT: "navy.700/grey.100",
69
71
  hover: "navy.900/grey.300"
@@ -95,6 +97,7 @@ const icon = {
95
97
  connectAlt: "turquoise.900/turquoise.50",
96
98
  driver: "navy.700/navy.700",
97
99
  owner: "white/white",
100
+ inversed: "white/white",
98
101
  disabled: "navy.100/black.50",
99
102
  disabledAlt: "navy.300/grey.500",
100
103
  warning: "orange.500/orange.300",
@@ -145,9 +148,15 @@ const stroke = {
145
148
  DEFAULT: "purple.500/purpleDeep.500",
146
149
  hover: "purple.700/purpleDeep.400",
147
150
  press: "purple.900/purpleDeep.400"
151
+ },
152
+ strongInteractive: {
153
+ DEFAULT: "navy.300/navy.200",
154
+ hover: "navy.500/purpleDeep.400",
155
+ press: "navy.700/purpleDeep.400"
148
156
  }
149
157
  };
150
158
  const buttonIcon = {
159
+ selected: "purple.500/grey.100",
151
160
  primary: "white/grey.100",
152
161
  secondary: "purple.500/purpleDeep.400",
153
162
  tertiary: "purple.500/white",
@@ -183,6 +192,7 @@ const buttonIcon = {
183
192
  }
184
193
  };
185
194
  const buttonLabel = {
195
+ selected: "purple.500/grey.100",
186
196
  primary: "white/grey.100",
187
197
  secondary: "purple.500/purpleDeep.400",
188
198
  tertiary: "purple.500/white",
@@ -218,6 +228,7 @@ const buttonLabel = {
218
228
  }
219
229
  };
220
230
  const buttonBackground = {
231
+ selected: "purple.100/purpleDeep.900",
221
232
  primary: "purple.500/purpleDeep.500",
222
233
  secondary: "white/black.500",
223
234
  tertiary: "white/white",
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" | "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" | "error" | "errorAlt" | "success" | "successAlt" | "connect" | "connectAlt" | "driver" | "owner" | "inversed" | "disabled" | "disabledAlt" | "warning" | "infoAlt" | "onAccent" | "rideshare" | "onRideshare" | "onSuccess" | "onError" | "baseInteractive" | "subduedInteractive" | "accentInteractive" | "accentAltInteractive")[];
9
9
  export type IconColorsType = (typeof iconColors)[number];
10
10
  export interface IconProps {
11
11
  source: IconSources;
package/types/src/tokens/index.d.ts CHANGED
@@ -535,11 +535,13 @@ export declare const theme: {
535
535
  owner: string;
536
536
  warning: string;
537
537
  infoAlt: string;
538
+ inversed: string;
538
539
  disabled: string;
539
540
  onAccent: string;
540
541
  onRideshare: string;
541
542
  onError: string;
542
543
  onSuccess: string;
544
+ onConnect: string;
543
545
  baseInteractive: {
544
546
  DEFAULT: string;
545
547
  hover: string;
@@ -571,6 +573,7 @@ export declare const theme: {
571
573
  connectAlt: string;
572
574
  driver: string;
573
575
  owner: string;
576
+ inversed: string;
574
577
  disabled: string;
575
578
  disabledAlt: string;
576
579
  warning: string;
@@ -622,8 +625,14 @@ export declare const theme: {
622
625
  hover: string;
623
626
  press: string;
624
627
  };
628
+ strongInteractive: {
629
+ DEFAULT: string;
630
+ hover: string;
631
+ press: string;
632
+ };
625
633
  };
626
634
  buttonIcon: {
635
+ selected: string;
627
636
  primary: string;
628
637
  secondary: string;
629
638
  tertiary: string;
@@ -659,6 +668,7 @@ export declare const theme: {
659
668
  };
660
669
  };
661
670
  buttonLabel: {
671
+ selected: string;
662
672
  primary: string;
663
673
  secondary: string;
664
674
  tertiary: string;
@@ -694,6 +704,7 @@ export declare const theme: {
694
704
  };
695
705
  };
696
706
  buttonBackground: {
707
+ selected: string;
697
708
  primary: string;
698
709
  secondary: string;
699
710
  tertiary: string;
package/utilities.css CHANGED
@@ -145,11 +145,13 @@
145
145
  --c-text-owner: var(--c-white);
146
146
  --c-text-warning: var(--c-orange-500);
147
147
  --c-text-infoAlt: var(--c-yellow-700);
148
+ --c-text-inversed: var(--c-white);
148
149
  --c-text-disabled: var(--c-navy-200);
149
150
  --c-text-onAccent: var(--c-white);
150
151
  --c-text-onRideshare: var(--c-white);
151
152
  --c-text-onError: var(--c-white);
152
153
  --c-text-onSuccess: var(--c-white);
154
+ --c-text-onConnect: var(--c-white);
153
155
  --c-text-baseInteractive: var(--c-navy-700);
154
156
  --c-text-baseInteractive--hover: var(--c-navy-900);
155
157
  --c-text-subduedInteractive: var(--c-navy-300);
@@ -171,6 +173,7 @@
171
173
  --c-icon-connectAlt: var(--c-turquoise-900);
172
174
  --c-icon-driver: var(--c-navy-700);
173
175
  --c-icon-owner: var(--c-white);
176
+ --c-icon-inversed: var(--c-white);
174
177
  --c-icon-disabled: var(--c-navy-100);
175
178
  --c-icon-disabledAlt: var(--c-navy-300);
176
179
  --c-icon-warning: var(--c-orange-500);
@@ -208,6 +211,10 @@
208
211
  --c-stroke-accentInteractive: var(--c-purple-500);
209
212
  --c-stroke-accentInteractive--hover: var(--c-purple-700);
210
213
  --c-stroke-accentInteractive--press: var(--c-purple-900);
214
+ --c-stroke-strongInteractive: var(--c-navy-300);
215
+ --c-stroke-strongInteractive--hover: var(--c-navy-500);
216
+ --c-stroke-strongInteractive--press: var(--c-navy-700);
217
+ --c-buttonIcon-selected: var(--c-purple-500);
211
218
  --c-buttonIcon-primary: var(--c-white);
212
219
  --c-buttonIcon-secondary: var(--c-purple-500);
213
220
  --c-buttonIcon-tertiary: var(--c-purple-500);
@@ -231,6 +238,7 @@
231
238
  --c-buttonIcon-successAltInteractive: var(--c-green-900);
232
239
  --c-buttonIcon-successAltInteractive--hover: var(--c-green-900);
233
240
  --c-buttonIcon-successAltInteractive--press: var(--c-green-900);
241
+ --c-buttonLabel-selected: var(--c-purple-500);
234
242
  --c-buttonLabel-primary: var(--c-white);
235
243
  --c-buttonLabel-secondary: var(--c-purple-500);
236
244
  --c-buttonLabel-tertiary: var(--c-purple-500);
@@ -254,6 +262,7 @@
254
262
  --c-buttonLabel-successAltInteractive: var(--c-green-900);
255
263
  --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
256
264
  --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
265
+ --c-buttonBackground-selected: var(--c-purple-100);
257
266
  --c-buttonBackground-primary: var(--c-purple-500);
258
267
  --c-buttonBackground-secondary: var(--c-white);
259
268
  --c-buttonBackground-tertiary: var(--c-white);
@@ -5252,6 +5261,22 @@
5252
5261
  border-color: var(--c-stroke-accentInteractive--press);
5253
5262
  }
5254
5263
 
5264
+ .c-border-strongInteractive {
5265
+ border-color: var(--c-stroke-strongInteractive);
5266
+ }
5267
+
5268
+ .c-border-strongInteractive:hover {
5269
+ border-color: var(--c-stroke-strongInteractive--hover);
5270
+ }
5271
+
5272
+ .c-border-strongInteractive:focus {
5273
+ border-color: var(--c-stroke-strongInteractive--hover);
5274
+ }
5275
+
5276
+ .c-border-strongInteractive:active {
5277
+ border-color: var(--c-stroke-strongInteractive--press);
5278
+ }
5279
+
5255
5280
  .c-bg-primary {
5256
5281
  background-color: var(--c-background-primary);
5257
5282
  }
@@ -5512,6 +5537,10 @@
5512
5537
  color: var(--c-text-infoAlt);
5513
5538
  }
5514
5539
 
5540
+ .c-text-inversed {
5541
+ color: var(--c-text-inversed);
5542
+ }
5543
+
5515
5544
  .c-text-disabled {
5516
5545
  color: var(--c-text-disabled);
5517
5546
  }
@@ -5532,6 +5561,10 @@
5532
5561
  color: var(--c-text-onSuccess);
5533
5562
  }
5534
5563
 
5564
+ .c-text-onConnect {
5565
+ color: var(--c-text-onConnect);
5566
+ }
5567
+
5535
5568
  .c-text-baseInteractive {
5536
5569
  color: var(--c-text-baseInteractive);
5537
5570
  }