瀏覽代碼

Remote: update fluid-typography and clean button styles (#6734)

* update fluid-typography and clean button styles

* revert the version update
Madhu Dollu 2 年之前
父節點
當前提交
2e028015cb
共有 2 個文件被更改,包括 50 次插入53 次删除
  1. 1 40
      remote/style.css
  2. 49 13
      remote/theme.json

+ 1 - 40
remote/style.css

@@ -103,48 +103,9 @@ body > .is-root-container,
 	padding-left: var(--wp--custom--spacing--outer);
  }
 
-/* Button styles */
-
 /*
- * Search block button styles
- * Necessary until the following issue is resolved in Gutenberg:
- * https://github.com/WordPress/gutenberg/issues/36444
+ * Outline Button styles.
  */
-.wp-block-search__button {
-	border-radius: var(--wp--custom--button--border--radius);
-	background-color: var(--wp--preset--color--primary);
-	color: var(--wp--preset--color--background);
-	border: 1px solid var(--wp--preset--color--primary);
-	letter-spacing: .05rem;
-	font-weight: var(--wp--custom--button--typography--font-weight, 400);
-}
-
-/*
- * Button hover styles.
- * Necessary until the following issue is resolved in Gutenberg:
- * https://github.com/WordPress/gutenberg/issues/27075
- */
-
- :is(
-	.wp-block-search__button,
-	.wp-block-button__link
-){
-	padding: calc(.667em + 2px) calc(1.333em + 2px)
-}
-
-:is(
-	.wp-block-search__button,
-	.wp-block-button__link
-):is(
-	:hover,
-	:active,
-	:focus
-) {
-	border: 1px solid var(--wp--custom--button--hover--border--color);
-	background-color: var(--wp--custom--button--hover--color--background);
-	color: var(--wp--custom--button--hover--color--text);
-	cursor: pointer;
-}
 
 :is(
 	.wp-block-search__button,

+ 49 - 13
remote/theme.json

@@ -64,6 +64,7 @@
 			]
 		},
 		"typography": {
+			"fluid": true,
 			"fontFamilies": [
 				{
 					"fontFamily": "\"DM Sans\", sans-serif",
@@ -108,27 +109,35 @@
 			"fontSizes": [
 				{
 					"name": "Small",
+					"fluid": false,
 					"size": "1rem",
 					"slug": "small"
 				},
 				{
 					"name": "Normal",
+					"fluid": false,
 					"size": "1.125rem",
 					"slug": "normal"
 				},
 				{
 					"name": "Medium",
+					"fluid": false,
 					"size": "1.5rem",
 					"slug": "medium"
 				},
 				{
 					"name": "Large",
+					"fluid": false,
 					"size": "1.75rem",
 					"slug": "large"
 				},
 				{
 					"name": "Huge",
-					"size": "min(max(2rem, 5vw), 2.625rem)",
+					"fluid": {
+						"min": "2rem",
+						"max": "2.625rem"
+					},
+					"size": "2rem",
 					"slug": "huge"
 				}
 			]
@@ -136,18 +145,6 @@
 	},
 	"styles": {
 		"blocks": {
-			"core/button": {
-				"border": {
-					"radius": "var(--wp--custom--button--border--radius)",
-					"color": "var(--wp--preset--color--primary)",
-					"width": "1px",
-					"style": "solid"
-				},
-				"color": {
-					"background": "var(--wp--preset--color--primary)",
-					"text": "var(--wp--preset--color--background)"
-				}
-			},
 			"core/heading": {
 				"typography": {
 					"fontWeight": "400"
@@ -216,6 +213,45 @@
 			"text": "var(--wp--preset--color--foreground)"
 		},
 		"elements": {
+			"button": {
+				"border": {
+					"radius": "var(--wp--custom--button--border--radius)",
+					"color": "var(--wp--preset--color--primary)",
+					"width": "1px",
+					"style": "solid"
+				},
+				"color": {
+					"background": "var(--wp--preset--color--primary)",
+					"text": "var(--wp--preset--color--background)"
+				},
+				":hover": {
+					"color": {
+						"text": "var(--wp--preset--color--background)",
+						"background": "var(--wp--preset--color--foreground)"
+					},
+					"border": {
+						"color": "var(--wp--preset--color--foreground)"
+					}
+				},
+				":active": {
+					"color": {
+						"text": "var(--wp--preset--color--background)",
+						"background": "var(--wp--preset--color--foreground)"
+					},
+					"border": {
+						"color": "var(--wp--preset--color--foreground)"
+					}
+				},
+				":focus": {
+					"color": {
+						"text": "var(--wp--preset--color--background)",
+						"background": "var(--wp--preset--color--foreground)"
+					},
+					"border": {
+						"color": "var(--wp--preset--color--foreground)"
+					}
+				}
+			},
 			"h1": {
 				"typography": {
 					"fontSize": "min(max(2.625rem, 5vw), 4.5rem)",