@salt-ds/theme 1.0.0 → 1.1.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 +42 -18
  3. package/index.css +45 -18
  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
@@ -288,10 +288,10 @@
288
288
  --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
289
289
  --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
290
290
  --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));
291
+ --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
292
+ --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
293
+ --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
294
+ --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
295
295
  --salt-color-black-fade-backdrop: rgba(36, 37, 38, var(--salt-palette-opacity-backdrop));
296
296
  --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-fill));
297
297
  --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
@@ -348,7 +348,7 @@
348
348
  --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
349
349
  --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
350
350
  --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);
351
+ --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
352
352
  }
353
353
 
354
354
  /* css/foundations/size.css */
@@ -358,36 +358,47 @@
358
358
  .salt-density-high {
359
359
  --salt-size-basis-unit: 4px;
360
360
  --salt-size-border: 1px;
361
- --salt-size-brandBar: 4px;
362
- --salt-size-divider-strokeWidth: 1px;
363
361
  --salt-size-sharktooth-height: 5px;
364
362
  --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)));
363
+ --salt-size-separator-strokeWidth: 1px;
364
+ --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
365
+ --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
367
366
  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
367
+ --salt-size-selection: var(--salt-size-selectable);
368
+ --salt-size-brandBar: 4px;
368
369
  --salt-size-graphic-small: 12px;
369
370
  --salt-size-graphic-medium: 24px;
370
371
  --salt-size-graphic-large: 48px;
372
+ --salt-size-divider-height: var(--salt-size-separator-height);
373
+ --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
371
374
  }
372
375
  .salt-density-high {
373
376
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
374
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 1.5);
377
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
375
378
  --salt-size-base: calc(var(--salt-size-basis-unit) * 5);
379
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
380
+ --salt-size-detail: var(--salt-size-compact);
376
381
  }
377
382
  .salt-density-medium {
378
383
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
379
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 2);
384
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
380
385
  --salt-size-base: calc(var(--salt-size-basis-unit) * 7);
386
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
387
+ --salt-size-detail: var(--salt-size-compact);
381
388
  }
382
389
  .salt-density-low {
383
390
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
384
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 2.5);
391
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
385
392
  --salt-size-base: calc(var(--salt-size-basis-unit) * 9);
393
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
394
+ --salt-size-detail: var(--salt-size-compact);
386
395
  }
387
396
  .salt-density-touch {
388
397
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
389
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 3);
398
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
390
399
  --salt-size-base: calc(var(--salt-size-basis-unit) * 11);
400
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
401
+ --salt-size-detail: var(--salt-size-compact);
391
402
  }
392
403
 
393
404
  /* css/foundations/typography.css */
@@ -422,6 +433,7 @@
422
433
  /* css/foundations/palette.css */
423
434
  .salt-theme {
424
435
  --salt-palette-opacity-background: var(--salt-opacity-3);
436
+ --salt-palette-opacity-background-readonly: var(--salt-opacity-1);
425
437
  --salt-palette-opacity-border: var(--salt-opacity-3);
426
438
  --salt-palette-opacity-border-readonly: var(--salt-opacity-2);
427
439
  --salt-palette-opacity-fill: var(--salt-opacity-3);
@@ -483,17 +495,20 @@
483
495
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
484
496
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
485
497
  --salt-palette-error-background-emphasize: var(--salt-color-red-10);
498
+ --salt-palette-error-background-selected: var(--salt-color-red-20);
486
499
  --salt-palette-error-border: var(--salt-color-red-500);
487
500
  --salt-palette-error-foreground: var(--salt-color-red-500);
488
501
  --salt-palette-info-background-emphasize: var(--salt-color-blue-10);
489
502
  --salt-palette-info-border: var(--salt-color-blue-500);
490
503
  --salt-palette-info-foreground: var(--salt-color-blue-500);
491
504
  --salt-palette-success-background-emphasize: var(--salt-color-green-10);
505
+ --salt-palette-success-background-selected: var(--salt-color-green-20);
492
506
  --salt-palette-success-border: var(--salt-color-green-500);
493
507
  --salt-palette-success-foreground: var(--salt-color-green-500);
494
508
  --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);
509
+ --salt-palette-warning-background-selected: var(--salt-color-orange-20);
510
+ --salt-palette-warning-border: var(--salt-color-orange-700);
511
+ --salt-palette-warning-foreground: var(--salt-color-orange-700);
497
512
  --salt-palette-measured-fill: var(--salt-color-blue-500);
498
513
  --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
499
514
  --salt-palette-measured-foreground: var(--salt-color-gray-90);
@@ -596,15 +611,18 @@
596
611
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
597
612
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
598
613
  --salt-palette-error-background-emphasize: var(--salt-color-red-900);
614
+ --salt-palette-error-background-selected: var(--salt-color-red-900);
599
615
  --salt-palette-error-border: var(--salt-color-red-500);
600
616
  --salt-palette-error-foreground: var(--salt-color-red-500);
601
617
  --salt-palette-info-background-emphasize: var(--salt-color-blue-900);
602
618
  --salt-palette-info-border: var(--salt-color-blue-500);
603
619
  --salt-palette-info-foreground: var(--salt-color-blue-500);
604
620
  --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);
621
+ --salt-palette-success-background-selected: var(--salt-color-green-900);
622
+ --salt-palette-success-border: var(--salt-color-green-400);
623
+ --salt-palette-success-foreground: var(--salt-color-green-400);
607
624
  --salt-palette-warning-background-emphasize: var(--salt-color-orange-900);
625
+ --salt-palette-warning-background-selected: var(--salt-color-orange-900);
608
626
  --salt-palette-warning-border: var(--salt-color-orange-500);
609
627
  --salt-palette-warning-foreground: var(--salt-color-orange-500);
610
628
  --salt-palette-measured-fill: var(--salt-color-blue-300);
@@ -872,7 +890,6 @@
872
890
  /* css/characteristics/overlayable.css */
873
891
  .salt-theme {
874
892
  --salt-overlayable-shadow-scroll: var(--salt-shadow-1);
875
- --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
876
893
  --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
877
894
  --salt-overlayable-shadow: var(--salt-shadow-2);
878
895
  --salt-overlayable-shadow-hover: var(--salt-shadow-3);
@@ -880,6 +897,7 @@
880
897
  --salt-overlayable-shadow-drag: var(--salt-shadow-4);
881
898
  --salt-overlayable-shadow-modal: var(--salt-shadow-5);
882
899
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
900
+ --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
883
901
  }
884
902
 
885
903
  /* css/characteristics/selectable.css */
@@ -950,6 +968,9 @@
950
968
  --salt-status-success-foreground: var(--salt-palette-success-foreground);
951
969
  --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
952
970
  --salt-status-error-foreground: var(--salt-palette-error-foreground);
971
+ --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
972
+ --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
973
+ --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
953
974
  --salt-status-info-borderColor: var(--salt-palette-info-border);
954
975
  --salt-status-success-borderColor: var(--salt-palette-success-border);
955
976
  --salt-status-warning-borderColor: var(--salt-palette-warning-border);
@@ -958,6 +979,9 @@
958
979
  --salt-status-success-background-emphasize: var(--salt-palette-success-background-emphasize);
959
980
  --salt-status-warning-background-emphasize: var(--salt-palette-warning-background-emphasize);
960
981
  --salt-status-error-background-emphasize: var(--salt-palette-error-background-emphasize);
982
+ --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
983
+ --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
984
+ --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
961
985
  }
962
986
 
963
987
  /* css/characteristics/taggable.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
  }
@@ -308,10 +311,10 @@
308
311
  --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
309
312
  --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
310
313
  --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));
314
+ --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
315
+ --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
316
+ --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
317
+ --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
315
318
  --salt-color-black-fade-backdrop: rgba(36, 37, 38, var(--salt-palette-opacity-backdrop));
316
319
  --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-fill));
317
320
  --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
@@ -368,7 +371,7 @@
368
371
  --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
369
372
  --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
370
373
  --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);
374
+ --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
372
375
  }
373
376
 
374
377
  /* css/foundations/size.css */
@@ -378,36 +381,47 @@
378
381
  .salt-density-high {
379
382
  --salt-size-basis-unit: 4px;
380
383
  --salt-size-border: 1px;
381
- --salt-size-brandBar: 4px;
382
- --salt-size-divider-strokeWidth: 1px;
383
384
  --salt-size-sharktooth-height: 5px;
384
385
  --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)));
386
+ --salt-size-separator-strokeWidth: 1px;
387
+ --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
388
+ --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
387
389
  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
390
+ --salt-size-selection: var(--salt-size-selectable);
391
+ --salt-size-brandBar: 4px;
388
392
  --salt-size-graphic-small: 12px;
389
393
  --salt-size-graphic-medium: 24px;
390
394
  --salt-size-graphic-large: 48px;
395
+ --salt-size-divider-height: var(--salt-size-separator-height);
396
+ --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
391
397
  }
392
398
  .salt-density-high {
393
399
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
394
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 1.5);
400
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
395
401
  --salt-size-base: calc(var(--salt-size-basis-unit) * 5);
402
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
403
+ --salt-size-detail: var(--salt-size-compact);
396
404
  }
397
405
  .salt-density-medium {
398
406
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
399
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 2);
407
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
400
408
  --salt-size-base: calc(var(--salt-size-basis-unit) * 7);
409
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
410
+ --salt-size-detail: var(--salt-size-compact);
401
411
  }
402
412
  .salt-density-low {
403
413
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
404
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 2.5);
414
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
405
415
  --salt-size-base: calc(var(--salt-size-basis-unit) * 9);
416
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
417
+ --salt-size-detail: var(--salt-size-compact);
406
418
  }
407
419
  .salt-density-touch {
408
420
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
409
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 3);
421
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
410
422
  --salt-size-base: calc(var(--salt-size-basis-unit) * 11);
423
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
424
+ --salt-size-detail: var(--salt-size-compact);
411
425
  }
412
426
 
413
427
  /* css/foundations/typography.css */
@@ -442,6 +456,7 @@
442
456
  /* css/foundations/palette.css */
443
457
  .salt-theme {
444
458
  --salt-palette-opacity-background: var(--salt-opacity-3);
459
+ --salt-palette-opacity-background-readonly: var(--salt-opacity-1);
445
460
  --salt-palette-opacity-border: var(--salt-opacity-3);
446
461
  --salt-palette-opacity-border-readonly: var(--salt-opacity-2);
447
462
  --salt-palette-opacity-fill: var(--salt-opacity-3);
@@ -503,17 +518,20 @@
503
518
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
504
519
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
505
520
  --salt-palette-error-background-emphasize: var(--salt-color-red-10);
521
+ --salt-palette-error-background-selected: var(--salt-color-red-20);
506
522
  --salt-palette-error-border: var(--salt-color-red-500);
507
523
  --salt-palette-error-foreground: var(--salt-color-red-500);
508
524
  --salt-palette-info-background-emphasize: var(--salt-color-blue-10);
509
525
  --salt-palette-info-border: var(--salt-color-blue-500);
510
526
  --salt-palette-info-foreground: var(--salt-color-blue-500);
511
527
  --salt-palette-success-background-emphasize: var(--salt-color-green-10);
528
+ --salt-palette-success-background-selected: var(--salt-color-green-20);
512
529
  --salt-palette-success-border: var(--salt-color-green-500);
513
530
  --salt-palette-success-foreground: var(--salt-color-green-500);
514
531
  --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);
532
+ --salt-palette-warning-background-selected: var(--salt-color-orange-20);
533
+ --salt-palette-warning-border: var(--salt-color-orange-700);
534
+ --salt-palette-warning-foreground: var(--salt-color-orange-700);
517
535
  --salt-palette-measured-fill: var(--salt-color-blue-500);
518
536
  --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
519
537
  --salt-palette-measured-foreground: var(--salt-color-gray-90);
@@ -616,15 +634,18 @@
616
634
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
617
635
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
618
636
  --salt-palette-error-background-emphasize: var(--salt-color-red-900);
637
+ --salt-palette-error-background-selected: var(--salt-color-red-900);
619
638
  --salt-palette-error-border: var(--salt-color-red-500);
620
639
  --salt-palette-error-foreground: var(--salt-color-red-500);
621
640
  --salt-palette-info-background-emphasize: var(--salt-color-blue-900);
622
641
  --salt-palette-info-border: var(--salt-color-blue-500);
623
642
  --salt-palette-info-foreground: var(--salt-color-blue-500);
624
643
  --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);
644
+ --salt-palette-success-background-selected: var(--salt-color-green-900);
645
+ --salt-palette-success-border: var(--salt-color-green-400);
646
+ --salt-palette-success-foreground: var(--salt-color-green-400);
627
647
  --salt-palette-warning-background-emphasize: var(--salt-color-orange-900);
648
+ --salt-palette-warning-background-selected: var(--salt-color-orange-900);
628
649
  --salt-palette-warning-border: var(--salt-color-orange-500);
629
650
  --salt-palette-warning-foreground: var(--salt-color-orange-500);
630
651
  --salt-palette-measured-fill: var(--salt-color-blue-300);
@@ -892,7 +913,6 @@
892
913
  /* css/characteristics/overlayable.css */
893
914
  .salt-theme {
894
915
  --salt-overlayable-shadow-scroll: var(--salt-shadow-1);
895
- --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
896
916
  --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
897
917
  --salt-overlayable-shadow: var(--salt-shadow-2);
898
918
  --salt-overlayable-shadow-hover: var(--salt-shadow-3);
@@ -900,6 +920,7 @@
900
920
  --salt-overlayable-shadow-drag: var(--salt-shadow-4);
901
921
  --salt-overlayable-shadow-modal: var(--salt-shadow-5);
902
922
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
923
+ --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
903
924
  }
904
925
 
905
926
  /* css/characteristics/selectable.css */
@@ -970,6 +991,9 @@
970
991
  --salt-status-success-foreground: var(--salt-palette-success-foreground);
971
992
  --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
972
993
  --salt-status-error-foreground: var(--salt-palette-error-foreground);
994
+ --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
995
+ --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
996
+ --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
973
997
  --salt-status-info-borderColor: var(--salt-palette-info-border);
974
998
  --salt-status-success-borderColor: var(--salt-palette-success-border);
975
999
  --salt-status-warning-borderColor: var(--salt-palette-warning-border);
@@ -978,6 +1002,9 @@
978
1002
  --salt-status-success-background-emphasize: var(--salt-palette-success-background-emphasize);
979
1003
  --salt-status-warning-background-emphasize: var(--salt-palette-warning-background-emphasize);
980
1004
  --salt-status-error-background-emphasize: var(--salt-palette-error-background-emphasize);
1005
+ --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1006
+ --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1007
+ --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
981
1008
  }
982
1009
 
983
1010
  /* css/characteristics/taggable.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.1.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"