Merge pull request #548 from Automattic/fixes/434-correct-button-styles

Canard: Fix button styles

affinity/blocks.css

@@ -192,15 +192,31 @@ p.has-drop-cap:not(:focus)::first-letter {
 	text-transform: uppercase;
 	letter-spacing: 1px;
 	font-weight: bold;
-	left: 4px;
 	line-height: 1;
+	padding: 16px 28px;
 	position: relative;
 	transition: 0.3s;
 	text-decoration: none;
 }
 
-.wp-block-button:not(.is-style-outline) .wp-block-button__link {
+.wp-block-button__link:not(.has-background) {
+	background-color: #99908a;
+	box-shadow: 0 0 0 4px #99908a;
 	border: 2px solid white;
+	left: 4px;
+	padding: 12px 24px;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link {
+	left: 0;
+	background-color: transparent;
+	border-color: currentColor;
+	box-shadow: none;
+	padding: 16px 28px;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #99908a;
 }
 
 .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color),
@@ -210,22 +226,19 @@ p.has-drop-cap:not(:focus)::first-letter {
 	color: white;
 }
 
-.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
-	background-color: #99908a;
-	box-shadow: 0 0 0 4px #99908a;
-}
-
 .entry-content .wp-block-button .wp-block-button__link:active,
-.entry-content .wp-block-button .wp-block-button__link.has-background:active,
 .entry-content .wp-block-button .wp-block-button__link:focus,
-.entry-content .wp-block-button .wp-block-button__link.has-background:focus,
-.entry-content .wp-block-button .wp-block-button__link:hover,
-.entry-content .wp-block-button .wp-block-button__link.has-background:hover {
-	box-shadow: 0 0 0 4px #5e5853;
+.entry-content .wp-block-button .wp-block-button__link:hover {
 	background-color: #5e5853;
 	color: #fff;
 }
 
+.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):active,
+.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):focus,
+.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
+	box-shadow: 0 0 0 4px #5e5853;
+}
+
 /* Seperator */
 
 hr.wp-block-separator {
@@ -281,51 +294,3 @@ hr.wp-block-separator {
 .wp-block-latest-comments__comment-excerpt p:last-child {
 	margin-bottom: 0;
 }
-
-/*--------------------------------------------------------------
-6.0 Colors
---------------------------------------------------------------*/
-
-.wp-block-button__link.has-pale-pink-background-color:link {
-	box-shadow: 0 0 0 4px #f78da7;
-}
-
-.wp-block-button__link.has-vivid-red-background-color:link {
-	box-shadow: 0 0 0 4px #cf2e2e;
-}
-
-.wp-block-button__link.has-luminous-vivid-orange-background-color:link {
-	box-shadow: 0 0 0 4px #ff6900;
-}
-
-.wp-block-button__link.has-luminous-vivid-amber-background-color:link {
-	box-shadow: 0 0 0 4px #fcb900;
-}
-
-.wp-block-button__link.has-light-green-cyan-background-color:link {
-	box-shadow: 0 0 0 4px #7bdcb5;
-}
-
-.wp-block-button__link.has-vivid-green-cyan-background-color:link {
-	box-shadow: 0 0 0 4px #00d084;
-}
-
-.wp-block-button__link.has-pale-cyan-blue-background-color:link {
-	box-shadow: 0 0 0 4px #8ed1fc;
-}
-
-.wp-block-button__link.has-vivid-cyan-blue-background-color:link {
-	box-shadow: 0 0 0 4px #0693e3;
-}
-
-.wp-block-button__link.has-very-light-gray-background-color:link {
-	box-shadow: 0 0 0 4px #eee;
-}
-
-.wp-block-button__link.has-cyan-bluish-gray-background-color:link {
-	box-shadow: 0 0 0 4px #abb8c3;
-}
-
-.wp-block-button__link.has-very-dark-gray-background-color:link {
-	box-shadow: 0 0 0 4px #313131;
-}

affinity/editor-blocks.css

@@ -383,14 +383,6 @@
 	left: 4px;
 }
 
-.wp-block-file .wp-block-file__button:hover,
-.wp-block-file .wp-block-file__button:focus,
-.wp-block-file .wp-block-file__button:focus {
-	outline-color: #5e5853;
-	background-color: #5e5853;
-	color: #fff;
-}
-
 .rtl .wp-block-file * + .wp-block-file__button {
 	margin-left: 0.75em;
 	margin-right: 0;
@@ -724,54 +716,16 @@
 	left: 4px;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link {
-	border-color: currentColor;
+.wp-block-button.is-style-outline .wp-block-button__link,
+.wp-block-button__link.has-background {
 	box-shadow: none;
-	color: #99908a;
-}
-
-.wp-block-button__link.has-pale-pink-background-color {
-	box-shadow: 0 0 0 4px #f78da7;
+	border: none;
+	padding: 16px 28px;
 }
 
-.wp-block-button__link.has-vivid-red-background-color {
-	box-shadow: 0 0 0 4px #cf2e2e;
-}
-
-.wp-block-button__link.has-luminous-vivid-orange-background-color {
-	box-shadow: 0 0 0 4px #ff6900;
-}
-
-.wp-block-button__link.has-luminous-vivid-amber-background-color {
-	box-shadow: 0 0 0 4px #fcb900;
-}
-
-.wp-block-button__link.has-light-green-cyan-background-color {
-	box-shadow: 0 0 0 4px #7bdcb5;
-}
-
-.wp-block-button__link.has-vivid-green-cyan-background-color {
-	box-shadow: 0 0 0 4px #00d084;
-}
-
-.wp-block-button__link.has-pale-cyan-blue-background-color {
-	box-shadow: 0 0 0 4px #8ed1fc;
-}
-
-.wp-block-button__link.has-vivid-cyan-blue-background-color {
-	box-shadow: 0 0 0 4px #0693e3;
-}
-
-.wp-block-button__link.has-very-light-gray-background-color {
-	box-shadow: 0 0 0 4px #eee;
-}
-
-.wp-block-button__link.has-cyan-bluish-gray-background-color {
-	box-shadow: 0 0 0 4px #abb8c3;
-}
-
-.wp-block-button__link.has-very-dark-gray-background-color {
-	box-shadow: 0 0 0 4px #313131;
+.wp-block-button.is-style-outline .wp-block-button__link {
+	border: 2px solid currentColor;
+	color: #99908a;
 }
 
 /* Separator */

canard/blocks.css

@@ -219,7 +219,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Buttons */
 
 .wp-block-button .wp-block-button__link {
-	border-radius: 0;
 	border: 2px solid;
 	display: inline-block;
 	font-family: Lato, sans-serif;
@@ -228,26 +227,27 @@ p.has-drop-cap:not(:focus)::first-letter {
 	text-transform: uppercase;
 }
 
-.wp-block-button .wp-block-button__link:active,
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus {
-}
-
 .wp-block-button__link:not(.has-background) {
 	background: #d11415;
 	border-color: #d11415;
 }
 
-.wp-block-button__link:not(.has-text-color),
-.wp-block-button__link:not(.has-text-color):active,
-.wp-block-button__link:not(.has-text-color):focus,
-.wp-block-button__link:not(.has-text-color):hover {
+.wp-block-button__link:not(.has-text-color) {
 	color: #fff;
 }
 
-.wp-block-button__link:not(.has-background):active,
-.wp-block-button__link:not(.has-background):focus,
-.wp-block-button__link:not(.has-background):hover {
+.is-style-outline .wp-block-button__link {
+	background: transparent;
+	border-color: currentColor;
+}
+
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #d11415;
+}
+
+.entry-content .wp-block-button .wp-block-button__link:active,
+.entry-content .wp-block-button .wp-block-button__link:focus,
+.entry-content .wp-block-button .wp-block-button__link:hover {
 	color: #d11415;
 	background: #fff;
 	border-color: #d11415;

canard/editor-blocks.css

@@ -735,8 +735,8 @@
 --------------------------------------------------------------*/
 
 /* Buttons */
-.wp-block-button .wp-block-button__link {
-	border-radius: 0;
+.wp-block-button__link {
+	background: #d11415;
 	border: 2px solid;
 	display: inline-block;
 	font-family: Lato, sans-serif;
@@ -745,29 +745,13 @@
 	text-transform: uppercase;
 }
 
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus,
-.wp-block-button .wp-block-button__link:active {
-}
-
-.wp-block-button__link:not(.has-text-color),
-.wp-block-button__link:not(.has-text-color):active,
-.wp-block-button__link:not(.has-text-color):focus,
-.wp-block-button__link:not(.has-text-color):hover {
-	color: #fff;
-}
-
 .wp-block-button__link:not(.has-background) {
-	background: #d11415;
 	border-color: #d11415;
 }
 
-.wp-block-button__link:not(.has-background):active,
-.wp-block-button__link:not(.has-background):hover,
-.wp-block-button__link:not(.has-background):focus {
+.is-style-outline .wp-block-button__link {
 	color: #d11415;
-	background: #fff;
-	border-color: #d11415;
+	border-color: currentColor;
 }
 
 /* Separator */