Update alpha colours

jpmorganchase · Feb 14, 2025 · 12d4517 · 12d4517
1 parent 84e7c46
commit 12d4517
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 14 deletions.
diff --git a/packages/theme/css/characteristics/track-next.css b/packages/theme/css/characteristics/track-next.css
@@ -1,3 +1,3 @@
 .salt-theme.salt-theme-next {
-  --salt-track-borderColor: var(--salt-palette-alpha);
+  --salt-track-borderColor: var(--salt-palette-alpha-weak);
 }
diff --git a/packages/theme/css/deprecated/fade.css b/packages/theme/css/deprecated/fade.css
@@ -89,4 +89,9 @@
   --salt-color-black-fade-background-highlight: rgba(0, 0, 0, var(--salt-opacity-25));
   --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
   --salt-color-white-fade-background-highlight: rgba(255, 255, 255, var(--salt-opacity-25));
+
+  --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
+  --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
+  --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
+  --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
 }
diff --git a/packages/theme/css/foundations/alpha-next.css b/packages/theme/css/foundations/alpha-next.css
@@ -1,21 +1,17 @@
-/* 
+/*
 TODO: discuss whether this should be an actual file, or should inline these values.
 con: If we offer these values, then it could misleading that we're offering all these values
  */
 .salt-theme.salt-theme-next {
   --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
-  --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
   --salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2);
   --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
   --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
-  --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
   --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
   --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
-  --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
   --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
   --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
   --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
-  --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
   --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
   --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
   --salt-color-blue-300-40a: rgba(var(--salt-color-blue-300-rgb), 0.4);

diff --git a/packages/theme/css/foundations/alpha.css b/packages/theme/css/foundations/alpha.css
@@ -4,15 +4,14 @@ con: If we offer these values, then it could misleading that we're offering all
  */
 .salt-theme {
   --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
-  --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
+  --salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2);
   --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
   --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
-  --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
   --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
   --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
-  --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
+  --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
   --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
-  --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
+  --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
   --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
   --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
   --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);

diff --git a/packages/theme/css/palette/alpha.css b/packages/theme/css/palette/alpha.css
@@ -1,7 +1,7 @@
 .salt-theme[data-mode="light"] {
   --salt-palette-alpha: var(--salt-color-black-30a);
-  --salt-palette-alpha-strong: var(--salt-color-black-45a);
-  --salt-palette-alpha-weak: var(--salt-color-black-15a);
+  --salt-palette-alpha-strong: var(--salt-color-black-40a);
+  --salt-palette-alpha-weak: var(--salt-color-black-20a);
   --salt-palette-alpha-weaker: var(--salt-color-black-10a);
 
   --salt-palette-alpha-backdrop: var(--salt-color-white-70a);
@@ -10,8 +10,8 @@
 
 .salt-theme[data-mode="dark"] {
   --salt-palette-alpha: var(--salt-color-white-30a);
-  --salt-palette-alpha-strong: var(--salt-color-white-45a);
-  --salt-palette-alpha-weak: var(--salt-color-white-15a);
+  --salt-palette-alpha-strong: var(--salt-color-white-40a);
+  --salt-palette-alpha-weak: var(--salt-color-white-20a);
   --salt-palette-alpha-weaker: var(--salt-color-white-10a);
 
   --salt-palette-alpha-backdrop: var(--salt-color-black-70a);