Revert color variables changed in an earlier commit, instead use different variables for buttons and input

src/assets/scss/elementStyles.scss

@@ -39,7 +39,7 @@ b, strong {
 }
 
 .button {
-	border: 1px solid $color__gray--primary;
+	border: 1px solid $color__gray--darker;
 	display: inline-block;
 	border-radius: 0.25rem;
 	text-align: center;
@@ -55,7 +55,7 @@ b, strong {
 
 	&:hover {
 		background-color: $color__lightgray--primary;
-		border-color: $color__gray--darker;
+		border-color: $color__gray--darkest;
 	}
 	&:active {
 		background-color: $color__lightgray--darker;
@@ -155,16 +155,13 @@ b, strong {
 }
 
 .input {
-	border: 1px solid $color__gray--primary;
+	border: 1px solid $color__gray--darker;
 	border-radius: 0.25rem;
 	@include text;
 	padding: 0.25rem;
 	outline: none;
 
-	&:hover {
-		border-color: $color__gray--darker;
-	}
-	&:focus {
+	&:hover, &:focus {
 		border-color: $color__gray--darkest;
 	}
 }

src/assets/scss/variables.scss

@@ -6,10 +6,10 @@ $color__text--primary: rgba(0, 0, 0, 0.87);
 $color__text--secondary: rgba(0, 0, 0, 0.54);
 
 $color__lightgray--primary: #F5F5F5;
-$color__lightgray--darker: #D8D8D8;
+$color__lightgray--darker: #EEEEEE;
 $color__lightgray--darkest: #E0E0E0;
 
-$color__gray--primary: #D8D8D8;
+$color__gray--primary: #EEEEEE;
 $color__gray--darker: #E0E0E0;
 $color__gray--darkest: #BDBDBD;