Write 0.8 blog post

CHANGELOG.md

@@ -25,6 +25,10 @@ Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) no
 
 The light colors are used by the `button` element, while the light and dark colors are used by the `message` component.
 
+#### Panel colors
+
+The `panel` component is now available in all the different colors.
+
 #### 4-value color map
 
 The `$colors` Sass map now accepts, for each of its values, a map of up to **4** values. For example: the key `"info"` now has the `($info, $info-invert, $info-light, $info-dark)` map.

docs/_layouts/post.html

@@ -71,11 +71,9 @@ breadcrumb:
         </header>
 
         <div class="bd-content">
-          <div class="columns">
+          <div class="bd-post-container">
-            <div class="column is-offset-2 is-8">
+            <div class="bd-post content is-medium">
-              <div class="bd-post content is-medium">
+              {{ content }}
-                {{ content }}
-              </div>
             </div>
           </div>
         </div>

docs/_posts/2019-10-15-light-dark-colors.md

@@ -0,0 +1,146 @@
+---
+title: "Light and Dark colors, better look, larger buttons, panel colors, and more"
+layout: post
+introduction: "A big update for more colors and flexibility"
+color: "primary"
+name: "Light/Dark colors, better look, larger controls"
+icon: "sun"
+published: false
+---
+
+The new version **[Bulma 0.8.0](#)** is out! It comes with several bug fixes and a lot of nice new features:
+
+* [Light/Dark colors](#light-dark-colors)
+* [Better visual look](#better-visual-look)
+* [Panel colors](#panel-colors)
+* [4-value color map](#4-value-color-map)
+* [Scheme variables](#scheme-variables)
+
+More in the [Changelog](#).
+
+{% include elements/anchor.html name="Light/Dark colors" %}
+
+Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) now comes with a `*-light` and a `*-dark` version. They are calculated using 2 new color functions:
+
+* `findLightColor()` which finds the light version of a color
+* `findDarkolor()` which finds the dark version of a color
+
+The **light** colors are used by the `button` element:
+
+<figure>
+  <a href="{{ site.data.links.by_id.elements-button.path }}">
+    <img src="{{ site.url }}/images/blog/v8/light-buttons-bis.png" alt="List Bulma buttons" width="530" height="104">
+  </a>
+</figure>
+
+The **light** and **dark** colors are used by the `message` component, which generates much prettier colored versions. See the difference between before (left) and after (right):
+
+<div class="bd-post-fullwidth">
+  <a href="{{ site.data.links.by_id.components-message.path }}">
+    <img src="{{ site.url }}/images/blog/v8/messages-before.png" alt="Messages before" width="448" height="1200">
+    <img src="{{ site.url }}/images/blog/v8/messages-after.png" alt="Messages after" width="448" height="1200">
+  </a>
+</div>
+
+{% include elements/anchor.html name="Better visual look" %}
+
+Some of the Bulma colors have been updated:
+
+<table>
+  <tr>
+    <th>Color</th>
+    <th>Before</th>
+    <th>After</th>
+  </tr>
+  <tr>
+    <th>
+      <code>$green</code>
+    </th>
+    <td>
+      {% include elements/color-square.html value="hsl(141, 71%, 48%)" %}
+    </td>
+    <td>
+      {% include elements/color-square.html value="hsl(141, 53%, 53%)" %}
+    </td>
+  </tr>
+  <tr>
+    <th>
+      <code>$cyan</code>
+    </th>
+    <td>
+      {% include elements/color-square.html value="hsl(204, 86%, 53%)" %}
+    </td>
+    <td>
+      {% include elements/color-square.html value="hsl(204, 71%, 53%)" %}
+    </td>
+  </tr>
+  <tr>
+    <th>
+      <code>$red</code>
+    </th>
+    <td>
+      {% include elements/color-square.html value="hsl(348, 100%, 61%)" %}
+    </td>
+    <td>
+      {% include elements/color-square.html value="hsl(348, 86%, 61%)" %}
+    </td>
+  </tr>
+</table>
+
+The <strong>shadows</strong> of the <code>box</code> and <code>card</code> have been improved:
+
+<div class="bd-post-fullwidth">
+  <a href="{{ site.data.links.by_id.components-card.path }}">
+    <img src="{{ site.url }}/images/blog/v8/card-before.png" alt="Card before" width="464" height="236">
+    <img src="{{ site.url }}/images/blog/v8/card-after.png" alt="Card after" width="464" height="236">
+  </a>
+</div>
+
+<div class="bd-post-fullwidth">
+  <a href="{{ site.data.links.by_id.elements-box.path }}" style="display: block;" class="has-text-centered">
+    <img src="{{ site.url }}/images/blog/v8/box-before.png" alt="Box before" width="464" height="236">
+    <img src="{{ site.url }}/images/blog/v8/box-after.png" alt="Box after" width="464" height="236">
+  </a>
+</div>
+
+{% include elements/anchor.html name="Panel colors" %}
+
+<p>
+  The <a href="{{ site.data.links.by_id.components-panel.path }}">panel component</a> is now available in all <strong>colors</strong>:
+</p>
+
+<div class="bd-post-fullwidth">
+  <a href="{{ site.data.links.by_id.components-panel.path }}">
+    <img src="{{ site.url }}/images/blog/v8/panel-colors.png" alt="Panel colors" width="768" height="1029">
+  </a>
+</div>
+
+{% include elements/anchor.html name="4-value color map" %}
+
+The `$colors` Sass map now accepts, for each of its values, a map of up to **4** values. For example: the key `"info"` now has the `($info, $info-invert, $info-light, $info-dark)` map.
+
+If you provide a `$custom-colors` map, you can decide to provide a map of 1, 2, 3 or 4 values for each value. If fewer than 4 are provided, Bulma will calculate the remaining ones:
+
+```scss
+$custom-colors: (
+  "lime": (lime),
+  "tomato": (tomato, white),
+  "orange": ($orange, $orange-invert, $orange-light),
+  "lavender": ($lavender, $lavender-invert, $lavender-light, $lavender-dark)
+);
+```
+
+This is processed by the updated `mergeColorMaps()` Sass function.
+
+{% include elements/anchor.html name="Scheme variables" %}
+
+There are 6 new `$scheme` derived variables: `$scheme-main` `$scheme-main-bis` `$scheme-main-ter` `$scheme-invert` `$scheme-invert-bis` `$scheme-invert-ter`
+They replace the `$white` and `$black` occurences in the codebase. This makes it easy to create a "Dark mode" simply by swapping the values:
+
+```sass
+$scheme-main: $black
+$scheme-invert: $white
+// etc.
+```
+
+That is also why most of the codebase now references **derived** variables (`$text`, `$background`, `$border` etc.) instead of **initial** ones (`$grey`, `$grey-lighter`, `$grey-darker` etc.): updating the derived variables will affect all elements and components directly.

docs/_sass/specific.sass

@@ -2,6 +2,18 @@
   background-color: $primary
   color: $primary-invert
 
+.bd-post-container
+  margin: 0 auto
+  max-width: 56rem
+
+.bd-post-fullwidth
+  text-align: center
+
++from(60rem)
+  .bd-post-fullwidth
+    margin-left: calc(28rem - 50vw)
+    margin-right: calc(28rem - 50vw)
+
 .bd-post
   .table
     font-size: 1rem

docs/css/bulma-docs.css

@@ -1,13 +1,5 @@
 @charset "UTF-8";
 /*! bulma.io v0.7.5 | MIT License | github.com/jgthms/bulma */
-@-webkit-keyframes spinAround {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
 @keyframes spinAround {
   from {
     transform: rotate(0deg);
@@ -46,7 +38,7 @@
 }
 
 .box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child),
-.subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .list:not(:last-child), .message:not(:last-child), .tabs:not(:last-child) {
+.subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .list:not(:last-child), .message:not(:last-child), .pagination:not(:last-child), .tabs:not(:last-child) {
   margin-bottom: 1.5rem;
 }
 
@@ -130,8 +122,7 @@
 }
 
 .button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after {
-  -webkit-animation: spinAround 500ms infinite linear;
+  animation: spinAround 500ms infinite linear;
-          animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 290486px;
   border-right-color: transparent;
@@ -321,10 +312,7 @@ html {
   overflow-x: hidden;
   overflow-y: scroll;
   text-rendering: optimizeLegibility;
-  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
-     -moz-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
-          text-size-adjust: 100%;
 }
 
 article,
@@ -3644,14 +3632,10 @@ fieldset[disabled] .button {
 }
 
 .progress:indeterminate {
-  -webkit-animation-duration: 1.5s;
+  animation-duration: 1.5s;
-          animation-duration: 1.5s;
+  animation-iteration-count: infinite;
-  -webkit-animation-iteration-count: infinite;
+  animation-name: moveIndeterminate;
-          animation-iteration-count: infinite;
+  animation-timing-function: linear;
-  -webkit-animation-name: moveIndeterminate;
-          animation-name: moveIndeterminate;
-  -webkit-animation-timing-function: linear;
-          animation-timing-function: linear;
   background-color: #ededed;
   background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%);
   background-position: top left;
@@ -3679,15 +3663,6 @@ fieldset[disabled] .button {
   height: 1.5rem;
 }
 
-@-webkit-keyframes moveIndeterminate {
-  from {
-    background-position: 200% 0;
-  }
-  to {
-    background-position: -200% 0;
-  }
-}
-
 @keyframes moveIndeterminate {
   from {
     background-position: 200% 0;
@@ -6122,7 +6097,6 @@ a.list-item {
 
 .message.is-white .message-body {
   border-color: white;
-  color: #4d4d4d;
 }
 
 .message.is-black {
@@ -6136,7 +6110,6 @@ a.list-item {
 
 .message.is-black .message-body {
   border-color: #0a0a0a;
-  color: #090909;
 }
 
 .message.is-light {
@@ -6150,7 +6123,6 @@ a.list-item {
 
 .message.is-light .message-body {
   border-color: whitesmoke;
-  color: #505050;
 }
 
 .message.is-dark {
@@ -6164,7 +6136,6 @@ a.list-item {
 
 .message.is-dark .message-body {
   border-color: #363636;
-  color: #2a2a2a;
 }
 
 .message.is-primary {
@@ -7642,13 +7613,143 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
   margin-bottom: 1.5rem;
 }
 
+.panel.is-white .panel-heading {
+  background-color: white;
+  color: #0a0a0a;
+}
+
+.panel.is-white .panel-tabs a.is-active {
+  border-bottom-color: white;
+}
+
+.panel.is-white .panel-block.is-active .panel-icon {
+  color: white;
+}
+
+.panel.is-black .panel-heading {
+  background-color: #0a0a0a;
+  color: white;
+}
+
+.panel.is-black .panel-tabs a.is-active {
+  border-bottom-color: #0a0a0a;
+}
+
+.panel.is-black .panel-block.is-active .panel-icon {
+  color: #0a0a0a;
+}
+
+.panel.is-light .panel-heading {
+  background-color: whitesmoke;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.panel.is-light .panel-tabs a.is-active {
+  border-bottom-color: whitesmoke;
+}
+
+.panel.is-light .panel-block.is-active .panel-icon {
+  color: whitesmoke;
+}
+
+.panel.is-dark .panel-heading {
+  background-color: #363636;
+  color: #fff;
+}
+
+.panel.is-dark .panel-tabs a.is-active {
+  border-bottom-color: #363636;
+}
+
+.panel.is-dark .panel-block.is-active .panel-icon {
+  color: #363636;
+}
+
+.panel.is-primary .panel-heading {
+  background-color: #00d1b2;
+  color: #fff;
+}
+
+.panel.is-primary .panel-tabs a.is-active {
+  border-bottom-color: #00d1b2;
+}
+
+.panel.is-primary .panel-block.is-active .panel-icon {
+  color: #00d1b2;
+}
+
+.panel.is-link .panel-heading {
+  background-color: #3273dc;
+  color: #fff;
+}
+
+.panel.is-link .panel-tabs a.is-active {
+  border-bottom-color: #3273dc;
+}
+
+.panel.is-link .panel-block.is-active .panel-icon {
+  color: #3273dc;
+}
+
+.panel.is-info .panel-heading {
+  background-color: #3298dc;
+  color: #fff;
+}
+
+.panel.is-info .panel-tabs a.is-active {
+  border-bottom-color: #3298dc;
+}
+
+.panel.is-info .panel-block.is-active .panel-icon {
+  color: #3298dc;
+}
+
+.panel.is-success .panel-heading {
+  background-color: #48c774;
+  color: #fff;
+}
+
+.panel.is-success .panel-tabs a.is-active {
+  border-bottom-color: #48c774;
+}
+
+.panel.is-success .panel-block.is-active .panel-icon {
+  color: #48c774;
+}
+
+.panel.is-warning .panel-heading {
+  background-color: #ffdd57;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.panel.is-warning .panel-tabs a.is-active {
+  border-bottom-color: #ffdd57;
+}
+
+.panel.is-warning .panel-block.is-active .panel-icon {
+  color: #ffdd57;
+}
+
+.panel.is-danger .panel-heading {
+  background-color: #f14668;
+  color: #fff;
+}
+
+.panel.is-danger .panel-tabs a.is-active {
+  border-bottom-color: #f14668;
+}
+
+.panel.is-danger .panel-block.is-active .panel-icon {
+  color: #f14668;
+}
+
 .panel-tabs:not(:last-child),
 .panel-block:not(:last-child) {
   border-bottom: 1px solid #ededed;
 }
 
 .panel-heading {
-  background-color: whitesmoke;
+  background-color: #ededed;
   border-radius: 6px 6px 0 0;
   color: #363636;
   font-size: 1.25em;
@@ -9708,8 +9809,6 @@ label.panel-block:hover {
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
-  min-height: -webkit-min-content;
-  min-height: -moz-min-content;
   min-height: min-content;
 }
 
@@ -12040,17 +12139,6 @@ svg {
   opacity: 1;
 }
 
-@-webkit-keyframes introSpinner {
-  from {
-    opacity: 0;
-    transform: scale(1.14);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 @keyframes introSpinner {
   from {
     opacity: 0;
@@ -12064,11 +12152,9 @@ svg {
 
 .intro-spinner,
 .intro-shadow {
-  -webkit-animation-duration: 500ms;
+  animation-duration: 500ms;
-          animation-duration: 500ms;
   animation-easing-function: ease-out;
-  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
-          animation-fill-mode: both;
   transform-origin: center;
 }
 
@@ -12078,13 +12164,11 @@ svg {
   position: absolute;
   right: 0;
   top: 0;
-  -webkit-animation-name: introSpinner;
+  animation-name: introSpinner;
-          animation-name: introSpinner;
 }
 
 .intro-spinner::before {
-  -webkit-animation: spinAround 500ms infinite linear;
+  animation: spinAround 500ms infinite linear;
-          animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 290486px;
   border-right-color: transparent;
@@ -12103,17 +12187,6 @@ svg {
   width: 1.5em;
 }
 
-@-webkit-keyframes introShadow {
-  from {
-    opacity: 0;
-    transform: scale(0.86);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 @keyframes introShadow {
   from {
     opacity: 0;
@@ -12136,8 +12209,7 @@ svg {
   background-repeat: no-repeat;
   background-size: cover;
   box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
-  -webkit-animation-name: introShadow;
+  animation-name: introShadow;
-          animation-name: introShadow;
 }
 
 .intro-iframe {
@@ -12583,6 +12655,22 @@ svg {
   color: #fff;
 }
 
+.bd-post-container {
+  margin: 0 auto;
+  max-width: 56rem;
+}
+
+.bd-post-fullwidth {
+  text-align: center;
+}
+
+@media screen and (min-width: 60rem) {
+  .bd-post-fullwidth {
+    margin-left: calc(28rem - 50vw);
+    margin-right: calc(28rem - 50vw);
+  }
+}
+
 .bd-post .table {
   font-size: 1rem;
 }
@@ -13921,8 +14009,7 @@ svg {
 }
 
 .bd-rainbow {
-  -webkit-animation: rainbow 8s ease infinite;
+  animation: rainbow 8s ease infinite;
-          animation: rainbow 8s ease infinite;
   background-image: linear-gradient(124deg, #ff470f, #f14668, #b86bff, #3273dc);
   background-size: 800% 800%;
 }
@@ -13932,18 +14019,6 @@ svg {
   color: white;
 }
 
-@-webkit-keyframes rainbow {
-  0% {
-    background-position: 1% 80%;
-  }
-  50% {
-    background-position: 99% 20%;
-  }
-  100% {
-    background-position: 1% 80%;
-  }
-}
-
 @keyframes rainbow {
   0% {
     background-position: 1% 80%;
@@ -14433,15 +14508,6 @@ svg {
   }
 }
 
-@-webkit-keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -14451,15 +14517,6 @@ svg {
   }
 }
 
-@-webkit-keyframes zoomIn {
-  from {
-    transform: scale(0.8);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
 @keyframes zoomIn {
   from {
     transform: scale(0.8);
@@ -14604,21 +14661,17 @@ svg {
 
 .bd-book-modal .bd-book-modal-background,
 .bd-book-modal .modal-content {
-  -webkit-animation-duration: 250ms;
+  animation-duration: 250ms;
-          animation-duration: 250ms;
   animation-easing-function: ease-out;
-  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
-          animation-fill-mode: both;
 }
 
 .bd-book-modal .bd-book-modal-background {
-  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
-          animation-name: fadeIn;
 }
 
 .bd-book-modal .modal-content {
-  -webkit-animation-name: zoomIn;
+  animation-name: zoomIn;
-          animation-name: zoomIn;
   transform-origin: center;
 }
 
@@ -14809,15 +14862,6 @@ svg {
   }
 }
 
-@-webkit-keyframes bdGrow {
-  from {
-    transform: scale(0);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
 @keyframes bdGrow {
   from {
     transform: scale(0);
@@ -14827,17 +14871,6 @@ svg {
   }
 }
 
-@-webkit-keyframes bdSlideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-1rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes bdSlideDown {
   from {
     opacity: 0;
@@ -14849,17 +14882,6 @@ svg {
   }
 }
 
-@-webkit-keyframes bdSlideUp {
-  from {
-    opacity: 0;
-    transform: translateY(1rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes bdSlideUp {
   from {
     opacity: 0;
@@ -14873,132 +14895,95 @@ svg {
 
 .intro-title, .intro-ghbtns,
 .intro-author, .intro-npm, .intro-buttons .button, .bd-focus-item .title, .bd-focus-item .subtitle, .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3, .bd-focus-css3, .bd-focus-github {
-  -webkit-animation-duration: 500ms;
+  animation-duration: 500ms;
-          animation-duration: 500ms;
+  animation-fill-mode: both;
-  -webkit-animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
-          animation-fill-mode: both;
-  -webkit-animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
-          animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
   transform-origin: center center;
 }
 
 .intro-title {
-  -webkit-animation-name: bdSlideDown;
+  animation-name: bdSlideDown;
-          animation-name: bdSlideDown;
 }
 
 .intro-ghbtns,
 .intro-author {
-  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
-          animation-delay: 1s;
+  animation-duration: 1000ms;
-  -webkit-animation-duration: 1000ms;
+  animation-name: bdFadeIn;
-          animation-duration: 1000ms;
-  -webkit-animation-name: bdFadeIn;
-          animation-name: bdFadeIn;
 }
 
 .intro-npm {
-  -webkit-animation-delay: 250ms;
+  animation-delay: 250ms;
-          animation-delay: 250ms;
+  animation-name: bdSlowIn;
-  -webkit-animation-name: bdSlowIn;
-          animation-name: bdSlowIn;
 }
 
 .intro-buttons .button {
-  -webkit-animation-name: bdSlowIn;
+  animation-name: bdSlowIn;
-          animation-name: bdSlowIn;
 }
 
 .intro-buttons .button:first-child {
-  -webkit-animation-delay: 500ms;
+  animation-delay: 500ms;
-          animation-delay: 500ms;
 }
 
 .intro-buttons .button:last-child {
-  -webkit-animation-delay: 750ms;
+  animation-delay: 750ms;
-          animation-delay: 750ms;
 }
 
 .bd-focus-item .title {
-  -webkit-animation-name: bdSlideDown;
+  animation-name: bdSlideDown;
-          animation-name: bdSlideDown;
 }
 
 .bd-focus-item .subtitle {
-  -webkit-animation-name: bdSlideUp;
+  animation-name: bdSlideUp;
-          animation-name: bdSlideUp;
 }
 
 .bd-focus-item:nth-child(1) .title {
-  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
-          animation-delay: 1s;
 }
 
 .bd-focus-item:nth-child(1) .subtitle {
-  -webkit-animation-delay: 1.125s;
+  animation-delay: 1.125s;
-          animation-delay: 1.125s;
 }
 
 .bd-focus-item:nth-child(2) .title {
-  -webkit-animation-delay: 1.5s;
+  animation-delay: 1.5s;
-          animation-delay: 1.5s;
 }
 
 .bd-focus-item:nth-child(2) .subtitle {
-  -webkit-animation-delay: 1.625s;
+  animation-delay: 1.625s;
-          animation-delay: 1.625s;
 }
 
 .bd-focus-item:nth-child(3) .title {
-  -webkit-animation-delay: 2s;
+  animation-delay: 2s;
-          animation-delay: 2s;
 }
 
 .bd-focus-item:nth-child(3) .subtitle {
-  -webkit-animation-delay: 2.125s;
+  animation-delay: 2.125s;
-          animation-delay: 2.125s;
 }
 
 .bd-focus-item:nth-child(4) .title {
-  -webkit-animation-delay: 2.5s;
+  animation-delay: 2.5s;
-          animation-delay: 2.5s;
 }
 
 .bd-focus-item:nth-child(4) .subtitle {
-  -webkit-animation-delay: 2.625s;
+  animation-delay: 2.625s;
-          animation-delay: 2.625s;
 }
 
 .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop {
-  -webkit-animation-name: bdGrow;
+  animation-name: bdGrow;
-          animation-name: bdGrow;
   transform-origin: bottom center;
 }
 
 .bd-focus-mobile {
-  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
-          animation-delay: 1s;
 }
 
 .bd-focus-tablet {
-  -webkit-animation-delay: 1.25s;
+  animation-delay: 1.25s;
-          animation-delay: 1.25s;
 }
 
 .bd-focus-desktop {
-  -webkit-animation-delay: 1.5s;
+  animation-delay: 1.5s;
-          animation-delay: 1.5s;
-}
-
-@-webkit-keyframes bdCube1 {
-  0% {
-    transform: translate3d(0, -50px, 0);
-    opacity: 0;
-  }
-  25%, 100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
 }
 
 @keyframes bdCube1 {
@@ -15012,17 +14997,6 @@ svg {
   }
 }
 
-@-webkit-keyframes bdCube2 {
-  0% {
-    transform: translate3d(-40px, 30px, 0);
-    opacity: 0;
-  }
-  25%, 100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
 @keyframes bdCube2 {
   0% {
     transform: translate3d(-40px, 30px, 0);
@@ -15034,17 +15008,6 @@ svg {
   }
 }
 
-@-webkit-keyframes bdCube3 {
-  0% {
-    transform: translate3d(40px, 30px, 0);
-    opacity: 0;
-  }
-  25%, 100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
 @keyframes bdCube3 {
   0% {
     transform: translate3d(40px, 30px, 0);
@@ -15057,42 +15020,24 @@ svg {
 }
 
 .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
-  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
-          animation-direction: alternate;
+  animation-duration: 2000ms;
-  -webkit-animation-duration: 2000ms;
+  animation-iteration-count: infinite;
-          animation-duration: 2000ms;
-  -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
 }
 
 .bd-focus-cube-1 {
-  -webkit-animation-delay: 1.5s;
+  animation-delay: 1.5s;
-          animation-delay: 1.5s;
+  animation-name: bdCube1;
-  -webkit-animation-name: bdCube1;
-          animation-name: bdCube1;
 }
 
 .bd-focus-cube-2 {
-  -webkit-animation-name: bdCube2;
+  animation-name: bdCube2;
-          animation-name: bdCube2;
+  animation-delay: 1.75s;
-  -webkit-animation-delay: 1.75s;
-          animation-delay: 1.75s;
 }
 
 .bd-focus-cube-3 {
-  -webkit-animation-name: bdCube3;
+  animation-name: bdCube3;
-          animation-name: bdCube3;
+  animation-delay: 2s;
-  -webkit-animation-delay: 2s;
-          animation-delay: 2s;
-}
-
-@-webkit-keyframes bdFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
 }
 
 @keyframes bdFadeIn {
@@ -15104,17 +15049,6 @@ svg {
   }
 }
 
-@-webkit-keyframes bdSlowIn {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 @keyframes bdSlowIn {
   from {
     opacity: 0;
@@ -15126,17 +15060,6 @@ svg {
   }
 }
 
-@-webkit-keyframes bdScaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 @keyframes bdScaleIn {
   from {
     opacity: 0;
@@ -15149,103 +15072,14 @@ svg {
 }
 
 .bd-focus-css3 {
-  -webkit-animation-delay: 2s;
+  animation-delay: 2s;
-          animation-delay: 2s;
+  animation-name: bdScaleIn;
-  -webkit-animation-name: bdScaleIn;
-          animation-name: bdScaleIn;
 }
 
 .bd-focus-github {
-  -webkit-animation-delay: 2.5s;
+  animation-delay: 2.5s;
-          animation-delay: 2.5s;
+  animation-duration: 1500ms;
-  -webkit-animation-duration: 1500ms;
+  animation-name: bdJellyPop;
-          animation-duration: 1500ms;
-  -webkit-animation-name: bdJellyPop;
-          animation-name: bdJellyPop;
-}
-
-@-webkit-keyframes bdJellyPop {
-  0% {
-    opacity: 0;
-    transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  3.4% {
-    opacity: 1;
-    transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  4.7% {
-    transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  6.81% {
-    transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  9.41% {
-    transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  10.21% {
-    transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  13.61% {
-    transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  14.11% {
-    transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  17.52% {
-    transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  18.72% {
-    transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  21.32% {
-    transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  24.32% {
-    transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  25.23% {
-    transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  29.03% {
-    transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  29.93% {
-    transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  35.54% {
-    transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  36.74% {
-    transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  41.04% {
-    transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  44.44% {
-    transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  52.15% {
-    transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  59.86% {
-    transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  63.26% {
-    transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  75.28% {
-    transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  85.49% {
-    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  90.69% {
-    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
-  100% {
-    opacity: 1;
-    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-  }
 }
 
 @keyframes bdJellyPop {
@@ -15331,5 +15165,3 @@ svg {
     transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 }
-
-/*# sourceMappingURL=bulma-docs.css.map */

docs/documentation/components/panel.html

@@ -9,7 +9,7 @@ breadcrumb:
 - components
 - components-panel
 meta:
-  colors: false
+  colors: true
   sizes: false
   variables: true
 ---
@@ -17,22 +17,22 @@ meta:
 {% capture panel_example %}
 <nav class="panel">
   <p class="panel-heading">
-    repositories
+    Repositories
   </p>
   <div class="panel-block">
     <p class="control has-icons-left">
-      <input class="input is-small" type="text" placeholder="search">
+      <input class="input" type="text" placeholder="Search">
-      <span class="icon is-small is-left">
+      <span class="icon is-left">
         <i class="fas fa-search" aria-hidden="true"></i>
       </span>
     </p>
   </div>
   <p class="panel-tabs">
-    <a class="is-active">all</a>
+    <a class="is-active">All</a>
-    <a>public</a>
+    <a>Public</a>
-    <a>private</a>
+    <a>Private</a>
-    <a>sources</a>
+    <a>Sources</a>
-    <a>forks</a>
+    <a>Forks</a>
   </p>
   <a class="panel-block is-active">
     <span class="panel-icon">
@@ -76,12 +76,61 @@ meta:
   </label>
   <div class="panel-block">
     <button class="button is-link is-outlined is-fullwidth">
-      reset all filters
+      Reset all filters
     </button>
   </div>
 </nav>
 {% endcapture %}
 
+{% capture panel_colors_example %}
+{% for color in site.data.colors.justColors %}
+<article class="panel is-{{ color }}">
+  <p class="panel-heading">
+    {{ color | capitalize }}
+  </p>
+  <p class="panel-tabs">
+    <a class="is-active">All</a>
+    <a>Public</a>
+    <a>Private</a>
+    <a>Sources</a>
+    <a>Forks</a>
+  </p>
+  <div class="panel-block">
+    <p class="control has-icons-left">
+      <input class="input is-{{ color }}" type="text" placeholder="Search">
+      <span class="icon is-left">
+        <i class="fas fa-search" aria-hidden="true"></i>
+      </span>
+    </p>
+  </div>
+  <a class="panel-block is-active">
+    <span class="panel-icon">
+      <i class="fas fa-book" aria-hidden="true"></i>
+    </span>
+    bulma
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-book" aria-hidden="true"></i>
+    </span>
+    marksheet
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-book" aria-hidden="true"></i>
+    </span>
+    minireset.css
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-book" aria-hidden="true"></i>
+    </span>
+    jgthms.github.io
+  </a>
+</article>
+{% endfor %}
+{% endcapture %}
+
 <div class="content">
   <p>
     The <code>panel</code> is container for several types:
@@ -108,6 +157,21 @@ meta:
   </p>
 </div>
 
-{% include elements/snippet.html content=panel_example %}
+{% include elements/snippet.html content=panel_example more=true %}
+
+{% include elements/anchor.html name="Colors" %}
+
+{% include elements/new-tag.html version="0.8.0" %}
+
+<div class="content">
+  <p>
+    The panel component is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.     Simply append one of the color modifiers.
+  </p>
+  <p>
+    For example, to use your primary color, use <code>"panel is-primary"</code> as a class.
+  </p>
+</div>
+
+{% include elements/snippet.html content=panel_colors_example more=true %}
 
 {% include elements/variables.html type='component' %}

sass/components/panel.sass

@@ -3,7 +3,7 @@ $panel-item-border: 1px solid $border-light !default
 $panel-radius: $radius-large !default
 $panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
 
-$panel-heading-background-color: $background !default
+$panel-heading-background-color: $border-light !default
 $panel-heading-color: $text-strong !default
 $panel-heading-line-height: 1.25 !default
 $panel-heading-padding: 0.75em 1em !default
@@ -33,6 +33,18 @@ $panel-icon-color: $text-light !default
   font-size: $size-normal
   &:not(:last-child)
     margin-bottom: $panel-margin
+  // Colors
+  @each $name, $components in $message-colors
+    $color: nth($components, 1)
+    $color-invert: nth($components, 2)
+    &.is-#{$name}
+      .panel-heading
+        background-color: $color
+        color: $color-invert
+      .panel-tabs a.is-active
+        border-bottom-color: $color
+      .panel-block.is-active .panel-icon
+        color: $color
 
 .panel-tabs,
 .panel-block