refactor: removed the disabled grey/transparent background "color" (#290)

* refactor: removed the disabled grey/transparent background "color"

* refactor: adapted the correct alpha values

* fix: we want to set the alpha value and that for need the long form hex code

Author: mfranzke

source/_patterns/01-elements/buttons/_button.variables.scss

@@ -2,7 +2,10 @@
 @import "../../00-base/icons/icons.variables";
 @import "../../00-base/icons/icons.helpers";
 
-$button---color: #fff !default;
+// We want to set the alpha value and that for need the long form hex code
+// stylelint-disable color-hex-length
+$button---color: #ffffff !default;
+// stylelint-enable color-hex-length
 
 $button---minHeight: to-rem(
 	$pxValue: 44

source/_patterns/01-elements/buttons/button.scss

@@ -45,6 +45,12 @@
 	&%variant-brand-primary {
 		background-color: $button-brand-primary--backgroundColor;
 
+		&:disabled {
+			background-color: unquote(
+				$button-brand-primary--backgroundColor + "40"
+			);
+		}
+
 		&:not(:disabled) {
 			&:hover {
 				// TODO: This could probably get simplified later on e.g. via CSS variables
@@ -60,6 +66,10 @@
 	&%variant-primary {
 		background-color: $button-primary--backgroundColor;
 
+		&:disabled {
+			background-color: unquote($button-primary--backgroundColor + "40");
+		}
+
 		&:not(:disabled) {
 			&:hover {
 				// TODO: This could probably get simplified later on e.g. via CSS variables
@@ -79,18 +89,18 @@
 		border-color: $db-color-cool-gray-700;
 		color: $db-color-cool-gray-700;
 
+		&:disabled {
+			color: unquote($db-color-cool-gray-700 + "80");
+			border-color: unquote($db-color-cool-gray-700 + "40");
+		}
+
 		&:not(:disabled) {
 			&:hover {
 				// TODO: This could probably get simplified later on e.g. via CSS variables
 				background-color: $button-secondaryOutline-hover-backgroundColor;
 			}
 		}
 
-		&:disabled {
-			background-color: transparent;
-			color: $db-color-cool-gray-700;
-		}
-
 		&:active {
 			background-color: $button-secondaryOutline-active-backgroundColor;
 		}
@@ -100,6 +110,13 @@
 		background-color: $button-secondarySolid--backgroundColor;
 		color: $db-color-cool-gray-700;
 
+		&:disabled {
+			color: unquote($db-color-cool-gray-700 + "80");
+			background-color: unquote(
+				$button-secondarySolid--backgroundColor + "40"
+			);
+		}
+
 		&:not(:disabled) {
 			&:hover {
 				// TODO: This could probably get simplified later on e.g. via CSS variables
@@ -117,17 +134,17 @@
 		border: 2px solid transparent;
 		color: $db-color-cool-gray-700;
 
+		&:disabled {
+			color: unquote($db-color-cool-gray-700 + "80");
+		}
+
 		&:not(:disabled) {
 			&:hover {
 				// TODO: This could probably get simplified later on e.g. via CSS variables
 				background-color: $button-secondaryOutline-hover-backgroundColor;
 			}
 		}
 
-		&:disabled {
-			background-color: transparent; // shame.css
-		}
-
 		&:active {
 			background-color: $button-secondaryOutline-active-backgroundColor;
 		}
@@ -197,8 +214,6 @@
 	}
 
 	&:disabled {
-		background-color: $db-color-cool-gray-200;
-		color: $db-color-cool-gray-700;
-		opacity: 0.5;
+		color: unquote($button---color + "80");
 	}
 }