Fix Publish Button!!! (#18016)

Fixes #18004 and thank science, that was driving me insane ever since you pointed it out.

This PR does a couple of things:

1. It adds `isLarge` to the Publish button. It was there for Preview, but not Publish.
2. It simplifies a little CSS as a result of that.
3. It also tweaks the button height as defined for the two preview publish buttons.

packages/components/src/button/style.scss

@@ -37,7 +37,7 @@
 			background: #f3f5f6;
 			color: color(theme(button) shade(25%));
 			border-color: color(theme(button) shade(5%));
-			box-shadow: 0 0 0 1px color(theme(button) shade(5%));
+			box-shadow: 0 0 0 $border-width color(theme(button) shade(5%));
 			text-decoration: none;
 
 		}
@@ -54,7 +54,7 @@
 			color: #a0a5aa;
 			border-color: #ddd;
 			background: #f7f7f7;
-			text-shadow: 0 1px 0 #fff;
+			text-shadow: 0 $border-width 0 #fff;
 			transform: none;
 			opacity: 1;
 		}
@@ -76,7 +76,7 @@
 
 		&:focus:enabled {
 			box-shadow:
-				0 0 0 1px $white,
+				0 0 0 $border-width $white,
 				0 0 0 3px color(theme(button));
 		}
 
@@ -107,7 +107,7 @@
 
 			&:focus:enabled {
 				box-shadow:
-					0 0 0 1px $white,
+					0 0 0 $border-width $white,
 					0 0 0 3px color(theme(button));
 			}
 		}
@@ -157,8 +157,8 @@
 		&:focus {
 			color: #124964;
 			box-shadow:
-				0 0 0 1px #5b9dd9,
-				0 0 2px 1px rgba(30, 140, 190, 0.8);
+				0 0 0 $border-width #5b9dd9,
+				0 0 2px $border-width rgba(30, 140, 190, 0.8);
 		}
 	}
 

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

@@ -91,7 +91,7 @@
 	&.editor-post-publish-button,
 	&.editor-post-publish-panel__toggle {
 		margin: 2px;
-		height: 33px;
+		height: 34px;
 		line-height: 32px;
 		font-size: $default-font-size;
 	}
@@ -105,13 +105,17 @@
 		}
 	}
 
+	// These paddings actually duplicate existing rules from button component.
+	// But they are duplicated so as to provide smaller paddings to fit the buttons on mobile.
 	&.editor-post-preview,
 	&.editor-post-publish-button,
 	&.editor-post-publish-panel__toggle {
-		padding: 0 5px 2px;
+		padding-left: 5px;
+		padding-right: 5px;
 
 		@include break-small() {
-			padding: 0 12px 2px;
+			padding-left: 12px;
+			padding-right: 12px;
 		}
 	}
 

packages/editor/src/components/post-publish-button/index.js

@@ -113,6 +113,7 @@ export class PostPublishButton extends Component {
 		return (
 			<div>
 				<Button
+					isLarge
 					ref={ this.buttonNode }
 					{ ...componentProps }
 				>