From fe15ce342588d203ebe8b514cc8185775b2acef5 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 16 Jun 2020 10:13:19 +0200
Subject: [PATCH 01/13] Improve buttongroup.

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

diff --git a/packages/components/src/button-group/style.scss b/packages/components/src/button-group/style.scss
index 8ac03a2c21e75..aef701d6194a9 100644
--- a/packages/components/src/button-group/style.scss
+++ b/packages/components/src/button-group/style.scss
@@ -4,8 +4,8 @@
 	.components-button {
 		border-radius: 0;
 		display: inline-flex;
-		color: var(--wp-admin-theme-color);
-		box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+		color: $dark-gray-primary;
+		box-shadow: inset 0 0 0 $border-width $dark-gray-primary;
 
 		& + .components-button {
 			margin-left: -1px;
@@ -29,7 +29,7 @@
 
 		// The active button should look pressed.
 		&.is-primary {
-			box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 $border-width $dark-gray-primary;
 		}
 	}
 }

From a83138601f53ff655f048b09ab27816700f309b4 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 16 Jun 2020 11:44:07 +0200
Subject: [PATCH 02/13] Polish sidebar header, make close align.

---
 packages/base-styles/_variables.scss           |  2 +-
 packages/components/src/panel/style.scss       |  8 ++++----
 .../sidebar/last-revision/style.scss           |  3 ++-
 .../sidebar/settings-header/style.scss         | 18 ++----------------
 .../src/components/sidebar/style.scss          | 14 ++++++++++++--
 .../components/post-last-revision/style.scss   |  2 +-
 .../src/components/post-publish-panel/index.js |  4 ++--
 packages/icons/src/index.js                    |  1 +
 packages/icons/src/library/close-small.js      | 12 ++++++++++++
 .../complementary-area-header/index.js         |  4 ++--
 .../complementary-area-header/style.scss       |  2 +-
 11 files changed, 40 insertions(+), 30 deletions(-)
 create mode 100644 packages/icons/src/library/close-small.js

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index b0286b7587e1c..07867513d6e53 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -41,7 +41,7 @@ $grid-unit-60: 6 * $grid-unit;		// 48px
 $icon-size: 24px;
 $button-size: 36px;
 $button-size-small: 24px;
-$panel-padding: 16px;
+$panel-padding: $grid-unit-20; // @todo: retire this one.
 $header-height: 60px;
 $panel-header-height: 50px;
 $admin-bar-height: 32px;
diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
index ed1d293600f81..cef162f8d70cc 100644
--- a/packages/components/src/panel/style.scss
+++ b/packages/components/src/panel/style.scss
@@ -34,8 +34,8 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	padding: 0 $panel-padding;
-	height: 50px;
+	padding: 0 $grid-unit-20;
+	height: $grid-unit-60;
 	border-top: $border-width solid $light-gray-500;
 	border-bottom: $border-width solid $light-gray-500;
 
@@ -76,12 +76,12 @@
 
 .components-panel__body-toggle.components-button {
 	position: relative;
-	padding: 15px;
+	padding: $grid-unit-20;
 	outline: none;
 	width: 100%;
 	font-weight: 600;
 	text-align: left;
-	color: $dark-gray-900;
+	color: $dark-gray-primary;
 	border: none;
 	box-shadow: none;
 	transition: 0.1s background ease-in-out;
diff --git a/packages/edit-post/src/components/sidebar/last-revision/style.scss b/packages/edit-post/src/components/sidebar/last-revision/style.scss
index 54c14ec4fdc06..1b2e4357071bb 100644
--- a/packages/edit-post/src/components/sidebar/last-revision/style.scss
+++ b/packages/edit-post/src/components/sidebar/last-revision/style.scss
@@ -1,8 +1,9 @@
 // Needs specificity, because this panel is just a button
 .components-panel__body.is-opened.edit-post-last-revision__panel {
 	padding: 0;
+	height: $grid-unit-60;
 }
 
 .editor-post-last-revision__title.components-button {
-	padding: #{ $panel-padding - 3px } $panel-padding;	// subtract extra height of dashicon
+	padding: $panel-padding;
 }
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 cb23ee73d5f7d..22efe4ccc68b4 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/style.scss
+++ b/packages/edit-post/src/components/sidebar/settings-header/style.scss
@@ -1,20 +1,6 @@
-.components-panel__header.edit-post-sidebar__panel-tabs {
-	justify-content: flex-start;
-	padding-left: 0;
-	padding-right: $grid-unit-05;
-	border-top: 0;
-
-	ul {
-		display: flex;
-	}
-	li {
-		margin: 0;
-	}
-}
-
 .components-button.edit-post-sidebar__panel-tab {
 	border-radius: 0;
-	height: 50px - $border-width;
+	height: $grid-unit-60;
 	background: transparent;
 	border: none;
 	box-shadow: none;
@@ -23,7 +9,7 @@
 	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: 400;
-	color: $dark-gray-900;
+	color: $dark-gray-primary;
 
 	// This pseudo-element "duplicates" the tab label and sets the text to bold.
 	// This ensures that the tab doesn't change width when selected.
diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss
index d3be8c5f30caa..7b10eaec0d224 100644
--- a/packages/edit-post/src/components/sidebar/style.scss
+++ b/packages/edit-post/src/components/sidebar/style.scss
@@ -1,13 +1,23 @@
 .components-panel__header.edit-post-sidebar__panel-tabs {
 	justify-content: flex-start;
 	padding-left: 0;
-	padding-right: $grid-unit-05;
+	padding-right: $grid-unit-20;
 	border-top: 0;
 	margin-top: 0;
 
+	ul {
+		display: flex;
+	}
+	li {
+		margin: 0;
+	}
+
 	.components-button.has-icon {
 		display: none;
-		margin-left: auto;
+		margin: 0 0 0 auto;
+		padding: 0;
+		min-width: $icon-size;
+		height: $icon-size;
 
 		@include break-medium() {
 			display: flex;
diff --git a/packages/editor/src/components/post-last-revision/style.scss b/packages/editor/src/components/post-last-revision/style.scss
index 544183840e91b..6d44e617e230b 100644
--- a/packages/editor/src/components/post-last-revision/style.scss
+++ b/packages/editor/src/components/post-last-revision/style.scss
@@ -8,7 +8,7 @@
 }
 
 .components-button.editor-post-last-revision__title {
-	height: auto;
+	height: 100%;
 
 	&:hover,
 	&:active {
diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js
index 232d23f5cc0a9..ade6a3a552ecc 100644
--- a/packages/editor/src/components/post-publish-panel/index.js
+++ b/packages/editor/src/components/post-publish-panel/index.js
@@ -17,7 +17,7 @@ import {
 } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { close } from '@wordpress/icons';
+import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -96,7 +96,7 @@ export class PostPublishPanel extends Component {
 					) }
 					<Button
 						onClick={ onClose }
-						icon={ close }
+						icon={ closeSmall }
 						label={ __( 'Close panel' ) }
 					/>
 				</div>
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index c47630e3b657e..9396430cfc5b9 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -32,6 +32,7 @@ export { default as chevronUp } from './library/chevron-up';
 export { default as classic } from './library/classic';
 export { default as closeCircleFilled } from './library/close-circle-filled';
 export { default as close } from './library/close';
+export { default as closeSmall } from './library/close-small';
 export { default as cloudUpload } from './library/cloud-upload';
 export { default as cloud } from './library/cloud';
 export { default as code } from './library/code';
diff --git a/packages/icons/src/library/close-small.js b/packages/icons/src/library/close-small.js
new file mode 100644
index 0000000000000..657a8d23c22b8
--- /dev/null
+++ b/packages/icons/src/library/close-small.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const closeSmall = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z" />
+	</SVG>
+);
+
+export default closeSmall;
diff --git a/packages/interface/src/components/complementary-area-header/index.js b/packages/interface/src/components/complementary-area-header/index.js
index 71ee4bb80f880..ca4e4ca5f07c4 100644
--- a/packages/interface/src/components/complementary-area-header/index.js
+++ b/packages/interface/src/components/complementary-area-header/index.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { close } from '@wordpress/icons';
+import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -20,7 +20,7 @@ const ComplementaryAreaHeader = ( {
 	toggleButtonProps,
 } ) => {
 	const toggleButton = (
-		<ComplementaryAreaToggle icon={ close } { ...toggleButtonProps } />
+		<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />
 	);
 	return (
 		<>
diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss
index 7808bc904ad23..cf868690f4aa4 100644
--- a/packages/interface/src/components/complementary-area-header/style.scss
+++ b/packages/interface/src/components/complementary-area-header/style.scss
@@ -15,8 +15,8 @@
 }
 
 .interface-complementary-area-header {
+	background: $white;
 	padding-right: $grid-unit-05;
-	background: $light-gray-200;
 
 	.components-button.has-icon {
 		display: none;

From 3a1df627486ff9c0019b4b8f441c7b31eeab3e63 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 16 Jun 2020 12:15:48 +0200
Subject: [PATCH 03/13] Dark text color in sidebar.

---
 .../interface/src/components/complementary-area/style.scss    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss
index 30ba90853102b..49fc842e10c0f 100644
--- a/packages/interface/src/components/complementary-area/style.scss
+++ b/packages/interface/src/components/complementary-area/style.scss
@@ -1,6 +1,6 @@
 .interface-complementary-area {
 	background: $white;
-	color: $dark-gray-500;
+	color: $dark-gray-primary;
 	overflow: visible;
 
 	@include break-small() {
@@ -55,7 +55,7 @@
 	h2,
 	h3 {
 		font-size: $default-font-size;
-		color: $dark-gray-500;
+		color: $dark-gray-primary;
 		margin-bottom: 1.5em;
 	}
 

From f77174af68c8438fc5a6d986e72b80f0aac76456 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 16 Jun 2020 12:21:57 +0200
Subject: [PATCH 04/13] Polish select control.

---
 packages/components/src/custom-select-control/style.scss | 6 +++---
 packages/components/src/font-size-picker/style.scss      | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss
index 332d5464d24aa..07ae58ed0b5ce 100644
--- a/packages/components/src/custom-select-control/style.scss
+++ b/packages/components/src/custom-select-control/style.scss
@@ -4,7 +4,7 @@
 
 .components-custom-select-control__label {
 	display: block;
-	margin-bottom: 5px;
+	margin-bottom: $grid-unit-10;
 }
 
 .components-custom-select-control__button {
@@ -26,9 +26,9 @@
 		box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color);
 	}
 
-	&-icon {
+	.components-custom-select-control__button-icon {
 		height: 100%;
-		padding: 0 4px;
+		padding: 0;
 		position: absolute;
 		right: 0;
 		top: 0;
diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss
index d7a857aa6a2ed..8cb8548aac22b 100644
--- a/packages/components/src/font-size-picker/style.scss
+++ b/packages/components/src/font-size-picker/style.scss
@@ -14,7 +14,7 @@
 		margin-bottom: 0;
 		margin-left: 0;
 		margin-right: $grid-unit-10;
-		margin-top: 5px;
+		margin-top: $grid-unit-10;
 		width: 54px;
 
 		// Show the reset button as disabled until a value is entered.
@@ -37,7 +37,7 @@
 
 	.components-color-palette__clear {
 		height: 30px;
-		margin-top: 23px;
+		margin-top: 26px;
 	}
 }
 

From db11e43beae4f3dc030773dd5cf83c1ecd05d064 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 16 Jun 2020 12:30:57 +0200
Subject: [PATCH 05/13] Try, remove i/o from toggle.

---
 packages/components/src/form-toggle/index.js  | 29 -------------
 .../components/src/form-toggle/style.scss     | 43 -------------------
 2 files changed, 72 deletions(-)

diff --git a/packages/components/src/form-toggle/index.js b/packages/components/src/form-toggle/index.js
index 3dfeaf375cf19..053addfe32540 100644
--- a/packages/components/src/form-toggle/index.js
+++ b/packages/components/src/form-toggle/index.js
@@ -4,11 +4,6 @@
 import classnames from 'classnames';
 import { noop } from 'lodash';
 
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/primitives';
-
 function FormToggle( { className, checked, id, onChange = noop, ...props } ) {
 	const wrapperClasses = classnames( 'components-form-toggle', className, {
 		'is-checked': checked,
@@ -26,30 +21,6 @@ function FormToggle( { className, checked, id, onChange = noop, ...props } ) {
 			/>
 			<span className="components-form-toggle__track"></span>
 			<span className="components-form-toggle__thumb"></span>
-			{ checked ? (
-				<SVG
-					className="components-form-toggle__on"
-					width="2"
-					height="6"
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 2 6"
-				>
-					<Path d="M0 0h2v6H0z" />
-				</SVG>
-			) : (
-				<SVG
-					className="components-form-toggle__off"
-					width="6"
-					height="6"
-					aria-hidden="true"
-					role="img"
-					focusable="false"
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 6 6"
-				>
-					<Path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z" />
-				</SVG>
-			) }
 		</span>
 	);
 }
diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
index f47777a83b14f..1c082d87000e8 100644
--- a/packages/components/src/form-toggle/style.scss
+++ b/packages/components/src/form-toggle/style.scss
@@ -6,24 +6,6 @@ $toggle-border-width: 2px;
 	position: relative;
 	display: inline-block;
 
-	// On/Off icon indicators.
-	.components-form-toggle__on,
-	.components-form-toggle__off {
-		position: absolute;
-		top: $toggle-border-width * 3;
-		box-sizing: border-box;
-	}
-
-	.components-form-toggle__off {
-		color: $dark-gray-300;
-		fill: currentColor;
-		right: $toggle-border-width * 3;
-	}
-
-	.components-form-toggle__on {
-		left: $toggle-border-width * 3 + 2px; // Indent 2px extra because icon is thinner.
-	}
-
 	// Unchecked state.
 	.components-form-toggle__track {
 		content: "";
@@ -90,11 +72,6 @@ $toggle-border-width: 2px;
 			border-width: 0; // Zero out the border color to make the thumb invisible in Windows High Contrast Mode.
 			transform: translateX($toggle-width - ($toggle-border-width * 4) - ($toggle-height - ($toggle-border-width * 4)));
 		}
-
-		&::before {
-			background-color: var(--wp-admin-theme-color);
-			border: $toggle-border-width solid var(--wp-admin-theme-color);
-		}
 	}
 
 	// Disabled state:
@@ -126,23 +103,3 @@ $toggle-border-width: 2px;
 		content: "";
 	}
 }
-
-// Ensure on indicator works in normal and Windows high contrast mode both.
-.components-form-toggle .components-form-toggle__on {
-	// Outlines show up in windows high contrast mode.
-	outline: $border-width solid transparent;
-	outline-offset: -1px;
-
-	// This colors the indicator black, then inverts it for normal mode.
-	border: $border-width solid $black;
-	filter: invert(100%) contrast(500%); // This makes the icon white for normal mode, and it makes it dark blue in Windows High Contrast Mode.
-}
-
-@supports (-ms-high-contrast-adjust: auto) {
-	// Edge stacks outlines on top of the SVG itself, and when showing them in high contrast mode it means they get inverted again.
-	// Therefore, show a different style for the on indicator only in Edge and IE11.
-	.components-form-toggle .components-form-toggle__on {
-		filter: none;
-		border: $border-width solid $white;
-	}
-}

From 91bad03d639987f71fcfa8b9dde53425e40fcffd Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 16 Jun 2020 12:38:24 +0200
Subject: [PATCH 06/13] Retire $panel-padding variable.

---
 packages/base-styles/_variables.scss                 |  1 -
 .../src/components/block-compare/style.scss          |  4 ++--
 .../src/components/block-inspector/style.scss        |  2 +-
 .../src/components/inserter/style.native.scss        |  6 +++---
 .../src/components/url-popover/style.scss            |  2 +-
 packages/block-library/src/button/editor.native.scss |  2 +-
 .../block-library/src/button/rich-text.android.scss  |  6 +++---
 packages/block-library/src/button/rich-text.ios.scss |  2 +-
 .../components/src/color-palette/style.native.scss   |  6 +++---
 .../components/src/color-picker/style.native.scss    |  8 ++++----
 packages/components/src/font-size-picker/style.scss  |  2 +-
 .../src/mobile/bottom-sheet/styles.native.scss       | 12 ++++++------
 .../src/mobile/color-settings/style.native.scss      |  2 +-
 .../components/src/mobile/picker/styles.native.scss  |  8 ++++----
 .../src/mobile/segmented-control/style.native.scss   |  4 ++--
 packages/components/src/panel/style.scss             |  4 ++--
 packages/components/src/popover/style.scss           |  2 +-
 .../src/components/manage-blocks-modal/style.scss    |  2 +-
 .../src/components/sidebar/last-revision/style.scss  |  2 +-
 .../editor/src/components/post-taxonomies/style.scss |  2 +-
 20 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 07867513d6e53..6e2094d39d705 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -41,7 +41,6 @@ $grid-unit-60: 6 * $grid-unit;		// 48px
 $icon-size: 24px;
 $button-size: 36px;
 $button-size-small: 24px;
-$panel-padding: $grid-unit-20; // @todo: retire this one.
 $header-height: 60px;
 $panel-header-height: 50px;
 $admin-bar-height: 32px;
diff --git a/packages/block-editor/src/components/block-compare/style.scss b/packages/block-editor/src/components/block-compare/style.scss
index f1be4723ce4d6..4e275fbafd731 100644
--- a/packages/block-editor/src/components/block-compare/style.scss
+++ b/packages/block-editor/src/components/block-compare/style.scss
@@ -14,14 +14,14 @@
 
 .block-editor-block-compare__wrapper {
 	display: flex;
-	padding-bottom: $panel-padding;
+	padding-bottom: $grid-unit-20;
 
 	> div {
 		display: flex;
 		justify-content: space-between;
 		flex-direction: column;
 		width: 50%;
-		padding: 0 $panel-padding 0 0;
+		padding: 0 $grid-unit-20 0 0;
 		min-width: 200px;
 
 		button {
diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
index f1dd6839a257d..64ff2aa53ab6f 100644
--- a/packages/block-editor/src/components/block-inspector/style.scss
+++ b/packages/block-editor/src/components/block-inspector/style.scss
@@ -20,6 +20,6 @@
 	display: block;
 	font-size: $default-font-size;
 	background: $white;
-	padding: ($panel-padding * 2) $panel-padding;
+	padding: ($grid-unit-20 * 2) $grid-unit-20;
 	text-align: center;
 }
diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss
index 65f73dbc47348..bfb45082c8f8f 100644
--- a/packages/block-editor/src/components/inserter/style.native.scss
+++ b/packages/block-editor/src/components/inserter/style.native.scss
@@ -21,8 +21,8 @@
 	flex-direction: column;
 	justify-content: flex-start;
 	align-items: center;
-	padding-left: $panel-padding / 2;
-	padding-right: $panel-padding / 2;
+	padding-left: $grid-unit-20 / 2;
+	padding-right: $grid-unit-20 / 2;
 	padding-top: 0;
 	padding-bottom: 0;
 }
@@ -76,5 +76,5 @@
 }
 
 .columnPadding {
-	padding: $panel-padding;
+	padding: $grid-unit-20;
 }
diff --git a/packages/block-editor/src/components/url-popover/style.scss b/packages/block-editor/src/components/url-popover/style.scss
index 0250cb99e9415..47294b34712a5 100644
--- a/packages/block-editor/src/components/url-popover/style.scss
+++ b/packages/block-editor/src/components/url-popover/style.scss
@@ -61,7 +61,7 @@
 
 .block-editor-url-popover__settings {
 	display: block;
-	padding: $panel-padding;
+	padding: $grid-unit-20;
 	border-top: $border-width solid $light-gray-500;
 }
 
diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss
index 47f0b3669d6cd..64521de2d4ddc 100644
--- a/packages/block-library/src/button/editor.native.scss
+++ b/packages/block-library/src/button/editor.native.scss
@@ -29,7 +29,7 @@
 	border-radius: $border-width * 4;
 	padding: $block-spacing;
 	border-width: $border-width;
-	margin: 2 * $panel-padding;
+	margin: 2 * $grid-unit-20;
 	background-color: $button-fallback-bg;
 	color: $white;
 }
diff --git a/packages/block-library/src/button/rich-text.android.scss b/packages/block-library/src/button/rich-text.android.scss
index 47f6d2e2ae8cb..66685250f76e3 100644
--- a/packages/block-library/src/button/rich-text.android.scss
+++ b/packages/block-library/src/button/rich-text.android.scss
@@ -1,6 +1,6 @@
 .richText {
 	background-color: transparent;
-	padding-left: $panel-padding;
-	padding-right: $panel-padding;
-	margin: 10px $panel-padding;
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
+	margin: 10px $grid-unit-20;
 }
diff --git a/packages/block-library/src/button/rich-text.ios.scss b/packages/block-library/src/button/rich-text.ios.scss
index 0c7d60695ba76..27ec62345fa26 100644
--- a/packages/block-library/src/button/rich-text.ios.scss
+++ b/packages/block-library/src/button/rich-text.ios.scss
@@ -1,4 +1,4 @@
 .richText {
-	margin: 10px $panel-padding;
+	margin: 10px $grid-unit-20;
 	background-color: transparent;
 }
diff --git a/packages/components/src/color-palette/style.native.scss b/packages/components/src/color-palette/style.native.scss
index 002228f19c9e8..af618dfafded2 100644
--- a/packages/components/src/color-palette/style.native.scss
+++ b/packages/components/src/color-palette/style.native.scss
@@ -1,17 +1,17 @@
 .contentContainer {
 	flex-direction: row;
-	padding: 0 $panel-padding;
+	padding: 0 $grid-unit-20;
 }
 
 .container {
-	padding-bottom: $panel-padding;
+	padding-bottom: $grid-unit-20;
 }
 
 .verticalSeparator {
 	border-width: $border-width / 2;
 	border-color: $light-gray-400;
 	height: 38px;
-	margin-right: $panel-padding / 2;
+	margin-right: $grid-unit-20 / 2;
 	align-self: center;
 }
 
diff --git a/packages/components/src/color-picker/style.native.scss b/packages/components/src/color-picker/style.native.scss
index 336e34a17e1d3..068b20273c1f2 100644
--- a/packages/components/src/color-picker/style.native.scss
+++ b/packages/components/src/color-picker/style.native.scss
@@ -4,8 +4,8 @@
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	padding: $panel-padding;
-	margin-top: $panel-padding;
+	padding: $grid-unit-20;
+	margin-top: $grid-unit-20;
 	flex-wrap: wrap;
 }
 
@@ -43,8 +43,8 @@
 }
 
 .picker {
-	padding: $panel-padding;
-	border-radius: $panel-padding / 2;
+	padding: $grid-unit-20;
+	border-radius: $grid-unit-20 / 2;
 	height: 200px;
 }
 
diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss
index 8cb8548aac22b..a6e698e9e0ce3 100644
--- a/packages/components/src/font-size-picker/style.scss
+++ b/packages/components/src/font-size-picker/style.scss
@@ -1,5 +1,5 @@
 .components-font-size-picker__controls {
-	max-width: $sidebar-width - ( 2 * $panel-padding );
+	max-width: $sidebar-width - ( 2 * $grid-unit-20 );
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss
index bcb89d6a312e5..50c8693eb8ee0 100644
--- a/packages/components/src/mobile/bottom-sheet/styles.native.scss
+++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss
@@ -27,7 +27,7 @@
 }
 
 .emptyHeader {
-	margin-top: $panel-padding / 2;
+	margin-top: $grid-unit-20 / 2;
 }
 
 
@@ -174,9 +174,9 @@
 // Color Cell
 
 .colorCircle {
-	width: 2 * $panel-padding;
-	height: 2 * $panel-padding;
-	border-radius: $panel-padding;
+	width: 2 * $grid-unit-20;
+	height: 2 * $grid-unit-20;
+	border-radius: $grid-unit-20;
 }
 
 // Radio Cell
@@ -194,8 +194,8 @@
 .bottomSheetHeader {
 	flex-direction: row;
 	align-items: center;
-	padding-right: $panel-padding;
-	padding-left: $panel-padding;
+	padding-right: $grid-unit-20;
+	padding-left: $grid-unit-20;
 	min-height: 44px;
 }
 
diff --git a/packages/components/src/mobile/color-settings/style.native.scss b/packages/components/src/mobile/color-settings/style.native.scss
index 1aa05378a0810..87480529fcd2c 100644
--- a/packages/components/src/mobile/color-settings/style.native.scss
+++ b/packages/components/src/mobile/color-settings/style.native.scss
@@ -18,7 +18,7 @@
 	justify-content: center;
 	align-items: center;
 	align-content: center;
-	padding: 12px $panel-padding;
+	padding: 12px $grid-unit-20;
 }
 
 .colorIndicator {
diff --git a/packages/components/src/mobile/picker/styles.native.scss b/packages/components/src/mobile/picker/styles.native.scss
index 9a271b80951ef..fea1095b0a471 100644
--- a/packages/components/src/mobile/picker/styles.native.scss
+++ b/packages/components/src/mobile/picker/styles.native.scss
@@ -1,8 +1,8 @@
 .separator {
-	margin-top: $panel-padding / 2;
-	margin-bottom: $panel-padding / 2;
-	margin-left: -$panel-padding;
-	margin-right: -$panel-padding;
+	margin-top: $grid-unit-20 / 2;
+	margin-bottom: $grid-unit-20 / 2;
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
 	height: $border-width;
 	background-color: $light-gray-400;
 }
diff --git a/packages/components/src/mobile/segmented-control/style.native.scss b/packages/components/src/mobile/segmented-control/style.native.scss
index abacc818804b1..f7a5ed392dba7 100644
--- a/packages/components/src/mobile/segmented-control/style.native.scss
+++ b/packages/components/src/mobile/segmented-control/style.native.scss
@@ -7,7 +7,7 @@ $border-radius-ios: 7px;
 
 .segment {
 	border-radius: $segment-height / 2;
-	padding: 6px $panel-padding;
+	padding: 6px $grid-unit-20;
 	align-items: center;
 	justify-content: center;
 	margin-top: $segment-spacing + $border-width;
@@ -91,7 +91,7 @@ $border-radius-ios: 7px;
 .row {
 	flex-direction: row;
 	align-items: center;
-	padding: $panel-padding / 2 $panel-padding;
+	padding: $grid-unit-20 / 2 $grid-unit-20;
 }
 
 .flex {
diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
index cef162f8d70cc..cb16b6c5adc63 100644
--- a/packages/components/src/panel/style.scss
+++ b/packages/components/src/panel/style.scss
@@ -26,7 +26,7 @@
 	}
 
 	&.is-opened {
-		padding: $panel-padding;
+		padding: $grid-unit-20;
 	}
 }
 
@@ -63,7 +63,7 @@
 	@include reduce-motion("transition");
 }
 .components-panel__body.is-opened > .components-panel__body-title {
-	margin: -1 * $panel-padding;
+	margin: -1 * $grid-unit-20;
 	margin-bottom: 5px;
 }
 
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index 10926a092a4eb..6bfff09c1d3d0 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -222,7 +222,7 @@ $arrow-size: 8px;
 	display: flex;
 	height: $panel-header-height;
 	justify-content: space-between;
-	padding: 0 8px 0 $panel-padding;
+	padding: 0 8px 0 $grid-unit-20;
 }
 
 .components-popover__header-title {
diff --git a/packages/edit-post/src/components/manage-blocks-modal/style.scss b/packages/edit-post/src/components/manage-blocks-modal/style.scss
index d09e9a4891b4c..0e1e79de891f7 100644
--- a/packages/edit-post/src/components/manage-blocks-modal/style.scss
+++ b/packages/edit-post/src/components/manage-blocks-modal/style.scss
@@ -63,7 +63,7 @@
 .edit-post-manage-blocks-modal__category-title {
 	position: sticky;
 	top: 0;
-	padding: $panel-padding 0;
+	padding: $grid-unit-20 0;
 	background-color: $white;
 	z-index: z-index(".edit-post-manage-blocks-modal__category-title");
 
diff --git a/packages/edit-post/src/components/sidebar/last-revision/style.scss b/packages/edit-post/src/components/sidebar/last-revision/style.scss
index 1b2e4357071bb..c3068746b419b 100644
--- a/packages/edit-post/src/components/sidebar/last-revision/style.scss
+++ b/packages/edit-post/src/components/sidebar/last-revision/style.scss
@@ -5,5 +5,5 @@
 }
 
 .editor-post-last-revision__title.components-button {
-	padding: $panel-padding;
+	padding: $grid-unit-20;
 }
diff --git a/packages/editor/src/components/post-taxonomies/style.scss b/packages/editor/src/components/post-taxonomies/style.scss
index 5d9887cb742e1..ed92aebf15a71 100644
--- a/packages/editor/src/components/post-taxonomies/style.scss
+++ b/packages/editor/src/components/post-taxonomies/style.scss
@@ -12,7 +12,7 @@
 
 .editor-post-taxonomies__hierarchical-terms-subchoices {
 	margin-top: 8px;
-	margin-left: $panel-padding;
+	margin-left: $grid-unit-20;
 }
 
 .components-button.editor-post-taxonomies__hierarchical-terms-submit,

From c03fcb4ff826d516546b79cd580602d2a86b8fd9 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 16 Jun 2020 12:39:22 +0200
Subject: [PATCH 07/13] Tweak panel-header-height

---
 packages/base-styles/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 6e2094d39d705..04c2cf5de5a9a 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -42,7 +42,7 @@ $icon-size: 24px;
 $button-size: 36px;
 $button-size-small: 24px;
 $header-height: 60px;
-$panel-header-height: 50px;
+$panel-header-height: $grid-unit-60;
 $admin-bar-height: 32px;
 $admin-bar-height-big: 46px;
 $admin-sidebar-width: 160px;

From c96bd53aa2b2a593660c4d50532428839d9b769f Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 16 Jun 2020 12:49:25 +0200
Subject: [PATCH 08/13] Make tabs consistent with inserter.

---
 packages/base-styles/_z-index.scss                            | 1 +
 .../src/components/sidebar/settings-header/style.scss         | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index d519cbaeff31e..ce5c9fe574407 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -14,6 +14,7 @@ $z-layers: (
 	".edit-post-sidebar .components-panel": -2,
 	".edit-post-text-editor__toolbar": 1,
 	".block-editor-inserter__tabs": 1,
+	".edit-post-sidebar__panel-tab.is-active": 1,
 	".block-editor-inserter__tab.is-active": 1,
 	".components-panel__header": 1,
 	".components-modal__header": 10,
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 22efe4ccc68b4..dc809f5334e7d 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/style.scss
+++ b/packages/edit-post/src/components/sidebar/settings-header/style.scss
@@ -8,7 +8,7 @@
 	display: inline-block;
 	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
-	font-weight: 400;
+	font-weight: 500;
 	color: $dark-gray-primary;
 
 	// This pseudo-element "duplicates" the tab label and sets the text to bold.
@@ -27,8 +27,8 @@
 	&.is-active {
 		// The transparent shadow ensures no jumpiness when focus animates on an active tab.
 		box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
-		font-weight: 600;
 		position: relative;
+		z-index: z-index(".edit-post-sidebar__panel-tab.is-active");
 
 		// This border appears in Windows High Contrast mode instead of the box-shadow.
 		&::before {

From 1a59b3963613b1a850a23216c75a510eb99bda09 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 16 Jun 2020 13:20:50 +0200
Subject: [PATCH 09/13] Make solid/gradient picker consistent.

Fixes #19904.
---
 .../block-editor/src/components/colors-gradients/control.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 1d167f4b77f3d..98b03edb39b14 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -125,16 +125,14 @@ function ColorGradientControlInner( {
 					<ButtonGroup className="block-editor-color-gradient-control__button-tabs">
 						<Button
 							isSmall
-							isPrimary={ currentTab === 'color' }
-							isSecondary={ currentTab !== 'color' }
+							isPressed={ currentTab === 'color' }
 							onClick={ () => setCurrentTab( 'color' ) }
 						>
 							{ __( 'Solid' ) }
 						</Button>
 						<Button
 							isSmall
-							isPrimary={ currentTab === 'gradient' }
-							isSecondary={ currentTab !== 'gradient' }
+							isPressed={ currentTab === 'gradient' }
 							onClick={ () => setCurrentTab( 'gradient' ) }
 						>
 							{ __( 'Gradient' ) }

From cd021af3b4d1fa8b13e6074727ce8d1a7af787ad Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 16 Jun 2020 15:21:52 +0200
Subject: [PATCH 10/13] Address feedback, and unify panel headings.

---
 packages/components/src/panel/style.scss                        | 2 +-
 .../edit-post/src/components/sidebar/settings-header/style.scss | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
index cb16b6c5adc63..0c6bcf45229e6 100644
--- a/packages/components/src/panel/style.scss
+++ b/packages/components/src/panel/style.scss
@@ -79,7 +79,7 @@
 	padding: $grid-unit-20;
 	outline: none;
 	width: 100%;
-	font-weight: 600;
+	font-weight: 500;
 	text-align: left;
 	color: $dark-gray-primary;
 	border: none;
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 dc809f5334e7d..13f62eb5d55f7 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/style.scss
+++ b/packages/edit-post/src/components/sidebar/settings-header/style.scss
@@ -9,7 +9,6 @@
 	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: 500;
-	color: $dark-gray-primary;
 
 	// This pseudo-element "duplicates" the tab label and sets the text to bold.
 	// This ensures that the tab doesn't change width when selected.

From 827f030101db6e4e84cadcc08b5c5a9a77830a42 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 16 Jun 2020 15:29:28 +0200
Subject: [PATCH 11/13] Reduce margin.

---
 packages/components/src/toggle-control/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/toggle-control/style.scss b/packages/components/src/toggle-control/style.scss
index e376aba9eee78..d051eba00e91f 100644
--- a/packages/components/src/toggle-control/style.scss
+++ b/packages/components/src/toggle-control/style.scss
@@ -5,7 +5,7 @@
 	align-items: center;
 
 	.components-form-toggle {
-		margin-right: $grid-unit-20;
+		margin-right: $grid-unit-15;
 	}
 
 	.components-toggle-control__label {

From 71ec017aad3d5a1e5ffa84d77b44128dd65e7e0c Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 16 Jun 2020 18:58:07 +0200
Subject: [PATCH 12/13] Update snapshots.

---
 .../link-control/test/__snapshots__/index.js.snap      |  2 +-
 .../test/__snapshots__/index.js.snap                   |  2 +-
 .../test/__snapshots__/index.js.snap                   | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
index 857f93071f8b0..87cd5c30741fd 100644
--- a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"block-editor-link-control__search-input-wrapper\\"><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input class=\\"block-editor-url-input__input\\" type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></div></form><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"components-visually-hidden\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"6\\" height=\\"6\\" aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 6 6\\" class=\\"components-form-toggle__off\\"><path d=\\"M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;
+exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"block-editor-link-control__search-input-wrapper\\"><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input class=\\"block-editor-url-input__input\\" type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></div></form><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"components-visually-hidden\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;
diff --git a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
index a5e0beb316a34..dd8516642921c 100644
--- a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" class=\\"components-form-toggle__on\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
+exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
index e31518a8c6354..350bd7040160a 100644
--- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -19,7 +19,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
           xmlns="http://www.w3.org/2000/svg"
         >
           <Path
-            d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"
+            d="M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z"
           />
         </SVG>
       }
@@ -62,7 +62,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
           xmlns="http://www.w3.org/2000/svg"
         >
           <Path
-            d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"
+            d="M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z"
           />
         </SVG>
       }
@@ -108,7 +108,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
           xmlns="http://www.w3.org/2000/svg"
         >
           <Path
-            d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"
+            d="M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z"
           />
         </SVG>
       }
@@ -152,7 +152,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
           xmlns="http://www.w3.org/2000/svg"
         >
           <Path
-            d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"
+            d="M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z"
           />
         </SVG>
       }
@@ -196,7 +196,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
           xmlns="http://www.w3.org/2000/svg"
         >
           <Path
-            d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"
+            d="M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z"
           />
         </SVG>
       }

From 2bc99a76a87cdf1073f6ae35d6cc8d9c12e58baf Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 22 Jun 2020 09:25:04 +0200
Subject: [PATCH 13/13] Update snapshot.

---
 .../editor/plugins/__snapshots__/plugins-api.test.js.snap     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
index db9d191056a3e..106d6ff671948 100644
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
+++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
@@ -2,6 +2,6 @@
 
 exports[`Using Plugins API Document Setting Custom Panel Should render a custom panel inside Document Setting sidebar 1`] = `"My Custom Panel"`;
 
-exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;
+exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;
 
-exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;
+exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;