adjust colors

woocommerce · Aug 13, 2020 · 2816f72 · 2816f72
1 parent 9e4813a
commit 2816f72
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 20 deletions.
diff --git a/assets/css/abstracts/_colors.scss b/assets/css/abstracts/_colors.scss
@@ -55,5 +55,10 @@ $input-border-dark: rgba(255, 255, 255, 0.4);
 $input-disabled-dark: rgba(255, 255, 255, 0.3);
 $controls-border-dark: rgba(255, 255, 255, 0.6);
 $input-text-active: #2b2d2f;
-$input-text-dark: rgba(255, 255, 255, 0.6);
+$input-placeholder-dark: rgba(255, 255, 255, 0.6);
+$input-text-dark: #fff;
+$input-background-dark: rgba(0, 0, 0, 0.1);
+$select-dropdown-dark: #1e1e1e;
+$select-dropdown-light: #fff;
+$select-item-dark: rgba(0, 0, 0, 0.4);
 
diff --git a/assets/js/base/components/quantity-selector/style.scss b/assets/js/base/components/quantity-selector/style.scss
@@ -8,9 +8,6 @@
 	&:focus {
 		outline: 2px solid $core-grey-light-600;
 	}
-	.has-dark-controls &:focus {
-		outline-width: 1px;
-	}
 }
 
 .wc-block-components-quantity-selector {
@@ -53,7 +50,7 @@
 		}
 
 		.has-dark-controls & {
-			color: #fff;
+			color: $input-text-dark;
 
 			&:focus {
 				background: transparent;
@@ -90,11 +87,11 @@
 		}
 
 		.has-dark-controls & {
-			color: #fff;
+			color: $input-text-dark;
 
 			&:hover,
 			&:focus {
-				color: #fff;
+				color: $input-text-dark;
 			}
 			&:disabled {
 				color: $input-disabled-dark;

diff --git a/assets/js/base/components/select/style.scss b/assets/js/base/components/select/style.scss
@@ -18,6 +18,9 @@
 		max-width: calc(100% - #{2 * $gap});
 		white-space: nowrap;
 
+		.has-dark-controls & {
+			color: $input-placeholder-dark;
+		}
 		@media screen and (prefers-reduced-motion: reduce) {
 			transition: none;
 		}
@@ -70,20 +73,20 @@
 			.has-dark-controls & {
 				background-color: rgba(#000, 0.1);
 				border-color: $input-border-dark;
-				color: #fff;
+				color: $input-text-dark;
 			}
 		}
 	}
 
 	.components-custom-select-control__button-icon {
 		right: #{$gap - 4px};
 		.has-dark-controls & {
-			fill: #fff;
+			fill: $input-text-dark;
 		}
 	}
 
 	.components-custom-select-control__menu {
-		background-color: #fff;
+		background-color: $select-dropdown-dark;
 		margin: 0;
 		max-height: 300px;
 		overflow: auto;
@@ -93,7 +96,7 @@
 			display: none;
 		}
 		.has-dark-controls & {
-			background-color: #1e1e1e;
+			background-color: $select-dropdown-dark;
 			color: $input-text-dark;
 		}
 	}
@@ -106,7 +109,7 @@
 		&:focus,
 		&.is-highlighted {
 			.has-dark-controls & {
-				background-color: rgba(#000, 0.4);
+				background-color: $select-item-dark;
 			}
 		}
 	}

diff --git a/assets/js/base/components/text-input/style.scss b/assets/js/base/components/text-input/style.scss
@@ -20,6 +20,9 @@
 		max-width: calc(100% - #{2 * $gap});
 		cursor: text;
 
+		.has-dark-controls & {
+			color: $input-placeholder-dark;
+		}
 		@media screen and (prefers-reduced-motion: reduce) {
 			transition: none;
 		}
@@ -55,15 +58,9 @@
 			background-color: #fff;
 		}
 		.has-dark-controls & {
-			background-color: rgba(#000, 0.1);
+			background-color: $input-background-dark;
 			border-color: $input-border-dark;
-			color: #fff;
-			&:focus {
-				background-color: rgba(#000, 0.1);
-			}
-			&::placeholder {
-				color: $input-text-dark;
-			}
+			color: $input-text-dark;
 		}
 	}