From d038be34f61ff10698469433bd06b540b0df7a47 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Sat, 16 Feb 2019 05:49:06 +0100
Subject: [PATCH] Fix issue with mover colors in dark themes. (#13869)

The block editor supports an inverted UI to ensure contrast in themes that register themselves as having dark backgrounds (see https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#dark-backgrounds).

What this mode does, is invert the UI wherever it can, so dark gray borders are light gray on black backgrounds, and the mover icons are white instead of black.

But they shouldn't be in nested contexts, because in nested contexts the movers have a white background.

This PR fixes that.
---
 packages/editor/src/components/block-mover/style.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/editor/src/components/block-mover/style.scss b/packages/editor/src/components/block-mover/style.scss
index 12ebccbe0035e4..39a908806ad5b9 100644
--- a/packages/editor/src/components/block-mover/style.scss
+++ b/packages/editor/src/components/block-mover/style.scss
@@ -42,6 +42,11 @@
 		color: $light-opacity-300;
 	}
 
+	// Nested movers have a background, so don't invert the colors there.
+	.is-dark-theme .wp-block .wp-block & {
+		color: $dark-opacity-300;
+	}
+
 	&[aria-disabled="true"] {
 		cursor: default;
 		pointer-events: none;
@@ -72,6 +77,11 @@
 		.is-dark-theme & {
 			color: $light-opacity-500;
 		}
+
+		// Nested movers have a background, so don't invert the colors there.
+		.is-dark-theme .wp-block .wp-block & {
+			color: $dark-opacity-500;
+		}
 	}
 
 	&:not(:disabled):not([aria-disabled="true"]):not(.is-default):active {