♻️ Major button-styling refactoring

modules/ppcp-settings/resources/css/_variables.scss

@@ -10,6 +10,7 @@ $color-gray-500: #BBBBBB;
 $color-gray-400: #CCCCCC;
 $color-gray-300: #EBEBEB;
 $color-gray-200: #E0E0E0;
+$color-gray-100: #F0F0F0;
 $color-gray: #646970;
 $color-text-tertiary: #505050;
 $color-text-text: #070707;
@@ -27,6 +28,8 @@ $max-width-settings: 938px;
 
 $card-vertical-gap: 48px;
 
+/* define custom theming options */
+
 :root {
 	--ppcp-color-app-bg: #{$color-white};
 }
@@ -37,4 +40,18 @@ $card-vertical-gap: 48px;
 	--max-width-onboarding-content: #{$max-width-onboarding-content};
 
 	--max-container-width: var(--max-width-settings);
+
+	--color-black: #{$color-black};
+	--color-white: #{$color-white};
+	--color-blueberry: #{$color-blueberry};
+	--color-gray-900: #{$color-gray-900};
+	--color-gray-800: #{$color-gray-800};
+	--color-gray-700: #{$color-gray-700};
+	--color-gray-600: #{$color-gray-600};
+	--color-gray-500: #{$color-gray-500};
+	--color-gray-400: #{$color-gray-400};
+	--color-gray-300: #{$color-gray-300};
+	--color-gray-200: #{$color-gray-200};
+	--color-gray-100: #{$color-gray-100};
+	--color-gradient-dark: #{$color-gradient-dark};
 }

modules/ppcp-settings/resources/css/components/reusable-components/_button.scss

@@ -1,48 +1,102 @@
-button.components-button, a.components-button {
+%button-style-default {
-	&.is-primary, &.is-secondary {
+	background-color: var(--button-background);
-		&:not(:disabled) {
+	color: var(--button-color);
-			background-color: $color-black;
+	box-shadow: inset 0 0 0 1px var(--button-border-color);
-		}
+}
 
-		&:disabled {
+%button-style-hover {
-			color: $color-gray-700;
+	background-color: var(--button-hover-background);
-		}
+	color: var(--button-hover-color);
+	box-shadow: inset 0 0 0 1px var(--button-hover-border-color);
+}
 
+%button-style-disabled {
+	background-color: var(--button-disabled-background);
+	color: var(--button-disabled-color);
+	box-shadow: inset 0 0 0 1px var(--button-disabled-border-color);
+}
+
+%button-shape-pill {
 	border-radius: 50px;
 	padding: 15px 32px;
 	height: auto;
+}
+
+button.components-button, a.components-button {
+	/* default theme */
+	--button-color: var(--color-gray-900);
+	--button-background: transparent;
+	--button-border-color: transparent;
+
+	--button-hover-color: var(--button-color);
+	--button-hover-background: var(--button-background);
+	--button-hover-border-color: var(--button-border-color);
+
+	--button-disabled-color: var(--color-gray-500);
+	--button-disabled-background: transparent;
+	--button-disabled-border-color: transparent;
+
+	/* style the button template */
+
+	&:not(:disabled) {
+		@extend %button-style-default;
+	}
+
+	&:hover {
+		@extend %button-style-hover;
+	}
+
+	&:disabled {
+		@extend %button-style-disabled;
+	}
+
+	/*
+	----------------------------------------------
+	Customize variants using the theming variables
+	*/
+
+	&.is-primary,
+	&.is-secondary {
+		@extend %button-shape-pill;
 	}
 
 	&.is-primary {
 		@include font(14, 18, 900);
 
-		&:not(:disabled) {
+		--button-color: #{$color-white};
-			background-color: $color-blueberry;
+		--button-background: #{$color-blueberry};
-			color: $color-white;
+
-		}
+		--button-disabled-color: #{$color-gray-100};
+		--button-disabled-background: #{$color-gray-500};
 	}
 
-	&.is-secondary:not(:disabled) {
+	&.is-secondary {
-		border-color: $color-blueberry;
+		--button-color: #{$color-blueberry};
-		background-color: $color-white;
+		--button-background: #{$color-white};
-		color: $color-blueberry;
+		--button-border-color: #{$color-blueberry};
 
-		&:hover {
+		--button-disabled-color: #{$color-gray-600};
-			background-color: $color-white;
+		--button-disabled-background: #{$color-gray-100};
-			background: none;
+		--button-disabled-border-color: #{$color-gray-400};
-		}
 	}
 
 	&.is-tertiary {
-		color: $color-blueberry;
+		--button-color: #{$color-blueberry};
-
+		--button-hover-color: #{$color-gradient-dark};
-		&:hover {
-			color: $color-gradient-dark;
-		}
 
 		&:focus:not(:disabled) {
 			border: none;
 			box-shadow: none;
 		}
 	}
+
+	&.small-button {
+		@include small-button;
+	}
+}
+
+.ppcp--is-loading {
+	button.components-button, a.components-button {
+		@extend %button-style-disabled;
+	}
 }

modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss

@@ -20,12 +20,6 @@
 		margin: 0 0 24px 0;
 	}
 
-	.ppcp-r-toggle-block__toggled-content > button{
-		@include small-button;
-		color: $color-white;
-		border: none;
-	}
-
 	.client-id-error {
 		color: #cc1818;
 		margin: -16px 0 24px;

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js

@@ -145,6 +145,7 @@ const AdvancedOptionsForm = () => {
 						) }
 						showIcon={ false }
 						variant="secondary"
+						className="small-button"
 						isSandbox={
 							true /* This button always connects to sandbox */
 						}
@@ -190,7 +191,11 @@ const AdvancedOptionsForm = () => {
 						onChange={ setClientSecret }
 						type="password"
 					/>
-					<Button variant="secondary" onClick={ handleManualConnect }>
+					<Button
+						variant="secondary"
+						className="small-button"
+						onClick={ handleManualConnect }
+					>
 						{ __(
 							'Connect Account',
 							'woocommerce-paypal-payments'

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ConnectionButton.js

@@ -15,10 +15,11 @@ const ConnectionButton = ( {
 	isSandbox = false,
 	variant = 'primary',
 	showIcon = true,
+	className = '',
 } ) => {
 	const { handleSandboxConnect } = useSandboxConnection();
 	const { handleProductionConnect } = useProductionConnection();
-	const className = classNames( 'ppcp-r-connection-button', {
+	const buttonClassName = classNames( 'ppcp-r-connection-button', className, {
 		'sandbox-mode': isSandbox,
 		'live-mode': ! isSandbox,
 	} );
@@ -34,7 +35,7 @@ const ConnectionButton = ( {
 	return (
 		<BusyStateWrapper>
 			<Button
-				className={ className }
+				className={ buttonClassName }
 				variant={ variant }
 				icon={ showIcon ? openSignup : null }
 				onClick={ handleConnectClick }