Don't use $grid-unit-* vars for front-facing styles

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

@@ -1,8 +1,8 @@
 // Increased specificity to override blocks default margin.
 .wp-block-buttons .wp-block-button {
 	display: inline-block;
-	margin-right: $grid-unit-10;
-	margin-bottom: $grid-unit-10;
+	margin-right: 0.5rem;
+	margin-bottom: 0.5rem;
 
 	&:last-child {
 		margin-right: 0;
@@ -13,7 +13,7 @@
 	/*rtl:ignore*/
 	margin-right: 0;
 	/*rtl:ignore*/
-	margin-left: $grid-unit-10;
+	margin-left: 0.5rem;
 
 	&:first-child {
 		margin-left: 0;
@@ -24,7 +24,7 @@
 	/*rtl:ignore*/
 	margin-left: 0;
 	/*rtl:ignore*/
-	margin-right: $grid-unit-10;
+	margin-right: 0.5rem;
 
 	&:last-child {
 		margin-right: 0;

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

@@ -35,13 +35,13 @@
 		// As with mobile styles, this must be important since the Column
 		// assigns its own width as an inline style, which should take effect
 		// starting at `break-medium`.
-		flex-basis: calc(50% - #{$grid-unit-20}) !important;
+		flex-basis: calc(50% - 1rem) !important;
 		flex-grow: 0;
 
 		// Add space between the multiple columns. Themes can customize this if they wish to work differently.
 		// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
 		&:nth-child(even) {
-			margin-left: $grid-unit-20 * 2;
+			margin-left: 2rem;
 		}
 	}
 
@@ -65,7 +65,7 @@
 
 		// When columns are in a single row, add space before all except the first.
 		&:not(:first-child) {
-			margin-left: $grid-unit-20 * 2;
+			margin-left: 2rem;
 		}
 	}
 }

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

@@ -9,7 +9,7 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	padding: $grid-unit-20;
+	padding: 1rem;
 
 	&.has-parallax {
 		background-attachment: fixed;

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

@@ -10,7 +10,7 @@
 	.blocks-gallery-image,
 	.blocks-gallery-item {
 		// Add space between thumbnails, and unset right most thumbnails later.
-		margin: 0 $grid-unit-20 $grid-unit-20 0;
+		margin: 0 1rem 1rem 0;
 		display: flex;
 		flex-grow: 1;
 		flex-direction: column;
@@ -84,7 +84,7 @@
 	// On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
 	& .blocks-gallery-image,
 	& .blocks-gallery-item {
-		width: calc(50% - #{ $grid-unit-20 });
+		width: calc(50% - 1rem);
 
 		&:nth-of-type(even) {
 			margin-right: 0;
@@ -102,8 +102,8 @@
 		@for $i from 3 through 8 {
 			&.columns-#{ $i } .blocks-gallery-image,
 			&.columns-#{ $i } .blocks-gallery-item {
-				width: calc(#{ 100% / $i } - #{ $grid-unit-20 * ( $i - 1 ) / $i });
-				margin-right: $grid-unit-20;
+				width: calc(#{ 100% / $i } - #{ 1rem * ( $i - 1 ) / $i });
+				margin-right: 1rem;
 			}
 		}
 

packages/block-library/src/latest-posts/style.scss

@@ -42,8 +42,8 @@
 }
 
 .wp-block-latest-posts__post-excerpt {
-	margin-top: $grid-unit-10;
-	margin-bottom: $grid-unit-20;
+	margin-top: 0.5rem;
+	margin-bottom: 1rem;
 }
 
 .wp-block-latest-posts__featured-image {

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

@@ -28,7 +28,6 @@
 
 // Styles for submenu flyout
 .has-child {
-	$navigation-vertical-padding: $grid-unit-10 * 0.75;
 	.wp-block-navigation__container {
 		border: $border-width solid rgba(0, 0, 0, 0.15);
 		background-color: inherit;
@@ -47,7 +46,7 @@
 				flex-grow: 1;
 			}
 			> .wp-block-navigation-link__submenu-icon {
-				padding-right: $grid-unit-10;
+				padding-right: 0.5rem;
 			}
 		}
 
@@ -66,7 +65,7 @@
 					right: 100%;
 					height: 100%;
 					display: block;
-					width: $grid-unit-10;
+					width: 0.5rem;
 					background: transparent;
 				}
 			}
@@ -105,7 +104,7 @@
 .wp-block-navigation-link__content {
 	color: inherit;
 	text-decoration: none;
-	padding: $grid-unit-10 $grid-unit-10 * 2;
+	padding: 0.5rem 1rem;
 
 	+ .wp-block-navigation-link__content {
 		padding-top: 0;
@@ -124,7 +123,7 @@
 
 .wp-block-navigation-link__submenu-icon {
 	height: inherit;
-	padding: $grid-unit-10 * 0.75 $grid-unit-10 * 2;
+	padding: 0.375rem 1rem;
 
 	svg {
 		fill: currentColor;

packages/block-library/src/post-author/style.scss

@@ -10,11 +10,11 @@
 	}
 
 	&__avatar {
-		margin-right: $grid-unit-20;
+		margin-right: 1rem;
 	}
 
 	&__bio {
-		margin-bottom: $grid-unit-10;
+		margin-bottom: 0.5rem;
 		font-size: 0.7em;
 	}