Adjustments to usage of gray where a direct replacement wasn't enough.

These were made specifically to correct the look and feel of the
inbox and activity card UI.

client/header/activity-panel/activity-card/style.scss

@@ -35,7 +35,7 @@
 
 .woocommerce-activity-card__icon {
 	grid-area: icon;
-	fill: $gray-400;
+	fill: $gray-200;
 }
 
 .woocommerce-activity-card__header {
@@ -371,7 +371,7 @@
 }
 
 .woocommerce-empty-activity-card {
-	background: $gray-200;
+	background: $gray-100;
 	margin: 20px;
 	border-bottom: unset;
 }

client/header/activity-panel/activity-header/style.scss

@@ -1,6 +1,6 @@
 .woocommerce-layout__activity-panel-header {
 	height: 50px;
-	background: $gray-100;
+	background: $gray-200;
 	padding: 16px;
 	display: flex;
 	justify-content: space-between;

client/header/activity-panel/panels/inbox/style.scss

@@ -1,7 +1,8 @@
 .woocommerce-inbox-message {
 	position: relative;
 	color: $gray-text;
-	background: $gray-200;
+	// background: $gray-100;
+	background: $light-gray-placeholder;
 	border-radius: 2px;
 	@include font-size( 13 );
 	margin: 0 0 $gap-large;
@@ -115,7 +116,7 @@
 
 .woocommerce-inbox-message__actions {
 	padding-top: $gap;
-	border-top: 1px solid $gray-100;
+	border-top: 1px solid $gray-200;
 
 	// Ensures any immediate child with a sibling has space between the items
 	& > * + * {

client/header/activity-panel/style.scss

@@ -131,7 +131,7 @@
 
 		&:hover,
 		&.components-button:not(:disabled):not([aria-disabled='true']):hover {
-			background-color: $gray-200;
+			background-color: $gray-100;
 			box-shadow: none;
 
 			&.has-unread::after,
@@ -198,7 +198,7 @@
 
 .woocommerce-layout__activity-panel-wrapper {
 	height: calc(100vh - #{$header-height + $header-height + $adminbar-height-mobile});
-	background: $gray-200;
+	background: $gray-100;
 	width: 510px;
 	@include breakpoint( '<782px' ) {
 		width: 100%;