fix: Improve toolbar styling consistency

Rely upon the "toolbar" `variant` configuration to ensure each toolbar
group renders a separating right border.

Author: dcalhoun

src/components/editor-toolbar/index.jsx

@@ -118,7 +118,7 @@ const EditorToolbar = ( { className } ) => {
 			<div className={ classes }>
 				<Toolbar
 					label="Editor toolbar"
-					variant="unstyled"
+					variant="toolbar"
 					ref={ scrollViewRef }
 					className={ scrollViewClasses }
 				>

src/components/editor-toolbar/style.scss

@@ -1,6 +1,6 @@
 @use "@wordpress/base-styles/colors" as wordpress;
 
-$border-color: #c8c7cc;
+$border-color: wordpress.$gray-300;
 $border-radius: 2px;
 $min-touch-target-size: 46px;
 $scroll-indicator-elevation: 32;
@@ -14,6 +14,10 @@ $scroll-indicator-elevation: 32;
 	border-radius: 0;
 }
 
+.gutenberg-kit-editor-toolbar .components-accessible-toolbar {
+	border: none; // Remove "toolbar" variant's default black border
+}
+
 // Disable overflow scrolling for the block toolbar, and rely upon scrolling the
 // parent editor toolbar to avoid nested scrolling views.
 .gutenberg-kit-editor-toolbar .block-editor-block-contextual-toolbar {
@@ -91,6 +95,11 @@ $scroll-indicator-elevation: 32;
 .gutenberg-kit-editor-toolbar .components-toolbar-group {
 	border-right-color: $border-color;
 	min-height: $min-touch-target-size;
+	// Reset Gutenberg's negative margin that oddly create a gap at the top/bottom
+	// of the toolbar, rather than extending the button height as intended in
+	// Gutenberg.
+	margin-top: initial;
+	margin-bottom: initial;
 	padding-left: 0;
 	padding-right: 0;
 }