Docs/variables data (#1314)

* Replace variables.json with colors.json and update related files accordingly

* Add variables data files

* Update variables include template and all related files to use new variables data

* Fix mobile breakpoint id typo in responsivness docs page

* Fix Liquid syntax error in made-with-bulma docs page

* Update bulma sass files count in modular docs page

* Use breakpoints data in responsiveness helpers docs page

* Use breakpoints and variables data in typography helpers docs page

* Add missing page titles in docs pages front matter

docs/_data/colors.json

@@ -0,0 +1,152 @@
+{
+  "initial": [
+    {
+      "id":"black",
+      "name":"Black",
+      "value": "hsl(0, 0%, 4%)"
+    },
+    {
+      "id":"black-bis",
+      "name":"Black bis",
+      "value": "hsl(0, 0%, 7%)"
+    },
+    {
+      "id":"black-ter",
+      "name":"Black ter",
+      "value": "hsl(0, 0%, 14%)"
+    },
+    {
+      "id":"grey-darker",
+      "name":"Grey darker",
+      "value": "hsl(0, 0%, 21%)"
+    },
+    {
+      "id":"grey-dark",
+      "name":"Grey dark",
+      "value": "hsl(0, 0%, 29%)"
+    },
+    {
+      "id":"grey",
+      "name":"Grey",
+      "value": "hsl(0, 0%, 48%)"
+    },
+    {
+      "id":"grey-light",
+      "name":"Grey light",
+      "value": "hsl(0, 0%, 71%)"
+    },
+    {
+      "id":"grey-lighter",
+      "name":"Grey lighter",
+      "value": "hsl(0, 0%, 86%)"
+    },
+    {
+      "id":"white-ter",
+      "name":"White ter",
+      "value": "hsl(0, 0%, 96%)"
+    },
+    {
+      "id":"white-bis",
+      "name":"White bis",
+      "value": "hsl(0, 0%, 98%)"
+    },
+    {
+      "id":"white",
+      "name":"White",
+      "value": "hsl(0, 0%, 100%)"
+    },
+    {
+      "id":"orange",
+      "name":"Orange",
+      "value": "hsl(14, 100%, 53%)"
+    },
+    {
+      "id":"yellow",
+      "name":"Yellow",
+      "value": "hsl(48, 100%, 67%)"
+    },
+    {
+      "id":"green",
+      "name":"Green",
+      "value": "hsl(141, 71%, 48%)"
+    },
+    {
+      "id":"turquoise",
+      "name":"Turquoise",
+      "value": "hsl(171, 100%, 41%)"
+    },
+    {
+      "id":"cyan",
+      "name":"Cyan",
+      "value": "hsl(204, 86%, 53%)"
+    },
+    {
+      "id":"blue",
+      "name":"Blue",
+      "value": "hsl(217, 71%, 53%)"
+    },
+    {
+      "id":"purple",
+      "name":"Purple",
+      "value": "hsl(271, 100%, 71%)"
+    },
+    {
+      "id":"red",
+      "name":"red",
+      "value": "hsl(348, 100%, 61%)"
+    }
+  ],
+  "derived": [
+    {
+      "id": "white",
+      "valueId": "white",
+      "invertId": "black"
+    },
+    {
+      "id": "black",
+      "valueId": "black",
+      "invertId": "white"
+    },
+    {
+      "id": "light",
+      "valueId": "white-ter",
+      "invertId": "grey-darker"
+    },
+    {
+      "id": "dark",
+      "valueId": "grey-darker",
+      "invertId": "white-ter"
+    },
+    {
+      "id": "primary",
+      "valueId": "turquoise",
+      "invertValue": "#fff"
+    },
+    {
+      "id": "link",
+      "valueId": "blue",
+      "invertValue": "#fff"
+    },
+    {
+      "id": "info",
+      "valueId": "cyan",
+      "invertValue": "#fff"
+    },
+    {
+      "id": "success",
+      "valueId": "green",
+      "invertValue": "#fff"
+    },
+    {
+      "id": "warning",
+      "valueId": "yellow",
+      "invertValue": "rgba(0, 0, 0, 0.7)"
+    },
+    {
+      "id": "danger",
+      "valueId": "red",
+      "invertValue": "#fff"
+    }
+  ],
+  "justColors": ["primary", "link", "info", "success", "warning", "danger"]
+}