diff --git a/.changeset/tough-pigs-deliver.md b/.changeset/tough-pigs-deliver.md new file mode 100644 index 00000000000..cf6e0aed9cd --- /dev/null +++ b/.changeset/tough-pigs-deliver.md @@ -0,0 +1,5 @@ +--- +'@kaizen/components': patch +--- + +Update Button v3 styles diff --git a/packages/components/src/__rc__/Button/Button.module.css b/packages/components/src/__rc__/Button/Button.module.css index 6f6eea92ccc..e6dc0741ce9 100644 --- a/packages/components/src/__rc__/Button/Button.module.css +++ b/packages/components/src/__rc__/Button/Button.module.css @@ -127,19 +127,25 @@ --button-border-color: transparent; --button-text-color: var(--color-purple-800); + &[data-hovered], + &[data-pressed], + &[data-pending] { + --button-text-color: var(--color-blue-500); + } + &[data-hovered] { - --button-bg-color: var(--color-gray-200); - --button-border-color: var(--color-gray-200); + --button-bg-color: var(--color-blue-200); + --button-border-color: var(--color-blue-200); } &[data-pressed] { - --button-bg-color: var(--color-gray-300); - --button-border-color: var(--color-gray-300); + --button-bg-color: var(--color-blue-100); + --button-border-color: var(--color-blue-100); } &[data-pending] { - --button-bg-color: var(--color-gray-300); - --button-border-color: var(--color-gray-300); + --button-bg-color: var(--color-blue-100); + --button-border-color: var(--color-blue-100); } &.isDisabled { @@ -163,13 +169,13 @@ --button-text-color: var(--color-purple-800); &[data-hovered] { - --button-bg-color: var(--color-white); - --button-border-color: var(--color-white); + --button-bg-color: var(--color-gray-200); + --button-border-color: var(--color-gray-200); } &[data-pressed] { - --button-bg-color: var(--color-white); - --button-border-color: var(--color-white); + --button-bg-color: var(--color-gray-300); + --button-border-color: var(--color-gray-300); } &[data-pending] {