Add variables data

docs/_posts/2017-10-09-roses-are-red-links-are-blue.md

@@ -0,0 +1,89 @@
+---
+layout: post
+title: "Roses are red – Links are blue"
+introduction: "What's better than one tag? Multiple tags!"
+color: "link"
+name: "Roses are red<br>Links are blue"
+icon: "tag"
+---
+
+By default, a browser will display links in <strong style="color: blue;">blue</strong>. Bulma has up until now used the `$primary` color as the `$link` color:
+
+```sass
+// Old styles
+$link: $primary !default
+```
+
+But the _primary_ color is mostly used as the **brand** color, and is not necessarily well suited for links. For readability purposes, and to add more flexibility to your design choices:
+
+* the `$link` color defaults to `$blue`
+* `$info` is using the new `$cyan` color
+* `$link` has been added to the `$colors` map as well
+
+```sass
+// New styles
+$link: $blue !default
+$info: $cyan !default
+```
+
+<div class="message is-danger">
+  <div class="message-header">
+    Deprecation warning
+  </div>
+  <div class="message-body">
+    <p>
+      Because the modifier <code>is-link</code> for <strong>buttons</strong> already existed, it has been renamed to <code>is-text</code>.
+    </p>
+  </div>
+</div>
+
+As such, the following components are now **blue**:
+
+* [pagination](/documentation/components/pagination/)
+* [tabs](/documentation/components/tabs/)
+* [menu](/documentation/components/menu/)
+* [panel](/documentation/components/panel/)
+
+All Bulma elements and components that support **color** modifiers now support the `.is-link` color:
+
+```html
+<div class="notification is-link">
+  Link notification.
+</div>
+
+<div class="notification is-info">
+  Info notification.
+</div>
+
+<button class="button is-link">
+  Link button
+</button>
+
+<button class="button is-info">
+  Info button
+</button>
+```
+
+<div class="notification is-link">
+  Link notification.
+</div>
+
+<div class="notification is-info">
+  Info notification.
+</div>
+
+<button class="button is-link">
+  Link button
+</button>
+
+<button class="button is-info">
+  Info button
+</button>
+
+If you want to use the `$primary` color for your links, just **customize** your Bulma setup by including these rules:
+
+```sass
+$link: $primary !default
+$link-invert: $primary-invert !default
+$link-focus-border: $primary !default
+```