Centralize missing Woo social button overrides

Author: adamwoodnz

client/assets/stylesheets/_wp-components-overrides.scss

@@ -1,3 +1,5 @@
+@import "@wordpress/base-styles/colors";
+
 /* @wordpress/components FormToggle overrides ----------------------------------------- */
 .components-form-toggle {
 	input[type="checkbox"] {
@@ -124,19 +126,14 @@
 		}
 
 		&.is-primary,
-		&.social-buttons__button {
+		// Used for Social buttons
+		&.a8c-components-wp-button {
 			border-radius: 8px; /* stylelint-disable-line scales/radii */
 			font-size: 1rem;
 			font-weight: 500;
 			height: 48px;
 		}
 
-		&.social-buttons__button {
-			&:focus:not(:disabled) {
-				box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 2px var(--wp-components-color-accent);
-			}
-		}
-
 		&.is-primary {
 			&:focus:not(:disabled) {
 				box-shadow: 0 0 0 2px var(--wp-components-color-accent);
@@ -152,6 +149,17 @@
 				margin-top: 0;
 			}
 		}
+
+		// Used for Social buttons
+		&.a8c-components-wp-button {
+			&:not(:focus) {
+				box-shadow: inset 0 0 0 2px $gray-300, 0 0 0 currentColor;
+			}
+
+			&:focus:not(:disabled) {
+				box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 2px var(--wp-components-color-accent);
+			}
+		}
 	}
 }
 

client/layout/masterbar/woo.scss

@@ -1556,10 +1556,6 @@ $breakpoint-mobile: 660px;
 				.social-buttons__button {
 					padding: 8px 16px;
 
-					&:not(:focus) {
-						box-shadow: inset 0 0 0 2px $gray-300, 0 0 0 currentColor;
-					}
-
 					> span {
 						color: var(--studio-gray-100);
 						font-family: $woo-inter-font;