pfe-1827 updated border & bg color & color on buttons

SwedbankPay · Oct 29, 2024 · e3d005c · e3d005c
1 parent 0599973
commit e3d005c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/src/less/components/payex/button.less b/src/less/components/payex/button.less
@@ -1,11 +1,16 @@
 @import "../button.less";
 
-&.btn {
-	font-family: var(--brand-default);
+.btn {
+	font-family: var(--brand-default-buttons);
+
+
+	&:active {
+		border: 3px solid @btn-active-border-color;
+	}
+
 
 	&.btn-primary {
 		&:active {
-			border: @brand-primary;
 			box-shadow: none;
 		}
 
@@ -27,16 +32,30 @@
 	}
 
 	&.btn-secondary {
+		border: 1px solid var(--brand-secondary-light-3);
+
 		&:focus {
-			border: 2px solid @brand-primary;
+			border: 1px solid var(--brand-secondary-light-3);
 			box-shadow: none;
 		}
 
 		&:active {
-			border: 1px solid var(--brand-primary);
+			border: 3px solid @btn-active-border-color;
+		}  
+
+		&:hover {
+			background-color: var(--light-gray) !important;
+			color: var(--brand-secondary) !important;
+			border: 1px solid var(--brand-secondary-light-3);
 		}
 	}
 
+ 	&.btn-tertiary {
+		&:hover {
+			background-color: var(--soft-brown) !important;
+		}
+	} 
+
 	&.btn-guiding-destructive {
 		background: var(--btn-destructive-color);
 		border-color: var(--btn-destructive-bg);

diff --git a/src/less/variables-payex.less b/src/less/variables-payex.less
@@ -69,6 +69,7 @@
 
 @btn-primary-color: @white;
 @btn-primary-bg: @brand-success;
+@btn-active-border-color: #3c3c3c;
 @btn-primary-hover: @brand-tertiary;
 @btn-primary-disabled-color: @white;
 @btn-primary-disabled-bg: @brand-secondary-light-2;
@@ -310,6 +311,7 @@ body {
 	/* Brand fonts */
 	--brand-black: "Futura PT W08 Medium", sans-serif;
 	--brand-default: "Futura PT W08 Book", sans-serif;
+	--brand-default-buttons: "Futura PT W08 Demi", sans-serif;
 	--brand-monofont: monospace;
 	--brand-headline: "Futura PT W08 Demi", sans-serif;
 	--brand-font-default: "Futura PT W08 Book", sans-serif;