浏览代码

Add button styles (#5973)

Madhu Dollu 3 年之前
父节点
当前提交
a59dc7cf53
共有 2 个文件被更改,包括 56 次插入10 次删除
  1. 44 3
      curator/style.css
  2. 12 7
      curator/theme.json

+ 44 - 3
curator/style.css

@@ -28,10 +28,51 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
  * https://github.com/WordPress/gutenberg/issues/27075
  */
 
-.wp-block-search__button:hover,
-.wp-block-file .wp-block-file__button:hover,
+.wp-block-button:not(.is-style-outline) .wp-block-button__link {
+	padding: 0;
+}
 .wp-block-button__link:hover {
-	background-color: var(--wp--preset--color--secondary);
+	text-decoration: underline;
+	color: var(--wp--preset--color--foreground);
+}
+.wp-block-button__link.wp-block-button__link:active {
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary);
+}
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
+	color: var(--wp--preset--color--foreground);
+	border-bottom: 1px dashed var(--wp--preset--color--foreground);
+}
+.wp-block-button:is(.is-style-outline) .wp-block-button__link:focus {
+	outline: 1px dashed var(--wp--preset--color--foreground);
+}
+
+.wp-block-search__button.wp-block-search__button,
+.wp-block-file .wp-block-file__button.wp-block-file__button {
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
+	font-family: var(--wp--preset--font-family--heading-font);
+	font-size: var(--wp--custom--button--typography--font-size);
+	font-weight: 900;
+}
+
+:is(
+	.wp-block-search__button,
+	.wp-block-file .wp-block-file__button
+):is(
+	:hover,
+	:focus
+) {
+	background-color: var(--wp--preset--color--foreground);
+}
+
+:is(
+	.wp-block-search__button,
+	.wp-block-file .wp-block-file__button
+):is(
+	:focus
+) {
+	outline: 1px dashed var(--wp--preset--color--foreground);
 }
 
 /*

+ 12 - 7
curator/theme.json

@@ -64,6 +64,11 @@
 			"gap": {
 				"horizontal": "min(20px, 4vw)",
 				"vertical": "min(20px, 4vw)"
+			},
+			"button": {
+				"typography": {
+					"fontSize": "1.375rem"
+				}
 			}
 		},
 		"layout": {
@@ -170,17 +175,17 @@
 		"blocks": {
 			"core/button": {
 				"border": {
-					"radius": "4px"
+					"radius": "0"
 				},
 				"color": {
-					"background": "var(--wp--preset--color--primary)",
-					"text": "var(--wp--preset--color--background)"
+					"background": "transparent",
+					"text": "var(--wp--preset--color--foreground)"
 				},
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--body-font)",
-					"fontSize": "var(--wp--preset--font-size--medium)",
-					"fontWeight": "normal",
-					"lineHeight": "2"
+					"fontFamily": "var(--wp--preset--font-family--heading-font)",
+					"fontSize": "var(--wp--custom--button--typography--font-size)",
+					"fontWeight": "900",
+					"lineHeight": "1"
 				}
 			},
 			"core/code": {