From ea7d3b6c94b3b12c4b88f56da60c0987fa5840a2 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 8 Aug 2024 01:29:09 +0900 Subject: [PATCH] Button: Fix tertiary destructive hover style (#64152) * Button: Fix tertiary destructive hover style * Add changelog Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- packages/components/CHANGELOG.md | 1 + packages/components/src/button/style.scss | 10 ++++++++++ 2 files changed, 11 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index e8c1a0d90052b6..837fe973d1022a 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -8,6 +8,7 @@ - `CustomSelectControl`: Restore `describedBy` functionality ([#63957](https://github.com/WordPress/gutenberg/pull/63957)). - `Button`: Improve the aria-disabled focus style ([#62480](https://github.com/WordPress/gutenberg/pull/62480)). - `Modal`: Fix the dismissal logic for React development mode ([#64132](https://github.com/WordPress/gutenberg/pull/64132)). +- `Button`: Fix tertiary destructive hover style ([#64152](https://github.com/WordPress/gutenberg/pull/64152)). - `Autocompleter UI`: Fix text color when hovering selected item ([#64294](https://github.com/WordPress/gutenberg/pull/64294)). - `Heading`: Add the missing `size` prop to the component's props type ([#64299](https://github.com/WordPress/gutenberg/pull/64299)). - `TextControl`: Fix the padding of the component to be consistent with the rest of the controls. ([#64326](https://github.com/WordPress/gutenberg/pull/64326)). diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index fcbd363e17c7dd..7d67dcc0748b85 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -215,6 +215,16 @@ color: $gray-600; } } + + &.is-tertiary { + &:hover:not(:disabled, [aria-disabled="true"]) { + background: rgba($alert-red, 0.04); + } + + &:active:not(:disabled, [aria-disabled="true"]) { + background: rgba($alert-red, 0.08); + } + } } /**