Buttons are using wrong purple color, should be using WP primary color

[ecgan]

Prerequisites

• I have carried out troubleshooting steps and I believe I have found a bug.
• I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

Some buttons in WooCommerce are using the wrong WooCommerce purple (pinkish) color. See examples below.

Coupons page:

"Update WooCommerce database" button:

Orders page:

Products page:

Expected behavior

Desired behavior: The buttons should be using WordPress theme's primary button color. This would also make it consistent with the use of @wordpress/component's Button component in WooCommerce Admin.

Alternative behavior: The buttons should be using the correct WooCommerce purple button color.

Actual behavior

The buttons are using the wrong WooCommerce purple (pinkish) color.

Steps to reproduce

1. Setup a new site and go to Marketing > Coupons page: /wp-admin/edit.php?post_type=shop_coupon.
2. See the "Create your first coupon" button color.

Additional info

• Related P2 post: peapX7-1V3-p2
• Related issue: Update button color in the Product and Orders empty state #37166

Possible solution

I looked into the code and the button color comes from the following CSS:

woocommerce/plugins/woocommerce/client/legacy/css/admin.scss

Lines 901 to 922 in 4cbb607

	.woocommerce-message,
	.woocommerce-BlankState {
	a.button-primary,
	button.button-primary {
	background: #bb77ae;
	border-color: #a36597;
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.25 ), 0 1px 0 #a36597;
	color: #fff;
	text-shadow: 0 -1px 1px #a36597, 1px 0 1px #a36597, 0 1px 1px #a36597,
	-1px 0 1px #a36597;
	display: inline-block;
	&:hover,
	&:focus,
	&:active {
	background: #a36597;
	border-color: #a36597;
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.25 ),
	0 1px 0 #a36597;
	}
	}
	}

One way to fix this is to remove the above CSS code and remove the usage of the CSS class. It seems like by doing that, the buttons would then be using WP primary color based on admin color scheme.

Screenshot below shows that CSS is disabled in dev tools and the button uses WP default primary color:

To change the WP Admin color scheme, go to Users > Profile page: /wp-admin/profile.php.

Screenshot below shows that CSS is disabled in dev tools and the site is using "Sunrise" admin color scheme:

WordPress Environment

N/A

Isolating the problem

• I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.