Update button color mapping to meet contrast

packages/theme/css/characteristics/actionable-next.css

@@ -1,29 +1,29 @@
 .salt-theme.salt-theme-next {
   /* CTA variant */
   --salt-actionable-cta-foreground: var(--salt-palette-foreground-primary-alt);
-  --salt-actionable-cta-foreground-hover: var(--salt-palette-foreground-primary-alt);
-  --salt-actionable-cta-foreground-active: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-cta-foreground-hover: var(--salt-palette-foreground-invert);
+  --salt-actionable-cta-foreground-active: var(--salt-palette-foreground-invert);
   --salt-actionable-cta-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
-  --salt-actionable-cta-background: var(--salt-palette-accent-action);
-  --salt-actionable-cta-background-hover: var(--salt-palette-accent-weak);
-  --salt-actionable-cta-background-active: var(--salt-palette-accent-strong);
+  --salt-actionable-cta-background: var(--salt-palette-accent);
+  --salt-actionable-cta-background-hover: var(--salt-palette-accent-strong);
+  --salt-actionable-cta-background-active: var(--salt-palette-accent-stronger);
   --salt-actionable-cta-background-disabled: var(--salt-palette-accent-disabled);
   /* Primary variant */
   --salt-actionable-primary-foreground: var(--salt-palette-foreground-primary-alt);
-  --salt-actionable-primary-foreground-hover: var(--salt-palette-foreground-primary-alt);
-  --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-primary-foreground-hover: var(--salt-palette-foreground-invert);
+  --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-invert);
   --salt-actionable-primary-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
   --salt-actionable-primary-background: var(--salt-palette-neutral);
-  --salt-actionable-primary-background-hover: var(--salt-palette-neutral-weak);
-  --salt-actionable-primary-background-active: var(--salt-palette-neutral-action-active);
-  --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-weak-disabled);
+  --salt-actionable-primary-background-hover: var(--salt-palette-neutral-strong);
+  --salt-actionable-primary-background-active: var(--salt-palette-neutral-stronger);
+  --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-strong-disabled);
   /* Secondary variant */
   --salt-actionable-secondary-foreground: var(--salt-palette-foreground-primary);
-  --salt-actionable-secondary-foreground-hover: var(--salt-palette-foreground-primary-alt);
-  --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-secondary-foreground-hover: var(--salt-palette-foreground-invert);
+  --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-invert);
   --salt-actionable-secondary-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
   --salt-actionable-secondary-background: var(--salt-palette-background-none);
-  --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-weak);
-  --salt-actionable-secondary-background-active: var(--salt-palette-neutral-action-active);
+  --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-strong);
+  --salt-actionable-secondary-background-active: var(--salt-palette-neutral-stronger);
   --salt-actionable-secondary-background-disabled: var(--salt-palette-background-none);
 }

packages/theme/css/palette/accent-next.css

@@ -10,8 +10,6 @@
   --salt-palette-accent-weaker: var(--salt-color-blue-200);
   --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a);
   --salt-palette-accent-weakest: var(--salt-color-blue-100);
-  --salt-palette-accent-action: var(--salt-color-blue-500);
-  --salt-palette-accent-action-active: var(--salt-color-blue-600);
 }
 
 .salt-theme.salt-theme-next[data-mode="dark"] {
@@ -26,6 +24,4 @@
   --salt-palette-accent-weaker: var(--salt-color-blue-800);
   --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a);
   --salt-palette-accent-weakest: var(--salt-color-blue-900);
-  --salt-palette-accent-action: var(--salt-color-blue-500);
-  --salt-palette-accent-action-active: var(--salt-color-blue-600);
 }

packages/theme/css/palette/foreground-next.css

@@ -8,6 +8,7 @@
   --salt-palette-foreground-secondary: var(--salt-color-gray-600);
   --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-600-40a);
   --salt-palette-foreground-visited: var(--salt-color-purple-800);
+  --salt-palette-foreground-invert: var(--salt-color-white);
 }
 .salt-theme.salt-theme-next[data-mode="dark"] {
   --salt-palette-foreground-active: var(--salt-color-blue-300);
@@ -19,4 +20,5 @@
   --salt-palette-foreground-secondary: var(--salt-color-gray-400);
   --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-400-40a);
   --salt-palette-foreground-visited: var(--salt-color-purple-200);
+  --salt-palette-foreground-invert: var(--salt-color-black);
 }

packages/theme/css/palette/neutral-next.css

@@ -4,6 +4,7 @@
   --salt-palette-neutral-readonly: var(--salt-color-gray-500-10a);
   --salt-palette-neutral-strong: var(--salt-color-gray-600);
   --salt-palette-neutral-strong-disabled: var(--salt-color-gray-600-40a);
+  --salt-palette-neutral-stronger: var(--salt-color-gray-700);
   --salt-palette-neutral-stronger-primary: var(--salt-color-black-40a);
   --salt-palette-neutral-stronger-secondary: var(--salt-color-black-30a);
   --salt-palette-neutral-stronger-tertiary: var(--salt-color-black-20a);
@@ -14,15 +15,14 @@
   --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-300-40a);
   --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-300-10a);
   --salt-palette-neutral-weakest: var(--salt-color-gray-200);
-  --salt-palette-neutral-action: var(--salt-color-gray-500);
-  --salt-palette-neutral-action-active: var(--salt-color-gray-600);
 }
 .salt-theme.salt-theme-next[data-mode="dark"] {
   --salt-palette-neutral: var(--salt-color-gray-500);
   --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a);
   --salt-palette-neutral-readonly: var(--salt-color-gray-500-10a);
   --salt-palette-neutral-strong: var(--salt-color-gray-400);
   --salt-palette-neutral-strong-disabled: var(--salt-color-gray-400-40a);
+  --salt-palette-neutral-stronger: var(--salt-color-gray-300);
   --salt-palette-neutral-stronger-primary: var(--salt-color-white-40a);
   --salt-palette-neutral-stronger-secondary: var(--salt-color-white-30a);
   --salt-palette-neutral-stronger-tertiary: var(--salt-color-white-20a);
@@ -33,6 +33,4 @@
   --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-700-40a);
   --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-700-10a);
   --salt-palette-neutral-weakest: var(--salt-color-gray-800);
-  --salt-palette-neutral-action: var(--salt-color-gray-500);
-  --salt-palette-neutral-action-active: var(--salt-color-gray-600);
 }