@salt-ds/theme 1.18.0 → 1.20.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/theme-next.css +15 -0
  2. package/css/theme.css +18 -1
  3. package/index.css +18 -1
  4. package/package.json +1 -1
package/css/theme-next.css CHANGED
@@ -682,6 +682,14 @@
682
682
  --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
683
683
  --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
684
684
  }
685
+ .salt-theme-next.salt-theme[data-action-font="Open Sans"] {
686
+ --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
687
+ --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
688
+ }
689
+ .salt-theme-next.salt-theme[data-action-font=Amplitude] {
690
+ --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-amplitude);
691
+ --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-medium);
692
+ }
685
693
 
686
694
  /* css/palette/warning-next.css */
687
695
  .salt-theme.salt-theme-next[data-mode=light] {
@@ -786,6 +794,8 @@
786
794
  --salt-content-primary-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
787
795
  --salt-content-secondary-foreground: var(--salt-palette-foreground-secondary);
788
796
  --salt-content-secondary-foreground-disabled: var(--salt-palette-foreground-secondary-disabled);
797
+ --salt-content-bold-foreground: var(--salt-palette-foreground-primary-alt);
798
+ --salt-content-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
789
799
  --salt-content-foreground-hover: var(--salt-palette-foreground-hover);
790
800
  --salt-content-foreground-active: var(--salt-palette-foreground-active);
791
801
  --salt-content-foreground-visited: var(--salt-palette-foreground-visited);
@@ -825,6 +835,7 @@
825
835
  /* css/characteristics/overlayable-next.css */
826
836
  .salt-theme.salt-theme-next {
827
837
  --salt-overlayable-background: var(--salt-palette-alpha-backdrop);
838
+ --salt-overlayable-rangeSelection: var(--salt-palette-alpha-weak);
828
839
  }
829
840
 
830
841
  /* css/characteristics/selectable-next.css */
@@ -876,6 +887,10 @@
876
887
  --salt-status-success-background: var(--salt-palette-positive-weak);
877
888
  --salt-status-warning-background: var(--salt-palette-warning-weak);
878
889
  --salt-status-error-background: var(--salt-palette-negative-weak);
890
+ --salt-status-info-bold-background: var(--salt-palette-info);
891
+ --salt-status-error-bold-background: var(--salt-palette-negative);
892
+ --salt-status-warning-bold-background: var(--salt-palette-warning);
893
+ --salt-status-success-bold-background: var(--salt-palette-positive);
879
894
  --salt-status-success-background-selected: var(--salt-palette-positive-weak);
880
895
  --salt-status-warning-background-selected: var(--salt-palette-warning-weak);
881
896
  --salt-status-error-background-selected: var(--salt-palette-negative-weak);
package/css/theme.css CHANGED
@@ -660,6 +660,7 @@
660
660
  /* css/palette/error.css */
661
661
  .salt-theme[data-mode=light] {
662
662
  --salt-palette-error-background: var(--salt-color-red-10);
663
+ --salt-palette-error-bold-background: var(--salt-color-red-500);
663
664
  --salt-palette-error-background-selected: var(--salt-color-red-20);
664
665
  --salt-palette-error-border: var(--salt-color-red-500);
665
666
  --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
@@ -667,6 +668,7 @@
667
668
  }
668
669
  .salt-theme[data-mode=dark] {
669
670
  --salt-palette-error-background: var(--salt-color-red-900);
671
+ --salt-palette-error-bold-background: var(--salt-color-red-500);
670
672
  --salt-palette-error-background-selected: var(--salt-color-red-900);
671
673
  --salt-palette-error-border: var(--salt-color-red-400);
672
674
  --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
@@ -802,12 +804,14 @@
802
804
  /* css/palette/info.css */
803
805
  .salt-theme[data-mode=light] {
804
806
  --salt-palette-info-background: var(--salt-color-blue-10);
807
+ --salt-palette-info-bold-background: var(--salt-color-blue-500);
805
808
  --salt-palette-info-border: var(--salt-color-blue-500);
806
809
  --salt-palette-info-foreground-decorative: var(--salt-color-blue-500);
807
810
  --salt-palette-info-foreground-informative: var(--salt-color-blue-600);
808
811
  }
809
812
  .salt-theme[data-mode=dark] {
810
813
  --salt-palette-info-background: var(--salt-color-blue-900);
814
+ --salt-palette-info-bold-background: var(--salt-color-blue-500);
811
815
  --salt-palette-info-border: var(--salt-color-blue-400);
812
816
  --salt-palette-info-foreground-decorative: var(--salt-color-blue-400);
813
817
  --salt-palette-info-foreground-informative: var(--salt-color-blue-200);
@@ -995,6 +999,7 @@
995
999
  /* css/palette/success.css */
996
1000
  .salt-theme[data-mode=light] {
997
1001
  --salt-palette-success-background: var(--salt-color-green-10);
1002
+ --salt-palette-success-bold-background: var(--salt-color-green-500);
998
1003
  --salt-palette-success-background-selected: var(--salt-color-green-20);
999
1004
  --salt-palette-success-border: var(--salt-color-green-500);
1000
1005
  --salt-palette-success-foreground-decorative: var(--salt-color-green-500);
@@ -1002,6 +1007,7 @@
1002
1007
  }
1003
1008
  .salt-theme[data-mode=dark] {
1004
1009
  --salt-palette-success-background: var(--salt-color-green-900);
1010
+ --salt-palette-success-bold-background: var(--salt-color-green-500);
1005
1011
  --salt-palette-success-background-selected: var(--salt-color-green-900);
1006
1012
  --salt-palette-success-border: var(--salt-color-green-400);
1007
1013
  --salt-palette-success-foreground-decorative: var(--salt-color-green-400);
@@ -1013,6 +1019,8 @@
1013
1019
  --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
1014
1020
  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
1015
1021
  --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1022
+ --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
1023
+ --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
1016
1024
  --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
1017
1025
  --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
1018
1026
  --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
@@ -1030,6 +1038,7 @@
1030
1038
  /* css/palette/warning.css */
1031
1039
  .salt-theme[data-mode=light] {
1032
1040
  --salt-palette-warning-background: var(--salt-color-orange-10);
1041
+ --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1033
1042
  --salt-palette-warning-background-selected: var(--salt-color-orange-20);
1034
1043
  --salt-palette-warning-border: var(--salt-color-orange-700);
1035
1044
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
@@ -1037,6 +1046,7 @@
1037
1046
  }
1038
1047
  .salt-theme[data-mode=dark] {
1039
1048
  --salt-palette-warning-background: var(--salt-color-orange-900);
1049
+ --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1040
1050
  --salt-palette-warning-background-selected: var(--salt-color-orange-900);
1041
1051
  --salt-palette-warning-border: var(--salt-color-orange-500);
1042
1052
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
@@ -1371,6 +1381,10 @@
1371
1381
  --salt-status-error-background: var(--salt-palette-error-background);
1372
1382
  --salt-status-warning-background: var(--salt-palette-warning-background);
1373
1383
  --salt-status-success-background: var(--salt-palette-success-background);
1384
+ --salt-status-info-bold-background: var(--salt-palette-info-bold-background);
1385
+ --salt-status-error-bold-background: var(--salt-palette-error-bold-background);
1386
+ --salt-status-warning-bold-background: var(--salt-palette-warning-bold-background);
1387
+ --salt-status-success-bold-background: var(--salt-palette-success-bold-background);
1374
1388
  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
1375
1389
  --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1376
1390
  --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
@@ -1383,10 +1397,11 @@
1383
1397
  --salt-text-textAlign-embedded: center;
1384
1398
  --salt-text-textDecoration: none;
1385
1399
  --salt-text-textTransform: none;
1400
+ --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
1386
1401
  --salt-text-action-letterSpacing: 0.6px;
1387
1402
  --salt-text-action-textTransform: uppercase;
1388
1403
  --salt-text-action-textAlign: center;
1389
- --salt-text-action-fontWeight: var(--salt-palette-text-body-fontWeight-strong);
1404
+ --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
1390
1405
  --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
1391
1406
  --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
1392
1407
  --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
@@ -1540,6 +1555,8 @@
1540
1555
  --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1541
1556
  --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
1542
1557
  --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1558
+ --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
1559
+ --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1543
1560
  --salt-content-foreground-hover: var(--salt-palette-navigate-foreground-hover);
1544
1561
  --salt-content-foreground-active: var(--salt-palette-navigate-foreground-active);
1545
1562
  --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
package/index.css CHANGED
@@ -689,6 +689,7 @@
689
689
  /* css/palette/error.css */
690
690
  .salt-theme[data-mode=light] {
691
691
  --salt-palette-error-background: var(--salt-color-red-10);
692
+ --salt-palette-error-bold-background: var(--salt-color-red-500);
692
693
  --salt-palette-error-background-selected: var(--salt-color-red-20);
693
694
  --salt-palette-error-border: var(--salt-color-red-500);
694
695
  --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
@@ -696,6 +697,7 @@
696
697
  }
697
698
  .salt-theme[data-mode=dark] {
698
699
  --salt-palette-error-background: var(--salt-color-red-900);
700
+ --salt-palette-error-bold-background: var(--salt-color-red-500);
699
701
  --salt-palette-error-background-selected: var(--salt-color-red-900);
700
702
  --salt-palette-error-border: var(--salt-color-red-400);
701
703
  --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
@@ -831,12 +833,14 @@
831
833
  /* css/palette/info.css */
832
834
  .salt-theme[data-mode=light] {
833
835
  --salt-palette-info-background: var(--salt-color-blue-10);
836
+ --salt-palette-info-bold-background: var(--salt-color-blue-500);
834
837
  --salt-palette-info-border: var(--salt-color-blue-500);
835
838
  --salt-palette-info-foreground-decorative: var(--salt-color-blue-500);
836
839
  --salt-palette-info-foreground-informative: var(--salt-color-blue-600);
837
840
  }
838
841
  .salt-theme[data-mode=dark] {
839
842
  --salt-palette-info-background: var(--salt-color-blue-900);
843
+ --salt-palette-info-bold-background: var(--salt-color-blue-500);
840
844
  --salt-palette-info-border: var(--salt-color-blue-400);
841
845
  --salt-palette-info-foreground-decorative: var(--salt-color-blue-400);
842
846
  --salt-palette-info-foreground-informative: var(--salt-color-blue-200);
@@ -1024,6 +1028,7 @@
1024
1028
  /* css/palette/success.css */
1025
1029
  .salt-theme[data-mode=light] {
1026
1030
  --salt-palette-success-background: var(--salt-color-green-10);
1031
+ --salt-palette-success-bold-background: var(--salt-color-green-500);
1027
1032
  --salt-palette-success-background-selected: var(--salt-color-green-20);
1028
1033
  --salt-palette-success-border: var(--salt-color-green-500);
1029
1034
  --salt-palette-success-foreground-decorative: var(--salt-color-green-500);
@@ -1031,6 +1036,7 @@
1031
1036
  }
1032
1037
  .salt-theme[data-mode=dark] {
1033
1038
  --salt-palette-success-background: var(--salt-color-green-900);
1039
+ --salt-palette-success-bold-background: var(--salt-color-green-500);
1034
1040
  --salt-palette-success-background-selected: var(--salt-color-green-900);
1035
1041
  --salt-palette-success-border: var(--salt-color-green-400);
1036
1042
  --salt-palette-success-foreground-decorative: var(--salt-color-green-400);
@@ -1042,6 +1048,8 @@
1042
1048
  --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
1043
1049
  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
1044
1050
  --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1051
+ --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
1052
+ --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
1045
1053
  --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
1046
1054
  --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
1047
1055
  --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
@@ -1059,6 +1067,7 @@
1059
1067
  /* css/palette/warning.css */
1060
1068
  .salt-theme[data-mode=light] {
1061
1069
  --salt-palette-warning-background: var(--salt-color-orange-10);
1070
+ --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1062
1071
  --salt-palette-warning-background-selected: var(--salt-color-orange-20);
1063
1072
  --salt-palette-warning-border: var(--salt-color-orange-700);
1064
1073
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
@@ -1066,6 +1075,7 @@
1066
1075
  }
1067
1076
  .salt-theme[data-mode=dark] {
1068
1077
  --salt-palette-warning-background: var(--salt-color-orange-900);
1078
+ --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1069
1079
  --salt-palette-warning-background-selected: var(--salt-color-orange-900);
1070
1080
  --salt-palette-warning-border: var(--salt-color-orange-500);
1071
1081
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
@@ -1400,6 +1410,10 @@
1400
1410
  --salt-status-error-background: var(--salt-palette-error-background);
1401
1411
  --salt-status-warning-background: var(--salt-palette-warning-background);
1402
1412
  --salt-status-success-background: var(--salt-palette-success-background);
1413
+ --salt-status-info-bold-background: var(--salt-palette-info-bold-background);
1414
+ --salt-status-error-bold-background: var(--salt-palette-error-bold-background);
1415
+ --salt-status-warning-bold-background: var(--salt-palette-warning-bold-background);
1416
+ --salt-status-success-bold-background: var(--salt-palette-success-bold-background);
1403
1417
  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
1404
1418
  --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1405
1419
  --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
@@ -1412,10 +1426,11 @@
1412
1426
  --salt-text-textAlign-embedded: center;
1413
1427
  --salt-text-textDecoration: none;
1414
1428
  --salt-text-textTransform: none;
1429
+ --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
1415
1430
  --salt-text-action-letterSpacing: 0.6px;
1416
1431
  --salt-text-action-textTransform: uppercase;
1417
1432
  --salt-text-action-textAlign: center;
1418
- --salt-text-action-fontWeight: var(--salt-palette-text-body-fontWeight-strong);
1433
+ --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
1419
1434
  --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
1420
1435
  --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
1421
1436
  --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
@@ -1569,6 +1584,8 @@
1569
1584
  --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1570
1585
  --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
1571
1586
  --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1587
+ --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
1588
+ --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1572
1589
  --salt-content-foreground-hover: var(--salt-palette-navigate-foreground-hover);
1573
1590
  --salt-content-foreground-active: var(--salt-palette-navigate-foreground-active);
1574
1591
  --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.18.0",
3
+ "version": "1.20.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",