From d53494c20a9b7539d6b57eec1ea7e9213ced044f Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 14 Jan 2019 14:24:46 +0100
Subject: [PATCH] Improve color contrast of the default block inserter
 shortcuts. (#12928)

* Improve color contrast of the default block inserter shortcuts.

* Restore fade in effect.
---
 .../src/components/block-list/style.scss      |  4 ++--
 .../default-block-appender/style.scss         | 20 ++++---------------
 .../inserter-with-shortcuts/style.scss        |  4 ++--
 3 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 3ecb8dcc263b8..b89d2ac389494 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -250,12 +250,12 @@
 	&.is-typing .editor-block-list__empty-block-inserter,
 	&.is-typing .editor-block-list__side-inserter {
 		opacity: 0;
+		animation: none;
 	}
 
 	.editor-block-list__empty-block-inserter,
 	.editor-block-list__side-inserter {
-		opacity: 1;
-		transition: opacity 0.2s;
+		@include edit-post__fade-in-animation;
 	}
 
 	// Reusable blocks
diff --git a/packages/editor/src/components/default-block-appender/style.scss b/packages/editor/src/components/default-block-appender/style.scss
index 9f30f7f31b596..55bcac1feae3b 100644
--- a/packages/editor/src/components/default-block-appender/style.scss
+++ b/packages/editor/src/components/default-block-appender/style.scss
@@ -26,28 +26,17 @@
 		}
 	}
 
-	// Show quick insertion icons faded until hover.
-	.editor-inserter-with-shortcuts {
-		opacity: 0.5;
-		transition: opacity 0.2s;
-
-		.components-icon-button:not(:hover) {
-			// Use opacity to work in various editor styles.
-			color: $dark-opacity-500;
-			.is-dark-theme & {
-				color: $light-opacity-500;
-			}
-		}
-	}
-
 	// Don't show the inserter until mousing over.
 	.editor-inserter__toggle:not([aria-expanded="true"]) {
 		opacity: 0;
+		transition: opacity 0.2s;
 	}
+
 	&:hover {
 		.editor-inserter-with-shortcuts {
-			opacity: 1;
+			@include edit-post__fade-in-animation;
 		}
+
 		.editor-inserter__toggle {
 			opacity: 1;
 		}
@@ -103,7 +92,6 @@
 	}
 
 	.editor-inserter__toggle {
-		transition: opacity 0.2s;
 		border-radius: 50%;
 		width: $block-side-ui-width;
 		height: $block-side-ui-width;
diff --git a/packages/editor/src/components/inserter-with-shortcuts/style.scss b/packages/editor/src/components/inserter-with-shortcuts/style.scss
index eba75a72c7771..67d4af314f872 100644
--- a/packages/editor/src/components/inserter-with-shortcuts/style.scss
+++ b/packages/editor/src/components/inserter-with-shortcuts/style.scss
@@ -19,8 +19,8 @@
 	padding-top: 8px;
 
 	// Use opacity to work in various editor styles.
-	color: $dark-opacity-light-700;
+	color: $dark-opacity-500;
 	.is-dark-theme & {
-		color: $light-opacity-light-700;
+		color: $light-opacity-500;
 	}
 }