Cleanup CSS variables (#20529)

packages/base-styles/_variables.scss

@@ -15,7 +15,7 @@ $text-editor-font-size: 14px;
 $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;
 
 /**
  * Grid System.
@@ -32,31 +32,12 @@ $grid-unit-40: 4 * $grid-unit;		// 32px
 $grid-unit-50: 5 * $grid-unit;		// 40px
 $grid-unit-60: 6 * $grid-unit;		// 48px
 
-/* @Todo: Move towards custom properties:
-:root {
-	--grid-unit: 8px;
-	--grid-unit-05: calc(0.5 * var(--grid-unit)); // 4px
-	--grid-unit-10: calc(1 * var(--grid-unit));   // 8px
-	--grid-unit-15: calc(1.5 * var(--grid-unit)); // 12px
-	--grid-unit-20: calc(2 * var(--grid-unit));   // 16px
-	--grid-unit-30: calc(3 * var(--grid-unit));   // 24px
-	--grid-unit-40: calc(4 * var(--grid-unit));   // 32px
-	--grid-unit-50: calc(5 * var(--grid-unit));   // 40px
-	--grid-unit-60: calc(6 * var(--grid-unit));   // 48px
-}
-*/
-
-// Deprecated grid units.
-$grid-size-small: 4px;
-$grid-size: 8px;
-$grid-size-large: 16px;
-$grid-size-xlarge: 24px;
-
-
 /**
  * Dimensions.
  */
 
+$button-size: 36px;
+$button-size-small: 24px;
 $panel-padding: 16px;
 $header-height: 60px;
 $panel-header-height: 50px;
@@ -65,7 +46,6 @@ $admin-bar-height-big: 46px;
 $admin-sidebar-width: 160px;
 $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
-$empty-paragraph-height: $text-editor-font-size * 4;
 $modal-min-width: 360px;
 $spinner-size: 18px;
 
@@ -86,20 +66,11 @@ $sidebar-width: 280px;
 $content-width: 580px; // This is optimized for 70 characters.
 $widget-area-width: 700px;
 
-
 /**
  * Block UI.
  */
 
-$border-width: 1px;
-$icon-button-size: 36px;
-$inserter-tabs-height: 36px;
-$icon-button-size-small: 24px;
 $block-toolbar-height: $grid-unit-60;
-$resize-handler-size: 15px;
-$resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // Make the resize handle container larger so there's a larger grabbable area.
-
-// Block specific dimensions.
 $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: 28px; // Width of the movers/drag handle UI.

packages/block-directory/src/components/downloadable-block-header/style.scss

@@ -3,15 +3,15 @@
 	flex-grow: 1;
 
 	.block-editor-block-icon {
-		width: $icon-button-size;
-		height: $icon-button-size;
-		font-size: $icon-button-size;
+		width: $button-size;
+		height: $button-size;
+		font-size: $button-size;
 		background-color: $light-gray-300;
 	}
 
 	img {
-		width: $icon-button-size;
-		height: $icon-button-size;
+		width: $button-size;
+		height: $button-size;
 	}
 
 	.block-directory-downloadable-block-header__column {

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

@@ -14,8 +14,8 @@
 }
 
 .block-editor-block-breadcrumb__button.components-button {
-	height: $icon-button-size-small;
-	line-height: $icon-button-size-small;
+	height: $button-size-small;
+	line-height: $button-size-small;
 	padding: 0;
 
 	&:hover {

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

@@ -29,6 +29,6 @@
 	margin-left: -2px;
 	margin-right: 10px;
 	padding: 0 3px;
-	width: $icon-button-size;
-	height: $icon-button-size-small;
+	width: $button-size;
+	height: $button-size-small;
 }

packages/block-editor/src/components/block-mobile-toolbar/style.scss

@@ -4,8 +4,8 @@
 	border-right: $border-width solid $light-gray-500;
 
 	.block-editor-block-mover__control {
-		width: $icon-button-size;
-		height: $icon-button-size;
+		width: $button-size;
+		height: $button-size;
 		border-radius: $radius-round-rectangle;
 		padding: 3px;
 		margin: 0;

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

@@ -21,7 +21,7 @@ $tree-item-height: 36px;
 	background: none;
 	padding: $grid-unit-10;
 	margin-left: 0.8em;
-	width: $icon-button-size;
+	width: $button-size;
 	border-radius: 4px;
 
 	&:hover:not(:disabled):not([aria-disabled="true"]) {

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

@@ -125,7 +125,7 @@
 		padding-right: $grid-unit-15 / 2;
 
 		svg {
-			min-width: $icon-button-size-small; // This is the optimal icon size, and we size the whole button after this.
+			min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
 		}
 
 		&::before {

packages/block-editor/src/components/button-block-appender/styles.native.scss

@@ -21,9 +21,9 @@
 .addBlockButton {
 	color: $white;
 	background-color: $gray;
-	border-radius: $icon-button-size-small / 2;
+	border-radius: $button-size-small / 2;
 	overflow: hidden;
-	size: $icon-button-size-small;
+	size: $button-size-small;
 }
 
 .addBlockButtonDark {

packages/block-editor/src/components/colors-gradients/style.scss

@@ -1,11 +1,11 @@
 .block-editor-color-gradient-control {
 	&__color-indicator {
-		margin-bottom: $grid-size;
+		margin-bottom: $grid-unit-10;
 	}
 
 	&__button-tabs {
 		display: block;
-		margin-bottom: $grid-size;
+		margin-bottom: $grid-unit-10;
 	}
 }
 

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

@@ -31,7 +31,7 @@
 		// Emulate the dimensions of a paragraph block.
 		// On mobile and in nested contexts, the plus to add blocks shows up on the right.
 		// The rightmost padding makes sure it doesn't overlap text.
-		padding: 0 #{ $block-padding + $icon-button-size } 0 $block-padding;
+		padding: 0 #{ $block-padding + $button-size } 0 $block-padding;
 
 		// Use opacity to work in various editor styles.
 		color: $dark-opacity-300;
@@ -48,7 +48,6 @@
 
 // Ensure that the height of the first appender, and the one between blocks, is the same as text.
 .block-editor-default-block-appender__content {
-	min-height: $empty-paragraph-height / 2;
 	line-height: $editor-line-height;
 }
 

packages/block-editor/src/components/link-control/style.scss

@@ -24,7 +24,7 @@ $block-editor-link-control-number-of-actions: 1;
 		width: calc(100% - #{$grid-unit-20*2});
 		display: block;
 		padding: 11px $grid-unit-20;
-		padding-right: ( $icon-button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons
+		padding-right: ( $button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons
 		margin: $grid-unit-20;
 		position: relative;
 		border: 1px solid $light-gray-500;
@@ -44,7 +44,7 @@ $block-editor-link-control-number-of-actions: 1;
 }
 
 .block-editor-link-control__search-error {
-	margin: -$grid-size-large/2 $grid-size-large $grid-size-large; // negative margin to bring the error a bit closer to the button
+	margin: -$grid-unit-20/2 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
 }
 
 .block-editor-link-control__search-actions {
@@ -54,15 +54,15 @@ $block-editor-link-control-number-of-actions: 1;
 	 * when suggestions are rendered.
 	 *
 	 * Compensate for:
-	 *  - Input margin ($grid-size-large)
+	 *  - Input margin ($grid-unit-20)
 	 *  - Border (1px)
 	 *  - Vertically, for the difference in height between the input (40px) and
 	 *    the icon buttons.
 	 *  - Horizontally, pad to the minimum of: default input padding, or the
 	 *    equivalent of the vertical padding.
 	 */
-	top: $grid-size-large + 1px + ( ( 40px - $icon-button-size ) / 2 );
-	right: $grid-size-large + 1px + min($grid-size, ( 40px - $icon-button-size ) / 2);
+	top: $grid-unit-20 + 1px + ( ( 40px - $button-size ) / 2 );
+	right: $grid-unit-20 + 1px + min($grid-unit-10, ( 40px - $button-size ) / 2);
 }
 
 .block-editor-link-control__search-results-wrapper {
@@ -205,7 +205,7 @@ $block-editor-link-control-number-of-actions: 1;
 }
 
 .block-editor-link-control__loading {
-	margin: $grid-size-large; // when only loading control is shown it requires it's own spacing.
+	margin: $grid-unit-20; // when only loading control is shown it requires it's own spacing.
 	display: flex;
 	align-items: center;
 
@@ -267,16 +267,16 @@ $block-editor-link-control-number-of-actions: 1;
 		 * Position spinner to the left of the actions.
 		 *
 		 * Compensate for:
-		 *  - Input margin ($grid-size-large)
+		 *  - Input margin ($grid-unit-20)
 		 *  - Border (1px)
 		 *  - Vertically, for the difference in height between the input (40px)
 		 *    and the spinner.
 		 *  - Horizontally, adjust for the width occupied by the icon buttons,
 		 *    then artificially create spacing that mimics as if the spinner
 		 *    were center-padded to the same width as an icon button.
 		 */
-		top: $grid-size-large + 1px + ( ( 40px - $spinner-size ) / 2 );
-		right: $grid-size-large + 1px + ( $icon-button-size * $block-editor-link-control-number-of-actions ) + ( ( $icon-button-size - $spinner-size ) / 2 );
+		top: $grid-unit-20 + 1px + ( ( 40px - $spinner-size ) / 2 );
+		right: $grid-unit-20 + 1px + ( $button-size * $block-editor-link-control-number-of-actions ) + ( ( $button-size - $spinner-size ) / 2 );
 	}
 }
 

packages/block-editor/src/components/media-placeholder/styles.native.scss

@@ -61,9 +61,9 @@
 .addMediaButton {
 	color: $white;
 	background-color: $toolbar-button;
-	border-radius: $icon-button-size-small / 2;
+	border-radius: $button-size-small / 2;
 	overflow: hidden;
-	size: $icon-button-size-small;
+	size: $button-size-small;
 }
 
 .addMediaButtonDark {

packages/block-editor/src/components/multi-selection-inspector/style.scss

@@ -21,6 +21,6 @@
 	margin-left: -2px;
 	margin-right: 10px;
 	padding: 0 3px;
-	width: $icon-button-size;
-	height: $icon-button-size-small;
+	width: $button-size;
+	height: $button-size-small;
 }

packages/block-editor/src/components/rich-text/style.scss

@@ -55,7 +55,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 	.components-popover__content {
 		width: auto;
 		min-width: auto;
-		margin-bottom: $grid-unit;
+		margin-bottom: $grid-unit-10;
 		box-shadow: none;
 
 		// Block UI appearance.

packages/block-editor/src/components/url-input/style.scss

@@ -136,7 +136,7 @@ $input-size: 300px;
 
 	.components-button {
 		flex-shrink: 0;
-		width: $icon-button-size;
-		height: $icon-button-size;
+		width: $button-size;
+		height: $button-size;
 	}
 }

packages/block-library/src/buttons/style.scss

@@ -1,6 +1,6 @@
 .wp-block-buttons .wp-block-button {
 	display: inline-block;
-	margin: $grid-size-small;
+	margin: $grid-unit-05;
 }
 .wp-block-buttons.aligncenter {
 	text-align: center;

packages/block-library/src/columns/editor.scss

@@ -61,7 +61,7 @@
 
 			// Between mobile and large viewports, allow 2 columns.
 			@include break-small() {
-				flex-basis: calc(50% - (#{$grid-size-large}));
+				flex-basis: calc(50% - (#{$grid-unit-20}));
 				flex-grow: 0;
 				margin-left: 0;
 				margin-right: 0;

packages/block-library/src/columns/style.scss

@@ -32,7 +32,7 @@
 
 	// Between mobile and large viewports, allow 2 columns.
 	@include break-small() {
-		flex-basis: calc(50% - #{$grid-size-large});
+		flex-basis: calc(50% - #{$grid-unit-20});
 		flex-grow: 0;
 
 		// Add space between the multiple columns. Themes can customize this if they wish to work differently.

packages/block-library/src/more/editor.scss

@@ -26,7 +26,7 @@
 		border-radius: 4px;
 		background: $white;
 		padding: 6px 8px;
-		height: $icon-button-size-small;
+		height: $button-size-small;
 		max-width: 100%;
 
 		&:focus {

packages/block-library/src/navigation-link/editor.scss

@@ -3,8 +3,8 @@
 .wp-block-navigation-link__container {
 	border-radius: 0;
 	// Make it the same height as the appender to prevent a jump. Maybe revisit this.
-	line-height: $icon-button-size;
-	min-height: $icon-button-size;
+	line-height: $button-size;
+	min-height: $button-size;
 }
 
 /*
@@ -29,9 +29,9 @@
 	}
 
 	.block-list-appender {
-		margin: $grid-size * 2;
-		margin-left: $grid-size * 1.25;
-		margin-top: $grid-size * 1.25;
+		margin: $grid-unit-10 * 2;
+		margin-left: $grid-unit-10 * 1.25;
+		margin-top: $grid-unit-10 * 1.25;
 	}
 }
 

packages/block-library/src/navigation/style.scss

@@ -1,6 +1,6 @@
-$navigation-menu-height: $grid-size * 7;
-$navigation-sub-menu-height: $grid-size * 5;
-$navigation-sub-menu-width: $grid-size * 25;
+$navigation-menu-height: $grid-unit-10 * 7;
+$navigation-sub-menu-height: $grid-unit-10 * 5;
+$navigation-sub-menu-width: $grid-unit-10 * 25;
 
 /*
 * Frontend: reset the default list styles
@@ -158,30 +158,30 @@ $navigation-sub-menu-width: $grid-size * 25;
 			display: flex;
 			align-items: center;
 			width: max-content;
-			padding: $grid-size * 0.75 $grid-size * 2;
+			padding: $grid-unit-10 * 0.75 $grid-unit-10 * 2;
 		}
 
 		// Submenu links only
 		.wp-block-navigation-link {
 
 			&:first-child:not(:only-child) .wp-block-navigation-link__content {
-				padding-top: $grid-size;
+				padding-top: $grid-unit-10;
 			}
 
 			&:last-child .wp-block-navigation-link__content {
-				padding-bottom: $grid-size;
+				padding-bottom: $grid-unit-10;
 			}
 		}
 
 		&.has-child .wp-block-navigation-link__content {
 			min-width: 100%;
-			padding-right: $grid-size * 4;
+			padding-right: $grid-unit-10 * 4;
 			position: relative;
 		}
 
 		.wp-block-navigation-link__submenu-icon {
 			position: absolute;
-			right: $grid-size * 2;
+			right: $grid-unit-10 * 2;
 
 			svg {
 				fill: currentColor;