@drivy/cobalt 0.30.0 → 0.31.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 (19) hide show
  1. package/components/Form/Slider.js.map +1 -1
  2. package/package.json +11 -11
  3. package/styles/components/Accordion/index.scss +1 -1
  4. package/styles/components/Buttons/DefaultButton/index.scss +12 -12
  5. package/styles/components/Buttons/GhostButton/index.scss +4 -4
  6. package/styles/components/Buttons/InversedButton/index.scss +2 -2
  7. package/styles/components/Buttons/index.scss +6 -6
  8. package/styles/components/Cell/index.scss +1 -1
  9. package/styles/components/Form/Autocomplete/index.scss +1 -1
  10. package/styles/components/Form/CheckablePill.scss +4 -4
  11. package/styles/components/Form/RadioWithDetails.scss +3 -3
  12. package/styles/components/Form/TextInput.scss +5 -5
  13. package/styles/components/Form/ToggleSwitch.scss +1 -1
  14. package/styles/components/TabBar/index.scss +1 -1
  15. package/styles/core/_colors-map.scss +164 -164
  16. package/styles/core/color.scss +28 -6
  17. package/styles/core/theme.scss +326 -0
  18. package/types/components/Form/Slider.d.ts +2 -2
  19. package/utilities.css +326 -0
package/styles/core/theme.scss CHANGED
@@ -164,3 +164,329 @@
164
164
  --c-fill-disabled: var(--c-navy-300);
165
165
  --c-fill-neutral: var(--c-navy-50);
166
166
  }
167
+
168
+ .use-cobalt-light-theme {
169
+ --c-background-primary: var(--c-white);
170
+ --c-background-secondary: var(--c-white);
171
+ --c-background-secondaryInteractive: var(--c-white);
172
+ --c-background-secondaryInteractive--hover: var(--c-navy-50);
173
+ --c-background-accent: var(--c-purple-500);
174
+ --c-background-accentInteractive: var(--c-purple-500);
175
+ --c-background-accentInteractive--hover: var(--c-purple-700);
176
+ --c-background-accentAlt: var(--c-purple-100);
177
+ --c-background-accentAltInteractive: var(--c-purple-100);
178
+ --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
179
+ --c-background-info: var(--c-yellow-100);
180
+ --c-background-error: var(--c-red-500);
181
+ --c-background-errorInteractive: var(--c-red-500);
182
+ --c-background-errorInteractive--hover: var(--c-red-700);
183
+ --c-background-errorAlt: var(--c-red-100);
184
+ --c-background-success: var(--c-green-700);
185
+ --c-background-successAlt: var(--c-green-100);
186
+ --c-background-connect: var(--c-turquoise-500);
187
+ --c-background-connectInteractive: var(--c-turquoise-500);
188
+ --c-background-connectInteractive--hover: var(--c-turquoise-700);
189
+ --c-background-connectAlt: var(--c-turquoise-50);
190
+ --c-background-driver: var(--c-yellow-500);
191
+ --c-background-owner: var(--c-navy-700);
192
+ --c-background-disabled: var(--c-navy-100);
193
+ --c-background-neutral: var(--c-navy-100);
194
+ --c-background-neutralAlt: var(--c-navy-50);
195
+ --c-background-seasonLow: var(--c-season-100);
196
+ --c-background-seasonMedium: var(--c-season-200);
197
+ --c-background-seasonHigh: var(--c-season-300);
198
+ --c-background-seasonVeryHigh: var(--c-season-400);
199
+ --c-text-base: var(--c-navy-700);
200
+ --c-text-baseInteractive: var(--c-navy-700);
201
+ --c-text-baseInteractive--hover: var(--c-navy-300);
202
+ --c-text-subdued: var(--c-navy-300);
203
+ --c-text-subduedInteractive: var(--c-navy-300);
204
+ --c-text-subduedInteractive--hover: var(--c-navy-500);
205
+ --c-text-accent: var(--c-purple-500);
206
+ --c-text-accentInteractive: var(--c-purple-500);
207
+ --c-text-accentInteractive--hover: var(--c-purple-700);
208
+ --c-text-accentAlt: var(--c-purple-500);
209
+ --c-text-accentAltInteractive: var(--c-purple-500);
210
+ --c-text-accentAltInteractive--hover: var(--c-purple-700);
211
+ --c-text-info: var(--c-yellow-900);
212
+ --c-text-infoAlt: var(--c-yellow-500);
213
+ --c-text-error: var(--c-red-500);
214
+ --c-text-errorAlt: var(--c-red-500);
215
+ --c-text-success: var(--c-green-700);
216
+ --c-text-successAlt: var(--c-green-900);
217
+ --c-text-warning: var(--c-orange-500);
218
+ --c-text-connect: var(--c-turquoise-500);
219
+ --c-text-driver: var(--c-navy-700);
220
+ --c-text-owner: var(--c-white);
221
+ --c-text-inversed: var(--c-white);
222
+ --c-buttonBackground-selected: var(--c-purple-100);
223
+ --c-buttonBackground-destructiveInteractive: var(--c-red-100);
224
+ --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
225
+ --c-buttonBackground-destructiveInteractive--press: var(--c-red-150);
226
+ --c-buttonBackground-disabled: var(--c-navy-100);
227
+ --c-buttonBackground-primaryInteractive: var(--c-purple-500);
228
+ --c-buttonBackground-primaryInteractive--hover: var(--c-purple-700);
229
+ --c-buttonBackground-primaryInteractive--press: var(--c-purple-900);
230
+ --c-buttonBackground-secondaryInteractive: var(--c-white);
231
+ --c-buttonBackground-secondaryInteractive--hover: var(--c-white);
232
+ --c-buttonBackground-secondaryInteractive--press: var(--c-white);
233
+ --c-buttonBackground-success: var(--c-green-700);
234
+ --c-buttonBackground-successAltInteractive: var(--c-green-100);
235
+ --c-buttonBackground-successAltInteractive--hover: var(--c-green-120);
236
+ --c-buttonBackground-successAltInteractive--press: var(--c-green-150);
237
+ --c-buttonBackground-tertiaryInteractive: var(--c-white);
238
+ --c-buttonBackground-tertiaryInteractive--hover: var(--c-white);
239
+ --c-buttonBackground-tertiaryInteractive--press: var(--c-white);
240
+ --c-buttonIcon-selected: var(--c-purple-500);
241
+ --c-buttonIcon-destructiveInteractive: var(--c-red-500);
242
+ --c-buttonIcon-destructiveInteractive--hover: var(--c-red-500);
243
+ --c-buttonIcon-destructiveInteractive--press: var(--c-red-500);
244
+ --c-buttonIcon-disabled: var(--c-navy-300);
245
+ --c-buttonIcon-primaryInteractive: var(--c-white);
246
+ --c-buttonIcon-primaryInteractive--hover: var(--c-white);
247
+ --c-buttonIcon-primaryInteractive--press: var(--c-white);
248
+ --c-buttonIcon-secondaryInteractive: var(--c-purple-500);
249
+ --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-700);
250
+ --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
251
+ --c-buttonIcon-success: var(--c-white);
252
+ --c-buttonIcon-successAltInteractive: var(--c-green-900);
253
+ --c-buttonIcon-successAltInteractive--hover: var(--c-green-900);
254
+ --c-buttonIcon-successAltInteractive--press: var(--c-green-900);
255
+ --c-buttonIcon-tertiaryInteractive: var(--c-purple-500);
256
+ --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-700);
257
+ --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-900);
258
+ --c-buttonLabel-selected: var(--c-purple-500);
259
+ --c-buttonLabel-destructiveInteractive: var(--c-red-500);
260
+ --c-buttonLabel-destructiveInteractive--hover: var(--c-red-500);
261
+ --c-buttonLabel-destructiveInteractive--press: var(--c-red-500);
262
+ --c-buttonLabel-disabled: var(--c-navy-300);
263
+ --c-buttonLabel-primaryInteractive: var(--c-white);
264
+ --c-buttonLabel-primaryInteractive--hover: var(--c-white);
265
+ --c-buttonLabel-primaryInteractive--press: var(--c-white);
266
+ --c-buttonLabel-secondaryInteractive: var(--c-purple-500);
267
+ --c-buttonLabel-secondaryInteractive--hover: var(--c-purple-700);
268
+ --c-buttonLabel-secondaryInteractive--press: var(--c-purple-900);
269
+ --c-buttonLabel-success: var(--c-white);
270
+ --c-buttonLabel-successAltInteractive: var(--c-green-900);
271
+ --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
272
+ --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
273
+ --c-buttonLabel-tertiaryInteractive: var(--c-purple-500);
274
+ --c-buttonLabel-tertiaryInteractive--hover: var(--c-purple-700);
275
+ --c-buttonLabel-tertiaryInteractive--press: var(--c-purple-900);
276
+ --c-icon-base: var(--c-navy-500);
277
+ --c-icon-baseInteractive: var(--c-navy-500);
278
+ --c-icon-baseInteractive--hover: var(--c-navy-700);
279
+ --c-icon-subdued: var(--c-navy-300);
280
+ --c-icon-subduedInteractive: var(--c-navy-300);
281
+ --c-icon-subduedInteractive--hover: var(--c-navy-500);
282
+ --c-icon-accent: var(--c-purple-500);
283
+ --c-icon-accentInteractive: var(--c-purple-500);
284
+ --c-icon-accentInteractive--hover: var(--c-purple-700);
285
+ --c-icon-accentAlt: var(--c-purple-500);
286
+ --c-icon-accentAltInteractive: var(--c-purple-500);
287
+ --c-icon-accentAltInteractive--hover: var(--c-purple-700);
288
+ --c-icon-info: var(--c-yellow-900);
289
+ --c-icon-infoAlt: var(--c-yellow-500);
290
+ --c-icon-error: var(--c-red-500);
291
+ --c-icon-errorAlt: var(--c-red-500);
292
+ --c-icon-success: var(--c-green-700);
293
+ --c-icon-successAlt: var(--c-green-900);
294
+ --c-icon-warning: var(--c-orange-500);
295
+ --c-icon-connect: var(--c-turquoise-500);
296
+ --c-icon-connectAlt: var(--c-turquoise-900);
297
+ --c-icon-driver: var(--c-navy-700);
298
+ --c-icon-owner: var(--c-white);
299
+ --c-icon-inversed: var(--c-white);
300
+ --c-icon-disabled: var(--c-navy-100);
301
+ --c-stroke-base: var(--c-navy-100);
302
+ --c-stroke-baseInteractive: var(--c-navy-100);
303
+ --c-stroke-baseInteractive--hover: var(--c-navy-300);
304
+ --c-stroke-baseInteractive--press: var(--c-navy-500);
305
+ --c-stroke-strong: var(--c-navy-300);
306
+ --c-stroke-strongInteractive: var(--c-navy-300);
307
+ --c-stroke-strongInteractive--hover: var(--c-navy-500);
308
+ --c-stroke-strongInteractive--press: var(--c-navy-700);
309
+ --c-stroke-subdued: var(--c-navy-100);
310
+ --c-stroke-accent: var(--c-purple-500);
311
+ --c-stroke-accentInteractive: var(--c-purple-500);
312
+ --c-stroke-accentInteractive--hover: var(--c-purple-700);
313
+ --c-stroke-accentInteractive--press: var(--c-purple-900);
314
+ --c-stroke-accentAlt: var(--c-purple-300);
315
+ --c-stroke-error: var(--c-red-500);
316
+ --c-stroke-errorAlt: var(--c-red-500);
317
+ --c-stroke-success: var(--c-green-500);
318
+ --c-stroke-successAlt: var(--c-green-500);
319
+ --c-fill-base: var(--c-navy-500);
320
+ --c-fill-secondary: var(--c-yellow-500);
321
+ --c-fill-subdued: var(--c-navy-100);
322
+ --c-fill-accent: var(--c-purple-500);
323
+ --c-fill-accentAlt: var(--c-purple-100);
324
+ --c-fill-error: var(--c-red-500);
325
+ --c-fill-negative: var(--c-red-150);
326
+ --c-fill-success: var(--c-green-500);
327
+ --c-fill-disabled: var(--c-navy-300);
328
+ --c-fill-neutral: var(--c-navy-50);
329
+ }
330
+
331
+ .use-cobalt-dark-theme {
332
+ --c-background-primary: var(--c-black-500);
333
+ --c-background-secondary: var(--c-black-300);
334
+ --c-background-secondaryInteractive: var(--c-black-300);
335
+ --c-background-secondaryInteractive--hover: var(--c-black-300);
336
+ --c-background-accent: var(--c-purpleDeep-400);
337
+ --c-background-accentInteractive: var(--c-purpleDeep-400);
338
+ --c-background-accentInteractive--hover: var(--c-purpleDeep-400);
339
+ --c-background-accentAlt: var(--c-purpleDeep-900);
340
+ --c-background-accentAltInteractive: var(--c-purpleDeep-900);
341
+ --c-background-accentAltInteractive--hover: var(--c-purpleDeep-900);
342
+ --c-background-info: var(--c-yellow-1000);
343
+ --c-background-error: var(--c-red-500);
344
+ --c-background-errorInteractive: var(--c-red-500);
345
+ --c-background-errorInteractive--hover: var(--c-red-500);
346
+ --c-background-errorAlt: var(--c-red-900);
347
+ --c-background-success: var(--c-green-700);
348
+ --c-background-successAlt: var(--c-green-1000);
349
+ --c-background-connect: var(--c-turquoise-500);
350
+ --c-background-connectInteractive: var(--c-turquoise-500);
351
+ --c-background-connectInteractive--hover: var(--c-turquoise-500);
352
+ --c-background-connectAlt: var(--c-turquoise-900);
353
+ --c-background-driver: var(--c-yellow-500);
354
+ --c-background-owner: var(--c-navy-700);
355
+ --c-background-disabled: var(--c-black-50);
356
+ --c-background-neutral: var(--c-black-50);
357
+ --c-background-neutralAlt: var(--c-black-100);
358
+ --c-background-seasonLow: var(--c-season-700);
359
+ --c-background-seasonMedium: var(--c-season-800);
360
+ --c-background-seasonHigh: var(--c-season-900);
361
+ --c-background-seasonVeryHigh: var(--c-season-1000);
362
+ --c-text-base: var(--c-grey-100);
363
+ --c-text-baseInteractive: var(--c-grey-100);
364
+ --c-text-baseInteractive--hover: var(--c-grey-300);
365
+ --c-text-subdued: var(--c-grey-300);
366
+ --c-text-subduedInteractive: var(--c-grey-300);
367
+ --c-text-subduedInteractive--hover: var(--c-grey-300);
368
+ --c-text-accent: var(--c-purpleDeep-400);
369
+ --c-text-accentInteractive: var(--c-purpleDeep-400);
370
+ --c-text-accentInteractive--hover: var(--c-purpleDeep-400);
371
+ --c-text-accentAlt: var(--c-grey-100);
372
+ --c-text-accentAltInteractive: var(--c-grey-100);
373
+ --c-text-accentAltInteractive--hover: var(--c-grey-100);
374
+ --c-text-info: var(--c-yellow-300);
375
+ --c-text-infoAlt: var(--c-yellow-700);
376
+ --c-text-error: var(--c-red-400);
377
+ --c-text-errorAlt: var(--c-red-500);
378
+ --c-text-success: var(--c-green-700);
379
+ --c-text-successAlt: var(--c-green-100);
380
+ --c-text-warning: var(--c-orange-300);
381
+ --c-text-connect: var(--c-turquoise-500);
382
+ --c-text-driver: var(--c-navy-700);
383
+ --c-text-owner: var(--c-grey-100);
384
+ --c-text-inversed: var(--c-white);
385
+ --c-buttonBackground-selected: var(--c-purpleDeep-900);
386
+ --c-buttonBackground-destructiveInteractive: var(--c-red-900);
387
+ --c-buttonBackground-destructiveInteractive--hover: var(--c-red-900);
388
+ --c-buttonBackground-destructiveInteractive--press: var(--c-red-900);
389
+ --c-buttonBackground-disabled: var(--c-black-50);
390
+ --c-buttonBackground-primaryInteractive: var(--c-purpleDeep-500);
391
+ --c-buttonBackground-primaryInteractive--hover: var(--c-purpleDeep-500);
392
+ --c-buttonBackground-primaryInteractive--press: var(--c-purpleDeep-500);
393
+ --c-buttonBackground-secondaryInteractive: var(--c-black-500);
394
+ --c-buttonBackground-secondaryInteractive--hover: var(--c-black-500);
395
+ --c-buttonBackground-secondaryInteractive--press: var(--c-black-500);
396
+ --c-buttonBackground-success: var(--c-green-900);
397
+ --c-buttonBackground-successAltInteractive: var(--c-green-1000);
398
+ --c-buttonBackground-successAltInteractive--hover: var(--c-green-1000);
399
+ --c-buttonBackground-successAltInteractive--press: var(--c-green-1000);
400
+ --c-buttonBackground-tertiaryInteractive: var(--c-white);
401
+ --c-buttonBackground-tertiaryInteractive--hover: var(--c-white);
402
+ --c-buttonBackground-tertiaryInteractive--press: var(--c-white);
403
+ --c-buttonIcon-selected: var(--c-grey-100);
404
+ --c-buttonIcon-destructiveInteractive: var(--c-red-200);
405
+ --c-buttonIcon-destructiveInteractive--hover: var(--c-red-200);
406
+ --c-buttonIcon-destructiveInteractive--press: var(--c-red-200);
407
+ --c-buttonIcon-disabled: var(--c-grey-300);
408
+ --c-buttonIcon-primaryInteractive: var(--c-grey-100);
409
+ --c-buttonIcon-primaryInteractive--hover: var(--c-grey-100);
410
+ --c-buttonIcon-primaryInteractive--press: var(--c-grey-100);
411
+ --c-buttonIcon-secondaryInteractive: var(--c-purpleDeep-400);
412
+ --c-buttonIcon-secondaryInteractive--hover: var(--c-purpleDeep-400);
413
+ --c-buttonIcon-secondaryInteractive--press: var(--c-purpleDeep-400);
414
+ --c-buttonIcon-success: var(--c-green-100);
415
+ --c-buttonIcon-successAltInteractive: var(--c-green-100);
416
+ --c-buttonIcon-successAltInteractive--hover: var(--c-green-100);
417
+ --c-buttonIcon-successAltInteractive--press: var(--c-green-100);
418
+ --c-buttonIcon-tertiaryInteractive: var(--c-purpleDeep-400);
419
+ --c-buttonIcon-tertiaryInteractive--hover: var(--c-purpleDeep-400);
420
+ --c-buttonIcon-tertiaryInteractive--press: var(--c-purpleDeep-400);
421
+ --c-buttonLabel-selected: var(--c-grey-100);
422
+ --c-buttonLabel-destructiveInteractive: var(--c-red-200);
423
+ --c-buttonLabel-destructiveInteractive--hover: var(--c-red-200);
424
+ --c-buttonLabel-destructiveInteractive--press: var(--c-red-200);
425
+ --c-buttonLabel-disabled: var(--c-grey-300);
426
+ --c-buttonLabel-primaryInteractive: var(--c-grey-100);
427
+ --c-buttonLabel-primaryInteractive--hover: var(--c-grey-100);
428
+ --c-buttonLabel-primaryInteractive--press: var(--c-grey-100);
429
+ --c-buttonLabel-secondaryInteractive: var(--c-purpleDeep-400);
430
+ --c-buttonLabel-secondaryInteractive--hover: var(--c-purpleDeep-400);
431
+ --c-buttonLabel-secondaryInteractive--press: var(--c-purpleDeep-400);
432
+ --c-buttonLabel-success: var(--c-green-100);
433
+ --c-buttonLabel-successAltInteractive: var(--c-green-100);
434
+ --c-buttonLabel-successAltInteractive--hover: var(--c-green-100);
435
+ --c-buttonLabel-successAltInteractive--press: var(--c-green-100);
436
+ --c-buttonLabel-tertiaryInteractive: var(--c-purpleDeep-400);
437
+ --c-buttonLabel-tertiaryInteractive--hover: var(--c-purpleDeep-400);
438
+ --c-buttonLabel-tertiaryInteractive--press: var(--c-purpleDeep-400);
439
+ --c-icon-base: var(--c-grey-100);
440
+ --c-icon-baseInteractive: var(--c-grey-100);
441
+ --c-icon-baseInteractive--hover: var(--c-grey-100);
442
+ --c-icon-subdued: var(--c-grey-300);
443
+ --c-icon-subduedInteractive: var(--c-grey-300);
444
+ --c-icon-subduedInteractive--hover: var(--c-grey-300);
445
+ --c-icon-accent: var(--c-purpleDeep-400);
446
+ --c-icon-accentInteractive: var(--c-purpleDeep-400);
447
+ --c-icon-accentInteractive--hover: var(--c-);
448
+ --c-icon-accentAlt: var(--c-grey-100);
449
+ --c-icon-accentAltInteractive: var(--c-grey-100);
450
+ --c-icon-accentAltInteractive--hover: var(--c-grey-100);
451
+ --c-icon-info: var(--c-yellow-300);
452
+ --c-icon-infoAlt: var(--c-yellow-700);
453
+ --c-icon-error: var(--c-red-400);
454
+ --c-icon-errorAlt: var(--c-red-200);
455
+ --c-icon-success: var(--c-green-700);
456
+ --c-icon-successAlt: var(--c-green-100);
457
+ --c-icon-warning: var(--c-orange-300);
458
+ --c-icon-connect: var(--c-white);
459
+ --c-icon-connectAlt: var(--c-turquoise-50);
460
+ --c-icon-driver: var(--c-);
461
+ --c-icon-owner: var(--c-white);
462
+ --c-icon-inversed: var(--c-white);
463
+ --c-icon-disabled: var(--c-black-50);
464
+ --c-stroke-base: var(--c-black-50);
465
+ --c-stroke-baseInteractive: var(--c-black-50);
466
+ --c-stroke-baseInteractive--hover: var(--c-purpleDeep-400);
467
+ --c-stroke-baseInteractive--press: var(--c-purpleDeep-400);
468
+ --c-stroke-strong: var(--c-navy-200);
469
+ --c-stroke-strongInteractive: var(--c-navy-200);
470
+ --c-stroke-strongInteractive--hover: var(--c-purpleDeep-400);
471
+ --c-stroke-strongInteractive--press: var(--c-purpleDeep-400);
472
+ --c-stroke-subdued: var(--c-black-50);
473
+ --c-stroke-accent: var(--c-purpleDeep-400);
474
+ --c-stroke-accentInteractive: var(--c-purpleDeep-400);
475
+ --c-stroke-accentInteractive--hover: var(--c-purpleDeep-400);
476
+ --c-stroke-accentInteractive--press: var(--c-purpleDeep-400);
477
+ --c-stroke-accentAlt: var(--c-purpleDeep-700);
478
+ --c-stroke-error: var(--c-red-200);
479
+ --c-stroke-errorAlt: var(--c-red-200);
480
+ --c-stroke-success: var(--c-green-700);
481
+ --c-stroke-successAlt: var(--c-green-700);
482
+ --c-fill-base: var(--c-grey-100);
483
+ --c-fill-secondary: var(--c-yellow-500);
484
+ --c-fill-subdued: var(--c-black-50);
485
+ --c-fill-accent: var(--c-purpleDeep-400);
486
+ --c-fill-accentAlt: var(--c-purpleDeep-900);
487
+ --c-fill-error: var(--c-red-500);
488
+ --c-fill-negative: var(--c-red-900);
489
+ --c-fill-success: var(--c-green-700);
490
+ --c-fill-disabled: var(--c-grey-300);
491
+ --c-fill-neutral: var(--c-black-100);
492
+ }
package/types/components/Form/Slider.d.ts CHANGED
@@ -39,7 +39,7 @@ export type SliderPropsType = {
39
39
  onTouchMove?: ReachSliderProps["onTouchMove"];
40
40
  onTouchEnd?: ReachSliderProps["onTouchEnd"];
41
41
  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
42
- } & FormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, NativeEventType | "css" | "enterKeyHint">;
42
+ } & FormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, NativeEventType | "css" | "enterKeyHint" | "onChange">;
43
43
  declare const wrappedComponent: React.ComponentClass<{
44
44
  /**
45
45
  * mandatory for A11y
@@ -77,7 +77,7 @@ declare const wrappedComponent: React.ComponentClass<{
77
77
  onTouchMove?: ReachSliderProps["onTouchMove"];
78
78
  onTouchEnd?: ReachSliderProps["onTouchEnd"];
79
79
  onFocus?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
80
- } & FormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, NativeEventType | "css" | "enterKeyHint"> & {
80
+ } & FormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, NativeEventType | "css" | "enterKeyHint" | "onChange"> & {
81
81
  id?: string | undefined;
82
82
  label?: string | undefined;
83
83
  hint?: string | undefined;
package/utilities.css CHANGED
@@ -269,6 +269,332 @@
269
269
  --c-fill-neutral: var(--c-navy-50);
270
270
  }
271
271
 
272
+ .use-cobalt-light-theme {
273
+ --c-background-primary: var(--c-white);
274
+ --c-background-secondary: var(--c-white);
275
+ --c-background-secondaryInteractive: var(--c-white);
276
+ --c-background-secondaryInteractive--hover: var(--c-navy-50);
277
+ --c-background-accent: var(--c-purple-500);
278
+ --c-background-accentInteractive: var(--c-purple-500);
279
+ --c-background-accentInteractive--hover: var(--c-purple-700);
280
+ --c-background-accentAlt: var(--c-purple-100);
281
+ --c-background-accentAltInteractive: var(--c-purple-100);
282
+ --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
283
+ --c-background-info: var(--c-yellow-100);
284
+ --c-background-error: var(--c-red-500);
285
+ --c-background-errorInteractive: var(--c-red-500);
286
+ --c-background-errorInteractive--hover: var(--c-red-700);
287
+ --c-background-errorAlt: var(--c-red-100);
288
+ --c-background-success: var(--c-green-700);
289
+ --c-background-successAlt: var(--c-green-100);
290
+ --c-background-connect: var(--c-turquoise-500);
291
+ --c-background-connectInteractive: var(--c-turquoise-500);
292
+ --c-background-connectInteractive--hover: var(--c-turquoise-700);
293
+ --c-background-connectAlt: var(--c-turquoise-50);
294
+ --c-background-driver: var(--c-yellow-500);
295
+ --c-background-owner: var(--c-navy-700);
296
+ --c-background-disabled: var(--c-navy-100);
297
+ --c-background-neutral: var(--c-navy-100);
298
+ --c-background-neutralAlt: var(--c-navy-50);
299
+ --c-background-seasonLow: var(--c-season-100);
300
+ --c-background-seasonMedium: var(--c-season-200);
301
+ --c-background-seasonHigh: var(--c-season-300);
302
+ --c-background-seasonVeryHigh: var(--c-season-400);
303
+ --c-text-base: var(--c-navy-700);
304
+ --c-text-baseInteractive: var(--c-navy-700);
305
+ --c-text-baseInteractive--hover: var(--c-navy-300);
306
+ --c-text-subdued: var(--c-navy-300);
307
+ --c-text-subduedInteractive: var(--c-navy-300);
308
+ --c-text-subduedInteractive--hover: var(--c-navy-500);
309
+ --c-text-accent: var(--c-purple-500);
310
+ --c-text-accentInteractive: var(--c-purple-500);
311
+ --c-text-accentInteractive--hover: var(--c-purple-700);
312
+ --c-text-accentAlt: var(--c-purple-500);
313
+ --c-text-accentAltInteractive: var(--c-purple-500);
314
+ --c-text-accentAltInteractive--hover: var(--c-purple-700);
315
+ --c-text-info: var(--c-yellow-900);
316
+ --c-text-infoAlt: var(--c-yellow-500);
317
+ --c-text-error: var(--c-red-500);
318
+ --c-text-errorAlt: var(--c-red-500);
319
+ --c-text-success: var(--c-green-700);
320
+ --c-text-successAlt: var(--c-green-900);
321
+ --c-text-warning: var(--c-orange-500);
322
+ --c-text-connect: var(--c-turquoise-500);
323
+ --c-text-driver: var(--c-navy-700);
324
+ --c-text-owner: var(--c-white);
325
+ --c-text-inversed: var(--c-white);
326
+ --c-buttonBackground-selected: var(--c-purple-100);
327
+ --c-buttonBackground-destructiveInteractive: var(--c-red-100);
328
+ --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
329
+ --c-buttonBackground-destructiveInteractive--press: var(--c-red-150);
330
+ --c-buttonBackground-disabled: var(--c-navy-100);
331
+ --c-buttonBackground-primaryInteractive: var(--c-purple-500);
332
+ --c-buttonBackground-primaryInteractive--hover: var(--c-purple-700);
333
+ --c-buttonBackground-primaryInteractive--press: var(--c-purple-900);
334
+ --c-buttonBackground-secondaryInteractive: var(--c-white);
335
+ --c-buttonBackground-secondaryInteractive--hover: var(--c-white);
336
+ --c-buttonBackground-secondaryInteractive--press: var(--c-white);
337
+ --c-buttonBackground-success: var(--c-green-700);
338
+ --c-buttonBackground-successAltInteractive: var(--c-green-100);
339
+ --c-buttonBackground-successAltInteractive--hover: var(--c-green-120);
340
+ --c-buttonBackground-successAltInteractive--press: var(--c-green-150);
341
+ --c-buttonBackground-tertiaryInteractive: var(--c-white);
342
+ --c-buttonBackground-tertiaryInteractive--hover: var(--c-white);
343
+ --c-buttonBackground-tertiaryInteractive--press: var(--c-white);
344
+ --c-buttonIcon-selected: var(--c-purple-500);
345
+ --c-buttonIcon-destructiveInteractive: var(--c-red-500);
346
+ --c-buttonIcon-destructiveInteractive--hover: var(--c-red-500);
347
+ --c-buttonIcon-destructiveInteractive--press: var(--c-red-500);
348
+ --c-buttonIcon-disabled: var(--c-navy-300);
349
+ --c-buttonIcon-primaryInteractive: var(--c-white);
350
+ --c-buttonIcon-primaryInteractive--hover: var(--c-white);
351
+ --c-buttonIcon-primaryInteractive--press: var(--c-white);
352
+ --c-buttonIcon-secondaryInteractive: var(--c-purple-500);
353
+ --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-700);
354
+ --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
355
+ --c-buttonIcon-success: var(--c-white);
356
+ --c-buttonIcon-successAltInteractive: var(--c-green-900);
357
+ --c-buttonIcon-successAltInteractive--hover: var(--c-green-900);
358
+ --c-buttonIcon-successAltInteractive--press: var(--c-green-900);
359
+ --c-buttonIcon-tertiaryInteractive: var(--c-purple-500);
360
+ --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-700);
361
+ --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-900);
362
+ --c-buttonLabel-selected: var(--c-purple-500);
363
+ --c-buttonLabel-destructiveInteractive: var(--c-red-500);
364
+ --c-buttonLabel-destructiveInteractive--hover: var(--c-red-500);
365
+ --c-buttonLabel-destructiveInteractive--press: var(--c-red-500);
366
+ --c-buttonLabel-disabled: var(--c-navy-300);
367
+ --c-buttonLabel-primaryInteractive: var(--c-white);
368
+ --c-buttonLabel-primaryInteractive--hover: var(--c-white);
369
+ --c-buttonLabel-primaryInteractive--press: var(--c-white);
370
+ --c-buttonLabel-secondaryInteractive: var(--c-purple-500);
371
+ --c-buttonLabel-secondaryInteractive--hover: var(--c-purple-700);
372
+ --c-buttonLabel-secondaryInteractive--press: var(--c-purple-900);
373
+ --c-buttonLabel-success: var(--c-white);
374
+ --c-buttonLabel-successAltInteractive: var(--c-green-900);
375
+ --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
376
+ --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
377
+ --c-buttonLabel-tertiaryInteractive: var(--c-purple-500);
378
+ --c-buttonLabel-tertiaryInteractive--hover: var(--c-purple-700);
379
+ --c-buttonLabel-tertiaryInteractive--press: var(--c-purple-900);
380
+ --c-icon-base: var(--c-navy-500);
381
+ --c-icon-baseInteractive: var(--c-navy-500);
382
+ --c-icon-baseInteractive--hover: var(--c-navy-700);
383
+ --c-icon-subdued: var(--c-navy-300);
384
+ --c-icon-subduedInteractive: var(--c-navy-300);
385
+ --c-icon-subduedInteractive--hover: var(--c-navy-500);
386
+ --c-icon-accent: var(--c-purple-500);
387
+ --c-icon-accentInteractive: var(--c-purple-500);
388
+ --c-icon-accentInteractive--hover: var(--c-purple-700);
389
+ --c-icon-accentAlt: var(--c-purple-500);
390
+ --c-icon-accentAltInteractive: var(--c-purple-500);
391
+ --c-icon-accentAltInteractive--hover: var(--c-purple-700);
392
+ --c-icon-info: var(--c-yellow-900);
393
+ --c-icon-infoAlt: var(--c-yellow-500);
394
+ --c-icon-error: var(--c-red-500);
395
+ --c-icon-errorAlt: var(--c-red-500);
396
+ --c-icon-success: var(--c-green-700);
397
+ --c-icon-successAlt: var(--c-green-900);
398
+ --c-icon-warning: var(--c-orange-500);
399
+ --c-icon-connect: var(--c-turquoise-500);
400
+ --c-icon-connectAlt: var(--c-turquoise-900);
401
+ --c-icon-driver: var(--c-navy-700);
402
+ --c-icon-owner: var(--c-white);
403
+ --c-icon-inversed: var(--c-white);
404
+ --c-icon-disabled: var(--c-navy-100);
405
+ --c-stroke-base: var(--c-navy-100);
406
+ --c-stroke-baseInteractive: var(--c-navy-100);
407
+ --c-stroke-baseInteractive--hover: var(--c-navy-300);
408
+ --c-stroke-baseInteractive--press: var(--c-navy-500);
409
+ --c-stroke-strong: var(--c-navy-300);
410
+ --c-stroke-strongInteractive: var(--c-navy-300);
411
+ --c-stroke-strongInteractive--hover: var(--c-navy-500);
412
+ --c-stroke-strongInteractive--press: var(--c-navy-700);
413
+ --c-stroke-subdued: var(--c-navy-100);
414
+ --c-stroke-accent: var(--c-purple-500);
415
+ --c-stroke-accentInteractive: var(--c-purple-500);
416
+ --c-stroke-accentInteractive--hover: var(--c-purple-700);
417
+ --c-stroke-accentInteractive--press: var(--c-purple-900);
418
+ --c-stroke-accentAlt: var(--c-purple-300);
419
+ --c-stroke-error: var(--c-red-500);
420
+ --c-stroke-errorAlt: var(--c-red-500);
421
+ --c-stroke-success: var(--c-green-500);
422
+ --c-stroke-successAlt: var(--c-green-500);
423
+ --c-fill-base: var(--c-navy-500);
424
+ --c-fill-secondary: var(--c-yellow-500);
425
+ --c-fill-subdued: var(--c-navy-100);
426
+ --c-fill-accent: var(--c-purple-500);
427
+ --c-fill-accentAlt: var(--c-purple-100);
428
+ --c-fill-error: var(--c-red-500);
429
+ --c-fill-negative: var(--c-red-150);
430
+ --c-fill-success: var(--c-green-500);
431
+ --c-fill-disabled: var(--c-navy-300);
432
+ --c-fill-neutral: var(--c-navy-50);
433
+ }
434
+
435
+ .use-cobalt-dark-theme {
436
+ --c-background-primary: var(--c-black-500);
437
+ --c-background-secondary: var(--c-black-300);
438
+ --c-background-secondaryInteractive: var(--c-black-300);
439
+ --c-background-secondaryInteractive--hover: var(--c-black-300);
440
+ --c-background-accent: var(--c-purpleDeep-400);
441
+ --c-background-accentInteractive: var(--c-purpleDeep-400);
442
+ --c-background-accentInteractive--hover: var(--c-purpleDeep-400);
443
+ --c-background-accentAlt: var(--c-purpleDeep-900);
444
+ --c-background-accentAltInteractive: var(--c-purpleDeep-900);
445
+ --c-background-accentAltInteractive--hover: var(--c-purpleDeep-900);
446
+ --c-background-info: var(--c-yellow-1000);
447
+ --c-background-error: var(--c-red-500);
448
+ --c-background-errorInteractive: var(--c-red-500);
449
+ --c-background-errorInteractive--hover: var(--c-red-500);
450
+ --c-background-errorAlt: var(--c-red-900);
451
+ --c-background-success: var(--c-green-700);
452
+ --c-background-successAlt: var(--c-green-1000);
453
+ --c-background-connect: var(--c-turquoise-500);
454
+ --c-background-connectInteractive: var(--c-turquoise-500);
455
+ --c-background-connectInteractive--hover: var(--c-turquoise-500);
456
+ --c-background-connectAlt: var(--c-turquoise-900);
457
+ --c-background-driver: var(--c-yellow-500);
458
+ --c-background-owner: var(--c-navy-700);
459
+ --c-background-disabled: var(--c-black-50);
460
+ --c-background-neutral: var(--c-black-50);
461
+ --c-background-neutralAlt: var(--c-black-100);
462
+ --c-background-seasonLow: var(--c-season-700);
463
+ --c-background-seasonMedium: var(--c-season-800);
464
+ --c-background-seasonHigh: var(--c-season-900);
465
+ --c-background-seasonVeryHigh: var(--c-season-1000);
466
+ --c-text-base: var(--c-grey-100);
467
+ --c-text-baseInteractive: var(--c-grey-100);
468
+ --c-text-baseInteractive--hover: var(--c-grey-300);
469
+ --c-text-subdued: var(--c-grey-300);
470
+ --c-text-subduedInteractive: var(--c-grey-300);
471
+ --c-text-subduedInteractive--hover: var(--c-grey-300);
472
+ --c-text-accent: var(--c-purpleDeep-400);
473
+ --c-text-accentInteractive: var(--c-purpleDeep-400);
474
+ --c-text-accentInteractive--hover: var(--c-purpleDeep-400);
475
+ --c-text-accentAlt: var(--c-grey-100);
476
+ --c-text-accentAltInteractive: var(--c-grey-100);
477
+ --c-text-accentAltInteractive--hover: var(--c-grey-100);
478
+ --c-text-info: var(--c-yellow-300);
479
+ --c-text-infoAlt: var(--c-yellow-700);
480
+ --c-text-error: var(--c-red-400);
481
+ --c-text-errorAlt: var(--c-red-500);
482
+ --c-text-success: var(--c-green-700);
483
+ --c-text-successAlt: var(--c-green-100);
484
+ --c-text-warning: var(--c-orange-300);
485
+ --c-text-connect: var(--c-turquoise-500);
486
+ --c-text-driver: var(--c-navy-700);
487
+ --c-text-owner: var(--c-grey-100);
488
+ --c-text-inversed: var(--c-white);
489
+ --c-buttonBackground-selected: var(--c-purpleDeep-900);
490
+ --c-buttonBackground-destructiveInteractive: var(--c-red-900);
491
+ --c-buttonBackground-destructiveInteractive--hover: var(--c-red-900);
492
+ --c-buttonBackground-destructiveInteractive--press: var(--c-red-900);
493
+ --c-buttonBackground-disabled: var(--c-black-50);
494
+ --c-buttonBackground-primaryInteractive: var(--c-purpleDeep-500);
495
+ --c-buttonBackground-primaryInteractive--hover: var(--c-purpleDeep-500);
496
+ --c-buttonBackground-primaryInteractive--press: var(--c-purpleDeep-500);
497
+ --c-buttonBackground-secondaryInteractive: var(--c-black-500);
498
+ --c-buttonBackground-secondaryInteractive--hover: var(--c-black-500);
499
+ --c-buttonBackground-secondaryInteractive--press: var(--c-black-500);
500
+ --c-buttonBackground-success: var(--c-green-900);
501
+ --c-buttonBackground-successAltInteractive: var(--c-green-1000);
502
+ --c-buttonBackground-successAltInteractive--hover: var(--c-green-1000);
503
+ --c-buttonBackground-successAltInteractive--press: var(--c-green-1000);
504
+ --c-buttonBackground-tertiaryInteractive: var(--c-white);
505
+ --c-buttonBackground-tertiaryInteractive--hover: var(--c-white);
506
+ --c-buttonBackground-tertiaryInteractive--press: var(--c-white);
507
+ --c-buttonIcon-selected: var(--c-grey-100);
508
+ --c-buttonIcon-destructiveInteractive: var(--c-red-200);
509
+ --c-buttonIcon-destructiveInteractive--hover: var(--c-red-200);
510
+ --c-buttonIcon-destructiveInteractive--press: var(--c-red-200);
511
+ --c-buttonIcon-disabled: var(--c-grey-300);
512
+ --c-buttonIcon-primaryInteractive: var(--c-grey-100);
513
+ --c-buttonIcon-primaryInteractive--hover: var(--c-grey-100);
514
+ --c-buttonIcon-primaryInteractive--press: var(--c-grey-100);
515
+ --c-buttonIcon-secondaryInteractive: var(--c-purpleDeep-400);
516
+ --c-buttonIcon-secondaryInteractive--hover: var(--c-purpleDeep-400);
517
+ --c-buttonIcon-secondaryInteractive--press: var(--c-purpleDeep-400);
518
+ --c-buttonIcon-success: var(--c-green-100);
519
+ --c-buttonIcon-successAltInteractive: var(--c-green-100);
520
+ --c-buttonIcon-successAltInteractive--hover: var(--c-green-100);
521
+ --c-buttonIcon-successAltInteractive--press: var(--c-green-100);
522
+ --c-buttonIcon-tertiaryInteractive: var(--c-purpleDeep-400);
523
+ --c-buttonIcon-tertiaryInteractive--hover: var(--c-purpleDeep-400);
524
+ --c-buttonIcon-tertiaryInteractive--press: var(--c-purpleDeep-400);
525
+ --c-buttonLabel-selected: var(--c-grey-100);
526
+ --c-buttonLabel-destructiveInteractive: var(--c-red-200);
527
+ --c-buttonLabel-destructiveInteractive--hover: var(--c-red-200);
528
+ --c-buttonLabel-destructiveInteractive--press: var(--c-red-200);
529
+ --c-buttonLabel-disabled: var(--c-grey-300);
530
+ --c-buttonLabel-primaryInteractive: var(--c-grey-100);
531
+ --c-buttonLabel-primaryInteractive--hover: var(--c-grey-100);
532
+ --c-buttonLabel-primaryInteractive--press: var(--c-grey-100);
533
+ --c-buttonLabel-secondaryInteractive: var(--c-purpleDeep-400);
534
+ --c-buttonLabel-secondaryInteractive--hover: var(--c-purpleDeep-400);
535
+ --c-buttonLabel-secondaryInteractive--press: var(--c-purpleDeep-400);
536
+ --c-buttonLabel-success: var(--c-green-100);
537
+ --c-buttonLabel-successAltInteractive: var(--c-green-100);
538
+ --c-buttonLabel-successAltInteractive--hover: var(--c-green-100);
539
+ --c-buttonLabel-successAltInteractive--press: var(--c-green-100);
540
+ --c-buttonLabel-tertiaryInteractive: var(--c-purpleDeep-400);
541
+ --c-buttonLabel-tertiaryInteractive--hover: var(--c-purpleDeep-400);
542
+ --c-buttonLabel-tertiaryInteractive--press: var(--c-purpleDeep-400);
543
+ --c-icon-base: var(--c-grey-100);
544
+ --c-icon-baseInteractive: var(--c-grey-100);
545
+ --c-icon-baseInteractive--hover: var(--c-grey-100);
546
+ --c-icon-subdued: var(--c-grey-300);
547
+ --c-icon-subduedInteractive: var(--c-grey-300);
548
+ --c-icon-subduedInteractive--hover: var(--c-grey-300);
549
+ --c-icon-accent: var(--c-purpleDeep-400);
550
+ --c-icon-accentInteractive: var(--c-purpleDeep-400);
551
+ --c-icon-accentInteractive--hover: var(--c-);
552
+ --c-icon-accentAlt: var(--c-grey-100);
553
+ --c-icon-accentAltInteractive: var(--c-grey-100);
554
+ --c-icon-accentAltInteractive--hover: var(--c-grey-100);
555
+ --c-icon-info: var(--c-yellow-300);
556
+ --c-icon-infoAlt: var(--c-yellow-700);
557
+ --c-icon-error: var(--c-red-400);
558
+ --c-icon-errorAlt: var(--c-red-200);
559
+ --c-icon-success: var(--c-green-700);
560
+ --c-icon-successAlt: var(--c-green-100);
561
+ --c-icon-warning: var(--c-orange-300);
562
+ --c-icon-connect: var(--c-white);
563
+ --c-icon-connectAlt: var(--c-turquoise-50);
564
+ --c-icon-driver: var(--c-);
565
+ --c-icon-owner: var(--c-white);
566
+ --c-icon-inversed: var(--c-white);
567
+ --c-icon-disabled: var(--c-black-50);
568
+ --c-stroke-base: var(--c-black-50);
569
+ --c-stroke-baseInteractive: var(--c-black-50);
570
+ --c-stroke-baseInteractive--hover: var(--c-purpleDeep-400);
571
+ --c-stroke-baseInteractive--press: var(--c-purpleDeep-400);
572
+ --c-stroke-strong: var(--c-navy-200);
573
+ --c-stroke-strongInteractive: var(--c-navy-200);
574
+ --c-stroke-strongInteractive--hover: var(--c-purpleDeep-400);
575
+ --c-stroke-strongInteractive--press: var(--c-purpleDeep-400);
576
+ --c-stroke-subdued: var(--c-black-50);
577
+ --c-stroke-accent: var(--c-purpleDeep-400);
578
+ --c-stroke-accentInteractive: var(--c-purpleDeep-400);
579
+ --c-stroke-accentInteractive--hover: var(--c-purpleDeep-400);
580
+ --c-stroke-accentInteractive--press: var(--c-purpleDeep-400);
581
+ --c-stroke-accentAlt: var(--c-purpleDeep-700);
582
+ --c-stroke-error: var(--c-red-200);
583
+ --c-stroke-errorAlt: var(--c-red-200);
584
+ --c-stroke-success: var(--c-green-700);
585
+ --c-stroke-successAlt: var(--c-green-700);
586
+ --c-fill-base: var(--c-grey-100);
587
+ --c-fill-secondary: var(--c-yellow-500);
588
+ --c-fill-subdued: var(--c-black-50);
589
+ --c-fill-accent: var(--c-purpleDeep-400);
590
+ --c-fill-accentAlt: var(--c-purpleDeep-900);
591
+ --c-fill-error: var(--c-red-500);
592
+ --c-fill-negative: var(--c-red-900);
593
+ --c-fill-success: var(--c-green-700);
594
+ --c-fill-disabled: var(--c-grey-300);
595
+ --c-fill-neutral: var(--c-black-100);
596
+ }
597
+
272
598
  .c-sr-only {
273
599
  position: absolute;
274
600
  width: 1px;