Add link changelog

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## 0.5.4
 
+### Breaking changes
+
 ### New features
 
 * #1236 `.table` hover effect is opt-in, by using the `.is-hoverable` modifier class
@@ -11,6 +13,76 @@
 
 * #1257 Include placeholder mixin in `=input`
 
+The `$link` color is used instead of `$primary` in the following components:
+
+<table>
+  <thead>
+    <tr>
+      <th>Variable</th>
+      <th>Old value</th>
+      <th>New value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>$dropdown-item-active-color</code></td>
+      <td><code>$primary-invert</code></td>
+      <td><code>$link-invert</code></td>
+    </tr>
+    <tr>
+      <td><code>$dropdown-item-active-background-color</code></td>
+      <td><code>$primary</code></td>
+      <td><code>$link</code></td>
+    </tr>
+    <tr>
+      <td><code>$navbar-tab-hover-border-bottom-color</code></td>
+      <td><code>$primary</code></td>
+      <td><code>$link</code></td>
+    </tr>
+    <tr>
+      <td><code>$navbar-tab-active-color</code></td>
+      <td><code>$primary</code></td>
+      <td><code>$link</code></td>
+    </tr>
+    <tr>
+      <td><code>$navbar-tab-active-border-bottom-color</code></td>
+      <td><code>$primary</code></td>
+      <td><code>$link</code></td>
+    </tr>
+    <tr>
+      <td><code>$navbar-dropdown-item-active-color</code></td>
+      <td><code>$primary</code></td>
+      <td><code>$link</code></td>
+    </tr>
+
+    <tr>
+      <td><code>$tabs-link-active-border-bottom-color</code></td>
+      <td><code>$primary</code></td>
+      <td><code>$link</code></td>
+    </tr>
+    <tr>
+      <td><code>$tabs-link-active-color</code></td>
+      <td><code>$primary</code></td>
+      <td><code>$link</code></td>
+    </tr>
+    <tr>
+      <td><code>$tabs-toggle-link-active-background-color</code></td>
+      <td><code>$primary</code></td>
+      <td><code>$link</code></td>
+    </tr>
+    <tr>
+      <td><code>$tabs-toggle-link-active-border-color</code></td>
+      <td><code>$primary</code></td>
+      <td><code>$link</code></td>
+    </tr>
+    <tr>
+      <td><code>$tabs-toggle-link-active-color</code></td>
+      <td><code>$primary-invert</code></td>
+      <td><code>$link-invert</code></td>
+    </tr>
+  </tbody>
+</table>
+
 ### Issues closed
 
 * #708 Import variables in mixins

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

@@ -39,6 +39,9 @@ $info: $cyan !default
 
 As such, the following components are now **blue**:
 
+* [breadcrumb](/documentation/components/breadcrumb/)
+* [dropdown](/documentation/components/dropdown/)
+* [navbar](/documentation/components/navbar/)
 * [pagination](/documentation/components/pagination/)
 * [tabs](/documentation/components/tabs/)
 * [menu](/documentation/components/menu/)

docs/css/bulma-docs.css

@@ -4869,7 +4869,7 @@ a.tag:hover {
 
 .breadcrumb a {
   align-items: center;
-  color: #7a7a7a;
+  color: #3273dc;
   display: flex;
   justify-content: center;
   padding: 0.5em 0.75em;

docs/documentation/components/dropdown.html

@@ -65,7 +65,7 @@ variables:
 {% capture dropdown_content_example %}
 <div class="dropdown is-active">
   <div class="dropdown-trigger">
-    <button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu2">
+    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
       <span>Content</span>
       <span class="icon is-small">
         <i class="fa fa-angle-down" aria-hidden="true"></i>
@@ -93,7 +93,7 @@ variables:
 {% capture dropdown_click_example %}
 <div class="dropdown">
   <div class="dropdown-trigger">
-    <button class="button is-primary" aria-haspopup="true" aria-controls="dropdown-menu3">
+    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
       <span>Click me</span>
       <span class="icon is-small">
         <i class="fa fa-angle-down" aria-hidden="true"></i>
@@ -135,7 +135,7 @@ variables:
 {% capture dropdown_info_example %}
 <div class="dropdown is-hoverable">
   <div class="dropdown-trigger">
-    <button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu4">
+    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
       <span>Hover me</span>
       <span class="icon is-small">
         <i class="fa fa-angle-down" aria-hidden="true"></i>
@@ -155,7 +155,7 @@ variables:
 {% capture dropdown_left_example %}
 <div class="dropdown is-active">
   <div class="dropdown-trigger">
-    <button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu5">
+    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu5">
       <span>Left aligned</span>
       <span class="icon is-small">
         <i class="fa fa-angle-down" aria-hidden="true"></i>
@@ -175,7 +175,7 @@ variables:
 {% capture dropdown_right_example %}
 <div class="dropdown is-right is-active">
   <div class="dropdown-trigger">
-    <button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu6">
+    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu6">
       <span>Right aligned</span>
       <span class="icon is-small">
         <i class="fa fa-angle-down" aria-hidden="true"></i>
@@ -195,7 +195,7 @@ variables:
 {% capture dropdown_up_example %}
 <div class="dropdown is-up">
   <div class="dropdown-trigger">
-    <button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu7">
+    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu7">
       <span>Dropup button</span>
       <span class="icon is-small">
         <i class="fa fa-angle-up" aria-hidden="true"></i>

docs/documentation/layout/footer.html

@@ -19,11 +19,6 @@ variables:
         <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
         is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
       </p>
-      <p>
-        <a class="icon" href="https://github.com/jgthms/bulma">
-          <i class="fa fa-github"></i>
-        </a>
-      </p>
     </div>
   </div>
 </footer>

docs/documentation/modifiers/syntax.html

@@ -55,9 +55,10 @@ doc-subtab: syntax
     <div class="columns">
       <div class="column">
         <div class="content">
-          <p>You can use one of the <strong>5 main colors</strong>:</p>
+          <p>You can use one of the <strong>6 main colors</strong>:</p>
           <ul>
             <li><code>is-primary</code></li>
+            <li><code>is-link</code></li>
             <li><code>is-info</code></li>
             <li><code>is-success</code></li>
             <li><code>is-warning</code></li>
@@ -69,6 +70,9 @@ doc-subtab: syntax
         <p class="field">
           <a class="button is-primary">Button</a>
         </p>
+        <p class="field">
+          <a class="button is-link">Button</a>
+        </p>
         <p class="field">
           <a class="button is-info">Button</a>
         </p>

docs/documentation/overview/variables.html

@@ -36,6 +36,8 @@ initial_colors:
   value: hsl(171, 100%, 41%)
 - name: $cyan
   value: hsl(204, 86%,  53%)
+- name: $cyan
+  value: hsl(204, 86%,  53%)
 - name: $blue
   value: hsl(217, 71%, 53%)
 - name: $purple
@@ -96,6 +98,8 @@ initial_variables:
 derived_variables:
 - name: $primary
   value: $turquoise
+- name: $link
+  value: $blue
 - name: $info
   value: $cyan
 - name: $success
@@ -246,7 +250,7 @@ generic_variables:
           <ul>
             <li><strong>colors</strong>: <code>$blue: hsl(217, 71%,  53%)</code></li>
             <li><strong>font sizes</strong>: <code>$size-1: 3rem</code></li>
-            <li><strong>dimensions</strong>: <code>$gap: 24px</code></li>
+            <li><strong>dimensions</strong>: <code>$gap: 32px</code></li>
             <li><strong>other values</strong>: <code>$easing: ease-out</code> or <code>$radius-large: 5px</code></li>
           </ul>
         </li>
@@ -257,7 +261,8 @@ generic_variables:
               <strong>Primary colors</strong> derived from the initial variables:
               <ul>
                 <li><code>$primary: $turquoise</code></li>
-                <li><code>$info: $blue</code></li>
+                <li><code>$link: $blue</code></li>
+                <li><code>$info: $cyan</code></li>
                 <li><code>$success: $green</code></li>
                 <li><code>$warning: $yellow</code></li>
                 <li><code>$danger: $red</code></li>
@@ -271,7 +276,7 @@ generic_variables:
             <li>
               <strong>Lists and maps</strong> which are collections so already defined variables:
               <ul>
-                <li><code>$colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))</code></li>
+                <li><code>$colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))</code></li>
                 <li><code>$shades: ("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)</code></li>
                 <li><code>$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6</code></li>
               </ul>

sass/components/breadcrumb.sass

@@ -1,4 +1,4 @@
-$breadcrumb-item-color: $text-light !default
+$breadcrumb-item-color: $link !default
 $breadcrumb-item-hover-color: $link-hover !default
 $breadcrumb-item-active-color: $text-strong !default