Add meta to components

docs/documentation/components/menu.html

@@ -2,17 +2,25 @@
 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
 ---
 
-{% include subnav-components.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Menu</h1>
-    <h2 class="subtitle">A simple <strong>menu</strong>, for any type of vertical navigation</h2>
-
-    <hr>
-
 {% capture menu_example %}
 <aside class="menu">
   <p class="menu-label">
@@ -49,16 +57,32 @@ doc-subtab: menu
   </ul>
 </aside>
 {% endcapture %}
-<div class="columns">
-  <div class="column is-3">
-{{menu_example}}
-  </div>
-  <div class="column">
-{% highlight html %}
-{{menu_example}}
-{% endhighlight %}
-  </div>
-</div>
+
+{% include subnav-components.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Menu</h1>
+    <h2 class="subtitle">A simple <strong>menu</strong>, for any type of vertical navigation</h2>
+    {%
+      include meta.html
+      colors=false
+      sizes=false
+      variables=true
+    %}
+
+    <hr>
+
+    <div class="columns">
+      <div class="column is-3">
+        {{menu_example}}
+      </div>
+      <div class="column highlight-full">
+        {% highlight html %}{{menu_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    {% include variables.html %}
 
   </div>
 </section>