@salt-ds/theme 1.33.0 → 1.34.0

package/index.css

@@ -26,6 +26,17 @@
   white-space: nowrap;
   border-width: 0;
 }
+.saltFocusVisible:after,
+.focused:focus:after,
+.focused:focus-visible:after {
+  content: "";
+  inset: var(--salt-focused-outlineInset);
+  outline-color: var(--salt-focused-outlineColor);
+  outline-offset: var(--salt-focused-outlineOffset);
+  outline-style: var(--salt-focused-outlineStyle);
+  outline-width: var(--salt-focused-outlineWidth);
+  position: absolute;
+}
 
 /* css/foundations/alpha.css */
 .salt-theme {
@@ -47,36 +58,6 @@
   --salt-color-black-50a: rgba(var(--salt-color-black-rgb), 0.5);
   --salt-color-black-65a: rgba(var(--salt-color-black-rgb), 0.65);
   --salt-color-black-80a: rgba(var(--salt-color-black-rgb), 0.8);
-  --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
-  --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
-  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
-  --salt-color-blue-500-40a: rgba(var(--salt-color-blue-500-rgb), 0.4);
-  --salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4);
-  --salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4);
-  --salt-color-gray-20-40a: rgba(var(--salt-color-gray-20-rgb), 0.4);
-  --salt-color-gray-30-40a: rgba(var(--salt-color-gray-30-rgb), 0.4);
-  --salt-color-gray-50-40a: rgba(var(--salt-color-gray-50-rgb), 0.4);
-  --salt-color-gray-60-40a: rgba(var(--salt-color-gray-60-rgb), 0.4);
-  --salt-color-gray-70-40a: rgba(var(--salt-color-gray-70-rgb), 0.4);
-  --salt-color-gray-90-15a: rgba(var(--salt-color-gray-90-rgb), 0.15);
-  --salt-color-gray-90-40a: rgba(var(--salt-color-gray-90-rgb), 0.4);
-  --salt-color-gray-200-15a: rgba(var(--salt-color-gray-200-rgb), 0.15);
-  --salt-color-gray-200-40a: rgba(var(--salt-color-gray-200-rgb), 0.4);
-  --salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4);
-  --salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);
-  --salt-color-gray-800-40a: rgba(var(--salt-color-gray-800-rgb), 0.4);
-  --salt-color-gray-900-40a: rgba(var(--salt-color-gray-900-rgb), 0.4);
-  --salt-color-green-200-40a: rgba(var(--salt-color-green-200-rgb), 0.4);
-  --salt-color-green-500-40a: rgba(var(--salt-color-green-500-rgb), 0.4);
-  --salt-color-green-600-40a: rgba(var(--salt-color-green-600-rgb), 0.4);
-  --salt-color-orange-400-40a: rgba(var(--salt-color-orange-400-rgb), 0.4);
-  --salt-color-orange-500-40a: rgba(var(--salt-color-orange-500-rgb), 0.4);
-  --salt-color-orange-600-40a: rgba(var(--salt-color-orange-600-rgb), 0.4);
-  --salt-color-orange-700-40a: rgba(var(--salt-color-orange-700-rgb), 0.4);
-  --salt-color-orange-850-40a: rgba(var(--salt-color-orange-850-rgb), 0.4);
-  --salt-color-red-200-40a: rgba(var(--salt-color-red-200-rgb), 0.4);
-  --salt-color-red-500-40a: rgba(var(--salt-color-red-500-rgb), 0.4);
-  --salt-color-red-600-40a: rgba(var(--salt-color-red-600-rgb), 0.4);
 }
 
 /* css/foundations/animation.css */
@@ -233,14 +214,248 @@
 
 /* css/foundations/color.css */
 .salt-theme {
-  --salt-color-white-rgb:
-    255,
-    255,
-    255;
   --salt-color-black-rgb:
     0,
     0,
     0;
+  --salt-color-white-rgb:
+    255,
+    255,
+    255;
+  --salt-color-black: rgb(var(--salt-color-black-rgb));
+  --salt-color-white: rgb(var(--salt-color-white-rgb));
+}
+
+/* css/foundations/cursor.css */
+.salt-theme {
+  --salt-cursor-active: pointer;
+  --salt-cursor-disabled: not-allowed;
+  --salt-cursor-drag-ew: ew-resize;
+  --salt-cursor-drag-ns: ns-resize;
+  --salt-cursor-grab: grab;
+  --salt-cursor-grab-active: grabbing;
+  --salt-cursor-hover: pointer;
+  --salt-cursor-pending: progress;
+  --salt-cursor-readonly: text;
+  --salt-cursor-text: text;
+}
+
+/* css/foundations/curve.css */
+.salt-density-high {
+  --salt-curve-0: 0;
+  --salt-curve-50: 1px;
+  --salt-curve-100: 2px;
+  --salt-curve-150: 3px;
+  --salt-curve-200: 4px;
+  --salt-curve-250: 5px;
+  --salt-curve-999: 999px;
+}
+.salt-density-medium {
+  --salt-curve-0: 0;
+  --salt-curve-50: 2px;
+  --salt-curve-100: 4px;
+  --salt-curve-150: 6px;
+  --salt-curve-200: 8px;
+  --salt-curve-250: 10px;
+  --salt-curve-999: 999px;
+}
+.salt-density-low {
+  --salt-curve-0: 0;
+  --salt-curve-50: 3px;
+  --salt-curve-100: 6px;
+  --salt-curve-150: 9px;
+  --salt-curve-200: 12px;
+  --salt-curve-250: 15px;
+  --salt-curve-999: 999px;
+}
+.salt-density-touch {
+  --salt-curve-0: 0;
+  --salt-curve-50: 4px;
+  --salt-curve-100: 8px;
+  --salt-curve-150: 12px;
+  --salt-curve-200: 16px;
+  --salt-curve-250: 20px;
+  --salt-curve-999: 999px;
+}
+
+/* css/foundations/duration.css */
+.salt-theme {
+  --salt-duration-instant: 0ms;
+  --salt-duration-perceptible: 300ms;
+  --salt-duration-notable: 1000ms;
+  --salt-duration-cutoff: 10000ms;
+}
+
+/* css/foundations/size.css */
+.salt-density-high {
+  --salt-size-adornment: 6px;
+  --salt-size-bar: 2px;
+  --salt-size-base: 20px;
+  --salt-size-icon: 10px;
+  --salt-size-indicator: 2px;
+  --salt-size-selectable: 12px;
+  --salt-size-bar-strong: 4px;
+}
+.salt-density-medium {
+  --salt-size-adornment: 8px;
+  --salt-size-bar: 4px;
+  --salt-size-base: 28px;
+  --salt-size-icon: 12px;
+  --salt-size-indicator: 3px;
+  --salt-size-selectable: 14px;
+  --salt-size-bar-strong: 8px;
+}
+.salt-density-low {
+  --salt-size-adornment: 10px;
+  --salt-size-bar: 6px;
+  --salt-size-base: 36px;
+  --salt-size-icon: 14px;
+  --salt-size-indicator: 4px;
+  --salt-size-selectable: 16px;
+  --salt-size-bar-strong: 12px;
+}
+.salt-density-touch {
+  --salt-size-adornment: 12px;
+  --salt-size-bar: 8px;
+  --salt-size-base: 44px;
+  --salt-size-icon: 16px;
+  --salt-size-indicator: 5px;
+  --salt-size-selectable: 18px;
+  --salt-size-bar-strong: 16px;
+}
+.salt-density-touch,
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high {
+  --salt-size-fixed-100: 1px;
+  --salt-size-fixed-200: 2px;
+  --salt-size-fixed-300: 3px;
+  --salt-size-fixed-400: 4px;
+  --salt-size-fixed-500: 5px;
+  --salt-size-fixed-600: 6px;
+  --salt-size-fixed-700: 7px;
+  --salt-size-fixed-800: 8px;
+  --salt-size-fixed-900: 9px;
+}
+
+/* css/foundations/spacing.css */
+.salt-density-touch {
+  --salt-spacing-100: 16px;
+}
+.salt-density-low {
+  --salt-spacing-100: 12px;
+}
+.salt-density-medium {
+  --salt-spacing-100: 8px;
+}
+.salt-density-high {
+  --salt-spacing-100: 4px;
+}
+.salt-density-touch,
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high {
+  --salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
+  --salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
+  --salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
+  --salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
+  --salt-spacing-200: calc(2 * var(--salt-spacing-100));
+  --salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
+  --salt-spacing-300: calc(3 * var(--salt-spacing-100));
+  --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
+  --salt-spacing-400: calc(4 * var(--salt-spacing-100));
+  --salt-spacing-450: calc(4.5 * var(--salt-spacing-100));
+  --salt-spacing-500: calc(5 * var(--salt-spacing-100));
+  --salt-spacing-550: calc(5.5 * var(--salt-spacing-100));
+  --salt-spacing-600: calc(6 * var(--salt-spacing-100));
+  --salt-spacing-650: calc(6.5 * var(--salt-spacing-100));
+  --salt-spacing-700: calc(7 * var(--salt-spacing-100));
+  --salt-spacing-750: calc(7.5 * var(--salt-spacing-100));
+  --salt-spacing-800: calc(8 * var(--salt-spacing-100));
+  --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
+  --salt-spacing-900: calc(9 * var(--salt-spacing-100));
+  --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
+  --salt-spacing-fixed-100: 1px;
+  --salt-spacing-fixed-200: 2px;
+  --salt-spacing-fixed-300: 3px;
+  --salt-spacing-fixed-400: 4px;
+  --salt-spacing-fixed-500: 5px;
+  --salt-spacing-fixed-600: 6px;
+  --salt-spacing-fixed-700: 7px;
+  --salt-spacing-fixed-800: 8px;
+  --salt-spacing-fixed-900: 9px;
+}
+
+/* css/foundations/typography.css */
+.salt-theme {
+  --salt-typography-fontFamily-openSans: "Open Sans";
+  --salt-typography-fontFamily-amplitude: "Amplitude";
+  --salt-typography-fontFamily-ptMono: "PT Mono";
+  --salt-typography-fontWeight-light: 300;
+  --salt-typography-fontWeight-regular: 400;
+  --salt-typography-fontWeight-medium: 500;
+  --salt-typography-fontWeight-semiBold: 600;
+  --salt-typography-fontWeight-bold: 700;
+  --salt-typography-fontWeight-extraBold: 800;
+  --salt-typography-textDecoration-none: none;
+  --salt-typography-textDecoration-underline: underline;
+  --salt-typography-textDecoration-italic: italic;
+}
+
+/* css/foundations/zindex.css */
+.salt-density-touch,
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high {
+  --salt-zIndex-default: 1;
+  --salt-zIndex-popout: 1000;
+  --salt-zIndex-appHeader: 1100;
+  --salt-zIndex-drawer: 1200;
+  --salt-zIndex-modal: 1300;
+  --salt-zIndex-notification: 1400;
+  --salt-zIndex-dragObject: 1420;
+  --salt-zIndex-contextMenu: 1450;
+  --salt-zIndex-flyover: 1500;
+}
+
+/* css/foundations/index.css */
+
+/* css/legacy/foundations/alpha.css */
+.salt-theme {
+  --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
+  --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
+  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
+  --salt-color-blue-500-40a: rgba(var(--salt-color-blue-500-rgb), 0.4);
+  --salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4);
+  --salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4);
+  --salt-color-gray-20-40a: rgba(var(--salt-color-gray-20-rgb), 0.4);
+  --salt-color-gray-30-40a: rgba(var(--salt-color-gray-30-rgb), 0.4);
+  --salt-color-gray-50-40a: rgba(var(--salt-color-gray-50-rgb), 0.4);
+  --salt-color-gray-60-40a: rgba(var(--salt-color-gray-60-rgb), 0.4);
+  --salt-color-gray-70-40a: rgba(var(--salt-color-gray-70-rgb), 0.4);
+  --salt-color-gray-90-15a: rgba(var(--salt-color-gray-90-rgb), 0.15);
+  --salt-color-gray-90-40a: rgba(var(--salt-color-gray-90-rgb), 0.4);
+  --salt-color-gray-200-15a: rgba(var(--salt-color-gray-200-rgb), 0.15);
+  --salt-color-gray-200-40a: rgba(var(--salt-color-gray-200-rgb), 0.4);
+  --salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4);
+  --salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);
+  --salt-color-gray-800-40a: rgba(var(--salt-color-gray-800-rgb), 0.4);
+  --salt-color-gray-900-40a: rgba(var(--salt-color-gray-900-rgb), 0.4);
+  --salt-color-green-200-40a: rgba(var(--salt-color-green-200-rgb), 0.4);
+  --salt-color-green-500-40a: rgba(var(--salt-color-green-500-rgb), 0.4);
+  --salt-color-green-600-40a: rgba(var(--salt-color-green-600-rgb), 0.4);
+  --salt-color-orange-400-40a: rgba(var(--salt-color-orange-400-rgb), 0.4);
+  --salt-color-orange-500-40a: rgba(var(--salt-color-orange-500-rgb), 0.4);
+  --salt-color-orange-600-40a: rgba(var(--salt-color-orange-600-rgb), 0.4);
+  --salt-color-orange-700-40a: rgba(var(--salt-color-orange-700-rgb), 0.4);
+  --salt-color-orange-850-40a: rgba(var(--salt-color-orange-850-rgb), 0.4);
+  --salt-color-red-200-40a: rgba(var(--salt-color-red-200-rgb), 0.4);
+  --salt-color-red-500-40a: rgba(var(--salt-color-red-500-rgb), 0.4);
+  --salt-color-red-600-40a: rgba(var(--salt-color-red-600-rgb), 0.4);
+}
+
+/* css/legacy/foundations/color.css */
+.salt-theme {
   --salt-color-red-10-rgb:
     255,
     227,
@@ -657,8 +872,6 @@
     22,
     22,
     22;
-  --salt-color-white: rgb(var(--salt-color-white-rgb));
-  --salt-color-black: rgb(var(--salt-color-black-rgb));
   --salt-color-red-10: rgb(var(--salt-color-red-10-rgb));
   --salt-color-red-20: rgb(var(--salt-color-red-20-rgb));
   --salt-color-red-30: rgb(var(--salt-color-red-30-rgb));
@@ -904,262 +1117,64 @@
   --salt-color-fuchsia-400: rgb(222, 109, 178);
   --salt-color-fuchsia-500: rgb(194, 71, 149);
   --salt-color-fuchsia-600: rgb(167, 54, 125);
-  --salt-color-fuchsia-700: rgb(140, 37, 101);
-  --salt-color-fuchsia-800: rgb(114, 19, 79);
-  --salt-color-fuchsia-900: rgb(89, 0, 57);
-  --salt-color-lime-100: rgb(239, 245, 220);
-  --salt-color-lime-200: rgb(215, 227, 168);
-  --salt-color-lime-300: rgb(182, 196, 120);
-  --salt-color-lime-400: rgb(146, 166, 71);
-  --salt-color-lime-500: rgb(102, 125, 21);
-  --salt-color-lime-600: rgb(85, 106, 16);
-  --salt-color-lime-700: rgb(69, 87, 11);
-  --salt-color-lime-800: rgb(53, 68, 6);
-  --salt-color-lime-900: rgb(36, 46, 0);
-  --salt-color-fur-100: rgb(255, 244, 235);
-  --salt-color-fur-200: rgb(245, 214, 191);
-  --salt-color-fur-300: rgb(219, 178, 147);
-  --salt-color-fur-400: rgb(194, 144, 107);
-  --salt-color-fur-500: rgb(153, 106, 69);
-  --salt-color-fur-600: rgb(130, 85, 52);
-  --salt-color-fur-700: rgb(107, 65, 36);
-  --salt-color-fur-800: rgb(85, 46, 20);
-  --salt-color-fur-900: rgb(64, 28, 0);
-  --salt-color-violet-100: rgb(237, 239, 255);
-  --salt-color-violet-200: rgb(202, 203, 252);
-  --salt-color-violet-300: rgb(167, 169, 235);
-  --salt-color-violet-400: rgb(134, 139, 219);
-  --salt-color-violet-500: rgb(99, 110, 191);
-  --salt-color-violet-600: rgb(81, 90, 159);
-  --salt-color-violet-700: rgb(63, 71, 128);
-  --salt-color-violet-800: rgb(47, 53, 99);
-  --salt-color-violet-900: rgb(31, 36, 71);
-  --salt-color-forest-100: rgb(237, 250, 245);
-  --salt-color-forest-200: rgb(188, 232, 211);
-  --salt-color-forest-300: rgb(141, 204, 174);
-  --salt-color-forest-400: rgb(91, 176, 136);
-  --salt-color-forest-500: rgb(35, 133, 94);
-  --salt-color-forest-600: rgb(25, 111, 77);
-  --salt-color-forest-700: rgb(15, 90, 61);
-  --salt-color-forest-800: rgb(6, 70, 46);
-  --salt-color-forest-900: rgb(0, 51, 31);
-}
-
-/* css/foundations/cursor.css */
-.salt-theme {
-  --salt-cursor-active: pointer;
-  --salt-cursor-disabled: not-allowed;
-  --salt-cursor-drag-ew: ew-resize;
-  --salt-cursor-drag-ns: ns-resize;
-  --salt-cursor-grab: grab;
-  --salt-cursor-grab-active: grabbing;
-  --salt-cursor-hover: pointer;
-  --salt-cursor-pending: progress;
-  --salt-cursor-readonly: text;
-  --salt-cursor-text: text;
-}
-
-/* css/foundations/curve.css */
-.salt-density-high {
-  --salt-curve-0: 0;
-  --salt-curve-50: 1px;
-  --salt-curve-100: 2px;
-  --salt-curve-150: 3px;
-  --salt-curve-200: 4px;
-  --salt-curve-250: 5px;
-  --salt-curve-999: 999px;
-}
-.salt-density-medium {
-  --salt-curve-0: 0;
-  --salt-curve-50: 2px;
-  --salt-curve-100: 4px;
-  --salt-curve-150: 6px;
-  --salt-curve-200: 8px;
-  --salt-curve-250: 10px;
-  --salt-curve-999: 999px;
-}
-.salt-density-low {
-  --salt-curve-0: 0;
-  --salt-curve-50: 3px;
-  --salt-curve-100: 6px;
-  --salt-curve-150: 9px;
-  --salt-curve-200: 12px;
-  --salt-curve-250: 15px;
-  --salt-curve-999: 999px;
-}
-.salt-density-touch {
-  --salt-curve-0: 0;
-  --salt-curve-50: 4px;
-  --salt-curve-100: 8px;
-  --salt-curve-150: 12px;
-  --salt-curve-200: 16px;
-  --salt-curve-250: 20px;
-  --salt-curve-999: 999px;
-}
-
-/* css/foundations/duration.css */
-.salt-theme {
-  --salt-duration-instant: 0ms;
-  --salt-duration-perceptible: 300ms;
-  --salt-duration-notable: 1000ms;
-  --salt-duration-cutoff: 10000ms;
+  --salt-color-fuchsia-700: rgb(140, 37, 101);
+  --salt-color-fuchsia-800: rgb(114, 19, 79);
+  --salt-color-fuchsia-900: rgb(89, 0, 57);
+  --salt-color-lime-100: rgb(239, 245, 220);
+  --salt-color-lime-200: rgb(215, 227, 168);
+  --salt-color-lime-300: rgb(182, 196, 120);
+  --salt-color-lime-400: rgb(146, 166, 71);
+  --salt-color-lime-500: rgb(102, 125, 21);
+  --salt-color-lime-600: rgb(85, 106, 16);
+  --salt-color-lime-700: rgb(69, 87, 11);
+  --salt-color-lime-800: rgb(53, 68, 6);
+  --salt-color-lime-900: rgb(36, 46, 0);
+  --salt-color-fur-100: rgb(255, 244, 235);
+  --salt-color-fur-200: rgb(245, 214, 191);
+  --salt-color-fur-300: rgb(219, 178, 147);
+  --salt-color-fur-400: rgb(194, 144, 107);
+  --salt-color-fur-500: rgb(153, 106, 69);
+  --salt-color-fur-600: rgb(130, 85, 52);
+  --salt-color-fur-700: rgb(107, 65, 36);
+  --salt-color-fur-800: rgb(85, 46, 20);
+  --salt-color-fur-900: rgb(64, 28, 0);
+  --salt-color-violet-100: rgb(237, 239, 255);
+  --salt-color-violet-200: rgb(202, 203, 252);
+  --salt-color-violet-300: rgb(167, 169, 235);
+  --salt-color-violet-400: rgb(134, 139, 219);
+  --salt-color-violet-500: rgb(99, 110, 191);
+  --salt-color-violet-600: rgb(81, 90, 159);
+  --salt-color-violet-700: rgb(63, 71, 128);
+  --salt-color-violet-800: rgb(47, 53, 99);
+  --salt-color-violet-900: rgb(31, 36, 71);
+  --salt-color-forest-100: rgb(237, 250, 245);
+  --salt-color-forest-200: rgb(188, 232, 211);
+  --salt-color-forest-300: rgb(141, 204, 174);
+  --salt-color-forest-400: rgb(91, 176, 136);
+  --salt-color-forest-500: rgb(35, 133, 94);
+  --salt-color-forest-600: rgb(25, 111, 77);
+  --salt-color-forest-700: rgb(15, 90, 61);
+  --salt-color-forest-800: rgb(6, 70, 46);
+  --salt-color-forest-900: rgb(0, 51, 31);
 }
 
-/* css/foundations/shadow.css */
+/* css/legacy/palette/accent.css */
 .salt-theme[data-mode=light] {
-  --salt-shadow-100-color: rgba(0, 0, 0, 0.1);
-  --salt-shadow-200-color: rgba(0, 0, 0, 0.1);
-  --salt-shadow-300-color: rgba(0, 0, 0, 0.15);
-  --salt-shadow-400-color: rgba(0, 0, 0, 0.2);
-  --salt-shadow-500-color: rgba(0, 0, 0, 0.3);
+  --salt-palette-accent: var(--salt-color-blue-500);
+  --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
+  --salt-palette-accent-foreground: var(--salt-color-white);
+  --salt-palette-accent-foreground-informative: var(--salt-color-blue-600);
+  --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-600-40a);
 }
 .salt-theme[data-mode=dark] {
-  --salt-shadow-100-color: rgba(0, 0, 0, 0.5);
-  --salt-shadow-200-color: rgba(0, 0, 0, 0.5);
-  --salt-shadow-300-color: rgba(0, 0, 0, 0.55);
-  --salt-shadow-400-color: rgba(0, 0, 0, 0.55);
-  --salt-shadow-500-color: rgba(0, 0, 0, 0.65);
-}
-.salt-theme {
-  --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
-  --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
-  --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
-  --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
-  --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
-}
-
-/* css/foundations/size.css */
-.salt-density-high {
-  --salt-size-adornment: 6px;
-  --salt-size-bar: 2px;
-  --salt-size-base: 20px;
-  --salt-size-icon: 10px;
-  --salt-size-indicator: 2px;
-  --salt-size-selectable: 12px;
-  --salt-size-bar-strong: 4px;
-}
-.salt-density-medium {
-  --salt-size-adornment: 8px;
-  --salt-size-bar: 4px;
-  --salt-size-base: 28px;
-  --salt-size-icon: 12px;
-  --salt-size-indicator: 3px;
-  --salt-size-selectable: 14px;
-  --salt-size-bar-strong: 8px;
-}
-.salt-density-low {
-  --salt-size-adornment: 10px;
-  --salt-size-bar: 6px;
-  --salt-size-base: 36px;
-  --salt-size-icon: 14px;
-  --salt-size-indicator: 4px;
-  --salt-size-selectable: 16px;
-  --salt-size-bar-strong: 12px;
-}
-.salt-density-touch {
-  --salt-size-adornment: 12px;
-  --salt-size-bar: 8px;
-  --salt-size-base: 44px;
-  --salt-size-icon: 16px;
-  --salt-size-indicator: 5px;
-  --salt-size-selectable: 18px;
-  --salt-size-bar-strong: 16px;
-}
-.salt-density-touch,
-.salt-density-low,
-.salt-density-medium,
-.salt-density-high {
-  --salt-size-fixed-100: 1px;
-  --salt-size-fixed-200: 2px;
-  --salt-size-fixed-300: 3px;
-  --salt-size-fixed-400: 4px;
-  --salt-size-fixed-500: 5px;
-  --salt-size-fixed-600: 6px;
-  --salt-size-fixed-700: 7px;
-  --salt-size-fixed-800: 8px;
-  --salt-size-fixed-900: 9px;
-}
-
-/* css/foundations/spacing.css */
-.salt-density-touch {
-  --salt-spacing-100: 16px;
-}
-.salt-density-low {
-  --salt-spacing-100: 12px;
-}
-.salt-density-medium {
-  --salt-spacing-100: 8px;
-}
-.salt-density-high {
-  --salt-spacing-100: 4px;
-}
-.salt-density-touch,
-.salt-density-low,
-.salt-density-medium,
-.salt-density-high {
-  --salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
-  --salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
-  --salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
-  --salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
-  --salt-spacing-200: calc(2 * var(--salt-spacing-100));
-  --salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
-  --salt-spacing-300: calc(3 * var(--salt-spacing-100));
-  --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
-  --salt-spacing-400: calc(4 * var(--salt-spacing-100));
-  --salt-spacing-450: calc(4.5 * var(--salt-spacing-100));
-  --salt-spacing-500: calc(5 * var(--salt-spacing-100));
-  --salt-spacing-550: calc(5.5 * var(--salt-spacing-100));
-  --salt-spacing-600: calc(6 * var(--salt-spacing-100));
-  --salt-spacing-650: calc(6.5 * var(--salt-spacing-100));
-  --salt-spacing-700: calc(7 * var(--salt-spacing-100));
-  --salt-spacing-750: calc(7.5 * var(--salt-spacing-100));
-  --salt-spacing-800: calc(8 * var(--salt-spacing-100));
-  --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
-  --salt-spacing-900: calc(9 * var(--salt-spacing-100));
-  --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
-  --salt-spacing-fixed-100: 1px;
-  --salt-spacing-fixed-200: 2px;
-  --salt-spacing-fixed-300: 3px;
-  --salt-spacing-fixed-400: 4px;
-  --salt-spacing-fixed-500: 5px;
-  --salt-spacing-fixed-600: 6px;
-  --salt-spacing-fixed-700: 7px;
-  --salt-spacing-fixed-800: 8px;
-  --salt-spacing-fixed-900: 9px;
-}
-
-/* css/foundations/typography.css */
-.salt-theme {
-  --salt-typography-fontFamily-openSans: "Open Sans";
-  --salt-typography-fontFamily-amplitude: "Amplitude";
-  --salt-typography-fontFamily-ptMono: "PT Mono";
-  --salt-typography-fontWeight-light: 300;
-  --salt-typography-fontWeight-regular: 400;
-  --salt-typography-fontWeight-medium: 500;
-  --salt-typography-fontWeight-semiBold: 600;
-  --salt-typography-fontWeight-bold: 700;
-  --salt-typography-fontWeight-extraBold: 800;
-  --salt-typography-textDecoration-none: none;
-  --salt-typography-textDecoration-underline: underline;
-}
-
-/* css/foundations/zindex.css */
-.salt-density-touch,
-.salt-density-low,
-.salt-density-medium,
-.salt-density-high {
-  --salt-zIndex-default: 1;
-  --salt-zIndex-popout: 1000;
-  --salt-zIndex-appHeader: 1100;
-  --salt-zIndex-drawer: 1200;
-  --salt-zIndex-modal: 1300;
-  --salt-zIndex-notification: 1400;
-  --salt-zIndex-dragObject: 1420;
-  --salt-zIndex-contextMenu: 1450;
-  --salt-zIndex-flyover: 1500;
+  --salt-palette-accent: var(--salt-color-blue-500);
+  --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
+  --salt-palette-accent-foreground: var(--salt-color-white);
+  --salt-palette-accent-foreground-informative: var(--salt-color-blue-200);
+  --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-200-40a);
 }
 
-/* css/palette/alpha.css */
+/* css/legacy/palette/alpha.css */
 .salt-theme[data-mode=light] {
   --salt-palette-alpha-highest: var(--salt-color-white-80a);
   --salt-palette-alpha-higher: var(--salt-color-white-65a);
@@ -1203,41 +1218,7 @@
   --salt-palette-alpha-none: transparent;
 }
 
-/* css/palette/accent.css */
-.salt-theme[data-mode=light] {
-  --salt-palette-accent: var(--salt-color-blue-500);
-  --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
-  --salt-palette-accent-foreground: var(--salt-color-white);
-  --salt-palette-accent-foreground-informative: var(--salt-color-blue-600);
-  --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-600-40a);
-}
-.salt-theme[data-mode=dark] {
-  --salt-palette-accent: var(--salt-color-blue-500);
-  --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
-  --salt-palette-accent-foreground: var(--salt-color-white);
-  --salt-palette-accent-foreground-informative: var(--salt-color-blue-200);
-  --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-200-40a);
-}
-
-/* css/palette/error.css */
-.salt-theme[data-mode=light] {
-  --salt-palette-error-background: var(--salt-color-red-10);
-  --salt-palette-error-bold-background: var(--salt-color-red-500);
-  --salt-palette-error-background-selected: var(--salt-color-red-30);
-  --salt-palette-error-border: var(--salt-color-red-500);
-  --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
-  --salt-palette-error-foreground-informative: var(--salt-color-red-600);
-}
-.salt-theme[data-mode=dark] {
-  --salt-palette-error-background: var(--salt-color-red-900);
-  --salt-palette-error-bold-background: var(--salt-color-red-500);
-  --salt-palette-error-background-selected: var(--salt-color-red-800);
-  --salt-palette-error-border: var(--salt-color-red-400);
-  --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
-  --salt-palette-error-foreground-informative: var(--salt-color-red-200);
-}
-
-/* css/palette/categorical.css */
+/* css/legacy/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);
@@ -1363,7 +1344,7 @@
   --salt-palette-categorical-20-weakest: var(--salt-color-forest-900);
 }
 
-/* css/palette/corner.css */
+/* css/legacy/palette/corner.css */
 .salt-theme {
   --salt-palette-corner-weaker: var(--salt-curve-0);
   --salt-palette-corner-weak: var(--salt-curve-0);
@@ -1373,7 +1354,25 @@
   --salt-palette-corner-strongest: var(--salt-curve-999);
 }
 
-/* css/palette/info.css */
+/* css/legacy/palette/error.css */
+.salt-theme[data-mode=light] {
+  --salt-palette-error-background: var(--salt-color-red-10);
+  --salt-palette-error-bold-background: var(--salt-color-red-500);
+  --salt-palette-error-background-selected: var(--salt-color-red-30);
+  --salt-palette-error-border: var(--salt-color-red-500);
+  --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
+  --salt-palette-error-foreground-informative: var(--salt-color-red-600);
+}
+.salt-theme[data-mode=dark] {
+  --salt-palette-error-background: var(--salt-color-red-900);
+  --salt-palette-error-bold-background: var(--salt-color-red-500);
+  --salt-palette-error-background-selected: var(--salt-color-red-800);
+  --salt-palette-error-border: var(--salt-color-red-400);
+  --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
+  --salt-palette-error-foreground-informative: var(--salt-color-red-200);
+}
+
+/* css/legacy/palette/info.css */
 .salt-theme[data-mode=light] {
   --salt-palette-info-background: var(--salt-color-blue-10);
   --salt-palette-info-bold-background: var(--salt-color-blue-500);
@@ -1389,7 +1388,7 @@
   --salt-palette-info-foreground-informative: var(--salt-color-blue-200);
 }
 
-/* css/palette/interact.css */
+/* css/legacy/palette/interact.css */
 .salt-theme[data-mode=light] {
   --salt-palette-interact-background-hover: var(--salt-color-blue-10);
   --salt-palette-interact-background-active: var(--salt-color-blue-30);
@@ -1469,7 +1468,7 @@
   --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
 }
 
-/* css/palette/navigate.css */
+/* css/legacy/palette/navigate.css */
 .salt-theme[data-mode=light] {
   --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
   --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
@@ -1481,7 +1480,7 @@
   --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
 }
 
-/* css/palette/negative.css */
+/* css/legacy/palette/negative.css */
 .salt-theme[data-mode=light] {
   --salt-palette-negative-foreground: var(--salt-color-red-600);
   --salt-palette-negative-foreground-disabled: var(--salt-color-red-600-40a);
@@ -1503,7 +1502,7 @@
   --salt-palette-negative-border-disabled: var(--salt-color-red-500-40a);
 }
 
-/* css/palette/neutral.css */
+/* css/legacy/palette/neutral.css */
 .salt-theme[data-mode=light] {
   --salt-palette-neutral-border: var(--salt-color-gray-50);
   --salt-palette-neutral-border-disabled: var(--salt-color-gray-50-40a);
@@ -1533,7 +1532,7 @@
   --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-40a);
 }
 
-/* css/palette/positive.css */
+/* css/legacy/palette/positive.css */
 .salt-theme[data-mode=light] {
   --salt-palette-positive-foreground: var(--salt-color-green-600);
   --salt-palette-positive-foreground-disabled: var(--salt-color-green-600-40a);
@@ -1555,7 +1554,23 @@
   --salt-palette-positive-border-disabled: var(--salt-color-green-500-40a);
 }
 
-/* css/palette/success.css */
+/* css/legacy/palette/shadow.css */
+.salt-theme[data-mode=light] {
+  --salt-shadow-lowest: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  --salt-shadow-lower: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --salt-shadow-low: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
+  --salt-shadow-mediumLow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
+  --salt-shadow-medium: 0 12px 40px 0 rgba(0, 0, 0, 0.3);
+}
+.salt-theme[data-mode=dark] {
+  --salt-shadow-lowest: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  --salt-shadow-lower: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+  --salt-shadow-low: 0 4px 8px 0 rgba(0, 0, 0, 0.55);
+  --salt-shadow-mediumLow: 0 6px 10px 0 rgba(0, 0, 0, 0.55);
+  --salt-shadow-medium: 0 12px 40px 0 rgba(0, 0, 0, 0.65);
+}
+
+/* css/legacy/palette/success.css */
 .salt-theme[data-mode=light] {
   --salt-palette-success-background: var(--salt-color-green-10);
   --salt-palette-success-bold-background: var(--salt-color-green-500);
@@ -1573,7 +1588,7 @@
   --salt-palette-success-foreground-informative: var(--salt-color-green-200);
 }
 
-/* css/palette/text.css */
+/* css/legacy/palette/text.css */
 .salt-theme {
   --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
   --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
@@ -1596,7 +1611,7 @@
   --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
 }
 
-/* css/palette/warning.css */
+/* css/legacy/palette/warning.css */
 .salt-theme[data-mode=light] {
   --salt-palette-warning-background: var(--salt-color-orange-10);
   --salt-palette-warning-bold-background: var(--salt-color-orange-800);
@@ -1630,7 +1645,7 @@
   --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-40a);
 }
 
-/* css/characteristics/accent.css */
+/* css/legacy/characteristics/accent.css */
 .salt-theme {
   --salt-accent-background: var(--salt-palette-accent);
   --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
@@ -1639,7 +1654,7 @@
   --salt-accent-foreground: var(--salt-palette-accent-foreground);
 }
 
-/* css/characteristics/actionable.css */
+/* css/legacy/characteristics/actionable.css */
 .salt-theme {
   --salt-actionable-accented-bold-background-active: var(--salt-palette-interact-cta-background-active);
   --salt-actionable-accented-bold-background-disabled: var(--salt-palette-interact-cta-background-disabled);
@@ -1823,7 +1838,7 @@
   --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-foreground-informative);
 }
 
-/* css/characteristics/category.css */
+/* css/legacy/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);
@@ -1927,7 +1942,7 @@
   --salt-category-20-bold-background: var(--salt-palette-categorical-20);
 }
 
-/* css/characteristics/container.css */
+/* css/legacy/characteristics/container.css */
 .salt-theme {
   --salt-container-primary-background: var(--salt-palette-neutral-primary-background);
   --salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
@@ -1945,13 +1960,23 @@
   --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-medium);
 }
 
-/* css/characteristics/target.css */
+/* css/legacy/characteristics/content.css */
 .salt-theme {
-  --salt-target-background-hover: var(--salt-palette-interact-background-hover);
-  --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
+  --salt-content-primary-foreground: var(--salt-palette-neutral-primary-foreground);
+  --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
+  --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
+  --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
+  --salt-content-accent-foreground: var(--salt-palette-accent-foreground-informative);
+  --salt-content-attention-foreground: var(--salt-palette-negative-foreground);
+  --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
+  --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
+  --salt-content-foreground-hover: var(--salt-palette-accent-foreground-informative);
+  --salt-content-foreground-active: var(--salt-palette-accent-foreground-informative);
+  --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
+  --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
 }
 
-/* css/characteristics/editable.css */
+/* css/legacy/characteristics/editable.css */
 .salt-theme {
   --salt-editable-borderColor: var(--salt-palette-interact-border);
   --salt-editable-borderColor-active: var(--salt-palette-interact-border-active);
@@ -1968,10 +1993,9 @@
   --salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
   --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
   --salt-editable-secondary-background-readonly: var(--salt-palette-alpha-none);
-  --salt-editable-help-fontStyle: italic;
 }
 
-/* css/characteristics/focused.css */
+/* css/legacy/characteristics/focused.css */
 .salt-theme {
   --salt-focused-outlineColor: var(--salt-palette-interact-outline);
   --salt-focused-outlineStyle: var(--salt-borderStyle-dotted);
@@ -1980,19 +2004,8 @@
   --salt-focused-outlineOffset: 0;
   --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
 }
-.saltFocusVisible:after,
-.focused:focus:after,
-.focused:focus-visible:after {
-  content: "";
-  inset: var(--salt-focused-outlineInset);
-  outline-color: var(--salt-focused-outlineColor);
-  outline-offset: var(--salt-focused-outlineOffset);
-  outline-style: var(--salt-focused-outlineStyle);
-  outline-width: var(--salt-focused-outlineWidth);
-  position: absolute;
-}
 
-/* css/characteristics/navigable.css */
+/* css/legacy/characteristics/navigable.css */
 .salt-theme {
   --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
   --salt-navigable-accent-indicator-active: var(--salt-palette-navigate-indicator-active);
@@ -2000,22 +2013,22 @@
   --salt-navigable-accent-borderColor-active: var(--salt-palette-interact-border-active);
 }
 
-/* css/characteristics/overlayable.css */
+/* css/legacy/characteristics/overlayable.css */
 .salt-theme {
-  --salt-overlayable-shadow-scroll: var(--salt-shadow-100);
-  --salt-overlayable-shadow-region: var(--salt-shadow-200);
-  --salt-overlayable-shadow: var(--salt-shadow-200);
-  --salt-overlayable-shadow-hover: var(--salt-shadow-300);
-  --salt-overlayable-shadow-popout: var(--salt-shadow-400);
-  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
-  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
+  --salt-overlayable-shadow-scroll: var(--salt-shadow-lowest);
+  --salt-overlayable-shadow-region: var(--salt-shadow-lower);
+  --salt-overlayable-shadow: var(--salt-shadow-lower);
+  --salt-overlayable-shadow-hover: var(--salt-shadow-low);
+  --salt-overlayable-shadow-popout: var(--salt-shadow-mediumLow);
+  --salt-overlayable-shadow-drag: var(--salt-shadow-mediumLow);
+  --salt-overlayable-shadow-modal: var(--salt-shadow-medium);
   --salt-overlayable-background: var(--salt-palette-alpha-higher);
   --salt-overlayable-background-hover: var(--salt-palette-alpha-contrast-lowest);
   --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
   --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
 }
 
-/* css/characteristics/selectable.css */
+/* css/legacy/characteristics/selectable.css */
 .salt-theme {
   --salt-selectable-borderColor: var(--salt-palette-interact-border);
   --salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
@@ -2035,7 +2048,7 @@
   --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
 }
 
-/* css/characteristics/sentiment.css */
+/* css/legacy/characteristics/sentiment.css */
 .salt-theme {
   --salt-sentiment-negative-foreground-informative: var(--salt-palette-negative-foreground);
   --salt-sentiment-positive-foreground-informative: var(--salt-palette-positive-foreground);
@@ -2045,7 +2058,7 @@
   --salt-sentiment-neutral-track-disabled: var(--salt-palette-neutral-border-disabled);
 }
 
-/* css/characteristics/separable.css */
+/* css/legacy/characteristics/separable.css */
 .salt-theme {
   --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumHigh);
   --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
@@ -2058,7 +2071,7 @@
   --salt-separable-background-active: var(--salt-palette-accent);
 }
 
-/* css/characteristics/status.css */
+/* css/legacy/characteristics/status.css */
 .salt-theme {
   --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
   --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
@@ -2085,7 +2098,13 @@
   --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
 }
 
-/* css/characteristics/text.css */
+/* css/legacy/characteristics/target.css */
+.salt-theme {
+  --salt-target-background-hover: var(--salt-palette-interact-background-hover);
+  --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
+}
+
+/* css/legacy/characteristics/text.css */
 .salt-theme {
   --salt-text-letterSpacing: 0;
   --salt-text-textAlign: left;
@@ -2219,77 +2238,263 @@
   --salt-text-notation-lineHeight: 13px;
 }
 .salt-density-high {
-  --salt-text-h1-fontSize: 18px;
-  --salt-text-h1-lineHeight: 24px;
-  --salt-text-h2-fontSize: 14px;
-  --salt-text-h2-lineHeight: 18px;
-  --salt-text-h3-fontSize: 12px;
-  --salt-text-h3-lineHeight: 16px;
-  --salt-text-h4-fontSize: 11px;
-  --salt-text-h4-lineHeight: 14px;
-  --salt-text-label-fontSize: 10px;
-  --salt-text-label-lineHeight: 13px;
-  --salt-text-fontSize: 11px;
-  --salt-text-lineHeight: 14px;
-  --salt-text-minHeight: 14px;
-  --salt-text-display1-fontSize: 42px;
-  --salt-text-display1-lineHeight: 54px;
-  --salt-text-display2-fontSize: 28px;
-  --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;
+  --salt-text-h1-fontSize: 18px;
+  --salt-text-h1-lineHeight: 24px;
+  --salt-text-h2-fontSize: 14px;
+  --salt-text-h2-lineHeight: 18px;
+  --salt-text-h3-fontSize: 12px;
+  --salt-text-h3-lineHeight: 16px;
+  --salt-text-h4-fontSize: 11px;
+  --salt-text-h4-lineHeight: 14px;
+  --salt-text-label-fontSize: 10px;
+  --salt-text-label-lineHeight: 13px;
+  --salt-text-fontSize: 11px;
+  --salt-text-lineHeight: 14px;
+  --salt-text-minHeight: 14px;
+  --salt-text-display1-fontSize: 42px;
+  --salt-text-display1-lineHeight: 54px;
+  --salt-text-display2-fontSize: 28px;
+  --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;
+}
+
+/* css/deprecated/foundations.css */
+.salt-theme {
+  --salt-delay-instant: 100ms;
+  --salt-delay-perceptible: 300ms;
+  --salt-delay-notable: 1000ms;
+  --salt-delay-cutoff: 10000ms;
+  --salt-size-icon-base: var(--salt-icon-size-base);
+  --salt-opacity-1: 0.15;
+  --salt-opacity-2: 0.25;
+  --salt-opacity-3: 0.4;
+  --salt-opacity-4: 0.7;
+  --salt-opacity-8: 0.08;
+  --salt-opacity-0: 0;
+  --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;
+  --salt-shadow-0: none;
+  --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
+  --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
+  --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
+  --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
+  --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
+  --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
+  --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
+  --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
+  --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
+  --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
+  --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
+  --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
+  --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
+  --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
+  --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
+  --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
+  --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
+  --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
+  --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
+  --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
+  --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
+  --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
+}
+.salt-theme[data-mode=light] {
+  --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
+  --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
+  --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
+  --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
+  --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
+  --salt-shadow-100-color: rgba(0, 0, 0, 0.1);
+  --salt-shadow-200-color: rgba(0, 0, 0, 0.1);
+  --salt-shadow-300-color: rgba(0, 0, 0, 0.15);
+  --salt-shadow-400-color: rgba(0, 0, 0, 0.2);
+  --salt-shadow-500-color: rgba(0, 0, 0, 0.3);
+}
+.salt-theme[data-mode=dark] {
+  --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
+  --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
+  --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
+  --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
+  --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
+  --salt-shadow-100-color: rgba(0, 0, 0, 0.5);
+  --salt-shadow-200-color: rgba(0, 0, 0, 0.5);
+  --salt-shadow-300-color: rgba(0, 0, 0, 0.55);
+  --salt-shadow-400-color: rgba(0, 0, 0, 0.55);
+  --salt-shadow-500-color: rgba(0, 0, 0, 0.65);
+}
+.salt-density-touch,
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high {
+  --salt-size-selection: var(--salt-size-selectable);
+  --salt-size-brandBar: 4px;
+  --salt-size-graphic-small: 12px;
+  --salt-size-graphic-medium: 24px;
+  --salt-size-graphic-large: 48px;
+  --salt-size-divider-height: var(--salt-size-separator-height);
+  --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
+  --salt-size-detail: var(--salt-size-compact);
+  --salt-size-basis-unit: 4px;
+  --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
+  --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
+  --salt-size-separator-strokeWidth: 1px;
+  --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
+  --salt-size-sharktooth-height: 5px;
+  --salt-size-sharktooth-width: 10px;
+  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
+  --salt-size-border: 1px;
+  --salt-size-bar-small: 2px;
+  --salt-size-border-strong: 2px;
+  --salt-zIndex-docked: 1050;
+}
+.salt-density-high {
+  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
+  --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
+  --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
+  --salt-icon-size-base: 10px;
+  --salt-icon-size-status-adornment: 6px;
+}
+.salt-density-medium {
+  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
+  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
+  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
+  --salt-icon-size-base: 12px;
+  --salt-icon-size-status-adornment: 8px;
+}
+.salt-density-low {
+  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
+  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
+  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
+  --salt-icon-size-base: 14px;
+  --salt-icon-size-status-adornment: 10px;
+}
+.salt-density-touch {
+  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
+  --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
+  --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
+  --salt-icon-size-base: 16px;
+  --salt-icon-size-status-adornment: 12px;
+}
+
+/* css/deprecated/characteristics.css */
+.salt-theme {
+  --salt-container-borderStyle: solid;
+  --salt-editable-borderStyle: solid;
+  --salt-editable-borderStyle-hover: solid;
+  --salt-editable-borderStyle-active: solid;
+  --salt-editable-borderStyle-disabled: solid;
+  --salt-editable-borderStyle-readonly: solid;
+  --salt-editable-cursor-hover: text;
+  --salt-editable-cursor-active: text;
+  --salt-editable-cursor-disabled: not-allowed;
+  --salt-editable-cursor-readonly: text;
+  --salt-editable-borderWidth-active: 2px;
+  --salt-editable-help-fontStyle: italic;
+  --salt-measured-borderStyle: solid;
+  --salt-measured-borderStyle-active: solid;
+  --salt-measured-borderStyle-complete: solid;
+  --salt-measured-borderStyle-incomplete: dotted;
+  --salt-measured-borderWidth: 2px;
+  --salt-measured-borderWidth-active: 2px;
+  --salt-measured-borderWidth-complete: 2px;
+  --salt-measured-borderWidth-incomplete: 2px;
+  --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-measured-textAlign: center;
+  --salt-selectable-borderStyle: solid;
+  --salt-selectable-borderStyle-hover: solid;
+  --salt-selectable-borderStyle-selected: solid;
+  --salt-selectable-borderStyle-blurSelected: solid;
+  --salt-selectable-cursor-hover: pointer;
+  --salt-selectable-cursor-selected: pointer;
+  --salt-selectable-cursor-blurSelected: pointer;
+  --salt-selectable-cursor-disabled: not-allowed;
+  --salt-selectable-cursor-readonly: not-allowed;
+  --salt-separable-borderStyle: solid;
+  --salt-draggable-horizontal-cursor-hover: row-resize;
+  --salt-draggable-horizontal-cursor-active: row-resize;
+  --salt-draggable-vertical-cursor-hover: col-resize;
+  --salt-draggable-vertical-cursor-active: col-resize;
+  --salt-draggable-grab-cursor-hover: grab;
+  --salt-draggable-grab-cursor-active: grabbing;
+  --salt-actionable-cursor-hover: pointer;
+  --salt-actionable-cursor-active: pointer;
+  --salt-actionable-cursor-disabled: not-allowed;
+  --salt-actionable-letterSpacing: 0.6px;
+  --salt-actionable-textTransform: uppercase;
+  --salt-actionable-textAlign: center;
+  --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
+  --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
+  --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-target-cursor-disabled: not-allowed;
+  --salt-target-borderStyle: dashed;
+  --salt-target-borderStyle-hover: solid;
+  --salt-target-borderStyle-disabled: dashed;
+  --salt-text-link-textDecoration: underline;
+  --salt-text-link-textDecoration-hover: none;
+  --salt-text-link-textDecoration-selected: underline;
+  --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
+  --salt-text-textTransform: none;
+  --salt-navigable-cursor-active: pointer;
+  --salt-navigable-cursor-hover: pointer;
+  --salt-navigable-cursor-disabled: not-allowed;
+  --salt-navigable-cursor-edit: text;
+  --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
+  --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
+  --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
+  --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
+  --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
+  --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
+  --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
+  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-track-borderStyle: solid;
+  --salt-track-borderStyle-active: solid;
+  --salt-track-borderStyle-complete: solid;
+  --salt-track-borderStyle-incomplete: dotted;
+  --salt-track-borderWidth: 2px;
+  --salt-track-borderWidth-active: 2px;
+  --salt-track-borderWidth-complete: 2px;
+  --salt-track-borderWidth-incomplete: 2px;
+  --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-track-textAlign: center;
+  --salt-taggable-cursor-hover: pointer;
+  --salt-taggable-cursor-active: pointer;
+  --salt-taggable-cursor-disabled: not-allowed;
+  --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
+  --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
+}
+.salt-density-high {
+  --salt-accent-fontSize: 8px;
+  --salt-accent-lineHeight: 11px;
 }
-
-/* css/characteristics/content.css */
-.salt-theme {
-  --salt-content-primary-foreground: var(--salt-palette-neutral-primary-foreground);
-  --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
-  --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
-  --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
-  --salt-content-accent-foreground: var(--salt-palette-accent-foreground-informative);
-  --salt-content-attention-foreground: var(--salt-palette-negative-foreground);
-  --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
-  --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
-  --salt-content-foreground-hover: var(--salt-palette-accent-foreground-informative);
-  --salt-content-foreground-active: var(--salt-palette-accent-foreground-informative);
-  --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
-  --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
+.salt-density-medium {
+  --salt-accent-fontSize: 10px;
+  --salt-accent-lineHeight: 13px;
+}
+.salt-density-low {
+  --salt-accent-fontSize: 12px;
+  --salt-accent-lineHeight: 16px;
+}
+.salt-density-touch {
+  --salt-accent-fontSize: 14px;
+  --salt-accent-lineHeight: 18px;
 }
 
-/* css/deprecated/characteristics.css */
+/* css/legacy/deprecated/characteristics.css */
 .salt-theme {
-  --salt-container-borderStyle: solid;
   --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
   --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
-  --salt-editable-borderStyle: solid;
-  --salt-editable-borderStyle-hover: solid;
-  --salt-editable-borderStyle-active: solid;
-  --salt-editable-borderStyle-disabled: solid;
-  --salt-editable-borderStyle-readonly: solid;
-  --salt-editable-cursor-hover: text;
-  --salt-editable-cursor-active: text;
-  --salt-editable-cursor-disabled: not-allowed;
-  --salt-editable-cursor-readonly: text;
   --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
   --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
   --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
   --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
   --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
-  --salt-editable-borderWidth-active: 2px;
-  --salt-measured-borderStyle: solid;
-  --salt-measured-borderStyle-active: solid;
-  --salt-measured-borderStyle-complete: solid;
-  --salt-measured-borderStyle-incomplete: dotted;
-  --salt-measured-borderWidth: 2px;
-  --salt-measured-borderWidth-active: 2px;
-  --salt-measured-borderWidth-complete: 2px;
-  --salt-measured-borderWidth-incomplete: 2px;
-  --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
-  --salt-measured-textAlign: center;
   --salt-measured-background: var(--salt-palette-measured-background);
   --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
   --salt-measured-borderColor: var(--salt-palette-measured-border);
@@ -2302,18 +2507,7 @@
   --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
   --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
   --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
-  --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
-  --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
   --salt-overlayable-rangeSelection: var(--salt-overlayable-background-rangeSelection);
-  --salt-selectable-borderStyle: solid;
-  --salt-selectable-borderStyle-hover: solid;
-  --salt-selectable-borderStyle-selected: solid;
-  --salt-selectable-borderStyle-blurSelected: solid;
-  --salt-selectable-cursor-hover: pointer;
-  --salt-selectable-cursor-selected: pointer;
-  --salt-selectable-cursor-blurSelected: pointer;
-  --salt-selectable-cursor-disabled: not-allowed;
-  --salt-selectable-cursor-readonly: not-allowed;
   --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
   --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
   --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
@@ -2347,7 +2541,6 @@
   --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
   --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
   --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
-  --salt-separable-borderStyle: solid;
   --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
   --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
   --salt-status-info-background-emphasize: var(--salt-status-info-background);
@@ -2370,42 +2563,14 @@
   --salt-status-error-foreground: var(--salt-palette-error-foreground);
   --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
   --salt-status-success-foreground: var(--salt-palette-success-foreground);
-  --salt-draggable-horizontal-cursor-hover: row-resize;
-  --salt-draggable-horizontal-cursor-active: row-resize;
-  --salt-draggable-vertical-cursor-hover: col-resize;
-  --salt-draggable-vertical-cursor-active: col-resize;
-  --salt-draggable-grab-cursor-hover: grab;
-  --salt-draggable-grab-cursor-active: grabbing;
-  --salt-actionable-cursor-hover: pointer;
-  --salt-actionable-cursor-active: pointer;
-  --salt-actionable-cursor-disabled: not-allowed;
-  --salt-actionable-letterSpacing: 0.6px;
-  --salt-actionable-textTransform: uppercase;
-  --salt-actionable-textAlign: center;
-  --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
-  --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
-  --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
-  --salt-target-cursor-disabled: not-allowed;
-  --salt-target-borderStyle: dashed;
-  --salt-target-borderStyle-hover: solid;
-  --salt-target-borderStyle-disabled: dashed;
   --salt-text-background-selected: var(--salt-content-foreground-highlight);
   --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
   --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
   --salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited);
-  --salt-text-link-textDecoration: underline;
-  --salt-text-link-textDecoration-hover: none;
-  --salt-text-link-textDecoration-selected: underline;
   --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);
   --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
   --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
   --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
-  --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
-  --salt-text-textTransform: none;
-  --salt-navigable-cursor-active: pointer;
-  --salt-navigable-cursor-hover: pointer;
-  --salt-navigable-cursor-disabled: not-allowed;
-  --salt-navigable-cursor-edit: text;
   --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
   --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
   --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
@@ -2417,33 +2582,12 @@
   --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
   --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
   --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
-  --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
-  --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
-  --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
-  --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
-  --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
-  --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
-  --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
   --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
-  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
   --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
-  --salt-track-borderStyle: solid;
-  --salt-track-borderStyle-active: solid;
-  --salt-track-borderStyle-complete: solid;
-  --salt-track-borderStyle-incomplete: dotted;
-  --salt-track-borderWidth: 2px;
-  --salt-track-borderWidth-active: 2px;
-  --salt-track-borderWidth-complete: 2px;
-  --salt-track-borderWidth-incomplete: 2px;
-  --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
-  --salt-track-textAlign: center;
   --salt-track-background: var(--salt-palette-track-background);
   --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
   --salt-track-borderColor: var(--salt-palette-neutral-border);
   --salt-track-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
-  --salt-taggable-cursor-hover: pointer;
-  --salt-taggable-cursor-active: pointer;
-  --salt-taggable-cursor-disabled: not-allowed;
   --salt-taggable-background: var(--salt-palette-interact-primary-background);
   --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);
   --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);
@@ -2489,24 +2633,8 @@
   --salt-actionable-secondary-foreground-hover: var(--salt-actionable-subtle-foreground-hover);
   --salt-actionable-secondary-foreground: var(--salt-actionable-subtle-foreground);
 }
-.salt-density-high {
-  --salt-accent-fontSize: 8px;
-  --salt-accent-lineHeight: 11px;
-}
-.salt-density-medium {
-  --salt-accent-fontSize: 10px;
-  --salt-accent-lineHeight: 13px;
-}
-.salt-density-low {
-  --salt-accent-fontSize: 12px;
-  --salt-accent-lineHeight: 16px;
-}
-.salt-density-touch {
-  --salt-accent-fontSize: 14px;
-  --salt-accent-lineHeight: 18px;
-}
 
-/* css/deprecated/fade.css */
+/* css/legacy/deprecated/fade.css */
 .salt-theme {
   --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
   --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
@@ -2588,114 +2716,9 @@
   --salt-color-black-fade-background-highlight: rgba(0, 0, 0, var(--salt-opacity-25));
   --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
   --salt-color-white-fade-background-highlight: rgba(255, 255, 255, var(--salt-opacity-25));
-  --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
-  --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
-  --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
-  --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
-}
-
-/* css/deprecated/foundations.css */
-.salt-theme {
-  --salt-delay-instant: 100ms;
-  --salt-delay-perceptible: 300ms;
-  --salt-delay-notable: 1000ms;
-  --salt-delay-cutoff: 10000ms;
-  --salt-size-icon-base: var(--salt-icon-size-base);
-  --salt-opacity-1: 0.15;
-  --salt-opacity-2: 0.25;
-  --salt-opacity-3: 0.4;
-  --salt-opacity-4: 0.7;
-  --salt-opacity-8: 0.08;
-  --salt-opacity-0: 0;
-  --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;
-  --salt-shadow-0: none;
-  --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
-  --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
-  --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
-  --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
-  --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
-  --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
-  --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
-  --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
-  --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
-  --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
-  --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
-  --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
-  --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
-}
-.salt-theme[data-mode=light] {
-  --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
-  --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
-  --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
-  --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
-  --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
-}
-.salt-theme[data-mode=dark] {
-  --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
-  --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
-  --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
-  --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
-  --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
-}
-.salt-density-touch,
-.salt-density-low,
-.salt-density-medium,
-.salt-density-high {
-  --salt-size-selection: var(--salt-size-selectable);
-  --salt-size-brandBar: 4px;
-  --salt-size-graphic-small: 12px;
-  --salt-size-graphic-medium: 24px;
-  --salt-size-graphic-large: 48px;
-  --salt-size-divider-height: var(--salt-size-separator-height);
-  --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
-  --salt-size-detail: var(--salt-size-compact);
-  --salt-size-basis-unit: 4px;
-  --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
-  --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
-  --salt-size-separator-strokeWidth: 1px;
-  --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
-  --salt-size-sharktooth-height: 5px;
-  --salt-size-sharktooth-width: 10px;
-  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
-  --salt-size-border: 1px;
-  --salt-size-bar-small: 2px;
-  --salt-size-border-strong: 2px;
-  --salt-zIndex-docked: 1050;
-}
-.salt-density-high {
-  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
-  --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
-  --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
-  --salt-icon-size-base: 10px;
-  --salt-icon-size-status-adornment: 6px;
-}
-.salt-density-medium {
-  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
-  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
-  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
-  --salt-icon-size-base: 12px;
-  --salt-icon-size-status-adornment: 8px;
-}
-.salt-density-low {
-  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
-  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
-  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
-  --salt-icon-size-base: 14px;
-  --salt-icon-size-status-adornment: 10px;
-}
-.salt-density-touch {
-  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
-  --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
-  --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
-  --salt-icon-size-base: 16px;
-  --salt-icon-size-status-adornment: 12px;
 }
 
-/* css/deprecated/palette.css */
+/* css/legacy/deprecated/palette.css */
 .salt-theme {
   --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
   --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);