Deprecate navigable background hover (#4607)

jpmorganchase · Jan 23, 2025 · 1203a3f · 1203a3f
1 parent 9883b58
commit 1203a3f
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 9 deletions.
diff --git a/.changeset/two-tomatoes-press.md b/.changeset/two-tomatoes-press.md
@@ -0,0 +1,11 @@
+---
+"@salt-ds/theme": minor
+---
+
+Deprecate `--salt-navigable-background-hover` and related tokens.
+
+- `--salt-navigable-background-hover`
+- `--salt-palette-navigate-background-hover`
+- `--salt-color-white-fade-background-hover`
+- `--salt-color-black-fade-background-hover`
+- `--salt-opacity-8`
diff --git a/packages/theme/css/characteristics/navigable-next.css b/packages/theme/css/characteristics/navigable-next.css
@@ -1,6 +1,4 @@
 .salt-theme.salt-theme-next {
   --salt-navigable-indicator-hover: var(--salt-palette-neutral);
   --salt-navigable-indicator-active: var(--salt-palette-accent);
-
-  /* --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover); */
 }
diff --git a/packages/theme/css/characteristics/navigable.css b/packages/theme/css/characteristics/navigable.css
@@ -12,8 +12,6 @@
   --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
   --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
 
-  --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover);
-
   /* Link */
   --salt-navigable-textDecoration: underline;
   --salt-navigable-textDecoration-hover: none;

diff --git a/packages/theme/css/deprecated/characteristics.css b/packages/theme/css/deprecated/characteristics.css
@@ -133,6 +133,7 @@
   --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-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
+  --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover);
 
   /* Accent */
   --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold); /* Use --salt-text-notation-fontWeight */

diff --git a/packages/theme/css/deprecated/foundations.css b/packages/theme/css/deprecated/foundations.css
@@ -16,6 +16,7 @@
   --salt-opacity-2: 0.25;
   --salt-opacity-3: 0.4;
   --salt-opacity-4: 0.7;
+  --salt-opacity-8: 0.08;
 
   /* Shadow */
   --salt-shadow-0: none;
@@ -28,6 +29,10 @@
   /* Typography */
   --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
   --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
+
+  /* Fade */
+  --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
+  --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
 }
 
 .salt-theme[data-mode="light"] {

diff --git a/packages/theme/css/deprecated/palette.css b/packages/theme/css/deprecated/palette.css
@@ -74,6 +74,7 @@
   --salt-palette-navigate-tertiary-background-active: transparent;
   --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
   --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
+  --salt-palette-navigate-background-hover: var(--salt-color-black-fade-background-hover);
 
   /* Track */
   --salt-palette-track-border: var(--salt-color-gray-90);
@@ -145,6 +146,7 @@
   --salt-palette-navigate-tertiary-background-active: transparent;
   --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-700);
   --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
+  --salt-palette-navigate-background-hover: var(--salt-color-white-fade-background-hover);
 
   /* Track */
   --salt-palette-track-border: var(--salt-color-gray-90);

diff --git a/packages/theme/css/foundations/fade.css b/packages/theme/css/foundations/fade.css
@@ -75,10 +75,8 @@
   --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));
 
-  --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
   --salt-color-black-fade-background-selection: rgba(0, 0, 0, var(--salt-opacity-15));
   --salt-color-black-fade-background-highlight: rgba(0, 0, 0, var(--salt-opacity-25));
-  --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
   --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
   --salt-color-white-fade-background-highlight: rgba(255, 255, 255, var(--salt-opacity-25));
 }
diff --git a/packages/theme/css/foundations/opacity.css b/packages/theme/css/foundations/opacity.css
@@ -1,6 +1,5 @@
 .salt-theme {
   --salt-opacity-0: 0;
-  --salt-opacity-8: 0.08;
   --salt-opacity-15: 0.15;
   --salt-opacity-25: 0.25;
   --salt-opacity-40: 0.4;

diff --git a/packages/theme/css/palette/navigate.css b/packages/theme/css/palette/navigate.css
@@ -1,5 +1,4 @@
 .salt-theme[data-mode="light"] {
-  --salt-palette-navigate-background-hover: var(--salt-color-black-fade-background-hover);
   --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);
@@ -8,7 +7,6 @@
 }
 
 .salt-theme[data-mode="dark"] {
-  --salt-palette-navigate-background-hover: var(--salt-color-white-fade-background-hover);
   --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);