@salt-ds/theme 1.40.0 → 1.42.0

package/index.css

@@ -225,6 +225,7 @@
     255;
   --salt-color-black: rgb(var(--salt-color-black-rgb));
   --salt-color-white: rgb(var(--salt-color-white-rgb));
+  --salt-color-transparent: transparent;
 }
 
 /* css/foundations/cursor.css */
@@ -417,6 +418,9 @@
   --salt-spacing-fixed-700: 7px;
   --salt-spacing-fixed-800: 8px;
   --salt-spacing-fixed-900: 9px;
+  --salt-spacing-fixed-1000: 10px;
+  --salt-spacing-fixed-1100: 11px;
+  --salt-spacing-fixed-1200: 12px;
 }
 
 /* css/foundations/typography.css */
@@ -1224,7 +1228,6 @@
   --salt-palette-alpha-contrast-low: var(--salt-color-black-15a);
   --salt-palette-alpha-contrast-lower: var(--salt-color-black-10a);
   --salt-palette-alpha-contrast-lowest: var(--salt-color-black-5a);
-  --salt-palette-alpha-none: transparent;
 }
 .salt-theme[data-mode=dark] {
   --salt-palette-alpha-highest: var(--salt-color-black-80a);
@@ -1245,7 +1248,6 @@
   --salt-palette-alpha-contrast-low: var(--salt-color-white-15a);
   --salt-palette-alpha-contrast-lower: var(--salt-color-white-10a);
   --salt-palette-alpha-contrast-lowest: var(--salt-color-white-5a);
-  --salt-palette-alpha-none: transparent;
 }
 
 /* css/legacy/palette/categorical.css */
@@ -1432,7 +1434,6 @@
   --salt-palette-interact-foreground: var(--salt-color-gray-200);
   --salt-palette-interact-foreground-active: var(--salt-color-blue-600);
   --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-40a);
-  --salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-40a);
   --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
   --salt-palette-interact-outline: var(--salt-color-blue-600);
   --salt-palette-interact-cta-background: var(--salt-color-blue-600);
@@ -1469,7 +1470,6 @@
   --salt-palette-interact-foreground: var(--salt-color-gray-90);
   --salt-palette-interact-foreground-active: var(--salt-color-blue-100);
   --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-40a);
-  --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-40a);
   --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
   --salt-palette-interact-outline: var(--salt-color-blue-100);
   --salt-palette-interact-cta-background: var(--salt-color-blue-600);
@@ -1628,28 +1628,20 @@
   --salt-palette-warning-action-foreground: var(--salt-color-gray-900);
 }
 
-/* css/legacy/characteristics/accent.css */
-.salt-theme {
-  --salt-accent-background: var(--salt-palette-accent);
-  --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
-  --salt-accent-borderColor: var(--salt-palette-accent);
-  --salt-accent-borderColor-disabled: var(--salt-palette-accent-disabled);
-}
-
 /* 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-hover: var(--salt-palette-interact-cta-background-hover);
   --salt-actionable-accented-bold-background: var(--salt-palette-interact-cta-background);
-  --salt-actionable-accented-bold-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-accented-bold-borderColor-hover: var(--salt-palette-alpha-none);
-  --salt-actionable-accented-bold-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-bold-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-accented-bold-borderColor-hover: var(--salt-color-transparent);
+  --salt-actionable-accented-bold-borderColor: var(--salt-color-transparent);
   --salt-actionable-accented-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-accented-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-accented-bold-foreground: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-accented-background-active: var(--salt-palette-interact-cta-background-active);
   --salt-actionable-accented-background-hover: var(--salt-palette-interact-cta-background-hover);
-  --salt-actionable-accented-background: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-background: var(--salt-color-transparent);
   --salt-actionable-accented-borderColor-active: var(--salt-palette-interact-cta-border-active);
   --salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-cta-border-hover);
   --salt-actionable-accented-borderColor: var(--salt-palette-accent);
@@ -1657,134 +1649,134 @@
   --salt-actionable-accented-foreground-hover: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-accented-foreground: var(--salt-palette-accent-foreground-informative);
   --salt-actionable-accented-background-selected: var(--salt-palette-interact-cta-background-active);
-  --salt-actionable-accented-borderColor-selected: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-borderColor-selected: var(--salt-color-transparent);
   --salt-actionable-accented-foreground-selected: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-accented-subtle-background-active: var(--salt-palette-interact-cta-background-active);
   --salt-actionable-accented-subtle-background-hover: var(--salt-palette-interact-cta-background-hover);
-  --salt-actionable-accented-subtle-background: var(--salt-palette-alpha-none);
-  --salt-actionable-accented-subtle-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-accented-subtle-borderColor-hover: var(--salt-palette-alpha-none);
-  --salt-actionable-accented-subtle-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-subtle-background: var(--salt-color-transparent);
+  --salt-actionable-accented-subtle-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-accented-subtle-borderColor-hover: var(--salt-color-transparent);
+  --salt-actionable-accented-subtle-borderColor: var(--salt-color-transparent);
   --salt-actionable-accented-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-accented-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-accented-subtle-foreground: var(--salt-palette-accent-foreground-informative);
   --salt-actionable-bold-background-active: var(--salt-palette-interact-primary-background-active);
   --salt-actionable-bold-background-hover: var(--salt-palette-interact-primary-background-hover);
   --salt-actionable-bold-background: var(--salt-palette-interact-primary-background);
-  --salt-actionable-bold-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-bold-borderColor-hover: var(--salt-palette-alpha-none);
-  --salt-actionable-bold-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-bold-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-bold-borderColor-hover: var(--salt-color-transparent);
+  --salt-actionable-bold-borderColor: var(--salt-color-transparent);
   --salt-actionable-bold-foreground-active: var(--salt-palette-interact-primary-foreground-active);
   --salt-actionable-bold-foreground-hover: var(--salt-palette-neutral-primary-foreground);
   --salt-actionable-bold-foreground: var(--salt-palette-neutral-primary-foreground);
   --salt-actionable-background-active: var(--salt-palette-interact-primary-background-active);
   --salt-actionable-background-hover: var(--salt-palette-interact-primary-background-hover);
-  --salt-actionable-background: var(--salt-palette-alpha-none);
-  --salt-actionable-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-borderColor-hover: var(--salt-palette-alpha-none);
+  --salt-actionable-background: var(--salt-color-transparent);
+  --salt-actionable-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-borderColor-hover: var(--salt-color-transparent);
   --salt-actionable-borderColor: var(--salt-palette-interact-border);
   --salt-actionable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
   --salt-actionable-foreground-hover: var(--salt-palette-neutral-primary-foreground);
   --salt-actionable-foreground: var(--salt-palette-neutral-primary-foreground);
   --salt-actionable-background-selected: var(--salt-palette-interact-primary-background-active);
-  --salt-actionable-borderColor-selected: var(--salt-palette-alpha-none);
+  --salt-actionable-borderColor-selected: var(--salt-color-transparent);
   --salt-actionable-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
   --salt-actionable-subtle-background-active: var(--salt-palette-interact-primary-background-active);
   --salt-actionable-subtle-background-hover: var(--salt-palette-interact-primary-background-hover);
-  --salt-actionable-subtle-background: var(--salt-palette-alpha-none);
-  --salt-actionable-subtle-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-subtle-borderColor-hover: var(--salt-palette-alpha-none);
-  --salt-actionable-subtle-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-subtle-background: var(--salt-color-transparent);
+  --salt-actionable-subtle-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-subtle-borderColor-hover: var(--salt-color-transparent);
+  --salt-actionable-subtle-borderColor: var(--salt-color-transparent);
   --salt-actionable-subtle-foreground-active: var(--salt-palette-interact-primary-foreground-active);
   --salt-actionable-subtle-foreground-hover: var(--salt-palette-neutral-primary-foreground);
   --salt-actionable-subtle-foreground: var(--salt-palette-neutral-primary-foreground);
   --salt-actionable-negative-bold-background-active: var(--salt-palette-negative-background-active);
   --salt-actionable-negative-bold-background-hover: var(--salt-palette-negative-background-hover);
   --salt-actionable-negative-bold-background: var(--salt-palette-negative-background);
-  --salt-actionable-negative-bold-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-negative-bold-borderColor-hover: var(--salt-palette-alpha-none);
-  --salt-actionable-negative-bold-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-bold-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-negative-bold-borderColor-hover: var(--salt-color-transparent);
+  --salt-actionable-negative-bold-borderColor: var(--salt-color-transparent);
   --salt-actionable-negative-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-negative-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-negative-bold-foreground: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-negative-background-active: var(--salt-palette-negative-background-active);
   --salt-actionable-negative-background-hover: var(--salt-palette-negative-background-hover);
-  --salt-actionable-negative-background: var(--salt-palette-alpha-none);
-  --salt-actionable-negative-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-negative-borderColor-hover: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-background: var(--salt-color-transparent);
+  --salt-actionable-negative-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-negative-borderColor-hover: var(--salt-color-transparent);
   --salt-actionable-negative-borderColor: var(--salt-palette-negative-border);
   --salt-actionable-negative-foreground-active: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-negative-foreground-hover: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-negative-foreground: var(--salt-palette-negative-foreground);
   --salt-actionable-negative-background-selected: var(--salt-palette-negative-background-active);
-  --salt-actionable-negative-borderColor-selected: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-borderColor-selected: var(--salt-color-transparent);
   --salt-actionable-negative-foreground-selected: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-negative-subtle-background-active: var(--salt-palette-negative-background-active);
   --salt-actionable-negative-subtle-background-hover: var(--salt-palette-negative-background-hover);
-  --salt-actionable-negative-subtle-background: var(--salt-palette-alpha-none);
-  --salt-actionable-negative-subtle-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-negative-subtle-borderColor-hover: var(--salt-palette-alpha-none);
-  --salt-actionable-negative-subtle-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-subtle-background: var(--salt-color-transparent);
+  --salt-actionable-negative-subtle-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-negative-subtle-borderColor-hover: var(--salt-color-transparent);
+  --salt-actionable-negative-subtle-borderColor: var(--salt-color-transparent);
   --salt-actionable-negative-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-negative-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-negative-subtle-foreground: var(--salt-palette-negative-foreground);
   --salt-actionable-positive-bold-background-active: var(--salt-palette-positive-background-active);
   --salt-actionable-positive-bold-background-hover: var(--salt-palette-positive-background-hover);
   --salt-actionable-positive-bold-background: var(--salt-palette-positive-background);
-  --salt-actionable-positive-bold-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-positive-bold-borderColor-hover: var(--salt-palette-alpha-none);
-  --salt-actionable-positive-bold-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-bold-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-positive-bold-borderColor-hover: var(--salt-color-transparent);
+  --salt-actionable-positive-bold-borderColor: var(--salt-color-transparent);
   --salt-actionable-positive-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-positive-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-positive-bold-foreground: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-positive-background-active: var(--salt-palette-positive-background-active);
   --salt-actionable-positive-background-hover: var(--salt-palette-positive-background-hover);
-  --salt-actionable-positive-background: var(--salt-palette-alpha-none);
-  --salt-actionable-positive-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-positive-borderColor-hover: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-background: var(--salt-color-transparent);
+  --salt-actionable-positive-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-positive-borderColor-hover: var(--salt-color-transparent);
   --salt-actionable-positive-borderColor: var(--salt-palette-positive-border);
   --salt-actionable-positive-foreground-active: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-positive-foreground-hover: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-positive-foreground: var(--salt-palette-positive-foreground);
   --salt-actionable-positive-background-selected: var(--salt-palette-positive-background-active);
-  --salt-actionable-positive-borderColor-selected: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-borderColor-selected: var(--salt-color-transparent);
   --salt-actionable-positive-foreground-selected: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-positive-subtle-background-active: var(--salt-palette-positive-background-active);
   --salt-actionable-positive-subtle-background-hover: var(--salt-palette-positive-background-hover);
-  --salt-actionable-positive-subtle-background: var(--salt-palette-alpha-none);
-  --salt-actionable-positive-subtle-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-positive-subtle-borderColor-hover: var(--salt-palette-alpha-none);
-  --salt-actionable-positive-subtle-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-subtle-background: var(--salt-color-transparent);
+  --salt-actionable-positive-subtle-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-positive-subtle-borderColor-hover: var(--salt-color-transparent);
+  --salt-actionable-positive-subtle-borderColor: var(--salt-color-transparent);
   --salt-actionable-positive-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-positive-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-positive-subtle-foreground: var(--salt-palette-positive-foreground);
   --salt-actionable-caution-bold-background-active: var(--salt-palette-warning-action-active);
   --salt-actionable-caution-bold-background-hover: var(--salt-palette-warning-action-hover);
   --salt-actionable-caution-bold-background: var(--salt-palette-warning-action);
-  --salt-actionable-caution-bold-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-caution-bold-borderColor-hover: var(--salt-palette-alpha-none);
-  --salt-actionable-caution-bold-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-bold-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-caution-bold-borderColor-hover: var(--salt-color-transparent);
+  --salt-actionable-caution-bold-borderColor: var(--salt-color-transparent);
   --salt-actionable-caution-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-caution-bold-foreground-hover: var(--salt-palette-warning-action-foreground);
   --salt-actionable-caution-bold-foreground: var(--salt-palette-warning-action-foreground);
   --salt-actionable-caution-background-active: var(--salt-palette-warning-action-active);
   --salt-actionable-caution-background-hover: var(--salt-palette-warning-action-hover);
-  --salt-actionable-caution-background: var(--salt-palette-alpha-none);
-  --salt-actionable-caution-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-caution-borderColor-hover: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-background: var(--salt-color-transparent);
+  --salt-actionable-caution-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-caution-borderColor-hover: var(--salt-color-transparent);
   --salt-actionable-caution-borderColor: var(--salt-palette-warning-border);
   --salt-actionable-caution-foreground-active: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-caution-foreground-hover: var(--salt-palette-warning-action-foreground);
   --salt-actionable-caution-foreground: var(--salt-palette-warning-foreground-informative);
   --salt-actionable-caution-background-selected: var(--salt-palette-warning-action-active);
-  --salt-actionable-caution-borderColor-selected: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-borderColor-selected: var(--salt-color-transparent);
   --salt-actionable-caution-foreground-selected: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-caution-subtle-background-active: var(--salt-palette-warning-action-active);
   --salt-actionable-caution-subtle-background-hover: var(--salt-palette-warning-action-hover);
-  --salt-actionable-caution-subtle-background: var(--salt-palette-alpha-none);
-  --salt-actionable-caution-subtle-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-caution-subtle-borderColor-hover: var(--salt-palette-alpha-none);
-  --salt-actionable-caution-subtle-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-subtle-background: var(--salt-color-transparent);
+  --salt-actionable-caution-subtle-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-caution-subtle-borderColor-hover: var(--salt-color-transparent);
+  --salt-actionable-caution-subtle-borderColor: var(--salt-color-transparent);
   --salt-actionable-caution-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
   --salt-actionable-caution-subtle-foreground-hover: var(--salt-palette-warning-action-foreground);
   --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-foreground-informative);
@@ -1932,16 +1924,13 @@
   --salt-editable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
   --salt-editable-borderColor-hover: var(--salt-palette-interact-border-hover);
   --salt-editable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
+  --salt-editable-background-readonly: var(--salt-color-transparent);
   --salt-editable-primary-background: var(--salt-palette-neutral-primary-background);
-  --salt-editable-primary-background-active: var(--salt-palette-neutral-primary-background);
   --salt-editable-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
-  --salt-editable-primary-background-hover: var(--salt-palette-neutral-primary-background);
-  --salt-editable-primary-background-readonly: var(--salt-palette-alpha-none);
   --salt-editable-secondary-background: var(--salt-palette-neutral-secondary-background);
-  --salt-editable-secondary-background-active: var(--salt-palette-neutral-secondary-background);
   --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-tertiary-background: var(--salt-palette-neutral-tertiary-background);
+  --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
 }
 
 /* css/legacy/characteristics/focused.css */
@@ -1971,7 +1960,7 @@
 .salt-theme {
   --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
   --salt-navigable-accent-indicator-active: var(--salt-palette-navigate-indicator-active);
-  --salt-navigable-accent-background-active: var(--salt-palette-alpha-none);
+  --salt-navigable-accent-background-active: var(--salt-color-transparent);
   --salt-navigable-accent-borderColor-active: var(--salt-palette-interact-border-active);
 }
 
@@ -1996,17 +1985,15 @@
   --salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
   --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
   --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
-  --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
   --salt-selectable-borderColor-readonly: var(--salt-palette-interact-border);
   --salt-selectable-foreground: var(--salt-palette-interact-foreground);
-  --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
   --salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
   --salt-selectable-foreground-selected: var(--salt-palette-interact-foreground-active);
   --salt-selectable-foreground-selectedDisabled: var(--salt-palette-interact-foreground-activeDisabled);
-  --salt-selectable-background: var(--salt-palette-alpha-none);
+  --salt-selectable-background: var(--salt-color-transparent);
   --salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
   --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
-  --salt-selectable-background-disabled: var(--salt-palette-alpha-none);
+  --salt-selectable-background-disabled: var(--salt-color-transparent);
   --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
 }
 
@@ -2017,12 +2004,14 @@
   --salt-sentiment-negative-foreground-decorative: var(--salt-palette-negative-foreground);
   --salt-sentiment-positive-foreground-decorative: var(--salt-palette-positive-foreground);
   --salt-sentiment-neutral-track: var(--salt-palette-neutral-border);
-  --salt-sentiment-neutral-track-disabled: var(--salt-palette-neutral-border-disabled);
   --salt-sentiment-caution-dataviz: var(--salt-palette-warning-foreground-decorative);
   --salt-sentiment-negative-dataviz: var(--salt-palette-error-foreground-decorative);
   --salt-sentiment-positive-dataviz: var(--salt-palette-success-foreground-decorative);
   --salt-sentiment-neutral-dataviz: var(--salt-palette-neutral-secondary-foreground);
-  --salt-sentiment-accent-dataviz: var(--salt-palette-accent-foreground-informative);
+  --salt-sentiment-accent-dataviz: var(--salt-palette-warning-foreground-decorative);
+  --salt-sentiment-accent-background: var(--salt-palette-accent);
+  --salt-sentiment-accent-background-disabled: var(--salt-palette-accent-disabled);
+  --salt-sentiment-accent-borderColor: var(--salt-palette-accent);
 }
 
 /* css/legacy/characteristics/separable.css */
@@ -2444,6 +2433,9 @@
   --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-accent-background: var(--salt-palette-accent);
+  --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
+  --salt-accent-borderColor: var(--salt-palette-accent);
   --salt-track-borderStyle: solid;
   --salt-track-borderStyle-active: solid;
   --salt-track-borderStyle-complete: solid;
@@ -2481,11 +2473,15 @@
 .salt-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-editable-primary-background-active: var(--salt-palette-neutral-primary-background);
+  --salt-editable-primary-background-hover: var(--salt-palette-neutral-primary-background);
+  --salt-editable-primary-background-readonly: var(--salt-color-transparent);
+  --salt-editable-secondary-background-active: var(--salt-palette-neutral-secondary-background);
+  --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
+  --salt-editable-secondary-background-readonly: var(--salt-color-transparent);
   --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);
@@ -2501,6 +2497,8 @@
   --salt-overlayable-rangeSelection: var(--salt-overlayable-background-rangeSelection);
   --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
   --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
+  --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
+  --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
   --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
   --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
   --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
@@ -2576,6 +2574,7 @@
   --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
   --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
   --salt-accent-foreground: var(--salt-palette-accent-foreground);
+  --salt-accent-borderColor-disabled: var(--salt-palette-accent-disabled);
   --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);
@@ -2625,51 +2624,51 @@
   --salt-actionable-secondary-foreground-hover: var(--salt-actionable-subtle-foreground-hover);
   --salt-actionable-secondary-foreground: var(--salt-actionable-subtle-foreground);
   --salt-actionable-accented-bold-background-disabled: var(--salt-palette-interact-cta-background-disabled);
-  --salt-actionable-accented-bold-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-bold-borderColor-disabled: var(--salt-color-transparent);
   --salt-actionable-accented-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
   --salt-actionable-bold-background-disabled: var(--salt-palette-interact-primary-background-disabled);
-  --salt-actionable-bold-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-bold-borderColor-disabled: var(--salt-color-transparent);
   --salt-actionable-bold-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
-  --salt-actionable-accented-background-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-background-disabled: var(--salt-color-transparent);
   --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-disabled);
   --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
-  --salt-actionable-background-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-background-disabled: var(--salt-color-transparent);
   --salt-actionable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
   --salt-actionable-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
-  --salt-actionable-accented-subtle-background-disabled: var(--salt-palette-alpha-none);
-  --salt-actionable-accented-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-subtle-background-disabled: var(--salt-color-transparent);
+  --salt-actionable-accented-subtle-borderColor-disabled: var(--salt-color-transparent);
   --salt-actionable-accented-subtle-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
-  --salt-actionable-subtle-background-disabled: var(--salt-palette-alpha-none);
-  --salt-actionable-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-subtle-background-disabled: var(--salt-color-transparent);
+  --salt-actionable-subtle-borderColor-disabled: var(--salt-color-transparent);
   --salt-actionable-subtle-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
   --salt-actionable-negative-bold-background-disabled: var(--salt-palette-negative-background-disabled);
-  --salt-actionable-negative-bold-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-bold-borderColor-disabled: var(--salt-color-transparent);
   --salt-actionable-negative-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
-  --salt-actionable-negative-background-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-background-disabled: var(--salt-color-transparent);
   --salt-actionable-negative-borderColor-disabled: var(--salt-palette-negative-border-disabled);
   --salt-actionable-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
-  --salt-actionable-negative-subtle-background-disabled: var(--salt-palette-alpha-none);
-  --salt-actionable-negative-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-subtle-background-disabled: var(--salt-color-transparent);
+  --salt-actionable-negative-subtle-borderColor-disabled: var(--salt-color-transparent);
   --salt-actionable-negative-subtle-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
   --salt-actionable-positive-bold-background-disabled: var(--salt-palette-positive-background-disabled);
-  --salt-actionable-positive-bold-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-bold-borderColor-disabled: var(--salt-color-transparent);
   --salt-actionable-positive-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
-  --salt-actionable-positive-background-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-background-disabled: var(--salt-color-transparent);
   --salt-actionable-positive-borderColor-disabled: var(--salt-palette-positive-border-disabled);
   --salt-actionable-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
-  --salt-actionable-positive-subtle-background-disabled: var(--salt-palette-alpha-none);
-  --salt-actionable-positive-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-subtle-background-disabled: var(--salt-color-transparent);
+  --salt-actionable-positive-subtle-borderColor-disabled: var(--salt-color-transparent);
   --salt-actionable-positive-subtle-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
   --salt-actionable-caution-bold-background-disabled: var(--salt-palette-warning-action-disabled);
-  --salt-actionable-caution-bold-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-bold-borderColor-disabled: var(--salt-color-transparent);
   --salt-actionable-caution-bold-foreground-disabled: var(--salt-palette-warning-action-foreground-disabled);
-  --salt-actionable-caution-background-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-background-disabled: var(--salt-color-transparent);
   --salt-actionable-caution-borderColor-disabled: var(--salt-palette-warning-border-disabled);
   --salt-actionable-caution-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
-  --salt-actionable-caution-subtle-background-disabled: var(--salt-palette-alpha-none);
-  --salt-actionable-caution-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-subtle-background-disabled: var(--salt-color-transparent);
+  --salt-actionable-caution-subtle-borderColor-disabled: var(--salt-color-transparent);
   --salt-actionable-caution-subtle-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
-  --salt-separable-background: var(--salt-palette-alpha-none);
+  --salt-separable-background: var(--salt-color-transparent);
   --salt-category-1-bold-foreground: var(--salt-palette-accent-foreground);
   --salt-category-2-bold-foreground: var(--salt-palette-accent-foreground);
   --salt-category-3-bold-foreground: var(--salt-palette-accent-foreground);
@@ -2753,6 +2752,7 @@
   --salt-category-20-subtle-foreground: var(--salt-palette-categorical-20-strong);
   --salt-category-20-subtle-background: var(--salt-palette-categorical-20-weakest);
   --salt-category-20-subtle-borderColor: var(--salt-palette-categorical-20);
+  --salt-sentiment-neutral-track-disabled: var(--salt-palette-neutral-border-disabled);
 }
 
 /* css/legacy/deprecated/fade.css */
@@ -2857,6 +2857,7 @@
   --salt-palette-opacity-primary-border: var(--salt-opacity-45);
   --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
   --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
+  --salt-palette-alpha-none: transparent;
   --salt-palette-alpha: var(--salt-palette-alpha-contrast-medium);
   --salt-palette-alpha-strong: var(--salt-palette-alpha-contrast-mediumHigh);
   --salt-palette-alpha-weak: var(--salt-palette-alpha-contrast-mediumLow);
@@ -2901,6 +2902,7 @@
   --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
   --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-40a);
   --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-40a);
+  --salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-40a);
   --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);
@@ -2991,6 +2993,7 @@
   --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
   --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-40a);
   --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-40a);
+  --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-40a);
   --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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/theme",
-  "version": "1.40.0",
+  "version": "1.42.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",