Merge pull request #2659 from Automattic/seedlet-blocks/update/theme-json-to-latest-spec

Update theme.json to follow latest spec

seedlet-blocks/experimental-theme.json

@@ -1,58 +1,103 @@
 {
 	"global": {
-		"presets": {
-			"font-size": [
-				{
-					"slug": "tiny",
-					"value": "14px"
-				},
-				{
-					"slug": "small",
-					"value": "16px"
-				},
-				{
-					"slug": "medium",
-					"value": "18px"
-				},
-				{
-					"slug": "large",
-					"value": "24px"
-				},
-				{
-					"slug": "extra-large",
-					"value": "28px"
-				},
-				{
-					"slug": "huge",
-					"value": "32px"
-				},
-				{
-					"slug": "gigantic",
-					"value": "48px"
+		"settings": {
+			"color": {
+				"gradients": [
+					{
+						"slug": "hard-diagonal",
+						"gradient": "linear-gradient(to bottom right, #3C8067 49.9%, #FAFBF6 50%)"
+					},
+					{
+						"slug": "hard-diagonal-inverted",
+						"gradient": "linear-gradient(to top left, #3C8067 49.9%, #FAFBF6 50%)"
+					},
+					{
+						"slug": "hard-horizontal",
+						"gradient": "linear-gradient(to bottom, #3C8067 50%, #FAFBF6 50%)"
+					},
+					{
+						"slug": "hard-horizontal-inverted",
+						"gradient": "linear-gradient(to top, #3C8067 50%, #FAFBF6 50%)"
+					},
+					{
+						"slug": "diagonal",
+						"gradient": "linear-gradient(to bottom right, #3C8067, #FAFBF6)"
+					},
+					{
+						"slug": "diagonal-inverted",
+						"gradient": "linear-gradient(to top left, #3C8067, #FAFBF6)"
+					},
+					{
+						"slug": "horizontal",
+						"gradient": "linear-gradient(to bottom, #3C8067, #FAFBF6)"
+					},
+					{
+						"slug": "horizontal-inverted",
+						"gradient": "linear-gradient(to top, #3C8067, #FAFBF6)"
+					},
+					{
+						"slug": "stripe",
+						"gradient": "linear-gradient(to bottom, transparent 20%, #3C8067 20%, #3C8067 80%, transparent 80%)"
+					}
+				],
+				"palette": [
+					{
+						"slug": "background",
+						"color": "#FFFFFF"
+					},
+					{
+						"slug": "foreground",
+						"color": "#333333"
+					},
+					{
+						"slug": "primary",
+						"color": "#000000"
+					},
+					{
+						"slug": "secondary",
+						"color": "#3C8067"
+					},
+					{
+						"slug": "tertiary",
+						"color": "#FAFBF6"
+					}
+				]
+			},
+			"typography": {
+				"customFontSize": true,
+				"customLineHeight": true,
+				"fontSizes": [
+					{
+						"name": "Tiny",
+						"slug": "tiny",
+						"size": 14
+					},
+					{
+						"name": "Small",
+						"slug": "small",
+						"size": 16
+					},
+					{
+						"name": "Normal",
+						"slug": "normal",
+						"size": 18
+					},
+					{
+						"name": "Large",
+						"slug": "large",
+						"size": 24
+					},
+					{
+						"name": "Huge",
+						"slug": "huge",
+						"size": 28
+					}
+				],
+				"spacing": {
+					"customPadding": true,
+					"units": [ "px", "em", "rem", "vh", "vw" ]
 				}
-			],
-			"color": [
-				{
-					"slug": "background",
-					"value": "#FFFFFF"
-				},
-				{
-					"slug": "foreground",
-					"value": "#333333"
-				},
-				{
-					"slug": "primary",
-					"value": "#000000"
-				},
-				{
-					"slug": "secondary",
-					"value": "#3C8067"
-				},
-				{
-					"slug": "tertiary",
-					"value": "#FAFBF6"
-				}
-			]
+			}
 		}
 	}
-}
+}

seedlet-blocks/style-editor.css

@@ -6,8 +6,6 @@ body {
 	--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);
 
 	/* Colors */
 	--global--color-background: var(--wp--preset--color--background);

seedlet-blocks/style.css

@@ -32,13 +32,11 @@ 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) );
 
 	/* Colors */
 	--global--color-background: var(--wp--preset--color--background);