Add meta to form

docs/documentation/form/checkbox.html

@@ -34,6 +34,12 @@ doc-subtab: checkbox
     <h2 class="subtitle">
       The 2-state <strong>checkbox</strong> in its native format
     </h2>
+    {%
+      include meta.html
+      colors=false
+      sizes=false
+      variables=false
+    %}
 
     <hr>
 

docs/documentation/form/input.html

@@ -3,6 +3,37 @@ title: Input
 layout: documentation
 doc-tab: form
 doc-subtab: input
+variables:
+- name: $input-color
+  value: $grey-darker
+- name: $input-background-color
+  value: $white
+- name: $input-border-color
+  value: $grey-lighter
+- name: $input-shadow
+  value: inset 0 1px 2px rgba($black, 0.1)
+- name: $input-hover-color
+  value: $grey-darker
+- name: $input-hover-border-color
+  value: $grey-light
+- name: $input-focus-color
+  value: $grey-darker
+- name: $input-focus-border-color
+  value: $link
+- name: $input-disabled-color
+  value: $text-light
+- name: $input-disabled-background-color
+  value: $background
+- name: $input-disabled-border-color
+  value: $background
+- name: $input-arrow
+  value: $link
+- name: $input-icon-color
+  value: $grey-lighter
+- name: $input-icon-active-color
+  value: $grey
+- name: $input-radius
+  value: $radius
 ---
 
 {% capture input_example %}
@@ -191,6 +222,12 @@ doc-subtab: input
     <h2 class="subtitle">
       The <strong>text input</strong> and its variations
     </h2>
+    {%
+      include meta.html
+      colors=true
+      sizes=true
+      variables=true
+    %}
 
     <hr>
 
@@ -219,9 +256,7 @@ doc-subtab: input
       </div>
     </div>
 
-    <hr>
+    {% include heading.html name="Colors" %}
-
-    <h3 id="input-color" class="title">Colors</h3>
 
     <div class="columns">
       <div class="column is-half">
@@ -232,8 +267,8 @@ doc-subtab: input
       </div>
     </div>
 
-    <hr>
+    {% include heading.html name="Sizes" %}
-    <h3 id="input-size" class="title">Sizes</h3>
+
     <div class="columns">
       <div class="column is-half">
         {{sizes_example}}
@@ -391,5 +426,7 @@ doc-subtab: input
       </div>
     </div>
 
+    {% include variables.html element=true %}
+
   </div>
 </section>

docs/documentation/form/radio.html

@@ -56,6 +56,12 @@ doc-subtab: radio
     <h2 class="subtitle">
       The mutually exclusive <strong>radio buttons</strong> in their native format
     </h2>
+    {%
+      include meta.html
+      colors=false
+      sizes=false
+      variables=false
+    %}
 
     <hr>
 

docs/documentation/form/select.html

@@ -269,6 +269,12 @@ doc-subtab: select
     <h2 class="subtitle">
       The browser built-in <strong>select dropdown</strong>, styled accordingly
     </h2>
+    {%
+      include meta.html
+      colors=true
+      sizes=true
+      variables=false
+    %}
 
     <hr>
 
@@ -314,9 +320,7 @@ doc-subtab: select
       </div>
     {% endif %}
 
-    <hr>
+    {% include heading.html name="Colors" %}
-
-    <h3 id="select-color" class="title">Colors</h3>
 
     <div class="columns">
       <div class="column is-half">
@@ -327,8 +331,8 @@ doc-subtab: select
       </div>
     </div>
 
-    <hr>
+    {% include heading.html name="Sizes" %}
-    <h3 id="select-size" class="title">Sizes</h3>
+
     <div class="columns">
       <div class="column is-half">
         {{sizes_example}}

docs/documentation/form/textarea.html

@@ -125,6 +125,12 @@ doc-subtab: textarea
     <h2 class="subtitle">
       The multiline <strong>textarea</strong> and its variations
     </h2>
+    {%
+      include meta.html
+      colors=true
+      sizes=true
+      variables=false
+    %}
 
     <hr>
 
@@ -165,9 +171,7 @@ doc-subtab: textarea
       </div>
     </div>
 
-    <hr>
+    {% include heading.html name="Colors" %}
-
-    <h3 id="input-color" class="title">Colors</h3>
 
     <div class="columns">
       <div class="column is-half">
@@ -178,8 +182,8 @@ doc-subtab: textarea
       </div>
     </div>
 
-    <hr>
+    {% include heading.html name="Sizes" %}
-    <h3 id="input-size" class="title">Sizes</h3>
+
     <div class="columns">
       <div class="column is-half">
         {{sizes_example}}