@vuu-ui/vuu-theme 0.8.23-debug → 0.8.24-debug

package/index.css

@@ -210,15 +210,14 @@
 
 /* css/global.css */
 .vuu-theme {
-  color: var(--salt-text-primary-foreground);
+  color: var(--salt-content-primary-foreground);
   font-family: var(--salt-typography-fontFamily);
   font-size: var(--salt-text-fontSize);
   letter-spacing: var(--salt-text-letterSpacing);
   line-height: var(--salt-text-lineHeight);
 }
-::selection {
-  background: var(--salt-text-background-selected);
-  color: var(--salt-text-color-selected, inherit);
+.salt-theme ::selection {
+  background: var(--salt-content-foreground-highlight);
 }
 .vuu-theme[data-mode=light] {
   color-scheme: light;
@@ -254,8 +253,8 @@
   --salt-animation-scale-end: 1;
   --salt-animation-transform-start: 100%;
   --salt-animation-transform-end: 0;
-  --salt-animation-duration: 0.3s;
-  --salt-animation-timing-function: ease-in;
+  --salt-animation-duration: var(--salt-duration-perceptible);
+  --salt-animation-timing-function: ease-in-out;
   --salt-animation-slide-in-top: slide-in-top var(--salt-animation-duration) var(--salt-animation-timing-function);
   --salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);
   --salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);
@@ -267,7 +266,7 @@
   --salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);
   --salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);
   --salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);
-  --salt-animation-fade-out-back: fade-out-back var(--salt-animation-duration) ease-out both;
+  --salt-animation-fade-out-back: fade-out-back var(--salt-animation-duration) ease-in-out both;
 }
 @keyframes slide-in-top {
   0% {
@@ -402,8 +401,10 @@
   --vuu-color-purple-10-fade-light: rgba(109,24,189, var(--vuu-fade-light));
   --vuu-color-pink-10: rgb(234, 120, 128);
   --vuu-color-pink-10-fade-20: rgba(234, 120, 128, .2);
+  --vuu-color-gray-02: rgb(235, 235, 236);
   --vuu-color-gray-03: rgb(237, 237, 237);
   --vuu-color-gray-05: rgb(222, 222, 222);
+  --vuu-color-gray-07: rgb(226, 226, 227);
   --vuu-color-gray-10: rgb(228, 227, 231);
   --vuu-color-gray-20: rgb(245, 242, 248);
   --vuu-color-gray-25: rgb(244, 244, 244) ;
@@ -552,6 +553,7 @@
   --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
   --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
   --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-50-fade-border: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
   --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
   --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
   --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
@@ -581,7 +583,8 @@
   --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
   --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
   --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
-  --salt-color-black-fade-backdrop: rgba(36, 37, 38, var(--salt-palette-opacity-backdrop));
+  --salt-color-white-fade-backdrop: rgba(255, 255, 255, var(--salt-palette-opacity-backdrop));
+  --salt-color-black-fade-backdrop: rgba(0, 0, 0, var(--salt-palette-opacity-backdrop));
   --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
   --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
   --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));
@@ -590,24 +593,8 @@
   --salt-color-black-fade-separatorOpacity-primary: rgba(0, 0, 0, var(--salt-palette-opacity-primary-border));
   --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border));
   --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
-}
-
-/* css/foundations/icon.css */
-.vuu-density-touch {
-  --salt-icon-size-base: 16px;
-  --salt-icon-size-status-adornment: 12px;
-}
-.vuu-density-low {
-  --salt-icon-size-base: 14px;
-  --salt-icon-size-status-adornment: 10px;
-}
-.vuu-density-medium {
-  --salt-icon-size-base: 12px;
-  --salt-icon-size-status-adornment: 8px;
-}
-.vuu-density-high {
-  --salt-icon-size-base: 10px;
-  --salt-icon-size-status-adornment: 6px;
+  --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
+  --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
 }
 
 /* css/foundations/opacity.css */
@@ -622,86 +609,75 @@
 
 /* css/foundations/shadow.css */
 .vuu-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);
 }
 .vuu-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);
 }
 .vuu-theme {
-  --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);
 }
 
 /* css/foundations/size.css */
-.vuu-density-touch,
-.vuu-density-low,
-.vuu-density-medium,
-.vuu-density-high {
-  --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-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
-  --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));
-}
 .vuu-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-size-adornment: 6px;
   --salt-size-bar: 2px;
-  --salt-size-base: 20px;
+  --salt-size-base: 24px;
   --salt-size-border: 1px;
+  --salt-size-icon: 10px;
+  --salt-size-indicator: 1px;
   --salt-size-selectable: 12px;
-  --salt-size-icon: 12px;
+  --salt-size-bar-strong: 4px;
+  --salt-size-bar-small: 2px;
+  --salt-size-border-strong: 2px;
 }
 .vuu-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-size-adornment: 8px;
   --salt-size-bar: 4px;
   --salt-size-base: 28px;
   --salt-size-border: 1px;
-  --salt-size-selectable: 14px;
   --salt-size-icon: 12px;
+  --salt-size-indicator: 2px;
+  --salt-size-selectable: 14px;
+  --salt-size-bar-strong: 8px;
+  --salt-size-bar-small: 2px;
+  --salt-size-border-strong: 2px;
 }
 .vuu-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-size-adornment: 10px;
   --salt-size-bar: 6px;
   --salt-size-base: 36px;
   --salt-size-border: 1px;
-  --salt-size-selectable: 16px;
   --salt-size-icon: 14px;
+  --salt-size-indicator: 3px;
+  --salt-size-selectable: 16px;
+  --salt-size-bar-strong: 12px;
+  --salt-size-bar-small: 2px;
+  --salt-size-border-strong: 2px;
 }
 .vuu-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-size-adornment: 12px;
   --salt-size-bar: 8px;
   --salt-size-base: 44px;
   --salt-size-border: 1px;
-  --salt-size-selectable: 18px;
   --salt-size-icon: 16px;
+  --salt-size-indicator: 4px;
+  --salt-size-selectable: 18px;
+  --salt-size-bar-strong: 16px;
+  --salt-size-bar-small: 2px;
+  --salt-size-border-strong: 2px;
 }
 
 /* css/foundations/spacing.css */
@@ -751,7 +727,6 @@
 .vuu-density-high {
   --salt-zIndex-default: 1;
   --salt-zIndex-popout: 1000;
-  --salt-zIndex-docked: 1050;
   --salt-zIndex-appHeader: 1100;
   --salt-zIndex-drawer: 1200;
   --salt-zIndex-modal: 1300;
@@ -764,19 +739,13 @@
 /* css/palette/accent.css */
 .vuu-theme[data-mode=light] {
   --salt-palette-accent-background: var(--salt-color-blue-500);
-  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
   --salt-palette-accent-border: var(--salt-color-blue-500);
-  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
   --salt-palette-accent-foreground: var(--salt-color-white);
-  --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
 }
 .vuu-theme[data-mode=dark] {
   --salt-palette-accent-background: var(--salt-color-blue-500);
-  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
   --salt-palette-accent-border: var(--salt-color-blue-500);
-  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
   --salt-palette-accent-foreground: var(--salt-color-white);
-  --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
 }
 
 /* css/palette/error.css */
@@ -810,7 +779,7 @@
   --salt-palette-interact-background: transparent;
   --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
   --salt-palette-interact-background-hover: var(--vuu-color-gray-10);
-  --salt-palette-interact-background-active: var(--vuu-color-blue-40);
+  --salt-palette-interact-background-active: var(--vuu-color-gray-02);
   --salt-palette-interact-background-disabled: var(--vuu-color-gray-35);
   --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background);
   --salt-palette-interact-border: var(--vuu-color-gray-45);
@@ -824,35 +793,29 @@
   --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);
   --salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
   --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
-  --salt-palette-interact-outline: var(--salt-color-blue-600);
+  --salt-palette-interact-outline: var(--vuu-color-purple-10);
   --salt-palette-interact-cta-background: var(--vuu-color-purple-10);
   --salt-palette-interact-cta-background-active: var(--vuu-color-purple-10);
-  --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
   --salt-palette-interact-cta-background-disabled: var(--vuu-color-purple-20-fade-40);
   --salt-palette-interact-cta-background-hover: var(--vuu-color-pink-10);
   --salt-palette-interact-cta-foreground: var(--salt-color-white);
   --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
-  --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
   --salt-palette-interact-cta-foreground-disabled: var(--vuu-color-white-fade-70);
   --salt-palette-interact-cta-foreground-hover: var(--vuu-color-gray-80);
-  --salt-palette-interact-primary-background: var(--vuu-color-white);
+  --salt-palette-interact-primary-background: var(--salt-color-gray-60);
   --salt-palette-interact-primary-background-active: var(--vuu-color-gray-50);
-  --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
   --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
   --salt-palette-interact-primary-background-hover: var(--vuu-color-pink-10);
   --salt-palette-interact-primary-foreground: var(--vuu-color-gray-50);
   --salt-palette-interact-primary-foreground-active: var(--salt-color-white);
-  --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
   --salt-palette-interact-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
   --salt-palette-interact-primary-foreground-hover: var(--vuu-color-gray-80);
   --salt-palette-interact-secondary-background: transparent;
   --salt-palette-interact-secondary-background-active: var(--vuu-color-purple-10);
-  --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
   --salt-palette-interact-secondary-background-disabled: transparent;
   --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-40);
   --salt-palette-interact-secondary-foreground: var(--salt-color-gray-900);
   --salt-palette-interact-secondary-foreground-active: var(--salt-color-white);
-  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
   --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
   --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
 }
@@ -877,70 +840,46 @@
   --salt-palette-interact-outline: var(--vuu-color-pink-10);
   --salt-palette-interact-cta-background: var(--salt-color-blue-600);
   --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
-  --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
   --salt-palette-interact-cta-background-disabled: var(--vuu-color-purple-20-fade-40);
   --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
   --salt-palette-interact-cta-foreground: var(--salt-color-white);
   --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
-  --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
   --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
   --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
   --salt-palette-interact-primary-background: var(--salt-color-gray-300);
   --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
-  --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
   --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
   --salt-palette-interact-primary-background-hover: var(--salt-color-gray-200);
   --salt-palette-interact-primary-foreground: var(--salt-color-white);
   --salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900);
-  --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
   --salt-palette-interact-primary-foreground-disabled: var(--salt-color-white-fade-foreground);
   --salt-palette-interact-primary-foreground-hover: var(--salt-color-white);
   --salt-palette-interact-secondary-background: transparent;
   --salt-palette-interact-secondary-background-active: var(--salt-color-gray-70);
-  --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
   --salt-palette-interact-secondary-background-disabled: transparent;
   --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-200);
   --salt-palette-interact-secondary-foreground: var(--salt-color-white);
   --salt-palette-interact-secondary-foreground-active: var(--salt-color-gray-900);
-  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
   --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
   --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
 }
 
 /* css/palette/navigate.css */
 .vuu-theme[data-mode=light] {
-  --salt-palette-navigate-primary-background: transparent;
   --salt-palette-navigate-primary-background-active: transparent;
-  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
-  --salt-palette-navigate-secondary-background: transparent;
-  --salt-palette-navigate-secondary-background-active: transparent;
-  --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30);
-  --salt-palette-navigate-tertiary-background: transparent;
-  --salt-palette-navigate-tertiary-background-active: transparent;
-  --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
   --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
   --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
   --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
   --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
   --salt-palette-navigate-indicator-active: var(--vuu-color-purple-10);
-  --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
 }
 .vuu-theme[data-mode=dark] {
-  --salt-palette-navigate-primary-background: transparent;
   --salt-palette-navigate-primary-background-active: transparent;
-  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
-  --salt-palette-navigate-secondary-background: transparent;
-  --salt-palette-navigate-secondary-background-active: transparent;
-  --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-600);
-  --salt-palette-navigate-tertiary-background: transparent;
-  --salt-palette-navigate-tertiary-background-active: transparent;
-  --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-700);
   --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);
   --salt-palette-navigate-foreground-active: var(--salt-color-blue-300);
   --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100);
   --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
   --salt-palette-navigate-indicator-active: var(--vuu-color-pink-10);
-  --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
 }
 
 /* css/palette/negative.css */
@@ -960,21 +899,17 @@
   --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
   --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
   --salt-palette-neutral-primary-border: var(--vuu-color-purple-10);
-  --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
-  --salt-palette-neutral-secondary-background: var(--vuu-color-gray-20);
+  --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-50-fade-border);
+  --salt-palette-neutral-secondary-background: var(--vuu-color-gray-25);
   --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
   --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
-  --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
-  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
+  --salt-palette-neutral-secondary-border: var(--vuu-color-gray-50);
+  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);
   --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
   --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
-  --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
-  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
-  --salt-palette-neutral-tertiary-background: transparent;
-  --salt-palette-neutral-tertiary-background-disabled: transparent;
-  --salt-palette-neutral-tertiary-border: transparent;
-  --salt-palette-neutral-tertiary-border-disabled: transparent;
-  --salt-palette-neutral-tertiary-separator: var(--vuu-color-gray-05);
+  --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
+  --salt-palette-neutral-secondary-separator: var(--vuu-color-gray-05);
+  --salt-palette-neutral-tertiary-separator: var(--vuu-color-gray-03);
 }
 .vuu-theme[data-mode=dark] {
   --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
@@ -988,16 +923,12 @@
   --salt-palette-neutral-secondary-background: var(--salt-color-gray-600);
   --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-600-fade-background);
   --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-600-fade-background-readonly);
-  --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
-  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
+  --salt-palette-neutral-secondary-border: var(--salt-color-gray-300);
+  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);
   --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);
   --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
   --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
   --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
-  --salt-palette-neutral-tertiary-background: transparent;
-  --salt-palette-neutral-tertiary-background-disabled: transparent;
-  --salt-palette-neutral-tertiary-border: transparent;
-  --salt-palette-neutral-tertiary-border-disabled: transparent;
   --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
 }
 
@@ -1034,20 +965,6 @@
   --salt-palette-success-foreground: var(--salt-color-green-400);
 }
 
-/* css/palette/track.css */
-.vuu-theme[data-mode=light] {
-  --salt-palette-track-background: var(--salt-color-gray-60);
-  --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
-  --salt-palette-track-border: var(--salt-color-gray-90);
-  --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
-}
-.vuu-theme[data-mode=dark] {
-  --salt-palette-track-background: var(--salt-color-gray-300);
-  --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
-  --salt-palette-track-border: var(--salt-color-gray-90);
-  --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
-}
-
 /* css/palette/warning.css */
 .vuu-theme[data-mode=light] {
   --salt-palette-warning-background: var(--salt-color-orange-10);
@@ -1063,30 +980,10 @@
 }
 
 /* css/characteristics/accent.css */
-.vuu-density-high {
-  --salt-accent-fontSize: 8px;
-  --salt-accent-lineHeight: 11px;
-}
-.vuu-density-medium {
-  --salt-accent-fontSize: 10px;
-  --salt-accent-lineHeight: 13px;
-}
-.vuu-density-low {
-  --salt-accent-fontSize: 12px;
-  --salt-accent-lineHeight: 16px;
-}
-.vuu-density-touch {
-  --salt-accent-fontSize: 14px;
-  --salt-accent-lineHeight: 18px;
-}
 .vuu-theme {
   --salt-accent-background: var(--salt-palette-accent-background);
-  --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
   --salt-accent-borderColor: var(--salt-palette-accent-border);
-  --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
   --salt-accent-foreground: var(--salt-palette-accent-foreground);
-  --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
-  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
 }
 
 /* css/characteristics/actionable.css */
@@ -1094,9 +991,6 @@
   --salt-actionable-cursor-hover: pointer;
   --salt-actionable-cursor-active: pointer;
   --salt-actionable-cursor-disabled: not-allowed;
-  --salt-actionable-letterSpacing: 0.6px;
-  --salt-actionable-textAlign: center;
-  --salt-actionable-textTransform: uppercase;
   --salt-actionable-primary-foreground: var(--salt-palette-interact-primary-foreground);
   --salt-actionable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
   --salt-actionable-primary-foreground-active: var(--salt-palette-interact-primary-foreground-active);
@@ -1105,7 +999,6 @@
   --salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
   --salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);
   --salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);
-  --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
   --salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
   --salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);
@@ -1114,7 +1007,6 @@
   --salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
   --salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);
   --salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);
-  --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
   --salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);
   --salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
   --salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);
@@ -1123,7 +1015,6 @@
   --salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
   --salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);
   --salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);
-  --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
 }
 
 /* css/characteristics/container.css */
@@ -1137,10 +1028,6 @@
   --salt-container-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
   --salt-container-secondary-borderColor: var(--salt-palette-neutral-secondary-border);
   --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-secondary-border-disabled);
-  --salt-container-tertiary-background: var(--salt-palette-neutral-tertiary-background);
-  --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
-  --salt-container-tertiary-borderColor: var(--salt-palette-neutral-tertiary-border);
-  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled);
 }
 
 /* css/characteristics/draggable.css */
@@ -1195,10 +1082,23 @@
 
 /* css/characteristics/focused.css */
 .vuu-theme {
-  --vuu-editable-borderColor-active: var(--editable-border-active, #6D18BD);
-}
-.saltInput-focused {
-  border-color: var(--vuu-editable-borderColor-active) !important;
+  --salt-focused-outlineColor: var(--salt-palette-interact-outline);
+  --salt-focused-outlineStyle: dotted;
+  --salt-focused-outlineWidth: 2px;
+  --salt-focused-outlineInset: 0;
+  --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 */
@@ -1213,27 +1113,21 @@
   --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
   --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
   --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
-  --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
-  --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);
-  --salt-navigable-secondary-background: var(--salt-palette-navigate-secondary-background);
-  --salt-navigable-secondary-background-hover: var(--salt-palette-navigate-secondary-background-hover);
-  --salt-navigable-secondary-background-active: var(--salt-palette-navigate-secondary-background-active);
-  --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);
-  --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);
-  --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
+  --salt-navigable-background-hover: var(--salt-palette-navigate-primary-background-hover);
+  --salt-navigable-textDecoration: underline;
+  --salt-navigable-textDecoration-hover: none;
+  --salt-navigable-textDecoration-selected: underline;
 }
 
 /* css/characteristics/overlayable.css */
 .vuu-theme {
-  --salt-overlayable-shadow-scroll: var(--salt-shadow-1);
-  --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
-  --salt-overlayable-shadow: var(--salt-shadow-2);
-  --salt-overlayable-shadow-hover: var(--salt-shadow-3);
-  --salt-overlayable-shadow-popout: var(--salt-shadow-4);
-  --salt-overlayable-shadow-drag: var(--salt-shadow-4);
-  --salt-overlayable-shadow-modal: var(--salt-shadow-5);
+  --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-background: var(--salt-palette-neutral-backdrop);
 }
 
@@ -1265,30 +1159,6 @@
   --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
   --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
   --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
-  --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
-  --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
-  --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
-  --salt-selectable-cta-background: var(--salt-palette-interact-background);
-  --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
-  --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
-  --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
-  --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
-  --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
-  --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
-  --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
-  --salt-selectable-primary-background: var(--salt-palette-interact-background);
-  --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
-  --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
-  --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
-  --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
-  --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
-  --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
-  --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
-  --salt-selectable-secondary-background: var(--salt-palette-interact-background);
-  --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
-  --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);
 }
 
 /* css/characteristics/separable.css */
@@ -1321,21 +1191,6 @@
   --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
 }
 
-/* css/characteristics/taggable.css */
-.vuu-theme {
-  --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);
-  --salt-taggable-background-disabled: var(--salt-palette-interact-primary-background-disabled);
-  --salt-taggable-foreground: var(--salt-palette-interact-primary-foreground);
-  --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
-  --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
-  --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
-}
-
 /* css/characteristics/text.css */
 .vuu-theme {
   --salt-text-letterSpacing: 0;
@@ -1343,10 +1198,18 @@
   --salt-text-textAlign-embedded: center;
   --salt-text-textDecoration: none;
   --salt-text-textTransform: none;
+  --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-fontFamily: var(--salt-typography-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-notation-fontFamily: var(--salt-typography-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-h1-fontFamily: var(--salt-typography-fontFamily);
   --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
   --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
@@ -1379,17 +1242,6 @@
   --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-background-selected: var(--salt-palette-interact-background-active);
-  --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-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-code-fontFamily: var(--salt-typography-fontFamily-code);
 }
 .vuu-density-touch {
@@ -1412,6 +1264,8 @@
   --salt-text-display2-lineHeight: 76px;
   --salt-text-display3-fontSize: 42px;
   --salt-text-display3-lineHeight: 54px;
+  --salt-text-notation-fontSize: 14px;
+  --salt-text-notation-lineHeight: 18px;
 }
 .vuu-density-low {
   --salt-text-h1-fontSize: 32px;
@@ -1433,6 +1287,8 @@
   --salt-text-display2-lineHeight: 60px;
   --salt-text-display3-fontSize: 32px;
   --salt-text-display3-lineHeight: 42px;
+  --salt-text-notation-fontSize: 12px;
+  --salt-text-notation-lineHeight: 16px;
 }
 .vuu-density-medium {
   --salt-text-h1-fontSize: 24px;
@@ -1454,6 +1310,8 @@
   --salt-text-display2-lineHeight: 47px;
   --salt-text-display3-fontSize: 24px;
   --salt-text-display3-lineHeight: 32px;
+  --salt-text-notation-fontSize: 10px;
+  --salt-text-notation-lineHeight: 13px;
 }
 .vuu-density-high {
   --salt-text-h1-fontSize: 18px;
@@ -1467,14 +1325,28 @@
   --salt-text-label-fontSize: 10px;
   --salt-text-label-lineHeight: 13px;
   --salt-text-fontSize: 12px;
-  --salt-text-lineHeight: 14px;
-  --salt-text-minHeight: 14px;
+  --salt-text-lineHeight: 16px;
+  --salt-text-minHeight: 16px;
   --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-notation-fontSize: 8px;
+  --salt-text-notation-lineHeight: 10px;
+}
+
+/* css/characteristics/content.css */
+.vuu-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-foreground-hover: var(--salt-palette-navigate-foreground-hover);
+  --salt-content-foreground-active: var(--salt-palette-navigate-foreground-active);
+  --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
+  --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
 }
 
 /* css/characteristics/track.css */
@@ -1483,83 +1355,7 @@
   --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-track-border);
-  --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
-}
-
-/* css/deprecated/characteristics.css */
-.vuu-theme {
-  --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
-  --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
-  --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-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);
-  --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
-  --salt-measured-fill: var(--salt-palette-measured-fill);
-  --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
-  --salt-measured-foreground: var(--salt-palette-measured-foreground);
-  --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
-  --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
-  --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-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
-  --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
-  --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
-  --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
-  --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
-  --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
-  --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
-  --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
-  --salt-status-info-background-emphasize: var(--salt-status-info-background);
-  --salt-status-success-background-emphasize: var(--salt-status-success-background);
-  --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
-  --salt-status-error-background-emphasize: var(--salt-status-error-background);
-  --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
-  --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
-  --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
-  --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
-  --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
-  --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
-  --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
-  --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
-  --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
-  --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
-  --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
-}
-
-/* css/deprecated/fade.css */
-.vuu-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));
-  --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
-  --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
-  --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
-  --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
+  --salt-track-borderColor: var(--salt-palette-neutral-secondary-border);
 }
 
 /* css/deprecated/foundations.css */
@@ -1573,6 +1369,26 @@
   --salt-opacity-2: 0.25;
   --salt-opacity-3: 0.4;
   --salt-opacity-4: 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);
+}
+.vuu-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);
+}
+.vuu-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);
 }
 .vuu-density-touch,
 .vuu-density-low,
@@ -1586,136 +1402,95 @@
   --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-zIndex-docked: 1050;
 }
-
-/* css/deprecated/palette.css */
-.vuu-theme {
-  --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
-  --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
-  --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
-  --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
-  --salt-palette-opacity-fill: var(--salt-palette-opacity-disabled);
-  --salt-palette-opacity-stroke: var(--salt-palette-opacity-disabled);
-  --salt-palette-opacity-background: var(--salt-palette-opacity-disabled);
-  --salt-palette-opacity-border: var(--salt-palette-opacity-disabled);
-  --salt-palette-opacity-foreground: var(--salt-palette-opacity-disabled);
+.vuu-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;
 }
-.vuu-theme[data-mode=light] {
-  --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
-  --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
-  --salt-palette-measured-fill: var(--salt-color-blue-500);
-  --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
-  --salt-palette-measured-foreground: var(--salt-color-gray-90);
-  --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
-  --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
-  --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
-  --salt-palette-measured-background: var(--salt-color-gray-60);
-  --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
-  --salt-palette-measured-border: var(--salt-color-gray-90);
-  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
-  --salt-palette-neutral-tertiary-background-readonly: transparent;
-  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
-  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
-  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
-  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
-  --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
-  --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
-  --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
-  --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
-  --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);
-  --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
+.vuu-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;
 }
-.vuu-theme[data-mode=dark] {
-  --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
-  --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
-  --salt-palette-measured-fill: var(--salt-color-blue-300);
-  --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
-  --salt-palette-measured-foreground: var(--salt-color-gray-90);
-  --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
-  --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
-  --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
-  --salt-palette-measured-background: var(--salt-color-gray-300);
-  --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
-  --salt-palette-measured-border: var(--salt-color-gray-90);
-  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
-  --salt-palette-neutral-tertiary-background-readonly: transparent;
-  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
-  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
-  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
-  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
-  --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
-  --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
-  --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
-  --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
-  --salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);
-  --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
+.vuu-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;
+}
+.vuu-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/theme.css */
 
 /* css/components/button.css */
-.saltButton {
-  white-space: nowrap;
+.vuu-theme {
   --saltButton-borderRadius: 6px;
+  --saltButton-padding: 16px;
 }
-.saltButton-primary {
-  --saltButton-borderColor: var(--salt-actionable-primary-foreground);
+.vuu-theme .saltButton-primary {
+  --saltButton-borderColor: var(--vuuButton-borderColor,var(--salt-actionable-primary-foreground));
   --saltButton-borderWidth: 1px;
   --saltButton-borderStyle: solid;
-  --vuu-icon-color: var(--saltIcon-color);
-}
-.saltButton-primary:hover {
-  --saltButton-borderColor: var(--salt-actionable-primary-background-hover) ;
-}
-.saltButton-secondary {
-  --saltButton-borderStyle: none;
 }
-.saltButton:focus-visible {
-  outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple-10));
-  outline-style: dashed;
-  outline-width: 1px;
-  outline-offset: -1px;
-}
-.saltButton[data-icon] {
-  min-width: 20px;
+.vuu-theme .saltButton-primary:not(:disabled):not(:active):not(.saltButton-active):hover {
+  --saltButton-borderColor: var(--vuuButton-borderColor, var(--salt-actionable-primary-background-hover));
 }
 
 /* css/components/checkbox.css */
-.saltCheckbox {
+.vuu-theme .saltCheckbox {
   --checkbox-background: white;
-  --checkbox-borderColor: var(--vuu-color-gray-45);
+  --checkbox-borderColor: var(--salt-selectable-borderColor);
   --vuu-icon-color: white;
-  --vuu-icon-size: 12px;
   --vuu-icon-left: -1px;
   --vuu-icon-top: -1px;
 }
-.saltCheckbox:has(.saltCheckboxIcon-checked) {
-  --checkbox-background: var(--vuu-color-purple-10);
-  --checkbox-borderColor: var(--vuu-color-purple-10);
+.vuu-theme .saltCheckbox:has(.saltCheckboxIcon-checked) {
+  --checkbox-background: var(--salt-actionable-cta-background);
+  --checkbox-borderColor: var( --salt-container-primary-borderColor);
 }
-.saltCheckbox:hover {
-  --vuu-icon-color:var(--vuu-color-pink-10);
+.vuu-theme .saltCheckbox:hover {
+  --vuu-icon-color:var(--salt-actionable-primary-background-hover);
   --checkbox-background: var(--vuu-color-pink-10-fade-20);
-  --checkbox-borderColor: var(--vuu-color-pink-10);
+  --checkbox-borderColor: var(--salt-selectable-borderColor-hover);
 }
-.saltCheckboxIcon {
+.vuu-theme .saltCheckboxIcon {
   background: var(--checkbox-background);
   border-color: var(--checkbox-borderColor) !important;
   border-radius: 3px;
   border-style: solid;
   border-width: 1px;
-  height: 12px;
-  width: 12px;
 }
-.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,
-.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {
+.vuu-theme .saltCheckboxIcon-checked.saltCheckboxIcon-disabled,
+.vuu-theme .saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {
   background-color: var(--salt-selectable-background-disabled);
   border-color: transparent;
 }
-.saltCheckboxIcon-checked:after {
+.vuu-theme .saltCheckboxIcon-checked:after {
   content: "";
   background-color: var(--vuu-icon-color);
   left: var(--vuu-icon-left, auto);
+  --vuu-icon-size: calc(var(--salt-size-icon) + 2px);
   height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
   mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);
   -webkit-mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);
@@ -1727,7 +1502,7 @@
 }
 
 /* css/components/icon.css */
-.saltIcon {
+.vuu-theme .saltIcon {
   display: none;
 }
 
@@ -1810,26 +1585,44 @@
 }
 
 /* css/components/toggle-button.css */
-.saltToggleButtonGroup {
+.vuu-theme .saltToggleButtonGroup {
+  --togglebutton-borderRadius: 4px 4px 4px 4px;
+  --salt-spacing-100: 16px;
   border-radius: 6px;
   gap: 0;
+  height: var(--salt-size-base);
   padding: 0;
 }
-.saltToggleButtonGroup-horizontal .saltToggleButton {
-  height: var(--vuuToggleButton-height, 24px);
+.vuu-theme .saltToggleButtonGroup-horizontal .saltToggleButton {
+  height: 100%;
 }
-.saltToggleButton {
-  white-space: nowrap;
+.vuu-theme .saltToggleButton {
+  border-radius: var(--togglebutton-borderRadius);
+  gap: 8px;
+  --vuu-icon-color: var(--salt-actionable-secondary-foreground);
+}
+.vuu-theme .saltToggleButton[aria-checked=true] {
+  --vuu-icon-color: var(--salt-actionable-secondary-foreground-active);
+}
+.vuu-theme .saltToggleButton[aria-pressed=true] {
+  --vuu-icon-color: var(--salt-actionable-secondary-foreground-active);
+}
+.vuu-theme [data-variant=primary] {
+  --salt-actionable-secondary-background-active: var(--salt-actionable-primary-background-active);
+  border-color: var(--salt-container-secondary-borderColor);
+}
+.vuu-theme [data-variant=secondary] {
+  --salt-actionable-secondary-background-active: var(--salt-actionable-primary-background-active);
+  --salt-container-primary-borderColor: transparent ;
 }
-.vuuIconToggleButton {
-  --vuu-icon-size: var(--vuuIconToggleButton-iconSize, 48px);
-  width: 48px;
+.vuu-theme .vuuStateButtonGroup .saltToggleButton {
+  --togglebutton-borderRadius: 0;
 }
-.vuuIconToggleButton:first-child {
-  border-radius: 4px 0 0 4px;
+.vuu-theme .vuuStateButtonGroup .saltToggleButton:first-child {
+  --togglebutton-borderRadius: 4px 0 0 4px;
 }
-.vuuIconToggleButton:last-child {
-  border-radius: 0 4px 4px 0;
+.vuu-theme .vuuStateButtonGroup .saltToggleButton:last-child {
+  --togglebutton-borderRadius: 0 4px 4px 0;
 }
 
 /* css/components/components.css */