@salt-ds/theme 1.14.0 → 1.16.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.
package/css/theme.css CHANGED
@@ -174,6 +174,7 @@
174
174
  --salt-color-orange-600: rgb(224, 101, 25);
175
175
  --salt-color-orange-700: rgb(214, 85, 19);
176
176
  --salt-color-orange-800: rgb(204, 68, 13);
177
+ --salt-color-orange-850: rgb(194, 52, 7);
177
178
  --salt-color-orange-900: rgb(54, 44, 36);
178
179
  --salt-color-green-10: rgb(209, 244, 201);
179
180
  --salt-color-green-20: rgb(184, 232, 182);
@@ -318,7 +319,9 @@
318
319
  --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border));
319
320
  --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
320
321
  --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
322
+ --salt-color-black-fade-background-selection: rgba(0, 0, 0, var(--salt-opacity-15));
321
323
  --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
324
+ --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
322
325
  }
323
326
 
324
327
  /* css/foundations/opacity.css */
@@ -434,8 +437,9 @@
434
437
 
435
438
  /* css/foundations/typography.css */
436
439
  .salt-theme {
437
- --salt-typography-fontFamily: "Open Sans";
438
- --salt-typography-fontFamily-code: "PT Mono";
440
+ --salt-typography-fontFamily-openSans: "Open Sans";
441
+ --salt-typography-fontFamily-amplitude: "Amplitude";
442
+ --salt-typography-fontFamily-ptMono: "PT Mono";
439
443
  --salt-typography-fontWeight-light: 300;
440
444
  --salt-typography-fontWeight-regular: 400;
441
445
  --salt-typography-fontWeight-medium: 500;
@@ -477,25 +481,29 @@
477
481
  --salt-palette-error-background: var(--salt-color-red-10);
478
482
  --salt-palette-error-background-selected: var(--salt-color-red-20);
479
483
  --salt-palette-error-border: var(--salt-color-red-500);
480
- --salt-palette-error-foreground: var(--salt-color-red-500);
484
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
485
+ --salt-palette-error-foreground-informative: var(--salt-color-red-600);
481
486
  }
482
487
  .salt-theme[data-mode=dark] {
483
488
  --salt-palette-error-background: var(--salt-color-red-900);
484
489
  --salt-palette-error-background-selected: var(--salt-color-red-900);
485
- --salt-palette-error-border: var(--salt-color-red-500);
486
- --salt-palette-error-foreground: var(--salt-color-red-500);
490
+ --salt-palette-error-border: var(--salt-color-red-400);
491
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
492
+ --salt-palette-error-foreground-informative: var(--salt-color-red-200);
487
493
  }
488
494
 
489
495
  /* css/palette/info.css */
490
496
  .salt-theme[data-mode=light] {
491
497
  --salt-palette-info-background: var(--salt-color-blue-10);
492
498
  --salt-palette-info-border: var(--salt-color-blue-500);
493
- --salt-palette-info-foreground: var(--salt-color-blue-500);
499
+ --salt-palette-info-foreground-decorative: var(--salt-color-blue-500);
500
+ --salt-palette-info-foreground-informative: var(--salt-color-blue-600);
494
501
  }
495
502
  .salt-theme[data-mode=dark] {
496
503
  --salt-palette-info-background: var(--salt-color-blue-900);
497
- --salt-palette-info-border: var(--salt-color-blue-500);
498
- --salt-palette-info-foreground: var(--salt-color-blue-500);
504
+ --salt-palette-info-border: var(--salt-color-blue-400);
505
+ --salt-palette-info-foreground-decorative: var(--salt-color-blue-400);
506
+ --salt-palette-info-foreground-informative: var(--salt-color-blue-200);
499
507
  }
500
508
 
501
509
  /* css/palette/interact.css */
@@ -634,6 +642,7 @@
634
642
  --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
635
643
  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
636
644
  --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
645
+ --salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
637
646
  }
638
647
  .salt-theme[data-mode=dark] {
639
648
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
@@ -654,6 +663,7 @@
654
663
  --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
655
664
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
656
665
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
666
+ --salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
657
667
  }
658
668
 
659
669
  /* css/palette/opacity.css */
@@ -680,13 +690,22 @@
680
690
  --salt-palette-success-background: var(--salt-color-green-10);
681
691
  --salt-palette-success-background-selected: var(--salt-color-green-20);
682
692
  --salt-palette-success-border: var(--salt-color-green-500);
683
- --salt-palette-success-foreground: var(--salt-color-green-500);
693
+ --salt-palette-success-foreground-decorative: var(--salt-color-green-500);
694
+ --salt-palette-success-foreground-informative: var(--salt-color-green-600);
684
695
  }
685
696
  .salt-theme[data-mode=dark] {
686
697
  --salt-palette-success-background: var(--salt-color-green-900);
687
698
  --salt-palette-success-background-selected: var(--salt-color-green-900);
688
699
  --salt-palette-success-border: var(--salt-color-green-400);
689
- --salt-palette-success-foreground: var(--salt-color-green-400);
700
+ --salt-palette-success-foreground-decorative: var(--salt-color-green-400);
701
+ --salt-palette-success-foreground-informative: var(--salt-color-green-200);
702
+ }
703
+
704
+ /* css/palette/text.css */
705
+ .salt-theme {
706
+ --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
707
+ --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
708
+ --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
690
709
  }
691
710
 
692
711
  /* css/palette/warning.css */
@@ -694,13 +713,15 @@
694
713
  --salt-palette-warning-background: var(--salt-color-orange-10);
695
714
  --salt-palette-warning-background-selected: var(--salt-color-orange-20);
696
715
  --salt-palette-warning-border: var(--salt-color-orange-700);
697
- --salt-palette-warning-foreground: var(--salt-color-orange-700);
716
+ --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
717
+ --salt-palette-warning-foreground-informative: var(--salt-color-orange-850);
698
718
  }
699
719
  .salt-theme[data-mode=dark] {
700
720
  --salt-palette-warning-background: var(--salt-color-orange-900);
701
721
  --salt-palette-warning-background-selected: var(--salt-color-orange-900);
702
722
  --salt-palette-warning-border: var(--salt-color-orange-500);
703
- --salt-palette-warning-foreground: var(--salt-color-orange-500);
723
+ --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
724
+ --salt-palette-warning-foreground-informative: var(--salt-color-orange-400);
704
725
  }
705
726
 
706
727
  /* css/characteristics/accent.css */
@@ -723,6 +744,10 @@
723
744
  --salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
724
745
  --salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);
725
746
  --salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);
747
+ --salt-actionable-primary-borderColor: transparent;
748
+ --salt-actionable-primary-borderColor-hover: transparent;
749
+ --salt-actionable-primary-borderColor-active: transparent;
750
+ --salt-actionable-primary-borderColor-disabled: transparent;
726
751
  --salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);
727
752
  --salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
728
753
  --salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);
@@ -731,6 +756,10 @@
731
756
  --salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
732
757
  --salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);
733
758
  --salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);
759
+ --salt-actionable-cta-borderColor: transparent;
760
+ --salt-actionable-cta-borderColor-hover: transparent;
761
+ --salt-actionable-cta-borderColor-active: transparent;
762
+ --salt-actionable-cta-borderColor-disabled: transparent;
734
763
  --salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);
735
764
  --salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
736
765
  --salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);
@@ -739,6 +768,10 @@
739
768
  --salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
740
769
  --salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);
741
770
  --salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);
771
+ --salt-actionable-secondary-borderColor: transparent;
772
+ --salt-actionable-secondary-borderColor-hover: transparent;
773
+ --salt-actionable-secondary-borderColor-active: transparent;
774
+ --salt-actionable-secondary-borderColor-disabled: transparent;
742
775
  }
743
776
 
744
777
  /* css/characteristics/container.css */
@@ -853,6 +886,7 @@
853
886
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
854
887
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
855
888
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
889
+ --salt-overlayable-rangeSelection: var(--salt-palette-neutral-selection);
856
890
  }
857
891
 
858
892
  /* css/characteristics/selectable.css */
@@ -895,24 +929,28 @@
895
929
 
896
930
  /* css/characteristics/status.css */
897
931
  .salt-theme {
898
- --salt-status-info-foreground: var(--salt-palette-info-foreground);
899
- --salt-status-success-foreground: var(--salt-palette-success-foreground);
900
- --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
901
- --salt-status-error-foreground: var(--salt-palette-error-foreground);
902
932
  --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
903
933
  --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
904
934
  --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
935
+ --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
936
+ --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
937
+ --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
938
+ --salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative);
939
+ --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative);
940
+ --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative);
941
+ --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative);
942
+ --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative);
905
943
  --salt-status-info-borderColor: var(--salt-palette-info-border);
906
- --salt-status-success-borderColor: var(--salt-palette-success-border);
907
- --salt-status-warning-borderColor: var(--salt-palette-warning-border);
908
944
  --salt-status-error-borderColor: var(--salt-palette-error-border);
945
+ --salt-status-warning-borderColor: var(--salt-palette-warning-border);
946
+ --salt-status-success-borderColor: var(--salt-palette-success-border);
909
947
  --salt-status-info-background: var(--salt-palette-info-background);
910
- --salt-status-success-background: var(--salt-palette-success-background);
911
- --salt-status-warning-background: var(--salt-palette-warning-background);
912
948
  --salt-status-error-background: var(--salt-palette-error-background);
913
- --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
914
- --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
949
+ --salt-status-warning-background: var(--salt-palette-warning-background);
950
+ --salt-status-success-background: var(--salt-palette-success-background);
915
951
  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
952
+ --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
953
+ --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
916
954
  }
917
955
 
918
956
  /* css/characteristics/text.css */
@@ -926,47 +964,47 @@
926
964
  --salt-text-action-textTransform: uppercase;
927
965
  --salt-text-action-textAlign: center;
928
966
  --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
929
- --salt-text-fontFamily: var(--salt-typography-fontFamily);
967
+ --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
930
968
  --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
931
969
  --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
932
970
  --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
933
- --salt-text-notation-fontFamily: var(--salt-typography-fontFamily);
971
+ --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
934
972
  --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
935
973
  --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
936
974
  --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
937
- --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
975
+ --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
938
976
  --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
939
977
  --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
940
978
  --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
941
- --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
979
+ --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
942
980
  --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
943
981
  --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
944
982
  --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
945
- --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
983
+ --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
946
984
  --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
947
985
  --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
948
986
  --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
949
- --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
987
+ --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
950
988
  --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
951
989
  --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
952
990
  --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
953
- --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
991
+ --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
954
992
  --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
955
993
  --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
956
994
  --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
957
- --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
995
+ --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
958
996
  --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
959
997
  --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
960
998
  --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
961
- --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
999
+ --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
962
1000
  --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
963
1001
  --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
964
1002
  --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
965
- --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
1003
+ --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
966
1004
  --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
967
1005
  --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
968
1006
  --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
969
- --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
1007
+ --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
970
1008
  }
971
1009
  .salt-density-touch {
972
1010
  --salt-text-h1-fontSize: 42px;
@@ -1162,6 +1200,10 @@
1162
1200
  --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1163
1201
  --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1164
1202
  --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1203
+ --salt-status-info-foreground: var(--salt-palette-info-foreground);
1204
+ --salt-status-error-foreground: var(--salt-palette-error-foreground);
1205
+ --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
1206
+ --salt-status-success-foreground: var(--salt-palette-success-foreground);
1165
1207
  --salt-actionable-letterSpacing: 0.6px;
1166
1208
  --salt-actionable-textTransform: uppercase;
1167
1209
  --salt-actionable-textAlign: center;
@@ -1262,6 +1304,8 @@
1262
1304
  --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
1263
1305
  --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
1264
1306
  --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
1307
+ --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
1308
+ --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1265
1309
  }
1266
1310
  .salt-theme[data-mode=light] {
1267
1311
  --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
@@ -1367,14 +1411,18 @@
1367
1411
  --salt-palette-neutral-tertiary-border-disabled: transparent;
1368
1412
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1369
1413
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1414
+ --salt-palette-error-foreground: var(--salt-color-red-500);
1370
1415
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1371
1416
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1417
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
1372
1418
  --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
1373
1419
  --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
1374
1420
  --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
1375
1421
  --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
1422
+ --salt-palette-success-foreground: var(--salt-color-green-500);
1376
1423
  --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);
1377
1424
  --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
1425
+ --salt-palette-warning-foreground: var(--salt-color-orange-700);
1378
1426
  --salt-palette-navigate-primary-background: transparent;
1379
1427
  --salt-palette-navigate-primary-background-active: transparent;
1380
1428
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
@@ -1419,14 +1467,18 @@
1419
1467
  --salt-palette-neutral-tertiary-border-disabled: transparent;
1420
1468
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1421
1469
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1470
+ --salt-palette-error-foreground: var(--salt-color-red-500);
1422
1471
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1423
1472
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1473
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
1424
1474
  --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
1425
1475
  --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
1426
1476
  --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
1427
1477
  --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
1478
+ --salt-palette-success-foreground: var(--salt-color-green-400);
1428
1479
  --salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);
1429
1480
  --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
1481
+ --salt-palette-warning-foreground: var(--salt-color-orange-500);
1430
1482
  --salt-palette-navigate-primary-background: transparent;
1431
1483
  --salt-palette-navigate-primary-background-active: transparent;
1432
1484
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
package/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* css/global.css */
2
2
  .salt-theme {
3
3
  color: var(--salt-content-primary-foreground);
4
- font-family: var(--salt-typography-fontFamily);
4
+ font-family: var(--salt-text-fontFamily);
5
5
  font-size: var(--salt-text-fontSize);
6
6
  letter-spacing: var(--salt-text-letterSpacing);
7
7
  line-height: var(--salt-text-lineHeight);
@@ -203,6 +203,7 @@
203
203
  --salt-color-orange-600: rgb(224, 101, 25);
204
204
  --salt-color-orange-700: rgb(214, 85, 19);
205
205
  --salt-color-orange-800: rgb(204, 68, 13);
206
+ --salt-color-orange-850: rgb(194, 52, 7);
206
207
  --salt-color-orange-900: rgb(54, 44, 36);
207
208
  --salt-color-green-10: rgb(209, 244, 201);
208
209
  --salt-color-green-20: rgb(184, 232, 182);
@@ -347,7 +348,9 @@
347
348
  --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border));
348
349
  --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
349
350
  --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
351
+ --salt-color-black-fade-background-selection: rgba(0, 0, 0, var(--salt-opacity-15));
350
352
  --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
353
+ --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
351
354
  }
352
355
 
353
356
  /* css/foundations/opacity.css */
@@ -463,8 +466,9 @@
463
466
 
464
467
  /* css/foundations/typography.css */
465
468
  .salt-theme {
466
- --salt-typography-fontFamily: "Open Sans";
467
- --salt-typography-fontFamily-code: "PT Mono";
469
+ --salt-typography-fontFamily-openSans: "Open Sans";
470
+ --salt-typography-fontFamily-amplitude: "Amplitude";
471
+ --salt-typography-fontFamily-ptMono: "PT Mono";
468
472
  --salt-typography-fontWeight-light: 300;
469
473
  --salt-typography-fontWeight-regular: 400;
470
474
  --salt-typography-fontWeight-medium: 500;
@@ -506,25 +510,29 @@
506
510
  --salt-palette-error-background: var(--salt-color-red-10);
507
511
  --salt-palette-error-background-selected: var(--salt-color-red-20);
508
512
  --salt-palette-error-border: var(--salt-color-red-500);
509
- --salt-palette-error-foreground: var(--salt-color-red-500);
513
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
514
+ --salt-palette-error-foreground-informative: var(--salt-color-red-600);
510
515
  }
511
516
  .salt-theme[data-mode=dark] {
512
517
  --salt-palette-error-background: var(--salt-color-red-900);
513
518
  --salt-palette-error-background-selected: var(--salt-color-red-900);
514
- --salt-palette-error-border: var(--salt-color-red-500);
515
- --salt-palette-error-foreground: var(--salt-color-red-500);
519
+ --salt-palette-error-border: var(--salt-color-red-400);
520
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
521
+ --salt-palette-error-foreground-informative: var(--salt-color-red-200);
516
522
  }
517
523
 
518
524
  /* css/palette/info.css */
519
525
  .salt-theme[data-mode=light] {
520
526
  --salt-palette-info-background: var(--salt-color-blue-10);
521
527
  --salt-palette-info-border: var(--salt-color-blue-500);
522
- --salt-palette-info-foreground: var(--salt-color-blue-500);
528
+ --salt-palette-info-foreground-decorative: var(--salt-color-blue-500);
529
+ --salt-palette-info-foreground-informative: var(--salt-color-blue-600);
523
530
  }
524
531
  .salt-theme[data-mode=dark] {
525
532
  --salt-palette-info-background: var(--salt-color-blue-900);
526
- --salt-palette-info-border: var(--salt-color-blue-500);
527
- --salt-palette-info-foreground: var(--salt-color-blue-500);
533
+ --salt-palette-info-border: var(--salt-color-blue-400);
534
+ --salt-palette-info-foreground-decorative: var(--salt-color-blue-400);
535
+ --salt-palette-info-foreground-informative: var(--salt-color-blue-200);
528
536
  }
529
537
 
530
538
  /* css/palette/interact.css */
@@ -663,6 +671,7 @@
663
671
  --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
664
672
  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
665
673
  --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
674
+ --salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
666
675
  }
667
676
  .salt-theme[data-mode=dark] {
668
677
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
@@ -683,6 +692,7 @@
683
692
  --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
684
693
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
685
694
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
695
+ --salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
686
696
  }
687
697
 
688
698
  /* css/palette/opacity.css */
@@ -709,13 +719,22 @@
709
719
  --salt-palette-success-background: var(--salt-color-green-10);
710
720
  --salt-palette-success-background-selected: var(--salt-color-green-20);
711
721
  --salt-palette-success-border: var(--salt-color-green-500);
712
- --salt-palette-success-foreground: var(--salt-color-green-500);
722
+ --salt-palette-success-foreground-decorative: var(--salt-color-green-500);
723
+ --salt-palette-success-foreground-informative: var(--salt-color-green-600);
713
724
  }
714
725
  .salt-theme[data-mode=dark] {
715
726
  --salt-palette-success-background: var(--salt-color-green-900);
716
727
  --salt-palette-success-background-selected: var(--salt-color-green-900);
717
728
  --salt-palette-success-border: var(--salt-color-green-400);
718
- --salt-palette-success-foreground: var(--salt-color-green-400);
729
+ --salt-palette-success-foreground-decorative: var(--salt-color-green-400);
730
+ --salt-palette-success-foreground-informative: var(--salt-color-green-200);
731
+ }
732
+
733
+ /* css/palette/text.css */
734
+ .salt-theme {
735
+ --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
736
+ --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
737
+ --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
719
738
  }
720
739
 
721
740
  /* css/palette/warning.css */
@@ -723,13 +742,15 @@
723
742
  --salt-palette-warning-background: var(--salt-color-orange-10);
724
743
  --salt-palette-warning-background-selected: var(--salt-color-orange-20);
725
744
  --salt-palette-warning-border: var(--salt-color-orange-700);
726
- --salt-palette-warning-foreground: var(--salt-color-orange-700);
745
+ --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
746
+ --salt-palette-warning-foreground-informative: var(--salt-color-orange-850);
727
747
  }
728
748
  .salt-theme[data-mode=dark] {
729
749
  --salt-palette-warning-background: var(--salt-color-orange-900);
730
750
  --salt-palette-warning-background-selected: var(--salt-color-orange-900);
731
751
  --salt-palette-warning-border: var(--salt-color-orange-500);
732
- --salt-palette-warning-foreground: var(--salt-color-orange-500);
752
+ --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
753
+ --salt-palette-warning-foreground-informative: var(--salt-color-orange-400);
733
754
  }
734
755
 
735
756
  /* css/characteristics/accent.css */
@@ -752,6 +773,10 @@
752
773
  --salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
753
774
  --salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);
754
775
  --salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);
776
+ --salt-actionable-primary-borderColor: transparent;
777
+ --salt-actionable-primary-borderColor-hover: transparent;
778
+ --salt-actionable-primary-borderColor-active: transparent;
779
+ --salt-actionable-primary-borderColor-disabled: transparent;
755
780
  --salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);
756
781
  --salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
757
782
  --salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);
@@ -760,6 +785,10 @@
760
785
  --salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
761
786
  --salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);
762
787
  --salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);
788
+ --salt-actionable-cta-borderColor: transparent;
789
+ --salt-actionable-cta-borderColor-hover: transparent;
790
+ --salt-actionable-cta-borderColor-active: transparent;
791
+ --salt-actionable-cta-borderColor-disabled: transparent;
763
792
  --salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);
764
793
  --salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
765
794
  --salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);
@@ -768,6 +797,10 @@
768
797
  --salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
769
798
  --salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);
770
799
  --salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);
800
+ --salt-actionable-secondary-borderColor: transparent;
801
+ --salt-actionable-secondary-borderColor-hover: transparent;
802
+ --salt-actionable-secondary-borderColor-active: transparent;
803
+ --salt-actionable-secondary-borderColor-disabled: transparent;
771
804
  }
772
805
 
773
806
  /* css/characteristics/container.css */
@@ -882,6 +915,7 @@
882
915
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
883
916
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
884
917
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
918
+ --salt-overlayable-rangeSelection: var(--salt-palette-neutral-selection);
885
919
  }
886
920
 
887
921
  /* css/characteristics/selectable.css */
@@ -924,24 +958,28 @@
924
958
 
925
959
  /* css/characteristics/status.css */
926
960
  .salt-theme {
927
- --salt-status-info-foreground: var(--salt-palette-info-foreground);
928
- --salt-status-success-foreground: var(--salt-palette-success-foreground);
929
- --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
930
- --salt-status-error-foreground: var(--salt-palette-error-foreground);
931
961
  --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
932
962
  --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
933
963
  --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
964
+ --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
965
+ --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
966
+ --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
967
+ --salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative);
968
+ --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative);
969
+ --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative);
970
+ --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative);
971
+ --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative);
934
972
  --salt-status-info-borderColor: var(--salt-palette-info-border);
935
- --salt-status-success-borderColor: var(--salt-palette-success-border);
936
- --salt-status-warning-borderColor: var(--salt-palette-warning-border);
937
973
  --salt-status-error-borderColor: var(--salt-palette-error-border);
974
+ --salt-status-warning-borderColor: var(--salt-palette-warning-border);
975
+ --salt-status-success-borderColor: var(--salt-palette-success-border);
938
976
  --salt-status-info-background: var(--salt-palette-info-background);
939
- --salt-status-success-background: var(--salt-palette-success-background);
940
- --salt-status-warning-background: var(--salt-palette-warning-background);
941
977
  --salt-status-error-background: var(--salt-palette-error-background);
942
- --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
943
- --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
978
+ --salt-status-warning-background: var(--salt-palette-warning-background);
979
+ --salt-status-success-background: var(--salt-palette-success-background);
944
980
  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
981
+ --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
982
+ --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
945
983
  }
946
984
 
947
985
  /* css/characteristics/text.css */
@@ -955,47 +993,47 @@
955
993
  --salt-text-action-textTransform: uppercase;
956
994
  --salt-text-action-textAlign: center;
957
995
  --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
958
- --salt-text-fontFamily: var(--salt-typography-fontFamily);
996
+ --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
959
997
  --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
960
998
  --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
961
999
  --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
962
- --salt-text-notation-fontFamily: var(--salt-typography-fontFamily);
1000
+ --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
963
1001
  --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
964
1002
  --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
965
1003
  --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
966
- --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
1004
+ --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
967
1005
  --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
968
1006
  --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
969
1007
  --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
970
- --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
1008
+ --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
971
1009
  --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
972
1010
  --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
973
1011
  --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
974
- --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
1012
+ --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
975
1013
  --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
976
1014
  --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
977
1015
  --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
978
- --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
1016
+ --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
979
1017
  --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
980
1018
  --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
981
1019
  --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
982
- --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
1020
+ --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
983
1021
  --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
984
1022
  --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
985
1023
  --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
986
- --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
1024
+ --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
987
1025
  --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
988
1026
  --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
989
1027
  --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
990
- --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
1028
+ --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
991
1029
  --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
992
1030
  --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
993
1031
  --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
994
- --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
1032
+ --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
995
1033
  --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
996
1034
  --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
997
1035
  --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
998
- --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
1036
+ --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
999
1037
  }
1000
1038
  .salt-density-touch {
1001
1039
  --salt-text-h1-fontSize: 42px;
@@ -1191,6 +1229,10 @@
1191
1229
  --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1192
1230
  --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1193
1231
  --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1232
+ --salt-status-info-foreground: var(--salt-palette-info-foreground);
1233
+ --salt-status-error-foreground: var(--salt-palette-error-foreground);
1234
+ --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
1235
+ --salt-status-success-foreground: var(--salt-palette-success-foreground);
1194
1236
  --salt-actionable-letterSpacing: 0.6px;
1195
1237
  --salt-actionable-textTransform: uppercase;
1196
1238
  --salt-actionable-textAlign: center;
@@ -1291,6 +1333,8 @@
1291
1333
  --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
1292
1334
  --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
1293
1335
  --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
1336
+ --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
1337
+ --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1294
1338
  }
1295
1339
  .salt-theme[data-mode=light] {
1296
1340
  --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
@@ -1396,14 +1440,18 @@
1396
1440
  --salt-palette-neutral-tertiary-border-disabled: transparent;
1397
1441
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1398
1442
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1443
+ --salt-palette-error-foreground: var(--salt-color-red-500);
1399
1444
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1400
1445
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1446
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
1401
1447
  --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
1402
1448
  --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
1403
1449
  --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
1404
1450
  --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
1451
+ --salt-palette-success-foreground: var(--salt-color-green-500);
1405
1452
  --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);
1406
1453
  --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
1454
+ --salt-palette-warning-foreground: var(--salt-color-orange-700);
1407
1455
  --salt-palette-navigate-primary-background: transparent;
1408
1456
  --salt-palette-navigate-primary-background-active: transparent;
1409
1457
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
@@ -1448,14 +1496,18 @@
1448
1496
  --salt-palette-neutral-tertiary-border-disabled: transparent;
1449
1497
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1450
1498
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1499
+ --salt-palette-error-foreground: var(--salt-color-red-500);
1451
1500
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1452
1501
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1502
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
1453
1503
  --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
1454
1504
  --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
1455
1505
  --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
1456
1506
  --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
1507
+ --salt-palette-success-foreground: var(--salt-color-green-400);
1457
1508
  --salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);
1458
1509
  --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
1510
+ --salt-palette-warning-foreground: var(--salt-color-orange-500);
1459
1511
  --salt-palette-navigate-primary-background: transparent;
1460
1512
  --salt-palette-navigate-primary-background-active: transparent;
1461
1513
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.14.0",
3
+ "version": "1.16.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",