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/variables/components/message.json

@@ -0,0 +1,70 @@
+{
+  "dir_name": "components",
+  "file_name": "message",
+  "file_relative_path": "components/message.sass",
+  "file_line_from": 1,
+  "file_line_to": 15,
+  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/message.sass#L1,L15",
+  "vars": {
+    "message-background-color": {
+      "id": "message-background-color",
+      "name": "$message-background-color",
+      "value": "$background"
+    },
+    "message-radius": {
+      "id": "message-radius",
+      "name": "$message-radius",
+      "value": "$radius"
+    },
+    "message-header-background-color": {
+      "id": "message-header-background-color",
+      "name": "$message-header-background-color",
+      "value": "$text"
+    },
+    "message-header-color": {
+      "id": "message-header-color",
+      "name": "$message-header-color",
+      "value": "$text-invert"
+    },
+    "message-header-padding": {
+      "id": "message-header-padding",
+      "name": "$message-header-padding",
+      "value": "0.5em 0.75em"
+    },
+    "message-header-radius": {
+      "id": "message-header-radius",
+      "name": "$message-header-radius",
+      "value": "$radius"
+    },
+    "message-body-border": {
+      "id": "message-body-border",
+      "name": "$message-body-border",
+      "value": "1px solid $border"
+    },
+    "message-body-color": {
+      "id": "message-body-color",
+      "name": "$message-body-color",
+      "value": "$text"
+    },
+    "message-body-padding": {
+      "id": "message-body-padding",
+      "name": "$message-body-padding",
+      "value": "1em 1.25em"
+    },
+    "message-body-radius": {
+      "id": "message-body-radius",
+      "name": "$message-body-radius",
+      "value": "$radius"
+    },
+    "message-body-pre-background-color": {
+      "id": "message-body-pre-background-color",
+      "name": "$message-body-pre-background-color",
+      "value": "$white"
+    },
+    "message-body-pre-code-background-color": {
+      "id": "message-body-pre-code-background-color",
+      "name": "$message-body-pre-code-background-color",
+      "value": "transparent"
+    }
+  }
+}