From 92e828ec9769de8c8a648255ebd4282a46dad084 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 22 Jan 2025 13:11:10 +0100 Subject: [PATCH] Update hardcoded blue color values to match Studio counterparts --- client/blocks/reader-join-conversation/style.scss | 10 +++++----- .../stepper/declarative-flow/internals/global.scss | 4 ++-- client/my-sites/plugins/education-footer/index.tsx | 4 ++-- client/signup/steps/website-content/dialogs.tsx | 4 ++-- .../components/sites-site-coming-soon.tsx | 2 +- packages/domain-picker/src/components/style.scss | 2 +- packages/onboarding/src/confetti/index.tsx | 2 +- packages/onboarding/styles/variables.scss | 4 ++-- packages/privacy-toolset/src/cookie-banner/styles.scss | 2 +- 9 files changed, 17 insertions(+), 17 deletions(-) diff --git a/client/blocks/reader-join-conversation/style.scss b/client/blocks/reader-join-conversation/style.scss index 020e5d9817017f..5e2babc3cec0c2 100644 --- a/client/blocks/reader-join-conversation/style.scss +++ b/client/blocks/reader-join-conversation/style.scss @@ -34,20 +34,20 @@ } button.components-button.is-primary { - background-color: #117ac9; - border-color: #117ac9; + background-color: var(--studio-blue-50); + border-color: var(--studio-blue-50); &:active:not(:disabled), &:hover:not(:disabled), &:focus:not(:disabled) { - background-color: #0e64a5; - border-color: #0e64a5; + background-color: var(--studio-blue-60); + border-color: var(--studio-blue-60); } } button.components-button.is-link { padding: 20px 0 6px 0; - color: #1d2333; + color: var(--studio-blue-90); &:hover:not(:disabled) { color: var(--studio-blue-50); diff --git a/client/landing/stepper/declarative-flow/internals/global.scss b/client/landing/stepper/declarative-flow/internals/global.scss index f1f7a026a5cd73..94c7f6d87fbbe1 100644 --- a/client/landing/stepper/declarative-flow/internals/global.scss +++ b/client/landing/stepper/declarative-flow/internals/global.scss @@ -233,8 +233,8 @@ button { .is-section-stepper { .search-filters__popover { - --color-accent: #117ac9 !important; - --color-accent-60: #0e64a5 !important; + --color-accent: var(--studio-blue-50) !important; + --color-accent-60: var(--studio-blue-60) !important; } } diff --git a/client/my-sites/plugins/education-footer/index.tsx b/client/my-sites/plugins/education-footer/index.tsx index 3d014db587b473..3ce330b9026e7b 100644 --- a/client/my-sites/plugins/education-footer/index.tsx +++ b/client/my-sites/plugins/education-footer/index.tsx @@ -73,8 +73,8 @@ const EducationFooterContainer = styled.div` `; const MarketplaceContainer = styled.div< { isloggedIn: boolean } >` - --color-accent: #117ac9; - --color-accent-60: #0e64a5; + --color-accent: var( --studio-blue-50 ); + --color-accent-60: var( --studio-blue-60 ); margin-bottom: -32px; .marketplace-cta { diff --git a/client/signup/steps/website-content/dialogs.tsx b/client/signup/steps/website-content/dialogs.tsx index 28e3835823ac90..fcdff6611ec245 100644 --- a/client/signup/steps/website-content/dialogs.tsx +++ b/client/signup/steps/website-content/dialogs.tsx @@ -21,8 +21,8 @@ const DialogButton = styled( Button )` box-shadow: 0px 1px 2px rgba( 0, 0, 0, 0.05 ); border-radius: 5px; padding: ${ ( props ) => ( props.primary ? '10px 64px' : '10px 32px' ) }; - --color-accent: #117ac9; - --color-accent-60: #0e64a5; + --color-accent: var( --studio-blue-50 ); + --color-accent-60: var( --studio-blue-60 ); .gridicon { margin-left: 10px; } diff --git a/client/sites-dashboard/components/sites-site-coming-soon.tsx b/client/sites-dashboard/components/sites-site-coming-soon.tsx index 2c9d4c7aeecaca..df30411856e09a 100644 --- a/client/sites-dashboard/components/sites-site-coming-soon.tsx +++ b/client/sites-dashboard/components/sites-site-coming-soon.tsx @@ -13,7 +13,7 @@ const Root = styled.div( { display: 'flex', alignItems: 'center', justifyContent: 'center', - backgroundColor: '#117ac9', + backgroundColor: 'var(--studio-blue-50)', borderRadius: 4, boxSizing: 'border-box', border: '1px solid rgb(238, 238, 238)', diff --git a/packages/domain-picker/src/components/style.scss b/packages/domain-picker/src/components/style.scss index a329f0d68e3470..6c3455503b0843 100644 --- a/packages/domain-picker/src/components/style.scss +++ b/packages/domain-picker/src/components/style.scss @@ -4,7 +4,7 @@ @import "@automattic/onboarding/styles/mixins"; @import "@automattic/typography/styles/fonts"; -$accent-blue: #117ac9; +$accent-blue: var(--studio-blue-50); .domain-picker__empty-state { display: flex; diff --git a/packages/onboarding/src/confetti/index.tsx b/packages/onboarding/src/confetti/index.tsx index b448521d976195..8575ec6a55c5c5 100644 --- a/packages/onboarding/src/confetti/index.tsx +++ b/packages/onboarding/src/confetti/index.tsx @@ -62,7 +62,7 @@ const Index: React.FunctionComponent< { className?: string } > = ( { className } height="15" rx="2.386" transform="rotate(-32 97 2.53)" - fill="#117AC9" + fill="var(--studio-blue-50)" />