Twenty Twenty-One: Add missing styles for <button> element.

Props poena, slaFFik.
Fixes #52029.

git-svn-id: https://develop.svn.wordpress.org/trunk@49988 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-content/themes/twentytwentyone/assets/css/ie.css

@@ -1298,10 +1298,6 @@ body {
 	background-color: #d1e4dd;
 }
 
-button {
-	cursor: pointer;
-}
-
 .clear:before,
 .clear:after,
 .entry-content:before,
@@ -2256,6 +2252,19 @@ a:hover {
 	text-decoration: none;
 }
 
+button {
+	border: 3px solid transparent;
+	border-radius: 0;
+	cursor: pointer;
+	display: block;
+	font-weight: 500;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	font-size: 1.25rem;
+	line-height: 1.5;
+	padding: 15px 30px;
+	text-decoration: none;
+}
+
 input[type=submit] {
 	border: 3px solid transparent;
 	border-radius: 0;
@@ -2325,6 +2334,10 @@ input[type=reset] {
 	color: #d1e4dd;
 }
 
+button:not(:hover):not(:active):not(.has-text-color) {
+	color: #d1e4dd;
+}
+
 input[type=submit]:not(:hover):not(:active):not(.has-text-color) {
 	color: #d1e4dd;
 }
@@ -2349,6 +2362,10 @@ input[type=reset]:not(:hover):not(:active):not(.has-text-color) {
 	color: #28303d;
 }
 
+.has-background button:not(:hover):not(:active):not(.has-text-color) {
+	color: #28303d;
+}
+
 .has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color) {
 	color: #28303d;
 }
@@ -2373,6 +2390,10 @@ input[type=reset]:not(:hover):not(:active):not(.has-text-color) {
 	color: #28303d;
 }
 
+.has-background button:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: #28303d;
+}
+
 .has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background {
 	color: #28303d;
 }
@@ -2397,6 +2418,10 @@ input[type=reset]:not(:hover):not(:active):not(.has-text-color) {
 	background-color: #28303d;
 }
 
+button:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
 input[type=submit]:not(:hover):not(:active):not(.has-background) {
 	background-color: #28303d;
 }
@@ -2421,6 +2446,10 @@ input[type=reset]:not(:hover):not(:active):not(.has-background) {
 	background-color: #28303d;
 }
 
+.has-background button:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
 .has-background input[type=submit]:not(:hover):not(:active):not(.has-background) {
 	background-color: #28303d;
 }
@@ -2443,6 +2472,8 @@ input[type=reset]:not(:hover):not(:active):not(.has-background) {
 
 .site .button:hover,
 .site .button:active,
+button:hover,
+button:active,
 input[type=submit]:hover,
 input[type=submit]:active,
 input[type=reset]:hover,
@@ -2459,6 +2490,7 @@ input[type=reset]:active,
 }
 
 .site .button:focus,
+button:focus,
 input[type=submit]:focus,
 input[type=reset]:focus,
 .wp-block-search .wp-block-search__button:focus,
@@ -2474,6 +2506,12 @@ input[type=reset]:focus,
 	color: #39414d;
 }
 
+button:disabled {
+	background-color: rgba(255, 255, 255, 0.5);
+	border-color: rgba(255, 255, 255, 0.5);
+	color: #39414d;
+}
+
 input[type=submit]:disabled {
 	background-color: rgba(255, 255, 255, 0.5);
 	border-color: rgba(255, 255, 255, 0.5);

src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss

@@ -2,6 +2,7 @@
  * Button
  */
 .site .button,
+button,
 input[type="submit"],
 input[type="reset"],
 .wp-block-search .wp-block-search__button,

src/wp-content/themes/twentytwentyone/style-rtl.css

@@ -1705,6 +1705,7 @@ a:hover {
  * Button
  */
 .site .button,
+button,
 input[type=submit],
 input[type=reset],
 .wp-block-search .wp-block-search__button,
@@ -1723,6 +1724,7 @@ input[type=reset],
 }
 
 .site .button:not(:hover):not(:active):not(.has-text-color),
+button:not(:hover):not(:active):not(.has-text-color),
 input[type=submit]:not(:hover):not(:active):not(.has-text-color),
 input[type=reset]:not(:hover):not(:active):not(.has-text-color),
 .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
@@ -1732,6 +1734,7 @@ input[type=reset]:not(:hover):not(:active):not(.has-text-color),
 }
 
 .has-background .site .button:not(:hover):not(:active):not(.has-text-color),
+.has-background button:not(:hover):not(:active):not(.has-text-color),
 .has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color),
 .has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color),
 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
@@ -1741,6 +1744,7 @@ input[type=reset]:not(:hover):not(:active):not(.has-text-color),
 }
 
 .has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background button:not(:hover):not(:active):not(.has-text-color).has-background,
 .has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background,
 .has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background,
 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background,
@@ -1750,6 +1754,7 @@ input[type=reset]:not(:hover):not(:active):not(.has-text-color),
 }
 
 .site .button:not(:hover):not(:active):not(.has-background),
+button:not(:hover):not(:active):not(.has-background),
 input[type=submit]:not(:hover):not(:active):not(.has-background),
 input[type=reset]:not(:hover):not(:active):not(.has-background),
 .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
@@ -1759,6 +1764,7 @@ input[type=reset]:not(:hover):not(:active):not(.has-background),
 }
 
 .has-background .site .button:not(:hover):not(:active):not(.has-background),
+.has-background button:not(:hover):not(:active):not(.has-background),
 .has-background input[type=submit]:not(:hover):not(:active):not(.has-background),
 .has-background input[type=reset]:not(:hover):not(:active):not(.has-background),
 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
@@ -1769,6 +1775,8 @@ input[type=reset]:not(:hover):not(:active):not(.has-background),
 
 .site .button:hover,
 .site .button:active,
+button:hover,
+button:active,
 input[type=submit]:hover,
 input[type=submit]:active,
 input[type=reset]:hover,
@@ -1785,6 +1793,7 @@ input[type=reset]:active,
 }
 
 .site .button:focus,
+button:focus,
 input[type=submit]:focus,
 input[type=reset]:focus,
 .wp-block-search .wp-block-search__button:focus,
@@ -1795,6 +1804,7 @@ input[type=reset]:focus,
 }
 
 .site .button:disabled,
+button:disabled,
 input[type=submit]:disabled,
 input[type=reset]:disabled,
 .wp-block-search .wp-block-search__button:disabled,

src/wp-content/themes/twentytwentyone/style.css

@@ -1715,6 +1715,7 @@ a:hover {
  * Button
  */
 .site .button,
+button,
 input[type=submit],
 input[type=reset],
 .wp-block-search .wp-block-search__button,
@@ -1733,6 +1734,7 @@ input[type=reset],
 }
 
 .site .button:not(:hover):not(:active):not(.has-text-color),
+button:not(:hover):not(:active):not(.has-text-color),
 input[type=submit]:not(:hover):not(:active):not(.has-text-color),
 input[type=reset]:not(:hover):not(:active):not(.has-text-color),
 .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
@@ -1742,6 +1744,7 @@ input[type=reset]:not(:hover):not(:active):not(.has-text-color),
 }
 
 .has-background .site .button:not(:hover):not(:active):not(.has-text-color),
+.has-background button:not(:hover):not(:active):not(.has-text-color),
 .has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color),
 .has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color),
 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
@@ -1751,6 +1754,7 @@ input[type=reset]:not(:hover):not(:active):not(.has-text-color),
 }
 
 .has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background button:not(:hover):not(:active):not(.has-text-color).has-background,
 .has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background,
 .has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background,
 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background,
@@ -1760,6 +1764,7 @@ input[type=reset]:not(:hover):not(:active):not(.has-text-color),
 }
 
 .site .button:not(:hover):not(:active):not(.has-background),
+button:not(:hover):not(:active):not(.has-background),
 input[type=submit]:not(:hover):not(:active):not(.has-background),
 input[type=reset]:not(:hover):not(:active):not(.has-background),
 .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
@@ -1769,6 +1774,7 @@ input[type=reset]:not(:hover):not(:active):not(.has-background),
 }
 
 .has-background .site .button:not(:hover):not(:active):not(.has-background),
+.has-background button:not(:hover):not(:active):not(.has-background),
 .has-background input[type=submit]:not(:hover):not(:active):not(.has-background),
 .has-background input[type=reset]:not(:hover):not(:active):not(.has-background),
 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
@@ -1779,6 +1785,8 @@ input[type=reset]:not(:hover):not(:active):not(.has-background),
 
 .site .button:hover,
 .site .button:active,
+button:hover,
+button:active,
 input[type=submit]:hover,
 input[type=submit]:active,
 input[type=reset]:hover,
@@ -1795,6 +1803,7 @@ input[type=reset]:active,
 }
 
 .site .button:focus,
+button:focus,
 input[type=submit]:focus,
 input[type=reset]:focus,
 .wp-block-search .wp-block-search__button:focus,
@@ -1805,6 +1814,7 @@ input[type=reset]:focus,
 }
 
 .site .button:disabled,
+button:disabled,
 input[type=submit]:disabled,
 input[type=reset]:disabled,
 .wp-block-search .wp-block-search__button:disabled,