From 7938e9790ac074af57f60dbf90ad74d85b724046 Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Tue, 13 Aug 2024 11:20:19 +0200
Subject: [PATCH] =?UTF-8?q?homog=C3=A9n=C3=A9isation=20des=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DesignSystem/Button/classes.module.scss   | 402 ++++++++++--------
 1 file changed, 218 insertions(+), 184 deletions(-)

diff --git a/src/front/Components/DesignSystem/Button/classes.module.scss b/src/front/Components/DesignSystem/Button/classes.module.scss
index 9beda2dd..1ef3abbf 100644
--- a/src/front/Components/DesignSystem/Button/classes.module.scss
+++ b/src/front/Components/DesignSystem/Button/classes.module.scss
@@ -26,8 +26,8 @@
 	*/
 
 	&[variant="primary"] {
-		color: var(--button-contained-primary-hovered-contrast);
-		border: 1px solid var(--button-contained-primary-default-border);
+		color: var(--button-contained-primary-default-contrast);
+		border-color: var(--button-contained-primary-default-border);
 		background: var(--button-contained-primary-default-background);
 
 		svg {
@@ -35,7 +35,7 @@
 		}
 
 		&:hover {
-			border: 1px solid var(--button-contained-primary-hovered-border);
+			border-color: var(--button-contained-primary-hovered-border);
 			background: var(--button-contained-primary-hovered-background);
 
 			svg {
@@ -46,7 +46,7 @@
 		&:focus,
 		&:active {
 			color: var(--button-contained-primary-default-contrast);
-			border: 1px solid var(--button-contained-primary-pressed-border);
+			border-color: var(--button-contained-primary-pressed-border);
 			background: var(--button-contained-primary-pressed-background);
 
 			svg {
@@ -56,7 +56,7 @@
 
 		&[styletype="outlined"] {
 			color: var(--button-outlined-primary-default-contrast);
-			border: 1px solid var(--button-outlined-primary-default-border);
+			border-color: var(--button-outlined-primary-default-border);
 			background: var(--button-outlined-primary-default-background);
 
 			svg {
@@ -64,7 +64,7 @@
 			}
 
 			&:hover {
-				border: 1px solid var(--button-outlined-primary-hovered-border);
+				border-color: var(--button-outlined-primary-hovered-border);
 				background: var(--button-outlined-primary-hovered-background);
 
 				svg {
@@ -75,7 +75,7 @@
 			&:focus,
 			&:active {
 				color: var(--button-outlined-primary-pressed-contrast);
-				border: 1px solid var(--button-outlined-primary-pressed-border);
+				border-color: var(--button-outlined-primary-pressed-border);
 				background: var(--button-outlined-primary-pressed-background);
 
 				svg {
@@ -86,16 +86,16 @@
 
 		&[styletype="text"] {
 			color: var(--button-text-primary-default-contrast);
-			border-bottom: 1px solid var(--button-text-primary-default-border);
+			border-color: var(--button-text-primary-default-border);
 			background: var(--button-text-primary-default-background);
 
 			svg {
 				stroke: var(--button-text-primary-default-contrast);
 			}
-
 			&:hover {
-				border-bottom: 1px solid var(--button-outlined-primary-hovered-border);
-				background: var(--button-outlined-primary-default-background);
+				color: var(--button-text-primary-hovered-contrast);
+				border-color: var(--button-text-primary-hovered-border);
+				background: var(--button-text-primary-hovered-background);
 
 				svg {
 					stroke: var(--button-text-primary-hovered-contrast);
@@ -104,9 +104,9 @@
 
 			&:focus,
 			&:active {
-				color: var(--color-primary-800);
-				background: var(--button-outlined-primary-default-background);
-				border-bottom: 1px solid var(--color-primary-800);
+				color: var(--button-text-primary-pressed-contrast);
+				border-color: var(--button-text-primary-pressed-border);
+				background: var(--button-text-primary-pressed-background);
 
 				svg {
 					stroke: var(--button-text-primary-pressed-contrast);
@@ -117,17 +117,16 @@
 
 	&[variant="secondary"] {
 		color: var(--button-contained-secondary-default-contrast);
-		background: var(--button-contained-secondary-default-background);
 		border-color: var(--button-contained-secondary-default-border);
+		background: var(--button-contained-secondary-default-background);
 
 		svg {
 			stroke: var(--button-contained-secondary-default-contrast);
 		}
 
 		&:hover {
-			color: var(--button-contained-secondary-hovered-contrast);
-			background: var(--button-contained-secondary-hovered-background);
 			border-color: var(--button-contained-secondary-hovered-border);
+			background: var(--button-contained-secondary-hovered-background);
 
 			svg {
 				stroke: var(--button-contained-secondary-hovered-contrast);
@@ -136,9 +135,9 @@
 
 		&:focus,
 		&:active {
-			color: var(--button-contained-secondary-pressed-contrast);
-			background: var(--button-contained-secondary-pressed-background);
+			color: var(--button-contained-secondary-default-contrast);
 			border-color: var(--button-contained-secondary-pressed-border);
+			background: var(--button-contained-secondary-pressed-background);
 
 			svg {
 				stroke: var(--button-contained-secondary-pressed-contrast);
@@ -147,14 +146,15 @@
 
 		&[styletype="outlined"] {
 			color: var(--button-outlined-secondary-default-contrast);
-			border: 1px solid var(--button-outlined-secondary-default-border);
+			border-color: var(--button-outlined-secondary-default-border);
 			background: var(--button-outlined-secondary-default-background);
 
 			svg {
 				stroke: var(--button-outlined-secondary-default-contrast);
 			}
+
 			&:hover {
-				border: 1px solid var(--button-outlined-secondary-hovered-border);
+				border-color: var(--button-outlined-secondary-hovered-border);
 				background: var(--button-outlined-secondary-hovered-background);
 
 				svg {
@@ -165,7 +165,7 @@
 			&:focus,
 			&:active {
 				color: var(--button-outlined-secondary-pressed-contrast);
-				border: 1px solid var(--button-outlined-secondary-pressed-border);
+				border-color: var(--button-outlined-secondary-pressed-border);
 				background: var(--button-outlined-secondary-pressed-background);
 
 				svg {
@@ -176,15 +176,16 @@
 
 		&[styletype="text"] {
 			color: var(--button-text-secondary-default-contrast);
-			border-bottom: 1px solid var(--button-text-secondary-default-border);
+			border-color: var(--button-text-secondary-default-border);
 			background: var(--button-text-secondary-default-background);
 
 			svg {
 				stroke: var(--button-text-secondary-default-contrast);
 			}
 			&:hover {
-				border-bottom: 1px solid var(--button-outlined-secondary-hovered-border);
-				background: var(--button-outlined-secondary-default-background);
+				color: var(--button-text-secondary-hovered-contrast);
+				border-color: var(--button-text-secondary-hovered-border);
+				background: var(--button-text-secondary-hovered-background);
 
 				svg {
 					stroke: var(--button-text-secondary-hovered-contrast);
@@ -193,9 +194,9 @@
 
 			&:focus,
 			&:active {
-				color: var(--button-outlined-secondary-pressed-contrast);
-				border-bottom: 1px solid var(--button-outlined-secondary-pressed-border);
-				background: var(--button-outlined-secondary-pressed-background);
+				color: var(--button-text-secondary-pressed-contrast);
+				border-color: var(--button-text-secondary-pressed-border);
+				background: var(--button-text-secondary-pressed-background);
 
 				svg {
 					stroke: var(--button-text-secondary-pressed-contrast);
@@ -205,8 +206,8 @@
 	}
 
 	&[variant="neutral"] {
-		color: var(--button-contained-neutral-hovered-contrast);
-		border: 1px solid var(--button-contained-neutral-default-border);
+		color: var(--button-contained-neutral-default-contrast);
+		border-color: var(--button-contained-neutral-default-border);
 		background: var(--button-contained-neutral-default-background);
 
 		svg {
@@ -214,7 +215,7 @@
 		}
 
 		&:hover {
-			border: 1px solid var(--button-contained-neutral-hovered-border);
+			border-color: var(--button-contained-neutral-hovered-border);
 			background: var(--button-contained-neutral-hovered-background);
 
 			svg {
@@ -225,7 +226,7 @@
 		&:focus,
 		&:active {
 			color: var(--button-contained-neutral-default-contrast);
-			border: 1px solid var(--button-contained-neutral-pressed-border);
+			border-color: var(--button-contained-neutral-pressed-border);
 			background: var(--button-contained-neutral-pressed-background);
 
 			svg {
@@ -235,15 +236,17 @@
 
 		&[styletype="outlined"] {
 			color: var(--button-outlined-neutral-default-contrast);
-			border: 1px solid var(--button-outlined-neutral-default-border);
+			border-color: var(--button-outlined-neutral-default-border);
 			background: var(--button-outlined-neutral-default-background);
 
 			svg {
 				stroke: var(--button-outlined-neutral-default-contrast);
 			}
+
 			&:hover {
-				border: 1px solid var(--button-outlined-neutral-hovered-border);
+				border-color: var(--button-outlined-neutral-hovered-border);
 				background: var(--button-outlined-neutral-hovered-background);
+
 				svg {
 					stroke: var(--button-outlined-neutral-hovered-contrast);
 				}
@@ -252,7 +255,7 @@
 			&:focus,
 			&:active {
 				color: var(--button-outlined-neutral-pressed-contrast);
-				border: 1px solid var(--button-outlined-neutral-pressed-border);
+				border-color: var(--button-outlined-neutral-pressed-border);
 				background: var(--button-outlined-neutral-pressed-background);
 
 				svg {
@@ -263,15 +266,16 @@
 
 		&[styletype="text"] {
 			color: var(--button-text-neutral-default-contrast);
-			border-bottom: 1px solid var(--button-text-neutral-default-border);
+			border-color: var(--button-text-neutral-default-border);
 			background: var(--button-text-neutral-default-background);
+
 			svg {
 				stroke: var(--button-text-neutral-default-contrast);
 			}
-
 			&:hover {
-				border-bottom: 1px solid var(--button-outlined-neutral-hovered-border);
-				background: var(--button-outlined-neutral-default-background);
+				color: var(--button-text-neutral-hovered-contrast);
+				border-color: var(--button-text-neutral-hovered-border);
+				background: var(--button-text-neutral-hovered-background);
 
 				svg {
 					stroke: var(--button-text-neutral-hovered-contrast);
@@ -280,9 +284,9 @@
 
 			&:focus,
 			&:active {
-				color: var(--color-primary-800);
-				background: var(--button-outlined-neutral-default-background);
-				border-bottom: 1px solid var(--color-primary-800);
+				color: var(--button-text-neutral-pressed-contrast);
+				border-color: var(--button-text-neutral-pressed-border);
+				background: var(--button-text-neutral-pressed-background);
 
 				svg {
 					stroke: var(--button-text-neutral-pressed-contrast);
@@ -292,17 +296,17 @@
 	}
 
 	&[variant="error"] {
-		color: var(--color-error-600);
-		background: var(--color-error-600);
-		border-color: var(--color-error-600);
+		color: var(--button-contained-error-default-contrast);
+		border-color: var(--button-contained-error-default-border);
+		background: var(--button-contained-error-default-background);
 
 		svg {
 			stroke: var(--button-contained-error-default-contrast);
 		}
 
 		&:hover {
-			background: var(--color-error-800);
-			border-color: var(--color-error-800);
+			border-color: var(--button-contained-error-hovered-border);
+			background: var(--button-contained-error-hovered-background);
 
 			svg {
 				stroke: var(--button-contained-error-hovered-contrast);
@@ -311,8 +315,9 @@
 
 		&:focus,
 		&:active {
-			background: var(--color-error-900);
-			border-color: var(--color-error-900);
+			color: var(--button-contained-error-default-contrast);
+			border-color: var(--button-contained-error-pressed-border);
+			background: var(--button-contained-error-pressed-background);
 
 			svg {
 				stroke: var(--button-contained-error-pressed-contrast);
@@ -320,13 +325,17 @@
 		}
 
 		&[styletype="outlined"] {
+			color: var(--button-outlined-error-default-contrast);
+			border-color: var(--button-outlined-error-default-border);
+			background: var(--button-outlined-error-default-background);
+
 			svg {
 				stroke: var(--button-outlined-error-default-contrast);
 			}
 
 			&:hover {
-				background-color: var(--color-error-50);
-				border-color: var(--color-secondary-700);
+				border-color: var(--button-outlined-error-hovered-border);
+				background: var(--button-outlined-error-hovered-background);
 
 				svg {
 					stroke: var(--button-outlined-error-hovered-contrast);
@@ -335,9 +344,9 @@
 
 			&:focus,
 			&:active {
-				background-color: var(--color-error-100);
-				color: var(--color-secondary-700);
-				border-color: var(--color-secondary-700);
+				color: var(--button-outlined-error-pressed-contrast);
+				border-color: var(--button-outlined-error-pressed-border);
+				background: var(--button-outlined-error-pressed-background);
 
 				svg {
 					stroke: var(--button-outlined-error-pressed-contrast);
@@ -346,14 +355,17 @@
 		}
 
 		&[styletype="text"] {
+			color: var(--button-text-error-default-contrast);
+			border-color: var(--button-text-error-default-border);
+			background: var(--button-text-error-default-background);
+
 			svg {
 				stroke: var(--button-text-error-default-contrast);
 			}
-
 			&:hover {
-				background-color: transparent;
-				color: var(--color-error-800);
-				border-color: var(--color-error-800);
+				color: var(--button-text-error-hovered-contrast);
+				border-color: var(--button-text-error-hovered-border);
+				background: var(--button-text-error-hovered-background);
 
 				svg {
 					stroke: var(--button-text-error-hovered-contrast);
@@ -362,9 +374,9 @@
 
 			&:focus,
 			&:active {
-				background-color: transparent;
-				color: var(--color-error-900);
-				border-color: var(--color-error-900);
+				color: var(--button-text-error-pressed-contrast);
+				border-color: var(--button-text-error-pressed-border);
+				background: var(--button-text-error-pressed-background);
 
 				svg {
 					stroke: var(--button-text-error-pressed-contrast);
@@ -373,101 +385,18 @@
 		}
 	}
 
-	&[variant="warning"] {
-		color: var(--color-warning-600);
-		background: var(--color-warning-600);
-		border-color: var(--color-warning-600);
-
-		svg {
-			stroke: var(--button-contained-warning-default-contrast);
-		}
-
-		&:hover {
-			background: var(--color-warning-800);
-			border-color: var(--color-warning-800);
-
-			svg {
-				stroke: var(--button-contained-warning-hovered-contrast);
-			}
-		}
-
-		&:focus,
-		&:active {
-			background: var(--color-warning-900);
-			border-color: var(--color-warning-900);
-
-			svg {
-				stroke: var(--button-contained-warning-pressed-contrast);
-			}
-		}
-
-		&[styletype="outlined"] {
-			svg {
-				stroke: var(--button-outlined-warning-default-contrast);
-			}
-
-			&:hover {
-				background-color: var(--color-warning-50);
-				border-color: var(--color-warning-700);
-				color: var(--color-warning-700);
-
-				svg {
-					stroke: var(--button-outlined-warning-hovered-contrast);
-				}
-			}
-
-			&:focus,
-			&:active {
-				background-color: var(--color-warning-100);
-				color: var(--color-warning-700);
-				border-color: var(--color-warning-700);
-
-				svg {
-					stroke: var(--button-outlined-warning-pressed-contrast);
-				}
-			}
-		}
-
-		&[styletype="text"] {
-			svg {
-				stroke: var(--button-text-warning-default-contrast);
-			}
-
-			&:hover {
-				background-color: transparent;
-				color: var(--color-warning-800);
-				border-color: var(--color-warning-800);
-
-				svg {
-					stroke: var(--button-text-warning-hovered-contrast);
-				}
-			}
-
-			&:focus,
-			&:active {
-				background-color: transparent;
-				color: var(--color-warning-900);
-				border-color: var(--color-warning-900);
-
-				svg {
-					stroke: var(--button-text-warning-pressed-contrast);
-				}
-			}
-		}
-	}
-
 	&[variant="success"] {
-		color: var(--color-success-600);
-		background: var(--color-success-600);
-		border-color: var(--color-success-600);
+		color: var(--button-contained-success-default-contrast);
+		border-color: var(--button-contained-success-default-border);
+		background: var(--button-contained-success-default-background);
 
 		svg {
 			stroke: var(--button-contained-success-default-contrast);
 		}
 
 		&:hover {
-			background: var(--color-success-800);
-			border-color: var(--color-success-800);
+			border-color: var(--button-contained-success-hovered-border);
+			background: var(--button-contained-success-hovered-background);
 
 			svg {
 				stroke: var(--button-contained-success-hovered-contrast);
@@ -476,8 +405,9 @@
 
 		&:focus,
 		&:active {
-			background: var(--color-success-900);
-			border-color: var(--color-success-900);
+			color: var(--button-contained-success-default-contrast);
+			border-color: var(--button-contained-success-pressed-border);
+			background: var(--button-contained-success-pressed-background);
 
 			svg {
 				stroke: var(--button-contained-success-pressed-contrast);
@@ -485,14 +415,17 @@
 		}
 
 		&[styletype="outlined"] {
+			color: var(--button-outlined-success-default-contrast);
+			border-color: var(--button-outlined-success-default-border);
+			background: var(--button-outlined-success-default-background);
+
 			svg {
 				stroke: var(--button-outlined-success-default-contrast);
 			}
 
 			&:hover {
-				background-color: var(--color-success-50);
-				border-color: var(--color-success-700);
-				color: var(--color-success-700);
+				border-color: var(--button-outlined-success-hovered-border);
+				background: var(--button-outlined-success-hovered-background);
 
 				svg {
 					stroke: var(--button-outlined-success-hovered-contrast);
@@ -501,9 +434,9 @@
 
 			&:focus,
 			&:active {
-				background-color: var(--color-success-100);
-				color: var(--color-success-700);
-				border-color: var(--color-success-700);
+				color: var(--button-outlined-success-pressed-contrast);
+				border-color: var(--button-outlined-success-pressed-border);
+				background: var(--button-outlined-success-pressed-background);
 
 				svg {
 					stroke: var(--button-outlined-success-pressed-contrast);
@@ -512,14 +445,17 @@
 		}
 
 		&[styletype="text"] {
+			color: var(--button-text-success-default-contrast);
+			border-color: var(--button-text-success-default-border);
+			background: var(--button-text-success-default-background);
+
 			svg {
 				stroke: var(--button-text-success-default-contrast);
 			}
-
 			&:hover {
-				background-color: transparent;
-				color: var(--color-success-800);
-				border-color: var(--color-success-800);
+				color: var(--button-text-success-hovered-contrast);
+				border-color: var(--button-text-success-hovered-border);
+				background: var(--button-text-success-hovered-background);
 
 				svg {
 					stroke: var(--button-text-success-hovered-contrast);
@@ -528,9 +464,9 @@
 
 			&:focus,
 			&:active {
-				background-color: transparent;
-				color: var(--color-success-900);
-				border-color: var(--color-success-900);
+				color: var(--button-text-success-pressed-contrast);
+				border-color: var(--button-text-success-pressed-border);
+				background: var(--button-text-success-pressed-background);
 
 				svg {
 					stroke: var(--button-text-success-pressed-contrast);
@@ -539,18 +475,108 @@
 		}
 	}
 
+	&[variant="warning"] {
+		color: var(--button-contained-warning-default-contrast);
+		border-color: var(--button-contained-warning-default-border);
+		background: var(--button-contained-warning-default-background);
+
+		svg {
+			stroke: var(--button-contained-warning-default-contrast);
+		}
+
+		&:hover {
+			border-color: var(--button-contained-warning-hovered-border);
+			background: var(--button-contained-warning-hovered-background);
+
+			svg {
+				stroke: var(--button-contained-warning-hovered-contrast);
+			}
+		}
+
+		&:focus,
+		&:active {
+			color: var(--button-contained-warning-default-contrast);
+			border-color: var(--button-contained-warning-pressed-border);
+			background: var(--button-contained-warning-pressed-background);
+
+			svg {
+				stroke: var(--button-contained-warning-pressed-contrast);
+			}
+		}
+
+		&[styletype="outlined"] {
+			color: var(--button-outlined-warning-default-contrast);
+			border-color: var(--button-outlined-warning-default-border);
+			background: var(--button-outlined-warning-default-background);
+
+			svg {
+				stroke: var(--button-outlined-warning-default-contrast);
+			}
+
+			&:hover {
+				border-color: var(--button-outlined-warning-hovered-border);
+				background: var(--button-outlined-warning-hovered-background);
+
+				svg {
+					stroke: var(--button-outlined-warning-hovered-contrast);
+				}
+			}
+
+			&:focus,
+			&:active {
+				color: var(--button-outlined-warning-pressed-contrast);
+				border-color: var(--button-outlined-warning-pressed-border);
+				background: var(--button-outlined-warning-pressed-background);
+
+				svg {
+					stroke: var(--button-outlined-warning-pressed-contrast);
+				}
+			}
+		}
+
+		&[styletype="text"] {
+			color: var(--button-text-warning-default-contrast);
+			border-color: var(--button-text-warning-default-border);
+			background: var(--button-text-warning-default-background);
+
+			svg {
+				stroke: var(--button-text-warning-default-contrast);
+			}
+			&:hover {
+				color: var(--button-text-warning-hovered-contrast);
+				border-color: var(--button-text-warning-hovered-border);
+				background: var(--button-text-warning-hovered-background);
+
+				svg {
+					stroke: var(--button-text-warning-hovered-contrast);
+				}
+			}
+
+			&:focus,
+			&:active {
+				color: var(--button-text-warning-pressed-contrast);
+				border-color: var(--button-text-warning-pressed-border);
+				background: var(--button-text-warning-pressed-background);
+
+				svg {
+					stroke: var(--button-text-warning-pressed-contrast);
+				}
+			}
+		}
+	}
+
 	&[variant="info"] {
-		color: var(--color-info-700);
-		background: var(--color-info-700);
-		border-color: var(--color-info-700);
+		color: var(--button-contained-info-default-contrast);
+		border-color: var(--button-contained-info-default-border);
+		background: var(--button-contained-info-default-background);
 
 		svg {
 			stroke: var(--button-contained-info-default-contrast);
 		}
 
 		&:hover {
-			background: var(--color-info-900);
-			border-color: var(--color-info-900);
+			border-color: var(--button-contained-info-hovered-border);
+			background: var(--button-contained-info-hovered-background);
 
 			svg {
 				stroke: var(--button-contained-info-hovered-contrast);
@@ -559,8 +585,9 @@
 
 		&:focus,
 		&:active {
-			background: var(--color-info-950);
-			border-color: var(--color-info-950);
+			color: var(--button-contained-info-default-contrast);
+			border-color: var(--button-contained-info-pressed-border);
+			background: var(--button-contained-info-pressed-background);
 
 			svg {
 				stroke: var(--button-contained-info-pressed-contrast);
@@ -568,13 +595,17 @@
 		}
 
 		&[styletype="outlined"] {
+			color: var(--button-outlined-info-default-contrast);
+			border-color: var(--button-outlined-info-default-border);
+			background: var(--button-outlined-info-default-background);
+
 			svg {
 				stroke: var(--button-outlined-info-default-contrast);
 			}
+
 			&:hover {
-				background-color: var(--color-info-50);
-				border-color: var(--color-info-700);
-				color: var(--color-info-700);
+				border-color: var(--button-outlined-info-hovered-border);
+				background: var(--button-outlined-info-hovered-background);
 
 				svg {
 					stroke: var(--button-outlined-info-hovered-contrast);
@@ -583,9 +614,9 @@
 
 			&:focus,
 			&:active {
-				background-color: var(--color-info-100);
-				color: var(--color-info-700);
-				border-color: var(--color-info-700);
+				color: var(--button-outlined-info-pressed-contrast);
+				border-color: var(--button-outlined-info-pressed-border);
+				background: var(--button-outlined-info-pressed-background);
 
 				svg {
 					stroke: var(--button-outlined-info-pressed-contrast);
@@ -594,14 +625,17 @@
 		}
 
 		&[styletype="text"] {
+			color: var(--button-text-info-default-contrast);
+			border-color: var(--button-text-info-default-border);
+			background: var(--button-text-info-default-background);
+
 			svg {
 				stroke: var(--button-text-info-default-contrast);
 			}
-
 			&:hover {
-				background-color: transparent;
-				color: var(--color-info-900);
-				border-color: var(--color-info-900);
+				color: var(--button-text-info-hovered-contrast);
+				border-color: var(--button-text-info-hovered-border);
+				background: var(--button-text-info-hovered-background);
 
 				svg {
 					stroke: var(--button-text-info-hovered-contrast);
@@ -610,9 +644,9 @@
 
 			&:focus,
 			&:active {
-				background-color: transparent;
-				color: var(--color-info-950);
-				border-color: var(--color-info-950);
+				color: var(--button-text-info-pressed-contrast);
+				border-color: var(--button-text-info-pressed-border);
+				background: var(--button-text-info-pressed-background);
 
 				svg {
 					stroke: var(--button-text-info-pressed-contrast);