From b27aa5f3b43276540f48fc07a980287fb7670283 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Wed, 22 Jan 2020 12:56:17 +0100
Subject: [PATCH] General layout polish.

---
 packages/base-styles/_colors.scss             |  2 +-
 packages/base-styles/_variables.scss          |  9 +-
 .../components/block-breadcrumb/style.scss    |  2 +-
 .../src/components/block-list/style.scss      | 33 ++++---
 .../src/components/block-mover/style.scss     |  9 +-
 .../components/block-settings-menu/style.scss |  2 +-
 .../src/components/block-switcher/index.js    |  8 +-
 .../src/components/block-switcher/style.scss  | 22 +++--
 .../src/components/block-toolbar/style.scss   | 20 ++--
 .../default-block-appender/style.scss         | 15 ---
 .../src/components/editor-skeleton/style.scss |  5 +-
 .../src/components/inserter/style.scss        | 28 +++++-
 .../src/components/media-placeholder/index.js |  4 +-
 .../block-library/src/classic/editor.scss     |  7 +-
 packages/block-library/src/editor.scss        |  1 +
 .../block-library/src/gallery/editor.scss     | 13 +--
 .../block-library/src/separator/editor.scss   | 10 ++
 packages/block-library/src/spacer/editor.scss |  5 +
 .../components/src/autocomplete/style.scss    |  2 +-
 packages/components/src/button/style.scss     | 67 +++++++-------
 .../components/src/dropdown-menu/style.scss   | 17 ++--
 packages/components/src/dropdown/style.scss   |  2 +-
 packages/components/src/menu-group/style.scss |  6 +-
 packages/components/src/menu-item/style.scss  | 14 +--
 .../components/src/placeholder/style.scss     |  9 +-
 packages/components/src/popover/index.js      |  2 +-
 packages/components/src/popover/style.scss    | 11 ++-
 .../components/src/toolbar-button/style.scss  |  5 +
 .../header/fullscreen-mode-close/style.scss   |  8 +-
 .../components/header/header-toolbar/index.js |  9 +-
 .../header/header-toolbar/style.scss          | 15 +--
 .../header/pinned-plugins/style.scss          |  8 +-
 .../src/components/header/style.scss          | 92 +++++++++----------
 .../edit-post/src/components/layout/index.js  | 17 +++-
 .../src/components/layout/style.scss          | 34 +++++--
 .../src/components/preview-options/style.scss |  2 +-
 .../sidebar/settings-header/style.scss        |  4 +-
 .../sidebar/sidebar-header/style.scss         |  2 -
 .../src/components/text-editor/style.scss     |  6 +-
 .../components/post-saved-state/style.scss    |  9 +-
 packages/editor/src/editor-styles.scss        |  2 +-
 41 files changed, 288 insertions(+), 250 deletions(-)
 create mode 100644 packages/block-library/src/separator/editor.scss

diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
index bbc0a08671de4..a2ea5498778c4 100644
--- a/packages/base-styles/_colors.scss
+++ b/packages/base-styles/_colors.scss
@@ -30,7 +30,7 @@ $dark-gray-primary: #1e1e1e;
 $medium-gray-text: #757575;
 $light-gray-secondary: #ccc;
 $theme-color: theme(button);
-$blue-medium-focus: #007cba;	// @todo: consider revisiting for theme colors.
+$blue-medium-focus: #007cba;	// @todo: Currently being used as "spot" color. Needs to be considered in context of themes.
 $blue-medium-focus-dark: #fff;
 
 // Dark opacities, for use with light themes.
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index bc41846e53796..6164d7d8b2f0d 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -58,7 +58,7 @@ $grid-size-xlarge: 24px;
  */
 
 $panel-padding: 16px;
-$header-height: 56px;
+$header-height: 60px;
 $panel-header-height: 50px;
 $admin-bar-height: 32px;
 $admin-bar-height-big: 46px;
@@ -74,9 +74,7 @@ $spinner-size: 18px;
  * Shadows.
  */
 
-$shadow-popover: 0 3px 30px rgba($dark-gray-900, 0.1);
-$shadow-toolbar: 0 2px 10px rgba($dark-gray-900, 0.1), 0 0 2px rgba($dark-gray-900, 0.1);
-$shadow-below-only: 0 5px 10px rgba($dark-gray-900, 0.05), 0 2px 2px rgba($dark-gray-900, 0.05);
+$shadow-popover: 0 2px 6px rgba($black, 0.05);
 $shadow-modal: 0 3px 30px rgba($dark-gray-900, 0.2);
 
 
@@ -94,10 +92,9 @@ $widget-area-width: 700px;
  */
 
 $border-width: 1px;
-$block-controls-height: 36px;
 $icon-button-size: 36px;
-$icon-button-size-small: 24px;
 $inserter-tabs-height: 36px;
+$icon-button-size-small: 24px;
 $block-toolbar-height: $grid-unit-60;
 $resize-handler-size: 15px;
 $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // Make the resize handle container larger so there's a larger grabbable area.
diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss
index 485f8edf70369..daa9169bb1765 100644
--- a/packages/block-editor/src/components/block-breadcrumb/style.scss
+++ b/packages/block-editor/src/components/block-breadcrumb/style.scss
@@ -35,7 +35,7 @@
 
 .block-editor-block-breadcrumb__button.components-button,
 .block-editor-block-breadcrumb__current {
-	color: $dark-gray-500;
+	color: $dark-gray-primary;
 	padding: 0 $grid-unit-10;
 	font-size: inherit;
 }
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index f46b9c3b06c4e..84228a039c14e 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -361,20 +361,22 @@
 	}
 }
 
+// Sibling inserter / "inbetweenserter".
 .block-editor-block-list__insertion-point-inserter,
 .block-editor-block-list__block-popover-inserter {
-	// Show a clickable plus.
 	.block-editor-inserter__toggle.components-button {
-		border-radius: 50%;
-		color: $blue-medium-focus;
-		background: $white;
-		height: $block-padding * 2;
-		width: $block-padding * 2;
-		padding: 0;
-		justify-content: center;
+		// Special dimensions for this button.
+		min-width: 32px;
+		height: 32px;
+
+		// Spot color button.
+		background-color: $blue-medium-focus;
+		color: $white;
+		border-radius: $radius-block-ui;
 
-		&:not(:disabled):not([aria-disabled="true"]):hover {
-			box-shadow: none;
+		&:hover {
+			color: $white;
+			background-color: rgba($blue-medium-focus, 0.8);
 		}
 	}
 }
@@ -422,12 +424,13 @@
 
 
 /**
- * Block Toolbar when contextual.
+ * Block Toolbar, top and contextual.
  */
 .block-editor-block-contextual-toolbar-wrapper {
 	padding-left: $block-toolbar-height; // Provide space for the mover control on full-wide items.
 }
 
+.edit-post-header-toolbar__block-toolbar,
 .block-editor-block-contextual-toolbar {
 	// Adapt the height of the toolbar items.
 	.components-toolbar {
@@ -439,7 +442,14 @@
 	.components-button {
 		height: $block-toolbar-height;
 	}
+}
+
 
+/**
+ * Block Toolbar when contextual.
+ */
+
+.block-editor-block-contextual-toolbar {
 	// Block UI appearance.
 	border: $border-width solid $dark-gray-primary;
 	border-radius: $radius-block-ui;
@@ -474,6 +484,7 @@
 			// When button is focused, it receives a box-shadow instead of the border.
 			&:focus {
 				border: none;
+				box-shadow: inset 0 0 0 1px color($theme-color), 0 0 0 1px color($theme-color);
 			}
 		}
 
diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index f1f07ea66fe1d..4f245545b62b5 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -7,12 +7,12 @@
 	display: none;
 }
 
-.block-editor-block-mover__control {
+.block-editor-block-mover__control.has-icon {
 	padding: 0;
 }
 
 // Show the mover in a single button under the contextual toolbar.
-.block-editor-block-contextual-toolbar .block-editor-block-mover {
+.block-editor-block-mover {
 	.components-toolbar {
 		flex-direction: column;
 	}
@@ -22,7 +22,7 @@
 	}
 
 	// Position the icons correctly.
-	.block-editor-block-mover__control-up {
+	.components-toolbar .block-editor-block-mover__control-up {
 		svg {
 			margin-bottom: -$grid-unit-10;
 		}
@@ -34,7 +34,7 @@
 		}
 	}
 
-	.block-editor-block-mover__control-down {
+	.components-toolbar .block-editor-block-mover__control-down {
 		svg {
 			margin-top: -$grid-unit-10;
 		}
@@ -52,7 +52,6 @@
 			height: $block-toolbar-height;
 			width: $block-toolbar-height/2 !important;
 			min-width: $grid-unit-30;
-			padding: 0;
 
 			// Focus style.
 			&::before {
diff --git a/packages/block-editor/src/components/block-settings-menu/style.scss b/packages/block-editor/src/components/block-settings-menu/style.scss
index 85247c7194206..5e66a740f0b42 100644
--- a/packages/block-editor/src/components/block-settings-menu/style.scss
+++ b/packages/block-editor/src/components/block-settings-menu/style.scss
@@ -3,7 +3,7 @@
 }
 
 .block-editor-block-settings-menu__popover .components-popover__content {
-	margin-top: $grid-size;
+	margin-top: $grid-unit-15;
 }
 
 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index f026fb768702e..da254ab88e6a3 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -157,10 +157,8 @@ export class BlockSwitcher extends Component {
 									</PanelBody>
 								) }
 								{ possibleBlockTransformations.length !== 0 && (
-									<PanelBody
-										title={ __( 'Transform To:' ) }
-										initialOpen
-									>
+									<>
+										<div>{ __( 'Transform to:' ) }</div>
 										<BlockTypesList
 											items={ possibleBlockTransformations.map(
 												( destinationBlockType ) => ( {
@@ -177,7 +175,7 @@ export class BlockSwitcher extends Component {
 												onClose();
 											} }
 										/>
-									</PanelBody>
+									</>
 								) }
 							</div>
 						) }
diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
index 32e7e3ba74f4a..363ad40771b5d 100644
--- a/packages/block-editor/src/components/block-switcher/style.scss
+++ b/packages/block-editor/src/components/block-switcher/style.scss
@@ -10,13 +10,19 @@
 		display: none;
 		content: "";
 		position: absolute;
-		bottom: 0;
+		bottom: 1px;
 		right: 0;
 		border-color: transparent;
 		border-style: solid;
+		border-width: 4px;
+		border-right-color: currentColor;
+		border-bottom-color: currentColor;
+		transition: border 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+	}
+
+	// Grow the indicator a little bit on hover.
+	&:hover::after {
 		border-width: 5px;
-		border-right-color: $dark-gray-primary;
-		border-bottom-color: $dark-gray-primary;
 	}
 }
 
@@ -25,7 +31,7 @@
 .components-button.block-editor-block-switcher__no-switcher-icon {
 	margin: 0;
 	display: block;
-	height: $icon-button-size;
+	height: $grid-unit-60;
 
 	.block-editor-block-icon {
 		margin: auto;
@@ -84,7 +90,7 @@
 	display: flex;
 	background: $white;
 	box-shadow: $shadow-popover;
-	padding: 0;
+	padding: $grid-unit-30;
 }
 
 .block-editor-block-switcher__popover .components-popover__content {
@@ -131,7 +137,7 @@
 }
 
 .block-editor-block-switcher__popover .block-editor-block-types-list {
-	margin: 8px -8px -8px;
+	margin: $grid-unit-15 0 0 0;
 }
 
 .block-editor-block-switcher__preview-title {
@@ -143,11 +149,11 @@
 .block-editor-block-contextual-toolbar {
 	.components-button.block-editor-block-switcher__toggle,
 	.components-button.block-editor-block-switcher__no-switcher-icon {
-		height: $block-toolbar-height;
+		height: $grid-unit-60;
 	}
 
 	.components-button.block-editor-block-switcher__no-switcher-icon {
-		width: $block-toolbar-height;
+		width: $grid-unit-60;
 	}
 
 	.components-button.block-editor-block-switcher__toggle {
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 928d8cba5e0f1..9d6818ce9473c 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -44,6 +44,16 @@
 	> :last-child .components-toolbar {
 		border-right: none;
 	}
+
+	// Add a border and adjust the color for Top Toolbar mode.
+	.has-fixed-toolbar & {
+		.block-editor-block-mover .components-toolbar {
+			border-left: $border-width solid $light-gray-500;
+		}
+		.components-toolbar {
+			border-color: $light-gray-500;
+		}
+	}
 }
 
 .block-editor-block-toolbar,
@@ -173,16 +183,6 @@
 			right: $grid-unit-10;
 		}
 	}
-
-	// 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;
-		}
-	}
 }
 
 .block-editor-block-toolbar__slot {
diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss
index 8b9fcc823659f..9b56de6dd8799 100644
--- a/packages/block-editor/src/components/default-block-appender/style.scss
+++ b/packages/block-editor/src/components/default-block-appender/style.scss
@@ -94,21 +94,6 @@
 	&:disabled {
 		display: none;
 	}
-
-	.block-editor-inserter__toggle {
-		border-radius: 50%;
-		width: $block-side-ui-width;
-		height: $block-side-ui-width;
-		padding: 0;
-
-		// Use opacity to work in various editor styles.
-		&:not(:hover) {
-			color: $dark-opacity-500;
-			.is-dark-theme & {
-				color: $light-opacity-500;
-			}
-		}
-	}
 }
 
 .block-editor-default-block-appender .block-editor-inserter {
diff --git a/packages/block-editor/src/components/editor-skeleton/style.scss b/packages/block-editor/src/components/editor-skeleton/style.scss
index fe20befd2089b..75a85fd604cc7 100644
--- a/packages/block-editor/src/components/editor-skeleton/style.scss
+++ b/packages/block-editor/src/components/editor-skeleton/style.scss
@@ -105,6 +105,7 @@ html.block-editor-editor-skeleton__html-container {
 	bottom: 0;
 	left: 0;
 	background: $white;
+	color: $dark-gray-primary;
 
 	// On Mobile the header is fixed to keep HTML as scrollable.
 	@include break-medium() {
@@ -120,6 +121,7 @@ html.block-editor-editor-skeleton__html-container {
 	height: auto;  // Keep the height flexible.
 	border-bottom: $border-width solid $light-gray-500;
 	z-index: z-index(".block-editor-editor-skeleton__header");
+	color: $dark-gray-primary;
 
 	// On Mobile the header is sticky.
 	position: sticky;
@@ -135,8 +137,8 @@ html.block-editor-editor-skeleton__html-container {
 .block-editor-editor-skeleton__footer {
 	height: auto;  // Keep the height flexible.
 	flex-shrink: 0;
-	overflow: auto;
 	border-top: $border-width solid $light-gray-500;
+	color: $dark-gray-primary;
 
 	// On Mobile the footer is hidden
 	display: none;
@@ -153,6 +155,7 @@ html.block-editor-editor-skeleton__html-container {
 	left: auto;
 	right: 0;
 	width: $sidebar-width;
+	color: $dark-gray-primary;
 
 	&:focus {
 		top: auto;
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 25bda30e2cdb6..09fb655e34de7 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -17,7 +17,7 @@ $block-inserter-search-height: 38px;
 }
 
 .block-editor-inserter__popover > .components-popover__content {
-	padding: 0;
+	padding: 0 0 $border-width 0;
 
 	@include break-medium {
 		overflow-y: visible;
@@ -25,6 +25,32 @@ $block-inserter-search-height: 38px;
 	}
 }
 
+.block-editor-inserter__toggle.components-button {
+	display: inline-flex;
+	align-items: center;
+	cursor: pointer;
+	border: none;
+	outline: none;
+	padding: 0;
+	transition: color 0.2s ease;
+	@include reduce-motion("transition");
+
+	&:hover:not(:disabled) {
+		background: color($theme-color shade(10%));
+		color: $white;
+	}
+
+	&:active:not(:disabled) {
+		background: color($theme-color shade(20%));
+		border-color: color($theme-color shade(20%));
+		color: $white;
+	}
+
+	&:focus:not(:disabled) {
+		box-shadow: inset 0 0 0 1px $white, 0 0 0 2px color($theme-color);
+	}
+}
+
 .block-editor-inserter__menu {
 	height: 100%;
 	display: flex;
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index aa3225fb63602..5b889a2dd93a4 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -344,7 +344,7 @@ export class MediaPlaceholder extends Component {
 							const content = (
 								<>
 									<Button
-										isSecondary
+										isPrimary
 										className={ classnames(
 											'block-editor-media-placeholder__button',
 											'block-editor-media-placeholder__upload-button'
@@ -372,7 +372,7 @@ export class MediaPlaceholder extends Component {
 				<>
 					{ this.renderDropZone() }
 					<FormFileUpload
-						isSecondary
+						isPrimary
 						className={ classnames(
 							'block-editor-media-placeholder__button',
 							'block-editor-media-placeholder__upload-button'
diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss
index 6f35a606721fb..8c321fa16f2aa 100644
--- a/packages/block-library/src/classic/editor.scss
+++ b/packages/block-library/src/classic/editor.scss
@@ -294,13 +294,14 @@ div[data-type="core/freeform"] {
 	// block is empty or loading and the placeholder should be displayed.
 	display: none;
 	width: auto;
-	margin: 0 #{ -$block-padding };
+	margin: 0;
 	position: sticky;
 	z-index: z-index(".block-library-classic__toolbar");
-	top: $block-padding;
-	transform: translateY(-$block-padding);
+	top: $grid-unit-10;
 	border: $border-width solid $light-gray-500;
 	border-bottom: none;
+	border-radius: $radius-block-ui;
+	margin-bottom: $grid-unit-10;
 
 	// On mobile, toolbars go edge to edge.
 	padding: 0;
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 012918eef5483..2a70e12669aa1 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -32,6 +32,7 @@
 @import "./quote/editor.scss";
 @import "./rss/editor.scss";
 @import "./search/editor.scss";
+@import "./separator/editor.scss";
 @import "./shortcode/editor.scss";
 @import "./social-link/editor.scss";
 @import "./social-links/editor.scss";
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index f1a4c210a054e..c360af02cd997 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -47,18 +47,13 @@ figure.wp-block-gallery {
 		@include reduce-motion("transition");
 
 		&:hover {
-			box-shadow: $shadow-toolbar;
+			box-shadow: $shadow-popover;
 		}
 
 		.components-button {
-			color: $dark-opacity-300;
-			padding: 2px;
-			height: $icon-button-size-small;
-
-			// Remove hover box shadows, since they clash with the container.
-			&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
-				box-shadow: none;
-			}
+			color: $dark-gray-primary;
+			min-width: $grid-unit-30;
+			height: $grid-unit-30;
 
 			@include break-small() {
 				// Use smaller buttons to fit when there are many columns.
diff --git a/packages/block-library/src/separator/editor.scss b/packages/block-library/src/separator/editor.scss
new file mode 100644
index 0000000000000..af8aa82904977
--- /dev/null
+++ b/packages/block-library/src/separator/editor.scss
@@ -0,0 +1,10 @@
+.block-editor-block-list__block[data-type="core/separator"] {
+	// Prevent margin collapsing so the area to select the separator is bigger.
+	padding-top: 0.1px;
+	padding-bottom: 0.1px;
+
+	&.block-editor-block-list__block { // Needs specificity.
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+}
diff --git a/packages/block-library/src/spacer/editor.scss b/packages/block-library/src/spacer/editor.scss
index b20657931c97e..a4b7fa1afaedd 100644
--- a/packages/block-library/src/spacer/editor.scss
+++ b/packages/block-library/src/spacer/editor.scss
@@ -5,4 +5,9 @@
 .block-library-spacer__resize-container {
 	clear: both;
 	margin-bottom: $default-block-margin;
+
+	// Don't show the horizontal indicator.
+	.components-resizable-box__handle::before {
+		content: none;
+	}
 }
diff --git a/packages/components/src/autocomplete/style.scss b/packages/components/src/autocomplete/style.scss
index c3e8a45c0e6cc..891febedfad01 100644
--- a/packages/components/src/autocomplete/style.scss
+++ b/packages/components/src/autocomplete/style.scss
@@ -7,6 +7,6 @@
 	width: 100%;
 
 	&.is-selected {
-		box-shadow: 0 0 0 1px color($theme-color);
+		box-shadow: 0 0 0 2px color($theme-color);
 	}
 }
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 3ab902f947c5f..909216adb8035 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -12,45 +12,41 @@
 	height: $icon-button-size;
 	align-items: center;
 	box-sizing: border-box;
-	padding: 6px; // Centers 24px icons.
+	padding: 6px 12px;
 	overflow: hidden;
-	border-radius: 2px;
+	border-radius: $radius-block-ui;
 	color: $black;
 
-	// Legacy 20px icons get 2px margin to have a 24px dimensions, making them centered.
-	> .dashicon,
-	> svg[width="20"] {
-		margin: 0 2px;
+	&[aria-expanded="true"],
+	&:hover {
+		color: $theme-color;
 	}
 
-	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):not(.is-primary):not(.is-tertiary):not(.is-link):hover {
-		color: $theme-color;
+	// Unset some hovers, instead of adding :not specificity.
+	&[aria-disabled="true"]:hover {
+		color: initial;
 	}
 
-	&:focus:enabled {
+	// Focus.
+	// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
+	&:focus:not(:disabled) {
 		box-shadow: 0 0 0 2px color($theme-color);
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 1px solid transparent;
 	}
 
-	// Default button style
+	// Secondary/default button style.
 	&.is-secondary {
-		border-width: $border-width;
-		border-style: solid;
 		white-space: nowrap;
-		color: color($theme-color shade(6%));
-		border-color: color($theme-color shade(6%));
-		background: #f3f5f6;
+		color: $theme-color;
+		background: transparent;
 
-		&:not(:disabled):not([aria-disabled="true"]):hover {
-			background: #f1f1f1;
-			border-color: color($theme-color shade(25%));
-			color: color($theme-color shade(25%));
-			text-decoration: none;
+		&:hover:not(:disabled) {
+			border-color: $theme-color;
 		}
 
-		&:not([aria-disabled="true"]):active:enabled {
+		&:active:not(:disabled) {
 			background: #f3f5f6;
 			color: color($theme-color shade(5%));
 			border-color: #7e8993;
@@ -68,32 +64,27 @@
 		}
 	}
 
+	// Primary button style.
 	&.is-primary {
-		border-width: $border-width;
-		border-style: solid;
 		white-space: nowrap;
 		background: color($theme-color);
-		border-color: color($theme-color);
 		color: $white;
 		text-decoration: none;
 		text-shadow: none;
 
-		&:not(:disabled):not([aria-disabled="true"]):hover {
+		&:hover:not(:disabled) {
 			background: color($theme-color shade(10%));
-			border-color: color($theme-color shade(10%));
 			color: $white;
 		}
 
-		&:active:enabled {
+		&:active:not(:disabled) {
 			background: color($theme-color shade(20%));
 			border-color: color($theme-color shade(20%));
 			color: $white;
 		}
 
-		&:focus:enabled {
-			box-shadow:
-				0 0 0 $border-width $white,
-				0 0 0 2px color($theme-color);
+		&:focus:not(:disabled) {
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 2px color($theme-color);
 
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 1px solid transparent;
@@ -154,8 +145,8 @@
 		@include reduce-motion("transition");
 		height: auto;
 
-		&:not(:disabled):not([aria-disabled="true"]):hover,
-		&:not([aria-disabled="true"]):active {
+		&:hover:not(:disabled),
+		&:active:not(:disabled) {
 			color: #00a0d2;
 		}
 
@@ -218,11 +209,21 @@
 	}
 
 	&.has-icon {
+		padding: 6px; // Works for 24px icons. Smaller icons are vertically centered by flex alignments.
+
+		// Icon buttons are square.
+		min-width: $icon-button-size;
+		justify-content: center;
+
 		.dashicon {
 			display: inline-block;
 			flex: 0 0 auto;
 		}
 
+		&.has-text {
+			justify-content: left;
+		}
+
 		&.has-text svg {
 			margin-right: 8px;
 		}
diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
index 5d788720c6925..556af2f580ee9 100644
--- a/packages/components/src/dropdown-menu/style.scss
+++ b/packages/components/src/dropdown-menu/style.scss
@@ -4,7 +4,6 @@
 
 .components-dropdown-menu__menu {
 	width: 100%;
-	padding: ($grid-unit-10 - $border-width) 0;
 	font-family: $default-font;
 	font-size: $default-font-size;
 	line-height: $default-line-height;
@@ -72,28 +71,28 @@
 	}
 
 	.components-menu-group {
-		padding: $grid-size-large;
+		padding: $grid-unit-15;
 		margin-top: 0;
 		margin-bottom: 0;
-		margin-left: -$grid-size-large;
-		margin-right: -$grid-size-large;
+		margin-left: -$grid-unit-15;
+		margin-right: -$grid-unit-15;
 
 		&:first-child {
-			margin-top: -$grid-size-large;
+			margin-top: -$grid-unit-15;
 		}
 
 		&:last-child {
-			margin-bottom: -$grid-size-large;
+			margin-bottom: -$grid-unit-15;
 		}
 	}
 
 	.components-menu-group + .components-menu-group {
 		margin-top: 0;
-		border-top: $border-width solid $border-color;
-		padding: $grid-size-large;
+		border-top: $border-width solid $light-gray-secondary;
+		padding: $grid-unit-15;
 	}
 }
 
 .components-dropdown-menu__menu.no-icons  .components-menu-item__button.components-button {
-	padding: 0 $grid-size;
+	padding: 0 $grid-unit-15;
 }
diff --git a/packages/components/src/dropdown/style.scss b/packages/components/src/dropdown/style.scss
index bd86921fdd1de..5f4b0d355cc12 100644
--- a/packages/components/src/dropdown/style.scss
+++ b/packages/components/src/dropdown/style.scss
@@ -3,5 +3,5 @@
 }
 
 .components-dropdown__content .components-popover__content {
-	padding: $grid-unit-20;
+	padding: $grid-unit-15;
 }
diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss
index 5faff4b716f60..e0ab0cd8bf20a 100644
--- a/packages/components/src/menu-group/style.scss
+++ b/packages/components/src/menu-group/style.scss
@@ -1,11 +1,11 @@
 .components-menu-group + .components-menu-group {
 	margin-top: $grid-unit-10;
 	padding-top: $grid-unit-10;
-	border-top: $border-width solid $border-color;
+	border-top: $border-width solid $dark-gray-primary;
 }
 
 .components-menu-group__label {
 	margin-bottom: $grid-unit-10;
-	color: $dark-gray-300;
-	padding: 0 ($grid-unit-10 - $border-width);
+	color: $medium-gray-text;
+	padding: 0;
 }
diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
index 4630e43c7b0b1..e5b8878c01420 100644
--- a/packages/components/src/menu-item/style.scss
+++ b/packages/components/src/menu-item/style.scss
@@ -3,6 +3,7 @@
 	width: 100%;
 
 	// Target plugin icons that can have arbitrary classes by using an aggressive selector.
+	// @todo: is this still necessary?
 	.dashicon,
 	.components-menu-items__item-icon,
 	svg.components-menu-items__item-icon,
@@ -14,13 +15,6 @@
 		display: inline-block;
 		flex: 0 0 auto;
 	}
-
-	// This needs to be higher-specificity that the default button hover style.
-	&.components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):not(.is-tertiary):not(.is-primary):hover {
-		.components-menu-item__shortcut {
-			color: $dark-gray-600;
-		}
-	}
 }
 
 .components-menu-item__info-wrapper {
@@ -31,15 +25,15 @@
 .components-menu-item__info {
 	margin-top: $grid-unit-05;
 	font-size: $default-font-size - 1px;
-	color: $dark-gray-300;
+	color: $medium-gray-text;
 }
 
 .components-menu-item__shortcut {
 	align-self: center;
-	color: $dark-gray-300;
 	margin-right: 0;
 	margin-left: auto;
-	padding-left: $grid-unit-10;
+	padding-left: $grid-unit-15;
+	color: currentColor;
 
 	// Hide the keyboard shortcuts on mobile, because they aren't super-useful
 	// for most mobile users and it frees up screen space for any item
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 97622da58ebf9..7a4f9dd02b62d 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -5,6 +5,11 @@
 	width: 100%;
 	text-align: left;
 	margin: 0;
+	color: $dark-gray-primary;
+
+	// Some editor styles unset this.
+	-moz-font-smoothing: subpixel-antialiased;
+	-webkit-font-smoothing: subpixel-antialiased;
 
 	// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
 	@supports (position: sticky) {
@@ -85,8 +90,8 @@
 }
 
 .components-placeholder__fieldset .components-button {
-	margin-right: $grid-unit-10;
-	margin-bottom: $grid-unit-10; // If buttons wrap we need vertical space between.
+	margin-right: $grid-unit-15;
+	margin-bottom: $grid-unit-15; // If buttons wrap we need vertical space between.
 
 	&:last-child {
 		margin-bottom: 0;
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index 0ff8e938b1745..7d7b57c905857 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -232,7 +232,7 @@ const Popover = ( {
 	onKeyDown,
 	children,
 	className,
-	noArrow = false,
+	noArrow = true,
 	// Disable reason: We generate the `...contentProps` rest as remainder
 	// of props which aren't explicitly handled by this component.
 	/* eslint-disable no-unused-vars */
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index 35c35a25fb923..7ece47bcdb9d7 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -29,7 +29,7 @@ $arrow-size: 8px;
 		margin-left: 2px;
 
 		&::before {
-			border: $arrow-size solid $border-color;
+			border: $arrow-size solid $dark-gray-primary;
 		}
 
 		&::after {
@@ -143,10 +143,11 @@ $arrow-size: 8px;
 }
 
 .components-popover__content {
-	box-shadow: $shadow-popover;
-	border: $border-width solid $border-color;
-	background: $white;
 	height: 100%;
+	background: $white;
+	border: $border-width solid $light-gray-secondary;
+	box-shadow: $shadow-popover;
+	border-radius: $radius-block-ui;
 
 	.components-popover & {
 		position: absolute;
@@ -161,7 +162,7 @@ $arrow-size: 8px;
 		overflow-y: visible;
 		min-width: auto;
 		border: none;
-		border-top: $border-width solid $border-color;
+		border-top: $border-width solid $dark-gray-primary;
 	}
 
 	.components-popover[data-y-axis="top"] & {
diff --git a/packages/components/src/toolbar-button/style.scss b/packages/components/src/toolbar-button/style.scss
index b90b1bec49dfd..1f295c94a2c67 100644
--- a/packages/components/src/toolbar-button/style.scss
+++ b/packages/components/src/toolbar-button/style.scss
@@ -17,6 +17,11 @@
 		bottom: 10px;
 	}
 
+	// Hide focus rectangle on click.
+	&:active::before {
+		display: none;
+	}
+
 	&:not(:disabled).is-pressed[data-subscript]::after {
 		color: $white;
 	}
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
index 7baf306afb125..e4caa7fa2f0e0 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
+++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
@@ -5,10 +5,8 @@
 
 	@include break-medium() {
 		display: flex;
-		border-top: 0;
-		border-bottom: 0;
-		border-left: 0;
-		margin: -9px 10px -8px -10px;
-		padding: 9px 10px;
+		align-items: center;
+		border: none;
+		margin-right: $grid-unit-10;
 	}
 }
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index 5f8bc98dc3a90..1f2a669345584 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -11,11 +11,7 @@ import {
 	BlockNavigationDropdown,
 	ToolSelector,
 } from '@wordpress/block-editor';
-import {
-	TableOfContents,
-	EditorHistoryRedo,
-	EditorHistoryUndo,
-} from '@wordpress/editor';
+import { EditorHistoryRedo, EditorHistoryUndo } from '@wordpress/editor';
 
 function HeaderToolbar() {
 	const { hasFixedToolbar, showInserter, isTextModeEnabled } = useSelect(
@@ -50,11 +46,10 @@ function HeaderToolbar() {
 				position="bottom right"
 				showInserterHelpPanel
 			/>
+			<ToolSelector />
 			<EditorHistoryUndo />
 			<EditorHistoryRedo />
-			<TableOfContents hasOutlineItemsDisabled={ isTextModeEnabled } />
 			<BlockNavigationDropdown isDisabled={ isTextModeEnabled } />
-			<ToolSelector />
 			{ ( hasFixedToolbar || ! isLargeViewport ) && (
 				<div className="edit-post-header-toolbar__block-toolbar">
 					<BlockToolbar hideDragHandle />
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
index c5bc29c71447f..ebeb9789ae968 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -12,8 +12,7 @@
 	}
 
 	// Hide table of contents and block navigation on mobile.
-	.block-editor-block-navigation,
-	.table-of-contents {
+	.block-editor-block-navigation {
 		display: none;
 
 		@include break-small() {
@@ -26,11 +25,10 @@
 .edit-post-header-toolbar__block-toolbar {
 	// Stack toolbar below Editor Bar.
 	position: absolute;
-	top: $header-height + 1px;
+	top: $header-height + $border-width;
 	left: 0;
 	right: 0;
 	background: $white;
-	min-height: 36px;
 	border-bottom: $border-width solid $light-gray-500;
 
 	&:empty {
@@ -61,18 +59,15 @@
 		right: auto;
 		background: none;
 		border-bottom: none;
-		min-height: auto;
 
 		.is-sidebar-opened & {
 			right: auto;
 		}
 
-		.block-editor-block-toolbar {
-			margin: -($grid-unit-10 + $border-width) 0;
-		}
-
 		.block-editor-block-toolbar .components-toolbar {
-			padding: ($grid-unit-10 - $border-width - $border-width) 0;
+			$top-toolbar-padding: ($header-height - $grid-unit-60) / 2;
+			height: $header-height;
+			padding: $top-toolbar-padding 0;
 		}
 	}
 }
diff --git a/packages/edit-post/src/components/header/pinned-plugins/style.scss b/packages/edit-post/src/components/header/pinned-plugins/style.scss
index 95df46e7735d0..f8020c349699a 100644
--- a/packages/edit-post/src/components/header/pinned-plugins/style.scss
+++ b/packages/edit-post/src/components/header/pinned-plugins/style.scss
@@ -21,8 +21,8 @@
 	// Colorize plugin icons to ensure contrast and cohesion, but allow plugin developers to override.
 	.components-button:not(.is-pressed) svg,
 	.components-button:not(.is-pressed) svg * {
-		stroke: $dark-gray-500;
-		fill: $dark-gray-500;
+		stroke: $dark-gray-primary;
+		fill: $dark-gray-primary;
 		stroke-width: 0; // !important is omitted here, so stroke-only icons can override easily.
 	}
 
@@ -38,8 +38,8 @@
 
 	.components-button:hover svg,
 	.components-button:hover svg * {
-		stroke: $dark-gray-900 !important;
-		fill: $dark-gray-900 !important;
+		stroke: $blue-medium-focus !important;
+		fill: $blue-medium-focus !important;
 		stroke-width: 0; // !important is omitted here, so stroke-only icons can override easily.
 	}
 }
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index eca62def2940b..7ce50266e7409 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -1,6 +1,5 @@
 .edit-post-header {
 	height: $header-height;
-	padding: $grid-unit-05 2px;
 	background: $white;
 	display: flex;
 	flex-wrap: wrap;
@@ -10,15 +9,17 @@
 	// The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
 	max-width: 100vw;
 
+	// Padding.
+	padding: $grid-unit-15;
+	@include break-small() {
+		padding: $grid-unit-15 ($grid-unit-15 + 6px);
+	}
+
 	// Make toolbar sticky on larger breakpoints
 	@include break-zoomed-in {
 		flex-wrap: nowrap;
 	}
 
-	@include break-small {
-		padding: $grid-unit-10;
-	}
-
 	// Some browsers, most notably IE11, honor an older version of the flexbox spec
 	// which takes absolutely positioned items into account when calculating `space-between`.
 	// https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#abspos-flex-items
@@ -48,63 +49,52 @@
 	flex-wrap: wrap;
 }
 
-// @todo: this state should be refactored away once the G2 UI goes beyond the canvas.
-.edit-post-header__settings .components-button {
-	// Header toggle buttons.
-	&.is-pressed {
-		color: $white;
-		background: $dark-gray-500;
-	}
 
-	// The !important in this ruleset need to override the pile of :not() selectors used in the icon-button.
-	&.is-pressed:hover,
-	&.is-pressed:focus {
-		box-shadow: 0 0 0 $border-width $dark-gray-500, inset 0 0 0 $border-width $white !important;
-		color: $white !important;
-		background: $dark-gray-500 !important;
-	}
+/**
+ * Buttons in the Toolbar
+ */
 
-	// Make editor header bar buttons bigger to match Buttons.
-	&.editor-post-save-draft,
-	&.editor-post-switch-to-draft,
-	&.editor-post-preview,
-	&.editor-post-publish-button,
-	&.editor-post-publish-panel__toggle {
-		margin: 2px;
-		font-size: $default-font-size;
-	}
+.edit-post-header__toolbar {
+	.block-editor-inserter__toggle {
+		margin-right: $grid-unit-10;
 
-	&.editor-post-save-draft,
-	&.editor-post-switch-to-draft {
-		padding: 0 5px;
+		// Special dimensions for this button.
+		min-width: 32px;
+		height: 32px;
 
-		@include break-small() {
-			padding: 0 12px;
+		// Spot color button.
+		background-color: $blue-medium-focus;
+		color: $white;
+		border-radius: $radius-block-ui;
+
+		&:hover {
+			color: $white;
+			background-color: rgba($blue-medium-focus, 0.8);
 		}
 	}
+}
 
-	// These paddings actually duplicate existing rules from button component.
-	// But they are duplicated so as to provide smaller paddings to fit the buttons on mobile.
-	&.editor-post-preview,
-	&.editor-post-publish-button,
-	&.editor-post-publish-panel__toggle {
-		padding-left: 5px;
-		padding-right: 5px;
 
-		@include break-small() {
-			padding-left: 12px;
-			padding-right: 12px;
-		}
+.edit-post-header__settings {
+	// Header toggle buttons.
+	.components-button.is-pressed {
+		color: $white;
+		background: $dark-gray-primary;
 	}
 
-	@include break-medium() {
-		&.editor-post-preview {
-			margin: 0 3px 0 12px;
-		}
+	// Adjust button paddings to scale better to mobile.
+	.components-button.editor-post-save-draft,
+	.editor-post-saved-state,
+	.components-button.editor-post-switch-to-draft,
+	.components-button.editor-post-preview,
+	.components-button.editor-post-publish-button,
+	.components-button.editor-post-publish-panel__toggle {
+		padding: 0 6px;
+		margin-right: $grid-unit-05;
 
-		&.editor-post-publish-button,
-		&.editor-post-publish-panel__toggle {
-			margin: 0 12px 0 3px;
+		@include break-small() {
+			padding: 0 12px;
+			margin-right: $grid-unit-10;
 		}
 	}
 }
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 3ac151c0e20ec..02a2f8df2cd54 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -13,6 +13,7 @@ import {
 	EditorNotices,
 	PostPublishPanel,
 	EditorKeyboardShortcutsRegister,
+	TableOfContents,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
@@ -67,6 +68,7 @@ function Layout() {
 		previousShortcut,
 		nextShortcut,
 		hasBlockSelected,
+		isTextModeEnabled,
 	} = useSelect( ( select ) => {
 		return {
 			hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive(
@@ -94,9 +96,8 @@ function Layout() {
 			nextShortcut: select(
 				'core/keyboard-shortcuts'
 			).getAllShortcutRawKeyCombinations( 'core/edit-post/next-region' ),
-			hasBlockSelected: select(
-				'core/block-editor'
-			).getBlockSelectionStart(),
+			isTextModeEnabled:
+				select( 'core/edit-post' ).getEditorMode() === 'text',
 		};
 	}, [] );
 	const sidebarIsOpened =
@@ -167,6 +168,12 @@ function Layout() {
 						mode === 'visual' && (
 							<div className="edit-post-layout__footer">
 								<BlockBreadcrumb />
+
+								<TableOfContents
+									hasOutlineItemsDisabled={
+										isTextModeEnabled
+									}
+								/>
 							</div>
 						)
 					}
@@ -184,10 +191,10 @@ function Layout() {
 								}
 							/>
 						) : (
-							<div className="edit-post-layout__toogle-publish-panel">
+							<div className="edit-post-toggle-publish-panel">
 								<Button
 									isSecondary
-									className="edit-post-layout__toogle-publish-panel-button"
+									className="edit-post-toggle-publish-panel__button"
 									onClick={ togglePublishSidebar }
 									aria-expanded={ false }
 								>
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 835dd83da3523..5c8b718563c57 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -67,27 +67,28 @@
 	padding: 10px 10px 10px 0;
 }
 
-.edit-post-layout__toogle-publish-panel-button,
-.edit-post-layout__toogle-sidebar-panel-button {
+.edit-post-layout__toogle-publish-panel-button.components-button,
+.edit-post-layout__toogle-sidebar-panel-button.components-button {
 	width: auto;
 	height: auto;
 	display: block;
 	font-size: 14px;
 	font-weight: 600;
 	margin: 0 0 0 auto;
-	padding: 15px 23px 14px;
+	padding: $grid-unit-20 $grid-unit-30;
 	line-height: normal;
 	text-decoration: none;
 	outline: none;
-	background: #f1f1f1;
-	color: theme(secondary);
+	background: $white;
+	color: $theme-color;
 
 	&:focus {
 		position: fixed;
 		top: auto;
-		right: 10px;
-		bottom: 10px;
+		right: $grid-unit-60;
+		bottom: $grid-unit-60;
 		left: auto;
+		box-shadow: 0 0 0 2px $blue-medium-focus, $shadow-modal;
 	}
 }
 
@@ -100,8 +101,25 @@
 		display: flex;
 		background: $white;
 		height: $footer-height;
-		padding: 0 $grid-unit-10;
 		align-items: center;
 		font-size: $default-font-size;
+		padding: 0 ($grid-unit-15 + 6px);
+	}
+
+	.table-of-contents {
+		margin: auto 0 0 auto;
+	}
+
+	.table-of-contents .components-button {
+		height: $icon-button-size-small;
+		padding: 0;
+
+		&:focus {
+			box-shadow: inset 0 0 0 2px color($theme-color);
+
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 1px solid transparent;
+
+		}
 	}
 }
diff --git a/packages/edit-post/src/components/preview-options/style.scss b/packages/edit-post/src/components/preview-options/style.scss
index b968c85672363..dd50e1eaa006d 100644
--- a/packages/edit-post/src/components/preview-options/style.scss
+++ b/packages/edit-post/src/components/preview-options/style.scss
@@ -8,7 +8,7 @@
 	border-radius: 0;
 	display: flex;
 	justify-content: space-between;
-	height: $block-controls-height - 2; // Needs to be 2px smaller to account for the box-shadow.
+	height: $block-toolbar-height - 2; // Needs to be 2px smaller to account for the box-shadow.
 	padding-top: 0;
 	padding-bottom: 0;
 
diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss
index 431aa14f4b3e3..5411341b547e3 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/style.scss
+++ b/packages/edit-post/src/components/sidebar/settings-header/style.scss
@@ -40,7 +40,7 @@
 	}
 
 	&.is-active {
-		box-shadow: inset 0 -3px theme(outlines);
+		box-shadow: inset 0 -4px theme(outlines);
 		font-weight: 600;
 		position: relative;
 
@@ -52,7 +52,7 @@
 			bottom: 1px;
 			right: 0;
 			left: 0;
-			border-bottom: 3px solid transparent;
+			border-bottom: 4px solid transparent;
 		}
 	}
 
diff --git a/packages/edit-post/src/components/sidebar/sidebar-header/style.scss b/packages/edit-post/src/components/sidebar/sidebar-header/style.scss
index a5b6e5eed2895..0baad3952d836 100644
--- a/packages/edit-post/src/components/sidebar/sidebar-header/style.scss
+++ b/packages/edit-post/src/components/sidebar/sidebar-header/style.scss
@@ -18,8 +18,6 @@
 .components-panel__header.edit-post-sidebar-header {
 	padding-right: $grid-unit-05;
 
-	background: $light-gray-200;
-
 	.components-button.has-icon {
 		display: none;
 		margin-left: auto;
diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss
index 728662551b1f3..4188b0a21f343 100644
--- a/packages/edit-post/src/components/text-editor/style.scss
+++ b/packages/edit-post/src/components/text-editor/style.scss
@@ -35,7 +35,7 @@
 	}
 
 	// Make room for toolbar.
-	padding-top: $block-controls-height + $grid-unit-10;
+	padding-top: $block-toolbar-height + $grid-unit-10;
 }
 
 // Exit Code Editor toolbar.
@@ -44,8 +44,8 @@
 	top: $grid-unit-10;
 	left: 0;
 	right: 0;
-	height: $block-controls-height;
-	line-height: $block-controls-height;
+	height: $block-toolbar-height;
+	line-height: $block-toolbar-height;
 	padding: 0 $grid-unit-10 0 $grid-unit-20;
 	display: flex;
 
diff --git a/packages/editor/src/components/post-saved-state/style.scss b/packages/editor/src/components/post-saved-state/style.scss
index e8741b314ce6a..b298968a3c345 100644
--- a/packages/editor/src/components/post-saved-state/style.scss
+++ b/packages/editor/src/components/post-saved-state/style.scss
@@ -1,9 +1,9 @@
 .editor-post-saved-state {
 	display: flex;
 	align-items: center;
-	width: $icon-button-size - 8px;
+	width: $icon-button-size - $grid-unit-10;
 	padding: #{ $grid-unit-05 * 3 } $grid-unit-05;
-	color: $dark-gray-500;
+	color: $medium-gray-text;
 	overflow: hidden;
 	white-space: nowrap;
 
@@ -24,8 +24,3 @@
 		}
 	}
 }
-
-// This needs specificity to override inherited styles.
-.edit-post-header .edit-post-header__settings .components-button.editor-post-save-draft {
-	margin: 0;
-}
diff --git a/packages/editor/src/editor-styles.scss b/packages/editor/src/editor-styles.scss
index 978b34a61deaf..743780bef1024 100644
--- a/packages/editor/src/editor-styles.scss
+++ b/packages/editor/src/editor-styles.scss
@@ -12,7 +12,7 @@ body {
 	font-family: $editor-font;
 	font-size: $editor-font-size;
 	line-height: $editor-line-height;
-	color: $dark-gray-900;
+	color: $dark-gray-primary;
 }
 
 /* Headings */