Browse Source

Revise font size variables.

Kjell Reigstad 4 years ago
parent
commit
432747aa98
2 changed files with 19 additions and 21 deletions
  1. 12 14
      seedlet-blocks/experimental-theme.json
  2. 7 7
      seedlet-blocks/style.css

+ 12 - 14
seedlet-blocks/experimental-theme.json

@@ -69,37 +69,35 @@
 				"fontSizes": [
 					{
 						"slug": "tiny",
-						"value": "14px"
+						"value": 14
 					},
 					{
 						"slug": "small",
-						"value": "16px"
+						"value": 16
 					},
 					{
-						"slug": "medium",
-						"value": "18px"
+						"slug": "normal",
+						"value": 18
 					},
 					{
 						"slug": "large",
-						"value": "24px"
-					},
-					{
-						"slug": "extra-large",
-						"value": "28px"
+						"value": 24
 					},
 					{
 						"slug": "huge",
-						"value": "32px"
-					},
-					{
-						"slug": "gigantic",
-						"value": "48px"
+						"value": 28
 					}
 				],
 				"spacing": {
 					"customPadding": true,
 					"units": [ "px", "em", "rem", "vh", "vw" ]
 				}
+			},
+			"custom": {
+				"font-size": {
+					"extra-huge": 32,
+					"gigantic": 48
+				}
 			}
 		}
 	}

+ 7 - 7
seedlet-blocks/style.css

@@ -32,13 +32,13 @@ GNU General Public License for more details.
    Doubling up on the :root selector is weird, but it just ensures these have higher specificity than everything else) */
 :root:root {
 	/* Font Size */
-	--global--font-size-xs: var(--wp--preset--font-size--tiny);
-	--global--font-size-sm: var(--wp--preset--font-size--small);
-	--global--font-size-md: var(--wp--preset--font-size--medium);
-	--global--font-size-lg: var(--wp--preset--font-size--large);
-	--global--font-size-xl: var(--wp--preset--font-size--extra-large);
-	--global--font-size-xxl: var(--wp--preset--font-size--huge);
-	--global--font-size-xxxl: var(--wp--preset--font-size--gigantic);
+	--global--font-size-xs: calc( 1px * var(--wp--preset--font-size--tiny) );
+	--global--font-size-sm: calc( 1px * var(--wp--preset--font-size--small) );
+	--global--font-size-md: calc( 1px * var(--wp--preset--font-size--normal) );
+	--global--font-size-lg: calc( 1px * var(--wp--preset--font-size--large) );
+	--global--font-size-xl: calc( 1px * var(--wp--preset--font-size--huge) );
+	--global--font-size-xxl: calc( 1px * var(--wp--custom--font-size--extra-huge) );
+	--global--font-size-xxxl: calc( 1px * var(--wp--custom--font-size--gigantic) );
 
 	/* Colors */
 	--global--color-background: var(--wp--preset--color--background);