Libretto: Update styles for buttons; see #434.

libretto/css/blocks.css

@@ -309,7 +309,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Buttons */
 
 .wp-block-button .wp-block-button__link {
-	border-radius: 0;
 	font-size: 12px;
 	letter-spacing: 1px;
 	padding: 0.7rem 1.4rem;
@@ -317,15 +316,9 @@ 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 {
-	box-shadow: none;
-}
-
 .wp-block-button__link:not(.has-background) {
 	background: #a09a92;
-	outline: 4px solid #a09a92;
+	box-shadow: 0 0 0 4px #a09a92;
 }
 
 .wp-block-button__link:not(.has-text-color) {
@@ -333,24 +326,39 @@ p.has-drop-cap:not(:focus)::first-letter {
 	color: #eae9e6;
 }
 
-.wp-block-button__link:not(.has-text-color):active {
-	color: #eae9e6;
+.wp-block-button__link.has-background {
+	padding: calc( 0.7rem + 4px ) calc( 1.4rem + 4px );
 }
 
-.wp-block-button__link:not(.has-text-color):focus,
-.wp-block-button__link:not(.has-text-color):hover {
-	color: #faf9f5;
+.is-style-outline .wp-block-button__link {
+	background: transparent;
+	border-color: currentColor;
+	box-shadow: none;
+	border-width: 2px;
+}
+
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #a09a92;
 }
 
-.wp-block-button__link:not(.has-background):active {
+.wp-block-button .wp-block-button__link:active {
 	background: #363431;
-	outline: 5px solid #363431;
+	color: #eae9e6;
+}
+
+.wp-block-button .wp-block-button__link:not(.has-background):active {
+	box-shadow: 0 0 0 5px #363431;
 }
 
-.wp-block-button__link:not(.has-background):focus,
-.wp-block-button__link:not(.has-background):hover {
+.wp-block-button .wp-block-button__link:focus,
+.wp-block-button .wp-block-button__link:hover {
 	background: #a09a92;
-	outline: 2px solid #a09a92;
+	color: #faf9f5;
+}
+
+.wp-block-button .wp-block-button__link:not(.has-background):focus,
+.wp-block-button .wp-block-button__link:not(.has-background):hover {
+	box-shadow: 0 0 0 2px #a09a92;
 }
 
 .wp-block-button.alignleft {

libretto/css/editor-blocks.css

@@ -902,7 +902,6 @@ See: https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari
 
 /* Buttons */
 .wp-block-button .wp-block-button__link {
-	border-radius: 0;
 	font-size: 12px;
 	letter-spacing: 1px;
 	padding: 7px 14px;
@@ -911,42 +910,30 @@ See: https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari
 	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 {
-	box-shadow: none;
-}
-
-.wp-block-button__link:not(.has-background) {
+.wp-block-button__link {
 	background: #a09a92;
-	outline: 4px solid #a09a92;
-}
-
-.wp-block-button__link:not(.has-text-color) {
 	border: 1px solid #eae9e6;
 	color: #eae9e6;
 }
 
-.wp-block-button__link:not(.has-text-color):active {
-	color: #eae9e6;
+.wp-block-button__link:not(.has-background) {
+	box-shadow: 0 0 0 4px #a09a92;
 }
 
-.wp-block-button__link:not(.has-text-color):focus,
-.wp-block-button__link:not(.has-text-color):hover {
-	color: #faf9f5;
+.wp-block-button .wp-block-button__link.has-background {
+	padding: 11px 18px;
 }
 
-.wp-block-button__link:not(.has-background):active {
-	background: #363431;
-	outline: 5px solid #363431;
+.is-style-outline .wp-block-button__link {
+	box-shadow: none;
 }
 
-.wp-block-button__link:not(.has-background):focus,
-.wp-block-button__link:not(.has-background):hover {
-	background: #a09a92;
-	outline: 2px solid #a09a92;
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #a09a92;
 }
 
+
+
 /* Separator */
 
 .wp-block-separator {