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/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>