diff --git a/.changeset/silent-pigs-love.md b/.changeset/silent-pigs-love.md new file mode 100644 index 00000000000..fc4496b8886 --- /dev/null +++ b/.changeset/silent-pigs-love.md @@ -0,0 +1,10 @@ +--- +"@salt-ds/theme": minor +--- + +Deprecated foreground hover and active palette tokens. + +| Deprecated token | Replacement token | +| ---------------------------------- | -------------------------------- | +| `--salt-palette-foreground-active` | `--salt-palette-accent-stronger` | +| `--salt-palette-foreground-hover` | `--salt-palette-accent-strong` | diff --git a/.changeset/sixty-seals-roll.md b/.changeset/sixty-seals-roll.md new file mode 100644 index 00000000000..5efe0b21701 --- /dev/null +++ b/.changeset/sixty-seals-roll.md @@ -0,0 +1,12 @@ +--- +"@salt-ds/theme": patch +--- + +Updated content hover and active tokens so that they switch to Teal when using the Next theme. + +```diff +- --salt-content-foreground-hover: var(--salt-palette-foreground-hover); +- --salt-content-foreground-active: var(--salt-palette-foreground-active); ++ --salt-content-foreground-hover: var(--salt-palette-accent-strong); ++ --salt-content-foreground-active: var(--salt-palette-accent-stronger); +``` diff --git a/packages/theme/css/characteristics/content-next.css b/packages/theme/css/characteristics/content-next.css index dfcac9686dd..b082966e46c 100644 --- a/packages/theme/css/characteristics/content-next.css +++ b/packages/theme/css/characteristics/content-next.css @@ -7,8 +7,8 @@ --salt-content-bold-foreground: var(--salt-palette-foreground-primary-alt); --salt-content-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled); - --salt-content-foreground-hover: var(--salt-palette-foreground-hover); - --salt-content-foreground-active: var(--salt-palette-foreground-active); + --salt-content-foreground-hover: var(--salt-palette-accent-strong); + --salt-content-foreground-active: var(--salt-palette-accent-stronger); --salt-content-foreground-visited: var(--salt-palette-foreground-visited); --salt-content-foreground-highlight: var(--salt-palette-accent-weaker); } diff --git a/packages/theme/css/deprecated/palette-next.css b/packages/theme/css/deprecated/palette-next.css new file mode 100644 index 00000000000..d01610c25ba --- /dev/null +++ b/packages/theme/css/deprecated/palette-next.css @@ -0,0 +1,9 @@ +.salt-theme[data-mode="light"] { + --salt-palette-foreground-active: var(--salt-color-blue-700); + --salt-palette-foreground-hover: var(--salt-color-blue-600); +} + +.salt-theme[data-mode="dark"] { + --salt-palette-foreground-active: var(--salt-color-blue-300); + --salt-palette-foreground-hover: var(--salt-color-blue-400); +} diff --git a/packages/theme/css/palette/foreground-next.css b/packages/theme/css/palette/foreground-next.css index c8952497235..09ff04fd197 100644 --- a/packages/theme/css/palette/foreground-next.css +++ b/packages/theme/css/palette/foreground-next.css @@ -1,6 +1,4 @@ .salt-theme.salt-theme-next[data-mode="light"] { - --salt-palette-foreground-active: var(--salt-color-blue-700); - --salt-palette-foreground-hover: var(--salt-color-blue-600); --salt-palette-foreground-primary: var(--salt-color-black); --salt-palette-foreground-primary-disabled: var(--salt-color-black-40a); --salt-palette-foreground-primary-alt: var(--salt-color-white); @@ -10,8 +8,6 @@ --salt-palette-foreground-visited: var(--salt-color-purple-800); } .salt-theme.salt-theme-next[data-mode="dark"] { - --salt-palette-foreground-active: var(--salt-color-blue-300); - --salt-palette-foreground-hover: var(--salt-color-blue-400); --salt-palette-foreground-primary: var(--salt-color-white); --salt-palette-foreground-primary-disabled: var(--salt-color-white-40a); --salt-palette-foreground-primary-alt: var(--salt-color-white); diff --git a/packages/theme/css/theme-next.css b/packages/theme/css/theme-next.css index 22763d11e43..3975dd975fd 100644 --- a/packages/theme/css/theme-next.css +++ b/packages/theme/css/theme-next.css @@ -32,3 +32,4 @@ /* Deprecated */ @import url(deprecated/foundations-next.css); +@import url(deprecated/palette-next.css);