Add dark mode tweaks

WordPress · May 1, 2018 · 087c016 · 087c016
1 parent 6c24dec
commit 087c016
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 26 deletions.
diff --git a/components/placeholder/style.scss b/components/placeholder/style.scss
@@ -9,7 +9,13 @@
 	text-align: center;
 	font-family: $default-font;
 	font-size: $default-font-size;
-	background: $dark-opacity-light-200; // use opacity to work in various editor styles
+
+	// use opacity to work in various editor styles
+	background: $dark-opacity-light-200;
+
+	.is-dark-theme & {
+		background: $light-opacity-light-200;
+	}
 }
 
 .components-placeholder__label {

diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss
@@ -192,6 +192,21 @@ body.gutenberg-editor-page {
 		&:-moz-placeholder {
 			color: $dark-opacity-300;
 		}
+
+		.is-dark-theme & {
+			&::-webkit-input-placeholder {
+				color: $light-opacity-300;
+			}
+			&::-moz-placeholder {
+				color: $light-opacity-300;
+			}
+			&:-ms-input-placeholder {
+				color: $light-opacity-300;
+			}
+			&:-moz-placeholder {
+				color: $light-opacity-300;
+			}
+		}
 	}
 }
 

diff --git a/edit-post/components/layout/style.scss b/edit-post/components/layout/style.scss
@@ -10,6 +10,7 @@
 		position: sticky;
 		top: $header-height;
 		right: 0;
+		color: $dark-gray-900;
 
 		@include break-small {
 			position: fixed;

diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
@@ -86,6 +86,7 @@
 	.editor-post-permalink {
 		left: $block-padding;
 		right: $block-padding;
+		color: $dark-gray-900;
 	}
 
 	@include break-small() {

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
@@ -33,9 +33,15 @@
 		right: 0;
 		bottom: 0;
 		left: 0;
-		background-color: $dark-opacity-light-200;
 		visibility: hidden;
 
+		// use opacity to work in various editor styles
+		background-color: $dark-opacity-light-200;
+
+		.is-dark-theme & {
+			background-color: $light-opacity-light-200;
+		}
+
 		@include break-small {
 			margin: 0 48px;
 		}
@@ -169,13 +175,25 @@
 	}
 
 	&.is-hovered > .editor-block-mover:before {
-		border-right: 1px solid $dark-opacity-light-500; // use opacity to work in various editor styles
 		right: 0;
+
+		// use opacity to work in various editor styles
+		border-right: 1px solid $dark-opacity-light-500;
+
+		.is-dark-theme & {
+			border-right: 1px solid $light-opacity-light-500;
+		}
 	}
 
 	&.is-hovered > .editor-block-settings-menu:before {
-		border-left: 1px solid $dark-opacity-light-500; // use opacity to work in various editor styles
 		left: 0;
+
+		// use opacity to work in various editor styles
+		border-left: 1px solid $dark-opacity-light-500; 
+
+		.is-dark-theme & {
+			border-left: 1px solid $light-opacity-light-500;
+		}
 	}
 
 	&.is-typing .editor-block-list__empty-block-inserter,
@@ -211,7 +229,12 @@
 
 	// focused block-style
 	&.is-selected > .editor-block-list__block-edit:before {
-		outline: 1px solid $dark-opacity-light-500; // use opacity to work in various editor styles
+		// use opacity to work in various editor styles
+		outline: 1px solid $dark-opacity-light-500;
+
+		.is-dark-theme & {
+			outline: 1px solid $light-opacity-light-500;
+		}
 	}
 
 	/**
@@ -233,7 +256,13 @@
 
 	&.is-multi-selected .editor-block-list__block-edit:before {
 		background: $blue-medium-highlight;
+
+		// use opacity to work in various editor styles
 		mix-blend-mode: multiply;
+
+		.is-dark-theme & {
+			mix-blend-mode: soft-light;
+		}
 	}
 
 	/**
@@ -249,7 +278,12 @@
 	}
 
 	&.is-shared > .editor-block-list__block-edit:before {
-		outline: 1px dashed $light-gray-500;
+		// use opacity to work in various editor styles
+		outline: 1px dashed $dark-opacity-light-500;
+
+		.is-dark-theme & {
+			outline: 1px dashed $light-opacity-light-500;
+		}
 	}
 
 	/**
@@ -500,11 +534,6 @@
 	margin: $item-spacing;
 	cursor: move;/* Fallback for IE/Edge < 14 */
 	cursor: grab;
-
-	.editor-inserter__toggle {
-		color: $dark-gray-300;
-		margin: 4px 0 0 -4px;	// align better with text blocks
-	}
 }
 
 .editor-block-list__insertion-point {
@@ -655,9 +684,13 @@
 	background: $white;
 
 	// use opacity to work in various editor styles
-	border: 1px solid $dark-opacity-light-500; 
 	background-clip: padding-box;
 	box-sizing: padding-box;
+	border: 1px solid $dark-opacity-light-500; 
+
+	.is-dark-theme & {
+		border: 1px solid $light-opacity-light-500; 
+	}
 
 	// this prevents floats from messing up the position
 	position: absolute;

diff --git a/editor/components/block-mover/style.scss b/editor/components/block-mover/style.scss
@@ -14,17 +14,27 @@
 	border: none;
 	outline: none;
 	background: none;
-	color: $dark-opacity-300; // use opacity to work in various editor styles
 	cursor: pointer;
 	padding: 0;
 	width: $block-side-ui-width;
 	height: $block-side-ui-width;	// the side UI can be no taller than 2 * $block-side-ui-width, which matches the height of a line of text
 	border-radius: $button-style__radius-roundrect;
 
+	// use opacity to work in various editor styles
+	color: $dark-opacity-300;
+
+	.is-dark-theme & {
+		color: $light-opacity-300;
+	}
+
 	&[aria-disabled="true"] {
 		cursor: default;
-		color: $dark-opacity-light-300; // use opacity to work in various editor styles
 		pointer-events: none;
+		color: $dark-opacity-light-300; // use opacity to work in various editor styles
+
+		.is-dark-theme & {
+			color: $light-opacity-light-300;
+		}
 	}
 
 	svg {

diff --git a/editor/components/block-settings-menu/style.scss b/editor/components/block-settings-menu/style.scss
@@ -6,7 +6,7 @@
 	}
 }
 
-// The Blocks "More" Menu ellipsis icon button
+// The Blocks "More" Menu ellipsis icon button, and trash button
 .editor-block-settings-remove,
 .editor-block-settings-menu__toggle {
 	justify-content: center;
@@ -15,6 +15,13 @@
 	height: $block-side-ui-width;
 	border-radius: $button-style__radius-roundrect;
 
+	// use opacity to work in various editor styles
+	color: $dark-opacity-300;
+
+	.is-dark-theme & {
+		color: $light-opacity-300;
+	}
+
 	// Apply a background in nested contexts, only on desktop
 	@include break-small() {
 		.editor-block-list__layout .editor-block-list__layout & {
@@ -67,7 +74,7 @@
 		background: none;
 		outline: none;
 		border-radius: 0;
-		color: $dark-opacity-500; // use opacity to work in various editor styles
+		color: $dark-gray-500;
 		text-align: left;
 		cursor: pointer;
 		@include menu-style__neutral;

diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss
@@ -14,17 +14,29 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 		font-family: $editor-font;
 		cursor: text;
 		width: 100%;
-		color: $dark-opacity-300; // use opacity to work in various editor styles
 		font-family: $editor-font;
 		outline: 1px solid transparent;
 		transition: 0.2s outline;
+
+		// use opacity to work in various editor styles
+		color: $dark-opacity-300;
+
+		.is-dark-theme & {
+			color: $light-opacity-300;
+		}
 	}
 
 	// Show quick insertion icons faded until hover
 	.editor-inserter-with-shortcuts {
 		.components-icon-button {
-			color: $dark-opacity-light-700; // use opacity to work in various editor styles
 			transition: color 0.2s;
+
+			// use opacity to work in various editor styles
+			color: $dark-opacity-light-700; // use opacity to work in various editor styles
+
+			.is-dark-theme & {
+				color: $light-opacity-light-700;
+			}
 		}
 	}
 
@@ -36,10 +48,6 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 	&:hover {
 		.editor-inserter-with-shortcuts {
 			opacity: 1;
-
-			.components-icon-button {
-				color: $dark-gray-500;
-			}
 		}
 
 		.editor-inserter__toggle {
@@ -66,12 +74,19 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 		right: auto;
 	}
 
+	&:disabled {
+		display: none;
+	}
+
 	.editor-inserter__toggle {
 		border-radius: 50%;
-	}
 
-	&:disabled {
-		display: none;
+		// use opacity to work in various editor styles
+		color: $dark-opacity-500;
+
+		.is-dark-theme & {
+			color: $light-opacity-500;
+		}
 	}
 }
 

diff --git a/editor/components/inserter-with-shortcuts/style.scss b/editor/components/inserter-with-shortcuts/style.scss
@@ -12,4 +12,11 @@
 	width: $icon-button-size;
 	height: $icon-button-size;
 	padding-top: 8px;
+
+	// use opacity to work in various editor styles
+	color: $dark-opacity-light-700;
+
+	.is-dark-theme & {
+		color: $light-opacity-light-700;
+	}
 }
diff --git a/editor/components/post-title/style.scss b/editor/components/post-title/style.scss
@@ -20,7 +20,12 @@
 
 	&.is-selected .editor-post-title__input,
 	.editor-post-title__input:hover {
-		border: 1px solid $dark-opacity-light-500; // use opacity to work in various editor styles
+		// use opacity to work in various editor styles
+		border: 1px solid $dark-opacity-light-500;
+
+		.is-dark-theme & {
+			border: 1px solid $light-opacity-light-500;
+		}
 	}
 }