♻️ Major button-styling refactoring

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

@@ -1,48 +1,102 @@
+%button-style-default {
+	background-color: var(--button-background);
+	color: var(--button-color);
+	box-shadow: inset 0 0 0 1px var(--button-border-color);
+}
+
+%button-style-hover {
+	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 {
-	&.is-primary, &.is-secondary {
-		&:not(:disabled) {
-			background-color: $color-black;
-		}
+	/* default theme */
+	--button-color: var(--color-gray-900);
+	--button-background: transparent;
+	--button-border-color: transparent;
 
-		&:disabled {
-			color: $color-gray-700;
-		}
+	--button-hover-color: var(--button-color);
+	--button-hover-background: var(--button-background);
+	--button-hover-border-color: var(--button-border-color);
 
-		border-radius: 50px;
-		padding: 15px 32px;
-		height: auto;
+	--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) {
-			background-color: $color-blueberry;
-			color: $color-white;
-		}
+		--button-color: #{$color-white};
+		--button-background: #{$color-blueberry};
+
+		--button-disabled-color: #{$color-gray-100};
+		--button-disabled-background: #{$color-gray-500};
 	}
 
-	&.is-secondary:not(:disabled) {
-		border-color: $color-blueberry;
-		background-color: $color-white;
-		color: $color-blueberry;
+	&.is-secondary {
+		--button-color: #{$color-blueberry};
+		--button-background: #{$color-white};
+		--button-border-color: #{$color-blueberry};
 
-		&:hover {
-			background-color: $color-white;
-			background: none;
-		}
+		--button-disabled-color: #{$color-gray-600};
+		--button-disabled-background: #{$color-gray-100};
+		--button-disabled-border-color: #{$color-gray-400};
 	}
 
 	&.is-tertiary {
-		color: $color-blueberry;
-
-		&:hover {
-			color: $color-gradient-dark;
-		}
+		--button-color: #{$color-blueberry};
+		--button-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;