From 74413197de5eb6880ff3f196c9588ba45b5aa54a Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 27 Feb 2019 09:09:05 -0500
Subject: [PATCH 01/33] Add thick borders to the left of blocks when they're
 hovred + selected.

---
 packages/editor/src/components/block-list/style.scss    | 7 +++++--
 packages/editor/src/components/block-toolbar/style.scss | 4 +++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 043ddd26136070..9de3fb8be39f97 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -116,7 +116,8 @@
 			content: "";
 			position: absolute;
 			outline: $border-width solid transparent;
-			transition: outline 0.1s linear;
+			box-shadow: none;
+			transition: outline 0.1s linear, box-shadow 0.1s linear;
 			pointer-events: none;
 
 			// Go edge-to-edge on mobile.
@@ -131,15 +132,17 @@
 	&.is-selected > .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
 		outline: $border-width solid $dark-opacity-light-500;
+		box-shadow: ($border-width * -3) 0 0 0 $dark-opacity-500;
 
 		.is-dark-theme & {
 			outline-color: $light-opacity-light-500;
+			box-shadow: ($border-width * -3) 0 0 0 $light-opacity-600;
 		}
 	}
 
 	// Hover style.
 	&.is-hovered > .editor-block-list__block-edit::before {
-		outline: $border-width solid theme(outlines);
+		box-shadow: ($border-width * -3) 0 0 0 theme(outlines);
 	}
 
 	// Spotlight mode.
diff --git a/packages/editor/src/components/block-toolbar/style.scss b/packages/editor/src/components/block-toolbar/style.scss
index 77b15329ad1e27..5cd145507c6573 100644
--- a/packages/editor/src/components/block-toolbar/style.scss
+++ b/packages/editor/src/components/block-toolbar/style.scss
@@ -4,6 +4,7 @@
 	width: 100%;
 	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
+	transition: border-color 0.1s linear, box-shadow 0.1s linear;
 
 	// Allow overflow on desktop.
 	@include break-small() {
@@ -11,7 +12,8 @@
 	}
 
 	// Show a left border on the parent container.
-	border-left: $border-width solid $light-gray-500;
+	border-left: $border-width solid $dark-opacity-500;
+	box-shadow: ($border-width * -2) 0 0 0 $dark-opacity-500;
 
 	// The component is born with a border, but we only need some of them.
 	.components-toolbar {

From 583223c2a71dda5fa980b86f66216cf639f6cf69 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 27 Feb 2019 09:15:09 -0500
Subject: [PATCH 02/33] Add thick left border to the page title.

---
 packages/editor/src/components/post-title/style.scss | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
index 71fc698dea2024..27c09618fdc7ca 100644
--- a/packages/editor/src/components/post-title/style.scss
+++ b/packages/editor/src/components/post-title/style.scss
@@ -16,7 +16,7 @@
 		font-family: $editor-font;
 		line-height: $default-line-height;
 		color: $dark-gray-900;
-		transition: border 0.1s ease-out;
+		transition: border 0.1s ease-out, box-shadow 0.1s linear;
 		padding: #{ $block-padding + 5px } $block-padding;
 		word-break: keep-all;
 
@@ -51,16 +51,18 @@
 		&.is-selected .editor-post-title__input {
 			// use opacity to work in various editor styles
 			border-color: $dark-opacity-light-500;
+			box-shadow: ($border-width * -3) 0 0 0 $dark-opacity-500;
 
 			.is-dark-theme & {
 				border-color: $light-opacity-light-500;
+				box-shadow: ($border-width * -3) 0 0 0 $light-opacity-600;
 			}
 		}
 	}
 
-	&:not(.is-focus-mode):not(.has-fixed-toolbar) {
+	&:not(.is-focus-mode):not(.has-fixed-toolbar):not(.is-selected) {
 		.editor-post-title__input:hover {
-			border-color: theme(outlines);
+			box-shadow: ($border-width * -3) 0 0 0 theme(outlines);
 		}
 	}
 

From 021232b8b5da9f700cbe717675a07b3d849e7abf Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 27 Feb 2019 09:18:26 -0500
Subject: [PATCH 03/33] Turn off block toolbar centering for alignwide blocks.

This splits the left border in two, which looks a bit weird.
---
 packages/edit-post/src/components/visual-editor/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index f796ed8e4c7594..97e12e88a47793 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -29,7 +29,6 @@
 
 		// Center the block toolbar on wide and full-wide blocks.
 		// Use specific selector to not affect nested block toolbars.
-		&[data-align="wide"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar,
 		&[data-align="full"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar {
 			width: calc(100% + #{ $block-padding * 2 + $border-width * 2 }); // Matches the negative margins applied to parent blocks.
 			height: 0; // This collapses the container to an invisible element without margin.

From 372317486e05e36e055e5d3ede0588be848ef7f0 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 27 Feb 2019 09:27:24 -0500
Subject: [PATCH 04/33] Move block breadcrump to the left side, position it on
 top of the block.

---
 packages/editor/src/components/block-list/style.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 9de3fb8be39f97..7dd8120ac22920 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -920,9 +920,9 @@
 	line-height: 1;
 	z-index: z-index(".editor-block-list__breadcrumb");
 
-	// Position in the top right of the border.
-	right: -$block-padding;
-	top: -$block-padding - $border-width;
+	// Position in the top left of the border.
+	left: -$block-padding - ($border-width * 3);
+	top: (($block-padding * -2) - ($border-width * 3));
 
 	.components-toolbar {
 		padding: 0;

From 56a8edb01887996e1d15717394f29f8bb7b28ccd Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 27 Feb 2019 09:45:56 -0500
Subject: [PATCH 05/33] Clean up the block toolbar's left border.

---
 packages/editor/src/components/block-list/style.scss    | 2 +-
 packages/editor/src/components/block-toolbar/style.scss | 3 +--
 packages/editor/src/components/post-title/style.scss    | 1 +
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 7dd8120ac22920..2e76f8841b8da4 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -906,7 +906,7 @@
 
 		// This prevents floats from messing up the position of the block toolbar on floats-adjacent blocks when selected.
 		position: absolute;
-		left: 0;
+		left: $border-width;
 	}
 }
 
diff --git a/packages/editor/src/components/block-toolbar/style.scss b/packages/editor/src/components/block-toolbar/style.scss
index 5cd145507c6573..1f2d8b710b8297 100644
--- a/packages/editor/src/components/block-toolbar/style.scss
+++ b/packages/editor/src/components/block-toolbar/style.scss
@@ -12,8 +12,7 @@
 	}
 
 	// Show a left border on the parent container.
-	border-left: $border-width solid $dark-opacity-500;
-	box-shadow: ($border-width * -2) 0 0 0 $dark-opacity-500;
+	box-shadow: ($border-width * -3) 0 0 0 $dark-opacity-500;
 
 	// The component is born with a border, but we only need some of them.
 	.components-toolbar {
diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
index 27c09618fdc7ca..4ffba2c70d22f2 100644
--- a/packages/editor/src/components/post-title/style.scss
+++ b/packages/editor/src/components/post-title/style.scss
@@ -27,6 +27,7 @@
 
 		@include break-small() {
 			border-width: $border-width;
+			border-left-width: 0;
 		}
 
 		// Match h1 heading.

From 77cf04bfc1d7549f00a25da5bee48097a2e7ad45 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 27 Feb 2019 10:09:47 -0500
Subject: [PATCH 06/33] Use inset borders on mobile.

---
 .../src/components/block-list/style.scss       | 18 +++++++++++++++---
 .../src/components/post-title/style.scss       | 15 ++++++++++++---
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 2e76f8841b8da4..8958ae467720cd 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -132,11 +132,20 @@
 	&.is-selected > .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
 		outline: $border-width solid $dark-opacity-light-500;
-		box-shadow: ($border-width * -3) 0 0 0 $dark-opacity-500;
+		box-shadow: inset ($border-width * 3) 0 0 0 $dark-opacity-500;
 
 		.is-dark-theme & {
 			outline-color: $light-opacity-light-500;
-			box-shadow: ($border-width * -3) 0 0 0 $light-opacity-600;
+			box-shadow: inset ($border-width * 3) 0 0 0 $light-opacity-600;
+		}
+
+		// Switch to outset borders on larger screens.
+		@include break-small() {
+			box-shadow: ($border-width * -3) 0 0 0 $dark-opacity-500;
+
+			.is-dark-theme & {
+				box-shadow: ($border-width * -3) 0 0 0 $light-opacity-600;
+			}
 		}
 	}
 
@@ -605,6 +614,9 @@
 			display: none;
 		}
 
+		// Add a white background to prevent the block's left border from showing through.
+		background-color: $white;
+
 		// Show a shadow below the selected block to imply separation.
 		box-shadow: $shadow-below-only;
 		@include break-small() {
@@ -794,7 +806,7 @@
 
 		// Position toolbar below the block on mobile.
 		position: absolute;
-		bottom: $block-toolbar-height - $block-padding;
+		bottom: $block-toolbar-height - $block-padding - $border-width;
 		left: -$block-padding;
 		right: -$block-padding;
 
diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
index 4ffba2c70d22f2..7a3fbc0a619647 100644
--- a/packages/editor/src/components/post-title/style.scss
+++ b/packages/editor/src/components/post-title/style.scss
@@ -50,13 +50,22 @@
 
 	&:not(.is-focus-mode) {
 		&.is-selected .editor-post-title__input {
-			// use opacity to work in various editor styles
+			// use opacity to work in various editor styles.
 			border-color: $dark-opacity-light-500;
-			box-shadow: ($border-width * -3) 0 0 0 $dark-opacity-500;
+			box-shadow: inset ($border-width * 3) 0 0 0 $dark-opacity-500;
 
 			.is-dark-theme & {
 				border-color: $light-opacity-light-500;
-				box-shadow: ($border-width * -3) 0 0 0 $light-opacity-600;
+				box-shadow: inset ($border-width * 3) 0 0 0 $light-opacity-600;
+			}
+
+			// Switch to outset borders on larger screens.
+			@include break-small() {
+				box-shadow: ($border-width * -3) 0 0 0 $dark-opacity-500;
+
+				.is-dark-theme & {
+					box-shadow: ($border-width * -3) 0 0 0 $light-opacity-600;
+				}
 			}
 		}
 	}

From 65fafa4ef22174286aae77a87ac15e8bcf156d9d Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 27 Feb 2019 10:17:32 -0500
Subject: [PATCH 07/33] Prevent inset borders from overlapping with full-bleed
 content.

---
 .../src/components/block-list/style.scss      | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 8958ae467720cd..95a5d3b06ade91 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -129,23 +129,31 @@
 	}
 
 	// Selected style.
-	&.is-selected > .editor-block-list__block-edit::before {
-		// Use opacity to work in various editor styles.
-		outline: $border-width solid $dark-opacity-light-500;
-		box-shadow: inset ($border-width * 3) 0 0 0 $dark-opacity-500;
+	&.is-selected {
 
-		.is-dark-theme & {
-			outline-color: $light-opacity-light-500;
-			box-shadow: inset ($border-width * 3) 0 0 0 $light-opacity-600;
-		}
-
-		// Switch to outset borders on larger screens.
-		@include break-small() {
-			box-shadow: ($border-width * -3) 0 0 0 $dark-opacity-500;
+		> .editor-block-list__block-edit::before {
+			// Use opacity to work in various editor styles.
+			outline: $border-width solid $dark-opacity-light-500;
+			box-shadow: inset ($border-width * 3) 0 0 0 $dark-opacity-500;
 
 			.is-dark-theme & {
-				box-shadow: ($border-width * -3) 0 0 0 $light-opacity-600;
+				outline-color: $light-opacity-light-500;
+				box-shadow: inset ($border-width * 3) 0 0 0 $light-opacity-600;
 			}
+
+			// Switch to outset borders on larger screens.
+			@include break-small() {
+				box-shadow: ($border-width * -3) 0 0 0 $dark-opacity-500;
+
+				.is-dark-theme & {
+					box-shadow: ($border-width * -3) 0 0 0 $light-opacity-600;
+				}
+			}
+		}
+
+		// Prevent inset borders from overlapping full-bleed block content.
+		&[data-align="full"] > .editor-block-list__block-edit::before {
+			box-shadow: none;
 		}
 	}
 

From b9c62590f6fe997f21835a20d56ed18059870ca2 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 1 Mar 2019 10:32:37 -0500
Subject: [PATCH 08/33] Use a gray border instead of a blue one on hover.

---
 packages/editor/src/components/block-list/style.scss | 6 +++---
 packages/editor/src/components/post-title/style.scss | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 95a5d3b06ade91..acf86f826acf70 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -159,7 +159,7 @@
 
 	// Hover style.
 	&.is-hovered > .editor-block-list__block-edit::before {
-		box-shadow: ($border-width * -3) 0 0 0 theme(outlines);
+		box-shadow: ($border-width * -3) 0 0 0 $light-gray-500;
 	}
 
 	// Spotlight mode.
@@ -952,8 +952,8 @@
 		font-family: $default-font;
 		font-size: 11px;
 		padding: 4px 4px;
-		background: theme(outlines);
-		color: $white;
+		background: $light-gray-500;
+		color: $dark-gray-900;
 
 		// Animate in
 		.editor-block-list__block:hover & {
diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
index 7a3fbc0a619647..27684eaac04158 100644
--- a/packages/editor/src/components/post-title/style.scss
+++ b/packages/editor/src/components/post-title/style.scss
@@ -72,7 +72,7 @@
 
 	&:not(.is-focus-mode):not(.has-fixed-toolbar):not(.is-selected) {
 		.editor-post-title__input:hover {
-			box-shadow: ($border-width * -3) 0 0 0 theme(outlines);
+			box-shadow: ($border-width * -3) 0 0 0 $light-gray-500;
 		}
 	}
 

From 5a076a1ef5524c832f34ffab4d3242d7c08ffa6a Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 5 Mar 2019 10:53:06 +0100
Subject: [PATCH 09/33] Use a sass variable to define the left block border
 width

---
 assets/stylesheets/_variables.scss                 |  1 +
 .../editor/src/components/block-list/style.scss    | 14 +++++++-------
 .../editor/src/components/block-toolbar/style.scss |  2 +-
 .../editor/src/components/post-title/style.scss    | 10 +++++-----
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss
index 7fda170813addd..1c30d4f053d66a 100644
--- a/assets/stylesheets/_variables.scss
+++ b/assets/stylesheets/_variables.scss
@@ -52,6 +52,7 @@ $resize-handler-size: 16px;
 $resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.
 
 // Blocks
+$block-left-border-width: $border-width * 3;
 $block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
 $block-spacing: 4px; // Vertical space between blocks.
 $block-side-ui-width: 28px; // Width of the movers/drag handle UI.
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index acf86f826acf70..de094224c6a21a 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -134,19 +134,19 @@
 		> .editor-block-list__block-edit::before {
 			// Use opacity to work in various editor styles.
 			outline: $border-width solid $dark-opacity-light-500;
-			box-shadow: inset ($border-width * 3) 0 0 0 $dark-opacity-500;
+			box-shadow: inset $block-left-border-width 0 0 0 $dark-opacity-500;
 
 			.is-dark-theme & {
 				outline-color: $light-opacity-light-500;
-				box-shadow: inset ($border-width * 3) 0 0 0 $light-opacity-600;
+				box-shadow: inset $block-left-border-width 0 0 0 $light-opacity-600;
 			}
 
 			// Switch to outset borders on larger screens.
 			@include break-small() {
-				box-shadow: ($border-width * -3) 0 0 0 $dark-opacity-500;
+				box-shadow: -$block-left-border-width 0 0 0 $dark-opacity-500;
 
 				.is-dark-theme & {
-					box-shadow: ($border-width * -3) 0 0 0 $light-opacity-600;
+					box-shadow: -$block-left-border-width 0 0 0 $light-opacity-600;
 				}
 			}
 		}
@@ -159,7 +159,7 @@
 
 	// Hover style.
 	&.is-hovered > .editor-block-list__block-edit::before {
-		box-shadow: ($border-width * -3) 0 0 0 $light-gray-500;
+		box-shadow: -$block-left-border-width 0 0 0 $light-gray-500;
 	}
 
 	// Spotlight mode.
@@ -941,8 +941,8 @@
 	z-index: z-index(".editor-block-list__breadcrumb");
 
 	// Position in the top left of the border.
-	left: -$block-padding - ($border-width * 3);
-	top: (($block-padding * -2) - ($border-width * 3));
+	left: -$block-padding - $block-left-border-width;
+	top: (($block-padding * -2) - $block-left-border-width);
 
 	.components-toolbar {
 		padding: 0;
diff --git a/packages/editor/src/components/block-toolbar/style.scss b/packages/editor/src/components/block-toolbar/style.scss
index 1f2d8b710b8297..c49e7291b15cd5 100644
--- a/packages/editor/src/components/block-toolbar/style.scss
+++ b/packages/editor/src/components/block-toolbar/style.scss
@@ -12,7 +12,7 @@
 	}
 
 	// Show a left border on the parent container.
-	box-shadow: ($border-width * -3) 0 0 0 $dark-opacity-500;
+	box-shadow: -$block-left-border-width 0 0 0 $dark-opacity-500;
 
 	// The component is born with a border, but we only need some of them.
 	.components-toolbar {
diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
index 27684eaac04158..357aad58d78a56 100644
--- a/packages/editor/src/components/post-title/style.scss
+++ b/packages/editor/src/components/post-title/style.scss
@@ -52,19 +52,19 @@
 		&.is-selected .editor-post-title__input {
 			// use opacity to work in various editor styles.
 			border-color: $dark-opacity-light-500;
-			box-shadow: inset ($border-width * 3) 0 0 0 $dark-opacity-500;
+			box-shadow: inset $block-left-border-width 0 0 0 $dark-opacity-500;
 
 			.is-dark-theme & {
 				border-color: $light-opacity-light-500;
-				box-shadow: inset ($border-width * 3) 0 0 0 $light-opacity-600;
+				box-shadow: inset $block-left-border-width 0 0 0 $light-opacity-600;
 			}
 
 			// Switch to outset borders on larger screens.
 			@include break-small() {
-				box-shadow: ($border-width * -3) 0 0 0 $dark-opacity-500;
+				box-shadow: -$block-left-border-width 0 0 0 $dark-opacity-500;
 
 				.is-dark-theme & {
-					box-shadow: ($border-width * -3) 0 0 0 $light-opacity-600;
+					box-shadow: -$block-left-border-width 0 0 0 $light-opacity-600;
 				}
 			}
 		}
@@ -72,7 +72,7 @@
 
 	&:not(.is-focus-mode):not(.has-fixed-toolbar):not(.is-selected) {
 		.editor-post-title__input:hover {
-			box-shadow: ($border-width * -3) 0 0 0 $light-gray-500;
+			box-shadow: -$block-left-border-width 0 0 0 $light-gray-500;
 		}
 	}
 

From bfa8039959d884b0d9f8f247a77c37db7c4e0080 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 5 Mar 2019 09:13:22 -0500
Subject: [PATCH 10/33] Fix breadcrumb potision for alignfull blocks.

---
 packages/editor/src/components/block-list/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index de094224c6a21a..0d7695cacd9458 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -444,9 +444,9 @@
 
 	// Full-wide
 	&[data-align="full"] {
-		// Position hover label on the right for the top level block.
+		// Position hover label on the left for the top level block.
 		> .editor-block-list__block-edit > .editor-block-list__breadcrumb {
-			right: 0;
+			left: 0;
 		}
 
 		// Compensate for main container padding and subtract border.

From 8b927e2aa1c39d1acf77dee1447c1fa8bb5dbff3 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 5 Mar 2019 09:18:04 -0500
Subject: [PATCH 11/33] Clean up breadcrumb position for left & right-aligned
 blocks.

---
 packages/editor/src/components/block-list/style.scss | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 0d7695cacd9458..907512b0c28162 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -962,11 +962,15 @@
 		}
 	}
 
-	// Position the breadcrumb closer on mobile.
-	[data-align="left"] &,
+	// Remove negative left breadcrumb position for left aligned blocks.
+	[data-align="left"] & {
+		left: 0;
+	}
+
+	// Right-align the breadcrumb for right-aligned blocks.
 	[data-align="right"] & {
+		left: auto;
 		right: 0;
-		top: 0;
 	}
 }
 

From b958f40bc9525617fb7e547b8d2a2580ce0ea733 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 6 Mar 2019 08:10:37 -0500
Subject: [PATCH 12/33] Sync block mover animation up with the hover state.

---
 packages/editor/src/components/block-list/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 907512b0c28162..3a155708df0844 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -730,7 +730,7 @@
 
 	// Hide both the button until hovered.
 	opacity: 0;
-	transition: opacity 0.1s linear 0.1s;
+	transition: opacity 0.1s linear;
 
 	&:hover,
 	&.is-visible {

From 4024095612c679976b6ef4a0b89d92958a0de15a Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Mon, 11 Mar 2019 11:07:55 -0400
Subject: [PATCH 13/33] Darken focused block borders slightly.

From $light-gray-500 to $light-gray-800.
---
 .../src/components/block-list/style.scss       | 18 +++++++++---------
 .../src/components/block-toolbar/style.scss    | 11 ++++++++---
 .../src/components/post-permalink/style.scss   |  2 +-
 .../src/components/post-title/style.scss       |  4 ++--
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 3a155708df0844..a40b53149914b4 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -133,11 +133,11 @@
 
 		> .editor-block-list__block-edit::before {
 			// Use opacity to work in various editor styles.
-			outline: $border-width solid $dark-opacity-light-500;
+			outline: $border-width solid $dark-opacity-light-800;
 			box-shadow: inset $block-left-border-width 0 0 0 $dark-opacity-500;
 
 			.is-dark-theme & {
-				outline-color: $light-opacity-light-500;
+				outline-color: $light-opacity-light-800;
 				box-shadow: inset $block-left-border-width 0 0 0 $light-opacity-600;
 			}
 
@@ -235,10 +235,10 @@
 
 	&.has-warning:not(.is-hovered) .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
-		outline-color: $dark-opacity-light-500;
+		outline-color: $dark-opacity-light-800;
 
 		.is-dark-theme & {
-			outline-color: $light-opacity-light-500;
+			outline-color: $light-opacity-light-800;
 		}
 	}
 
@@ -281,10 +281,10 @@
 	// Reusable blocks
 	&.is-reusable > .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
-		outline: $border-width dashed $dark-opacity-light-500;
+		outline: $border-width dashed $dark-opacity-light-800;
 
 		.is-dark-theme & {
-			outline-color: $light-opacity-light-500;
+			outline-color: $light-opacity-light-800;
 		}
 	}
 
@@ -819,7 +819,7 @@
 		right: -$block-padding;
 
 		// Paint the borders on the toolbar itself on mobile.
-		border-top: $border-width solid $light-gray-500;
+		border-top: $border-width solid $light-gray-800;
 		.components-toolbar {
 			border-top: none;
 			border-bottom: none;
@@ -828,8 +828,8 @@
 		@include break-small() {
 			border-top: none;
 			.components-toolbar {
-				border-top: $border-width solid $light-gray-500;
-				border-bottom: $border-width solid $light-gray-500;
+				border-top: $border-width solid $light-gray-800;
+				border-bottom: $border-width solid $light-gray-800;
 			}
 		}
 	}
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index c49e7291b15cd5..e9c8a0d2453b8e 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -14,13 +14,18 @@
 	// Show a left border on the parent container.
 	box-shadow: -$block-left-border-width 0 0 0 $dark-opacity-500;
 
+	// Show a lighter version for dark themes.
+	.is-dark-theme & {
+		box-shadow: -$block-left-border-width 0 0 0 $light-opacity-600;
+	}
+
 	// The component is born with a border, but we only need some of them.
 	.components-toolbar {
 		border: 0;
-		border-top: $border-width solid $light-gray-500;
-		border-bottom: $border-width solid $light-gray-500;
+		border-top: $border-width solid $light-gray-800;
+		border-bottom: $border-width solid $light-gray-800;
 
 		// Add a right border to show as separator in the block toolbar.
-		border-right: $border-width solid $light-gray-500;
+		border-right: $border-width solid $light-gray-800;
 	}
 }
diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss
index c35abcb009dfca..bbb7c39a3e31db 100644
--- a/packages/editor/src/components/post-permalink/style.scss
+++ b/packages/editor/src/components/post-permalink/style.scss
@@ -9,7 +9,7 @@
 	white-space: nowrap;
 
 	// Use opacity to work in various editor styles.
-	border: $border-width solid $dark-opacity-light-500;
+	border: $border-width solid $dark-opacity-light-800;
 	background-clip: padding-box;
 
 	// Put toolbar snugly to edge on mobile.
diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
index 357aad58d78a56..458de7ed53ac0c 100644
--- a/packages/editor/src/components/post-title/style.scss
+++ b/packages/editor/src/components/post-title/style.scss
@@ -51,11 +51,11 @@
 	&:not(.is-focus-mode) {
 		&.is-selected .editor-post-title__input {
 			// use opacity to work in various editor styles.
-			border-color: $dark-opacity-light-500;
+			border-color: $dark-opacity-light-800;
 			box-shadow: inset $block-left-border-width 0 0 0 $dark-opacity-500;
 
 			.is-dark-theme & {
-				border-color: $light-opacity-light-500;
+				border-color: $light-opacity-light-800;
 				box-shadow: inset $block-left-border-width 0 0 0 $light-opacity-600;
 			}
 

From c1de2bd0ba46db652da9f135b521addffeeb09dc Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Mon, 11 Mar 2019 13:36:05 -0400
Subject: [PATCH 14/33] Switch to using border instead of outline for block
 borders.

Also, change the thick left border to a solid color, to prevent weird overlap.
---
 .../src/components/block-list/style.scss      | 32 ++++++++++---------
 .../src/components/block-toolbar/style.scss   |  4 +--
 .../src/components/post-title/style.scss      |  8 ++---
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index a40b53149914b4..3cd38f9c67335b 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -11,7 +11,7 @@
 	// While block is being dragged, dim the slot dragged from, and hide some UI.
 	&.is-dragging {
 		.editor-block-list__block-edit::before {
-			outline: none;
+			border: none;
 		}
 
 		> .editor-block-list__block-edit > * {
@@ -105,7 +105,7 @@
 	}
 
 	/**
-	 * Block outline layout
+	 * Block border layout
 	 */
 
 	.editor-block-list__block-edit {
@@ -115,9 +115,10 @@
 			z-index: z-index(".editor-block-list__block-edit::before");
 			content: "";
 			position: absolute;
-			outline: $border-width solid transparent;
+			border: $border-width solid transparent;
+			border-left: none;
 			box-shadow: none;
-			transition: outline 0.1s linear, box-shadow 0.1s linear;
+			transition: border-color 0.1s linear, box-shadow 0.1s linear;
 			pointer-events: none;
 
 			// Go edge-to-edge on mobile.
@@ -133,20 +134,20 @@
 
 		> .editor-block-list__block-edit::before {
 			// Use opacity to work in various editor styles.
-			outline: $border-width solid $dark-opacity-light-800;
-			box-shadow: inset $block-left-border-width 0 0 0 $dark-opacity-500;
+			border-color: $dark-opacity-light-800;
+			box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500;
 
 			.is-dark-theme & {
-				outline-color: $light-opacity-light-800;
-				box-shadow: inset $block-left-border-width 0 0 0 $light-opacity-600;
+				border-color: $light-opacity-light-800;
+				box-shadow: inset $block-left-border-width 0 0 0 $light-gray-600;
 			}
 
 			// Switch to outset borders on larger screens.
 			@include break-small() {
-				box-shadow: -$block-left-border-width 0 0 0 $dark-opacity-500;
+				box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
 
 				.is-dark-theme & {
-					box-shadow: -$block-left-border-width 0 0 0 $light-opacity-600;
+					box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
 				}
 			}
 		}
@@ -235,10 +236,10 @@
 
 	&.has-warning:not(.is-hovered) .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
-		outline-color: $dark-opacity-light-800;
+		border-color: $dark-opacity-light-800;
 
 		.is-dark-theme & {
-			outline-color: $light-opacity-light-800;
+			border-color: $light-opacity-light-800;
 		}
 	}
 
@@ -281,10 +282,10 @@
 	// Reusable blocks
 	&.is-reusable > .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
-		outline: $border-width dashed $dark-opacity-light-800;
+		border: $border-width dashed $dark-opacity-light-800;
 
 		.is-dark-theme & {
-			outline-color: $light-opacity-light-800;
+			border-color: $light-opacity-light-800;
 		}
 	}
 
@@ -298,7 +299,7 @@
 		// When images are floated, the block itself should collapse to zero height.
 		height: 0;
 
-		// Hide block outline when an image is floated.
+		// Hide block border when an image is floated.
 		.editor-block-list__block-edit {
 			&::before {
 				content: none;
@@ -927,6 +928,7 @@
 		// This prevents floats from messing up the position of the block toolbar on floats-adjacent blocks when selected.
 		position: absolute;
 		left: $border-width;
+		top: $border-width;
 	}
 }
 
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index e9c8a0d2453b8e..2826bdcb474b08 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -12,11 +12,11 @@
 	}
 
 	// Show a left border on the parent container.
-	box-shadow: -$block-left-border-width 0 0 0 $dark-opacity-500;
+	box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
 
 	// Show a lighter version for dark themes.
 	.is-dark-theme & {
-		box-shadow: -$block-left-border-width 0 0 0 $light-opacity-600;
+		box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
 	}
 
 	// The component is born with a border, but we only need some of them.
diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
index 458de7ed53ac0c..07dc0f281d31db 100644
--- a/packages/editor/src/components/post-title/style.scss
+++ b/packages/editor/src/components/post-title/style.scss
@@ -52,19 +52,19 @@
 		&.is-selected .editor-post-title__input {
 			// use opacity to work in various editor styles.
 			border-color: $dark-opacity-light-800;
-			box-shadow: inset $block-left-border-width 0 0 0 $dark-opacity-500;
+			box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500;
 
 			.is-dark-theme & {
 				border-color: $light-opacity-light-800;
-				box-shadow: inset $block-left-border-width 0 0 0 $light-opacity-600;
+				box-shadow: inset $block-left-border-width 0 0 0 $light-gray-600;
 			}
 
 			// Switch to outset borders on larger screens.
 			@include break-small() {
-				box-shadow: -$block-left-border-width 0 0 0 $dark-opacity-500;
+				box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
 
 				.is-dark-theme & {
-					box-shadow: -$block-left-border-width 0 0 0 $light-opacity-600;
+					box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
 				}
 			}
 		}

From f4468b21ae03b2463574437e4fe7150bea70c4c3 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Mon, 11 Mar 2019 14:26:17 -0400
Subject: [PATCH 15/33] Make this work better with Windows High Contrast Mode

---
 packages/block-editor/src/components/block-list/style.scss | 3 +++
 packages/editor/src/components/post-title/style.scss       | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 3cd38f9c67335b..61e93dfa49fc7c 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -121,6 +121,9 @@
 			transition: border-color 0.1s linear, box-shadow 0.1s linear;
 			pointer-events: none;
 
+			// Include a transparent outline for Windows High Contrast mode.
+			outline: $border-width solid transparent;
+
 			// Go edge-to-edge on mobile.
 			right: -$block-padding;
 			left: -$block-padding;
diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
index 07dc0f281d31db..a065097cd6465b 100644
--- a/packages/editor/src/components/post-title/style.scss
+++ b/packages/editor/src/components/post-title/style.scss
@@ -25,6 +25,9 @@
 		border-left-width: 0;
 		border-right-width: 0;
 
+		// Include transparent outline for Windows High Contrast mode.
+		outline: $border-width solid transparent;
+
 		@include break-small() {
 			border-width: $border-width;
 			border-left-width: 0;

From 7f528088a231fda6a640b24b21f350853cd07dea Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 12 Mar 2019 08:45:09 -0400
Subject: [PATCH 16/33] Adjust z-index of border + breadcrumb for child blocks.

So that they're not overlapped by the parent block's border + toolbar.
---
 assets/stylesheets/_z-index.scss                       |  2 ++
 .../block-editor/src/components/block-list/style.scss  | 10 ++++++++++
 2 files changed, 12 insertions(+)

diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss
index 87bc9ea5575de7..462cf2c5ddcc04 100644
--- a/assets/stylesheets/_z-index.scss
+++ b/assets/stylesheets/_z-index.scss
@@ -4,11 +4,13 @@
 
 $z-layers: (
 	".editor-block-list__block-edit::before": 0,
+	".editor-inner-blocks .editor-block-list__block-edit::before": 1,
 	".editor-block-switcher__arrow": 1,
 	".editor-block-list__block {core/image aligned wide or fullwide}": 20,
 	".block-library-classic__toolbar": 10,
 	".editor-block-list__layout .reusable-block-indicator": 1,
 	".editor-block-list__breadcrumb": 2,
+	".editor-inner-blocks .editor-block-list__breadcrumb": 22,
 	".components-form-toggle__input": 1,
 	".components-panel__header.edit-post-sidebar__panel-tabs": -1,
 	".edit-post-sidebar .components-panel": -2,
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 61e93dfa49fc7c..087bd6bfb88e9a 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -129,6 +129,11 @@
 			left: -$block-padding;
 			top: -$block-padding;
 			bottom: -$block-padding;
+
+			// Position this above the dark border of parent blocks.
+			.editor-inner-blocks & {
+				z-index: z-index(".editor-inner-blocks .editor-block-list__block-edit::before");
+			}
 		}
 	}
 
@@ -967,6 +972,11 @@
 		}
 	}
 
+	// Position this above the dark border of parent blocks.
+	.editor-inner-blocks & {
+		z-index: z-index(".editor-inner-blocks .editor-block-list__breadcrumb");
+	}
+
 	// Remove negative left breadcrumb position for left aligned blocks.
 	[data-align="left"] & {
 		left: 0;

From a6584911d715e3d25e9ce0669ee3b491eeb13521 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 12 Mar 2019 08:48:36 -0400
Subject: [PATCH 17/33] Remove extra z-index rule from the block border.

Turns out this wasn't needed anyway.
---
 assets/stylesheets/_z-index.scss                           | 1 -
 packages/block-editor/src/components/block-list/style.scss | 5 -----
 2 files changed, 6 deletions(-)

diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss
index 462cf2c5ddcc04..cbf4da04ae1786 100644
--- a/assets/stylesheets/_z-index.scss
+++ b/assets/stylesheets/_z-index.scss
@@ -4,7 +4,6 @@
 
 $z-layers: (
 	".editor-block-list__block-edit::before": 0,
-	".editor-inner-blocks .editor-block-list__block-edit::before": 1,
 	".editor-block-switcher__arrow": 1,
 	".editor-block-list__block {core/image aligned wide or fullwide}": 20,
 	".block-library-classic__toolbar": 10,
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 087bd6bfb88e9a..fa7ba275093537 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -159,11 +159,6 @@
 				}
 			}
 		}
-
-		// Prevent inset borders from overlapping full-bleed block content.
-		&[data-align="full"] > .editor-block-list__block-edit::before {
-			box-shadow: none;
-		}
 	}
 
 	// Hover style.

From 2b41bb8a8f8a4906e7312b56f2bda79a4d1ee65a Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 12 Mar 2019 08:56:31 -0400
Subject: [PATCH 18/33] Remove extra z-index rule from the block border. Minor
 description cleanup.

---
 packages/block-editor/src/components/block-list/style.scss | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index fa7ba275093537..0243cd856560e2 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -129,11 +129,6 @@
 			left: -$block-padding;
 			top: -$block-padding;
 			bottom: -$block-padding;
-
-			// Position this above the dark border of parent blocks.
-			.editor-inner-blocks & {
-				z-index: z-index(".editor-inner-blocks .editor-block-list__block-edit::before");
-			}
 		}
 	}
 
@@ -967,7 +962,7 @@
 		}
 	}
 
-	// Position this above the dark border of parent blocks.
+	// Position this above the toolbar of parent blocks.
 	.editor-inner-blocks & {
 		z-index: z-index(".editor-inner-blocks .editor-block-list__breadcrumb");
 	}

From bdcedbc3d3213f1ab83eb0c96879bac3ee4bf036 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 12 Mar 2019 13:01:53 -0400
Subject: [PATCH 19/33] Ensure these styles are compatible with Top Toolbar
 mode.

---
 .../src/components/block-toolbar/style.scss            | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 2826bdcb474b08..37475b2c278dfb 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -28,4 +28,14 @@
 		// Add a right border to show as separator in the block toolbar.
 		border-right: $border-width solid $light-gray-800;
 	}
+
+	// Add a left border and adjust the color for Top Toolbar mode.
+	.has-fixed-toolbar & {
+		box-shadow: none;
+		border-left: $border-width solid $light-gray-500;
+
+		.components-toolbar {
+			border-color: $light-gray-500;
+		}
+	}
 }

From ea4e64ee7e4b269602d65e2636688b57d80eeb4b Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 12 Mar 2019 13:03:53 -0400
Subject: [PATCH 20/33] Use the new gray value for the mobile toolbar border.

---
 packages/block-editor/src/components/block-list/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 0243cd856560e2..e85a7f268751fb 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -614,7 +614,7 @@
 		margin-top: $block-toolbar-height;
 		margin-right: -$block-padding;
 		margin-left: -$block-padding;
-		border-top: $border-width solid $light-gray-500;
+		border-top: $border-width solid $light-gray-800;
 		height: $block-toolbar-height;
 
 		@include break-small() {

From 130d84f8b77da27c7cb6a15d1f4028bd2bd8d104 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 12 Mar 2019 13:31:45 -0400
Subject: [PATCH 21/33] Add a matching left border to the post permalink area
 above the title.

---
 .../editor/src/components/post-permalink/style.scss  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss
index bbb7c39a3e31db..1ddabb786fc739 100644
--- a/packages/editor/src/components/post-permalink/style.scss
+++ b/packages/editor/src/components/post-permalink/style.scss
@@ -12,6 +12,18 @@
 	border: $border-width solid $dark-opacity-light-800;
 	background-clip: padding-box;
 
+	// Show a thick left border to match the left border on the title field.
+	border-left: 0;
+	box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+
+	// Use a lighter border for dark themes.
+	.is-dark-theme & {
+		box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+	}
+
+	// Include transparent outline for Windows High Contrast mode.
+	outline: $border-width solid transparent;
+
 	// Put toolbar snugly to edge on mobile.
 	margin-left: -$block-padding - $border-width; // This hides the border off the edge of the screen.
 	margin-right: -$block-padding - $border-width;

From 047e1e489a594f6f1ad9d0475e87af389f4071bf Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 12 Mar 2019 14:40:40 -0400
Subject: [PATCH 22/33] Improve border position for mobile screens, especially
 for elements that float left/right.

---
 .../src/components/block-list/style.scss       | 18 ++++++++++++++++--
 .../src/components/block-toolbar/style.scss    | 16 +++++++++-------
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index e85a7f268751fb..9dc02d2ca90476 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -315,7 +315,7 @@
 		// Position toolbar better on mobile.
 		.editor-block-contextual-toolbar {
 			width: auto;
-			border-bottom: $border-width solid $light-gray-500;
+			border-bottom: $border-width solid $light-gray-800;
 			bottom: auto;
 		}
 	}
@@ -833,11 +833,25 @@
 		}
 	}
 
-	// Floated items have special needs for the contextual toolbar position.
+	// Floated items have special needs for the contextual toolbar position + the thicker left border.
 	&[data-align="left"] .editor-block-contextual-toolbar,
 	&[data-align="right"] .editor-block-contextual-toolbar {
 		margin-bottom: $border-width;
 		margin-top: -$block-toolbar-height;
+
+		// Display the box-shadow on the parent element.
+		box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+		.is-dark-theme & {
+			box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+		}
+
+		@include break-small() {
+			box-shadow: none;
+		}
+
+		.editor-block-toolbar {
+			border-left: none;
+		}
 	}
 
 	// Make block toolbar full width on mobile.
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 37475b2c278dfb..7b46afb73a1282 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -4,19 +4,21 @@
 	width: 100%;
 	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
+	border-left: $border-width solid $light-gray-800;
 	transition: border-color 0.1s linear, box-shadow 0.1s linear;
 
-	// Allow overflow on desktop.
 	@include break-small() {
+		// Allow overflow on desktop.
 		overflow: inherit;
-	}
 
-	// Show a left border on the parent container.
-	box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+		// Show a left border on the parent container.
+		border-left: none;
+		box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
 
-	// Show a lighter version for dark themes.
-	.is-dark-theme & {
-		box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+		// Show a lighter version for dark themes.
+		.is-dark-theme & {
+			box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+		}
 	}
 
 	// The component is born with a border, but we only need some of them.

From 8109dfa6092079f75ff7fe2eafd173bd89a7303d Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 12 Mar 2019 14:58:09 -0400
Subject: [PATCH 23/33] Remove a couple unnecessary border updates from
 047e1e4.

Turns out these styles can be preserved on all screen sizes with no ill effect.
---
 .../src/components/block-toolbar/style.scss   | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 7b46afb73a1282..cc929ed96cc7a0 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -4,21 +4,20 @@
 	width: 100%;
 	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
-	border-left: $border-width solid $light-gray-800;
 	transition: border-color 0.1s linear, box-shadow 0.1s linear;
 
+	// Show a left border on the parent container.
+	border-left: none;
+	box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+
+	// Show a lighter version for dark themes.
+	.is-dark-theme & {
+		box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+	}
+
 	@include break-small() {
 		// Allow overflow on desktop.
 		overflow: inherit;
-
-		// Show a left border on the parent container.
-		border-left: none;
-		box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
-
-		// Show a lighter version for dark themes.
-		.is-dark-theme & {
-			box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
-		}
 	}
 
 	// The component is born with a border, but we only need some of them.

From 147f1518212722a77f8eb9202a529415b52c391d Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 13 Mar 2019 08:38:48 -0400
Subject: [PATCH 24/33] Clean up bugs related to the hover + focus states of
 the classic editor block.

---
 packages/block-library/src/classic/editor.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss
index 1fe580ef581c9b..3cc5e49627cc23 100644
--- a/packages/block-library/src/classic/editor.scss
+++ b/packages/block-library/src/classic/editor.scss
@@ -207,7 +207,11 @@
 	}
 
 	.editor-block-list__block-edit::before {
-		outline: $border-width solid #e2e4e7;
+		transition: border-color 0.1s linear, box-shadow 0.1s linear;
+		border: $border-width solid $light-gray-800;
+
+		// Windows High Contrast mode will show this outline.
+		outline: $border-width solid transparent;
 	}
 
 	// Don't show block type label for classic block
@@ -228,6 +232,8 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 	z-index: z-index(".block-library-classic__toolbar");
 	top: $block-padding;
 	transform: translateY(-$block-padding);
+	border: $border-width solid $light-gray-800;
+	border-bottom: none;
 
 	// On mobile, toolbars go edge to edge.
 	padding: 0 $block-padding;
@@ -295,6 +301,7 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 
 			.editor-block-toolbar {
 				border: none;
+				box-shadow: none;
 
 				// Match the TinyMCE "mobile" breakpoint buttons alignment.
 				margin-top: 3px;

From 95ae7d9b1b9415e836fcefcf6bcaa288723f6bd0 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 13 Mar 2019 08:55:46 -0400
Subject: [PATCH 25/33] Classic Block toolbar icon cleanup.

Even out margins, remove white background.
---
 packages/block-library/src/classic/editor.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss
index 3cc5e49627cc23..f8fd82e5b2799e 100644
--- a/packages/block-library/src/classic/editor.scss
+++ b/packages/block-library/src/classic/editor.scss
@@ -295,7 +295,7 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 		}
 		.editor-block-contextual-toolbar {
 			float: right;
-			margin-right: $icon-button-size - $block-padding + $border-width;
+			margin-right: $icon-button-size - $block-padding + ($border-width * 3);
 			transform: translateY(-#{ $block-padding - $border-width });
 			top: $block-padding;
 
@@ -316,6 +316,10 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 					margin-top: $grid-size-small;
 					margin-bottom: $grid-size-small;
 				}
+
+				.components-toolbar__control.components-button:hover {
+					background-color: transparent;
+				}
 			}
 
 			.components-toolbar {

From 30a2801e0a57f28b494a7938bf026418fa4851f1 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 13 Mar 2019 09:07:57 -0400
Subject: [PATCH 26/33] Reusable Block border cleanup.

---
 .../src/components/block-list/style.scss           | 12 +++++++++++-
 .../block-library/src/block/edit-panel/style.scss  | 14 ++++++++++++++
 .../block-library/src/block/indicator/style.scss   |  3 +--
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 9dc02d2ca90476..c413a4a45be82b 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -279,11 +279,21 @@
 
 	// Reusable blocks
 	&.is-reusable > .editor-block-list__block-edit::before {
+		border: $border-width dashed $dark-opacity-light-500;
+
+		.is-dark-theme & {
+			border-color: $light-opacity-light-600;
+		}
+	}
+
+	&.is-reusable.is-selected > .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
-		border: $border-width dashed $dark-opacity-light-800;
+		border-color: $dark-opacity-light-800;
+		border-left-color: transparent;
 
 		.is-dark-theme & {
 			border-color: $light-opacity-light-800;
+			border-left-color: transparent;
 		}
 	}
 
diff --git a/packages/block-library/src/block/edit-panel/style.scss b/packages/block-library/src/block/edit-panel/style.scss
index 4573abd8ad81cf..8f53341becd105 100644
--- a/packages/block-library/src/block/edit-panel/style.scss
+++ b/packages/block-library/src/block/edit-panel/style.scss
@@ -12,6 +12,10 @@
 	padding: $grid-size $block-padding;
 	position: relative;
 
+	// Use opacity to work in various editor styles.
+	border: $border-width dashed $dark-opacity-light-500;
+	border-bottom: none;
+
 	// Show a smaller padding when nested.
 	.editor-block-list__layout & {
 		margin: 0 (-$block-padding);
@@ -58,3 +62,13 @@
 		}
 	}
 }
+
+.editor-block-list__layout .is-selected .reusable-block-edit-panel {
+	border-color: $dark-opacity-light-800;
+	border-left-color: transparent;
+
+	.is-dark-theme & {
+		border-color: $light-opacity-light-800;
+		border-left-color: transparent;
+	}
+}
diff --git a/packages/block-library/src/block/indicator/style.scss b/packages/block-library/src/block/indicator/style.scss
index 1f3937ea99cd94..a5c935ef1e5e1c 100644
--- a/packages/block-library/src/block/indicator/style.scss
+++ b/packages/block-library/src/block/indicator/style.scss
@@ -1,8 +1,7 @@
 .editor-block-list__layout .reusable-block-indicator {
 	background: $white;
-	border-left: $border-width dashed $light-gray-500;
+	border: $border-width dashed $light-gray-500;
 	color: $dark-gray-500;
-	border-bottom: $border-width dashed $light-gray-500;
 	top: -$block-padding;
 	height: 30px;
 	padding: $grid-size-small;

From 82560f9c24ebb449fb4bf75781a9cdc8ccaee936 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 13 Mar 2019 09:13:15 -0400
Subject: [PATCH 27/33] Keeping a light border on the classic block when it's
 inactive.

---
 packages/block-library/src/classic/editor.scss | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss
index f8fd82e5b2799e..9464aa74318bc6 100644
--- a/packages/block-library/src/classic/editor.scss
+++ b/packages/block-library/src/classic/editor.scss
@@ -208,12 +208,17 @@
 
 	.editor-block-list__block-edit::before {
 		transition: border-color 0.1s linear, box-shadow 0.1s linear;
-		border: $border-width solid $light-gray-800;
+		border: $border-width solid $light-gray-500;
 
 		// Windows High Contrast mode will show this outline.
 		outline: $border-width solid transparent;
 	}
 
+	&.is-selected .editor-block-list__block-edit::before {
+		border-color: $light-gray-800;
+		border-left-color: transparent;
+	}
+
 	// Don't show block type label for classic block
 	&.is-hovered .editor-block-list__breadcrumb {
 		display: none;
@@ -232,12 +237,17 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 	z-index: z-index(".block-library-classic__toolbar");
 	top: $block-padding;
 	transform: translateY(-$block-padding);
-	border: $border-width solid $light-gray-800;
+	border: $border-width solid $light-gray-500;
 	border-bottom: none;
 
 	// On mobile, toolbars go edge to edge.
 	padding: 0 $block-padding;
 
+	.is-selected & {
+		border-color: $light-gray-800;
+		border-left-color: transparent;
+	}
+
 	@include break-small() {
 		padding: 0;
 	}

From f6da1767e122b5d1b30760fcd3ecbcfe61cf5bd0 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 13 Mar 2019 09:28:28 -0400
Subject: [PATCH 28/33] Clean up borders on warning blocks.

---
 .../src/components/block-list/style.scss      | 21 ++++++++++++++-----
 .../src/components/warning/style.scss         | 10 +++++++++
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index c413a4a45be82b..c76fd635935063 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -232,9 +232,20 @@
 		}
 	}
 
-	&.has-warning:not(.is-hovered) .editor-block-list__block-edit::before {
+	&.has-warning .editor-block-list__block-edit::before {
+		// Use opacity to work in various editor styles.
+		border-color: $dark-opacity-light-500;
+		border-left: $border-width solid $dark-opacity-light-500;
+
+		.is-dark-theme & {
+			border-color: $light-opacity-light-600;
+		}
+	}
+
+	&.has-warning.is-selected .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
 		border-color: $dark-opacity-light-800;
+		border-left-color: transparent;
 
 		.is-dark-theme & {
 			border-color: $light-opacity-light-800;
@@ -1048,12 +1059,12 @@
 .editor-block-list__block .editor-warning {
 	z-index: z-index(".editor-warning");
 	position: relative;
-	margin-right: -$block-padding - $border-width;
-	margin-left: -$block-padding - $border-width;
+	margin-right: -$block-padding;
+	margin-left: -$block-padding;
 
 	// Pull the warning upwards to the edge, and add a negative bottom margin to compensate.
-	margin-bottom: -$block-padding - $border-width;
-	transform: translateY(-$block-padding - $border-width);
+	margin-bottom: -$block-padding;
+	transform: translateY(-$block-padding);
 
 	// Bigger padding on mobile where blocks are edge to edge.
 	padding: 10px $block-padding;
diff --git a/packages/block-editor/src/components/warning/style.scss b/packages/block-editor/src/components/warning/style.scss
index ecfb3f0c99770f..216bfc912aa020 100644
--- a/packages/block-editor/src/components/warning/style.scss
+++ b/packages/block-editor/src/components/warning/style.scss
@@ -13,6 +13,16 @@
 		background-color: transparent;
 	}
 
+	.is-selected & {
+		// Use opacity to work in various editor styles.
+		border-color: $dark-opacity-light-800;
+		border-left-color: transparent;
+
+		.is-dark-theme & {
+			border-color: $light-opacity-light-800;
+		}
+	}
+
 	.editor-warning__message {
 		line-height: $default-line-height;
 		font-family: $default-font;

From 11489aa95c6b6b51401569a2296c546f860c4fff Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Thu, 14 Mar 2019 11:44:13 -0400
Subject: [PATCH 29/33] Switch to a solid color border color for the permalink
 box.

This mirrors the approach we use for block toolbars, and also ensures that we don't layer opacities and make the permalink toolbar darker than intended.
---
 packages/editor/src/components/post-permalink/style.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss
index 1ddabb786fc739..5b13e758439949 100644
--- a/packages/editor/src/components/post-permalink/style.scss
+++ b/packages/editor/src/components/post-permalink/style.scss
@@ -7,9 +7,7 @@
 	font-size: $default-font-size;
 	height: 40px;
 	white-space: nowrap;
-
-	// Use opacity to work in various editor styles.
-	border: $border-width solid $dark-opacity-light-800;
+	border: $border-width solid $light-gray-800;
 	background-clip: padding-box;
 
 	// Show a thick left border to match the left border on the title field.

From e0ae429c1df36ec4ead8951ca2e24e7b871509cb Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 15 Mar 2019 08:15:48 -0400
Subject: [PATCH 30/33] Update z-index rule name to match the one used in the
 latest merge.

---
 packages/block-editor/src/components/block-list/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 24e3f560d12728..aadf9db9b9a902 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -999,7 +999,7 @@
 
 	// Position this above the toolbar of parent blocks.
 	.editor-inner-blocks & {
-		z-index: z-index(".editor-inner-blocks .editor-block-list__breadcrumb");
+		z-index: z-index(".editor-inner-blocks .block-editor-block-list__breadcrumb");
 	}
 
 	// Remove negative left breadcrumb position for left aligned blocks.

From 12e5368e2a97ed2e5097a5cc21366b75c2d3f337 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 15 Mar 2019 08:17:27 -0400
Subject: [PATCH 31/33] Combine full-wide toolbar centering rules.

Previously, these were declared in two separate palces.
---
 .../src/components/visual-editor/style.scss         | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index 67e375684693d6..1ba9ce38e01139 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -27,11 +27,13 @@
 			margin-right: -$block-side-ui-width;
 		}
 
-		// Center the block toolbar on wide and full-wide blocks.
+		// Center the block toolbar on full-wide blocks.
 		// Use specific selector to not affect nested block toolbars.
 		&[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar {
-			width: calc(100% + #{ $block-padding * 2 + $border-width * 2 }); // Matches the negative margins applied to parent blocks.
 			height: 0; // This collapses the container to an invisible element without margin.
+			width: 100%;
+			margin-left: 0;
+			margin-right: 0;
 			text-align: center;
 
 			// This float rule takes the toolbar out of the flow, without it having to be absolute positioned.
@@ -48,13 +50,6 @@
 				position: relative;
 			}
 		}
-
-		// The centering math is simpler for a fullwide block, which doesn't have any block padding.
-		&[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar {
-			width: 100%;
-			margin-left: 0;
-			margin-right: 0;
-		}
 	}
 }
 

From c3b6c3b934c137e316d96dfb12a956e0bcc76e0e Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 15 Mar 2019 08:31:13 -0400
Subject: [PATCH 32/33] Add a darker hover state for dark themes.

---
 .../block-editor/src/components/block-list/style.scss  | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index aadf9db9b9a902..4a72cb3ed3423d 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -159,6 +159,10 @@
 	// Hover style.
 	&.is-hovered > .block-editor-block-list__block-edit::before {
 		box-shadow: -$block-left-border-width 0 0 0 $light-gray-500;
+
+		.is-dark-theme & {
+			box-shadow: -$block-left-border-width 0 0 0 $dark-gray-600;
+		}
 	}
 
 	// Spotlight mode.
@@ -982,7 +986,6 @@
 	.components-toolbar {
 		padding: 0;
 		border: none;
-		background: transparent;
 		line-height: 1;
 		font-family: $default-font;
 		font-size: 11px;
@@ -990,6 +993,11 @@
 		background: $light-gray-500;
 		color: $dark-gray-900;
 
+		.is-dark-theme & {
+			background: $dark-gray-600;
+			color: $white;
+		}
+
 		// Animate in
 		.block-editor-block-list__block:hover & {
 			opacity: 0;

From 9b5325f38a6d3360e67b9e48b4dad729f7080c3b Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 15 Mar 2019 08:37:23 -0400
Subject: [PATCH 33/33] Remove the left toolbar border on mobile screens.

This fixes some visual bugs with themes like TwentyNineteen, which include margins on either side of the block on mobile.
---
 .../src/components/block-toolbar/style.scss   | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index c0d8aec4838b13..e0fbc6601ee369 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -5,19 +5,20 @@
 	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
 	transition: border-color 0.1s linear, box-shadow 0.1s linear;
-
-	// Show a left border on the parent container.
-	border-left: none;
-	box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
-
-	// Show a lighter version for dark themes.
-	.is-dark-theme & {
-		box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
-	}
+	border-left: $border-width solid $light-gray-800;
 
 	@include break-small() {
 		// Allow overflow on desktop.
 		overflow: inherit;
+
+		// Show a left border on the parent container.
+		border-left: none;
+		box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+
+		// Show a lighter version for dark themes.
+		.is-dark-theme & {
+			box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+		}
 	}
 
 	// The component is born with a border, but we only need some of them.