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/breadcrumb.html

@@ -1,16 +1,8 @@
 ---
+title: Breadcrumb
 layout: documentation
 doc-tab: components
 doc-subtab: breadcrumb
-variables:
-- name: $breadcrumb-item-color
-  value: $text-light
-- name: $breadcrumb-item-hover-color
-  value: $link-hover
-- name: $breadcrumb-item-active-color
-  value: $text-strong
-- name: $breadcrumb-item-separator-color
-  value: $text
 ---
 
 {% include subnav-components.html %}
@@ -206,7 +198,7 @@ variables:
 
     {% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
 
-    {% include variables.html %}
+    {% include variables.html type='component' %}
 
   </div>
 </section>

docs/documentation/components/card.html

@@ -1,22 +1,8 @@
 ---
+title: Card
 layout: documentation
 doc-tab: components
 doc-subtab: card
-variables:
-- name: $card-color
-  value: $text
-- name: $card-background-color
-  value: $white
-- name: $card-shadow
-  value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-- name: $card-header-color
-  value: $text-strong
-- name: $card-header-shadow
-  value: 0 1px 2px rgba($black, 0.1)
-- name: $card-header-weight
-  value: $weight-bold
-- name: $card-footer-border-top
-  value: 1px solid $border
 ---
 
 {% capture card_example %}
@@ -198,7 +184,7 @@ variables:
       </div>
     </div>
 
-    {% include variables.html %}
+    {% include variables.html type='component' %}
 
   </div>
 </section>

docs/documentation/components/dropdown.html

@@ -1,32 +1,8 @@
 ---
+title: Dropdown
 layout: documentation
 doc-tab: components
 doc-subtab: dropdown
-variables:
-- name: $dropdown-content-background-color
-  value: $white
-- name: $dropdown-content-arrow
-  value: $link
-- name: $dropdown-content-offset
-  value: 4px
-- name: $dropdown-content-radius
-  value: $radius
-- name: $dropdown-content-shadow
-  value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-- name: $dropdown-content-z
-  value: 20
-- name: $dropdown-item-color
-  value: $grey-dark
-- name: $dropdown-item-hover-color
-  value: $black
-- name: $dropdown-item-hover-background-color
-  value: $background
-- name: $dropdown-item-active-color
-  value: $primary-invert
-- name: $dropdown-item-active-background-color
-  value: $primary
-- name: $dropdown-divider-background-color
-  value: $border
 ---
 
 {% capture dropdown_example %}
@@ -368,7 +344,7 @@ variables:
       </div>
     </div>
 
-    {% include variables.html %}
+    {% include variables.html type='component' %}
 
   </div>
 </section>

docs/documentation/components/menu.html

@@ -1,24 +1,8 @@
 ---
+title: Menu
 layout: documentation
 doc-tab: components
 doc-subtab: menu
-variables:
-- name: $menu-item-color
-  value: $text
-- name: $menu-item-radius
-  value: $radius-small
-- name: $menu-item-hover-color
-  value: $text-strong
-- name: $menu-item-hover-background-color
-  value: $background
-- name: $menu-item-active-color
-  value: $link-invert
-- name: $menu-item-active-background-color
-  value: $link
-- name: $menu-list-border-left
-  value: 1px solid $border
-- name: $menu-label-color
-  value: $text-light
 ---
 
 {% capture menu_example %}
@@ -75,7 +59,7 @@ variables:
 
     {% include snippet.html content=menu_example size="one-third" %}
 
-    {% include variables.html %}
+    {% include variables.html type='component' %}
 
   </div>
 </section>

docs/documentation/components/message.html

@@ -1,32 +1,8 @@
 ---
+title: Message
 layout: documentation
 doc-tab: components
 doc-subtab: message
-variables:
-- name: $message-background-color
-  value: $background
-- name: $message-radius
-  value: $radius
-- name: $message-header-background-color
-  value: $text
-- name: $message-header-color
-  value: $text-invert
-- name: $message-header-padding
-  value: 0.5em 0.75em
-- name: $message-header-radius
-  value: $radius
-- name: $message-body-border
-  value: 1px solid $border
-- name: $message-body-color
-  value: $text
-- name: $message-body-padding
-  value: 1em 1.25em
-- name: $message-body-radius
-  value: $radius
-- name: $message-body-pre-background-color
-  value: $white
-- name: $message-body-pre-code-background-color
-  value: transparent
 ---
 
 {% capture message_example %}
@@ -51,7 +27,7 @@ variables:
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
   </div>
 </article>
-{% for color in site.data.variables.justColors %}
+{% for color in site.data.colors.justColors %}
 <article class="message is-{{ color }}">
   <div class="message-header">
     <p>{{ color | capitalize }}</p>
@@ -123,7 +99,7 @@ variables:
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
   </div>
 </article>
-{% for color in site.data.variables.justColors %}
+{% for color in site.data.colors.justColors %}
 <article class="message is-{{ color }}">
   <div class="message-body">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
@@ -173,7 +149,7 @@ variables:
 
     {% include snippet.html content=message_large %}
 
-    {% include variables.html %}
+    {% include variables.html type='component' %}
 
   </div>
 </section>

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>

docs/documentation/components/navbar.html

@@ -1,64 +1,8 @@
 ---
+title: Navbar
 layout: documentation
 doc-tab: components
 doc-subtab: navbar
-variables:
-- name: $navbar-background-color
-  value: $white
-- name: $navbar-height
-  value: 3.25rem
-- name: $navbar-item-color
-  value: $grey-dark
-- name: $navbar-item-hover-color
-  value: $black
-- name: $navbar-item-hover-background-color
-  value: $background
-- name: $navbar-item-active-color
-  value: $black
-- name: $navbar-item-active-background-color
-  value: transparent
-- name: $navbar-item-img-max-height
-  value: 1.75rem
-- name: $navbar-tab-hover-background-color
-  value: transparent
-- name: $navbar-tab-hover-border-bottom-color
-  value: $primary
-- name: $navbar-tab-active-color
-  value: $primary
-- name: $navbar-tab-active-background-color
-  value: transparent
-- name: $navbar-tab-active-border-bottom-color
-  value: $primary
-- name: $navbar-tab-active-border-bottom-style
-  value: solid
-- name: $navbar-tab-active-border-bottom-width
-  value: 3px
-- name: $navbar-dropdown-background-color
-  value: $white
-- name: $navbar-dropdown-border-top
-  value: 1px solid $border
-- name: $navbar-dropdown-offset
-  value: -4px
-- name: $navbar-dropdown-arrow
-  value: $link
-- name: $navbar-dropdown-radius
-  value: $radius-large
-- name: $navbar-dropdown-z
-  value: 20
-- name: $navbar-dropdown-boxed-radius
-  value: $radius-large
-- name: $navbar-dropdown-boxed-shadow
-  value: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-- name: $navbar-dropdown-item-hover-color
-  value: $black
-- name: $navbar-dropdown-item-hover-background-color
-  value: $background
-- name: $navbar-dropdown-item-active-color
-  value: $primary
-- name: $navbar-dropdown-item-active-background-color
-  value: $background
-- name: $navbar-divider-background-color
-  value: $border
 ---
 
 {% include subnav-components.html %}
@@ -1072,7 +1016,7 @@ document.addEventListener('DOMContentLoaded', function () {
       {% include examples/navbar-color.html color="white" light=true %}
     </div>
 
-    {% include variables.html %}
+    {% include variables.html type='component' %}
 
   </div>
 </section>

docs/documentation/components/pagination.html

@@ -1,40 +1,8 @@
 ---
+title: Pagination
 layout: documentation
 doc-tab: components
 doc-subtab: pagination
-variables:
-- name: $pagination-color
-  value: $grey-darker
-- name: $pagination-border-color
-  value: $grey-lighter
-- name: $pagination-margin
-  value: -0.25rem
-- name: $pagination-hover-color
-  value: $link-hover
-- name: $pagination-hover-border-color
-  value: $link-hover-border
-- name: $pagination-focus-color
-  value: $link-focus
-- name: $pagination-focus-border-color
-  value: $link-focus-border
-- name: $pagination-active-color
-  value: $link-active
-- name: $pagination-active-border-color
-  value: $link-active-border
-- name: $pagination-disabled-color
-  value: $grey
-- name: $pagination-disabled-background-color
-  value: $grey-lighter
-- name: $pagination-disabled-border-color
-  value: $grey-lighter
-- name: $pagination-current-color
-  value: $link-invert
-- name: $pagination-current-background-color
-  value: $link
-- name: $pagination-current-border-color
-  value: $link
-- name: $pagination-ellipsis-color
-  value: $grey-light
 ---
 
 {% capture pagination_example %}
@@ -238,7 +206,7 @@ variables:
 
     {% include snippet.html content=pagination_large_example horizontal=true more=true %}
 
-    {% include variables.html %}
+    {% include variables.html type='component' %}
 
   </div>
 </section>

docs/documentation/components/panel.html

@@ -1,46 +1,8 @@
 ---
+title: Panel
 layout: documentation
 doc-tab: components
 doc-subtab: panel
-variables:
-- name: $panel-item-border
-  value: 1px solid $border
-- name: $panel-heading-background-color
-  value: $background
-- name: $panel-heading-color
-  value: $text-strong
-- name: $panel-heading-line-height
-  value: 1.25
-- name: $panel-heading-padding
-  value: 0.5em 0.75em
-- name: $panel-heading-radius
-  value: $radius
-- name: $panel-heading-size
-  value: 1.25em
-- name: $panel-heading-weight
-  value: $weight-light
-- name: $panel-tab-border-bottom
-  value: 1px solid $border
-- name: $panel-tab-active-border-bottom-color
-  value: $link-active-border
-- name: $panel-tab-active-color
-  value: $link-active
-- name: $panel-list-item-color
-  value: $text
-- name: $panel-list-item-hover-color
-  value: $link
-- name: $panel-block-color
-  value: $text-strong
-- name: $panel-block-hover-background-color
-  value: $background
-- name: $panel-block-active-border-left-color
-  value: $link
-- name: $panel-block-active-color
-  value: $link-active
-- name: $panel-block-active-icon-color
-  value: $link
-- name: $panel-icon-color
-  value: $text-light
 ---
 
 {% capture panel_example %}
@@ -154,7 +116,7 @@ variables:
 
     {% include snippet.html content=panel_example size="one-third" %}
 
-    {% include variables.html %}
+    {% include variables.html type='component' %}
 
   </div>
 </section>

docs/documentation/components/tabs.html

@@ -1,56 +1,8 @@
 ---
+title: Tabs
 layout: documentation
 doc-tab: components
 doc-subtab: tabs
-variables:
-- name: $tabs-border-bottom-color
-  value: $border
-- name: $tabs-border-bottom-style
-  value: solid
-- name: $tabs-border-bottom-width
-  value: 1px
-- name: $tabs-link-color
-  value: $text
-- name: $tabs-link-hover-border-bottom-color
-  value: $text-strong
-- name: $tabs-link-hover-color
-  value: $text-strong
-- name: $tabs-link-active-border-bottom-color
-  value: $primary
-- name: $tabs-link-active-color
-  value: $primary
-- name: $tabs-link-padding
-  value: 0.5em 1em
-- name: $tabs-boxed-link-radius
-  value: $radius
-- name: $tabs-boxed-link-hover-background-color
-  value: $background
-- name: $tabs-boxed-link-hover-border-bottom-color
-  value: $border
-- name: $tabs-boxed-link-active-background-color
-  value: $white
-- name: $tabs-boxed-link-active-border-color
-  value: $border
-- name: $tabs-boxed-link-active-border-bottom-color
-  value: transparent
-- name: $tabs-toggle-link-border-color
-  value: $border
-- name: $tabs-toggle-link-border-style
-  value: solid
-- name: $tabs-toggle-link-border-width
-  value: 1px
-- name: $tabs-toggle-link-hover-background-color
-  value: $background
-- name: $tabs-toggle-link-hover-border-color
-  value: $border-hover
-- name: $tabs-toggle-link-radius
-  value: $radius
-- name: $tabs-toggle-link-active-background-color
-  value: $primary
-- name: $tabs-toggle-link-active-border-color
-  value: $primary
-- name: $tabs-toggle-link-active-color
-  value: $primary-invert
 ---
 
 {% capture tabs_example %}
@@ -453,7 +405,7 @@ variables:
 
     {% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
 
-    {% include variables.html %}
+    {% include variables.html type='component' %}
 
   </div>
 </section>