@salt-ds/theme 1.3.0 → 1.5.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 +11 -0
  2. package/css/theme.css +86 -24
  3. package/index.css +97 -24
  4. package/package.json +1 -1
package/css/global.css CHANGED
@@ -20,3 +20,14 @@
20
20
  *::after {
21
21
  box-sizing: border-box;
22
22
  }
23
+ .salt-visuallyHidden {
24
+ position: absolute;
25
+ height: 1px;
26
+ width: 1px;
27
+ padding: 0;
28
+ margin: -1px;
29
+ overflow: hidden;
30
+ clip: rect(0, 0, 0, 0);
31
+ white-space: nowrap;
32
+ border-width: 0;
33
+ }
package/css/theme.css CHANGED
@@ -332,16 +332,23 @@
332
332
 
333
333
  /* css/foundations/icon.css */
334
334
  .salt-density-touch {
335
- --salt-size-icon-base: 16px;
335
+ --salt-icon-size-base: 16px;
336
+ --salt-icon-size-status-adornment: 12px;
336
337
  }
337
338
  .salt-density-low {
338
- --salt-size-icon-base: 14px;
339
+ --salt-icon-size-base: 14px;
340
+ --salt-icon-size-status-adornment: 10px;
339
341
  }
340
342
  .salt-density-medium {
341
- --salt-size-icon-base: 12px;
343
+ --salt-icon-size-base: 12px;
344
+ --salt-icon-size-status-adornment: 8px;
342
345
  }
343
346
  .salt-density-high {
344
- --salt-size-icon-base: 10px;
347
+ --salt-icon-size-base: 10px;
348
+ --salt-icon-size-status-adornment: 6px;
349
+ }
350
+ .salt-theme {
351
+ --salt-size-icon-base: var(--salt-icon-size-base);
345
352
  }
346
353
 
347
354
  /* css/foundations/opacity.css */
@@ -383,7 +390,6 @@
383
390
  .salt-density-high {
384
391
  --salt-size-basis-unit: 4px;
385
392
  --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
386
- --salt-size-border: 1px;
387
393
  --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
388
394
  --salt-size-separator-strokeWidth: 1px;
389
395
  --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
@@ -402,32 +408,80 @@
402
408
  .salt-density-high {
403
409
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
404
410
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
405
- --salt-size-base: calc(var(--salt-size-basis-unit) * 5);
406
411
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
412
+ --salt-size-adornment: 6px;
413
+ --salt-size-bar: 2px;
414
+ --salt-size-base: 20px;
415
+ --salt-size-border: 1px;
416
+ --salt-size-selectable: 12px;
417
+ --salt-size-icon: 12px;
407
418
  --salt-size-detail: var(--salt-size-compact);
408
419
  }
409
420
  .salt-density-medium {
410
421
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
411
422
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
412
- --salt-size-base: calc(var(--salt-size-basis-unit) * 7);
413
423
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
424
+ --salt-size-adornment: 8px;
425
+ --salt-size-bar: 4px;
426
+ --salt-size-base: 28px;
427
+ --salt-size-border: 1px;
428
+ --salt-size-selectable: 14px;
429
+ --salt-size-icon: 12px;
414
430
  --salt-size-detail: var(--salt-size-compact);
415
431
  }
416
432
  .salt-density-low {
417
433
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
418
434
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
419
- --salt-size-base: calc(var(--salt-size-basis-unit) * 9);
420
435
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
436
+ --salt-size-adornment: 10px;
437
+ --salt-size-bar: 6px;
438
+ --salt-size-base: 36px;
439
+ --salt-size-border: 1px;
440
+ --salt-size-selectable: 16px;
441
+ --salt-size-icon: 14px;
421
442
  --salt-size-detail: var(--salt-size-compact);
422
443
  }
423
444
  .salt-density-touch {
424
445
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
425
446
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
426
- --salt-size-base: calc(var(--salt-size-basis-unit) * 11);
427
447
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
448
+ --salt-size-adornment: 12px;
449
+ --salt-size-bar: 8px;
450
+ --salt-size-base: 44px;
451
+ --salt-size-border: 1px;
452
+ --salt-size-selectable: 18px;
453
+ --salt-size-icon: 16px;
428
454
  --salt-size-detail: var(--salt-size-compact);
429
455
  }
430
456
 
457
+ /* css/foundations/spacing.css */
458
+ .salt-density-touch {
459
+ --salt-spacing-100: 16px;
460
+ }
461
+ .salt-density-low {
462
+ --salt-spacing-100: 12px;
463
+ }
464
+ .salt-density-medium {
465
+ --salt-spacing-100: 8px;
466
+ }
467
+ .salt-density-high {
468
+ --salt-spacing-100: 4px;
469
+ }
470
+ .salt-density-touch,
471
+ .salt-density-low,
472
+ .salt-density-medium,
473
+ .salt-density-high {
474
+ --salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
475
+ --salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
476
+ --salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
477
+ --salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
478
+ --salt-spacing-200: calc(2 * var(--salt-spacing-100));
479
+ --salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
480
+ --salt-spacing-300: calc(3 * var(--salt-spacing-100));
481
+ --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
482
+ --salt-spacing-400: calc(4 * var(--salt-spacing-100));
483
+ }
484
+
431
485
  /* css/foundations/typography.css */
432
486
  .salt-theme {
433
487
  --salt-typography-fontFamily: "Open Sans";
@@ -470,6 +524,10 @@
470
524
  --salt-palette-opacity-primary-border: var(--salt-opacity-3);
471
525
  --salt-palette-opacity-secondary-border: var(--salt-opacity-2);
472
526
  --salt-palette-opacity-tertiary-border: var(--salt-opacity-1);
527
+ --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
528
+ --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
529
+ --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
530
+ --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
473
531
  }
474
532
  .salt-theme[data-mode=light] {
475
533
  --salt-palette-accent-background: var(--salt-color-blue-500);
@@ -525,24 +583,24 @@
525
583
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
526
584
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
527
585
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
528
- --salt-palette-error-background-emphasize: var(--salt-color-red-10);
586
+ --salt-palette-error-background: var(--salt-color-red-10);
529
587
  --salt-palette-error-background-selected: var(--salt-color-red-20);
530
588
  --salt-palette-error-border: var(--salt-color-red-500);
531
589
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
532
590
  --salt-palette-error-foreground: var(--salt-color-red-500);
533
591
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
534
- --salt-palette-info-background-emphasize: var(--salt-color-blue-10);
592
+ --salt-palette-info-background: var(--salt-color-blue-10);
535
593
  --salt-palette-info-border: var(--salt-color-blue-500);
536
594
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
537
595
  --salt-palette-info-foreground: var(--salt-color-blue-500);
538
596
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
539
- --salt-palette-success-background-emphasize: var(--salt-color-green-10);
597
+ --salt-palette-success-background: var(--salt-color-green-10);
540
598
  --salt-palette-success-background-selected: var(--salt-color-green-20);
541
599
  --salt-palette-success-border: var(--salt-color-green-500);
542
600
  --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
543
601
  --salt-palette-success-foreground: var(--salt-color-green-500);
544
602
  --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
545
- --salt-palette-warning-background-emphasize: var(--salt-color-orange-10);
603
+ --salt-palette-warning-background: var(--salt-color-orange-10);
546
604
  --salt-palette-warning-background-selected: var(--salt-color-orange-20);
547
605
  --salt-palette-warning-border: var(--salt-color-orange-700);
548
606
  --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
@@ -583,7 +641,6 @@
583
641
  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
584
642
  --salt-palette-neutral-tertiary-background: transparent;
585
643
  --salt-palette-neutral-tertiary-background-disabled: transparent;
586
- --salt-palette-neutral-tertiary-background-readonly: transparent;
587
644
  --salt-palette-neutral-tertiary-border: transparent;
588
645
  --salt-palette-neutral-tertiary-border-disabled: transparent;
589
646
  --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
@@ -648,24 +705,24 @@
648
705
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
649
706
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
650
707
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
651
- --salt-palette-error-background-emphasize: var(--salt-color-red-900);
708
+ --salt-palette-error-background: var(--salt-color-red-900);
652
709
  --salt-palette-error-background-selected: var(--salt-color-red-900);
653
710
  --salt-palette-error-border: var(--salt-color-red-500);
654
711
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
655
712
  --salt-palette-error-foreground: var(--salt-color-red-500);
656
713
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
657
- --salt-palette-info-background-emphasize: var(--salt-color-blue-900);
714
+ --salt-palette-info-background: var(--salt-color-blue-900);
658
715
  --salt-palette-info-border: var(--salt-color-blue-500);
659
716
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
660
717
  --salt-palette-info-foreground: var(--salt-color-blue-500);
661
718
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
662
- --salt-palette-success-background-emphasize: var(--salt-color-green-900);
719
+ --salt-palette-success-background: var(--salt-color-green-900);
663
720
  --salt-palette-success-background-selected: var(--salt-color-green-900);
664
721
  --salt-palette-success-border: var(--salt-color-green-400);
665
722
  --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
666
723
  --salt-palette-success-foreground: var(--salt-color-green-400);
667
724
  --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
668
- --salt-palette-warning-background-emphasize: var(--salt-color-orange-900);
725
+ --salt-palette-warning-background: var(--salt-color-orange-900);
669
726
  --salt-palette-warning-background-selected: var(--salt-color-orange-900);
670
727
  --salt-palette-warning-border: var(--salt-color-orange-500);
671
728
  --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
@@ -706,7 +763,6 @@
706
763
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
707
764
  --salt-palette-neutral-tertiary-background: transparent;
708
765
  --salt-palette-neutral-tertiary-background-disabled: transparent;
709
- --salt-palette-neutral-tertiary-background-readonly: transparent;
710
766
  --salt-palette-neutral-tertiary-border: transparent;
711
767
  --salt-palette-neutral-tertiary-border-disabled: transparent;
712
768
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
@@ -730,6 +786,7 @@
730
786
  --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
731
787
  --salt-palette-measured-border: var(--salt-color-gray-90);
732
788
  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
789
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
733
790
  }
734
791
  .salt-theme[data-mode=dark] {
735
792
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
@@ -744,6 +801,7 @@
744
801
  --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
745
802
  --salt-palette-measured-border: var(--salt-color-gray-90);
746
803
  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
804
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
747
805
  }
748
806
 
749
807
  /* css/characteristics/accent.css */
@@ -880,12 +938,12 @@
880
938
  --salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
881
939
  --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
882
940
  --salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);
941
+ --salt-editable-help-fontStyle: italic;
883
942
  --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
884
943
  --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
885
944
  --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
886
945
  --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
887
946
  --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
888
- --salt-editable-help-fontStyle: italic;
889
947
  }
890
948
 
891
949
  /* css/characteristics/focused.css */
@@ -1063,13 +1121,17 @@
1063
1121
  --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1064
1122
  --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1065
1123
  --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1066
- --salt-status-info-background-emphasize: var(--salt-palette-info-background-emphasize);
1067
- --salt-status-success-background-emphasize: var(--salt-palette-success-background-emphasize);
1068
- --salt-status-warning-background-emphasize: var(--salt-palette-warning-background-emphasize);
1069
- --salt-status-error-background-emphasize: var(--salt-palette-error-background-emphasize);
1124
+ --salt-status-info-background: var(--salt-palette-info-background);
1125
+ --salt-status-success-background: var(--salt-palette-success-background);
1126
+ --salt-status-warning-background: var(--salt-palette-warning-background);
1127
+ --salt-status-error-background: var(--salt-palette-error-background);
1070
1128
  --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1071
1129
  --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1072
1130
  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
1131
+ --salt-status-info-background-emphasize: var(--salt-status-info-background);
1132
+ --salt-status-success-background-emphasize: var(--salt-status-success-background);
1133
+ --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1134
+ --salt-status-error-background-emphasize: var(--salt-status-error-background);
1073
1135
  }
1074
1136
 
1075
1137
  /* css/characteristics/taggable.css */
package/index.css CHANGED
@@ -20,6 +20,17 @@
20
20
  *::after {
21
21
  box-sizing: border-box;
22
22
  }
23
+ .salt-visuallyHidden {
24
+ position: absolute;
25
+ height: 1px;
26
+ width: 1px;
27
+ padding: 0;
28
+ margin: -1px;
29
+ overflow: hidden;
30
+ clip: rect(0, 0, 0, 0);
31
+ white-space: nowrap;
32
+ border-width: 0;
33
+ }
23
34
 
24
35
  /* css/foundations/animation.css */
25
36
  .salt-density-touch,
@@ -355,16 +366,23 @@
355
366
 
356
367
  /* css/foundations/icon.css */
357
368
  .salt-density-touch {
358
- --salt-size-icon-base: 16px;
369
+ --salt-icon-size-base: 16px;
370
+ --salt-icon-size-status-adornment: 12px;
359
371
  }
360
372
  .salt-density-low {
361
- --salt-size-icon-base: 14px;
373
+ --salt-icon-size-base: 14px;
374
+ --salt-icon-size-status-adornment: 10px;
362
375
  }
363
376
  .salt-density-medium {
364
- --salt-size-icon-base: 12px;
377
+ --salt-icon-size-base: 12px;
378
+ --salt-icon-size-status-adornment: 8px;
365
379
  }
366
380
  .salt-density-high {
367
- --salt-size-icon-base: 10px;
381
+ --salt-icon-size-base: 10px;
382
+ --salt-icon-size-status-adornment: 6px;
383
+ }
384
+ .salt-theme {
385
+ --salt-size-icon-base: var(--salt-icon-size-base);
368
386
  }
369
387
 
370
388
  /* css/foundations/opacity.css */
@@ -406,7 +424,6 @@
406
424
  .salt-density-high {
407
425
  --salt-size-basis-unit: 4px;
408
426
  --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
409
- --salt-size-border: 1px;
410
427
  --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
411
428
  --salt-size-separator-strokeWidth: 1px;
412
429
  --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
@@ -425,32 +442,80 @@
425
442
  .salt-density-high {
426
443
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
427
444
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
428
- --salt-size-base: calc(var(--salt-size-basis-unit) * 5);
429
445
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
446
+ --salt-size-adornment: 6px;
447
+ --salt-size-bar: 2px;
448
+ --salt-size-base: 20px;
449
+ --salt-size-border: 1px;
450
+ --salt-size-selectable: 12px;
451
+ --salt-size-icon: 12px;
430
452
  --salt-size-detail: var(--salt-size-compact);
431
453
  }
432
454
  .salt-density-medium {
433
455
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
434
456
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
435
- --salt-size-base: calc(var(--salt-size-basis-unit) * 7);
436
457
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
458
+ --salt-size-adornment: 8px;
459
+ --salt-size-bar: 4px;
460
+ --salt-size-base: 28px;
461
+ --salt-size-border: 1px;
462
+ --salt-size-selectable: 14px;
463
+ --salt-size-icon: 12px;
437
464
  --salt-size-detail: var(--salt-size-compact);
438
465
  }
439
466
  .salt-density-low {
440
467
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
441
468
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
442
- --salt-size-base: calc(var(--salt-size-basis-unit) * 9);
443
469
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
470
+ --salt-size-adornment: 10px;
471
+ --salt-size-bar: 6px;
472
+ --salt-size-base: 36px;
473
+ --salt-size-border: 1px;
474
+ --salt-size-selectable: 16px;
475
+ --salt-size-icon: 14px;
444
476
  --salt-size-detail: var(--salt-size-compact);
445
477
  }
446
478
  .salt-density-touch {
447
479
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
448
480
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
449
- --salt-size-base: calc(var(--salt-size-basis-unit) * 11);
450
481
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
482
+ --salt-size-adornment: 12px;
483
+ --salt-size-bar: 8px;
484
+ --salt-size-base: 44px;
485
+ --salt-size-border: 1px;
486
+ --salt-size-selectable: 18px;
487
+ --salt-size-icon: 16px;
451
488
  --salt-size-detail: var(--salt-size-compact);
452
489
  }
453
490
 
491
+ /* css/foundations/spacing.css */
492
+ .salt-density-touch {
493
+ --salt-spacing-100: 16px;
494
+ }
495
+ .salt-density-low {
496
+ --salt-spacing-100: 12px;
497
+ }
498
+ .salt-density-medium {
499
+ --salt-spacing-100: 8px;
500
+ }
501
+ .salt-density-high {
502
+ --salt-spacing-100: 4px;
503
+ }
504
+ .salt-density-touch,
505
+ .salt-density-low,
506
+ .salt-density-medium,
507
+ .salt-density-high {
508
+ --salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
509
+ --salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
510
+ --salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
511
+ --salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
512
+ --salt-spacing-200: calc(2 * var(--salt-spacing-100));
513
+ --salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
514
+ --salt-spacing-300: calc(3 * var(--salt-spacing-100));
515
+ --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
516
+ --salt-spacing-400: calc(4 * var(--salt-spacing-100));
517
+ }
518
+
454
519
  /* css/foundations/typography.css */
455
520
  .salt-theme {
456
521
  --salt-typography-fontFamily: "Open Sans";
@@ -493,6 +558,10 @@
493
558
  --salt-palette-opacity-primary-border: var(--salt-opacity-3);
494
559
  --salt-palette-opacity-secondary-border: var(--salt-opacity-2);
495
560
  --salt-palette-opacity-tertiary-border: var(--salt-opacity-1);
561
+ --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
562
+ --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
563
+ --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
564
+ --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
496
565
  }
497
566
  .salt-theme[data-mode=light] {
498
567
  --salt-palette-accent-background: var(--salt-color-blue-500);
@@ -548,24 +617,24 @@
548
617
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
549
618
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
550
619
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
551
- --salt-palette-error-background-emphasize: var(--salt-color-red-10);
620
+ --salt-palette-error-background: var(--salt-color-red-10);
552
621
  --salt-palette-error-background-selected: var(--salt-color-red-20);
553
622
  --salt-palette-error-border: var(--salt-color-red-500);
554
623
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
555
624
  --salt-palette-error-foreground: var(--salt-color-red-500);
556
625
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
557
- --salt-palette-info-background-emphasize: var(--salt-color-blue-10);
626
+ --salt-palette-info-background: var(--salt-color-blue-10);
558
627
  --salt-palette-info-border: var(--salt-color-blue-500);
559
628
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
560
629
  --salt-palette-info-foreground: var(--salt-color-blue-500);
561
630
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
562
- --salt-palette-success-background-emphasize: var(--salt-color-green-10);
631
+ --salt-palette-success-background: var(--salt-color-green-10);
563
632
  --salt-palette-success-background-selected: var(--salt-color-green-20);
564
633
  --salt-palette-success-border: var(--salt-color-green-500);
565
634
  --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
566
635
  --salt-palette-success-foreground: var(--salt-color-green-500);
567
636
  --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
568
- --salt-palette-warning-background-emphasize: var(--salt-color-orange-10);
637
+ --salt-palette-warning-background: var(--salt-color-orange-10);
569
638
  --salt-palette-warning-background-selected: var(--salt-color-orange-20);
570
639
  --salt-palette-warning-border: var(--salt-color-orange-700);
571
640
  --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
@@ -606,7 +675,6 @@
606
675
  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
607
676
  --salt-palette-neutral-tertiary-background: transparent;
608
677
  --salt-palette-neutral-tertiary-background-disabled: transparent;
609
- --salt-palette-neutral-tertiary-background-readonly: transparent;
610
678
  --salt-palette-neutral-tertiary-border: transparent;
611
679
  --salt-palette-neutral-tertiary-border-disabled: transparent;
612
680
  --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
@@ -671,24 +739,24 @@
671
739
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
672
740
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
673
741
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
674
- --salt-palette-error-background-emphasize: var(--salt-color-red-900);
742
+ --salt-palette-error-background: var(--salt-color-red-900);
675
743
  --salt-palette-error-background-selected: var(--salt-color-red-900);
676
744
  --salt-palette-error-border: var(--salt-color-red-500);
677
745
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
678
746
  --salt-palette-error-foreground: var(--salt-color-red-500);
679
747
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
680
- --salt-palette-info-background-emphasize: var(--salt-color-blue-900);
748
+ --salt-palette-info-background: var(--salt-color-blue-900);
681
749
  --salt-palette-info-border: var(--salt-color-blue-500);
682
750
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
683
751
  --salt-palette-info-foreground: var(--salt-color-blue-500);
684
752
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
685
- --salt-palette-success-background-emphasize: var(--salt-color-green-900);
753
+ --salt-palette-success-background: var(--salt-color-green-900);
686
754
  --salt-palette-success-background-selected: var(--salt-color-green-900);
687
755
  --salt-palette-success-border: var(--salt-color-green-400);
688
756
  --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
689
757
  --salt-palette-success-foreground: var(--salt-color-green-400);
690
758
  --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
691
- --salt-palette-warning-background-emphasize: var(--salt-color-orange-900);
759
+ --salt-palette-warning-background: var(--salt-color-orange-900);
692
760
  --salt-palette-warning-background-selected: var(--salt-color-orange-900);
693
761
  --salt-palette-warning-border: var(--salt-color-orange-500);
694
762
  --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
@@ -729,7 +797,6 @@
729
797
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
730
798
  --salt-palette-neutral-tertiary-background: transparent;
731
799
  --salt-palette-neutral-tertiary-background-disabled: transparent;
732
- --salt-palette-neutral-tertiary-background-readonly: transparent;
733
800
  --salt-palette-neutral-tertiary-border: transparent;
734
801
  --salt-palette-neutral-tertiary-border-disabled: transparent;
735
802
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
@@ -753,6 +820,7 @@
753
820
  --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
754
821
  --salt-palette-measured-border: var(--salt-color-gray-90);
755
822
  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
823
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
756
824
  }
757
825
  .salt-theme[data-mode=dark] {
758
826
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
@@ -767,6 +835,7 @@
767
835
  --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
768
836
  --salt-palette-measured-border: var(--salt-color-gray-90);
769
837
  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
838
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
770
839
  }
771
840
 
772
841
  /* css/characteristics/accent.css */
@@ -903,12 +972,12 @@
903
972
  --salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
904
973
  --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
905
974
  --salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);
975
+ --salt-editable-help-fontStyle: italic;
906
976
  --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
907
977
  --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
908
978
  --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
909
979
  --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
910
980
  --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
911
- --salt-editable-help-fontStyle: italic;
912
981
  }
913
982
 
914
983
  /* css/characteristics/focused.css */
@@ -1086,13 +1155,17 @@
1086
1155
  --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1087
1156
  --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1088
1157
  --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1089
- --salt-status-info-background-emphasize: var(--salt-palette-info-background-emphasize);
1090
- --salt-status-success-background-emphasize: var(--salt-palette-success-background-emphasize);
1091
- --salt-status-warning-background-emphasize: var(--salt-palette-warning-background-emphasize);
1092
- --salt-status-error-background-emphasize: var(--salt-palette-error-background-emphasize);
1158
+ --salt-status-info-background: var(--salt-palette-info-background);
1159
+ --salt-status-success-background: var(--salt-palette-success-background);
1160
+ --salt-status-warning-background: var(--salt-palette-warning-background);
1161
+ --salt-status-error-background: var(--salt-palette-error-background);
1093
1162
  --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1094
1163
  --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1095
1164
  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
1165
+ --salt-status-info-background-emphasize: var(--salt-status-info-background);
1166
+ --salt-status-success-background-emphasize: var(--salt-status-success-background);
1167
+ --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1168
+ --salt-status-error-background-emphasize: var(--salt-status-error-background);
1096
1169
  }
1097
1170
 
1098
1171
  /* css/characteristics/taggable.css */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.3.0",
3
+ "version": "1.5.0",
4
4
  "license": "Apache-2.0",
5
5
  "style": "index.css",
6
6
  "files": [