diff --git a/client/my-sites/checkout/checkout-main-wrapper.tsx b/client/my-sites/checkout/checkout-main-wrapper.tsx index 2bffaa8803707..c865591001616 100644 --- 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 index 8f12a89df05d8..1b29c4209a74f 100644 --- 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 index d08f494ae03f5..8e02bc19e2992 100644 --- 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 index 76b3896279024..ab9d329fecd34 100644 --- 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 index e1b4a07e2b0f9..f5f668fa6211f 100644 --- 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 ( diff --git a/packages/composite-checkout/src/lib/swatches.ts b/packages/composite-checkout/src/lib/swatches.ts index 691333e7151fc..7fca61a9a26a0 100644 --- 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 index 2da4f20564660..0a0d5b9913261 100644 --- 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,