From 4a2f872f14c4cfca316aa02315172385b3e53907 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 25 Nov 2024 14:49:39 +0000 Subject: [PATCH] Fix actionable background token reference --- .changeset/poor-mayflies-bow.md | 18 ++++++++++++++ .../theme/css/characteristics/actionable.css | 24 +++++++++---------- 2 files changed, 30 insertions(+), 12 deletions(-) create mode 100644 .changeset/poor-mayflies-bow.md diff --git a/.changeset/poor-mayflies-bow.md b/.changeset/poor-mayflies-bow.md new file mode 100644 index 00000000000..313807090ab --- /dev/null +++ b/.changeset/poor-mayflies-bow.md @@ -0,0 +1,18 @@ +--- +"@salt-ds/theme": patch +--- + +Fixed below tokens pointing to incorrect palette token, with underlying value not changing (`transparent`), from `var(--salt-palette-interact-border-none)` to `var(--salt-palette-interact-background)`. + +- `--salt-actionable-negative-background-disabled` +- `--salt-actionable-negative-background` +- `--salt-actionable-negative-subtle-background-disabled` +- `--salt-actionable-negative-subtle-background` +- `--salt-actionable-positive-background-disabled` +- `--salt-actionable-positive-background` +- `--salt-actionable-positive-subtle-background-disabled` +- `--salt-actionable-positive-subtle-background` +- `--salt-actionable-caution-background-disabled` +- `--salt-actionable-caution-background` +- `--salt-actionable-caution-subtle-background-disabled` +- `--salt-actionable-caution-subtle-background` diff --git a/packages/theme/css/characteristics/actionable.css b/packages/theme/css/characteristics/actionable.css index 160ce3b8838..a61b0b48d95 100644 --- a/packages/theme/css/characteristics/actionable.css +++ b/packages/theme/css/characteristics/actionable.css @@ -103,9 +103,9 @@ /* saltButton-negative-outline */ --salt-actionable-negative-background-active: var(--salt-palette-negative-background-active); - --salt-actionable-negative-background-disabled: var(--salt-palette-interact-border-none); + --salt-actionable-negative-background-disabled: var(--salt-palette-interact-background); --salt-actionable-negative-background-hover: var(--salt-palette-negative-background-hover); - --salt-actionable-negative-background: var(--salt-palette-interact-border-none); + --salt-actionable-negative-background: var(--salt-palette-interact-background); --salt-actionable-negative-borderColor-active: var(--salt-palette-interact-border-none); --salt-actionable-negative-borderColor-disabled: var(--salt-palette-negative-border-disabled); --salt-actionable-negative-borderColor-hover: var(--salt-palette-interact-border-none); @@ -117,9 +117,9 @@ /* saltButton-negative-transparent */ --salt-actionable-negative-subtle-background-active: var(--salt-palette-negative-background-active); - --salt-actionable-negative-subtle-background-disabled: var(--salt-palette-interact-border-none); + --salt-actionable-negative-subtle-background-disabled: var(--salt-palette-interact-background); --salt-actionable-negative-subtle-background-hover: var(--salt-palette-negative-background-hover); - --salt-actionable-negative-subtle-background: var(--salt-palette-interact-border-none); + --salt-actionable-negative-subtle-background: var(--salt-palette-interact-background); --salt-actionable-negative-subtle-borderColor-active: var(--salt-palette-interact-border-none); --salt-actionable-negative-subtle-borderColor-disabled: var(--salt-palette-interact-border-none); --salt-actionable-negative-subtle-borderColor-hover: var(--salt-palette-interact-border-none); @@ -145,9 +145,9 @@ /* saltButton-positive-outline */ --salt-actionable-positive-background-active: var(--salt-palette-positive-background-active); - --salt-actionable-positive-background-disabled: var(--salt-palette-interact-border-none); + --salt-actionable-positive-background-disabled: var(--salt-palette-interact-background); --salt-actionable-positive-background-hover: var(--salt-palette-positive-background-hover); - --salt-actionable-positive-background: var(--salt-palette-interact-border-none); + --salt-actionable-positive-background: var(--salt-palette-interact-background); --salt-actionable-positive-borderColor-active: var(--salt-palette-interact-border-none); --salt-actionable-positive-borderColor-disabled: var(--salt-palette-positive-border-disabled); --salt-actionable-positive-borderColor-hover: var(--salt-palette-interact-border-none); @@ -159,9 +159,9 @@ /* saltButton-positive-transparent */ --salt-actionable-positive-subtle-background-active: var(--salt-palette-positive-background-active); - --salt-actionable-positive-subtle-background-disabled: var(--salt-palette-interact-border-none); + --salt-actionable-positive-subtle-background-disabled: var(--salt-palette-interact-background); --salt-actionable-positive-subtle-background-hover: var(--salt-palette-positive-background-hover); - --salt-actionable-positive-subtle-background: var(--salt-palette-interact-border-none); + --salt-actionable-positive-subtle-background: var(--salt-palette-interact-background); --salt-actionable-positive-subtle-borderColor-active: var(--salt-palette-interact-border-none); --salt-actionable-positive-subtle-borderColor-disabled: var(--salt-palette-interact-border-none); --salt-actionable-positive-subtle-borderColor-hover: var(--salt-palette-interact-border-none); @@ -187,9 +187,9 @@ /* saltButton-caution-outline */ --salt-actionable-caution-background-active: var(--salt-palette-warning-action-active); - --salt-actionable-caution-background-disabled: var(--salt-palette-interact-border-none); + --salt-actionable-caution-background-disabled: var(--salt-palette-interact-background); --salt-actionable-caution-background-hover: var(--salt-palette-warning-action-hover); - --salt-actionable-caution-background: var(--salt-palette-interact-border-none); + --salt-actionable-caution-background: var(--salt-palette-interact-background); --salt-actionable-caution-borderColor-active: var(--salt-palette-interact-border-none); --salt-actionable-caution-borderColor-disabled: var(--salt-palette-warning-border-disabled); --salt-actionable-caution-borderColor-hover: var(--salt-palette-interact-border-none); @@ -201,9 +201,9 @@ /* saltButton-caution-transparent */ --salt-actionable-caution-subtle-background-active: var(--salt-palette-warning-action-active); - --salt-actionable-caution-subtle-background-disabled: var(--salt-palette-interact-border-none); + --salt-actionable-caution-subtle-background-disabled: var(--salt-palette-interact-background); --salt-actionable-caution-subtle-background-hover: var(--salt-palette-warning-action-hover); - --salt-actionable-caution-subtle-background: var(--salt-palette-interact-border-none); + --salt-actionable-caution-subtle-background: var(--salt-palette-interact-background); --salt-actionable-caution-subtle-borderColor-active: var(--salt-palette-interact-border-none); --salt-actionable-caution-subtle-borderColor-disabled: var(--salt-palette-interact-border-none); --salt-actionable-caution-subtle-borderColor-hover: var(--salt-palette-interact-border-none);