@salt-ds/theme 1.17.0 → 1.19.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 +255 -157
  2. package/css/theme.css +290 -32
  3. package/index.css +290 -32
  4. package/package.json +1 -1
package/index.css CHANGED
@@ -540,6 +540,7 @@
540
540
  --salt-opacity-15: 0.15;
541
541
  --salt-opacity-25: 0.25;
542
542
  --salt-opacity-40: 0.4;
543
+ --salt-opacity-45: 0.45;
543
544
  --salt-opacity-70: 0.7;
544
545
  }
545
546
 
@@ -701,6 +702,132 @@
701
702
  --salt-palette-error-foreground-informative: var(--salt-color-red-200);
702
703
  }
703
704
 
705
+ /* css/palette/categorical.css */
706
+ .salt-theme[data-mode=light] {
707
+ --salt-palette-categorical-1: var(--salt-color-cobalt-500);
708
+ --salt-palette-categorical-1-strong: var(--salt-color-cobalt-600);
709
+ --salt-palette-categorical-1-weakest: var(--salt-color-cobalt-100);
710
+ --salt-palette-categorical-2: var(--salt-color-cider-500);
711
+ --salt-palette-categorical-2-strong: var(--salt-color-cider-600);
712
+ --salt-palette-categorical-2-weakest: var(--salt-color-cider-100);
713
+ --salt-palette-categorical-3: var(--salt-color-plum-500);
714
+ --salt-palette-categorical-3-strong: var(--salt-color-plum-600);
715
+ --salt-palette-categorical-3-weakest: var(--salt-color-plum-100);
716
+ --salt-palette-categorical-4: var(--salt-color-aqua-500);
717
+ --salt-palette-categorical-4-strong: var(--salt-color-aqua-600);
718
+ --salt-palette-categorical-4-weakest: var(--salt-color-aqua-100);
719
+ --salt-palette-categorical-5: var(--salt-color-slate-500);
720
+ --salt-palette-categorical-5-strong: var(--salt-color-slate-600);
721
+ --salt-palette-categorical-5-weakest: var(--salt-color-slate-100);
722
+ --salt-palette-categorical-6: var(--salt-color-rose-500);
723
+ --salt-palette-categorical-6-strong: var(--salt-color-rose-600);
724
+ --salt-palette-categorical-6-weakest: var(--salt-color-rose-100);
725
+ --salt-palette-categorical-7: var(--salt-color-olive-500);
726
+ --salt-palette-categorical-7-strong: var(--salt-color-olive-600);
727
+ --salt-palette-categorical-7-weakest: var(--salt-color-olive-100);
728
+ --salt-palette-categorical-8: var(--salt-color-salmon-500);
729
+ --salt-palette-categorical-8-strong: var(--salt-color-salmon-600);
730
+ --salt-palette-categorical-8-weakest: var(--salt-color-salmon-100);
731
+ --salt-palette-categorical-9: var(--salt-color-indigo-500);
732
+ --salt-palette-categorical-9-strong: var(--salt-color-indigo-600);
733
+ --salt-palette-categorical-9-weakest: var(--salt-color-indigo-100);
734
+ --salt-palette-categorical-10: var(--salt-color-jade-500);
735
+ --salt-palette-categorical-10-strong: var(--salt-color-jade-600);
736
+ --salt-palette-categorical-10-weakest: var(--salt-color-jade-100);
737
+ --salt-palette-categorical-11: var(--salt-color-citrine-500);
738
+ --salt-palette-categorical-11-strong: var(--salt-color-citrine-600);
739
+ --salt-palette-categorical-11-weakest: var(--salt-color-citrine-100);
740
+ --salt-palette-categorical-12: var(--salt-color-autumn-500);
741
+ --salt-palette-categorical-12-strong: var(--salt-color-autumn-600);
742
+ --salt-palette-categorical-12-weakest: var(--salt-color-autumn-100);
743
+ --salt-palette-categorical-13: var(--salt-color-lavender-500);
744
+ --salt-palette-categorical-13-strong: var(--salt-color-lavender-600);
745
+ --salt-palette-categorical-13-weakest: var(--salt-color-lavender-100);
746
+ --salt-palette-categorical-14: var(--salt-color-ocean-500);
747
+ --salt-palette-categorical-14-strong: var(--salt-color-ocean-600);
748
+ --salt-palette-categorical-14-weakest: var(--salt-color-ocean-100);
749
+ --salt-palette-categorical-15: var(--salt-color-smoke-500);
750
+ --salt-palette-categorical-15-strong: var(--salt-color-smoke-600);
751
+ --salt-palette-categorical-15-weakest: var(--salt-color-smoke-100);
752
+ --salt-palette-categorical-16: var(--salt-color-fuchsia-500);
753
+ --salt-palette-categorical-16-strong: var(--salt-color-fuchsia-600);
754
+ --salt-palette-categorical-16-weakest: var(--salt-color-fuchsia-100);
755
+ --salt-palette-categorical-17: var(--salt-color-lime-500);
756
+ --salt-palette-categorical-17-strong: var(--salt-color-lime-600);
757
+ --salt-palette-categorical-17-weakest: var(--salt-color-lime-100);
758
+ --salt-palette-categorical-18: var(--salt-color-fur-500);
759
+ --salt-palette-categorical-18-strong: var(--salt-color-fur-600);
760
+ --salt-palette-categorical-18-weakest: var(--salt-color-fur-100);
761
+ --salt-palette-categorical-19: var(--salt-color-violet-500);
762
+ --salt-palette-categorical-19-strong: var(--salt-color-violet-600);
763
+ --salt-palette-categorical-19-weakest: var(--salt-color-violet-100);
764
+ --salt-palette-categorical-20: var(--salt-color-forest-500);
765
+ --salt-palette-categorical-20-strong: var(--salt-color-forest-600);
766
+ --salt-palette-categorical-20-weakest: var(--salt-color-forest-100);
767
+ }
768
+ .salt-theme[data-mode=dark] {
769
+ --salt-palette-categorical-1: var(--salt-color-cobalt-500);
770
+ --salt-palette-categorical-1-strong: var(--salt-color-cobalt-400);
771
+ --salt-palette-categorical-1-weakest: var(--salt-color-cobalt-900);
772
+ --salt-palette-categorical-2: var(--salt-color-cider-500);
773
+ --salt-palette-categorical-2-strong: var(--salt-color-cider-400);
774
+ --salt-palette-categorical-2-weakest: var(--salt-color-cider-900);
775
+ --salt-palette-categorical-3: var(--salt-color-plum-500);
776
+ --salt-palette-categorical-3-strong: var(--salt-color-plum-400);
777
+ --salt-palette-categorical-3-weakest: var(--salt-color-plum-900);
778
+ --salt-palette-categorical-4: var(--salt-color-aqua-500);
779
+ --salt-palette-categorical-4-strong: var(--salt-color-aqua-400);
780
+ --salt-palette-categorical-4-weakest: var(--salt-color-aqua-900);
781
+ --salt-palette-categorical-5: var(--salt-color-slate-500);
782
+ --salt-palette-categorical-5-strong: var(--salt-color-slate-400);
783
+ --salt-palette-categorical-5-weakest: var(--salt-color-slate-900);
784
+ --salt-palette-categorical-6: var(--salt-color-rose-500);
785
+ --salt-palette-categorical-6-strong: var(--salt-color-rose-400);
786
+ --salt-palette-categorical-6-weakest: var(--salt-color-rose-900);
787
+ --salt-palette-categorical-7: var(--salt-color-olive-500);
788
+ --salt-palette-categorical-7-strong: var(--salt-color-olive-400);
789
+ --salt-palette-categorical-7-weakest: var(--salt-color-olive-900);
790
+ --salt-palette-categorical-8: var(--salt-color-salmon-500);
791
+ --salt-palette-categorical-8-strong: var(--salt-color-salmon-400);
792
+ --salt-palette-categorical-8-weakest: var(--salt-color-salmon-900);
793
+ --salt-palette-categorical-9: var(--salt-color-indigo-500);
794
+ --salt-palette-categorical-9-strong: var(--salt-color-indigo-400);
795
+ --salt-palette-categorical-9-weakest: var(--salt-color-indigo-900);
796
+ --salt-palette-categorical-10: var(--salt-color-jade-500);
797
+ --salt-palette-categorical-10-strong: var(--salt-color-jade-400);
798
+ --salt-palette-categorical-10-weakest: var(--salt-color-jade-900);
799
+ --salt-palette-categorical-11: var(--salt-color-citrine-500);
800
+ --salt-palette-categorical-11-strong: var(--salt-color-citrine-400);
801
+ --salt-palette-categorical-11-weakest: var(--salt-color-citrine-900);
802
+ --salt-palette-categorical-12: var(--salt-color-autumn-500);
803
+ --salt-palette-categorical-12-strong: var(--salt-color-autumn-400);
804
+ --salt-palette-categorical-12-weakest: var(--salt-color-autumn-900);
805
+ --salt-palette-categorical-13: var(--salt-color-lavender-500);
806
+ --salt-palette-categorical-13-strong: var(--salt-color-lavender-400);
807
+ --salt-palette-categorical-13-weakest: var(--salt-color-lavender-900);
808
+ --salt-palette-categorical-14: var(--salt-color-ocean-500);
809
+ --salt-palette-categorical-14-strong: var(--salt-color-ocean-400);
810
+ --salt-palette-categorical-14-weakest: var(--salt-color-ocean-900);
811
+ --salt-palette-categorical-15: var(--salt-color-smoke-500);
812
+ --salt-palette-categorical-15-strong: var(--salt-color-smoke-400);
813
+ --salt-palette-categorical-15-weakest: var(--salt-color-smoke-900);
814
+ --salt-palette-categorical-16: var(--salt-color-fuchsia-500);
815
+ --salt-palette-categorical-16-strong: var(--salt-color-fuchsia-400);
816
+ --salt-palette-categorical-16-weakest: var(--salt-color-fuchsia-900);
817
+ --salt-palette-categorical-17: var(--salt-color-lime-500);
818
+ --salt-palette-categorical-17-strong: var(--salt-color-lime-400);
819
+ --salt-palette-categorical-17-weakest: var(--salt-color-lime-900);
820
+ --salt-palette-categorical-18: var(--salt-color-fur-500);
821
+ --salt-palette-categorical-18-strong: var(--salt-color-fur-400);
822
+ --salt-palette-categorical-18-weakest: var(--salt-color-fur-900);
823
+ --salt-palette-categorical-19: var(--salt-color-violet-500);
824
+ --salt-palette-categorical-19-strong: var(--salt-color-violet-400);
825
+ --salt-palette-categorical-19-weakest: var(--salt-color-violet-900);
826
+ --salt-palette-categorical-20: var(--salt-color-forest-500);
827
+ --salt-palette-categorical-20-strong: var(--salt-color-forest-400);
828
+ --salt-palette-categorical-20-weakest: var(--salt-color-forest-900);
829
+ }
830
+
704
831
  /* css/palette/info.css */
705
832
  .salt-theme[data-mode=light] {
706
833
  --salt-palette-info-background: var(--salt-color-blue-10);
@@ -881,7 +1008,7 @@
881
1008
  --salt-palette-opacity-disabled: var(--salt-opacity-40);
882
1009
  --salt-palette-opacity-background-readonly: var(--salt-opacity-0);
883
1010
  --salt-palette-opacity-border-readonly: var(--salt-opacity-15);
884
- --salt-palette-opacity-primary-border: var(--salt-opacity-40);
1011
+ --salt-palette-opacity-primary-border: var(--salt-opacity-45);
885
1012
  --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
886
1013
  --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
887
1014
  }
@@ -915,6 +1042,20 @@
915
1042
  --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
916
1043
  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
917
1044
  --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1045
+ --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
1046
+ --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
1047
+ --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
1048
+ --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
1049
+ --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1050
+ --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
1051
+ --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
1052
+ --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1053
+ --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
1054
+ --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
1055
+ --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1056
+ --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
1057
+ --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
1058
+ --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
918
1059
  }
919
1060
 
920
1061
  /* css/palette/warning.css */
@@ -983,6 +1124,110 @@
983
1124
  --salt-actionable-secondary-borderColor-disabled: transparent;
984
1125
  }
985
1126
 
1127
+ /* css/characteristics/category.css */
1128
+ .salt-theme {
1129
+ --salt-category-1-subtle-foreground: var(--salt-palette-categorical-1-strong);
1130
+ --salt-category-1-subtle-background: var(--salt-palette-categorical-1-weakest);
1131
+ --salt-category-1-subtle-borderColor: var(--salt-palette-categorical-1);
1132
+ --salt-category-1-bold-foreground: var(--salt-palette-accent-foreground);
1133
+ --salt-category-1-bold-background: var(--salt-palette-categorical-1);
1134
+ --salt-category-2-subtle-foreground: var(--salt-palette-categorical-2-strong);
1135
+ --salt-category-2-subtle-background: var(--salt-palette-categorical-2-weakest);
1136
+ --salt-category-2-subtle-borderColor: var(--salt-palette-categorical-2);
1137
+ --salt-category-2-bold-foreground: var(--salt-palette-accent-foreground);
1138
+ --salt-category-2-bold-background: var(--salt-palette-categorical-2);
1139
+ --salt-category-3-subtle-foreground: var(--salt-palette-categorical-3-strong);
1140
+ --salt-category-3-subtle-background: var(--salt-palette-categorical-3-weakest);
1141
+ --salt-category-3-subtle-borderColor: var(--salt-palette-categorical-3);
1142
+ --salt-category-3-bold-foreground: var(--salt-palette-accent-foreground);
1143
+ --salt-category-3-bold-background: var(--salt-palette-categorical-3);
1144
+ --salt-category-4-subtle-foreground: var(--salt-palette-categorical-4-strong);
1145
+ --salt-category-4-subtle-background: var(--salt-palette-categorical-4-weakest);
1146
+ --salt-category-4-subtle-borderColor: var(--salt-palette-categorical-4);
1147
+ --salt-category-4-bold-foreground: var(--salt-palette-accent-foreground);
1148
+ --salt-category-4-bold-background: var(--salt-palette-categorical-4);
1149
+ --salt-category-5-subtle-foreground: var(--salt-palette-categorical-5-strong);
1150
+ --salt-category-5-subtle-background: var(--salt-palette-categorical-5-weakest);
1151
+ --salt-category-5-subtle-borderColor: var(--salt-palette-categorical-5);
1152
+ --salt-category-5-bold-foreground: var(--salt-palette-accent-foreground);
1153
+ --salt-category-5-bold-background: var(--salt-palette-categorical-5);
1154
+ --salt-category-6-subtle-foreground: var(--salt-palette-categorical-6-strong);
1155
+ --salt-category-6-subtle-background: var(--salt-palette-categorical-6-weakest);
1156
+ --salt-category-6-subtle-borderColor: var(--salt-palette-categorical-6);
1157
+ --salt-category-6-bold-foreground: var(--salt-palette-accent-foreground);
1158
+ --salt-category-6-bold-background: var(--salt-palette-categorical-6);
1159
+ --salt-category-7-subtle-foreground: var(--salt-palette-categorical-7-strong);
1160
+ --salt-category-7-subtle-background: var(--salt-palette-categorical-7-weakest);
1161
+ --salt-category-7-subtle-borderColor: var(--salt-palette-categorical-7);
1162
+ --salt-category-7-bold-foreground: var(--salt-palette-accent-foreground);
1163
+ --salt-category-7-bold-background: var(--salt-palette-categorical-7);
1164
+ --salt-category-8-subtle-foreground: var(--salt-palette-categorical-8-strong);
1165
+ --salt-category-8-subtle-background: var(--salt-palette-categorical-8-weakest);
1166
+ --salt-category-8-subtle-borderColor: var(--salt-palette-categorical-8);
1167
+ --salt-category-8-bold-foreground: var(--salt-palette-accent-foreground);
1168
+ --salt-category-8-bold-background: var(--salt-palette-categorical-8);
1169
+ --salt-category-9-subtle-foreground: var(--salt-palette-categorical-9-strong);
1170
+ --salt-category-9-subtle-background: var(--salt-palette-categorical-9-weakest);
1171
+ --salt-category-9-subtle-borderColor: var(--salt-palette-categorical-9);
1172
+ --salt-category-9-bold-foreground: var(--salt-palette-accent-foreground);
1173
+ --salt-category-9-bold-background: var(--salt-palette-categorical-9);
1174
+ --salt-category-10-subtle-foreground: var(--salt-palette-categorical-10-strong);
1175
+ --salt-category-10-subtle-background: var(--salt-palette-categorical-10-weakest);
1176
+ --salt-category-10-subtle-borderColor: var(--salt-palette-categorical-10);
1177
+ --salt-category-10-bold-foreground: var(--salt-palette-accent-foreground);
1178
+ --salt-category-10-bold-background: var(--salt-palette-categorical-10);
1179
+ --salt-category-11-subtle-foreground: var(--salt-palette-categorical-11-strong);
1180
+ --salt-category-11-subtle-background: var(--salt-palette-categorical-11-weakest);
1181
+ --salt-category-11-subtle-borderColor: var(--salt-palette-categorical-11);
1182
+ --salt-category-11-bold-foreground: var(--salt-palette-accent-foreground);
1183
+ --salt-category-11-bold-background: var(--salt-palette-categorical-11);
1184
+ --salt-category-12-subtle-foreground: var(--salt-palette-categorical-12-strong);
1185
+ --salt-category-12-subtle-background: var(--salt-palette-categorical-12-weakest);
1186
+ --salt-category-12-subtle-borderColor: var(--salt-palette-categorical-12);
1187
+ --salt-category-12-bold-foreground: var(--salt-palette-accent-foreground);
1188
+ --salt-category-12-bold-background: var(--salt-palette-categorical-12);
1189
+ --salt-category-13-subtle-foreground: var(--salt-palette-categorical-13-strong);
1190
+ --salt-category-13-subtle-background: var(--salt-palette-categorical-13-weakest);
1191
+ --salt-category-13-subtle-borderColor: var(--salt-palette-categorical-13);
1192
+ --salt-category-13-bold-foreground: var(--salt-palette-accent-foreground);
1193
+ --salt-category-13-bold-background: var(--salt-palette-categorical-13);
1194
+ --salt-category-14-subtle-foreground: var(--salt-palette-categorical-14-strong);
1195
+ --salt-category-14-subtle-background: var(--salt-palette-categorical-14-weakest);
1196
+ --salt-category-14-subtle-borderColor: var(--salt-palette-categorical-14);
1197
+ --salt-category-14-bold-foreground: var(--salt-palette-accent-foreground);
1198
+ --salt-category-14-bold-background: var(--salt-palette-categorical-14);
1199
+ --salt-category-15-subtle-foreground: var(--salt-palette-categorical-15-strong);
1200
+ --salt-category-15-subtle-background: var(--salt-palette-categorical-15-weakest);
1201
+ --salt-category-15-subtle-borderColor: var(--salt-palette-categorical-15);
1202
+ --salt-category-15-bold-foreground: var(--salt-palette-accent-foreground);
1203
+ --salt-category-15-bold-background: var(--salt-palette-categorical-15);
1204
+ --salt-category-16-subtle-foreground: var(--salt-palette-categorical-16-strong);
1205
+ --salt-category-16-subtle-background: var(--salt-palette-categorical-16-weakest);
1206
+ --salt-category-16-subtle-borderColor: var(--salt-palette-categorical-16);
1207
+ --salt-category-16-bold-foreground: var(--salt-palette-accent-foreground);
1208
+ --salt-category-16-bold-background: var(--salt-palette-categorical-16);
1209
+ --salt-category-17-subtle-foreground: var(--salt-palette-categorical-17-strong);
1210
+ --salt-category-17-subtle-background: var(--salt-palette-categorical-17-weakest);
1211
+ --salt-category-17-subtle-borderColor: var(--salt-palette-categorical-17);
1212
+ --salt-category-17-bold-foreground: var(--salt-palette-accent-foreground);
1213
+ --salt-category-17-bold-background: var(--salt-palette-categorical-17);
1214
+ --salt-category-18-subtle-foreground: var(--salt-palette-categorical-18-strong);
1215
+ --salt-category-18-subtle-background: var(--salt-palette-categorical-18-weakest);
1216
+ --salt-category-18-subtle-borderColor: var(--salt-palette-categorical-18);
1217
+ --salt-category-18-bold-foreground: var(--salt-palette-accent-foreground);
1218
+ --salt-category-18-bold-background: var(--salt-palette-categorical-18);
1219
+ --salt-category-19-subtle-foreground: var(--salt-palette-categorical-19-strong);
1220
+ --salt-category-19-subtle-background: var(--salt-palette-categorical-19-weakest);
1221
+ --salt-category-19-subtle-borderColor: var(--salt-palette-categorical-19);
1222
+ --salt-category-19-bold-foreground: var(--salt-palette-accent-foreground);
1223
+ --salt-category-19-bold-background: var(--salt-palette-categorical-19);
1224
+ --salt-category-20-subtle-foreground: var(--salt-palette-categorical-20-strong);
1225
+ --salt-category-20-subtle-background: var(--salt-palette-categorical-20-weakest);
1226
+ --salt-category-20-subtle-borderColor: var(--salt-palette-categorical-20);
1227
+ --salt-category-20-bold-foreground: var(--salt-palette-accent-foreground);
1228
+ --salt-category-20-bold-background: var(--salt-palette-categorical-20);
1229
+ }
1230
+
986
1231
  /* css/characteristics/container.css */
987
1232
  .salt-theme {
988
1233
  --salt-container-borderStyle: solid;
@@ -1169,50 +1414,55 @@
1169
1414
  --salt-text-textAlign-embedded: center;
1170
1415
  --salt-text-textDecoration: none;
1171
1416
  --salt-text-textTransform: none;
1417
+ --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
1172
1418
  --salt-text-action-letterSpacing: 0.6px;
1173
1419
  --salt-text-action-textTransform: uppercase;
1174
1420
  --salt-text-action-textAlign: center;
1175
- --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
1421
+ --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
1176
1422
  --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
1177
- --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
1178
- --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
1179
- --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1423
+ --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
1424
+ --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
1425
+ --salt-text-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
1180
1426
  --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
1181
- --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
1182
- --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
1183
- --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1427
+ --salt-text-notation-fontWeight: var(--salt-palette-text-notation-fontWeight);
1428
+ --salt-text-notation-fontWeight-small: var(--salt-palette-text-notation-fontWeight-small);
1429
+ --salt-text-notation-fontWeight-strong: var(--salt-palette-text-notation-fontWeight-strong);
1184
1430
  --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
1185
- --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
1186
- --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
1187
- --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
1431
+ --salt-text-h1-fontWeight: var(--salt-palette-text-heading-fontWeight);
1432
+ --salt-text-h1-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1433
+ --salt-text-h1-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1188
1434
  --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
1189
- --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1190
- --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1191
- --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1435
+ --salt-text-h2-fontWeight: var(--salt-palette-text-heading-fontWeight);
1436
+ --salt-text-h2-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1437
+ --salt-text-h2-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1192
1438
  --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
1193
- --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1194
- --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1195
- --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1439
+ --salt-text-h3-fontWeight: var(--salt-palette-text-heading-fontWeight);
1440
+ --salt-text-h3-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1441
+ --salt-text-h3-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1196
1442
  --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
1197
- --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
1198
- --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1199
- --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1443
+ --salt-text-h4-fontWeight: var(--salt-palette-text-heading-fontWeight);
1444
+ --salt-text-h4-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1445
+ --salt-text-h4-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1200
1446
  --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
1201
- --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
1202
- --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
1203
- --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1447
+ --salt-text-label-fontWeight: var(--salt-palette-text-body-fontWeight);
1448
+ --salt-text-label-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
1449
+ --salt-text-label-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
1204
1450
  --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
1205
- --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
1206
- --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1207
- --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
1451
+ --salt-text-display1-fontWeight: var(--salt-palette-text-display-fontWeight);
1452
+ --salt-text-display1-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1453
+ --salt-text-display1-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1208
1454
  --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
1209
- --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1210
- --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1211
- --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1455
+ --salt-text-display2-fontWeight: var(--salt-palette-text-display-fontWeight);
1456
+ --salt-text-display2-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1457
+ --salt-text-display2-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1212
1458
  --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
1213
- --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1214
- --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1215
- --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1459
+ --salt-text-display3-fontWeight: var(--salt-palette-text-display-fontWeight);
1460
+ --salt-text-display3-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1461
+ --salt-text-display3-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1462
+ --salt-text-display4-fontFamily: var(--salt-palette-text-fontFamily-heading);
1463
+ --salt-text-display4-fontWeight: var(--salt-typography-fontWeight-semiBold);
1464
+ --salt-text-display4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1465
+ --salt-text-display4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1216
1466
  --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
1217
1467
  }
1218
1468
  .salt-density-touch {
@@ -1235,6 +1485,8 @@
1235
1485
  --salt-text-display2-lineHeight: 76px;
1236
1486
  --salt-text-display3-fontSize: 42px;
1237
1487
  --salt-text-display3-lineHeight: 54px;
1488
+ --salt-text-display4-fontSize: 42px;
1489
+ --salt-text-display4-lineHeight: 54px;
1238
1490
  --salt-text-notation-fontSize: 14px;
1239
1491
  --salt-text-notation-lineHeight: 18px;
1240
1492
  }
@@ -1258,6 +1510,8 @@
1258
1510
  --salt-text-display2-lineHeight: 60px;
1259
1511
  --salt-text-display3-fontSize: 32px;
1260
1512
  --salt-text-display3-lineHeight: 42px;
1513
+ --salt-text-display4-fontSize: 32px;
1514
+ --salt-text-display4-lineHeight: 42px;
1261
1515
  --salt-text-notation-fontSize: 12px;
1262
1516
  --salt-text-notation-lineHeight: 16px;
1263
1517
  }
@@ -1281,6 +1535,8 @@
1281
1535
  --salt-text-display2-lineHeight: 47px;
1282
1536
  --salt-text-display3-fontSize: 24px;
1283
1537
  --salt-text-display3-lineHeight: 32px;
1538
+ --salt-text-display4-fontSize: 24px;
1539
+ --salt-text-display4-lineHeight: 32px;
1284
1540
  --salt-text-notation-fontSize: 10px;
1285
1541
  --salt-text-notation-lineHeight: 13px;
1286
1542
  }
@@ -1304,6 +1560,8 @@
1304
1560
  --salt-text-display2-lineHeight: 36px;
1305
1561
  --salt-text-display3-fontSize: 18px;
1306
1562
  --salt-text-display3-lineHeight: 24px;
1563
+ --salt-text-display4-fontSize: 18px;
1564
+ --salt-text-display4-lineHeight: 24px;
1307
1565
  --salt-text-notation-fontSize: 8px;
1308
1566
  --salt-text-notation-lineHeight: 10px;
1309
1567
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.17.0",
3
+ "version": "1.19.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",