Adjust remove button colors.

Set hover states to shades of grey. Also set chip color and text to match selected text color of the block.
woocommerce · Aug 17, 2022 · 2f4e3e0 · 2f4e3e0
1 parent ac6cf01
commit 2f4e3e0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/assets/js/base/components/chip/style.scss b/assets/js/base/components/chip/style.scss
@@ -15,8 +15,8 @@
 	&:focus,
 	&:active {
 		background: transparent;
-		color: $gray-900;
-		border: 1px solid $gray-900;
+		color: inherit;
+		border: 1px solid;
 	}
 
 	&.wc-block-components-chip--radius-small {
@@ -47,11 +47,11 @@
 		height: 16px;
 		width: 16px;
 		margin: 0;
-		color: $gray-900;
 	}
 
 	.wc-block-components-chip__remove-icon {
 		vertical-align: middle;
+		fill: $gray-900;
 	}
 }
 
@@ -71,8 +71,11 @@ button.wc-block-components-chip:hover > .wc-block-components-chip__remove,
 button.wc-block-components-chip:focus > .wc-block-components-chip__remove,
 .wc-block-components-chip__remove:hover,
 .wc-block-components-chip__remove:focus {
-	fill: #fff;
-	background: #7956ad;
+	background: $gray-600;
+
+	.wc-block-components-chip__remove-icon {
+		fill: #fff;
+	}
 }
 
 button.wc-block-components-chip:disabled > .wc-block-components-chip__remove,

diff --git a/assets/js/blocks/active-filters/style.scss b/assets/js/blocks/active-filters/style.scss
@@ -80,7 +80,7 @@
 		color: currentColor;
 
 		&:hover {
-			color: #7956ad;
+			color: $gray-600;
 		}
 
 		&:disabled {