Address feedback.

- Restore gray sidebar header. - Use isPrimary for toolbar library button. - Make inbetweenserter not look primary.
WordPress · Feb 20, 2020 · 36b58b9 · 36b58b9
1 parent 7549d46
commit 36b58b9
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 33 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -372,14 +372,14 @@
 		min-width: 32px;
 		height: 32px;
 
-		// 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);
+		// Although this is a primary button, don't show it as such when in between blocks.
+		// @todo, this could use a separate iteration.
+		background: transparent;
+		color: $theme-color;
+
+		&:hover:not(:disabled) {
+			background: transparent;
+			color: $theme-color;
 		}
 	}
 }

diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
@@ -38,6 +38,7 @@ const defaultRenderToggle = ( {
 	}
 	return (
 		<Button
+			isPrimary
 			icon={ plusCircle }
 			label={ label }
 			tooltipPosition="bottom"

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -34,21 +34,6 @@ $block-inserter-search-height: 38px;
 	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 {

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -61,16 +61,6 @@
 		// 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;
-
-		&:hover {
-			color: $white;
-			background-color: rgba($blue-medium-focus, 0.8);
-		}
 	}
 }
 

diff --git a/packages/edit-post/src/components/sidebar/sidebar-header/style.scss b/packages/edit-post/src/components/sidebar/sidebar-header/style.scss
@@ -17,6 +17,7 @@
 
 .components-panel__header.edit-post-sidebar-header {
 	padding-right: $grid-unit-05;
+	background: $light-gray-200;
 
 	.components-button.has-icon {
 		display: none;