Update references to variables in docs (#1238)

* Update navbar variables in component docs page

* Update pagination variables in component docs page

* Update tabs variables in component docs page

* Update button variables in element docs page

* Update table variables in element docs page

* Update title variables in element docs page

* Update variables template to support layout

* Add section variables in relevant docs page

* Add footer variables in relevant docs page

* Update variables template to support custom messages

* Add form generic variables in relevant docs page

* Update derived variables in relevant docs page

* Add generic variables to variables docs page

* Update sass files count in docs Modular page

docs/_includes/variables.html

@@ -2,7 +2,7 @@
 
 <div class="content">
   <p>
-    You can use these variables to <strong>customize</strong> this {%if include.element %}element{% else %}component{% endif %}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
+    {% if include.custom_message %}{{ include.custom_message }}{% else %}You can use these variables to <strong>customize</strong> this {%if include.element %}element{% elsif include.layout %}layout{% else %}component{% endif %}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endif %}
   </p>
 </div>
 

docs/documentation/components/navbar.html

@@ -17,6 +17,8 @@ variables:
   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

docs/documentation/components/pagination.html

@@ -5,8 +5,6 @@ doc-subtab: pagination
 variables:
 - name: $pagination-color
   value: $grey-darker
-- name: $pagination-background
-  value: $white
 - name: $pagination-border-color
   value: $grey-lighter
 - name: $pagination-margin
@@ -37,8 +35,6 @@ variables:
   value: $link
 - name: $pagination-ellipsis-color
   value: $grey-light
-- name: $pagination-shadow-inset
-  value: inset 0 1px 2px rgba($black, 0
 ---
 
 {% capture pagination_example %}

docs/documentation/components/tabs.html

@@ -32,7 +32,7 @@ variables:
 - name: $tabs-boxed-link-active-border-color
   value: $border
 - name: $tabs-boxed-link-active-border-bottom-color
-  value: transparent !important
+  value: transparent
 - name: $tabs-toggle-link-border-color
   value: $border
 - name: $tabs-toggle-link-border-style

docs/documentation/elements/button.html

@@ -46,8 +46,6 @@ variables:
   value: $white-ter
 - name: $button-static-border-color
   value: $grey-lighter
-- name: $button-shadow-inset
-  value: inset 0 1px 2px rgba($black, 0.2)
 ---
 
 {% capture button_example %}

docs/documentation/elements/table.html

@@ -16,8 +16,6 @@ variables:
   value: 0.5em 0.75em
 - name: $table-cell-heading-color
   value: $text-strong
-- name: $table-head-color
-  value: $grey
 - name: $table-head-cell-border-width
   value: 0 0 2px
 - name: $table-head-cell-color

docs/documentation/elements/title.html

@@ -10,10 +10,10 @@ variables:
   value: $size-3
 - name: $title-weight
   value: $weight-semibold
-- name: $title-strong-weight
-  value: inherit
 - name: $title-strong-color
   value: inherit
+- name: $title-strong-weight
+  value: inherit
 - name: $subtitle-color
   value: $grey-dark
 - name: $subtitle-size

docs/documentation/form/general.html

@@ -3,6 +3,21 @@ title: Form controls
 layout: documentation
 doc-tab: form
 doc-subtab: general
+variables:
+- name: $control-radius
+  value: $radius
+- name: $control-radius-small
+  value: $radius-small
+- name: $control-padding-vertical
+  value: calc(0.375em - 1px)
+- name: $control-padding-horizontal
+  value: calc(0.625em - 1px)
+- name: $label-color
+  value: $grey-darker
+- name: $label-weight
+  value: $weight-bold
+- name: $help-size
+  value: $size-small
 ---
 
 {% capture example %}
@@ -1027,6 +1042,10 @@ doc-subtab: general
     </div>
 
     {% include snippet.html content=field_label_example horizontal=true clipped=true %}
+		
+		{% capture custom_message %}Form elements can be <strong>customized</strong> using the following generic variables. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endcapture %}
+			
+    {% include variables.html custom_message = custom_message %}
 
   </div>
 </section>

docs/documentation/layout/footer.html

@@ -3,6 +3,9 @@ title: Footer
 layout: documentation
 doc-tab: layout
 doc-subtab: footer
+variables:
+- name: $footer-background-color
+  value: $background
 ---
 
 {% include subnav-layout.html %}
@@ -51,5 +54,7 @@ doc-subtab: footer
   </div>
 </footer>
 {% endhighlight %}
+
+    {% include variables.html layout=true %}
   </div>
 </section>

docs/documentation/layout/section.html

@@ -3,6 +3,13 @@ title: Section
 layout: documentation
 doc-tab: layout
 doc-subtab: section
+variables:
+- name: $section-padding
+  value: 3rem 1.5rem
+- name: $section-padding-medium
+  value: 9rem 1.5rem
+- name: $section-padding-large
+  value: 18rem 1.5rem
 ---
 
 {% include subnav-layout.html %}
@@ -37,5 +44,7 @@ doc-subtab: section
       <p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
     </div>
 
+    {% include variables.html layout=true %}
+
   </div>
 </section>

docs/documentation/overview/modular.html

@@ -16,7 +16,7 @@ doc-subtab: modular
 
     <div class="content">
       <p>
-        Bulma consists of <strong>29</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
+        Bulma consists of <strong>40</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
       </p>
       <p>
         For example, let's say you only want the Bulma <strong>columns.</strong>

docs/documentation/overview/variables.html

@@ -72,7 +72,7 @@ initial_variables:
 - name: $weight-bold
   value: 700
 - name: $gap
-  value: 24px
+  value: 32px
 - name: $tablet
   value: 769px
 - name: $desktop
@@ -192,6 +192,39 @@ derived_variables:
   value: '("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis)'
 - name: $sizes
   value: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6
+generic_variables:
+- name: $body-background-color
+  value: '#fff'
+- name: $body-size
+  value: 16px
+- name: $body-rendering
+  value: optimizeLegibility
+- name: $body-family
+  value: $family-primary
+- name: $body-color
+  value: $text
+- name: $body-weight
+  value: $weight-normal
+- name: $body-line-height
+  value: 1.5
+- name: $code-family
+  value: $family-code
+- name: $code-padding
+  value: 0.25em 0.5em 0.25em
+- name: $code-weight
+  value: normal
+- name: $code-size
+  value: 0.875em
+- name: $hr-background-color
+  value: $border
+- name: $hr-height
+  value: 1px
+- name: $hr-margin
+  value: 1.5rem 0
+- name: $strong-color
+  value: $text-strong
+- name: $strong-weight
+  value: $weight-bold
 ---
 
 {% include subnav-overview.html %}
@@ -301,5 +334,26 @@ derived_variables:
         </tr>
       {% endfor %}
     </table>
+
+    {% include anchor.html name="Generic variables" %}
+
+    <div class="content">
+      <p>
+        The following generic variables are provided in <code>./sass/base/generic.sass</code>.
+      </p>
+    </div>
+
+    <table class="table is-bordered is-striped">
+      {% for variable in page.generic_variables %}
+        <tr>
+          <td>
+            <code style="white-space: nowrap;">{{ variable.name }}</code>
+          </td>
+          <td>
+            <code>{{ variable.value }}</code>
+          </td>
+        </tr>
+      {% endfor %}
+    </table>
   </div>
 </section>