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/documentation/components/modal.html

@@ -1,50 +1,8 @@
 ---
+title: Modal
 layout: documentation
 doc-tab: components
 doc-subtab: modal
-variables:
-- name: $modal-z
-  value: 20
-- name: $modal-background-background-color
-  value: rgba($black, 0.86)
-- name: $modal-content-width
-  value: 640px
-- name: $modal-content-margin-mobile
-  value: 20px
-- name: $modal-content-spacing-mobile
-  value: 160px
-- name: $modal-content-spacing-tablet
-  value: 40px
-- name: $modal-close-dimensions
-  value: 40px
-- name: $modal-close-right
-  value: 20px
-- name: $modal-close-top
-  value: 20px
-- name: $modal-card-spacing
-  value: 40px
-- name: $modal-card-head-background-color
-  value: $background
-- name: $modal-card-head-border-bottom
-  value: 1px solid $border
-- name: $modal-card-head-padding
-  value: 20px
-- name: $modal-card-head-radius
-  value: $radius-large
-- name: $modal-card-title-color
-  value: $text-strong
-- name: $modal-card-title-line-height
-  value: 1
-- name: $modal-card-title-size
-  value: $size-4
-- name: $modal-card-foot-radius
-  value: $radius-large
-- name: $modal-card-foot-border-top
-  value: 1px solid $border
-- name: $modal-card-body-background-color
-  value: $white
-- name: $modal-card-body-padding
-  value: 20px
 ---
 
 {% capture modal %}
@@ -169,7 +127,7 @@ variables:
       {% highlight html %}{{ modal_card }}{% endhighlight %}
     </div>
 
-    {% include variables.html %}
+    {% include variables.html type='component' %}
 
   </div>
 </section>