Write 0.8 blog post

jgthms · Oct 18, 2019 · c2d785a · c2d785a
1 parent 1a6b00e
commit c2d785a
Show file tree

Hide file tree

Showing 16 changed files with 457 additions and 389 deletions.
diff --git a/CHANGELOG.md b/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.

diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html
@@ -71,11 +71,9 @@ <h1 class="title">
         </header>
 
         <div class="bd-content">
-          <div class="columns">
-            <div class="column is-offset-2 is-8">
-              <div class="bd-post content is-medium">
-                {{ content }}
-              </div>
+          <div class="bd-post-container">
+            <div class="bd-post content is-medium">
+              {{ content }}
             </div>
           </div>
         </div>

diff --git a/docs/_posts/2019-10-15-light-dark-colors.md b/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.
diff --git a/docs/_sass/specific.sass b/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