Button: Increase font weight, add hover style to secondary variant (W…

…ordPress#67325) Co-authored-by: jameskoster <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: matt-west <[email protected]> Co-authored-by: keoshi <[email protected]> Co-authored-by: jeffgolenski <[email protected]> Co-authored-by: elizaan36 <[email protected]>
yogeshbhutkar · Dec 18, 2024 · 14aa0a1 · 14aa0a1
1 parent 86a03b8
commit 14aa0a1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -21,6 +21,7 @@
 -   `MenuItem`: Increase height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)).
 -   `MenuItemsChoice`: Increase option height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)).
 -   `Navigation`: Fix active item hover color ([#67732](https://github.com/WordPress/gutenberg/pull/67732)).
+-   `Button`: Adjust `secondary` variant hover style. ([#67325](https://github.com/WordPress/gutenberg/pull/67325)).
 
 ### Deprecations
 

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -9,7 +9,6 @@
 	display: inline-flex;
 	text-decoration: none;
 	font-family: inherit;
-	font-weight: normal;
 	font-size: $default-font-size;
 	margin: 0;
 	border: 0;
@@ -139,8 +138,10 @@
 		color: $components-color-accent;
 		background: transparent;
 
-		&:hover:not(:disabled, [aria-disabled="true"]) {
-			box-shadow: inset 0 0 0 $border-width $components-color-accent-darker-10;
+		&:hover:not(:disabled, [aria-disabled="true"], .is-pressed) {
+			box-shadow: inset 0 0 0 $border-width $components-color-accent-darker-20;
+			color: $components-color-accent-darker-20;
+			background: color-mix(in srgb, $components-color-accent 4%, transparent);
 		}
 
 		&:disabled:not(:focus),
@@ -164,15 +165,12 @@
 		background: transparent;
 
 		&:hover:not(:disabled, [aria-disabled="true"]) {
-			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
-			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Allow tertiary buttons to use colors from the user admin color scheme. */
-			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			background: color-mix(in srgb, $components-color-accent 4%, transparent);
+			color: $components-color-accent-darker-20;
 		}
 
 		&:active:not(:disabled, [aria-disabled="true"]) {
-			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
-			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Allow tertiary buttons to use colors from the user admin color scheme. */
-			background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+			background: color-mix(in srgb, $components-color-accent 8%, transparent);
 		}
 
 		// Pull left if the tertiary button stands alone after a description, so as to vertically align with items above.
@@ -220,7 +218,8 @@
 			}
 		}
 
-		&.is-tertiary {
+		&.is-tertiary,
+		&.is-secondary {
 			&:hover:not(:disabled, [aria-disabled="true"]) {
 				background: rgba($alert-red, 0.04);
 			}