@ds-mo/tokens 2.5.0 → 2.6.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 (9) hide show
  1. package/dist/colors.css +362 -60
  2. package/dist/dimensions.css +30 -17
  3. package/dist/index.cjs +191 -31
  4. package/dist/index.d.ts +191 -31
  5. package/dist/index.mjs +191 -31
  6. package/dist/json/colors.json +724 -120
  7. package/dist/json/dimensions.json +56 -20
  8. package/dist/tokens.json +780 -140
  9. package/package.json +1 -1
package/dist/colors.css CHANGED
@@ -293,6 +293,174 @@
293
293
  --color-border-strong-walkthrough: var(--color-reference-light-teal-180-l35-c09-strong);
294
294
  --color-border-strong-warning: var(--color-reference-light-orange-60-l35-c09-strong);
295
295
  --color-border-tertiary: var(--color-reference-black-10);
296
+ --color-category-blue-bold-background: var(--color-reference-light-blue-250-l50-c18-bold);
297
+ --color-category-blue-bold-border: var(--color-reference-light-blue-250-l70-c18-medium);
298
+ --color-category-blue-bold-foreground: var(--color-reference-light-blue-250-l92-c04-faint);
299
+ --color-category-blue-faint-background: var(--color-reference-light-blue-250-l92-c04-faint);
300
+ --color-category-blue-faint-border: var(--color-reference-light-blue-250-l70-c18-medium);
301
+ --color-category-blue-faint-foreground: var(--color-reference-light-blue-250-l50-c18-bold);
302
+ --color-category-blue-medium-background: var(--color-reference-light-blue-250-l70-c18-medium);
303
+ --color-category-blue-medium-border: var(--color-reference-light-blue-250-l50-c18-bold);
304
+ --color-category-blue-medium-foreground: var(--color-reference-light-blue-250-l33-c09-strong);
305
+ --color-category-blue-strong-background: var(--color-reference-light-blue-250-l33-c09-strong);
306
+ --color-category-blue-strong-border: var(--color-reference-light-blue-250-l50-c18-bold);
307
+ --color-category-blue-strong-foreground: var(--color-reference-light-blue-250-l70-c18-medium);
308
+ --color-category-cyan-bold-background: var(--color-reference-light-cyan-215-l51-c11-bold);
309
+ --color-category-cyan-bold-border: var(--color-reference-light-cyan-215-l75-c17-medium);
310
+ --color-category-cyan-bold-foreground: var(--color-reference-light-cyan-215-l94-c04-faint);
311
+ --color-category-cyan-faint-background: var(--color-reference-light-cyan-215-l94-c04-faint);
312
+ --color-category-cyan-faint-border: var(--color-reference-light-cyan-215-l75-c17-medium);
313
+ --color-category-cyan-faint-foreground: var(--color-reference-light-cyan-215-l51-c11-bold);
314
+ --color-category-cyan-medium-background: var(--color-reference-light-cyan-215-l75-c17-medium);
315
+ --color-category-cyan-medium-border: var(--color-reference-light-cyan-215-l51-c11-bold);
316
+ --color-category-cyan-medium-foreground: var(--color-reference-light-cyan-215-l30-c07-strong);
317
+ --color-category-cyan-strong-background: var(--color-reference-light-cyan-215-l30-c07-strong);
318
+ --color-category-cyan-strong-border: var(--color-reference-light-cyan-215-l51-c11-bold);
319
+ --color-category-cyan-strong-foreground: var(--color-reference-light-cyan-215-l75-c17-medium);
320
+ --color-category-green-bold-background: var(--color-reference-light-green-145-l50-c19-bold);
321
+ --color-category-green-bold-border: var(--color-reference-light-green-145-l75-c22-medium);
322
+ --color-category-green-bold-foreground: var(--color-reference-light-green-145-l94-c05-faint);
323
+ --color-category-green-faint-background: var(--color-reference-light-green-145-l94-c05-faint);
324
+ --color-category-green-faint-border: var(--color-reference-light-green-145-l75-c22-medium);
325
+ --color-category-green-faint-foreground: var(--color-reference-light-green-145-l50-c19-bold);
326
+ --color-category-green-medium-background: var(--color-reference-light-green-145-l75-c22-medium);
327
+ --color-category-green-medium-border: var(--color-reference-light-green-145-l50-c19-bold);
328
+ --color-category-green-medium-foreground: var(--color-reference-light-green-145-l35-c13-strong);
329
+ --color-category-green-strong-background: var(--color-reference-light-green-145-l35-c13-strong);
330
+ --color-category-green-strong-border: var(--color-reference-light-green-145-l50-c19-bold);
331
+ --color-category-green-strong-foreground: var(--color-reference-light-green-145-l75-c22-medium);
332
+ --color-category-grey-bold-background: var(--color-reference-grey-l51-light-bold);
333
+ --color-category-grey-bold-border: var(--color-reference-grey-l75-light-medium);
334
+ --color-category-grey-bold-foreground: var(--color-reference-grey-l93-light-faint);
335
+ --color-category-grey-faint-background: var(--color-reference-grey-l93-light-faint);
336
+ --color-category-grey-faint-border: var(--color-reference-grey-l75-light-medium);
337
+ --color-category-grey-faint-foreground: var(--color-reference-grey-l51-light-bold);
338
+ --color-category-grey-medium-background: var(--color-reference-grey-l75-light-medium);
339
+ --color-category-grey-medium-border: var(--color-reference-grey-l51-light-bold);
340
+ --color-category-grey-medium-foreground: var(--color-reference-grey-l30-light-strong);
341
+ --color-category-grey-strong-background: var(--color-reference-grey-l30-light-strong);
342
+ --color-category-grey-strong-border: var(--color-reference-grey-l51-light-bold);
343
+ --color-category-grey-strong-foreground: var(--color-reference-grey-l75-light-medium);
344
+ --color-category-interaction-on-bold-background-focus: var(--color-reference-white-20);
345
+ --color-category-interaction-on-bold-background-hover: var(--color-reference-white-15);
346
+ --color-category-interaction-on-bold-background-pressed: var(--color-reference-white-20);
347
+ --color-category-interaction-on-faint-background-focus: var(--color-reference-black-15);
348
+ --color-category-interaction-on-faint-background-hover: var(--color-reference-black-10);
349
+ --color-category-interaction-on-faint-background-pressed: var(--color-reference-black-15);
350
+ --color-category-interaction-on-medium-background-focus: var(--color-reference-black-20);
351
+ --color-category-interaction-on-medium-background-hover: var(--color-reference-black-15);
352
+ --color-category-interaction-on-medium-background-pressed: var(--color-reference-black-20);
353
+ --color-category-interaction-on-strong-background-focus: var(--color-reference-white-15);
354
+ --color-category-interaction-on-strong-background-hover: var(--color-reference-white-10);
355
+ --color-category-interaction-on-strong-background-pressed: var(--color-reference-white-15);
356
+ --color-category-magenta-bold-2-background: var(--color-reference-light-magenta-325-l54-c20-bold);
357
+ --color-category-magenta-bold-2-border: var(--color-reference-light-magenta-325-l70-c23-medium);
358
+ --color-category-magenta-bold-2-foreground: var(--color-reference-light-magenta-325-l94-c05-faint);
359
+ --color-category-magenta-bold-background: var(--color-reference-light-magenta-325-l54-c20-bold);
360
+ --color-category-magenta-bold-border: var(--color-reference-light-magenta-325-l70-c23-medium);
361
+ --color-category-magenta-bold-foreground: var(--color-reference-light-magenta-325-l94-c05-faint);
362
+ --color-category-magenta-faint-2-background: var(--color-reference-light-magenta-325-l94-c05-faint);
363
+ --color-category-magenta-faint-2-border: var(--color-reference-light-magenta-325-l70-c23-medium);
364
+ --color-category-magenta-faint-2-foreground: var(--color-reference-light-magenta-325-l54-c20-bold);
365
+ --color-category-magenta-faint-background: var(--color-reference-light-magenta-325-l94-c05-faint);
366
+ --color-category-magenta-faint-border: var(--color-reference-light-magenta-325-l70-c23-medium);
367
+ --color-category-magenta-faint-foreground: var(--color-reference-light-magenta-325-l54-c20-bold);
368
+ --color-category-magenta-medium-2-background: var(--color-reference-light-magenta-325-l70-c23-medium);
369
+ --color-category-magenta-medium-2-border: var(--color-reference-light-magenta-325-l54-c20-bold);
370
+ --color-category-magenta-medium-2-foreground: var(--color-reference-light-magenta-325-l30-c13-strong);
371
+ --color-category-magenta-medium-background: var(--color-reference-light-magenta-325-l70-c23-medium);
372
+ --color-category-magenta-medium-border: var(--color-reference-light-magenta-325-l54-c20-bold);
373
+ --color-category-magenta-medium-foreground: var(--color-reference-light-magenta-325-l30-c13-strong);
374
+ --color-category-magenta-strong-2-background: var(--color-reference-light-magenta-325-l30-c13-strong);
375
+ --color-category-magenta-strong-2-border: var(--color-reference-light-magenta-325-l54-c20-bold);
376
+ --color-category-magenta-strong-2-foreground: var(--color-reference-light-magenta-325-l70-c23-medium);
377
+ --color-category-magenta-strong-background: var(--color-reference-light-magenta-325-l30-c13-strong);
378
+ --color-category-magenta-strong-border: var(--color-reference-light-magenta-325-l54-c20-bold);
379
+ --color-category-magenta-strong-foreground: var(--color-reference-light-magenta-325-l70-c23-medium);
380
+ --color-category-olive-bold-background: var(--color-reference-light-olive-115-l51-c13-bold);
381
+ --color-category-olive-bold-border: var(--color-reference-light-olive-115-l85-c22-medium);
382
+ --color-category-olive-bold-foreground: var(--color-reference-light-olive-115-l93-c05-faint);
383
+ --color-category-olive-faint-background: var(--color-reference-light-olive-115-l93-c05-faint);
384
+ --color-category-olive-faint-border: var(--color-reference-light-olive-115-l85-c22-medium);
385
+ --color-category-olive-faint-foreground: var(--color-reference-light-olive-115-l51-c13-bold);
386
+ --color-category-olive-medium-background: var(--color-reference-light-olive-115-l85-c22-medium);
387
+ --color-category-olive-medium-border: var(--color-reference-light-olive-115-l51-c13-bold);
388
+ --color-category-olive-medium-foreground: var(--color-reference-light-olive-115-l35-c09-strong);
389
+ --color-category-olive-strong-background: var(--color-reference-light-olive-115-l35-c09-strong);
390
+ --color-category-olive-strong-border: var(--color-reference-light-olive-115-l51-c13-bold);
391
+ --color-category-olive-strong-foreground: var(--color-reference-light-olive-115-l85-c22-medium);
392
+ --color-category-orange-bold-background: var(--color-reference-light-orange-60-l52-c13-bold);
393
+ --color-category-orange-bold-border: var(--color-reference-light-orange-60-l75-c20-medium);
394
+ --color-category-orange-bold-foreground: var(--color-reference-light-orange-60-l93-c05-faint);
395
+ --color-category-orange-faint-background: var(--color-reference-light-orange-60-l93-c05-faint);
396
+ --color-category-orange-faint-border: var(--color-reference-light-orange-60-l75-c20-medium);
397
+ --color-category-orange-faint-foreground: var(--color-reference-light-orange-60-l52-c13-bold);
398
+ --color-category-orange-medium-background: var(--color-reference-light-orange-60-l75-c20-medium);
399
+ --color-category-orange-medium-border: var(--color-reference-light-orange-60-l52-c13-bold);
400
+ --color-category-orange-medium-foreground: var(--color-reference-light-orange-60-l35-c09-strong);
401
+ --color-category-orange-strong-background: var(--color-reference-light-orange-60-l35-c09-strong);
402
+ --color-category-orange-strong-border: var(--color-reference-light-orange-60-l52-c13-bold);
403
+ --color-category-orange-strong-foreground: var(--color-reference-light-orange-60-l75-c20-medium);
404
+ --color-category-pink-bold-background: var(--color-reference-light-pink-0-l53-c20-bold);
405
+ --color-category-pink-bold-border: var(--color-reference-light-pink-0-l70-c22-medium);
406
+ --color-category-pink-bold-foreground: var(--color-reference-light-pink-0-l93-c05-faint);
407
+ --color-category-pink-faint-background: var(--color-reference-light-pink-0-l93-c05-faint);
408
+ --color-category-pink-faint-border: var(--color-reference-light-pink-0-l70-c22-medium);
409
+ --color-category-pink-faint-foreground: var(--color-reference-light-pink-0-l53-c20-bold);
410
+ --color-category-pink-medium-background: var(--color-reference-light-pink-0-l70-c22-medium);
411
+ --color-category-pink-medium-border: var(--color-reference-light-pink-0-l53-c20-bold);
412
+ --color-category-pink-medium-foreground: var(--color-reference-light-pink-0-l29-c10-strong);
413
+ --color-category-pink-strong-background: var(--color-reference-light-pink-0-l29-c10-strong);
414
+ --color-category-pink-strong-border: var(--color-reference-light-pink-0-l53-c20-bold);
415
+ --color-category-pink-strong-foreground: var(--color-reference-light-pink-0-l70-c22-medium);
416
+ --color-category-purple-bold-background: var(--color-reference-light-purple-290-l52-c20-bold);
417
+ --color-category-purple-bold-border: var(--color-reference-light-purple-290-l75-c15-medium);
418
+ --color-category-purple-bold-foreground: var(--color-reference-light-purple-290-l92-c04-faint);
419
+ --color-category-purple-faint-background: var(--color-reference-light-purple-290-l92-c04-faint);
420
+ --color-category-purple-faint-border: var(--color-reference-light-purple-290-l75-c15-medium);
421
+ --color-category-purple-faint-foreground: var(--color-reference-light-purple-290-l52-c20-bold);
422
+ --color-category-purple-medium-background: var(--color-reference-light-purple-290-l75-c15-medium);
423
+ --color-category-purple-medium-border: var(--color-reference-light-purple-290-l52-c20-bold);
424
+ --color-category-purple-medium-foreground: var(--color-reference-light-purple-290-l35-c13-strong);
425
+ --color-category-purple-strong-background: var(--color-reference-light-purple-290-l35-c13-strong);
426
+ --color-category-purple-strong-border: var(--color-reference-light-purple-290-l52-c20-bold);
427
+ --color-category-purple-strong-foreground: var(--color-reference-light-purple-290-l75-c15-medium);
428
+ --color-category-red-bold-background: var(--color-reference-light-red-30-l53-c20-bold);
429
+ --color-category-red-bold-border: var(--color-reference-light-red-30-l70-c20-medium);
430
+ --color-category-red-bold-foreground: var(--color-reference-light-red-30-l93-c04-faint);
431
+ --color-category-red-faint-background: var(--color-reference-light-red-30-l93-c04-faint);
432
+ --color-category-red-faint-border: var(--color-reference-light-red-30-l70-c20-medium);
433
+ --color-category-red-faint-foreground: var(--color-reference-light-red-30-l53-c20-bold);
434
+ --color-category-red-medium-background: var(--color-reference-light-red-30-l70-c20-medium);
435
+ --color-category-red-medium-border: var(--color-reference-light-red-30-l53-c20-bold);
436
+ --color-category-red-medium-foreground: var(--color-reference-light-red-30-l30-c11-strong);
437
+ --color-category-red-strong-background: var(--color-reference-light-red-30-l30-c11-strong);
438
+ --color-category-red-strong-border: var(--color-reference-light-red-30-l53-c20-bold);
439
+ --color-category-red-strong-foreground: var(--color-reference-light-red-30-l70-c20-medium);
440
+ --color-category-teal-bold-background: var(--color-reference-light-teal-180-l50-c12-bold);
441
+ --color-category-teal-bold-border: var(--color-reference-light-teal-180-l75-c17-medium);
442
+ --color-category-teal-bold-foreground: var(--color-reference-light-teal-180-l94-c05-faint);
443
+ --color-category-teal-faint-background: var(--color-reference-light-teal-180-l94-c05-faint);
444
+ --color-category-teal-faint-border: var(--color-reference-light-teal-180-l75-c17-medium);
445
+ --color-category-teal-faint-foreground: var(--color-reference-light-teal-180-l50-c12-bold);
446
+ --color-category-teal-medium-background: var(--color-reference-light-teal-180-l75-c17-medium);
447
+ --color-category-teal-medium-border: var(--color-reference-light-teal-180-l50-c12-bold);
448
+ --color-category-teal-medium-foreground: var(--color-reference-light-teal-180-l35-c09-strong);
449
+ --color-category-teal-strong-background: var(--color-reference-light-teal-180-l35-c09-strong);
450
+ --color-category-teal-strong-border: var(--color-reference-light-teal-180-l50-c12-bold);
451
+ --color-category-teal-strong-foreground: var(--color-reference-light-teal-180-l75-c17-medium);
452
+ --color-category-yellow-bold-background: var(--color-reference-light-yellow-85-l51-c12-bold);
453
+ --color-category-yellow-bold-border: var(--color-reference-light-yellow-85-l85-c20-medium);
454
+ --color-category-yellow-bold-foreground: var(--color-reference-light-yellow-85-l93-c08-faint);
455
+ --color-category-yellow-faint-background: var(--color-reference-light-yellow-85-l93-c08-faint);
456
+ --color-category-yellow-faint-border: var(--color-reference-light-yellow-85-l85-c20-medium);
457
+ --color-category-yellow-faint-foreground: var(--color-reference-light-yellow-85-l51-c12-bold);
458
+ --color-category-yellow-medium-background: var(--color-reference-light-yellow-85-l85-c20-medium);
459
+ --color-category-yellow-medium-border: var(--color-reference-light-yellow-85-l51-c12-bold);
460
+ --color-category-yellow-medium-foreground: var(--color-reference-light-yellow-85-l40-c09-strong);
461
+ --color-category-yellow-strong-background: var(--color-reference-light-yellow-85-l40-c09-strong);
462
+ --color-category-yellow-strong-border: var(--color-reference-light-yellow-85-l51-c12-bold);
463
+ --color-category-yellow-strong-foreground: var(--color-reference-light-yellow-85-l85-c20-medium);
296
464
  --color-divider-divider: var(--color-reference-black-10);
297
465
  --color-divider-on-bold-background: var(--color-reference-white-15);
298
466
  --color-divider-on-medium-background: var(--color-reference-black-15);
@@ -379,36 +547,6 @@
379
547
  --color-foreground-strong-walkthrough: var(--color-reference-light-teal-180-l35-c09-strong);
380
548
  --color-foreground-strong-warning: var(--color-reference-light-orange-60-l35-c09-strong);
381
549
  --color-foreground-tertiary: var(--color-reference-black-45);
382
- --color-geofence-category-fuel-station-background: var(--color-reference-light-blue-250-l92-c04-faint);
383
- --color-geofence-category-fuel-station-border: var(--color-reference-light-blue-250-l70-c18-medium);
384
- --color-geofence-category-fuel-station-foreground: var(--color-reference-light-blue-250-l50-c18-bold);
385
- --color-geofence-category-interaction-focus: var(--color-reference-black-15);
386
- --color-geofence-category-interaction-hover: var(--color-reference-black-15);
387
- --color-geofence-category-interaction-pressed: var(--color-reference-black-20);
388
- --color-geofence-category-job-site-background: var(--color-reference-light-olive-115-l93-c05-faint);
389
- --color-geofence-category-job-site-border: var(--color-reference-light-olive-115-l85-c22-medium);
390
- --color-geofence-category-job-site-foreground: var(--color-reference-light-olive-115-l51-c13-bold);
391
- --color-geofence-category-maintenance-facility-background: var(--color-reference-light-magenta-325-l94-c05-faint);
392
- --color-geofence-category-maintenance-facility-border: var(--color-reference-light-magenta-325-l70-c23-medium);
393
- --color-geofence-category-maintenance-facility-foreground: var(--color-reference-light-magenta-325-l54-c20-bold);
394
- --color-geofence-category-restricted-location-background: var(--color-reference-light-red-30-l53-c20-bold);
395
- --color-geofence-category-restricted-location-border: var(--color-reference-light-red-30-l70-c20-medium);
396
- --color-geofence-category-restricted-location-foreground: var(--color-reference-light-red-30-l93-c04-faint);
397
- --color-geofence-category-risk-zone-background: var(--color-reference-light-red-30-l93-c04-faint);
398
- --color-geofence-category-risk-zone-border: var(--color-reference-light-red-30-l70-c20-medium);
399
- --color-geofence-category-risk-zone-foreground: var(--color-reference-light-red-30-l53-c20-bold);
400
- --color-geofence-category-shipper-background: var(--color-reference-light-yellow-85-l93-c08-faint);
401
- --color-geofence-category-shipper-border: var(--color-reference-light-yellow-85-l85-c20-medium);
402
- --color-geofence-category-shipper-foreground: var(--color-reference-light-yellow-85-l51-c12-bold);
403
- --color-geofence-category-specialized-job-site-background: var(--color-reference-light-orange-60-l93-c05-faint);
404
- --color-geofence-category-specialized-job-site-border: var(--color-reference-light-orange-60-l75-c20-medium);
405
- --color-geofence-category-specialized-job-site-foreground: var(--color-reference-light-orange-60-l52-c13-bold);
406
- --color-geofence-category-terminal-background: var(--color-reference-light-teal-180-l94-c05-faint);
407
- --color-geofence-category-terminal-border: var(--color-reference-light-teal-180-l75-c17-medium);
408
- --color-geofence-category-terminal-foreground: var(--color-reference-light-teal-180-l50-c12-bold);
409
- --color-geofence-category-uncategorized-background: var(--color-reference-grey-l93-light-faint);
410
- --color-geofence-category-uncategorized-border: var(--color-reference-grey-l75-light-medium);
411
- --color-geofence-category-uncategorized-foreground: var(--color-reference-grey-l51-light-bold);
412
550
  --color-interaction-active: var(--color-reference-light-blue-250-l92-c04-faint);
413
551
  --color-interaction-focus: var(--color-reference-black-15);
414
552
  --color-interaction-hover: var(--color-reference-black-10);
@@ -497,6 +635,19 @@
497
635
  --color-location-marker-interaction-focus: var(--color-reference-black-15);
498
636
  --color-location-marker-interaction-hover: var(--color-reference-white-15);
499
637
  --color-location-marker-interaction-pressed: var(--color-reference-white-20);
638
+ --color-media-background: var(--color-reference-grey-l18);
639
+ --color-media-border-primary: var(--color-reference-white-20);
640
+ --color-media-border-secondary: var(--color-reference-white-15);
641
+ --color-media-border-tertiary: var(--color-reference-white-10);
642
+ --color-media-divider: var(--color-reference-white-10);
643
+ --color-media-foreground-primary: var(--color-reference-white-100);
644
+ --color-media-foreground-quaternary: var(--color-reference-white-20);
645
+ --color-media-foreground-secondary: var(--color-reference-white-55);
646
+ --color-media-foreground-tertiary: var(--color-reference-white-35);
647
+ --color-media-interaction-active: var(--color-reference-white-20);
648
+ --color-media-interaction-focus: var(--color-reference-white-15);
649
+ --color-media-interaction-hover: var(--color-reference-white-10);
650
+ --color-media-interaction-pressed: var(--color-reference-white-15);
500
651
  --color-navigation-background: var(--color-reference-grey-l18);
501
652
  --color-navigation-border-primary: var(--color-reference-white-20);
502
653
  --color-navigation-border-secondary: var(--color-reference-white-15);
@@ -727,6 +878,174 @@
727
878
  --color-border-strong-walkthrough: var(--color-reference-dark-teal-180-l93-c08-strong);
728
879
  --color-border-strong-warning: var(--color-reference-dark-orange-60-l92-c06-strong);
729
880
  --color-border-tertiary: var(--color-reference-white-10);
881
+ --color-category-blue-bold-background: var(--color-reference-dark-blue-250-l65-c20-bold);
882
+ --color-category-blue-bold-border: var(--color-reference-dark-blue-250-l50-c17-medium);
883
+ --color-category-blue-bold-foreground: var(--color-reference-dark-blue-250-l27-c05-faint);
884
+ --color-category-blue-faint-background: var(--color-reference-dark-blue-250-l27-c05-faint);
885
+ --color-category-blue-faint-border: var(--color-reference-dark-blue-250-l50-c17-medium);
886
+ --color-category-blue-faint-foreground: var(--color-reference-dark-blue-250-l65-c20-bold);
887
+ --color-category-blue-medium-background: var(--color-reference-dark-blue-250-l50-c17-medium);
888
+ --color-category-blue-medium-border: var(--color-reference-dark-blue-250-l65-c20-bold);
889
+ --color-category-blue-medium-foreground: var(--color-reference-dark-blue-250-l91-c05-strong);
890
+ --color-category-blue-strong-background: var(--color-reference-dark-blue-250-l91-c05-strong);
891
+ --color-category-blue-strong-border: var(--color-reference-dark-blue-250-l65-c20-bold);
892
+ --color-category-blue-strong-foreground: var(--color-reference-dark-blue-250-l50-c17-medium);
893
+ --color-category-cyan-bold-background: var(--color-reference-dark-cyan-215-l70-c15-bold);
894
+ --color-category-cyan-bold-border: var(--color-reference-dark-cyan-215-l50-c11-medium);
895
+ --color-category-cyan-bold-foreground: var(--color-reference-dark-cyan-215-l27-c05-faint);
896
+ --color-category-cyan-faint-background: var(--color-reference-dark-cyan-215-l27-c05-faint);
897
+ --color-category-cyan-faint-border: var(--color-reference-dark-cyan-215-l50-c11-medium);
898
+ --color-category-cyan-faint-foreground: var(--color-reference-dark-cyan-215-l70-c15-bold);
899
+ --color-category-cyan-medium-background: var(--color-reference-dark-cyan-215-l50-c11-medium);
900
+ --color-category-cyan-medium-border: var(--color-reference-dark-cyan-215-l70-c15-bold);
901
+ --color-category-cyan-medium-foreground: var(--color-reference-dark-cyan-215-l92-c07-strong);
902
+ --color-category-cyan-strong-background: var(--color-reference-dark-cyan-215-l92-c07-strong);
903
+ --color-category-cyan-strong-border: var(--color-reference-dark-cyan-215-l70-c15-bold);
904
+ --color-category-cyan-strong-foreground: var(--color-reference-dark-cyan-215-l50-c11-medium);
905
+ --color-category-green-bold-background: var(--color-reference-dark-green-145-l70-c19-bold);
906
+ --color-category-green-bold-border: var(--color-reference-dark-green-145-l50-c17-medium);
907
+ --color-category-green-bold-foreground: var(--color-reference-dark-green-145-l27-c05-faint);
908
+ --color-category-green-faint-background: var(--color-reference-dark-green-145-l27-c05-faint);
909
+ --color-category-green-faint-border: var(--color-reference-dark-green-145-l50-c17-medium);
910
+ --color-category-green-faint-foreground: var(--color-reference-dark-green-145-l70-c19-bold);
911
+ --color-category-green-medium-background: var(--color-reference-dark-green-145-l50-c17-medium);
912
+ --color-category-green-medium-border: var(--color-reference-dark-green-145-l70-c19-bold);
913
+ --color-category-green-medium-foreground: var(--color-reference-dark-green-145-l93-c06-strong);
914
+ --color-category-green-strong-background: var(--color-reference-dark-green-145-l93-c06-strong);
915
+ --color-category-green-strong-border: var(--color-reference-dark-green-145-l70-c19-bold);
916
+ --color-category-green-strong-foreground: var(--color-reference-dark-green-145-l50-c17-medium);
917
+ --color-category-grey-bold-background: var(--color-reference-grey-l65-dark-bold);
918
+ --color-category-grey-bold-border: var(--color-reference-grey-l50-dark-medium);
919
+ --color-category-grey-bold-foreground: var(--color-reference-grey-l27-dark-faint);
920
+ --color-category-grey-faint-background: var(--color-reference-grey-l27-dark-faint);
921
+ --color-category-grey-faint-border: var(--color-reference-grey-l50-dark-medium);
922
+ --color-category-grey-faint-foreground: var(--color-reference-grey-l65-dark-bold);
923
+ --color-category-grey-medium-background: var(--color-reference-grey-l50-dark-medium);
924
+ --color-category-grey-medium-border: var(--color-reference-grey-l65-dark-bold);
925
+ --color-category-grey-medium-foreground: var(--color-reference-grey-l91-dark-strong);
926
+ --color-category-grey-strong-background: var(--color-reference-grey-l91-dark-strong);
927
+ --color-category-grey-strong-border: var(--color-reference-grey-l65-dark-bold);
928
+ --color-category-grey-strong-foreground: var(--color-reference-grey-l50-dark-medium);
929
+ --color-category-interaction-on-bold-background-focus: var(--color-reference-black-20);
930
+ --color-category-interaction-on-bold-background-hover: var(--color-reference-black-15);
931
+ --color-category-interaction-on-bold-background-pressed: var(--color-reference-black-20);
932
+ --color-category-interaction-on-faint-background-focus: var(--color-reference-white-15);
933
+ --color-category-interaction-on-faint-background-hover: var(--color-reference-white-10);
934
+ --color-category-interaction-on-faint-background-pressed: var(--color-reference-white-15);
935
+ --color-category-interaction-on-medium-background-focus: var(--color-reference-white-20);
936
+ --color-category-interaction-on-medium-background-hover: var(--color-reference-white-15);
937
+ --color-category-interaction-on-medium-background-pressed: var(--color-reference-white-20);
938
+ --color-category-interaction-on-strong-background-focus: var(--color-reference-black-15);
939
+ --color-category-interaction-on-strong-background-hover: var(--color-reference-black-10);
940
+ --color-category-interaction-on-strong-background-pressed: var(--color-reference-black-15);
941
+ --color-category-magenta-bold-2-background: var(--color-reference-dark-magenta-325-l67-c20-bold);
942
+ --color-category-magenta-bold-2-border: var(--color-reference-dark-magenta-325-l51-c17-medium);
943
+ --color-category-magenta-bold-2-foreground: var(--color-reference-dark-magenta-325-l28-c05-faint);
944
+ --color-category-magenta-bold-background: var(--color-reference-dark-magenta-325-l67-c20-bold);
945
+ --color-category-magenta-bold-border: var(--color-reference-dark-magenta-325-l51-c17-medium);
946
+ --color-category-magenta-bold-foreground: var(--color-reference-dark-magenta-325-l28-c05-faint);
947
+ --color-category-magenta-faint-2-background: var(--color-reference-dark-magenta-325-l28-c05-faint);
948
+ --color-category-magenta-faint-2-border: var(--color-reference-dark-magenta-325-l51-c17-medium);
949
+ --color-category-magenta-faint-2-foreground: var(--color-reference-dark-magenta-325-l67-c20-bold);
950
+ --color-category-magenta-faint-background: var(--color-reference-dark-magenta-325-l28-c05-faint);
951
+ --color-category-magenta-faint-border: var(--color-reference-dark-magenta-325-l51-c17-medium);
952
+ --color-category-magenta-faint-foreground: var(--color-reference-dark-magenta-325-l67-c20-bold);
953
+ --color-category-magenta-medium-2-background: var(--color-reference-dark-magenta-325-l51-c17-medium);
954
+ --color-category-magenta-medium-2-border: var(--color-reference-dark-magenta-325-l67-c20-bold);
955
+ --color-category-magenta-medium-2-foreground: var(--color-reference-dark-magenta-325-l90-c08-strong);
956
+ --color-category-magenta-medium-background: var(--color-reference-dark-magenta-325-l51-c17-medium);
957
+ --color-category-magenta-medium-border: var(--color-reference-dark-magenta-325-l67-c20-bold);
958
+ --color-category-magenta-medium-foreground: var(--color-reference-dark-magenta-325-l90-c08-strong);
959
+ --color-category-magenta-strong-2-background: var(--color-reference-dark-magenta-325-l90-c08-strong);
960
+ --color-category-magenta-strong-2-border: var(--color-reference-dark-magenta-325-l67-c20-bold);
961
+ --color-category-magenta-strong-2-foreground: var(--color-reference-dark-magenta-325-l51-c17-medium);
962
+ --color-category-magenta-strong-background: var(--color-reference-dark-magenta-325-l90-c08-strong);
963
+ --color-category-magenta-strong-border: var(--color-reference-dark-magenta-325-l67-c20-bold);
964
+ --color-category-magenta-strong-foreground: var(--color-reference-dark-magenta-325-l51-c17-medium);
965
+ --color-category-olive-bold-background: var(--color-reference-dark-olive-115-l75-c19-bold);
966
+ --color-category-olive-bold-border: var(--color-reference-dark-olive-115-l51-c13-medium);
967
+ --color-category-olive-bold-foreground: var(--color-reference-dark-olive-115-l27-c05-faint);
968
+ --color-category-olive-faint-background: var(--color-reference-dark-olive-115-l27-c05-faint);
969
+ --color-category-olive-faint-border: var(--color-reference-dark-olive-115-l51-c13-medium);
970
+ --color-category-olive-faint-foreground: var(--color-reference-dark-olive-115-l75-c19-bold);
971
+ --color-category-olive-medium-background: var(--color-reference-dark-olive-115-l51-c13-medium);
972
+ --color-category-olive-medium-border: var(--color-reference-dark-olive-115-l75-c19-bold);
973
+ --color-category-olive-medium-foreground: var(--color-reference-dark-olive-115-l93-c05-strong);
974
+ --color-category-olive-strong-background: var(--color-reference-dark-olive-115-l93-c05-strong);
975
+ --color-category-olive-strong-border: var(--color-reference-dark-olive-115-l75-c19-bold);
976
+ --color-category-olive-strong-foreground: var(--color-reference-dark-olive-115-l51-c13-medium);
977
+ --color-category-orange-bold-background: var(--color-reference-dark-orange-60-l75-c20-bold);
978
+ --color-category-orange-bold-border: var(--color-reference-dark-orange-60-l51-c13-medium);
979
+ --color-category-orange-bold-foreground: var(--color-reference-dark-orange-60-l28-c05-faint);
980
+ --color-category-orange-faint-background: var(--color-reference-dark-orange-60-l28-c05-faint);
981
+ --color-category-orange-faint-border: var(--color-reference-dark-orange-60-l51-c13-medium);
982
+ --color-category-orange-faint-foreground: var(--color-reference-dark-orange-60-l75-c20-bold);
983
+ --color-category-orange-medium-background: var(--color-reference-dark-orange-60-l51-c13-medium);
984
+ --color-category-orange-medium-border: var(--color-reference-dark-orange-60-l75-c20-bold);
985
+ --color-category-orange-medium-foreground: var(--color-reference-dark-orange-60-l92-c06-strong);
986
+ --color-category-orange-strong-background: var(--color-reference-dark-orange-60-l92-c06-strong);
987
+ --color-category-orange-strong-border: var(--color-reference-dark-orange-60-l75-c20-bold);
988
+ --color-category-orange-strong-foreground: var(--color-reference-dark-orange-60-l51-c13-medium);
989
+ --color-category-pink-bold-background: var(--color-reference-dark-pink-0-l68-c20-bold);
990
+ --color-category-pink-bold-border: var(--color-reference-dark-pink-0-l52-c17-medium);
991
+ --color-category-pink-bold-foreground: var(--color-reference-dark-pink-0-l28-c05-faint);
992
+ --color-category-pink-faint-background: var(--color-reference-dark-pink-0-l28-c05-faint);
993
+ --color-category-pink-faint-border: var(--color-reference-dark-pink-0-l52-c17-medium);
994
+ --color-category-pink-faint-foreground: var(--color-reference-dark-pink-0-l68-c20-bold);
995
+ --color-category-pink-medium-background: var(--color-reference-dark-pink-0-l52-c17-medium);
996
+ --color-category-pink-medium-border: var(--color-reference-dark-pink-0-l68-c20-bold);
997
+ --color-category-pink-medium-foreground: var(--color-reference-dark-pink-0-l92-c05-strong);
998
+ --color-category-pink-strong-background: var(--color-reference-dark-pink-0-l92-c05-strong);
999
+ --color-category-pink-strong-border: var(--color-reference-dark-pink-0-l68-c20-bold);
1000
+ --color-category-pink-strong-foreground: var(--color-reference-dark-pink-0-l52-c17-medium);
1001
+ --color-category-purple-bold-background: var(--color-reference-dark-purple-290-l67-c20-bold);
1002
+ --color-category-purple-bold-border: var(--color-reference-dark-purple-290-l52-c17-medium);
1003
+ --color-category-purple-bold-foreground: var(--color-reference-dark-purple-290-l28-c05-faint);
1004
+ --color-category-purple-faint-background: var(--color-reference-dark-purple-290-l28-c05-faint);
1005
+ --color-category-purple-faint-border: var(--color-reference-dark-purple-290-l52-c17-medium);
1006
+ --color-category-purple-faint-foreground: var(--color-reference-dark-purple-290-l67-c20-bold);
1007
+ --color-category-purple-medium-background: var(--color-reference-dark-purple-290-l52-c17-medium);
1008
+ --color-category-purple-medium-border: var(--color-reference-dark-purple-290-l67-c20-bold);
1009
+ --color-category-purple-medium-foreground: var(--color-reference-dark-purple-290-l92-c05-strong);
1010
+ --color-category-purple-strong-background: var(--color-reference-dark-purple-290-l92-c05-strong);
1011
+ --color-category-purple-strong-border: var(--color-reference-dark-purple-290-l67-c20-bold);
1012
+ --color-category-purple-strong-foreground: var(--color-reference-dark-purple-290-l52-c17-medium);
1013
+ --color-category-red-bold-background: var(--color-reference-dark-red-30-l70-c20-bold);
1014
+ --color-category-red-bold-border: var(--color-reference-dark-red-30-l51-c17-medium);
1015
+ --color-category-red-bold-foreground: var(--color-reference-dark-red-30-l28-c05-faint);
1016
+ --color-category-red-faint-background: var(--color-reference-dark-red-30-l28-c05-faint);
1017
+ --color-category-red-faint-border: var(--color-reference-dark-red-30-l51-c17-medium);
1018
+ --color-category-red-faint-foreground: var(--color-reference-dark-red-30-l70-c20-bold);
1019
+ --color-category-red-medium-background: var(--color-reference-dark-red-30-l51-c17-medium);
1020
+ --color-category-red-medium-border: var(--color-reference-dark-red-30-l70-c20-bold);
1021
+ --color-category-red-medium-foreground: var(--color-reference-dark-red-30-l91-c06-strong);
1022
+ --color-category-red-strong-background: var(--color-reference-dark-red-30-l91-c06-strong);
1023
+ --color-category-red-strong-border: var(--color-reference-dark-red-30-l70-c20-bold);
1024
+ --color-category-red-strong-foreground: var(--color-reference-dark-red-30-l51-c17-medium);
1025
+ --color-category-teal-bold-background: var(--color-reference-dark-teal-180-l70-c15-bold);
1026
+ --color-category-teal-bold-border: var(--color-reference-dark-teal-180-l50-c12-medium);
1027
+ --color-category-teal-bold-foreground: var(--color-reference-dark-teal-180-l27-c05-faint);
1028
+ --color-category-teal-faint-background: var(--color-reference-dark-teal-180-l27-c05-faint);
1029
+ --color-category-teal-faint-border: var(--color-reference-dark-teal-180-l50-c12-medium);
1030
+ --color-category-teal-faint-foreground: var(--color-reference-dark-teal-180-l70-c15-bold);
1031
+ --color-category-teal-medium-background: var(--color-reference-dark-teal-180-l50-c12-medium);
1032
+ --color-category-teal-medium-border: var(--color-reference-dark-teal-180-l70-c15-bold);
1033
+ --color-category-teal-medium-foreground: var(--color-reference-dark-teal-180-l93-c08-strong);
1034
+ --color-category-teal-strong-background: var(--color-reference-dark-teal-180-l93-c08-strong);
1035
+ --color-category-teal-strong-border: var(--color-reference-dark-teal-180-l70-c15-bold);
1036
+ --color-category-teal-strong-foreground: var(--color-reference-dark-teal-180-l50-c12-medium);
1037
+ --color-category-yellow-bold-background: var(--color-reference-dark-yellow-85-l80-c18-bold);
1038
+ --color-category-yellow-bold-border: var(--color-reference-dark-yellow-85-l51-c12-medium);
1039
+ --color-category-yellow-bold-foreground: var(--color-reference-dark-yellow-85-l28-c05-faint);
1040
+ --color-category-yellow-faint-background: var(--color-reference-dark-yellow-85-l28-c05-faint);
1041
+ --color-category-yellow-faint-border: var(--color-reference-dark-yellow-85-l51-c12-medium);
1042
+ --color-category-yellow-faint-foreground: var(--color-reference-dark-yellow-85-l80-c18-bold);
1043
+ --color-category-yellow-medium-background: var(--color-reference-dark-yellow-85-l51-c12-medium);
1044
+ --color-category-yellow-medium-border: var(--color-reference-dark-yellow-85-l80-c18-bold);
1045
+ --color-category-yellow-medium-foreground: var(--color-reference-dark-yellow-85-l93-c05-strong);
1046
+ --color-category-yellow-strong-background: var(--color-reference-dark-yellow-85-l93-c05-strong);
1047
+ --color-category-yellow-strong-border: var(--color-reference-dark-yellow-85-l80-c18-bold);
1048
+ --color-category-yellow-strong-foreground: var(--color-reference-dark-yellow-85-l51-c12-medium);
730
1049
  --color-divider-divider: var(--color-reference-white-10);
731
1050
  --color-divider-on-bold-background: var(--color-reference-black-15);
732
1051
  --color-divider-on-medium-background: var(--color-reference-white-15);
@@ -813,36 +1132,6 @@
813
1132
  --color-foreground-strong-walkthrough: var(--color-reference-dark-teal-180-l93-c08-strong);
814
1133
  --color-foreground-strong-warning: var(--color-reference-dark-orange-60-l92-c06-strong);
815
1134
  --color-foreground-tertiary: var(--color-reference-white-35);
816
- --color-geofence-category-fuel-station-background: var(--color-reference-dark-blue-250-l27-c05-faint);
817
- --color-geofence-category-fuel-station-border: var(--color-reference-dark-blue-250-l50-c17-medium);
818
- --color-geofence-category-fuel-station-foreground: var(--color-reference-dark-blue-250-l65-c20-bold);
819
- --color-geofence-category-interaction-focus: var(--color-reference-white-15);
820
- --color-geofence-category-interaction-hover: var(--color-reference-white-15);
821
- --color-geofence-category-interaction-pressed: var(--color-reference-white-20);
822
- --color-geofence-category-job-site-background: var(--color-reference-dark-olive-115-l27-c05-faint);
823
- --color-geofence-category-job-site-border: var(--color-reference-dark-olive-115-l51-c13-medium);
824
- --color-geofence-category-job-site-foreground: var(--color-reference-dark-olive-115-l75-c19-bold);
825
- --color-geofence-category-maintenance-facility-background: var(--color-reference-dark-magenta-325-l28-c05-faint);
826
- --color-geofence-category-maintenance-facility-border: var(--color-reference-dark-magenta-325-l51-c17-medium);
827
- --color-geofence-category-maintenance-facility-foreground: var(--color-reference-dark-magenta-325-l67-c20-bold);
828
- --color-geofence-category-restricted-location-background: var(--color-reference-dark-red-30-l70-c20-bold);
829
- --color-geofence-category-restricted-location-border: var(--color-reference-dark-red-30-l51-c17-medium);
830
- --color-geofence-category-restricted-location-foreground: var(--color-reference-dark-red-30-l28-c05-faint);
831
- --color-geofence-category-risk-zone-background: var(--color-reference-dark-red-30-l28-c05-faint);
832
- --color-geofence-category-risk-zone-border: var(--color-reference-dark-red-30-l51-c17-medium);
833
- --color-geofence-category-risk-zone-foreground: var(--color-reference-dark-red-30-l70-c20-bold);
834
- --color-geofence-category-shipper-background: var(--color-reference-dark-yellow-85-l28-c05-faint);
835
- --color-geofence-category-shipper-border: var(--color-reference-dark-yellow-85-l51-c12-medium);
836
- --color-geofence-category-shipper-foreground: var(--color-reference-dark-yellow-85-l80-c18-bold);
837
- --color-geofence-category-specialized-job-site-background: var(--color-reference-dark-orange-60-l28-c05-faint);
838
- --color-geofence-category-specialized-job-site-border: var(--color-reference-dark-orange-60-l51-c13-medium);
839
- --color-geofence-category-specialized-job-site-foreground: var(--color-reference-dark-orange-60-l75-c20-bold);
840
- --color-geofence-category-terminal-background: var(--color-reference-dark-teal-180-l27-c05-faint);
841
- --color-geofence-category-terminal-border: var(--color-reference-dark-teal-180-l50-c12-medium);
842
- --color-geofence-category-terminal-foreground: var(--color-reference-dark-teal-180-l70-c15-bold);
843
- --color-geofence-category-uncategorized-background: var(--color-reference-grey-l27-dark-faint);
844
- --color-geofence-category-uncategorized-border: var(--color-reference-grey-l50-dark-medium);
845
- --color-geofence-category-uncategorized-foreground: var(--color-reference-grey-l65-dark-bold);
846
1135
  --color-interaction-active: var(--color-reference-dark-blue-250-l27-c05-faint);
847
1136
  --color-interaction-focus: var(--color-reference-white-15);
848
1137
  --color-interaction-hover: var(--color-reference-white-10);
@@ -931,6 +1220,19 @@
931
1220
  --color-location-marker-interaction-focus: var(--color-reference-white-15);
932
1221
  --color-location-marker-interaction-hover: var(--color-reference-black-15);
933
1222
  --color-location-marker-interaction-pressed: var(--color-reference-black-20);
1223
+ --color-media-background: var(--color-reference-grey-l20);
1224
+ --color-media-border-primary: var(--color-reference-white-20);
1225
+ --color-media-border-secondary: var(--color-reference-white-15);
1226
+ --color-media-border-tertiary: var(--color-reference-white-10);
1227
+ --color-media-divider: var(--color-reference-white-10);
1228
+ --color-media-foreground-primary: var(--color-reference-white-100);
1229
+ --color-media-foreground-quaternary: var(--color-reference-white-20);
1230
+ --color-media-foreground-secondary: var(--color-reference-white-55);
1231
+ --color-media-foreground-tertiary: var(--color-reference-white-35);
1232
+ --color-media-interaction-active: var(--color-reference-white-20);
1233
+ --color-media-interaction-focus: var(--color-reference-white-15);
1234
+ --color-media-interaction-hover: var(--color-reference-white-10);
1235
+ --color-media-interaction-pressed: var(--color-reference-white-15);
934
1236
  --color-navigation-background: var(--color-reference-grey-l27-dark-faint);
935
1237
  --color-navigation-border-primary: var(--color-reference-white-15);
936
1238
  --color-navigation-border-secondary: var(--color-reference-white-10);
package/dist/dimensions.css CHANGED
@@ -20,6 +20,7 @@
20
20
  --dimension-space-400: calc(var(--dimension-space-base) * 4);
21
21
  --dimension-space-600: calc(var(--dimension-space-base) * 6);
22
22
  --dimension-space-800: calc(var(--dimension-space-base) * 8);
23
+ --dimension-space-base: var(--dimension-space-base);
23
24
  --dimension-space-000: 0;
24
25
  --dimension-space-012: calc(var(--dimension-space-base) / 8);
25
26
  --dimension-space-025: calc(var(--dimension-space-base) / 4);
@@ -51,6 +52,7 @@
51
52
  --dimension-radius-300: calc(var(--dimension-radius-base) * 3);
52
53
  --dimension-radius-400: calc(var(--dimension-radius-base) * 4);
53
54
  --dimension-radius-600: calc(var(--dimension-radius-base) * 6);
55
+ --dimension-radius-base: var(--dimension-radius-base);
54
56
  --dimension-radius-000: 0;
55
57
  --dimension-radius-012: calc(var(--dimension-radius-base) / 8);
56
58
  --dimension-radius-025: calc(var(--dimension-radius-base) / 4);
@@ -60,6 +62,7 @@
60
62
  --dimension-radius-half: 9999px;
61
63
 
62
64
  /* Stroke widths — calc() relative to --dimension-stroke-width-base */
65
+ --dimension-stroke-width-base: var(--dimension-stroke-width-base);
63
66
  --dimension-stroke-width-012: calc(var(--dimension-stroke-width-base) / 8);
64
67
  --dimension-stroke-width-015: calc(var(--dimension-stroke-width-base) * 5 / 32);
65
68
  --dimension-stroke-width-018: calc(var(--dimension-stroke-width-base) * 3 / 16);
@@ -77,6 +80,7 @@
77
80
  --dimension-size-500: calc(var(--dimension-size-base) * 5);
78
81
  --dimension-size-600: calc(var(--dimension-size-base) * 6);
79
82
  --dimension-size-800: calc(var(--dimension-size-base) * 8);
83
+ --dimension-size-base: var(--dimension-size-base);
80
84
  --dimension-size-000: 0;
81
85
  --dimension-size-050: calc(var(--dimension-size-base) / 2);
82
86
 
@@ -90,20 +94,26 @@
90
94
  --dimension-iconography-3xl: calc(var(--dimension-size-base) * 8);
91
95
 
92
96
  /* Card widths */
97
+ --dimension-card-width-xs: 300px;
93
98
  --dimension-card-width-sm: 400px;
94
- --dimension-card-width-md: 600px;
95
- --dimension-card-width-lg: 800px;
99
+ --dimension-card-width-md: 500px;
100
+ --dimension-card-width-lg: 600px;
96
101
 
97
102
  /* Modal widths */
103
+ --dimension-modal-width-xs: 300px;
98
104
  --dimension-modal-width-sm: 400px;
99
- --dimension-modal-width-md: 600px;
100
- --dimension-modal-width-lg: 800px;
105
+ --dimension-modal-width-md: 500px;
106
+ --dimension-modal-width-lg: 600px;
107
+ --dimension-modal-width-xl: 700px;
108
+ --dimension-modal-width-2xl: 800px;
101
109
  --dimension-modal-width-fill: 100%;
102
110
 
103
111
  /* Form widths */
104
- --dimension-form-width-sm: 400px;
105
- --dimension-form-width-md: 600px;
106
- --dimension-form-width-lg: 800px;
112
+ --dimension-form-width-xs: 200px;
113
+ --dimension-form-width-sm: 300px;
114
+ --dimension-form-width-md: 400px;
115
+ --dimension-form-width-lg: 500px;
116
+ --dimension-form-width-xl: 600px;
107
117
 
108
118
  /* Table column widths */
109
119
  --dimension-table-column-width-xs: 100px;
@@ -113,21 +123,24 @@
113
123
  --dimension-table-column-width-xl: 500px;
114
124
 
115
125
  /* Menu widths */
116
- --dimension-menu-width-sm: 200px;
126
+ --dimension-menu-width-xs: 200px;
127
+ --dimension-menu-width-sm: 300px;
117
128
  --dimension-menu-width-md: 400px;
118
- --dimension-menu-width-lg: 600px;
129
+ --dimension-menu-width-lg: 500px;
119
130
 
120
131
  /* Tooltip widths */
121
- --dimension-tooltip-width-sm: 200px;
132
+ --dimension-tooltip-width-sm: 300px;
122
133
  --dimension-tooltip-width-md: 400px;
123
- --dimension-tooltip-width-lg: 600px;
134
+ --dimension-tooltip-width-lg: 500px;
124
135
 
125
136
  /* Panel widths */
126
- --dimension-panel-width-xs: 200px;
127
- --dimension-panel-width-sm: 300px;
128
- --dimension-panel-width-md: 400px;
129
- --dimension-panel-width-lg: 500px;
130
- --dimension-panel-width-xl: 600px;
137
+ --dimension-panel-width-2xs: 200px;
138
+ --dimension-panel-width-xs: 300px;
139
+ --dimension-panel-width-sm: 400px;
140
+ --dimension-panel-width-md: 500px;
141
+ --dimension-panel-width-lg: 600px;
142
+ --dimension-panel-width-xl: 700px;
143
+ --dimension-panel-width-2xl: 800px;
131
144
  --dimension-panel-width-fill: 100%;
132
145
 
133
146
  /* Offset — for transforms and background-position, calc() relative to --dimension-space-base */
@@ -153,7 +166,7 @@
153
166
  --dimension-offset-n250: calc(var(--dimension-space-base) * -5 / 2);
154
167
 
155
168
  /* Scale — unitless multipliers for transform: scale() */
156
- --dimension-scale-100: 1;
169
+ --dimension-scale-default: 1;
157
170
  --dimension-scale-subtle: 0.99;
158
171
 
159
172
  /* Z-index layers */