Try a white sidebar (WordPress#10062)

* Try a white sidebar

This PR extracts an idea from WordPress#9784, a white sidebar.

This looks a little jarring at first, but can grow on you. Because it's sort of a jarring change, I think it needs to be tested in a PR, rather than be discussed. That way people can actually _feel_ it, rather than look at screenshots.

What do you think?

* Try sticky and light gray tabs

* Address feedback.

edit-post/assets/stylesheets/_z-index.scss

@@ -12,6 +12,7 @@ $z-layers: (
 	".editor-block-list__layout .reusable-block-indicator": 1,
 	".editor-block-list__breadcrumb": 2,
 	".components-form-toggle__input": 1,
+	".components-panel__header.edit-post-sidebar__panel-tabs": 1,
 	".editor-inserter__tabs": 1,
 	".editor-inserter__tab.is-active": 1,
 	".components-panel__header": 1,

edit-post/components/sidebar/settings-header/style.scss

@@ -3,14 +3,18 @@
 	padding-left: 0;
 	padding-right: $grid-size-small;
 	border-top: 0;
+	background: $light-gray-200;
+	position: sticky;
+	z-index: z-index(".components-panel__header.edit-post-sidebar__panel-tabs");
+	top: 0;
 }
 
 .edit-post-sidebar__panel-tab {
 	background: transparent;
 	border: none;
 	border-radius: 0;
 	cursor: pointer;
-	height: 50px;
+	height: $grid-size * 6;
 	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: 400;

edit-post/components/sidebar/style.scss

@@ -6,7 +6,7 @@
 	bottom: 0;
 	width: $sidebar-width;
 	border-left: $border-width solid $light-gray-500;
-	background: $light-gray-300;
+	background: $white;
 	color: $dark-gray-500;
 	height: 100vh;
 	overflow: hidden;

packages/components/src/panel/style.scss

@@ -38,7 +38,6 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	background: $light-gray-300;
 	padding: 0 $panel-padding;
 	height: 50px;
 	border-top: $border-width solid $light-gray-500;