From 5f008ecc44624a46fac62a2668ccb4901a1509ca Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 28 Feb 2020 12:18:54 +0100
Subject: [PATCH 1/2] Cleanup CSS variables

---
 packages/base-styles/_variables.scss          | 35 ++-----------------
 .../downloadable-block-header/style.scss      | 10 +++---
 .../components/block-breadcrumb/style.scss    |  4 +--
 .../src/components/block-card/style.scss      |  4 +--
 .../block-mobile-toolbar/style.scss           |  4 +--
 .../components/block-navigation/style.scss    |  2 +-
 .../src/components/block-toolbar/style.scss   |  2 +-
 .../button-block-appender/styles.native.scss  |  4 +--
 .../components/colors-gradients/style.scss    |  4 +--
 .../default-block-appender/style.scss         |  3 +-
 .../src/components/link-control/style.scss    | 18 +++++-----
 .../media-placeholder/styles.native.scss      |  4 +--
 .../multi-selection-inspector/style.scss      |  4 +--
 .../src/components/url-input/style.scss       |  4 +--
 packages/block-library/src/buttons/style.scss |  2 +-
 .../block-library/src/columns/editor.scss     |  2 +-
 packages/block-library/src/columns/style.scss |  2 +-
 packages/block-library/src/more/editor.scss   |  2 +-
 .../src/navigation-link/editor.scss           | 10 +++---
 .../block-library/src/navigation/style.scss   | 16 ++++-----
 .../block-library/src/nextpage/editor.scss    |  2 +-
 packages/block-library/src/search/editor.scss |  2 +-
 packages/block-library/src/table/editor.scss  |  2 +-
 .../src/angle-picker-control/style.scss       | 10 +++---
 packages/components/src/button/style.scss     |  4 +--
 .../src/custom-gradient-picker/style.scss     | 12 +++----
 .../components/src/dropdown-menu/style.scss   |  6 ++--
 packages/components/src/modal/style.scss      |  4 +--
 packages/components/src/notice/style.scss     |  2 +-
 .../components/src/resizable-box/style.scss   |  3 ++
 .../components/src/toolbar-group/style.scss   |  2 +-
 .../src/components/layout/style.scss          |  2 +-
 .../src/components/preview-options/style.scss |  2 +-
 packages/edit-post/src/style.scss             |  2 +-
 .../components/post-saved-state/style.scss    |  2 +-
 .../src/components/post-title/style.scss      |  2 +-
 36 files changed, 84 insertions(+), 111 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 6164d7d8b2f0d..14710d5d973e3 100644
--- a/packages/base-styles/_variables.scss
+++ b/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.
diff --git a/packages/block-directory/src/components/downloadable-block-header/style.scss b/packages/block-directory/src/components/downloadable-block-header/style.scss
index 3c297a8a9b0b5..788a2ed066bb1 100644
--- a/packages/block-directory/src/components/downloadable-block-header/style.scss
+++ b/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 {
diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss
index daa9169bb1765..bb5c00652673a 100644
--- a/packages/block-editor/src/components/block-breadcrumb/style.scss
+++ b/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 {
diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss
index 6ac54020dd80a..3b1c753929f86 100644
--- a/packages/block-editor/src/components/block-card/style.scss
+++ b/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;
 }
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/style.scss b/packages/block-editor/src/components/block-mobile-toolbar/style.scss
index a57cd99fdd77f..cf4ba7068ef36 100644
--- a/packages/block-editor/src/components/block-mobile-toolbar/style.scss
+++ b/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;
diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
index b912462076fda..5148ae22197aa 100644
--- a/packages/block-editor/src/components/block-navigation/style.scss
+++ b/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"]) {
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index dc6af844484c1..d03ae73ec6435 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/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 {
diff --git a/packages/block-editor/src/components/button-block-appender/styles.native.scss b/packages/block-editor/src/components/button-block-appender/styles.native.scss
index 98035ede34c74..de9c64ae43c51 100644
--- a/packages/block-editor/src/components/button-block-appender/styles.native.scss
+++ b/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 {
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 6bc0d64c9b436..ffa45ff671850 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/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;
 	}
 
 	&__button-tabs {
 		display: block;
-		margin-bottom: $grid-size;
+		margin-bottom: $grid-unit;
 	}
 }
 
diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss
index 9b56de6dd8799..30380916b4ae5 100644
--- a/packages/block-editor/src/components/default-block-appender/style.scss
+++ b/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;
 }
 
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index 683579050398d..9e4854de4fddd 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/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, ( 40px - $button-size ) / 2);
 }
 
 .block-editor-link-control__search-results-wrapper {
@@ -203,7 +203,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;
 
@@ -265,7 +265,7 @@ $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.
@@ -273,8 +273,8 @@ $block-editor-link-control-number-of-actions: 1;
 		 *    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 );
 	}
 }
 
diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss
index c43c95ca0b47e..046382a5ff9d0 100644
--- a/packages/block-editor/src/components/media-placeholder/styles.native.scss
+++ b/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 {
diff --git a/packages/block-editor/src/components/multi-selection-inspector/style.scss b/packages/block-editor/src/components/multi-selection-inspector/style.scss
index d531033c34be9..61bf5f8cdb382 100644
--- a/packages/block-editor/src/components/multi-selection-inspector/style.scss
+++ b/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;
 }
diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss
index f60004bb670ea..e54b3a667d535 100644
--- a/packages/block-editor/src/components/url-input/style.scss
+++ b/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;
 	}
 }
diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
index 47fb245ec0024..f82a519131686 100644
--- a/packages/block-library/src/buttons/style.scss
+++ b/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;
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 72b0cf58f1fc6..df8ae911d90a4 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/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;
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index 9abb98832df8e..2c5d57220c547 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/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.
diff --git a/packages/block-library/src/more/editor.scss b/packages/block-library/src/more/editor.scss
index 92ad39c2facd6..001a5fb98abc6 100644
--- a/packages/block-library/src/more/editor.scss
+++ b/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 {
diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
index 07c37390e7053..a72824e487ead 100644
--- a/packages/block-library/src/navigation-link/editor.scss
+++ b/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 * 2;
+		margin-left: $grid-unit * 1.25;
+		margin-top: $grid-unit * 1.25;
 	}
 }
 
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index c1490185a7c9d..51a8fa07025b5 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/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 * 7;
+$navigation-sub-menu-height: $grid-unit * 5;
+$navigation-sub-menu-width: $grid-unit * 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 * 0.75 $grid-unit * 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;
 			}
 
 			&:last-child .wp-block-navigation-link__content {
-				padding-bottom: $grid-size;
+				padding-bottom: $grid-unit;
 			}
 		}
 
 		&.has-child .wp-block-navigation-link__content {
 			min-width: 100%;
-			padding-right: $grid-size * 4;
+			padding-right: $grid-unit * 4;
 			position: relative;
 		}
 
 		.wp-block-navigation-link__submenu-icon {
 			position: absolute;
-			right: $grid-size * 2;
+			right: $grid-unit * 2;
 
 			svg {
 				fill: currentColor;
diff --git a/packages/block-library/src/nextpage/editor.scss b/packages/block-library/src/nextpage/editor.scss
index 99f3679e5ae60..d82dd9ddf6ef1 100644
--- a/packages/block-library/src/nextpage/editor.scss
+++ b/packages/block-library/src/nextpage/editor.scss
@@ -21,7 +21,7 @@
 		border-radius: 4px;
 		background: $white;
 		padding: 6px 8px;
-		height: $icon-button-size-small;
+		height: $button-size-small;
 	}
 
 	// Dashed line
diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss
index cee4a9236f7af..7168d1a7d7991 100644
--- a/packages/block-library/src/search/editor.scss
+++ b/packages/block-library/src/search/editor.scss
@@ -5,7 +5,7 @@
 		color: $dark-opacity-300;
 		font-family: $default-font;
 		font-size: $default-font-size;
-		padding: $grid-size;
+		padding: $grid-unit;
 
 		&:focus {
 			outline: none;
diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
index 0ea04e5ad0fb7..6ef3d2c3479eb 100644
--- a/packages/block-library/src/table/editor.scss
+++ b/packages/block-library/src/table/editor.scss
@@ -59,7 +59,7 @@
 		margin-bottom: 0;
 
 		input {
-			height: $icon-button-size;
+			height: $button-size;
 		}
 	}
 
diff --git a/packages/components/src/angle-picker-control/style.scss b/packages/components/src/angle-picker-control/style.scss
index d80e07e167caa..6b5c497e9ae88 100644
--- a/packages/components/src/angle-picker-control/style.scss
+++ b/packages/components/src/angle-picker-control/style.scss
@@ -6,17 +6,17 @@
 }
 
 .components-angle-picker-control__input-field {
-	width: calc(100% - #{$icon-button-size});
+	width: calc(100% - #{$button-size});
 	max-width: 100px;
 }
 
 .components-angle-picker-control__angle-circle {
-	width: $icon-button-size - ( 2 * $grid-size-small );
-	height: $icon-button-size - ( 2 * $grid-size-small );
+	width: $button-size - ( 2 * $grid-unit-05 );
+	height: $button-size - ( 2 * $grid-unit-05 );
 	border: 2px solid $dark-gray-500;
 	border-radius: 50%;
 	float: left;
-	margin-right: $grid-size-small;
+	margin-right: $grid-unit-05;
 	cursor: grab;
 }
 
@@ -33,7 +33,7 @@
 	border: 3px solid $dark-gray-500;
 	display: block;
 	position: absolute;
-	top: -($icon-button-size - (2 * $grid-size-small)) / 2;
+	top: -($button-size - (2 * $grid-unit-05)) / 2;
 	bottom: 0;
 	left: 0;
 	right: 0;
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 8443b17f73aa2..27139d381a0a9 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -9,7 +9,7 @@
 	background: none;
 	transition: box-shadow 0.1s linear;
 	@include reduce-motion("transition");
-	height: $icon-button-size;
+	height: $button-size;
 	align-items: center;
 	box-sizing: border-box;
 	padding: 6px 12px;
@@ -232,7 +232,7 @@
 		padding: 6px; // Works for 24px icons. Smaller icons are vertically centered by flex alignments.
 
 		// Icon buttons are square.
-		min-width: $icon-button-size;
+		min-width: $button-size;
 		justify-content: center;
 
 		.dashicon {
diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
index 3993426e36d6d..027ff0c89ab27 100644
--- a/packages/components/src/custom-gradient-picker/style.scss
+++ b/packages/components/src/custom-gradient-picker/style.scss
@@ -1,7 +1,7 @@
 $components-custom-gradient-picker__padding: 3px; // 24px container, 18px handles inside, that leaves 6px padding, half of which is 3.
 
 .components-custom-gradient-picker {
-	margin-top: $grid-size;
+	margin-top: $grid-unit;
 }
 
 .components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
@@ -10,11 +10,11 @@ $components-custom-gradient-picker__padding: 3px; // 24px container, 18px handle
 
 .components-custom-gradient-picker__gradient-bar {
 	width: 100%;
-	height: $icon-button-size-small;
-	border-radius: $icon-button-size-small;
+	height: $button-size-small;
+	border-radius: $button-size-small;
 	margin-bottom: $grid-unit-10;
 	padding-left: $components-custom-gradient-picker__padding;
-	padding-right: $icon-button-size-small - $components-custom-gradient-picker__padding;
+	padding-right: $button-size-small - $components-custom-gradient-picker__padding;
 
 	.components-custom-gradient-picker__markers-container {
 		position: relative;
@@ -24,8 +24,8 @@ $components-custom-gradient-picker__padding: 3px; // 24px container, 18px handle
 		border-radius: 50%;
 		background: $white;
 		padding: 2px;
-		width: $icon-button-size-small;
-		height: $icon-button-size-small;
+		width: $button-size-small;
+		height: $button-size-small;
 		position: relative;
 	}
 
diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
index 556af2f580ee9..69fd3e3288103 100644
--- a/packages/components/src/dropdown-menu/style.scss
+++ b/packages/components/src/dropdown-menu/style.scss
@@ -48,15 +48,15 @@
 
 			// This assumes 20x20px dashicons.
 			padding: 2px;
-			width: $icon-button-size-small;
-			height: $icon-button-size-small;
+			width: $button-size-small;
+			height: $button-size-small;
 			margin: -1px $grid-unit-10 -1px 0;
 		}
 	}
 
 	.components-menu-item__button,
 	.components-menu-item__button.components-button {
-		min-height: $icon-button-size;
+		min-height: $button-size;
 		height: auto;
 		padding-left: 2rem;
 		text-align: left;
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index d0eed7aeaf33c..d99814775f22e 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -113,8 +113,8 @@
 	display: inline-block;
 
 	svg {
-		max-width: $icon-button-size;
-		max-height: $icon-button-size;
+		max-width: $button-size;
+		max-height: $button-size;
 		padding: $grid-unit-10;
 	}
 }
diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss
index 96828b4eee604..3bfb080cc4939 100644
--- a/packages/components/src/notice/style.scss
+++ b/packages/components/src/notice/style.scss
@@ -31,7 +31,7 @@
 
 .components-notice__content {
 	flex-grow: 1;
-	margin: $grid-unit-05 #{ $icon-button-size-small + $border-width } $grid-unit-05 0;
+	margin: $grid-unit-05 #{ $button-size-small + $border-width } $grid-unit-05 0;
 }
 
 .components-notice__action.components-button {
diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss
index 270995eed93cf..d993048cc399d 100644
--- a/packages/components/src/resizable-box/style.scss
+++ b/packages/components/src/resizable-box/style.scss
@@ -1,3 +1,6 @@
+$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.
+
 // This is a wrapper of the actual visible handle (pseudo element). It is styled
 // to be much bigger than the visual part so it's easier to click and use.
 .components-resizable-box__handle {
diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar-group/style.scss
index f8cbe5eb98206..da98306f2c402 100644
--- a/packages/components/src/toolbar-group/style.scss
+++ b/packages/components/src/toolbar-group/style.scss
@@ -50,7 +50,7 @@ div.components-toolbar {
 			top: 8px;
 			left: -3px;
 			width: 1px;
-			height: $icon-button-size - 16px;
+			height: $button-size - 16px;
 		}
 	}
 }
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index fd9b1b2390db4..cdc970e42ef1e 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -110,7 +110,7 @@
 	}
 
 	.table-of-contents .components-button {
-		height: $icon-button-size-small;
+		height: $button-size-small;
 		padding: 0;
 
 		&:focus {
diff --git a/packages/edit-post/src/components/preview-options/style.scss b/packages/edit-post/src/components/preview-options/style.scss
index b4cc0ec2b110a..b0b0e3ce42f2f 100644
--- a/packages/edit-post/src/components/preview-options/style.scss
+++ b/packages/edit-post/src/components/preview-options/style.scss
@@ -52,7 +52,7 @@
 }
 
 .editor-post-preview__button-external {
-	height: $icon-button-size;
+	height: $button-size;
 	display: block;
 }
 
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index d51842e02a78b..70bbe59a13e01 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -1,4 +1,4 @@
-$footer-height: $icon-button-size-small;
+$footer-height: $button-size-small;
 
 @import "./components/fullscreen-mode/style.scss";
 @import "./components/header/style.scss";
diff --git a/packages/editor/src/components/post-saved-state/style.scss b/packages/editor/src/components/post-saved-state/style.scss
index b298968a3c345..7d58209eb80fc 100644
--- a/packages/editor/src/components/post-saved-state/style.scss
+++ b/packages/editor/src/components/post-saved-state/style.scss
@@ -1,7 +1,7 @@
 .editor-post-saved-state {
 	display: flex;
 	align-items: center;
-	width: $icon-button-size - $grid-unit-10;
+	width: $button-size - $grid-unit-10;
 	padding: #{ $grid-unit-05 * 3 } $grid-unit-05;
 	color: $medium-gray-text;
 	overflow: hidden;
diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
index 0b346ce6e327d..8760c20f196ac 100644
--- a/packages/editor/src/components/post-title/style.scss
+++ b/packages/editor/src/components/post-title/style.scss
@@ -79,7 +79,7 @@
 
 	@include break-mobile() {
 		position: absolute;
-		top: -$icon-button-size + $border-width + $border-width + 1px; // Shift this element upward the same height as the block toolbar, minus the border size
+		top: -$button-size + $border-width + $border-width + 1px; // Shift this element upward the same height as the block toolbar, minus the border size
 		right: 0;
 		flex-wrap: nowrap;
 		width: auto;

From 30c78f7214055f46dad463991a32d700aaa9055c Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 28 Feb 2020 14:49:47 +0100
Subject: [PATCH 2/2] avoid using -unit directly

---
 .../src/components/colors-gradients/style.scss   |  4 ++--
 .../src/components/link-control/style.scss       |  2 +-
 .../src/components/rich-text/style.scss          |  2 +-
 .../src/navigation-link/editor.scss              |  6 +++---
 packages/block-library/src/navigation/style.scss | 16 ++++++++--------
 packages/block-library/src/search/editor.scss    |  2 +-
 .../src/custom-gradient-picker/style.scss        |  2 +-
 7 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index ffa45ff671850..cd5992a613cfc 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -1,11 +1,11 @@
 .block-editor-color-gradient-control {
 	&__color-indicator {
-		margin-bottom: $grid-unit;
+		margin-bottom: $grid-unit-10;
 	}
 
 	&__button-tabs {
 		display: block;
-		margin-bottom: $grid-unit;
+		margin-bottom: $grid-unit-10;
 	}
 }
 
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index 9e4854de4fddd..3dbdcfdb9c710 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -62,7 +62,7 @@ $block-editor-link-control-number-of-actions: 1;
 	 *    equivalent of the vertical padding.
 	 */
 	top: $grid-unit-20 + 1px + ( ( 40px - $button-size ) / 2 );
-	right: $grid-unit-20 + 1px + min($grid-unit, ( 40px - $button-size ) / 2);
+	right: $grid-unit-20 + 1px + min($grid-unit-10, ( 40px - $button-size ) / 2);
 }
 
 .block-editor-link-control__search-results-wrapper {
diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss
index cd4005ae15c0c..d08ae54ce51a7 100644
--- a/packages/block-editor/src/components/rich-text/style.scss
+++ b/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.
diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
index a72824e487ead..16a49cea10136 100644
--- a/packages/block-library/src/navigation-link/editor.scss
+++ b/packages/block-library/src/navigation-link/editor.scss
@@ -29,9 +29,9 @@
 	}
 
 	.block-list-appender {
-		margin: $grid-unit * 2;
-		margin-left: $grid-unit * 1.25;
-		margin-top: $grid-unit * 1.25;
+		margin: $grid-unit-10 * 2;
+		margin-left: $grid-unit-10 * 1.25;
+		margin-top: $grid-unit-10 * 1.25;
 	}
 }
 
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 51a8fa07025b5..34f003903a066 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -1,6 +1,6 @@
-$navigation-menu-height: $grid-unit * 7;
-$navigation-sub-menu-height: $grid-unit * 5;
-$navigation-sub-menu-width: $grid-unit * 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-unit * 25;
 			display: flex;
 			align-items: center;
 			width: max-content;
-			padding: $grid-unit * 0.75 $grid-unit * 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-unit;
+				padding-top: $grid-unit-10;
 			}
 
 			&:last-child .wp-block-navigation-link__content {
-				padding-bottom: $grid-unit;
+				padding-bottom: $grid-unit-10;
 			}
 		}
 
 		&.has-child .wp-block-navigation-link__content {
 			min-width: 100%;
-			padding-right: $grid-unit * 4;
+			padding-right: $grid-unit-10 * 4;
 			position: relative;
 		}
 
 		.wp-block-navigation-link__submenu-icon {
 			position: absolute;
-			right: $grid-unit * 2;
+			right: $grid-unit-10 * 2;
 
 			svg {
 				fill: currentColor;
diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss
index 7168d1a7d7991..db4082f9d2afa 100644
--- a/packages/block-library/src/search/editor.scss
+++ b/packages/block-library/src/search/editor.scss
@@ -5,7 +5,7 @@
 		color: $dark-opacity-300;
 		font-family: $default-font;
 		font-size: $default-font-size;
-		padding: $grid-unit;
+		padding: $grid-unit-10;
 
 		&:focus {
 			outline: none;
diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
index 027ff0c89ab27..ed0f6febd6b34 100644
--- a/packages/components/src/custom-gradient-picker/style.scss
+++ b/packages/components/src/custom-gradient-picker/style.scss
@@ -1,7 +1,7 @@
 $components-custom-gradient-picker__padding: 3px; // 24px container, 18px handles inside, that leaves 6px padding, half of which is 3.
 
 .components-custom-gradient-picker {
-	margin-top: $grid-unit;
+	margin-top: $grid-unit-10;
 }
 
 .components-custom-gradient-picker__gradient-bar:not(.has-gradient) {