Color harmony 🌈 (#4803)

* Revert "Introduce an interim gray variable till the design can be refactored." This reverts commit cdff94e. * Home screen color updates * Analytics colors
woocommerce · Jul 16, 2020 · 61ff315 · 61ff315
1 parent db83b7f
commit 61ff315
Show file tree

Hide file tree

Showing 13 changed files with 33 additions and 33 deletions.
diff --git a/client/dashboard/dashboard-charts/block.scss b/client/dashboard/dashboard-charts/block.scss
@@ -36,7 +36,7 @@
 			.woocommerce-legend__item > button {
 				cursor: default;
 				&:hover {
-					background: $gray-50;
+					background: $gray-100;
 				}
 				.woocommerce-legend__item-container {
 					cursor: default;
@@ -47,16 +47,16 @@
 			}
 
 			&:hover {
-				background: $gray-50;
+				background: $gray-100;
 				.woocommerce-legend__item > button {
-					background: $gray-50;
+					background: $gray-100;
 				}
 			}
 		}
 	}
 
 	&:hover {
-		background: $gray-50;
+		background: $gray-100;
 	}
 
 	.screen-reader-text:focus {

diff --git a/client/dashboard/store-performance/style.scss b/client/dashboard/store-performance/style.scss
@@ -28,7 +28,7 @@
 		background-color: $studio-white;
 
 		&:hover {
-			background-color: $gray-50;
+			background-color: $gray-100;
 		}
 
 		&:active {

diff --git a/client/header/activity-panel/activity-card/style.scss b/client/header/activity-panel/activity-card/style.scss
@@ -3,7 +3,7 @@
 	padding: $fallback-gutter;
 	padding: $gutter;
 	background: $studio-white;
-	border-bottom: 1px solid $gray-100;
+	border-bottom: 1px solid $gray-200;
 	color: $gray-text;
 	@include font-size( 13 );
 

diff --git a/client/header/activity-panel/panels/inbox/style.scss b/client/header/activity-panel/panels/inbox/style.scss
@@ -1,8 +1,7 @@
 .woocommerce-inbox-message {
 	position: relative;
 	color: $gray-text;
-	// background: $gray-100;
-	background: $gray-50;
+	background: $gray-100;
 	border-radius: 2px;
 	@include font-size( 13 );
 	margin: 0 0 $gap-large;
@@ -30,7 +29,7 @@
 	}
 
 	&:not(.is-placeholder) {
-		border: 1px solid $gray-400;
+		border: 1px solid $gray-200;
 	}
 
 	&.message-is-unread {

diff --git a/client/homescreen/stats-overview/style.scss b/client/homescreen/stats-overview/style.scss
@@ -1,5 +1,5 @@
 // Set up some local color variables to make the CSS more clear
-$outer-border: $gray-400;
+$outer-border: $gray-200;
 $promo-actions-border-top: $gray-100;
 $promo-actions-border-bottom: $gray-100;
 

diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss
@@ -5,9 +5,6 @@ $transparent: rgba(255, 255, 255, 0);
 
 $gray-text: $gray-700;
 $gray-text-hover: $gray-900;
-// Woocommerce needs one lighter shade of gray to work alongside the new set of grays exposed by @wordpress/base-styles.
-// Removing this would require significant refactoring.
-$gray-50: #f8f9f9;
 
 // Gutenberg
 $button-hover: #fafafa;

diff --git a/packages/components/src/calendar/style.scss b/packages/components/src/calendar/style.scss
@@ -1,6 +1,6 @@
 .woocommerce-calendar {
 	width: 100%;
-	background-color: $gray-50;
+	background-color: $gray-100;
 	border-top: 1px solid $gray-400;
 	height: 396px;
 
@@ -60,7 +60,7 @@
 	.CalendarMonthGrid,
 	.CalendarMonth,
 	.DayPicker {
-		background-color: $gray-50;
+		background-color: $gray-100;
 	}
 
 	.DayPicker_weekHeader_li {

diff --git a/packages/components/src/dropdown-button/style.scss b/packages/components/src/dropdown-button/style.scss
@@ -1,7 +1,7 @@
 .woocommerce-page .woocommerce-dropdown-button {
 	background-color: $studio-white;
 	position: relative;
-	border: 1px solid $gray-200;
+	border: 1px solid $gray-100;
 	color: $gray-700;
 	border-radius: 4px;
 	padding: 0 40px 0 0;
@@ -29,7 +29,7 @@
 	&:hover,
 	&:active,
 	&.is-open {
-		background-color: $gray-50;
+		background-color: $gray-100;
 	}
 
 	&.is-multi-line .woocommerce-dropdown-button__labels {

diff --git a/packages/components/src/filter-picker/style.scss b/packages/components/src/filter-picker/style.scss
@@ -56,15 +56,15 @@
 		display: flex;
 		width: 100%;
 		padding: 1em 1em 1em 3em;
-		background-color: $gray-50;
+		background-color: $gray-100;
 		text-align: left;
 
 		&.components-button {
 			color: $gray-700;
 		}
 
 		&:hover {
-			background-color: $gray-100;
+			background-color: $gray-200;
 			color: $gray-700;
 		}
 

diff --git a/packages/components/src/filters/style.scss b/packages/components/src/filters/style.scss
@@ -89,7 +89,7 @@
 
 .woocommerce-filters__compare-body {
 	padding: $gap;
-	background-color: $gray-50;
+	background-color: $gray-100;
 	border-bottom: 1px solid $gray-100;
 }
 

diff --git a/packages/components/src/segmented-selection/style.scss b/packages/components/src/segmented-selection/style.scss
@@ -28,18 +28,18 @@
 }
 
 .woocommerce-segmented-selection__label {
-	background-color: $gray-50;
+	background-color: $gray-100;
 	padding: $gap-small $gap-small $gap-small $gap-larger;
 	position: relative;
 	display: block;
 	height: 100%;
 
 	&:active {
-		background-color: $gray-100;
+		background-color: $gray-200;
 	}
 
 	&:hover {
-		background-color: $gray-100;
+		background-color: $gray-200;
 	}
 }
 
@@ -49,7 +49,7 @@
 	left: -9999px;
 
 	&:active + label .woocommerce-segmented-selection__label {
-		background-color: $gray-100;
+		background-color: $gray-200;
 	}
 
 	&:checked + label .woocommerce-segmented-selection__label {

diff --git a/packages/components/src/summary/style.scss b/packages/components/src/summary/style.scss
@@ -1,5 +1,5 @@
 // Set up some local color variables to make the CSS more clear
-$border: $gray-100;
+$border: $gray-200;
 
 // A local mixin to generate the grid template and border logic
 @mixin make-cols( $i ) {
@@ -259,12 +259,12 @@ $border: $gray-100;
 	flex-direction: column;
 	height: 100%;
 	padding: $gap-large;
-	background-color: $gray-50;
+	background-color: $gray-100;
 	border-bottom: 1px solid $border;
 	border-right: 1px solid $border;
 	line-height: 1.4em;
 	text-decoration: none;
-	color: var(--wp-admin-theme-color);
+	color: $gray-900;
 
 	&.components-button {
 		height: auto;
@@ -273,8 +273,12 @@ $border: $gray-100;
 	}
 
 	&:hover {
-		background-color: $gray-50;
-		color: color(var(--wp-admin-theme-color-darker-20));
+		background-color: $gray-100;
+		color: var(--wp-admin-theme-color);
+
+		.woocommerce-summary__item-label {
+			color: var(--wp-admin-theme-color);
+		}
 	}
 
 	&:active {
@@ -312,7 +316,7 @@ $border: $gray-100;
 	.woocommerce-summary__item-label {
 		display: block;
 		margin-bottom: $gap;
-		color: var(--wp-admin-theme-color);
+		color: $gray-700;
 	}
 
 	.woocommerce-summary__item-value {
@@ -325,7 +329,7 @@ $border: $gray-100;
 		padding: 5px;
 		border-radius: 3px;
 		height: min-content;
-		background-color: $gray-200;
+		background-color: $gray-100;
 		color: $gray-900;
 	}
 

diff --git a/packages/components/src/table/style.scss b/packages/components/src/table/style.scss
@@ -104,7 +104,7 @@
 
 	tr:hover,
 	tr:focus-within {
-		background-color: $gray-100;
+		background-color: $gray-200;
 		td,
 		th {
 			background: transparent;
@@ -161,7 +161,7 @@
 	}
 
 	&.is-sorted {
-		background-color: $gray-50;
+		background-color: $gray-100;
 	}
 
 	&.is-checkbox-column {