@salt-ds/theme 1.17.0 → 1.18.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
@@ -511,6 +511,7 @@
511
511
  --salt-opacity-15: 0.15;
512
512
  --salt-opacity-25: 0.25;
513
513
  --salt-opacity-40: 0.4;
514
+ --salt-opacity-45: 0.45;
514
515
  --salt-opacity-70: 0.7;
515
516
  }
516
517
 
@@ -672,6 +673,132 @@
672
673
  --salt-palette-error-foreground-informative: var(--salt-color-red-200);
673
674
  }
674
675
 
676
+ /* css/palette/categorical.css */
677
+ .salt-theme[data-mode=light] {
678
+ --salt-palette-categorical-1: var(--salt-color-cobalt-500);
679
+ --salt-palette-categorical-1-strong: var(--salt-color-cobalt-600);
680
+ --salt-palette-categorical-1-weakest: var(--salt-color-cobalt-100);
681
+ --salt-palette-categorical-2: var(--salt-color-cider-500);
682
+ --salt-palette-categorical-2-strong: var(--salt-color-cider-600);
683
+ --salt-palette-categorical-2-weakest: var(--salt-color-cider-100);
684
+ --salt-palette-categorical-3: var(--salt-color-plum-500);
685
+ --salt-palette-categorical-3-strong: var(--salt-color-plum-600);
686
+ --salt-palette-categorical-3-weakest: var(--salt-color-plum-100);
687
+ --salt-palette-categorical-4: var(--salt-color-aqua-500);
688
+ --salt-palette-categorical-4-strong: var(--salt-color-aqua-600);
689
+ --salt-palette-categorical-4-weakest: var(--salt-color-aqua-100);
690
+ --salt-palette-categorical-5: var(--salt-color-slate-500);
691
+ --salt-palette-categorical-5-strong: var(--salt-color-slate-600);
692
+ --salt-palette-categorical-5-weakest: var(--salt-color-slate-100);
693
+ --salt-palette-categorical-6: var(--salt-color-rose-500);
694
+ --salt-palette-categorical-6-strong: var(--salt-color-rose-600);
695
+ --salt-palette-categorical-6-weakest: var(--salt-color-rose-100);
696
+ --salt-palette-categorical-7: var(--salt-color-olive-500);
697
+ --salt-palette-categorical-7-strong: var(--salt-color-olive-600);
698
+ --salt-palette-categorical-7-weakest: var(--salt-color-olive-100);
699
+ --salt-palette-categorical-8: var(--salt-color-salmon-500);
700
+ --salt-palette-categorical-8-strong: var(--salt-color-salmon-600);
701
+ --salt-palette-categorical-8-weakest: var(--salt-color-salmon-100);
702
+ --salt-palette-categorical-9: var(--salt-color-indigo-500);
703
+ --salt-palette-categorical-9-strong: var(--salt-color-indigo-600);
704
+ --salt-palette-categorical-9-weakest: var(--salt-color-indigo-100);
705
+ --salt-palette-categorical-10: var(--salt-color-jade-500);
706
+ --salt-palette-categorical-10-strong: var(--salt-color-jade-600);
707
+ --salt-palette-categorical-10-weakest: var(--salt-color-jade-100);
708
+ --salt-palette-categorical-11: var(--salt-color-citrine-500);
709
+ --salt-palette-categorical-11-strong: var(--salt-color-citrine-600);
710
+ --salt-palette-categorical-11-weakest: var(--salt-color-citrine-100);
711
+ --salt-palette-categorical-12: var(--salt-color-autumn-500);
712
+ --salt-palette-categorical-12-strong: var(--salt-color-autumn-600);
713
+ --salt-palette-categorical-12-weakest: var(--salt-color-autumn-100);
714
+ --salt-palette-categorical-13: var(--salt-color-lavender-500);
715
+ --salt-palette-categorical-13-strong: var(--salt-color-lavender-600);
716
+ --salt-palette-categorical-13-weakest: var(--salt-color-lavender-100);
717
+ --salt-palette-categorical-14: var(--salt-color-ocean-500);
718
+ --salt-palette-categorical-14-strong: var(--salt-color-ocean-600);
719
+ --salt-palette-categorical-14-weakest: var(--salt-color-ocean-100);
720
+ --salt-palette-categorical-15: var(--salt-color-smoke-500);
721
+ --salt-palette-categorical-15-strong: var(--salt-color-smoke-600);
722
+ --salt-palette-categorical-15-weakest: var(--salt-color-smoke-100);
723
+ --salt-palette-categorical-16: var(--salt-color-fuchsia-500);
724
+ --salt-palette-categorical-16-strong: var(--salt-color-fuchsia-600);
725
+ --salt-palette-categorical-16-weakest: var(--salt-color-fuchsia-100);
726
+ --salt-palette-categorical-17: var(--salt-color-lime-500);
727
+ --salt-palette-categorical-17-strong: var(--salt-color-lime-600);
728
+ --salt-palette-categorical-17-weakest: var(--salt-color-lime-100);
729
+ --salt-palette-categorical-18: var(--salt-color-fur-500);
730
+ --salt-palette-categorical-18-strong: var(--salt-color-fur-600);
731
+ --salt-palette-categorical-18-weakest: var(--salt-color-fur-100);
732
+ --salt-palette-categorical-19: var(--salt-color-violet-500);
733
+ --salt-palette-categorical-19-strong: var(--salt-color-violet-600);
734
+ --salt-palette-categorical-19-weakest: var(--salt-color-violet-100);
735
+ --salt-palette-categorical-20: var(--salt-color-forest-500);
736
+ --salt-palette-categorical-20-strong: var(--salt-color-forest-600);
737
+ --salt-palette-categorical-20-weakest: var(--salt-color-forest-100);
738
+ }
739
+ .salt-theme[data-mode=dark] {
740
+ --salt-palette-categorical-1: var(--salt-color-cobalt-500);
741
+ --salt-palette-categorical-1-strong: var(--salt-color-cobalt-400);
742
+ --salt-palette-categorical-1-weakest: var(--salt-color-cobalt-900);
743
+ --salt-palette-categorical-2: var(--salt-color-cider-500);
744
+ --salt-palette-categorical-2-strong: var(--salt-color-cider-400);
745
+ --salt-palette-categorical-2-weakest: var(--salt-color-cider-900);
746
+ --salt-palette-categorical-3: var(--salt-color-plum-500);
747
+ --salt-palette-categorical-3-strong: var(--salt-color-plum-400);
748
+ --salt-palette-categorical-3-weakest: var(--salt-color-plum-900);
749
+ --salt-palette-categorical-4: var(--salt-color-aqua-500);
750
+ --salt-palette-categorical-4-strong: var(--salt-color-aqua-400);
751
+ --salt-palette-categorical-4-weakest: var(--salt-color-aqua-900);
752
+ --salt-palette-categorical-5: var(--salt-color-slate-500);
753
+ --salt-palette-categorical-5-strong: var(--salt-color-slate-400);
754
+ --salt-palette-categorical-5-weakest: var(--salt-color-slate-900);
755
+ --salt-palette-categorical-6: var(--salt-color-rose-500);
756
+ --salt-palette-categorical-6-strong: var(--salt-color-rose-400);
757
+ --salt-palette-categorical-6-weakest: var(--salt-color-rose-900);
758
+ --salt-palette-categorical-7: var(--salt-color-olive-500);
759
+ --salt-palette-categorical-7-strong: var(--salt-color-olive-400);
760
+ --salt-palette-categorical-7-weakest: var(--salt-color-olive-900);
761
+ --salt-palette-categorical-8: var(--salt-color-salmon-500);
762
+ --salt-palette-categorical-8-strong: var(--salt-color-salmon-400);
763
+ --salt-palette-categorical-8-weakest: var(--salt-color-salmon-900);
764
+ --salt-palette-categorical-9: var(--salt-color-indigo-500);
765
+ --salt-palette-categorical-9-strong: var(--salt-color-indigo-400);
766
+ --salt-palette-categorical-9-weakest: var(--salt-color-indigo-900);
767
+ --salt-palette-categorical-10: var(--salt-color-jade-500);
768
+ --salt-palette-categorical-10-strong: var(--salt-color-jade-400);
769
+ --salt-palette-categorical-10-weakest: var(--salt-color-jade-900);
770
+ --salt-palette-categorical-11: var(--salt-color-citrine-500);
771
+ --salt-palette-categorical-11-strong: var(--salt-color-citrine-400);
772
+ --salt-palette-categorical-11-weakest: var(--salt-color-citrine-900);
773
+ --salt-palette-categorical-12: var(--salt-color-autumn-500);
774
+ --salt-palette-categorical-12-strong: var(--salt-color-autumn-400);
775
+ --salt-palette-categorical-12-weakest: var(--salt-color-autumn-900);
776
+ --salt-palette-categorical-13: var(--salt-color-lavender-500);
777
+ --salt-palette-categorical-13-strong: var(--salt-color-lavender-400);
778
+ --salt-palette-categorical-13-weakest: var(--salt-color-lavender-900);
779
+ --salt-palette-categorical-14: var(--salt-color-ocean-500);
780
+ --salt-palette-categorical-14-strong: var(--salt-color-ocean-400);
781
+ --salt-palette-categorical-14-weakest: var(--salt-color-ocean-900);
782
+ --salt-palette-categorical-15: var(--salt-color-smoke-500);
783
+ --salt-palette-categorical-15-strong: var(--salt-color-smoke-400);
784
+ --salt-palette-categorical-15-weakest: var(--salt-color-smoke-900);
785
+ --salt-palette-categorical-16: var(--salt-color-fuchsia-500);
786
+ --salt-palette-categorical-16-strong: var(--salt-color-fuchsia-400);
787
+ --salt-palette-categorical-16-weakest: var(--salt-color-fuchsia-900);
788
+ --salt-palette-categorical-17: var(--salt-color-lime-500);
789
+ --salt-palette-categorical-17-strong: var(--salt-color-lime-400);
790
+ --salt-palette-categorical-17-weakest: var(--salt-color-lime-900);
791
+ --salt-palette-categorical-18: var(--salt-color-fur-500);
792
+ --salt-palette-categorical-18-strong: var(--salt-color-fur-400);
793
+ --salt-palette-categorical-18-weakest: var(--salt-color-fur-900);
794
+ --salt-palette-categorical-19: var(--salt-color-violet-500);
795
+ --salt-palette-categorical-19-strong: var(--salt-color-violet-400);
796
+ --salt-palette-categorical-19-weakest: var(--salt-color-violet-900);
797
+ --salt-palette-categorical-20: var(--salt-color-forest-500);
798
+ --salt-palette-categorical-20-strong: var(--salt-color-forest-400);
799
+ --salt-palette-categorical-20-weakest: var(--salt-color-forest-900);
800
+ }
801
+
675
802
  /* css/palette/info.css */
676
803
  .salt-theme[data-mode=light] {
677
804
  --salt-palette-info-background: var(--salt-color-blue-10);
@@ -852,7 +979,7 @@
852
979
  --salt-palette-opacity-disabled: var(--salt-opacity-40);
853
980
  --salt-palette-opacity-background-readonly: var(--salt-opacity-0);
854
981
  --salt-palette-opacity-border-readonly: var(--salt-opacity-15);
855
- --salt-palette-opacity-primary-border: var(--salt-opacity-40);
982
+ --salt-palette-opacity-primary-border: var(--salt-opacity-45);
856
983
  --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
857
984
  --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
858
985
  }
@@ -886,6 +1013,18 @@
886
1013
  --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
887
1014
  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
888
1015
  --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1016
+ --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
1017
+ --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
1018
+ --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1019
+ --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
1020
+ --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
1021
+ --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1022
+ --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
1023
+ --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
1024
+ --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1025
+ --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
1026
+ --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
1027
+ --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
889
1028
  }
890
1029
 
891
1030
  /* css/palette/warning.css */
@@ -954,6 +1093,110 @@
954
1093
  --salt-actionable-secondary-borderColor-disabled: transparent;
955
1094
  }
956
1095
 
1096
+ /* css/characteristics/category.css */
1097
+ .salt-theme {
1098
+ --salt-category-1-subtle-foreground: var(--salt-palette-categorical-1-strong);
1099
+ --salt-category-1-subtle-background: var(--salt-palette-categorical-1-weakest);
1100
+ --salt-category-1-subtle-borderColor: var(--salt-palette-categorical-1);
1101
+ --salt-category-1-bold-foreground: var(--salt-palette-accent-foreground);
1102
+ --salt-category-1-bold-background: var(--salt-palette-categorical-1);
1103
+ --salt-category-2-subtle-foreground: var(--salt-palette-categorical-2-strong);
1104
+ --salt-category-2-subtle-background: var(--salt-palette-categorical-2-weakest);
1105
+ --salt-category-2-subtle-borderColor: var(--salt-palette-categorical-2);
1106
+ --salt-category-2-bold-foreground: var(--salt-palette-accent-foreground);
1107
+ --salt-category-2-bold-background: var(--salt-palette-categorical-2);
1108
+ --salt-category-3-subtle-foreground: var(--salt-palette-categorical-3-strong);
1109
+ --salt-category-3-subtle-background: var(--salt-palette-categorical-3-weakest);
1110
+ --salt-category-3-subtle-borderColor: var(--salt-palette-categorical-3);
1111
+ --salt-category-3-bold-foreground: var(--salt-palette-accent-foreground);
1112
+ --salt-category-3-bold-background: var(--salt-palette-categorical-3);
1113
+ --salt-category-4-subtle-foreground: var(--salt-palette-categorical-4-strong);
1114
+ --salt-category-4-subtle-background: var(--salt-palette-categorical-4-weakest);
1115
+ --salt-category-4-subtle-borderColor: var(--salt-palette-categorical-4);
1116
+ --salt-category-4-bold-foreground: var(--salt-palette-accent-foreground);
1117
+ --salt-category-4-bold-background: var(--salt-palette-categorical-4);
1118
+ --salt-category-5-subtle-foreground: var(--salt-palette-categorical-5-strong);
1119
+ --salt-category-5-subtle-background: var(--salt-palette-categorical-5-weakest);
1120
+ --salt-category-5-subtle-borderColor: var(--salt-palette-categorical-5);
1121
+ --salt-category-5-bold-foreground: var(--salt-palette-accent-foreground);
1122
+ --salt-category-5-bold-background: var(--salt-palette-categorical-5);
1123
+ --salt-category-6-subtle-foreground: var(--salt-palette-categorical-6-strong);
1124
+ --salt-category-6-subtle-background: var(--salt-palette-categorical-6-weakest);
1125
+ --salt-category-6-subtle-borderColor: var(--salt-palette-categorical-6);
1126
+ --salt-category-6-bold-foreground: var(--salt-palette-accent-foreground);
1127
+ --salt-category-6-bold-background: var(--salt-palette-categorical-6);
1128
+ --salt-category-7-subtle-foreground: var(--salt-palette-categorical-7-strong);
1129
+ --salt-category-7-subtle-background: var(--salt-palette-categorical-7-weakest);
1130
+ --salt-category-7-subtle-borderColor: var(--salt-palette-categorical-7);
1131
+ --salt-category-7-bold-foreground: var(--salt-palette-accent-foreground);
1132
+ --salt-category-7-bold-background: var(--salt-palette-categorical-7);
1133
+ --salt-category-8-subtle-foreground: var(--salt-palette-categorical-8-strong);
1134
+ --salt-category-8-subtle-background: var(--salt-palette-categorical-8-weakest);
1135
+ --salt-category-8-subtle-borderColor: var(--salt-palette-categorical-8);
1136
+ --salt-category-8-bold-foreground: var(--salt-palette-accent-foreground);
1137
+ --salt-category-8-bold-background: var(--salt-palette-categorical-8);
1138
+ --salt-category-9-subtle-foreground: var(--salt-palette-categorical-9-strong);
1139
+ --salt-category-9-subtle-background: var(--salt-palette-categorical-9-weakest);
1140
+ --salt-category-9-subtle-borderColor: var(--salt-palette-categorical-9);
1141
+ --salt-category-9-bold-foreground: var(--salt-palette-accent-foreground);
1142
+ --salt-category-9-bold-background: var(--salt-palette-categorical-9);
1143
+ --salt-category-10-subtle-foreground: var(--salt-palette-categorical-10-strong);
1144
+ --salt-category-10-subtle-background: var(--salt-palette-categorical-10-weakest);
1145
+ --salt-category-10-subtle-borderColor: var(--salt-palette-categorical-10);
1146
+ --salt-category-10-bold-foreground: var(--salt-palette-accent-foreground);
1147
+ --salt-category-10-bold-background: var(--salt-palette-categorical-10);
1148
+ --salt-category-11-subtle-foreground: var(--salt-palette-categorical-11-strong);
1149
+ --salt-category-11-subtle-background: var(--salt-palette-categorical-11-weakest);
1150
+ --salt-category-11-subtle-borderColor: var(--salt-palette-categorical-11);
1151
+ --salt-category-11-bold-foreground: var(--salt-palette-accent-foreground);
1152
+ --salt-category-11-bold-background: var(--salt-palette-categorical-11);
1153
+ --salt-category-12-subtle-foreground: var(--salt-palette-categorical-12-strong);
1154
+ --salt-category-12-subtle-background: var(--salt-palette-categorical-12-weakest);
1155
+ --salt-category-12-subtle-borderColor: var(--salt-palette-categorical-12);
1156
+ --salt-category-12-bold-foreground: var(--salt-palette-accent-foreground);
1157
+ --salt-category-12-bold-background: var(--salt-palette-categorical-12);
1158
+ --salt-category-13-subtle-foreground: var(--salt-palette-categorical-13-strong);
1159
+ --salt-category-13-subtle-background: var(--salt-palette-categorical-13-weakest);
1160
+ --salt-category-13-subtle-borderColor: var(--salt-palette-categorical-13);
1161
+ --salt-category-13-bold-foreground: var(--salt-palette-accent-foreground);
1162
+ --salt-category-13-bold-background: var(--salt-palette-categorical-13);
1163
+ --salt-category-14-subtle-foreground: var(--salt-palette-categorical-14-strong);
1164
+ --salt-category-14-subtle-background: var(--salt-palette-categorical-14-weakest);
1165
+ --salt-category-14-subtle-borderColor: var(--salt-palette-categorical-14);
1166
+ --salt-category-14-bold-foreground: var(--salt-palette-accent-foreground);
1167
+ --salt-category-14-bold-background: var(--salt-palette-categorical-14);
1168
+ --salt-category-15-subtle-foreground: var(--salt-palette-categorical-15-strong);
1169
+ --salt-category-15-subtle-background: var(--salt-palette-categorical-15-weakest);
1170
+ --salt-category-15-subtle-borderColor: var(--salt-palette-categorical-15);
1171
+ --salt-category-15-bold-foreground: var(--salt-palette-accent-foreground);
1172
+ --salt-category-15-bold-background: var(--salt-palette-categorical-15);
1173
+ --salt-category-16-subtle-foreground: var(--salt-palette-categorical-16-strong);
1174
+ --salt-category-16-subtle-background: var(--salt-palette-categorical-16-weakest);
1175
+ --salt-category-16-subtle-borderColor: var(--salt-palette-categorical-16);
1176
+ --salt-category-16-bold-foreground: var(--salt-palette-accent-foreground);
1177
+ --salt-category-16-bold-background: var(--salt-palette-categorical-16);
1178
+ --salt-category-17-subtle-foreground: var(--salt-palette-categorical-17-strong);
1179
+ --salt-category-17-subtle-background: var(--salt-palette-categorical-17-weakest);
1180
+ --salt-category-17-subtle-borderColor: var(--salt-palette-categorical-17);
1181
+ --salt-category-17-bold-foreground: var(--salt-palette-accent-foreground);
1182
+ --salt-category-17-bold-background: var(--salt-palette-categorical-17);
1183
+ --salt-category-18-subtle-foreground: var(--salt-palette-categorical-18-strong);
1184
+ --salt-category-18-subtle-background: var(--salt-palette-categorical-18-weakest);
1185
+ --salt-category-18-subtle-borderColor: var(--salt-palette-categorical-18);
1186
+ --salt-category-18-bold-foreground: var(--salt-palette-accent-foreground);
1187
+ --salt-category-18-bold-background: var(--salt-palette-categorical-18);
1188
+ --salt-category-19-subtle-foreground: var(--salt-palette-categorical-19-strong);
1189
+ --salt-category-19-subtle-background: var(--salt-palette-categorical-19-weakest);
1190
+ --salt-category-19-subtle-borderColor: var(--salt-palette-categorical-19);
1191
+ --salt-category-19-bold-foreground: var(--salt-palette-accent-foreground);
1192
+ --salt-category-19-bold-background: var(--salt-palette-categorical-19);
1193
+ --salt-category-20-subtle-foreground: var(--salt-palette-categorical-20-strong);
1194
+ --salt-category-20-subtle-background: var(--salt-palette-categorical-20-weakest);
1195
+ --salt-category-20-subtle-borderColor: var(--salt-palette-categorical-20);
1196
+ --salt-category-20-bold-foreground: var(--salt-palette-accent-foreground);
1197
+ --salt-category-20-bold-background: var(--salt-palette-categorical-20);
1198
+ }
1199
+
957
1200
  /* css/characteristics/container.css */
958
1201
  .salt-theme {
959
1202
  --salt-container-borderStyle: solid;
@@ -1143,47 +1386,51 @@
1143
1386
  --salt-text-action-letterSpacing: 0.6px;
1144
1387
  --salt-text-action-textTransform: uppercase;
1145
1388
  --salt-text-action-textAlign: center;
1146
- --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
1389
+ --salt-text-action-fontWeight: var(--salt-palette-text-body-fontWeight-strong);
1147
1390
  --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
1148
- --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
1149
- --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
1150
- --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1391
+ --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
1392
+ --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
1393
+ --salt-text-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
1151
1394
  --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
1152
- --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
1153
- --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
1154
- --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1395
+ --salt-text-notation-fontWeight: var(--salt-palette-text-notation-fontWeight);
1396
+ --salt-text-notation-fontWeight-small: var(--salt-palette-text-notation-fontWeight-small);
1397
+ --salt-text-notation-fontWeight-strong: var(--salt-palette-text-notation-fontWeight-strong);
1155
1398
  --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
1156
- --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
1157
- --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
1158
- --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
1399
+ --salt-text-h1-fontWeight: var(--salt-palette-text-heading-fontWeight);
1400
+ --salt-text-h1-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1401
+ --salt-text-h1-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1159
1402
  --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
1160
- --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1161
- --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1162
- --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1403
+ --salt-text-h2-fontWeight: var(--salt-palette-text-heading-fontWeight);
1404
+ --salt-text-h2-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1405
+ --salt-text-h2-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1163
1406
  --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
1164
- --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1165
- --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1166
- --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1407
+ --salt-text-h3-fontWeight: var(--salt-palette-text-heading-fontWeight);
1408
+ --salt-text-h3-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1409
+ --salt-text-h3-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1167
1410
  --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
1168
- --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
1169
- --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1170
- --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1411
+ --salt-text-h4-fontWeight: var(--salt-palette-text-heading-fontWeight);
1412
+ --salt-text-h4-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1413
+ --salt-text-h4-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1171
1414
  --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
1172
- --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
1173
- --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
1174
- --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1415
+ --salt-text-label-fontWeight: var(--salt-palette-text-body-fontWeight);
1416
+ --salt-text-label-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
1417
+ --salt-text-label-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
1175
1418
  --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
1176
- --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
1177
- --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1178
- --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
1419
+ --salt-text-display1-fontWeight: var(--salt-palette-text-display-fontWeight);
1420
+ --salt-text-display1-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1421
+ --salt-text-display1-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1179
1422
  --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
1180
- --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1181
- --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1182
- --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1423
+ --salt-text-display2-fontWeight: var(--salt-palette-text-display-fontWeight);
1424
+ --salt-text-display2-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1425
+ --salt-text-display2-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1183
1426
  --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
1184
- --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1185
- --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1186
- --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1427
+ --salt-text-display3-fontWeight: var(--salt-palette-text-display-fontWeight);
1428
+ --salt-text-display3-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1429
+ --salt-text-display3-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1430
+ --salt-text-display4-fontFamily: var(--salt-palette-text-fontFamily-heading);
1431
+ --salt-text-display4-fontWeight: var(--salt-typography-fontWeight-semiBold);
1432
+ --salt-text-display4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1433
+ --salt-text-display4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1187
1434
  --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
1188
1435
  }
1189
1436
  .salt-density-touch {
@@ -1206,6 +1453,8 @@
1206
1453
  --salt-text-display2-lineHeight: 76px;
1207
1454
  --salt-text-display3-fontSize: 42px;
1208
1455
  --salt-text-display3-lineHeight: 54px;
1456
+ --salt-text-display4-fontSize: 42px;
1457
+ --salt-text-display4-lineHeight: 54px;
1209
1458
  --salt-text-notation-fontSize: 14px;
1210
1459
  --salt-text-notation-lineHeight: 18px;
1211
1460
  }
@@ -1229,6 +1478,8 @@
1229
1478
  --salt-text-display2-lineHeight: 60px;
1230
1479
  --salt-text-display3-fontSize: 32px;
1231
1480
  --salt-text-display3-lineHeight: 42px;
1481
+ --salt-text-display4-fontSize: 32px;
1482
+ --salt-text-display4-lineHeight: 42px;
1232
1483
  --salt-text-notation-fontSize: 12px;
1233
1484
  --salt-text-notation-lineHeight: 16px;
1234
1485
  }
@@ -1252,6 +1503,8 @@
1252
1503
  --salt-text-display2-lineHeight: 47px;
1253
1504
  --salt-text-display3-fontSize: 24px;
1254
1505
  --salt-text-display3-lineHeight: 32px;
1506
+ --salt-text-display4-fontSize: 24px;
1507
+ --salt-text-display4-lineHeight: 32px;
1255
1508
  --salt-text-notation-fontSize: 10px;
1256
1509
  --salt-text-notation-lineHeight: 13px;
1257
1510
  }
@@ -1275,6 +1528,8 @@
1275
1528
  --salt-text-display2-lineHeight: 36px;
1276
1529
  --salt-text-display3-fontSize: 18px;
1277
1530
  --salt-text-display3-lineHeight: 24px;
1531
+ --salt-text-display4-fontSize: 18px;
1532
+ --salt-text-display4-lineHeight: 24px;
1278
1533
  --salt-text-notation-fontSize: 8px;
1279
1534
  --salt-text-notation-lineHeight: 10px;
1280
1535
  }