@salt-ds/theme 1.0.0 → 1.2.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 (4) hide show
  1. package/css/global.css +3 -0
  2. package/css/theme.css +171 -57
  3. package/index.css +174 -57
  4. package/package.json +2 -2
package/css/global.css CHANGED
@@ -6,6 +6,9 @@
6
6
  letter-spacing: var(--salt-text-letterSpacing);
7
7
  line-height: var(--salt-text-lineHeight);
8
8
  }
9
+ ::selection {
10
+ background: var(--salt-text-background-selected);
11
+ }
9
12
  .salt-theme[data-mode=light] {
10
13
  color-scheme: light;
11
14
  }
package/css/theme.css CHANGED
@@ -262,20 +262,37 @@
262
262
  /* css/foundations/fade.css */
263
263
  .salt-theme {
264
264
  --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-foreground));
265
+ --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-foreground));
265
266
  --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-foreground));
266
- --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
267
267
  --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-foreground));
268
+ --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
268
269
  --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-foreground));
269
270
  --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-foreground));
271
+ --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-foreground));
272
+ --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-foreground));
273
+ --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-foreground));
274
+ --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-foreground));
275
+ --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
276
+ --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
277
+ --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-foreground));
278
+ --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-foreground));
279
+ --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-foreground));
270
280
  --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-foreground));
281
+ --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-border));
271
282
  --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-border));
272
283
  --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-border));
273
284
  --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-border));
274
285
  --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-border));
286
+ --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-border));
287
+ --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-border));
275
288
  --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-border));
289
+ --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-border));
276
290
  --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-border));
291
+ --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-border));
292
+ --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-border));
277
293
  --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
278
294
  --salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
295
+ --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-background));
279
296
  --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
280
297
  --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
281
298
  --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-background));
@@ -288,10 +305,10 @@
288
305
  --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
289
306
  --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
290
307
  --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-background));
291
- --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-readonly));
292
- --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-readonly));
293
- --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-readonly));
294
- --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-readonly));
308
+ --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
309
+ --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
310
+ --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
311
+ --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
295
312
  --salt-color-black-fade-backdrop: rgba(36, 37, 38, var(--salt-palette-opacity-backdrop));
296
313
  --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-fill));
297
314
  --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
@@ -348,7 +365,7 @@
348
365
  --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
349
366
  --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
350
367
  --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
351
- --salt-shadow-5: 0 12px 40px 5px var(--salt-shadow-5-color);
368
+ --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
352
369
  }
353
370
 
354
371
  /* css/foundations/size.css */
@@ -358,36 +375,47 @@
358
375
  .salt-density-high {
359
376
  --salt-size-basis-unit: 4px;
360
377
  --salt-size-border: 1px;
361
- --salt-size-brandBar: 4px;
362
- --salt-size-divider-strokeWidth: 1px;
363
378
  --salt-size-sharktooth-height: 5px;
364
379
  --salt-size-sharktooth-width: 10px;
365
- --salt-size-divider-height: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
366
- --salt-size-selection: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
380
+ --salt-size-separator-strokeWidth: 1px;
381
+ --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
382
+ --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
367
383
  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
384
+ --salt-size-selection: var(--salt-size-selectable);
385
+ --salt-size-brandBar: 4px;
368
386
  --salt-size-graphic-small: 12px;
369
387
  --salt-size-graphic-medium: 24px;
370
388
  --salt-size-graphic-large: 48px;
389
+ --salt-size-divider-height: var(--salt-size-separator-height);
390
+ --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
371
391
  }
372
392
  .salt-density-high {
373
393
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
374
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 1.5);
394
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
375
395
  --salt-size-base: calc(var(--salt-size-basis-unit) * 5);
396
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
397
+ --salt-size-detail: var(--salt-size-compact);
376
398
  }
377
399
  .salt-density-medium {
378
400
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
379
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 2);
401
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
380
402
  --salt-size-base: calc(var(--salt-size-basis-unit) * 7);
403
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
404
+ --salt-size-detail: var(--salt-size-compact);
381
405
  }
382
406
  .salt-density-low {
383
407
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
384
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 2.5);
408
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
385
409
  --salt-size-base: calc(var(--salt-size-basis-unit) * 9);
410
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
411
+ --salt-size-detail: var(--salt-size-compact);
386
412
  }
387
413
  .salt-density-touch {
388
414
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
389
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 3);
415
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
390
416
  --salt-size-base: calc(var(--salt-size-basis-unit) * 11);
417
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
418
+ --salt-size-detail: var(--salt-size-compact);
391
419
  }
392
420
 
393
421
  /* css/foundations/typography.css */
@@ -422,6 +450,7 @@
422
450
  /* css/foundations/palette.css */
423
451
  .salt-theme {
424
452
  --salt-palette-opacity-background: var(--salt-opacity-3);
453
+ --salt-palette-opacity-background-readonly: var(--salt-opacity-1);
425
454
  --salt-palette-opacity-border: var(--salt-opacity-3);
426
455
  --salt-palette-opacity-border-readonly: var(--salt-opacity-2);
427
456
  --salt-palette-opacity-fill: var(--salt-opacity-3);
@@ -434,6 +463,7 @@
434
463
  }
435
464
  .salt-theme[data-mode=light] {
436
465
  --salt-palette-accent-background: var(--salt-color-blue-500);
466
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
437
467
  --salt-palette-accent-border: var(--salt-color-blue-500);
438
468
  --salt-palette-accent-foreground: var(--salt-color-white);
439
469
  --salt-palette-interact-background: transparent;
@@ -447,10 +477,11 @@
447
477
  --salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);
448
478
  --salt-palette-interact-border-hover: var(--salt-color-blue-500);
449
479
  --salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);
450
- --salt-palette-interact-foreground: var(--salt-color-gray-900);
451
- --salt-palette-interact-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
452
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
453
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
480
+ --salt-palette-interact-foreground: var(--salt-color-gray-200);
481
+ --salt-palette-interact-foreground-active: var(--salt-color-blue-600);
482
+ --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);
483
+ --salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
484
+ --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
454
485
  --salt-palette-interact-outline: var(--salt-color-blue-600);
455
486
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
456
487
  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
@@ -483,27 +514,27 @@
483
514
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
484
515
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
485
516
  --salt-palette-error-background-emphasize: var(--salt-color-red-10);
517
+ --salt-palette-error-background-selected: var(--salt-color-red-20);
486
518
  --salt-palette-error-border: var(--salt-color-red-500);
519
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
487
520
  --salt-palette-error-foreground: var(--salt-color-red-500);
521
+ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
488
522
  --salt-palette-info-background-emphasize: var(--salt-color-blue-10);
489
523
  --salt-palette-info-border: var(--salt-color-blue-500);
524
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
490
525
  --salt-palette-info-foreground: var(--salt-color-blue-500);
526
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
491
527
  --salt-palette-success-background-emphasize: var(--salt-color-green-10);
528
+ --salt-palette-success-background-selected: var(--salt-color-green-20);
492
529
  --salt-palette-success-border: var(--salt-color-green-500);
530
+ --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
493
531
  --salt-palette-success-foreground: var(--salt-color-green-500);
532
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
494
533
  --salt-palette-warning-background-emphasize: var(--salt-color-orange-10);
495
- --salt-palette-warning-border: var(--salt-color-orange-500);
496
- --salt-palette-warning-foreground: var(--salt-color-orange-500);
497
- --salt-palette-measured-fill: var(--salt-color-blue-500);
498
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
499
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
500
- --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
501
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
502
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
503
- --salt-palette-measured-background: var(--salt-color-gray-60);
504
- --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
505
- --salt-palette-measured-border: var(--salt-color-gray-90);
506
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
534
+ --salt-palette-warning-background-selected: var(--salt-color-orange-20);
535
+ --salt-palette-warning-border: var(--salt-color-orange-700);
536
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
537
+ --salt-palette-warning-foreground: var(--salt-color-orange-700);
507
538
  --salt-palette-navigate-primary-background: transparent;
508
539
  --salt-palette-navigate-primary-background-active: transparent;
509
540
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
@@ -520,6 +551,7 @@
520
551
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
521
552
  --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
522
553
  --salt-palette-negative-foreground: var(--salt-color-red-700);
554
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
523
555
  --salt-palette-neutral-primary-background: var(--salt-color-white);
524
556
  --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
525
557
  --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
@@ -544,9 +576,15 @@
544
576
  --salt-palette-neutral-tertiary-border-disabled: transparent;
545
577
  --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
546
578
  --salt-palette-positive-foreground: var(--salt-color-green-700);
579
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
580
+ --salt-palette-track-background: var(--salt-color-gray-60);
581
+ --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
582
+ --salt-palette-track-border: var(--salt-color-gray-90);
583
+ --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
547
584
  }
548
585
  .salt-theme[data-mode=dark] {
549
586
  --salt-palette-accent-background: var(--salt-color-blue-500);
587
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
550
588
  --salt-palette-accent-border: var(--salt-color-blue-500);
551
589
  --salt-palette-accent-foreground: var(--salt-color-white);
552
590
  --salt-palette-interact-background: transparent;
@@ -560,10 +598,11 @@
560
598
  --salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);
561
599
  --salt-palette-interact-border-hover: var(--salt-color-blue-500);
562
600
  --salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);
563
- --salt-palette-interact-foreground: var(--salt-color-white);
564
- --salt-palette-interact-foreground-disabled: var(--salt-color-white-fade-foreground);
565
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
566
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
601
+ --salt-palette-interact-foreground: var(--salt-color-gray-90);
602
+ --salt-palette-interact-foreground-active: var(--salt-color-blue-100);
603
+ --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
604
+ --salt-palette-interact-foreground-disabled: var(--salt-color-90-fade-foreground);
605
+ --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
567
606
  --salt-palette-interact-outline: var(--salt-color-blue-100);
568
607
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
569
608
  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
@@ -596,27 +635,27 @@
596
635
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
597
636
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
598
637
  --salt-palette-error-background-emphasize: var(--salt-color-red-900);
638
+ --salt-palette-error-background-selected: var(--salt-color-red-900);
599
639
  --salt-palette-error-border: var(--salt-color-red-500);
640
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
600
641
  --salt-palette-error-foreground: var(--salt-color-red-500);
642
+ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
601
643
  --salt-palette-info-background-emphasize: var(--salt-color-blue-900);
602
644
  --salt-palette-info-border: var(--salt-color-blue-500);
645
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
603
646
  --salt-palette-info-foreground: var(--salt-color-blue-500);
647
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
604
648
  --salt-palette-success-background-emphasize: var(--salt-color-green-900);
605
- --salt-palette-success-border: var(--salt-color-green-500);
606
- --salt-palette-success-foreground: var(--salt-color-green-500);
649
+ --salt-palette-success-background-selected: var(--salt-color-green-900);
650
+ --salt-palette-success-border: var(--salt-color-green-400);
651
+ --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
652
+ --salt-palette-success-foreground: var(--salt-color-green-400);
653
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
607
654
  --salt-palette-warning-background-emphasize: var(--salt-color-orange-900);
655
+ --salt-palette-warning-background-selected: var(--salt-color-orange-900);
608
656
  --salt-palette-warning-border: var(--salt-color-orange-500);
657
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
609
658
  --salt-palette-warning-foreground: var(--salt-color-orange-500);
610
- --salt-palette-measured-fill: var(--salt-color-blue-300);
611
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
612
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
613
- --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
614
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
615
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
616
- --salt-palette-measured-background: var(--salt-color-gray-300);
617
- --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
618
- --salt-palette-measured-border: var(--salt-color-gray-90);
619
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
620
659
  --salt-palette-navigate-primary-background: transparent;
621
660
  --salt-palette-navigate-primary-background-active: transparent;
622
661
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
@@ -633,6 +672,7 @@
633
672
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
634
673
  --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
635
674
  --salt-palette-negative-foreground: var(--salt-color-red-300);
675
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
636
676
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
637
677
  --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
638
678
  --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
@@ -657,6 +697,39 @@
657
697
  --salt-palette-neutral-tertiary-border-disabled: transparent;
658
698
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
659
699
  --salt-palette-positive-foreground: var(--salt-color-green-300);
700
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
701
+ --salt-palette-track-background: var(--salt-color-gray-300);
702
+ --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
703
+ --salt-palette-track-border: var(--salt-color-gray-90);
704
+ --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
705
+ }
706
+ .salt-theme[data-mode=light] {
707
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
708
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
709
+ --salt-palette-measured-fill: var(--salt-color-blue-500);
710
+ --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
711
+ --salt-palette-measured-foreground: var(--salt-color-gray-90);
712
+ --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
713
+ --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
714
+ --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
715
+ --salt-palette-measured-background: var(--salt-color-gray-60);
716
+ --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
717
+ --salt-palette-measured-border: var(--salt-color-gray-90);
718
+ --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
719
+ }
720
+ .salt-theme[data-mode=dark] {
721
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
722
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
723
+ --salt-palette-measured-fill: var(--salt-color-blue-300);
724
+ --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
725
+ --salt-palette-measured-foreground: var(--salt-color-gray-90);
726
+ --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
727
+ --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
728
+ --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
729
+ --salt-palette-measured-background: var(--salt-color-gray-300);
730
+ --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
731
+ --salt-palette-measured-border: var(--salt-color-gray-90);
732
+ --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
660
733
  }
661
734
 
662
735
  /* css/characteristics/accent.css */
@@ -678,6 +751,7 @@
678
751
  }
679
752
  .salt-theme {
680
753
  --salt-accent-background: var(--salt-palette-accent-background);
754
+ --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
681
755
  --salt-accent-borderColor: var(--salt-palette-accent-border);
682
756
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
683
757
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
@@ -872,7 +946,6 @@
872
946
  /* css/characteristics/overlayable.css */
873
947
  .salt-theme {
874
948
  --salt-overlayable-shadow-scroll: var(--salt-shadow-1);
875
- --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
876
949
  --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
877
950
  --salt-overlayable-shadow: var(--salt-shadow-2);
878
951
  --salt-overlayable-shadow-hover: var(--salt-shadow-3);
@@ -880,6 +953,7 @@
880
953
  --salt-overlayable-shadow-drag: var(--salt-shadow-4);
881
954
  --salt-overlayable-shadow-modal: var(--salt-shadow-5);
882
955
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
956
+ --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
883
957
  }
884
958
 
885
959
  /* css/characteristics/selectable.css */
@@ -897,43 +971,48 @@
897
971
  --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
898
972
  --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
899
973
  --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
900
- --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
901
- --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
974
+ --salt-selectable-foreground: var(--salt-palette-interact-foreground);
975
+ --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
976
+ --salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
977
+ --salt-selectable-foreground-selected: var(--salt-palette-interact-foreground-active);
978
+ --salt-selectable-foreground-selectedDisabled: var(--salt-palette-interact-foreground-activeDisabled);
902
979
  --salt-selectable-background: var(--salt-palette-interact-background);
903
980
  --salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
904
981
  --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
905
982
  --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
906
983
  --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
907
- --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
908
984
  --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
909
985
  --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
910
986
  --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
911
- --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
912
987
  --salt-selectable-cta-background: var(--salt-palette-interact-background);
913
988
  --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
914
989
  --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
915
990
  --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
916
991
  --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
917
- --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
992
+ --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
918
993
  --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
919
994
  --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
920
- --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
921
- --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
922
995
  --salt-selectable-primary-background: var(--salt-palette-interact-background);
923
996
  --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
924
997
  --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
925
998
  --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
926
999
  --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
927
- --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1000
+ --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
928
1001
  --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
929
1002
  --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
930
- --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
931
- --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
932
1003
  --salt-selectable-secondary-background: var(--salt-palette-interact-background);
933
1004
  --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
934
1005
  --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
935
1006
  --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
936
1007
  --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
1008
+ --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
1009
+ --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
1010
+ --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
1011
+ --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1012
+ --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1013
+ --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1014
+ --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1015
+ --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
937
1016
  }
938
1017
 
939
1018
  /* css/characteristics/separable.css */
@@ -950,14 +1029,31 @@
950
1029
  --salt-status-success-foreground: var(--salt-palette-success-foreground);
951
1030
  --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
952
1031
  --salt-status-error-foreground: var(--salt-palette-error-foreground);
1032
+ --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
1033
+ --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
1034
+ --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
1035
+ --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
1036
+ --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
1037
+ --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
1038
+ --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
1039
+ --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1040
+ --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1041
+ --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
953
1042
  --salt-status-info-borderColor: var(--salt-palette-info-border);
954
1043
  --salt-status-success-borderColor: var(--salt-palette-success-border);
955
1044
  --salt-status-warning-borderColor: var(--salt-palette-warning-border);
956
1045
  --salt-status-error-borderColor: var(--salt-palette-error-border);
1046
+ --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
1047
+ --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1048
+ --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1049
+ --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
957
1050
  --salt-status-info-background-emphasize: var(--salt-palette-info-background-emphasize);
958
1051
  --salt-status-success-background-emphasize: var(--salt-palette-success-background-emphasize);
959
1052
  --salt-status-warning-background-emphasize: var(--salt-palette-warning-background-emphasize);
960
1053
  --salt-status-error-background-emphasize: var(--salt-palette-error-background-emphasize);
1054
+ --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1055
+ --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1056
+ --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
961
1057
  }
962
1058
 
963
1059
  /* css/characteristics/taggable.css */
@@ -1108,4 +1204,22 @@
1108
1204
  --salt-text-display3-lineHeight: 24px;
1109
1205
  }
1110
1206
 
1207
+ /* css/characteristics/track.css */
1208
+ .salt-theme {
1209
+ --salt-track-borderStyle: solid;
1210
+ --salt-track-borderStyle-active: solid;
1211
+ --salt-track-borderStyle-complete: solid;
1212
+ --salt-track-borderStyle-incomplete: dotted;
1213
+ --salt-track-borderWidth: 2px;
1214
+ --salt-track-borderWidth-active: 2px;
1215
+ --salt-track-borderWidth-complete: 2px;
1216
+ --salt-track-borderWidth-incomplete: 2px;
1217
+ --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
1218
+ --salt-track-textAlign: center;
1219
+ --salt-track-background: var(--salt-palette-track-background);
1220
+ --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
1221
+ --salt-track-borderColor: var(--salt-palette-track-border);
1222
+ --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
1223
+ }
1224
+
1111
1225
  /* css/theme.css */
package/index.css CHANGED
@@ -6,6 +6,9 @@
6
6
  letter-spacing: var(--salt-text-letterSpacing);
7
7
  line-height: var(--salt-text-lineHeight);
8
8
  }
9
+ ::selection {
10
+ background: var(--salt-text-background-selected);
11
+ }
9
12
  .salt-theme[data-mode=light] {
10
13
  color-scheme: light;
11
14
  }
@@ -282,20 +285,37 @@
282
285
  /* css/foundations/fade.css */
283
286
  .salt-theme {
284
287
  --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-foreground));
288
+ --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-foreground));
285
289
  --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-foreground));
286
- --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
287
290
  --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-foreground));
291
+ --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
288
292
  --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-foreground));
289
293
  --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-foreground));
294
+ --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-foreground));
295
+ --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-foreground));
296
+ --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-foreground));
297
+ --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-foreground));
298
+ --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
299
+ --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
300
+ --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-foreground));
301
+ --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-foreground));
302
+ --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-foreground));
290
303
  --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-foreground));
304
+ --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-border));
291
305
  --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-border));
292
306
  --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-border));
293
307
  --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-border));
294
308
  --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-border));
309
+ --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-border));
310
+ --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-border));
295
311
  --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-border));
312
+ --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-border));
296
313
  --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-border));
314
+ --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-border));
315
+ --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-border));
297
316
  --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
298
317
  --salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
318
+ --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-background));
299
319
  --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
300
320
  --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
301
321
  --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-background));
@@ -308,10 +328,10 @@
308
328
  --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
309
329
  --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
310
330
  --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-background));
311
- --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-readonly));
312
- --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-readonly));
313
- --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-readonly));
314
- --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-readonly));
331
+ --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
332
+ --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
333
+ --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
334
+ --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
315
335
  --salt-color-black-fade-backdrop: rgba(36, 37, 38, var(--salt-palette-opacity-backdrop));
316
336
  --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-fill));
317
337
  --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
@@ -368,7 +388,7 @@
368
388
  --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
369
389
  --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
370
390
  --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
371
- --salt-shadow-5: 0 12px 40px 5px var(--salt-shadow-5-color);
391
+ --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
372
392
  }
373
393
 
374
394
  /* css/foundations/size.css */
@@ -378,36 +398,47 @@
378
398
  .salt-density-high {
379
399
  --salt-size-basis-unit: 4px;
380
400
  --salt-size-border: 1px;
381
- --salt-size-brandBar: 4px;
382
- --salt-size-divider-strokeWidth: 1px;
383
401
  --salt-size-sharktooth-height: 5px;
384
402
  --salt-size-sharktooth-width: 10px;
385
- --salt-size-divider-height: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
386
- --salt-size-selection: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
403
+ --salt-size-separator-strokeWidth: 1px;
404
+ --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
405
+ --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
387
406
  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
407
+ --salt-size-selection: var(--salt-size-selectable);
408
+ --salt-size-brandBar: 4px;
388
409
  --salt-size-graphic-small: 12px;
389
410
  --salt-size-graphic-medium: 24px;
390
411
  --salt-size-graphic-large: 48px;
412
+ --salt-size-divider-height: var(--salt-size-separator-height);
413
+ --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
391
414
  }
392
415
  .salt-density-high {
393
416
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
394
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 1.5);
417
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
395
418
  --salt-size-base: calc(var(--salt-size-basis-unit) * 5);
419
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
420
+ --salt-size-detail: var(--salt-size-compact);
396
421
  }
397
422
  .salt-density-medium {
398
423
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
399
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 2);
424
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
400
425
  --salt-size-base: calc(var(--salt-size-basis-unit) * 7);
426
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
427
+ --salt-size-detail: var(--salt-size-compact);
401
428
  }
402
429
  .salt-density-low {
403
430
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
404
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 2.5);
431
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
405
432
  --salt-size-base: calc(var(--salt-size-basis-unit) * 9);
433
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
434
+ --salt-size-detail: var(--salt-size-compact);
406
435
  }
407
436
  .salt-density-touch {
408
437
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
409
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 3);
438
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
410
439
  --salt-size-base: calc(var(--salt-size-basis-unit) * 11);
440
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
441
+ --salt-size-detail: var(--salt-size-compact);
411
442
  }
412
443
 
413
444
  /* css/foundations/typography.css */
@@ -442,6 +473,7 @@
442
473
  /* css/foundations/palette.css */
443
474
  .salt-theme {
444
475
  --salt-palette-opacity-background: var(--salt-opacity-3);
476
+ --salt-palette-opacity-background-readonly: var(--salt-opacity-1);
445
477
  --salt-palette-opacity-border: var(--salt-opacity-3);
446
478
  --salt-palette-opacity-border-readonly: var(--salt-opacity-2);
447
479
  --salt-palette-opacity-fill: var(--salt-opacity-3);
@@ -454,6 +486,7 @@
454
486
  }
455
487
  .salt-theme[data-mode=light] {
456
488
  --salt-palette-accent-background: var(--salt-color-blue-500);
489
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
457
490
  --salt-palette-accent-border: var(--salt-color-blue-500);
458
491
  --salt-palette-accent-foreground: var(--salt-color-white);
459
492
  --salt-palette-interact-background: transparent;
@@ -467,10 +500,11 @@
467
500
  --salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);
468
501
  --salt-palette-interact-border-hover: var(--salt-color-blue-500);
469
502
  --salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);
470
- --salt-palette-interact-foreground: var(--salt-color-gray-900);
471
- --salt-palette-interact-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
472
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
473
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
503
+ --salt-palette-interact-foreground: var(--salt-color-gray-200);
504
+ --salt-palette-interact-foreground-active: var(--salt-color-blue-600);
505
+ --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);
506
+ --salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
507
+ --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
474
508
  --salt-palette-interact-outline: var(--salt-color-blue-600);
475
509
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
476
510
  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
@@ -503,27 +537,27 @@
503
537
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
504
538
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
505
539
  --salt-palette-error-background-emphasize: var(--salt-color-red-10);
540
+ --salt-palette-error-background-selected: var(--salt-color-red-20);
506
541
  --salt-palette-error-border: var(--salt-color-red-500);
542
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
507
543
  --salt-palette-error-foreground: var(--salt-color-red-500);
544
+ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
508
545
  --salt-palette-info-background-emphasize: var(--salt-color-blue-10);
509
546
  --salt-palette-info-border: var(--salt-color-blue-500);
547
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
510
548
  --salt-palette-info-foreground: var(--salt-color-blue-500);
549
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
511
550
  --salt-palette-success-background-emphasize: var(--salt-color-green-10);
551
+ --salt-palette-success-background-selected: var(--salt-color-green-20);
512
552
  --salt-palette-success-border: var(--salt-color-green-500);
553
+ --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
513
554
  --salt-palette-success-foreground: var(--salt-color-green-500);
555
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
514
556
  --salt-palette-warning-background-emphasize: var(--salt-color-orange-10);
515
- --salt-palette-warning-border: var(--salt-color-orange-500);
516
- --salt-palette-warning-foreground: var(--salt-color-orange-500);
517
- --salt-palette-measured-fill: var(--salt-color-blue-500);
518
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
519
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
520
- --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
521
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
522
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
523
- --salt-palette-measured-background: var(--salt-color-gray-60);
524
- --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
525
- --salt-palette-measured-border: var(--salt-color-gray-90);
526
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
557
+ --salt-palette-warning-background-selected: var(--salt-color-orange-20);
558
+ --salt-palette-warning-border: var(--salt-color-orange-700);
559
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
560
+ --salt-palette-warning-foreground: var(--salt-color-orange-700);
527
561
  --salt-palette-navigate-primary-background: transparent;
528
562
  --salt-palette-navigate-primary-background-active: transparent;
529
563
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
@@ -540,6 +574,7 @@
540
574
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
541
575
  --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
542
576
  --salt-palette-negative-foreground: var(--salt-color-red-700);
577
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
543
578
  --salt-palette-neutral-primary-background: var(--salt-color-white);
544
579
  --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
545
580
  --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
@@ -564,9 +599,15 @@
564
599
  --salt-palette-neutral-tertiary-border-disabled: transparent;
565
600
  --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
566
601
  --salt-palette-positive-foreground: var(--salt-color-green-700);
602
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
603
+ --salt-palette-track-background: var(--salt-color-gray-60);
604
+ --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
605
+ --salt-palette-track-border: var(--salt-color-gray-90);
606
+ --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
567
607
  }
568
608
  .salt-theme[data-mode=dark] {
569
609
  --salt-palette-accent-background: var(--salt-color-blue-500);
610
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
570
611
  --salt-palette-accent-border: var(--salt-color-blue-500);
571
612
  --salt-palette-accent-foreground: var(--salt-color-white);
572
613
  --salt-palette-interact-background: transparent;
@@ -580,10 +621,11 @@
580
621
  --salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);
581
622
  --salt-palette-interact-border-hover: var(--salt-color-blue-500);
582
623
  --salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);
583
- --salt-palette-interact-foreground: var(--salt-color-white);
584
- --salt-palette-interact-foreground-disabled: var(--salt-color-white-fade-foreground);
585
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
586
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
624
+ --salt-palette-interact-foreground: var(--salt-color-gray-90);
625
+ --salt-palette-interact-foreground-active: var(--salt-color-blue-100);
626
+ --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
627
+ --salt-palette-interact-foreground-disabled: var(--salt-color-90-fade-foreground);
628
+ --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
587
629
  --salt-palette-interact-outline: var(--salt-color-blue-100);
588
630
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
589
631
  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
@@ -616,27 +658,27 @@
616
658
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
617
659
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
618
660
  --salt-palette-error-background-emphasize: var(--salt-color-red-900);
661
+ --salt-palette-error-background-selected: var(--salt-color-red-900);
619
662
  --salt-palette-error-border: var(--salt-color-red-500);
663
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
620
664
  --salt-palette-error-foreground: var(--salt-color-red-500);
665
+ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
621
666
  --salt-palette-info-background-emphasize: var(--salt-color-blue-900);
622
667
  --salt-palette-info-border: var(--salt-color-blue-500);
668
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
623
669
  --salt-palette-info-foreground: var(--salt-color-blue-500);
670
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
624
671
  --salt-palette-success-background-emphasize: var(--salt-color-green-900);
625
- --salt-palette-success-border: var(--salt-color-green-500);
626
- --salt-palette-success-foreground: var(--salt-color-green-500);
672
+ --salt-palette-success-background-selected: var(--salt-color-green-900);
673
+ --salt-palette-success-border: var(--salt-color-green-400);
674
+ --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
675
+ --salt-palette-success-foreground: var(--salt-color-green-400);
676
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
627
677
  --salt-palette-warning-background-emphasize: var(--salt-color-orange-900);
678
+ --salt-palette-warning-background-selected: var(--salt-color-orange-900);
628
679
  --salt-palette-warning-border: var(--salt-color-orange-500);
680
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
629
681
  --salt-palette-warning-foreground: var(--salt-color-orange-500);
630
- --salt-palette-measured-fill: var(--salt-color-blue-300);
631
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
632
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
633
- --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
634
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
635
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
636
- --salt-palette-measured-background: var(--salt-color-gray-300);
637
- --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
638
- --salt-palette-measured-border: var(--salt-color-gray-90);
639
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
640
682
  --salt-palette-navigate-primary-background: transparent;
641
683
  --salt-palette-navigate-primary-background-active: transparent;
642
684
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
@@ -653,6 +695,7 @@
653
695
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
654
696
  --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
655
697
  --salt-palette-negative-foreground: var(--salt-color-red-300);
698
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
656
699
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
657
700
  --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
658
701
  --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
@@ -677,6 +720,39 @@
677
720
  --salt-palette-neutral-tertiary-border-disabled: transparent;
678
721
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
679
722
  --salt-palette-positive-foreground: var(--salt-color-green-300);
723
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
724
+ --salt-palette-track-background: var(--salt-color-gray-300);
725
+ --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
726
+ --salt-palette-track-border: var(--salt-color-gray-90);
727
+ --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
728
+ }
729
+ .salt-theme[data-mode=light] {
730
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
731
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
732
+ --salt-palette-measured-fill: var(--salt-color-blue-500);
733
+ --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
734
+ --salt-palette-measured-foreground: var(--salt-color-gray-90);
735
+ --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
736
+ --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
737
+ --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
738
+ --salt-palette-measured-background: var(--salt-color-gray-60);
739
+ --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
740
+ --salt-palette-measured-border: var(--salt-color-gray-90);
741
+ --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
742
+ }
743
+ .salt-theme[data-mode=dark] {
744
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
745
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
746
+ --salt-palette-measured-fill: var(--salt-color-blue-300);
747
+ --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
748
+ --salt-palette-measured-foreground: var(--salt-color-gray-90);
749
+ --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
750
+ --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
751
+ --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
752
+ --salt-palette-measured-background: var(--salt-color-gray-300);
753
+ --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
754
+ --salt-palette-measured-border: var(--salt-color-gray-90);
755
+ --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
680
756
  }
681
757
 
682
758
  /* css/characteristics/accent.css */
@@ -698,6 +774,7 @@
698
774
  }
699
775
  .salt-theme {
700
776
  --salt-accent-background: var(--salt-palette-accent-background);
777
+ --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
701
778
  --salt-accent-borderColor: var(--salt-palette-accent-border);
702
779
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
703
780
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
@@ -892,7 +969,6 @@
892
969
  /* css/characteristics/overlayable.css */
893
970
  .salt-theme {
894
971
  --salt-overlayable-shadow-scroll: var(--salt-shadow-1);
895
- --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
896
972
  --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
897
973
  --salt-overlayable-shadow: var(--salt-shadow-2);
898
974
  --salt-overlayable-shadow-hover: var(--salt-shadow-3);
@@ -900,6 +976,7 @@
900
976
  --salt-overlayable-shadow-drag: var(--salt-shadow-4);
901
977
  --salt-overlayable-shadow-modal: var(--salt-shadow-5);
902
978
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
979
+ --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
903
980
  }
904
981
 
905
982
  /* css/characteristics/selectable.css */
@@ -917,43 +994,48 @@
917
994
  --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
918
995
  --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
919
996
  --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
920
- --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
921
- --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
997
+ --salt-selectable-foreground: var(--salt-palette-interact-foreground);
998
+ --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
999
+ --salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
1000
+ --salt-selectable-foreground-selected: var(--salt-palette-interact-foreground-active);
1001
+ --salt-selectable-foreground-selectedDisabled: var(--salt-palette-interact-foreground-activeDisabled);
922
1002
  --salt-selectable-background: var(--salt-palette-interact-background);
923
1003
  --salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
924
1004
  --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
925
1005
  --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
926
1006
  --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
927
- --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
928
1007
  --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
929
1008
  --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
930
1009
  --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
931
- --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
932
1010
  --salt-selectable-cta-background: var(--salt-palette-interact-background);
933
1011
  --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
934
1012
  --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
935
1013
  --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
936
1014
  --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
937
- --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1015
+ --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
938
1016
  --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
939
1017
  --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
940
- --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
941
- --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
942
1018
  --salt-selectable-primary-background: var(--salt-palette-interact-background);
943
1019
  --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
944
1020
  --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
945
1021
  --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
946
1022
  --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
947
- --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1023
+ --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
948
1024
  --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
949
1025
  --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
950
- --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
951
- --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
952
1026
  --salt-selectable-secondary-background: var(--salt-palette-interact-background);
953
1027
  --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
954
1028
  --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
955
1029
  --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
956
1030
  --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
1031
+ --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
1032
+ --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
1033
+ --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
1034
+ --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1035
+ --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1036
+ --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1037
+ --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1038
+ --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
957
1039
  }
958
1040
 
959
1041
  /* css/characteristics/separable.css */
@@ -970,14 +1052,31 @@
970
1052
  --salt-status-success-foreground: var(--salt-palette-success-foreground);
971
1053
  --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
972
1054
  --salt-status-error-foreground: var(--salt-palette-error-foreground);
1055
+ --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
1056
+ --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
1057
+ --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
1058
+ --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
1059
+ --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
1060
+ --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
1061
+ --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
1062
+ --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1063
+ --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1064
+ --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
973
1065
  --salt-status-info-borderColor: var(--salt-palette-info-border);
974
1066
  --salt-status-success-borderColor: var(--salt-palette-success-border);
975
1067
  --salt-status-warning-borderColor: var(--salt-palette-warning-border);
976
1068
  --salt-status-error-borderColor: var(--salt-palette-error-border);
1069
+ --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
1070
+ --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1071
+ --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1072
+ --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
977
1073
  --salt-status-info-background-emphasize: var(--salt-palette-info-background-emphasize);
978
1074
  --salt-status-success-background-emphasize: var(--salt-palette-success-background-emphasize);
979
1075
  --salt-status-warning-background-emphasize: var(--salt-palette-warning-background-emphasize);
980
1076
  --salt-status-error-background-emphasize: var(--salt-palette-error-background-emphasize);
1077
+ --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1078
+ --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1079
+ --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
981
1080
  }
982
1081
 
983
1082
  /* css/characteristics/taggable.css */
@@ -1128,6 +1227,24 @@
1128
1227
  --salt-text-display3-lineHeight: 24px;
1129
1228
  }
1130
1229
 
1230
+ /* css/characteristics/track.css */
1231
+ .salt-theme {
1232
+ --salt-track-borderStyle: solid;
1233
+ --salt-track-borderStyle-active: solid;
1234
+ --salt-track-borderStyle-complete: solid;
1235
+ --salt-track-borderStyle-incomplete: dotted;
1236
+ --salt-track-borderWidth: 2px;
1237
+ --salt-track-borderWidth-active: 2px;
1238
+ --salt-track-borderWidth-complete: 2px;
1239
+ --salt-track-borderWidth-incomplete: 2px;
1240
+ --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
1241
+ --salt-track-textAlign: center;
1242
+ --salt-track-background: var(--salt-palette-track-background);
1243
+ --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
1244
+ --salt-track-borderColor: var(--salt-palette-track-border);
1245
+ --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
1246
+ }
1247
+
1131
1248
  /* css/theme.css */
1132
1249
 
1133
1250
  /* index.css */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.0.0",
3
+ "version": "1.2.0",
4
4
  "license": "Apache-2.0",
5
5
  "style": "index.css",
6
6
  "files": [
@@ -8,7 +8,7 @@
8
8
  "/css"
9
9
  ],
10
10
  "scripts": {
11
- "build": "yarn node ./scripts/build.js"
11
+ "build": "yarn node ./scripts/build.mjs"
12
12
  },
13
13
  "publishConfig": {
14
14
  "directory": "../../dist/salt-ds-theme"