@salt-ds/theme 1.17.0 → 1.19.0

package/css/theme.css

@@ -511,6 +511,7 @@
   --salt-opacity-15: 0.15;
   --salt-opacity-25: 0.25;
   --salt-opacity-40: 0.4;
+  --salt-opacity-45: 0.45;
   --salt-opacity-70: 0.7;
 }
 
@@ -672,6 +673,132 @@
   --salt-palette-error-foreground-informative: var(--salt-color-red-200);
 }
 
+/* css/palette/categorical.css */
+.salt-theme[data-mode=light] {
+  --salt-palette-categorical-1: var(--salt-color-cobalt-500);
+  --salt-palette-categorical-1-strong: var(--salt-color-cobalt-600);
+  --salt-palette-categorical-1-weakest: var(--salt-color-cobalt-100);
+  --salt-palette-categorical-2: var(--salt-color-cider-500);
+  --salt-palette-categorical-2-strong: var(--salt-color-cider-600);
+  --salt-palette-categorical-2-weakest: var(--salt-color-cider-100);
+  --salt-palette-categorical-3: var(--salt-color-plum-500);
+  --salt-palette-categorical-3-strong: var(--salt-color-plum-600);
+  --salt-palette-categorical-3-weakest: var(--salt-color-plum-100);
+  --salt-palette-categorical-4: var(--salt-color-aqua-500);
+  --salt-palette-categorical-4-strong: var(--salt-color-aqua-600);
+  --salt-palette-categorical-4-weakest: var(--salt-color-aqua-100);
+  --salt-palette-categorical-5: var(--salt-color-slate-500);
+  --salt-palette-categorical-5-strong: var(--salt-color-slate-600);
+  --salt-palette-categorical-5-weakest: var(--salt-color-slate-100);
+  --salt-palette-categorical-6: var(--salt-color-rose-500);
+  --salt-palette-categorical-6-strong: var(--salt-color-rose-600);
+  --salt-palette-categorical-6-weakest: var(--salt-color-rose-100);
+  --salt-palette-categorical-7: var(--salt-color-olive-500);
+  --salt-palette-categorical-7-strong: var(--salt-color-olive-600);
+  --salt-palette-categorical-7-weakest: var(--salt-color-olive-100);
+  --salt-palette-categorical-8: var(--salt-color-salmon-500);
+  --salt-palette-categorical-8-strong: var(--salt-color-salmon-600);
+  --salt-palette-categorical-8-weakest: var(--salt-color-salmon-100);
+  --salt-palette-categorical-9: var(--salt-color-indigo-500);
+  --salt-palette-categorical-9-strong: var(--salt-color-indigo-600);
+  --salt-palette-categorical-9-weakest: var(--salt-color-indigo-100);
+  --salt-palette-categorical-10: var(--salt-color-jade-500);
+  --salt-palette-categorical-10-strong: var(--salt-color-jade-600);
+  --salt-palette-categorical-10-weakest: var(--salt-color-jade-100);
+  --salt-palette-categorical-11: var(--salt-color-citrine-500);
+  --salt-palette-categorical-11-strong: var(--salt-color-citrine-600);
+  --salt-palette-categorical-11-weakest: var(--salt-color-citrine-100);
+  --salt-palette-categorical-12: var(--salt-color-autumn-500);
+  --salt-palette-categorical-12-strong: var(--salt-color-autumn-600);
+  --salt-palette-categorical-12-weakest: var(--salt-color-autumn-100);
+  --salt-palette-categorical-13: var(--salt-color-lavender-500);
+  --salt-palette-categorical-13-strong: var(--salt-color-lavender-600);
+  --salt-palette-categorical-13-weakest: var(--salt-color-lavender-100);
+  --salt-palette-categorical-14: var(--salt-color-ocean-500);
+  --salt-palette-categorical-14-strong: var(--salt-color-ocean-600);
+  --salt-palette-categorical-14-weakest: var(--salt-color-ocean-100);
+  --salt-palette-categorical-15: var(--salt-color-smoke-500);
+  --salt-palette-categorical-15-strong: var(--salt-color-smoke-600);
+  --salt-palette-categorical-15-weakest: var(--salt-color-smoke-100);
+  --salt-palette-categorical-16: var(--salt-color-fuchsia-500);
+  --salt-palette-categorical-16-strong: var(--salt-color-fuchsia-600);
+  --salt-palette-categorical-16-weakest: var(--salt-color-fuchsia-100);
+  --salt-palette-categorical-17: var(--salt-color-lime-500);
+  --salt-palette-categorical-17-strong: var(--salt-color-lime-600);
+  --salt-palette-categorical-17-weakest: var(--salt-color-lime-100);
+  --salt-palette-categorical-18: var(--salt-color-fur-500);
+  --salt-palette-categorical-18-strong: var(--salt-color-fur-600);
+  --salt-palette-categorical-18-weakest: var(--salt-color-fur-100);
+  --salt-palette-categorical-19: var(--salt-color-violet-500);
+  --salt-palette-categorical-19-strong: var(--salt-color-violet-600);
+  --salt-palette-categorical-19-weakest: var(--salt-color-violet-100);
+  --salt-palette-categorical-20: var(--salt-color-forest-500);
+  --salt-palette-categorical-20-strong: var(--salt-color-forest-600);
+  --salt-palette-categorical-20-weakest: var(--salt-color-forest-100);
+}
+.salt-theme[data-mode=dark] {
+  --salt-palette-categorical-1: var(--salt-color-cobalt-500);
+  --salt-palette-categorical-1-strong: var(--salt-color-cobalt-400);
+  --salt-palette-categorical-1-weakest: var(--salt-color-cobalt-900);
+  --salt-palette-categorical-2: var(--salt-color-cider-500);
+  --salt-palette-categorical-2-strong: var(--salt-color-cider-400);
+  --salt-palette-categorical-2-weakest: var(--salt-color-cider-900);
+  --salt-palette-categorical-3: var(--salt-color-plum-500);
+  --salt-palette-categorical-3-strong: var(--salt-color-plum-400);
+  --salt-palette-categorical-3-weakest: var(--salt-color-plum-900);
+  --salt-palette-categorical-4: var(--salt-color-aqua-500);
+  --salt-palette-categorical-4-strong: var(--salt-color-aqua-400);
+  --salt-palette-categorical-4-weakest: var(--salt-color-aqua-900);
+  --salt-palette-categorical-5: var(--salt-color-slate-500);
+  --salt-palette-categorical-5-strong: var(--salt-color-slate-400);
+  --salt-palette-categorical-5-weakest: var(--salt-color-slate-900);
+  --salt-palette-categorical-6: var(--salt-color-rose-500);
+  --salt-palette-categorical-6-strong: var(--salt-color-rose-400);
+  --salt-palette-categorical-6-weakest: var(--salt-color-rose-900);
+  --salt-palette-categorical-7: var(--salt-color-olive-500);
+  --salt-palette-categorical-7-strong: var(--salt-color-olive-400);
+  --salt-palette-categorical-7-weakest: var(--salt-color-olive-900);
+  --salt-palette-categorical-8: var(--salt-color-salmon-500);
+  --salt-palette-categorical-8-strong: var(--salt-color-salmon-400);
+  --salt-palette-categorical-8-weakest: var(--salt-color-salmon-900);
+  --salt-palette-categorical-9: var(--salt-color-indigo-500);
+  --salt-palette-categorical-9-strong: var(--salt-color-indigo-400);
+  --salt-palette-categorical-9-weakest: var(--salt-color-indigo-900);
+  --salt-palette-categorical-10: var(--salt-color-jade-500);
+  --salt-palette-categorical-10-strong: var(--salt-color-jade-400);
+  --salt-palette-categorical-10-weakest: var(--salt-color-jade-900);
+  --salt-palette-categorical-11: var(--salt-color-citrine-500);
+  --salt-palette-categorical-11-strong: var(--salt-color-citrine-400);
+  --salt-palette-categorical-11-weakest: var(--salt-color-citrine-900);
+  --salt-palette-categorical-12: var(--salt-color-autumn-500);
+  --salt-palette-categorical-12-strong: var(--salt-color-autumn-400);
+  --salt-palette-categorical-12-weakest: var(--salt-color-autumn-900);
+  --salt-palette-categorical-13: var(--salt-color-lavender-500);
+  --salt-palette-categorical-13-strong: var(--salt-color-lavender-400);
+  --salt-palette-categorical-13-weakest: var(--salt-color-lavender-900);
+  --salt-palette-categorical-14: var(--salt-color-ocean-500);
+  --salt-palette-categorical-14-strong: var(--salt-color-ocean-400);
+  --salt-palette-categorical-14-weakest: var(--salt-color-ocean-900);
+  --salt-palette-categorical-15: var(--salt-color-smoke-500);
+  --salt-palette-categorical-15-strong: var(--salt-color-smoke-400);
+  --salt-palette-categorical-15-weakest: var(--salt-color-smoke-900);
+  --salt-palette-categorical-16: var(--salt-color-fuchsia-500);
+  --salt-palette-categorical-16-strong: var(--salt-color-fuchsia-400);
+  --salt-palette-categorical-16-weakest: var(--salt-color-fuchsia-900);
+  --salt-palette-categorical-17: var(--salt-color-lime-500);
+  --salt-palette-categorical-17-strong: var(--salt-color-lime-400);
+  --salt-palette-categorical-17-weakest: var(--salt-color-lime-900);
+  --salt-palette-categorical-18: var(--salt-color-fur-500);
+  --salt-palette-categorical-18-strong: var(--salt-color-fur-400);
+  --salt-palette-categorical-18-weakest: var(--salt-color-fur-900);
+  --salt-palette-categorical-19: var(--salt-color-violet-500);
+  --salt-palette-categorical-19-strong: var(--salt-color-violet-400);
+  --salt-palette-categorical-19-weakest: var(--salt-color-violet-900);
+  --salt-palette-categorical-20: var(--salt-color-forest-500);
+  --salt-palette-categorical-20-strong: var(--salt-color-forest-400);
+  --salt-palette-categorical-20-weakest: var(--salt-color-forest-900);
+}
+
 /* css/palette/info.css */
 .salt-theme[data-mode=light] {
   --salt-palette-info-background: var(--salt-color-blue-10);
@@ -852,7 +979,7 @@
   --salt-palette-opacity-disabled: var(--salt-opacity-40);
   --salt-palette-opacity-background-readonly: var(--salt-opacity-0);
   --salt-palette-opacity-border-readonly: var(--salt-opacity-15);
-  --salt-palette-opacity-primary-border: var(--salt-opacity-40);
+  --salt-palette-opacity-primary-border: var(--salt-opacity-45);
   --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
   --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
 }
@@ -886,6 +1013,20 @@
   --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
   --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
   --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
+  --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
+  --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
+  --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
+  --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
+  --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
+  --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
+  --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
+  --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
+  --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
+  --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
 }
 
 /* css/palette/warning.css */
@@ -954,6 +1095,110 @@
   --salt-actionable-secondary-borderColor-disabled: transparent;
 }
 
+/* css/characteristics/category.css */
+.salt-theme {
+  --salt-category-1-subtle-foreground: var(--salt-palette-categorical-1-strong);
+  --salt-category-1-subtle-background: var(--salt-palette-categorical-1-weakest);
+  --salt-category-1-subtle-borderColor: var(--salt-palette-categorical-1);
+  --salt-category-1-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-1-bold-background: var(--salt-palette-categorical-1);
+  --salt-category-2-subtle-foreground: var(--salt-palette-categorical-2-strong);
+  --salt-category-2-subtle-background: var(--salt-palette-categorical-2-weakest);
+  --salt-category-2-subtle-borderColor: var(--salt-palette-categorical-2);
+  --salt-category-2-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-2-bold-background: var(--salt-palette-categorical-2);
+  --salt-category-3-subtle-foreground: var(--salt-palette-categorical-3-strong);
+  --salt-category-3-subtle-background: var(--salt-palette-categorical-3-weakest);
+  --salt-category-3-subtle-borderColor: var(--salt-palette-categorical-3);
+  --salt-category-3-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-3-bold-background: var(--salt-palette-categorical-3);
+  --salt-category-4-subtle-foreground: var(--salt-palette-categorical-4-strong);
+  --salt-category-4-subtle-background: var(--salt-palette-categorical-4-weakest);
+  --salt-category-4-subtle-borderColor: var(--salt-palette-categorical-4);
+  --salt-category-4-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-4-bold-background: var(--salt-palette-categorical-4);
+  --salt-category-5-subtle-foreground: var(--salt-palette-categorical-5-strong);
+  --salt-category-5-subtle-background: var(--salt-palette-categorical-5-weakest);
+  --salt-category-5-subtle-borderColor: var(--salt-palette-categorical-5);
+  --salt-category-5-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-5-bold-background: var(--salt-palette-categorical-5);
+  --salt-category-6-subtle-foreground: var(--salt-palette-categorical-6-strong);
+  --salt-category-6-subtle-background: var(--salt-palette-categorical-6-weakest);
+  --salt-category-6-subtle-borderColor: var(--salt-palette-categorical-6);
+  --salt-category-6-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-6-bold-background: var(--salt-palette-categorical-6);
+  --salt-category-7-subtle-foreground: var(--salt-palette-categorical-7-strong);
+  --salt-category-7-subtle-background: var(--salt-palette-categorical-7-weakest);
+  --salt-category-7-subtle-borderColor: var(--salt-palette-categorical-7);
+  --salt-category-7-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-7-bold-background: var(--salt-palette-categorical-7);
+  --salt-category-8-subtle-foreground: var(--salt-palette-categorical-8-strong);
+  --salt-category-8-subtle-background: var(--salt-palette-categorical-8-weakest);
+  --salt-category-8-subtle-borderColor: var(--salt-palette-categorical-8);
+  --salt-category-8-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-8-bold-background: var(--salt-palette-categorical-8);
+  --salt-category-9-subtle-foreground: var(--salt-palette-categorical-9-strong);
+  --salt-category-9-subtle-background: var(--salt-palette-categorical-9-weakest);
+  --salt-category-9-subtle-borderColor: var(--salt-palette-categorical-9);
+  --salt-category-9-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-9-bold-background: var(--salt-palette-categorical-9);
+  --salt-category-10-subtle-foreground: var(--salt-palette-categorical-10-strong);
+  --salt-category-10-subtle-background: var(--salt-palette-categorical-10-weakest);
+  --salt-category-10-subtle-borderColor: var(--salt-palette-categorical-10);
+  --salt-category-10-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-10-bold-background: var(--salt-palette-categorical-10);
+  --salt-category-11-subtle-foreground: var(--salt-palette-categorical-11-strong);
+  --salt-category-11-subtle-background: var(--salt-palette-categorical-11-weakest);
+  --salt-category-11-subtle-borderColor: var(--salt-palette-categorical-11);
+  --salt-category-11-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-11-bold-background: var(--salt-palette-categorical-11);
+  --salt-category-12-subtle-foreground: var(--salt-palette-categorical-12-strong);
+  --salt-category-12-subtle-background: var(--salt-palette-categorical-12-weakest);
+  --salt-category-12-subtle-borderColor: var(--salt-palette-categorical-12);
+  --salt-category-12-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-12-bold-background: var(--salt-palette-categorical-12);
+  --salt-category-13-subtle-foreground: var(--salt-palette-categorical-13-strong);
+  --salt-category-13-subtle-background: var(--salt-palette-categorical-13-weakest);
+  --salt-category-13-subtle-borderColor: var(--salt-palette-categorical-13);
+  --salt-category-13-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-13-bold-background: var(--salt-palette-categorical-13);
+  --salt-category-14-subtle-foreground: var(--salt-palette-categorical-14-strong);
+  --salt-category-14-subtle-background: var(--salt-palette-categorical-14-weakest);
+  --salt-category-14-subtle-borderColor: var(--salt-palette-categorical-14);
+  --salt-category-14-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-14-bold-background: var(--salt-palette-categorical-14);
+  --salt-category-15-subtle-foreground: var(--salt-palette-categorical-15-strong);
+  --salt-category-15-subtle-background: var(--salt-palette-categorical-15-weakest);
+  --salt-category-15-subtle-borderColor: var(--salt-palette-categorical-15);
+  --salt-category-15-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-15-bold-background: var(--salt-palette-categorical-15);
+  --salt-category-16-subtle-foreground: var(--salt-palette-categorical-16-strong);
+  --salt-category-16-subtle-background: var(--salt-palette-categorical-16-weakest);
+  --salt-category-16-subtle-borderColor: var(--salt-palette-categorical-16);
+  --salt-category-16-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-16-bold-background: var(--salt-palette-categorical-16);
+  --salt-category-17-subtle-foreground: var(--salt-palette-categorical-17-strong);
+  --salt-category-17-subtle-background: var(--salt-palette-categorical-17-weakest);
+  --salt-category-17-subtle-borderColor: var(--salt-palette-categorical-17);
+  --salt-category-17-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-17-bold-background: var(--salt-palette-categorical-17);
+  --salt-category-18-subtle-foreground: var(--salt-palette-categorical-18-strong);
+  --salt-category-18-subtle-background: var(--salt-palette-categorical-18-weakest);
+  --salt-category-18-subtle-borderColor: var(--salt-palette-categorical-18);
+  --salt-category-18-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-18-bold-background: var(--salt-palette-categorical-18);
+  --salt-category-19-subtle-foreground: var(--salt-palette-categorical-19-strong);
+  --salt-category-19-subtle-background: var(--salt-palette-categorical-19-weakest);
+  --salt-category-19-subtle-borderColor: var(--salt-palette-categorical-19);
+  --salt-category-19-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-19-bold-background: var(--salt-palette-categorical-19);
+  --salt-category-20-subtle-foreground: var(--salt-palette-categorical-20-strong);
+  --salt-category-20-subtle-background: var(--salt-palette-categorical-20-weakest);
+  --salt-category-20-subtle-borderColor: var(--salt-palette-categorical-20);
+  --salt-category-20-bold-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-20-bold-background: var(--salt-palette-categorical-20);
+}
+
 /* css/characteristics/container.css */
 .salt-theme {
   --salt-container-borderStyle: solid;
@@ -1140,50 +1385,55 @@
   --salt-text-textAlign-embedded: center;
   --salt-text-textDecoration: none;
   --salt-text-textTransform: none;
+  --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
   --salt-text-action-letterSpacing: 0.6px;
   --salt-text-action-textTransform: uppercase;
   --salt-text-action-textAlign: center;
-  --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
   --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
-  --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
-  --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
-  --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
+  --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
+  --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
+  --salt-text-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
   --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
-  --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
-  --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
-  --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
+  --salt-text-notation-fontWeight: var(--salt-palette-text-notation-fontWeight);
+  --salt-text-notation-fontWeight-small: var(--salt-palette-text-notation-fontWeight-small);
+  --salt-text-notation-fontWeight-strong: var(--salt-palette-text-notation-fontWeight-strong);
   --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
-  --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
-  --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
-  --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
+  --salt-text-h1-fontWeight: var(--salt-palette-text-heading-fontWeight);
+  --salt-text-h1-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
+  --salt-text-h1-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
   --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
-  --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
-  --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
-  --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
+  --salt-text-h2-fontWeight: var(--salt-palette-text-heading-fontWeight);
+  --salt-text-h2-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
+  --salt-text-h2-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
   --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
-  --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
-  --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
-  --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
+  --salt-text-h3-fontWeight: var(--salt-palette-text-heading-fontWeight);
+  --salt-text-h3-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
+  --salt-text-h3-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
   --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
-  --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
-  --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
-  --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
+  --salt-text-h4-fontWeight: var(--salt-palette-text-heading-fontWeight);
+  --salt-text-h4-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
+  --salt-text-h4-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
   --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
-  --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
-  --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
-  --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
+  --salt-text-label-fontWeight: var(--salt-palette-text-body-fontWeight);
+  --salt-text-label-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
+  --salt-text-label-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
   --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
-  --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
-  --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
-  --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
+  --salt-text-display1-fontWeight: var(--salt-palette-text-display-fontWeight);
+  --salt-text-display1-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
+  --salt-text-display1-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
   --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
-  --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
-  --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
-  --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
+  --salt-text-display2-fontWeight: var(--salt-palette-text-display-fontWeight);
+  --salt-text-display2-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
+  --salt-text-display2-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
   --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
-  --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
-  --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
-  --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
+  --salt-text-display3-fontWeight: var(--salt-palette-text-display-fontWeight);
+  --salt-text-display3-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
+  --salt-text-display3-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
+  --salt-text-display4-fontFamily: var(--salt-palette-text-fontFamily-heading);
+  --salt-text-display4-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-text-display4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
+  --salt-text-display4-fontWeight-small: var(--salt-typography-fontWeight-regular);
   --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
 }
 .salt-density-touch {
@@ -1206,6 +1456,8 @@
   --salt-text-display2-lineHeight: 76px;
   --salt-text-display3-fontSize: 42px;
   --salt-text-display3-lineHeight: 54px;
+  --salt-text-display4-fontSize: 42px;
+  --salt-text-display4-lineHeight: 54px;
   --salt-text-notation-fontSize: 14px;
   --salt-text-notation-lineHeight: 18px;
 }
@@ -1229,6 +1481,8 @@
   --salt-text-display2-lineHeight: 60px;
   --salt-text-display3-fontSize: 32px;
   --salt-text-display3-lineHeight: 42px;
+  --salt-text-display4-fontSize: 32px;
+  --salt-text-display4-lineHeight: 42px;
   --salt-text-notation-fontSize: 12px;
   --salt-text-notation-lineHeight: 16px;
 }
@@ -1252,6 +1506,8 @@
   --salt-text-display2-lineHeight: 47px;
   --salt-text-display3-fontSize: 24px;
   --salt-text-display3-lineHeight: 32px;
+  --salt-text-display4-fontSize: 24px;
+  --salt-text-display4-lineHeight: 32px;
   --salt-text-notation-fontSize: 10px;
   --salt-text-notation-lineHeight: 13px;
 }
@@ -1275,6 +1531,8 @@
   --salt-text-display2-lineHeight: 36px;
   --salt-text-display3-fontSize: 18px;
   --salt-text-display3-lineHeight: 24px;
+  --salt-text-display4-fontSize: 18px;
+  --salt-text-display4-lineHeight: 24px;
   --salt-text-notation-fontSize: 8px;
   --salt-text-notation-lineHeight: 10px;
 }