Update hardcoded blue color values to match Studio counterparts

Automattic · Jan 22, 2025 · 92e828e · 92e828e
1 parent 14bd453
commit 92e828e
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)"
 		/>
 		<Rect
 			x="323.638"

diff --git a/packages/onboarding/styles/variables.scss b/packages/onboarding/styles/variables.scss
@@ -22,5 +22,5 @@ $onboarding-body-margin-medium: 0 0 80px 0;
 // @TODO: refactor to common variable in onboarding
 // see https://github.com/Automattic/wp-calypso/issues/47181
 // the blue accent this is used as the primary color in focused-launch
-$onboarding-accent-blue: #117ac9;
-$onboarding-accent-blue-background: #fafcfe;
+$onboarding-accent-blue: var(--studio-blue-50);
+$onboarding-accent-blue-background: var(--studio-blue-0);
diff --git a/packages/privacy-toolset/src/cookie-banner/styles.scss b/packages/privacy-toolset/src/cookie-banner/styles.scss
@@ -10,7 +10,7 @@ $horizontal-padding: 20px;
 $cookie-banner-bg-color: #fff;
 $cookie-banner-text-color: #000;
 $cookie-banner-text-muted-color: #000;
-$cookie-banner-link-color: #117ac9;
+$cookie-banner-link-color: var(--studio-blue-50);
 
 // Buttons
 $cookie-banner-main-button-color: $cookie-banner-link-color;