SWED-2331 style button remove transparency from disabled

SwedbankPay · Apr 8, 2024 · fc8e712 · fc8e712
1 parent 2962faf
commit fc8e712
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/less/variables-payex.less b/src/less/variables-payex.less
@@ -227,6 +227,7 @@ body {
 	--text-muted: color-mix(in srgb, var(--text-color), var(--white) 75%);
 	--text-link: #1c7d2e;
 	--text-hover: var(--brand-primary);
+	--text-disabled: var(--brand-secondary-light-2);
 
 	/* Checkbox */
 	--checkbox-checked-color: var(--brand-secondary, #3c3c3c);
@@ -268,7 +269,11 @@ body {
 
 	/* Shared button variables */
 	--btn-disabled-text: var(--text-disabled);
-	--btn-bg-disabled: rgb(212 196 188 / 30%);
+	--btn-bg-disabled: color-mix(
+		in oklch,
+		var(--text-disabled),
+		var(--white) 70%
+	);
 	--btn-active-color: var(--brand-secondary, #3c3c3c);
 
 	/* INPUTS COLORS */

diff --git a/src/less/variables-swedbankpay.less b/src/less/variables-swedbankpay.less
@@ -254,7 +254,11 @@
 	--btn-tertiary-disabled: var(--btn-bg-disabled);
 	// Shared button variables
 	--btn-disabled-text: var(--text-disabled);
-	--btn-bg-disabled: rgb(212 196 188 / 30%);
+	--btn-bg-disabled: color-mix(
+		in oklch,
+		var(--text-disabled),
+		var(--white) 70%
+	);
 	--btn-active-color: var(--brand-turquoise-light);
 
 	//FORM VALUES