From 7d6acbca60bbd7f2f91dbfc57a9246060bdef443 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Wed, 12 Feb 2020 08:46:28 +0100
Subject: [PATCH] Adjust primary, secondary and tertiary buttons.

This will no doubt need additional feedback, and the branch should stay open for a while to gather all those thoughts.

One of the primary reasons for reducing the borders is, similar to tertiary buttons, that they work due to their context, just like how menu ite
ms work in their menu item contexts. This puts a great onus on the implementer to choose the right button for the right context. In that vein, w
e may even want to provide additional buttons, such as a solid background button that isn't primary, for cases where a primary button is insuffi
cient, and a secondary button does not work well enough in the context. An example could be considered the link dialog mocked up here https://github.com/WordPress/gutenberg/issues/20007#issuecomment-581812491
---
 .../components/media-placeholder/style.scss   |   9 --
 packages/components/src/button/style.scss     | 122 +++++++++++-------
 .../components/post-preview-button/index.js   |   2 +-
 3 files changed, 79 insertions(+), 54 deletions(-)

diff --git a/packages/block-editor/src/components/media-placeholder/style.scss b/packages/block-editor/src/components/media-placeholder/style.scss
index 0d6f11dc16dea5..77ffd4c2efb9f0 100644
--- a/packages/block-editor/src/components/media-placeholder/style.scss
+++ b/packages/block-editor/src/components/media-placeholder/style.scss
@@ -29,15 +29,6 @@
 
 .block-editor-media-placeholder__button {
 	margin-bottom: 0.5rem;
-
-	.dashicon {
-		vertical-align: middle;
-		margin-bottom: 3px;
-	}
-
-	&:hover {
-		color: $dark-gray-800;
-	}
 }
 
 .block-editor-media-placeholder__cancel-button.is-link {
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 909216adb80359..0621d5180edc60 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -36,35 +36,10 @@
 		outline: 1px solid transparent;
 	}
 
-	// Secondary/default button style.
-	&.is-secondary {
-		white-space: nowrap;
-		color: $theme-color;
-		background: transparent;
-
-		&:hover:not(:disabled) {
-			border-color: $theme-color;
-		}
-
-		&:active:not(:disabled) {
-			background: #f3f5f6;
-			color: color($theme-color shade(5%));
-			border-color: #7e8993;
-			box-shadow: none;
-		}
-
-		&:disabled,
-		&[aria-disabled="true"] {
-			color: #a0a5aa;
-			border-color: #ddd;
-			background: #f7f7f7;
-			text-shadow: 0 $border-width 0 #fff;
-			transform: none;
-			opacity: 1;
-		}
-	}
+	/**
+	 * Primary button style.
+	 */
 
-	// Primary button style.
 	&.is-primary {
 		white-space: nowrap;
 		background: color($theme-color);
@@ -126,7 +101,80 @@
 		}
 	}
 
-	/* Buttons that look like links, for a cross of good semantics with the visual */
+	/**
+	 * Secondary button style.
+	 */
+
+	&.is-secondary {
+		box-shadow: 0 0 0 $border-width $light-gray-secondary;
+		outline: 1px solid transparent; // Shown in high contrast mode.
+		white-space: nowrap;
+		color: $theme-color;
+		background: transparent;
+
+		&:hover:not(:disabled) {
+			color: color($theme-color shade(5%));
+			box-shadow: 0 0 0 $border-width color($theme-color shade(5%));
+		}
+
+		&:active:not(:disabled) {
+			background: #f3f5f6;
+			color: color($theme-color shade(5%));
+			border-color: #7e8993;
+			box-shadow: none;
+		}
+
+		&:disabled,
+		&[aria-disabled="true"] {
+			color: #a0a5aa;
+			border-color: #ddd;
+			background: #f7f7f7;
+			text-shadow: 0 $border-width 0 #fff;
+			transform: none;
+			opacity: 1;
+		}
+	}
+
+	/**
+	 * Tertiary buttons.
+	 */
+
+	&.is-tertiary {
+		white-space: nowrap;
+		color: $theme-color;
+		background: transparent;
+
+		&:hover:not(:disabled) {
+			border-color: $theme-color;
+		}
+
+		&:active:not(:disabled) {
+			background: #f3f5f6;
+			color: color($theme-color shade(5%));
+			border-color: #7e8993;
+			box-shadow: none;
+		}
+
+		&:disabled,
+		&[aria-disabled="true"] {
+			color: #a0a5aa;
+			border-color: #ddd;
+			background: #f7f7f7;
+			text-shadow: 0 $border-width 0 #fff;
+			transform: none;
+			opacity: 1;
+		}
+
+		.dashicon {
+			display: inline-block;
+			flex: 0 0 auto;
+		}
+	}
+
+	/**
+	 * Link buttons.
+	 */
+
 	&.is-link {
 		margin: 0;
 		padding: 0;
@@ -158,7 +206,7 @@
 		}
 	}
 
-	/* Link buttons that are red to indicate destructive behavior. */
+	// Link buttons that are red to indicate destructive behavior.
 	&.is-link.is-destructive {
 		color: $alert-red;
 	}
@@ -194,20 +242,6 @@
 		}
 	}
 
-	// Buttons that are text-based.
-	&.is-tertiary {
-		color: $theme-color;
-
-		.dashicon {
-			display: inline-block;
-			flex: 0 0 auto;
-		}
-
-		&:not(:disabled):not([aria-disabled="true"]):hover {
-			color: color($theme-color shade(25%));
-		}
-	}
-
 	&.has-icon {
 		padding: 6px; // Works for 24px icons. Smaller icons are vertically centered by flex alignments.
 
diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index 620bb9aaf0180a..ce818deefbee73 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/packages/editor/src/components/post-preview-button/index.js
@@ -184,7 +184,7 @@ export class PostPreviewButton extends Component {
 
 		return (
 			<Button
-				isSecondary
+				isTertiary
 				className="editor-post-preview"
 				href={ href }
 				target={ this.getWindowTarget() }