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/elements/box.html

@@ -3,21 +3,6 @@ title: Box
 layout: documentation
 doc-tab: elements
 doc-subtab: box
-variables:
-- name: $box-color
-  value: $text
-- name: $box-background-color
-  value: $white
-- name: $box-radius
-  value: $radius-large
-- name: $box-shadow
-  value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-- name: $box-padding
-  value: 1.25rem
-- name: $box-link-hover-shadow
-  value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
-- name: $box-link-active-shadow
-  value: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
 ---
 
 {% include subnav-elements.html %}
@@ -81,7 +66,7 @@ variables:
 
     {% include snippet.html content=box_example more=true %}
 
-    {% include variables.html %}
+    {% include variables.html type='element' %}
 
   </div>
 </section>

docs/documentation/elements/button.html

@@ -3,49 +3,6 @@ title: Button
 layout: documentation
 doc-tab: elements
 doc-subtab: button
-variables:
-- name: $button-color
-  value: $grey-darker
-- name: $button-background-color
-  value: $white
-- name: $button-border-color
-  value: $grey-lighter
-- name: $button-hover-color
-  value: $link-hover
-- name: $button-hover-border-color
-  value: $link-hover-border
-- name: $button-focus-color
-  value: $link-focus
-- name: $button-focus-border-color
-  value: $link-focus-border
-- name: $button-focus-box-shadow-size
-  value: 0 0 0 0.125em
-- name: $button-focus-box-shadow-color
-  value: rgba($link, 0.25)
-- name: $button-active-color
-  value: $link-active
-- name: $button-active-border-color
-  value: $link-active-border
-- name: $button-link-color
-  value: $text
-- name: $button-link-hover-background-color
-  value: $background
-- name: $button-link-hover-color
-  value: $text-strong
-- name: $button-disabled-background-color
-  value: $white
-- name: $button-disabled-border-color
-  value: $grey-lighter
-- name: $button-disabled-shadow
-  value: none
-- name: $button-disabled-opacity
-  value: 0.5
-- name: $button-static-color
-  value: $grey
-- name: $button-static-background-color
-  value: $white-ter
-- name: $button-static-border-color
-  value: $grey-lighter
 ---
 
 {% capture button_example %}
@@ -615,7 +572,7 @@ variables:
 
     {% include snippet.html content=button_group_addons_example %}
 
-    {% include variables.html %}
+    {% include variables.html type='element' %}
 
   </div>
 </section>

docs/documentation/elements/content.html

@@ -3,39 +3,6 @@ title: Content
 layout: documentation
 doc-tab: elements
 doc-subtab: content
-variables:
-- name: $content-heading-color
-  value: $text-strong
-- name: $content-heading-weight
-  value: $weight-normal
-- name: $content-heading-line-height
-  value: 1.125
-- name: $content-blockquote-background-color
-  value: $background
-- name: $content-blockquote-border-left
-  value: 5px solid $border
-- name: $content-blockquote-padding
-  value: 1.25em 1.5em
-- name: $content-pre-padding
-  value: 1.25em 1.5em
-- name: $content-table-cell-border
-  value: 1px solid $border
-- name: $content-table-cell-border-width
-  value: 0 0 1px
-- name: $content-table-cell-padding
-  value: 0.5em 0.75em
-- name: $content-table-cell-heading-color
-  value: $text-strong
-- name: $content-table-row-hover-background-color
-  value: $background
-- name: $content-table-head-cell-border-width
-  value: 0 0 2px
-- name: $content-table-head-cell-color
-  value: $text-strong
-- name: $content-table-foot-cell-border-width
-  value: 2px 0 0
-- name: $content-table-foot-cell-color
-  value: $text-strong
 ---
 
 {% capture content_pre %}
@@ -214,7 +181,7 @@ variables:
       </div>
     </div>
 
-    {% include variables.html element=true %}
+    {% include variables.html type='element' %}
 
   </div>
 </section>

docs/documentation/elements/icon.html

@@ -6,16 +6,6 @@ mdi: true
 layout: documentation
 doc-tab: elements
 doc-subtab: icon
-variables:
-- name: $icon-dimensions
-  value: 1.5rem
-- name: $icon-dimensions-small
-  value: 1rem
-- name: $icon-dimensions-medium
-  value: 2rem
-- name: $icon-dimensions-large
-  value: 3rem
-
 ---
 
 {% capture icon_example %}
@@ -954,7 +944,7 @@ variables:
       </tbody>
     </table>
 
-    {% include variables.html %}
+    {% include variables.html type='element' %}
 
   </div>
 </section>

docs/documentation/elements/image.html

@@ -11,9 +11,6 @@ dimensions:
 - 64
 - 96
 - 128
-variables:
-- name: $dimensions
-  value: 16 24 32 48 64 96 128
 ---
 
 {% capture image %}
@@ -122,7 +119,7 @@ variables:
       <p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
     </div>
 
-    {% include variables.html %}
+    {% include variables.html type='element' %}
 
   </div>
 </section>

docs/documentation/elements/notification.html

@@ -3,13 +3,6 @@ title: Notification
 layout: documentation
 doc-tab: elements
 doc-subtab: notification
-variables:
-- name: $notification-background-color
-  value: $background
-- name: $notification-radius
-  value: $radius
-- name: $notification-padding
-  value: 1.25rem 2.5rem 1.25rem 1.5rem
 ---
 
 {% capture notification %}
@@ -22,7 +15,7 @@ variables:
 {% endcapture %}
 
 {% capture notification_colors %}
-{% for color in site.data.variables.justColors %}
+{% for color in site.data.colors.justColors %}
 <div class="notification is-{{ color }}">
   <button class="delete"></button>
   Primar lorem ipsum dolor sit amet, consectetur
@@ -55,7 +48,7 @@ variables:
 
     {% include snippet.html content=notification_colors %}
 
-    {% include variables.html %}
+    {% include variables.html type='element' %}
 
   </div>
 </section>

docs/documentation/elements/progress.html

@@ -3,11 +3,6 @@ title: Progress Bar
 layout: documentation
 doc-tab: elements
 doc-subtab: progress
-variables:
-- name: $progress-bar-background-color
-  value: $border
-- name: $progress-value-background-color
-  value: $text
 ---
 
 {% capture progress %}
@@ -57,7 +52,7 @@ variables:
 
     {% include snippet.html content=progress_sizes %}
 
-    {% include variables.html element=true %}
+    {% include variables.html type='element' %}
 
   </div>
 </section>

docs/documentation/elements/table.html

@@ -3,37 +3,6 @@ title: Table
 layout: documentation
 doc-tab: elements
 doc-subtab: table
-variables:
-- name: $table-color
-  value: $grey-darker
-- name: $table-background-color
-  value: $white
-- name: $table-cell-border
-  value: 1px solid $grey-lighter
-- name: $table-cell-border-width
-  value: 0 0 1px
-- name: $table-cell-padding
-  value: 0.5em 0.75em
-- name: $table-cell-heading-color
-  value: $text-strong
-- name: $table-head-cell-border-width
-  value: 0 0 2px
-- name: $table-head-cell-color
-  value: $text-strong
-- name: $table-foot-cell-border-width
-  value: 2px 0 0
-- name: $table-foot-cell-color
-  value: $text-strong
-- name: $table-row-hover-background-color
-  value: $white-bis
-- name: $table-row-active-background-color
-  value: $primary
-- name: $table-row-active-color
-  value: $primary-invert
-- name: $table-striped-row-even-background-color
-  value: $white-bis
-- name: $table-striped-row-even-hover-background-color
-  value: $white-ter
 ---
 
 {% capture table_example %}
@@ -623,7 +592,7 @@ variables:
       </div>
     </div>
 
-    {% include variables.html element=true %}
+    {% include variables.html type='element' %}
 
   </div>
 </section>

docs/documentation/elements/tag.html

@@ -3,15 +3,6 @@ title: Tags
 layout: documentation
 doc-tab: elements
 doc-subtab: tag
-variables:
-- name: $tag-background-color
-  value: $background
-- name: $tag-color
-  value: $text
-- name: $tag-radius
-  value: $radius
-- name: $tag-delete-margin
-  value: 1px
 ---
 
 {% capture tag %}
@@ -456,6 +447,6 @@ variables:
       </div>
     </div>
 
-    {% include variables.html element=true %}
+    {% include variables.html type='element' %}
   </div>
 </section>

docs/documentation/elements/title.html

@@ -3,27 +3,6 @@ title: Title and Subtitle
 layout: documentation
 doc-tab: elements
 doc-subtab: title
-variables:
-- name: $title-color
-  value: $grey-darker
-- name: $title-size
-  value: $size-3
-- name: $title-weight
-  value: $weight-semibold
-- name: $title-strong-color
-  value: inherit
-- name: $title-strong-weight
-  value: inherit
-- name: $subtitle-color
-  value: $grey-dark
-- name: $subtitle-size
-  value: $size-5
-- name: $subtitle-weight
-  value: $weight-normal
-- name: $subtitle-strong-color
-  value: $grey-darker
-- name: $subtitle-strong-weight
-  value: $weight-semibold
 ---
 
 {% capture default %}
@@ -203,7 +182,7 @@ variables:
       </div>
     </div>
 
-    {% include variables.html element=true %}
+    {% include variables.html type='element' %}
 
   </div>
 </section>