Checkout: Replace all remaining blue colors with Color Studio version (…

…#94194) * Replace all blue colors in composite-checkout with colorStudio version * Update dropdown item background color to WordPress Blue 50 * Fix variant picker hover state color to also use WordPress Blue * Replace sidebar upsell title blue with WordPress Blue * Change color of AssignToAllPaymentMethods checkbox to WordPress Blue * Change "Learn more" on AssignToAllPaymentMethods to WordPress Blue * Set all checkout links to WordPress Blue
Automattic · Sep 5, 2024 · 867677c · 867677c
1 parent d8d6067
commit 867677c
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 33 deletions.
diff --git a/client/my-sites/checkout/checkout-main-wrapper.tsx b/client/my-sites/checkout/checkout-main-wrapper.tsx
@@ -23,6 +23,10 @@ const logCheckoutError = ( error: Error ) => {
 
 const CheckoutMainWrapperStyles = styled.div`
 	background-color: ${ colorStudio.colors[ 'White' ] };
+
+	a {
+		color: ${ colorStudio.colors[ 'WordPress Blue 50' ] };
+	}
 `;
 
 export default function CheckoutMainWrapper( {

diff --git a/client/my-sites/checkout/src/components/akismet-pro-quantity-dropdown/index.tsx b/client/my-sites/checkout/src/components/akismet-pro-quantity-dropdown/index.tsx
@@ -73,11 +73,11 @@ const Option = styled.li`
 	cursor: pointer;
 
 	&:hover {
-		background: #e9f0f5;
+		background: var( --studio-wordpress-blue-5 );
 	}
 
 	&.item-variant-option--selected {
-		background: #055d9c;
+		background: var( --studio-wordpress-blue-50 );
 		color: white;
 	}
 `;

diff --git a/client/my-sites/checkout/src/components/checkout-sidebar-plan-upsell/style.scss b/client/my-sites/checkout/src/components/checkout-sidebar-plan-upsell/style.scss
@@ -8,7 +8,7 @@
 }
 
 .promo-card.checkout-sidebar-plan-upsell .action-panel__title {
-	color: var(--studio-blue-50);
+	color: var(--studio-wordpress-blue-50);
 	display: block;
 	font-size: $font-title-medium;
 	font-weight: 400;

diff --git a/client/my-sites/checkout/src/components/item-variation-picker/styles.tsx b/client/my-sites/checkout/src/components/item-variation-picker/styles.tsx
@@ -35,16 +35,17 @@ export const Option = styled.li< OptionProps >`
 	font-weight: ${ ( props ) => props.theme.weights.normal };
 	cursor: pointer;
 	flex-direction: row;
-	justify-content: space-between; align-items: center;
+	justify-content: space-between;
+	align-items: center;
 	/* the calc aligns the price with the price in CurrentOption */
 	padding: 10px calc( 14px + 24px + 16px ) 10px 16px;
 
 	&:hover {
-		var( --studio-blue-0 );
+		background: var( --studio-wordpress-blue-5 );
 	}
 
 	&.item-variant-option--selected {
-		background: #055d9c;
+		background: var( --studio-wordpress-blue-50 );
 		color: #fff;
 	}
 `;

diff --git a/client/my-sites/checkout/src/payment-methods/credit-card/assign-to-all-payment-methods.tsx b/client/my-sites/checkout/src/payment-methods/credit-card/assign-to-all-payment-methods.tsx
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@automattic/wpcom-checkout';
 import { CheckboxControl } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
 import InlineSupportLink from 'calypso/components/inline-support-link';
@@ -7,6 +7,15 @@ import { recordTracksEvent } from 'calypso/state/analytics/actions';
 
 const CheckboxWrapper = styled.div`
 	margin-top: 16px;
+
+	.assign-to-all-payment-methods-checkbox input[type='checkbox']:checked {
+		background: ${ ( props ) => props.theme.colors.primary };
+		border-color: ${ ( props ) => props.theme.colors.primary };
+	}
+
+	a.inline-support-link.assign-to-all-payment-methods-checkbox__link {
+		color: ${ ( props ) => props.theme.colors.primary };
+	}
 `;
 
 export default function AssignToAllPaymentMethods( {
@@ -34,6 +43,7 @@ export default function AssignToAllPaymentMethods( {
 	return (
 		<CheckboxWrapper>
 			<CheckboxControl
+				className="assign-to-all-payment-methods-checkbox"
 				disabled={ isDisabled }
 				checked={ isChecked }
 				onChange={ handleChangeEvent }
@@ -44,6 +54,7 @@ export default function AssignToAllPaymentMethods( {
 							components: {
 								link: (
 									<InlineSupportLink
+										className="assign-to-all-payment-methods-checkbox__link"
 										supportContext="payment_method_all_subscriptions"
 										showIcon={ false }
 									/>

diff --git a/packages/composite-checkout/src/lib/swatches.ts b/packages/composite-checkout/src/lib/swatches.ts
@@ -1,15 +1,4 @@
 export type Swatches = {
-	wordpressBlue5: string;
-	wordpressBlue40: string;
-	wordpressBlue50: string;
-	wordpressBlue60: string;
-	wordpressBlue80: string;
-	blue5: string;
-	blue30: string;
-	blue40: string;
-	blue50: string;
-	blue60: string;
-	blue80: string;
 	gray0: string;
 	gray5: string;
 	gray10: string;
@@ -28,17 +17,6 @@ export type Swatches = {
 };
 
 export const swatches: Swatches = {
-	wordpressBlue5: '#BEDAE6',
-	wordpressBlue40: '#187AA2',
-	wordpressBlue50: '#006088',
-	wordpressBlue60: '#004E6E',
-	wordpressBlue80: '#002C40',
-	blue5: '#BBE0FA',
-	blue30: '#399CE3',
-	blue40: '#1689DB',
-	blue50: '#0675C4',
-	blue60: '#055D9C',
-	blue80: '#02395C',
 	gray0: '#F6F7F7',
 	gray5: '#DCDCDE',
 	gray10: '#C3C4C7',

diff --git a/packages/composite-checkout/src/lib/theme.ts b/packages/composite-checkout/src/lib/theme.ts
@@ -63,9 +63,9 @@ const theme: Theme = {
 		primary: colorStudio.colors[ 'WordPress Blue 50' ],
 		primaryBorder: swatches.pink80,
 		primaryOver: colorStudio.colors[ 'WordPress Blue 60' ],
-		highlight: swatches.blue50,
-		highlightBorder: swatches.blue80,
-		highlightOver: swatches.blue60,
+		highlight: colorStudio.colors[ 'WordPress Blue 50' ],
+		highlightBorder: colorStudio.colors[ 'WordPress Blue 80' ],
+		highlightOver: colorStudio.colors[ 'WordPress Blue 60' ],
 		success: colorStudio.colors[ 'Green 30' ],
 		discount: colorStudio.colors[ 'Green 30' ],
 		disabledPaymentButtons: colorStudio.colors[ 'Gray 5' ],
@@ -81,7 +81,7 @@ const theme: Theme = {
 		textColorDisabled: colorStudio.colors[ 'Gray 10' ],
 		error: swatches.red50,
 		warningBackground: swatches.red0,
-		outline: swatches.blue30,
+		outline: colorStudio.colors[ 'WordPress Blue 30' ],
 		applePayButtonColor: swatches.black,
 		applePayButtonRollOverColor: swatches.gray80,
 		noticeBackground: swatches.gray80,