From 61afe880dc2ce8560ab2afb4e0a5883ede99d024 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s?= <andres.maneiro@automattic.com>
Date: Fri, 29 May 2020 19:17:08 +0200
Subject: [PATCH] Improve docs

---
 .../developers/themes/theme-json.md           | 182 ++++++++++--------
 1 file changed, 103 insertions(+), 79 deletions(-)

diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md
index c7832103c24ebd..e03ae4ee0fa9f8 100644
--- a/docs/designers-developers/developers/themes/theme-json.md
+++ b/docs/designers-developers/developers/themes/theme-json.md
@@ -167,121 +167,145 @@ This is being implemented, so it's not currently available.
 
 ```
 {
-  global: {
-    presets: {
-      color: [
+  "global": {
+    "presets": {
+      "color": [
         {
-          slug: <preset slug>,
-          value: <preset value>,
+          "slug": <preset slug>,
+          "value": <preset value>
         },
-        { ... },
+        { <more colors> }
       ],
-      font-size: [
+      "font-size": [
         {
-          slug: <preset slug>,
-          value: <preset value>,
+          "slug": <preset slug>,
+          "value": <preset value>
         },
-        { ... },
+        { <more font sizes> }
     ],
-      gradient: [
+      "gradient": [
         {
-          slug: <preset slug>,
-          value: <preset value>,
+          "slug": <preset slug>,
+          "value": <preset value>
         },
-        { ... },
+        { <more gradients> }
       ]
     }
   },
-  core/paragraph: {
-    styles: {
-      typography: {
-        lineHeight: <value>,
-        fontSize: <value>
+  "core/paragraph": {
+    "styles": {
+      "typography": {
+        "fontSize": <value>,
+        "lineHeight": <value>
       },
-      color: {
-        text: <value>
+      "color": {
+        "text": <value>
       }
     }
   },
-  core/heading: {
-    styles: {
-        line-height: <value>,
-        font-size: <value>,
-        color: <value>,
-    }
-  },
-  core/heading/h1: {
-    styles: {
-        line-height: <value>,
-        font-size: <value>,
-        color: <value>,
+  "core/heading": {
+    "styles": {
+      "typography": {
+        "fontSize": <value>,
+        "lineHeight": <value>
+      },
+      "color":{
+        "text": <value>
+      }
     }
   },
-  core/heading/h2: {
-    styles: {
-        line-height: <value>,
-        font-size: <value>,
-        color: <value>,
+  "core/heading/h1": {
+    "styles": {
+      "typography": {
+        "fontSize": <value>,
+        "lineHeight": <value>
+      },
+      "color":{
+        "text": <value>
+      }
     }
   },
-  core/heading/h3: {
-    styles: {
-        line-height: <value>,
-        font-size: <value>,
-        color: <value>,
+  "core/heading/h2": {
+    "styles": {
+      "typography": {
+        "fontSize": <value>,
+        "lineHeight": <value>
+      },
+      "color":{
+        "text": <value>
+      }
     }
   },
-  core/heading/h4: {
-    styles: {
-        line-height: <value>,
-        font-size: <value>,
-        color: <value>,
+  "core/heading/h3": {
+    "styles": {
+      "typography": {
+        "fontSize": <value>,
+        "lineHeight": <value>
+      },
+      "color":{
+        "text": <value>
+      }
     }
   },
-  core/heading/h5: {
-    styles: {
-        line-height: <value>,
-        font-size: <value>,
-        color: <value>,
+  "core/heading/h4": {
+    "styles": {
+      "typography": {
+        "fontSize": <value>,
+        "lineHeight": <value>
+      },
+      "color":{
+        "text": <value>
+      }
     }
   },
-  core/heading/h6: {
-    styles: {
-      typography: {
-        lineHeight: <value>,
-        fontSize: <value>
+  "core/heading/h5": {
+    "styles": {
+      "typography": {
+        "fontSize": <value>,
+        "lineHeight": <value>
       },
-      color: {
-        text: <value>
+      "color":{
+        "text": <value>
       }
     }
   },
-  core/columns: {
-    styles: {
-      color: {
-        text: <value>,
-        background: <value>,
-        background-color: <value>,
+  "core/heading/h6": {
+    "styles": {
+      "typography": {
+        "fontSize": <value>,
+        "lineHeight": <value>
+      },
+      "color":{
+        "text": <value>
       }
     }
   },
-  core/group: {
-    styles: {
-      color: {
-        text: <value>,
-        background: <value>,
-        background-color: <value>,
+  "core/columns": {
+    "styles": {
+      "color": {
+          "background": <value>,
+          "background-color": <value>,
+          "text": <value>
       }
     }
   },
-  core/media-text: {
-    styles: {
-      color: {
-        text: <value>,
-        background: <value>,
-        background-color: <value>,
+  "core/group": {
+    "styles": {
+        "color": {
+            "background": <value>,
+            "background-color": <value>,
+            "text": <value>
+        }
       }
-    }
   },
+  "core/media-text": {
+    "styles": {
+        "color": {
+            "background": <value>,
+            "background-color": <value>,
+            "text": <value>
+        }
+      }
+  }
 }
 ```