Add label, relax margins, tighten help text for switch, fix color

This commit does a few things:

1. It makes the panel heading the same color as the down chevron.
2. It adds a label to the font size picker, grouping it all together
3. It tightens the margins between switch and contextual help text.
4. It relaxes the margins for base controls inside panels, to make them a bit lighter.

Together with #9784 it reduces the weight of panels in the sidebar.

edit-post/components/sidebar/block-sidebar/style.scss

@@ -4,9 +4,9 @@
 	margin: 0 -16px;
 
 	.components-base-control {
-		margin: 0 0 1em 0;
+		margin: 0 0 1.5em 0;
 		&:last-child {
-			margin-bottom: 0;
+			margin-bottom: 0.5em;
 		}
 	}
 

packages/components/src/base-control/style.scss

@@ -1,22 +1,23 @@
 .components-base-control {
 	font-family: $default-font;
 	font-size: $default-font-size;
-}
 
-.components-base-control__field {
-	margin-bottom: $grid-size;
+	.components-base-control__field {
+		margin-bottom: $grid-size;
 
-	.components-panel__row & {
-		margin-bottom: inherit;
+		.components-panel__row & {
+			margin-bottom: inherit;
+		}
 	}
-}
 
-.components-base-control__label {
-	display: block;
-	margin-bottom: $grid-size-small;
-}
+	.components-base-control__label {
+		display: block;
+		margin-bottom: $grid-size-small;
+	}
 
-.components-base-control__help {
-	font-style: italic;
-	margin-bottom: 0;
+	.components-base-control__help {
+		margin-top: -$grid-size;
+		font-style: italic;
+		margin-bottom: 0;
+	}
 }

packages/components/src/font-size-picker/index.js

@@ -6,12 +6,12 @@ import { map } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import BaseControl from '../base-control';
 import Button from '../button';
 import ButtonGroup from '../button-group';
 import RangeControl from '../range-control';
@@ -27,7 +27,9 @@ export default function FontSizePicker( { fontSizes = [], fallbackFontSize, valu
 		onChange( Number( newValue ) );
 	};
 	return (
-		<Fragment>
+		<BaseControl
+			label={ __( 'Font Size' ) }
+		>
 			<div className="components-font-size-picker__buttons">
 				<ButtonGroup aria-label={ __( 'Font Size' ) }>
 					{ map( fontSizes, ( { name, size, shortName } ) => (
@@ -73,6 +75,6 @@ export default function FontSizePicker( { fontSizes = [], fallbackFontSize, valu
 					afterIcon="editor-textcolor"
 				/>
 			}
-		</Fragment>
+		</BaseControl>
 	);
 }