Audit variables stylesheet. (#26827)

* Audit variables stylesheet.

* Dead CSS.

* CSS appears dead.

See #14943.

* Retire $block-spacing.

* Retire a few unused variables.

* Move React Native variables to separate section.

* Fix for native.

* use grid variable for the file block styles

Co-authored-by: Dratwas <drapich.piotr@gmail.com>

packages/base-styles/_variables.scss

@@ -1,3 +1,10 @@
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ */
+
 @import "./colors";
 
 /**
@@ -10,17 +17,11 @@ $default-line-height: 1.4;
 $editor-font: "Noto Serif", serif;
 $editor-html-font: Menlo, Consolas, monaco, monospace;
 $editor-font-size: 16px;
-$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks (it's 2x $block-padding).
+$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks.
 $text-editor-font-size: 15px;
 $editor-line-height: 1.8;
-$big-font-size: 18px;
-$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in"
-$border-width: 1px;
-$border-width-focus: 1.5px;
-$border-width-tab: 4px;
-$helptext-font-size: 12px;
-$radio-input-size: 20px;
-$radio-input-size-sm: 24px; // Width & height for small viewports.
+$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in".
+
 
 /**
  * Grid System.
@@ -37,6 +38,7 @@ $grid-unit-40: 4 * $grid-unit;		// 32px
 $grid-unit-50: 5 * $grid-unit;		// 40px
 $grid-unit-60: 6 * $grid-unit;		// 48px
 
+
 /**
  * Dimensions.
  */
@@ -55,10 +57,7 @@ $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
 $modal-min-width: 360px;
 $spinner-size: 18px;
-$mobile-header-toolbar-height: 44px;
-$mobile-floating-toolbar-height: 44px;
-$mobile-floating-toolbar-margin: 8px;
-$mobile-color-swatch: 48px;
+
 
 /**
  * Shadows.
@@ -77,18 +76,48 @@ $content-width: 840px;
 $wide-content-width: 1100px;
 $widget-area-width: 700px;
 
+
 /**
- * Block UI.
+ * Block & Editor UI.
  */
 
 $block-toolbar-height: $grid-unit-60;
+$border-width: 1px;
+$border-width-focus: 1.5px;
+$border-width-tab: 4px;
+$helptext-font-size: 12px;
+$radius-round: 50%;
+$radius-block-ui: 2px;
+$radio-input-size: 20px;
+$radio-input-size-sm: 24px; // Width & height for small viewports.
+
+// Deprecated, please avoid using these.
+$block-padding: 14px; // Used to define space between block footprint and surrouding borders.
+
+
+/**
+ * Block paddings.
+ */
+
+// Padding for blocks with a background color (e.g. paragraph or group).
+$block-bg-padding--v: 1.25em;
+$block-bg-padding--h: 2.375em;
+
+
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+
+// Dimensions.
+$mobile-header-toolbar-height: 44px;
+$mobile-floating-toolbar-height: 44px;
+$mobile-floating-toolbar-margin: 8px;
+$mobile-color-swatch: 48px;
+
+// Block UI.
 $mobile-block-toolbar-height: 44px;
-$block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
-$block-spacing: 4px; // Vertical space between blocks.
-$block-side-ui-width: $button-size; // Width of the movers/drag handle UI.
-$block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
 $dimmed-opacity: 1;
-
 $block-edge-to-content: 16px;
 $solid-border-space: 12px;
 $dashed-border-space: 6px;
@@ -97,17 +126,3 @@ $block-selected-border-width: 1px;
 $block-selected-padding: 0;
 $block-selected-child-margin: 5px;
 $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;
-
-/**
- * Border radii.
- */
-
-$radius-round: 50%;
-$radius-block-ui: 2px;
-
-/**
- * Block paddings.
- */
-// Padding for blocks with a background color (e.g. paragraph or group).
-$block-bg-padding--v: 1.25em;
-$block-bg-padding--h: 2.375em;

packages/block-editor/src/components/block-compare/style.scss

@@ -60,7 +60,7 @@
 
 	.block-editor-block-compare__preview {
 		padding: 0;
-		padding-top: $block-padding;
+		padding-top: $grid-unit-20;
 
 		p {
 			font-size: 12px;
@@ -69,7 +69,7 @@
 	}
 
 	.block-editor-block-compare__action {
-		margin-top: $block-padding;
+		margin-top: $grid-unit-20;
 	}
 
 	.block-editor-block-compare__heading {

packages/block-editor/src/components/block-list-appender/style.scss

@@ -3,12 +3,6 @@
 .block-editor-block-list__block .block-list-appender {
 	margin: $grid-unit-10 0;
 
-	// Add additional margin to the appender when inside a group with a background color.
-	// If changing this, be sure to sync up with group/editor.scss line 13.
-	.has-background & {
-		margin: ($grid-unit-20 + $block-spacing) $grid-unit-10;
-	}
-
 	// Animate appearance.
 	.block-list-appender__toggle {
 		padding: 0;

packages/block-editor/src/components/block-list/style.scss

@@ -251,7 +251,7 @@
 
 	// Warnings
 	&.has-warning {
-		min-height: ( $block-padding + $block-spacing ) * 2;
+		min-height: $grid-unit-60;
 
 		// When a block has a warning, you shouldn't be able to manipulate the contents.
 		> * {
@@ -496,22 +496,6 @@
 	}
 }
 
-// This is the edge-to-edge hover area that contains the plus.
-.block-editor-block-list__block {
-	> .block-editor-block-list__insertion-point {
-		position: absolute;
-		top: -$block-padding - $block-spacing / 2;
-
-		// Matches the whole empty space between two blocks.
-		height: $block-padding * 2;
-		bottom: auto;
-
-		// Match width of actual content.
-		left: $block-padding;
-		right: $block-padding;
-	}
-}
-
 .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
 	display: block;
 	margin: 0;

packages/block-library/src/button/editor.native.scss

@@ -3,6 +3,9 @@
 	align-self: flex-start;
 }
 
+// Block spacing used to indicate the space between blocks in the editor.
+// The variable has been retired.
+$block-spacing: 4px;
 .outline {
 	// Border Width has to be spread since width is thicker
 	// on Android when border radius is decreased to 0

packages/block-library/src/file/style.native.scss

@@ -4,7 +4,7 @@
 
 .defaultButton {
 	border-radius: $border-width * 4;
-	padding: $block-spacing * 2;
+	padding: $grid-unit-10;
 	margin-top: $grid-unit-20;
 	background-color: $button-fallback-bg;
 }

packages/edit-post/src/components/visual-editor/style.scss

@@ -52,6 +52,6 @@
 		// Apply default block margin below the post title.
 		// This ensures the first block on the page is in a good position.
 		// This rule can be retired once the title becomes an actual block.
-		margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style.
+		margin-bottom: $default-block-margin;
 	}
 }

packages/edit-site/src/components/header/style.scss

@@ -1,3 +1,5 @@
+$header-toolbar-min-width: 335px;
+
 .edit-site-header {
 	align-items: center;
 	background-color: $white;