diff --git a/packages/theme/css/characteristics/actionable-next.css b/packages/theme/css/characteristics/actionable-next.css index d54ddf4a726..a74040d5020 100644 --- a/packages/theme/css/characteristics/actionable-next.css +++ b/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); } diff --git a/packages/theme/css/palette/accent-next.css b/packages/theme/css/palette/accent-next.css index e1c1aed2d11..81a710646c2 100644 --- a/packages/theme/css/palette/accent-next.css +++ b/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); } diff --git a/packages/theme/css/palette/foreground-next.css b/packages/theme/css/palette/foreground-next.css index 7902b57832e..35a1492c502 100644 --- a/packages/theme/css/palette/foreground-next.css +++ b/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); } diff --git a/packages/theme/css/palette/neutral-next.css b/packages/theme/css/palette/neutral-next.css index 104311842b3..e46a4cd40b2 100644 --- a/packages/theme/css/palette/neutral-next.css +++ b/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,8 +15,6 @@ --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); @@ -23,6 +22,7 @@ --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); }