Stepper: Update primary button/toggle/checkbox/component color (#95594)

* Removing overrides mostly * Remove overrides --------- Co-authored-by: Filippo Di Trapani <filippodt@gmail.com>
Automattic · Oct 22, 2024 · e5f920d · e5f920d
1 parent 80247a1
commit e5f920d
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 42 deletions.
diff --git a/client/blocks/import/style/components.scss b/client/blocks/import/style/components.scss
@@ -132,7 +132,6 @@
 
 		.action-buttons__next.is-primary {
 			border: none;
-			background: #117ac9;
 		}
 	}
 }
diff --git a/client/components/theme-upgrade-modal/style.scss b/client/components/theme-upgrade-modal/style.scss
@@ -3,9 +3,6 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
 
-$design-button-primary-color: var(--color-primary);
-$design-button-primary-hover-color: var(--color-primary-60);
-
 .theme-upgrade-modal {
 	display: flex;
 	flex-direction: column;
@@ -202,15 +199,7 @@ $design-button-primary-hover-color: var(--color-primary-60);
 			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
 
 			&.is-primary {
-				background: $design-button-primary-color;
-				border-color: $design-button-primary-color;
 				width: 100%;
-
-				&:hover,
-				&:focus {
-					background: $design-button-primary-hover-color;
-					border-color: $design-button-primary-hover-color;
-				}
 			}
 		}
 

diff --git a/client/landing/stepper/declarative-flow/internals/global.scss b/client/landing/stepper/declarative-flow/internals/global.scss
@@ -193,8 +193,8 @@ button {
 		&:disabled,
 		&.disabled {
 			color: #fff;
-			background-color: var(--studio-blue-20);
-			border-color: var(--studio-blue-20);
+			background-color: var(--studio-wordpress-blue-20);
+			border-color: var(--studio-wordpress-blue-20);
 		}
 	}
 
@@ -209,11 +209,11 @@ button {
 
 	// WordPress.org components no longer use blue-50 as the primary color.
 	// This changes the primary color to blue-50 to conform to the WordPress.com colors.
-	--color-accent: var(--studio-blue-50);
-	--color-accent-60: var(--studio-blue-60);
-	--wp-components-color-accent-darker-10: var(--studio-blue-60);
-	--wp-components-color-accent-darker-20: var(--studio-blue-70);
-	--wp-components-color-accent: var(--studio-blue-50);
+	--color-accent: var(--studio-wordpress-blue-50);
+	--color-accent-60: var(--studio-wordpress-blue-60);
+	--wp-components-color-accent-darker-10: var(--studio-wordpress-blue-60);
+	--wp-components-color-accent-darker-20: var(--studio-wordpress-blue-70);
+	--wp-components-color-accent: var(--studio-wordpress-blue-50);
 
 }
 
@@ -313,29 +313,29 @@ button {
 					outline: none;
 
 					svg {
-						fill: var(--studio-blue-50);
+						fill: var(--studio-wordpress-blue-50);
 					}
 
 					span {
 						font-size: $font-body-extra-small;
 
 						&.add {
-							color: var(--studio-blue-50);
+							color: var(--studio-wordpress-blue-50);
 						}
 
 						&.replace {
-							color: var(--studio-blue-50);
+							color: var(--studio-wordpress-blue-50);
 						}
 					}
 				}
 				&:focus {
-					background-color: var(--studio-blue-50);
+					background-color: var(--studio-wordpress-blue-50);
 					box-shadow: none;
 					svg {
 						fill: #fff;
 					}
 					span {
-						color: var(--studio-blue-50);
+						color: var(--studio-wordpress-blue-50);
 					}
 				}
 			}

diff --git a/...stepper/declarative-flow/internals/steps-repository/site-migration-credentials/style.scss b/...stepper/declarative-flow/internals/steps-repository/site-migration-credentials/style.scss
@@ -1,6 +1,5 @@
 @import "@wordpress/base-styles/breakpoints";
 $blueberry-color: #3858e9;
-$blueberry-hover: #2145e6;
 
 .site-migration-credentials {
 	#site-migration-credentials-header {
@@ -35,14 +34,8 @@ $blueberry-hover: #2145e6;
 			background: var(--color-border-subtle);
 		}
 		.action-buttons__next {
-			background-color: $blueberry-color;
 			width: 100%;
 			margin-top: 1em;
-
-			&:hover {
-				background-color: $blueberry-hover;
-				border-color: $blueberry-hover;
-			}
 		}
 		.site-migration-credentials__form-fields-row {
 			display: flex;

diff --git a/...ng/stepper/declarative-flow/internals/steps-repository/site-migration-identify/style.scss b/...ng/stepper/declarative-flow/internals/steps-repository/site-migration-identify/style.scss
@@ -1,6 +1,4 @@
 @import "@wordpress/base-styles/breakpoints";
-$blueberry-color: #3858e9;
-$blueberry-hover: #2145e6;
 
 .import__capture-container {
 	max-width: 368px;
@@ -39,12 +37,6 @@ $blueberry-hover: #2145e6;
 
 	button[type="submit"] {
 		width: 100%;
-		background-color: $blueberry-color;
-
-		&:hover {
-			background-color: $blueberry-hover !important;
-			border-color: $blueberry-hover !important;
-		}
 	}
 
 	.form-setting-explanation {

diff --git a/packages/onboarding/src/step-navigation-link/style.scss b/packages/onboarding/src/step-navigation-link/style.scss
@@ -28,9 +28,6 @@ $font-body-small: 14px !default;
 	&.is-primary {
 		border-radius: 4px;
 		box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
-		background-color: #117ac9;
-		border-color: #117ac9;
-		color: var(--color-text-inverted);
 		padding: 8px 14px;
 	}
 }