Add variables data

docs/documentation/components/panel.html

@@ -104,7 +104,7 @@ variables:
     remember me
   </label>
   <div class="panel-block">
-    <button class="button is-primary is-outlined is-fullwidth">
+    <button class="button is-link is-outlined is-fullwidth">
       reset all filters
     </button>
   </div>

docs/documentation/elements/button.html

@@ -64,11 +64,12 @@ variables:
 <a class="button is-light">Light</a>
 <a class="button is-dark">Dark</a>
 <a class="button is-black">Black</a>
-<a class="button is-link">Link</a>
+<a class="button is-text">Text</a>
 {% endcapture %}
 
 {% capture button_colors_b_example %}
 <a class="button is-primary">Primary</a>
+<a class="button is-link">Link</a>
 <a class="button is-info">Info</a>
 <a class="button is-success">Success</a>
 <a class="button is-warning">Warning</a>
@@ -85,6 +86,7 @@ variables:
 {% capture button_outlined_example %}
 <a class="button is-outlined">Outlined</a>
 <a class="button is-primary is-outlined">Outlined</a>
+<a class="button is-link is-outlined">Outlined</a>
 <a class="button is-info is-outlined">Outlined</a>
 <a class="button is-success is-outlined">Outlined</a>
 <a class="button is-danger is-outlined">Outlined</a>
@@ -92,6 +94,7 @@ variables:
 
 {% capture button_inverted_example %}
 <a class="button is-primary is-inverted">Inverted</a>
+<a class="button is-link is-inverted">Inverted</a>
 <a class="button is-info is-inverted">Inverted</a>
 <a class="button is-success is-inverted">Inverted</a>
 <a class="button is-danger is-inverted">Inverted</a>
@@ -99,6 +102,7 @@ variables:
 
 {% capture button_inverted_outlined_example %}
 <a class="button is-primary is-inverted is-outlined">Invert Outlined</a>
+<a class="button is-link is-inverted is-outlined">Invert Outlined</a>
 <a class="button is-info is-inverted is-outlined">Invert Outlined</a>
 <a class="button is-success is-inverted is-outlined">Invert Outlined</a>
 <a class="button is-danger is-inverted is-outlined">Invert Outlined</a>
@@ -107,6 +111,7 @@ variables:
 {% capture button_normal_example %}
 <a class="button">Normal</a>
 <a class="button is-primary">Normal</a>
+<a class="button is-link">Normal</a>
 <a class="button is-info">Normal</a>
 <a class="button is-success">Normal</a>
 <a class="button is-warning">Normal</a>
@@ -116,6 +121,7 @@ variables:
 {% capture button_hover_example %}
 <a class="button is-hovered">Hover</a>
 <a class="button is-primary is-hovered">Hover</a>
+<a class="button is-link is-hovered">Hover</a>
 <a class="button is-info is-hovered">Hover</a>
 <a class="button is-success is-hovered">Hover</a>
 <a class="button is-warning is-hovered">Hover</a>
@@ -125,6 +131,7 @@ variables:
 {% capture button_focus_example %}
 <a class="button is-focused">Focus</a>
 <a class="button is-primary is-focused">Focus</a>
+<a class="button is-link is-focused">Focus</a>
 <a class="button is-info is-focused">Focus</a>
 <a class="button is-success is-focused">Focus</a>
 <a class="button is-warning is-focused">Focus</a>
@@ -134,6 +141,7 @@ variables:
 {% capture button_active_example %}
 <a class="button is-active">Active</a>
 <a class="button is-primary is-active">Active</a>
+<a class="button is-link is-active">Active</a>
 <a class="button is-info is-active">Active</a>
 <a class="button is-success is-active">Active</a>
 <a class="button is-warning is-active">Active</a>
@@ -143,6 +151,7 @@ variables:
 {% capture button_loading_example %}
 <a class="button is-loading">Loading</a>
 <a class="button is-primary is-loading">Loading</a>
+<a class="button is-link is-loading">Loading</a>
 <a class="button is-info is-loading">Loading</a>
 <a class="button is-success is-loading">Loading</a>
 <a class="button is-warning is-loading">Loading</a>
@@ -156,6 +165,7 @@ variables:
 {% capture button_disabled_example %}
 <a class="button" title="Disabled button" disabled>Disabled</a>
 <a class="button is-primary" title="Disabled button" disabled>Disabled</a>
+<a class="button is-link" title="Disabled button" disabled>Disabled</a>
 <a class="button is-info" title="Disabled button" disabled>Disabled</a>
 <a class="button is-success" title="Disabled button" disabled>Disabled</a>
 <a class="button is-warning" title="Disabled button" disabled>Disabled</a>
@@ -298,7 +308,7 @@ variables:
 {% capture button_group_example %}
 <div class="field is-grouped">
   <p class="control">
-    <a class="button is-primary">
+    <a class="button is-link">
       Save changes
     </a>
   </p>

docs/documentation/elements/notification.html

@@ -22,40 +22,14 @@ variables:
 {% endcapture %}
 
 {% capture notification_colors %}
-<div class="notification is-primary">
+{% for color in site.data.variables.colors %}
+<div class="notification is-{{ color.name }}">
   <button class="delete"></button>
   Primar lorem ipsum dolor sit amet, consectetur
   adipiscing elit lorem ipsum dolor. <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. Sit amet,
   consectetur adipiscing elit
 </div>
-
-<div class="notification is-info">
-  <button class="delete"></button>
-  Info lorem ipsum dolor sit amet, consectetur
-  adipiscing elit lorem ipsum dolor. <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. Sit amet,
-  consectetur adipiscing elit
-</div>
-
-<div class="notification is-success">
-  <button class="delete"></button>
-  Success lorem ipsum dolor sit amet, consectetur
-  adipiscing elit lorem ipsum dolor. <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. Sit amet,
-  consectetur adipiscing elit
-</div>
-
-<div class="notification is-warning">
-  <button class="delete"></button>
-  Warning lorem ipsum dolor sit amet, consectetur
-  adipiscing elit lorem ipsum dolor. <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. Sit amet,
-  consectetur adipiscing elit
-</div>
-
-<div class="notification is-danger">
-  <button class="delete"></button>
-  Danger lorem ipsum dolor sit amet, consectetur
-  adipiscing elit lorem ipsum dolor. <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. Sit amet,
-  consectetur adipiscing elit
-</div>
+{% endfor %}
 {% endcapture %}
 
 {% include subnav-elements.html %}

docs/documentation/elements/progress.html

@@ -15,7 +15,8 @@ variables:
 {% endcapture %}
 
 {% capture progress_colors %}
-<progress class="progress is-primary" value="30" max="100">30%</progress>
+<progress class="progress is-primary" value="15" max="100">30%</progress>
+<progress class="progress is-link" value="30" max="100">30%</progress>
 <progress class="progress is-info" value="45" max="100">45%</progress>
 <progress class="progress is-success" value="60" max="100">60%</progress>
 <progress class="progress is-warning" value="75" max="100">75%</progress>

docs/documentation/elements/tag.html

@@ -26,6 +26,7 @@ variables:
 <span class="tag is-light">Light</span>
 <span class="tag is-white">White</span>
 <span class="tag is-primary">Primary</span>
+<span class="tag is-link">Link</span>
 <span class="tag is-info">Info</span>
 <span class="tag is-success">Success</span>
 <span class="tag is-warning">Warning</span>
@@ -138,49 +139,49 @@ variables:
 <div class="field is-grouped is-grouped-multiline">
   <div class="control">
     <div class="tags has-addons">
-      <span class="tag is-info">Technology</span>
+      <a class="tag is-link">Technology</a>
       <a class="tag is-delete"></a>
     </div>
   </div>
 
   <div class="control">
     <div class="tags has-addons">
-      <span class="tag is-info">CSS</span>
+      <a class="tag is-link">CSS</a>
       <a class="tag is-delete"></a>
     </div>
   </div>
 
   <div class="control">
     <div class="tags has-addons">
-      <span class="tag is-info">Flexbox</span>
+      <a class="tag is-link">Flexbox</a>
       <a class="tag is-delete"></a>
     </div>
   </div>
 
   <div class="control">
     <div class="tags has-addons">
-      <span class="tag is-info">Web Design</span>
+      <a class="tag is-link">Web Design</a>
       <a class="tag is-delete"></a>
     </div>
   </div>
 
   <div class="control">
     <div class="tags has-addons">
-      <span class="tag is-info">Open Source</span>
+      <a class="tag is-link">Open Source</a>
       <a class="tag is-delete"></a>
     </div>
   </div>
 
   <div class="control">
     <div class="tags has-addons">
-      <span class="tag is-info">Community</span>
+      <a class="tag is-link">Community</a>
       <a class="tag is-delete"></a>
     </div>
   </div>
 
   <div class="control">
     <div class="tags has-addons">
-      <span class="tag is-info">Documentation</span>
+      <a class="tag is-link">Documentation</a>
       <a class="tag is-delete"></a>
     </div>
   </div>
@@ -248,6 +249,11 @@ variables:
             Primary
           </span>
         </p>
+        <p class="field">
+          <span class="tag is-link">
+            Link
+          </span>
+        </p>
         <p class="field">
           <span class="tag is-info">
             Info
@@ -354,11 +360,6 @@ variables:
 
     {% include anchor.html name="List of tags" %}
 
-    <div class="tags has-addons">
-      <span class="tag is-success">New!</span>
-      <span class="tag is-info">0.5.0</span>
-    </div>
-
     <div class="columns">
       <div class="column">
         <div class="content">

docs/documentation/form/general.html

@@ -99,10 +99,10 @@ variables:
 
 <div class="field is-grouped">
   <div class="control">
-    <button class="button is-primary">Submit</button>
+    <button class="button is-link">Submit</button>
   </div>
   <div class="control">
-    <button class="button is-link">Cancel</button>
+    <button class="button is-text">Cancel</button>
   </div>
 </div>
 {% endcapture %}
@@ -828,14 +828,7 @@ variables:
       When combining several controls in a <strong>form</strong>, use the <code>.field</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
     </div>
 
-    <div class="columns">
-      <div class="column is-half">
-        {{ example }}
-      </div>
-      <div class="column is-half">
-        {% highlight html %}{{ example }}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=example more=true %}
 
     {% include anchor.html name="Form field" %}