@drivy/cobalt 0.42.5 → 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 +9 -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 +9 -0
  6. package/styles/core/default-theme.scss +7 -0
  7. package/styles/core/theme.scss +14 -0
  8. package/tokens/theme.js +9 -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 +9 -0
  12. package/utilities.css +23 -0
package/cjs/tokens/theme.js CHANGED
@@ -101,6 +101,7 @@ const icon = {
101
101
  connectAlt: "turquoise.900/turquoise.50",
102
102
  driver: "navy.700/navy.700",
103
103
  owner: "white/white",
104
+ inversed: "white/white",
104
105
  disabled: "navy.100/black.50",
105
106
  disabledAlt: "navy.300/grey.500",
106
107
  warning: "orange.500/orange.300",
@@ -151,9 +152,15 @@ const stroke = {
151
152
  DEFAULT: "purple.500/purpleDeep.500",
152
153
  hover: "purple.700/purpleDeep.400",
153
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"
154
160
  }
155
161
  };
156
162
  const buttonIcon = {
163
+ selected: "purple.500/grey.100",
157
164
  primary: "white/grey.100",
158
165
  secondary: "purple.500/purpleDeep.400",
159
166
  tertiary: "purple.500/white",
@@ -189,6 +196,7 @@ const buttonIcon = {
189
196
  }
190
197
  };
191
198
  const buttonLabel = {
199
+ selected: "purple.500/grey.100",
192
200
  primary: "white/grey.100",
193
201
  secondary: "purple.500/purpleDeep.400",
194
202
  tertiary: "purple.500/white",
@@ -224,6 +232,7 @@ const buttonLabel = {
224
232
  }
225
233
  };
226
234
  const buttonBackground = {
235
+ selected: "purple.100/purpleDeep.900",
227
236
  primary: "purple.500/purpleDeep.500",
228
237
  secondary: "white/black.500",
229
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.5",
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
@@ -102,6 +102,7 @@ $theme-colors-map: (
102
102
  connectAlt: var(--c-icon-connectAlt),
103
103
  driver: var(--c-icon-driver),
104
104
  owner: var(--c-icon-owner),
105
+ inversed: var(--c-icon-inversed),
105
106
  disabled: var(--c-icon-disabled),
106
107
  disabledAlt: var(--c-icon-disabledAlt),
107
108
  warning: var(--c-icon-warning),
@@ -152,9 +153,15 @@ $theme-colors-map: (
152
153
  DEFAULT: var(--c-stroke-accentInteractive),
153
154
  hover: var(--c-stroke-accentInteractive--hover),
154
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)
155
161
  )
156
162
  ),
157
163
  buttonIcon: (
164
+ selected: var(--c-buttonIcon-selected),
158
165
  primary: var(--c-buttonIcon-primary),
159
166
  secondary: var(--c-buttonIcon-secondary),
160
167
  tertiary: var(--c-buttonIcon-tertiary),
@@ -190,6 +197,7 @@ $theme-colors-map: (
190
197
  )
191
198
  ),
192
199
  buttonLabel: (
200
+ selected: var(--c-buttonLabel-selected),
193
201
  primary: var(--c-buttonLabel-primary),
194
202
  secondary: var(--c-buttonLabel-secondary),
195
203
  tertiary: var(--c-buttonLabel-tertiary),
@@ -225,6 +233,7 @@ $theme-colors-map: (
225
233
  )
226
234
  ),
227
235
  buttonBackground: (
236
+ selected: var(--c-buttonBackground-selected),
228
237
  primary: var(--c-buttonBackground-primary),
229
238
  secondary: var(--c-buttonBackground-secondary),
230
239
  tertiary: var(--c-buttonBackground-tertiary),
package/styles/core/default-theme.scss CHANGED
@@ -79,6 +79,7 @@
79
79
  --c-icon-connectAlt: var(--c-turquoise-900);
80
80
  --c-icon-driver: var(--c-navy-700);
81
81
  --c-icon-owner: var(--c-white);
82
+ --c-icon-inversed: var(--c-white);
82
83
  --c-icon-disabled: var(--c-navy-100);
83
84
  --c-icon-disabledAlt: var(--c-navy-300);
84
85
  --c-icon-warning: var(--c-orange-500);
@@ -116,6 +117,10 @@
116
117
  --c-stroke-accentInteractive: var(--c-purple-500);
117
118
  --c-stroke-accentInteractive--hover: var(--c-purple-700);
118
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);
119
124
  --c-buttonIcon-primary: var(--c-white);
120
125
  --c-buttonIcon-secondary: var(--c-purple-500);
121
126
  --c-buttonIcon-tertiary: var(--c-purple-500);
@@ -139,6 +144,7 @@
139
144
  --c-buttonIcon-successAltInteractive: var(--c-green-900);
140
145
  --c-buttonIcon-successAltInteractive--hover: var(--c-green-900);
141
146
  --c-buttonIcon-successAltInteractive--press: var(--c-green-900);
147
+ --c-buttonLabel-selected: var(--c-purple-500);
142
148
  --c-buttonLabel-primary: var(--c-white);
143
149
  --c-buttonLabel-secondary: var(--c-purple-500);
144
150
  --c-buttonLabel-tertiary: var(--c-purple-500);
@@ -162,6 +168,7 @@
162
168
  --c-buttonLabel-successAltInteractive: var(--c-green-900);
163
169
  --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
164
170
  --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
171
+ --c-buttonBackground-selected: var(--c-purple-100);
165
172
  --c-buttonBackground-primary: var(--c-purple-500);
166
173
  --c-buttonBackground-secondary: var(--c-white);
167
174
  --c-buttonBackground-tertiary: var(--c-white);
package/styles/core/theme.scss CHANGED
@@ -79,6 +79,7 @@
79
79
  --c-icon-connectAlt: var(--c-turquoise-900);
80
80
  --c-icon-driver: var(--c-navy-700);
81
81
  --c-icon-owner: var(--c-white);
82
+ --c-icon-inversed: var(--c-white);
82
83
  --c-icon-disabled: var(--c-navy-100);
83
84
  --c-icon-disabledAlt: var(--c-navy-300);
84
85
  --c-icon-warning: var(--c-orange-500);
@@ -116,6 +117,10 @@
116
117
  --c-stroke-accentInteractive: var(--c-purple-500);
117
118
  --c-stroke-accentInteractive--hover: var(--c-purple-700);
118
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);
119
124
  --c-buttonIcon-primary: var(--c-white);
120
125
  --c-buttonIcon-secondary: var(--c-purple-500);
121
126
  --c-buttonIcon-tertiary: var(--c-purple-500);
@@ -139,6 +144,7 @@
139
144
  --c-buttonIcon-successAltInteractive: var(--c-green-900);
140
145
  --c-buttonIcon-successAltInteractive--hover: var(--c-green-900);
141
146
  --c-buttonIcon-successAltInteractive--press: var(--c-green-900);
147
+ --c-buttonLabel-selected: var(--c-purple-500);
142
148
  --c-buttonLabel-primary: var(--c-white);
143
149
  --c-buttonLabel-secondary: var(--c-purple-500);
144
150
  --c-buttonLabel-tertiary: var(--c-purple-500);
@@ -162,6 +168,7 @@
162
168
  --c-buttonLabel-successAltInteractive: var(--c-green-900);
163
169
  --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
164
170
  --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
171
+ --c-buttonBackground-selected: var(--c-purple-100);
165
172
  --c-buttonBackground-primary: var(--c-purple-500);
166
173
  --c-buttonBackground-secondary: var(--c-white);
167
174
  --c-buttonBackground-tertiary: var(--c-white);
@@ -281,6 +288,7 @@
281
288
  --c-icon-connectAlt: var(--c-turquoise-50);
282
289
  --c-icon-driver: var(--c-navy-700);
283
290
  --c-icon-owner: var(--c-white);
291
+ --c-icon-inversed: var(--c-white);
284
292
  --c-icon-disabled: var(--c-black-50);
285
293
  --c-icon-disabledAlt: var(--c-grey-500);
286
294
  --c-icon-warning: var(--c-orange-300);
@@ -318,6 +326,10 @@
318
326
  --c-stroke-accentInteractive: var(--c-purpleDeep-500);
319
327
  --c-stroke-accentInteractive--hover: var(--c-purpleDeep-400);
320
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);
321
333
  --c-buttonIcon-primary: var(--c-grey-100);
322
334
  --c-buttonIcon-secondary: var(--c-purpleDeep-400);
323
335
  --c-buttonIcon-tertiary: var(--c-white);
@@ -341,6 +353,7 @@
341
353
  --c-buttonIcon-successAltInteractive: var(--c-green-100);
342
354
  --c-buttonIcon-successAltInteractive--hover: var(--c-green-100);
343
355
  --c-buttonIcon-successAltInteractive--press: var(--c-green-100);
356
+ --c-buttonLabel-selected: var(--c-grey-100);
344
357
  --c-buttonLabel-primary: var(--c-grey-100);
345
358
  --c-buttonLabel-secondary: var(--c-purpleDeep-400);
346
359
  --c-buttonLabel-tertiary: var(--c-white);
@@ -364,6 +377,7 @@
364
377
  --c-buttonLabel-successAltInteractive: var(--c-green-100);
365
378
  --c-buttonLabel-successAltInteractive--hover: var(--c-green-100);
366
379
  --c-buttonLabel-successAltInteractive--press: var(--c-green-100);
380
+ --c-buttonBackground-selected: var(--c-purpleDeep-900);
367
381
  --c-buttonBackground-primary: var(--c-purpleDeep-500);
368
382
  --c-buttonBackground-secondary: var(--c-black-500);
369
383
  --c-buttonBackground-tertiary: var(--c-white);
package/tokens/theme.js CHANGED
@@ -97,6 +97,7 @@ const icon = {
97
97
  connectAlt: "turquoise.900/turquoise.50",
98
98
  driver: "navy.700/navy.700",
99
99
  owner: "white/white",
100
+ inversed: "white/white",
100
101
  disabled: "navy.100/black.50",
101
102
  disabledAlt: "navy.300/grey.500",
102
103
  warning: "orange.500/orange.300",
@@ -147,9 +148,15 @@ const stroke = {
147
148
  DEFAULT: "purple.500/purpleDeep.500",
148
149
  hover: "purple.700/purpleDeep.400",
149
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"
150
156
  }
151
157
  };
152
158
  const buttonIcon = {
159
+ selected: "purple.500/grey.100",
153
160
  primary: "white/grey.100",
154
161
  secondary: "purple.500/purpleDeep.400",
155
162
  tertiary: "purple.500/white",
@@ -185,6 +192,7 @@ const buttonIcon = {
185
192
  }
186
193
  };
187
194
  const buttonLabel = {
195
+ selected: "purple.500/grey.100",
188
196
  primary: "white/grey.100",
189
197
  secondary: "purple.500/purpleDeep.400",
190
198
  tertiary: "purple.500/white",
@@ -220,6 +228,7 @@ const buttonLabel = {
220
228
  }
221
229
  };
222
230
  const buttonBackground = {
231
+ selected: "purple.100/purpleDeep.900",
223
232
  primary: "purple.500/purpleDeep.500",
224
233
  secondary: "white/black.500",
225
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
@@ -573,6 +573,7 @@ export declare const theme: {
573
573
  connectAlt: string;
574
574
  driver: string;
575
575
  owner: string;
576
+ inversed: string;
576
577
  disabled: string;
577
578
  disabledAlt: string;
578
579
  warning: string;
@@ -624,8 +625,14 @@ export declare const theme: {
624
625
  hover: string;
625
626
  press: string;
626
627
  };
628
+ strongInteractive: {
629
+ DEFAULT: string;
630
+ hover: string;
631
+ press: string;
632
+ };
627
633
  };
628
634
  buttonIcon: {
635
+ selected: string;
629
636
  primary: string;
630
637
  secondary: string;
631
638
  tertiary: string;
@@ -661,6 +668,7 @@ export declare const theme: {
661
668
  };
662
669
  };
663
670
  buttonLabel: {
671
+ selected: string;
664
672
  primary: string;
665
673
  secondary: string;
666
674
  tertiary: string;
@@ -696,6 +704,7 @@ export declare const theme: {
696
704
  };
697
705
  };
698
706
  buttonBackground: {
707
+ selected: string;
699
708
  primary: string;
700
709
  secondary: string;
701
710
  tertiary: string;
package/utilities.css CHANGED
@@ -173,6 +173,7 @@
173
173
  --c-icon-connectAlt: var(--c-turquoise-900);
174
174
  --c-icon-driver: var(--c-navy-700);
175
175
  --c-icon-owner: var(--c-white);
176
+ --c-icon-inversed: var(--c-white);
176
177
  --c-icon-disabled: var(--c-navy-100);
177
178
  --c-icon-disabledAlt: var(--c-navy-300);
178
179
  --c-icon-warning: var(--c-orange-500);
@@ -210,6 +211,10 @@
210
211
  --c-stroke-accentInteractive: var(--c-purple-500);
211
212
  --c-stroke-accentInteractive--hover: var(--c-purple-700);
212
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);
213
218
  --c-buttonIcon-primary: var(--c-white);
214
219
  --c-buttonIcon-secondary: var(--c-purple-500);
215
220
  --c-buttonIcon-tertiary: var(--c-purple-500);
@@ -233,6 +238,7 @@
233
238
  --c-buttonIcon-successAltInteractive: var(--c-green-900);
234
239
  --c-buttonIcon-successAltInteractive--hover: var(--c-green-900);
235
240
  --c-buttonIcon-successAltInteractive--press: var(--c-green-900);
241
+ --c-buttonLabel-selected: var(--c-purple-500);
236
242
  --c-buttonLabel-primary: var(--c-white);
237
243
  --c-buttonLabel-secondary: var(--c-purple-500);
238
244
  --c-buttonLabel-tertiary: var(--c-purple-500);
@@ -256,6 +262,7 @@
256
262
  --c-buttonLabel-successAltInteractive: var(--c-green-900);
257
263
  --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
258
264
  --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
265
+ --c-buttonBackground-selected: var(--c-purple-100);
259
266
  --c-buttonBackground-primary: var(--c-purple-500);
260
267
  --c-buttonBackground-secondary: var(--c-white);
261
268
  --c-buttonBackground-tertiary: var(--c-white);
@@ -5254,6 +5261,22 @@
5254
5261
  border-color: var(--c-stroke-accentInteractive--press);
5255
5262
  }
5256
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
+
5257
5280
  .c-bg-primary {
5258
5281
  background-color: var(--c-background-primary);
5259
5282
  }