Improve color contrast of the default block inserter shortcuts. (#12928)

* Improve color contrast of the default block inserter shortcuts. * Restore fade in effect.
WordPress · Jan 14, 2019 · 16b94bb · 16b94bb
1 parent 338d889
commit 16b94bb
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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;
 	}
 }