Match front-page link style to admin styles (WordPress#70600)

* Add color styles to link. Add :hover and :focus styles by copying button component

* Match paddings of button component

* Remove external from rel attribute

* Conditionally add exteral rel if the href is pointing to external url

* Revert style changes to ExternalLink component

* Apply style changes only to front-page-link and include theme-variables

* Using css variables

* Remove import

* Reverting changes

Co-authored-by: n2erjo00 <n2erjo00@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: coder-rancho <vyasnaman@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>

Author: 7 people

packages/editor/src/components/post-url/style.scss

@@ -18,7 +18,20 @@
 
 .editor-post-url__front-page-link {
 	// Match padding on tertiary buttons for alignment.
-	padding: $grid-unit-15 * 0.5 0 $grid-unit-15 * 0.5 $grid-unit-15;
+	padding: $grid-unit-15 * 0.5 $grid-unit-15;
+	border-radius: $radius-small;
+	color: var(--wp-admin-theme-color);
+
+	&:hover {
+		background: color-mix(in srgb, var(--wp-admin-theme-color) 4%, transparent);
+		color: var(--wp-admin-theme-color-darker-20, #183ad6);
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		color: var(--wp-admin-theme-color);
+		outline: 3px solid #0000;
+	}
 }