Fixed Woo colors during Stripe KYC (#10316)

Automattic · Feb 18, 2025 · ad9e840 · ad9e840
1 parent eec6b23
commit ad9e840
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 19 deletions.
diff --git a/assets/images/payment-methods/woopay.svg b/assets/images/payment-methods/woopay.svg
diff --git a/bin/wcpay-live-branches/wcpay-live-branches.user.js b/bin/wcpay-live-branches/wcpay-live-branches.user.js
@@ -388,7 +388,7 @@
 		 */
 		function appendHtml( el, contents ) {
 			const $el = $( el );
-			const wooColor = '#7F54B3'; // https://woocommerce.com/brand-and-logo-guidelines/
+			const wooColor = '#873eff'; // https://woocommerce.com/brand-and-logo-guidelines/
 			const styles = $( '<style>' ).text( `
 				#wcpay-live-branches {
 					border: 3px dotted ${ wooColor };

diff --git a/changelog/fix-missed-woo-colors b/changelog/fix-missed-woo-colors
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix Stripe KYC flow Woo color
diff --git a/client/components/fraud-risk-tools-banner/style.scss b/client/components/fraud-risk-tools-banner/style.scss
@@ -11,16 +11,16 @@
 	}
 
 	&__new-feature-pill.wcpay-pill {
-		color: #3c2861;
-		border: 1px solid #3c2861;
+		color: #3c087e;
+		border: 1px solid #3c087e;
 		font-size: 12px;
 		line-height: 14px;
 		border-radius: 14px;
 		margin: 0;
 	}
 
 	&__header {
-		color: #271b3d;
+		color: #2c045d;
 		font-style: normal;
 		font-weight: 400;
 		font-size: 20px;
@@ -29,7 +29,7 @@
 	}
 
 	&__body {
-		color: #271b3d;
+		color: #2c045d;
 		font-size: 13px;
 		line-height: 16px;
 		margin: 0 0 16px;
@@ -56,7 +56,7 @@
 			}
 
 			&.is-tertiary {
-				color: #271b3d;
+				color: #2c045d;
 			}
 		}
 	}

diff --git a/client/utils/embedded-components/appearance.ts b/client/utils/embedded-components/appearance.ts
@@ -5,7 +5,7 @@
  */
 export default {
 	variables: {
-		colorPrimary: '#7F54B3',
+		colorPrimary: '#873EFF',
 		colorBackground: '#FFFFFF',
 		buttonPrimaryColorBackground: '#3858E9',
 		buttonPrimaryColorBorder: '#3858E9',

diff --git a/docs/rest-api/source/stylesheets/_lang-selector.scss b/docs/rest-api/source/stylesheets/_lang-selector.scss
@@ -6,11 +6,11 @@
 		&:active,
 		&:focus,
 		&:hover {
-			border-top-color: #7f54b3;
+			border-top-color: #873eff;
 		}
 
 		&.active {
-			border-top-color: #7f54b3;
+			border-top-color: #873eff;
 		}
 	}
 }
diff --git a/docs/rest-api/source/stylesheets/_variables.scss b/docs/rest-api/source/stylesheets/_variables.scss
@@ -26,18 +26,18 @@ $examples-bg: #393939 !default;
 $code-bg: #292929 !default;
 $code-annotation-bg: #191d1f !default;
 $nav-subitem-bg: #f7f7f7 !default;
-$nav-active-bg: #7f54b3 !default;
+$nav-active-bg: #873eff !default;
 $nav-active-parent-bg: #f7f7f7 !default; // parent links of the current section
 $lang-select-border: #000 !default;
 $lang-select-bg: #222 !default;
 $lang-select-active-bg: $examples-bg !default; // feel free to change this to blue or something
 $lang-select-pressed-bg: #111 !default; // color of language tab bg when mouse is pressed
 $main-bg: #ffffff !default;
-$aside-notice-bg: #7f54b3 !default;
+$aside-notice-bg: #873eff !default;
 $aside-warning-bg: #ca4949 !default;
 $aside-success-bg: #38a845 !default;
 $search-notice-bg: #c97a7e !default;
-$link-color: #7f54b3;
+$link-color: #873eff;
 
 // TEXT COLORS
 ////////////////////