Add color helpers

CHANGELOG.md

@@ -8,6 +8,7 @@
 
 ### Improvements
 
+* #1628 Add `.has-background` helpers for block background colors, like `.has-text`
 * #1767 Added minified bundle with cleancss
 
 ### Bug fixes
@@ -15,10 +16,6 @@
 * #1707 Disable table hover in `.content` by default
 * #1428 Fix `media-content` overflow
 
-### Improvements
-
-* Add `.has-bg` helpers for block background colors, like `.has-text`.
-
 ## 0.6.2
 
 ### New features

docs/_includes/subnav/subnav-modifiers.html

@@ -10,11 +10,11 @@
       <a class="navbar-item is-tab {% if page.doc-subtab == 'responsive-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/responsive-helpers/">
         Responsive helpers
       </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'color-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/color-helpers/">
+        Color helpers
+      </a>
       <a class="navbar-item is-tab {% if page.doc-subtab == 'typography-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/typography-helpers/">
         Typography helpers
-        <span class="tag is-success" style="margin-left: 1em;">
-          New!
-        </span>
       </a>
     </div>
   </div>

docs/bulma-docs.sass

@@ -33,5 +33,3 @@ $bleeding-red: #CA1F26
 @import "./_sass/sponsors"
 @import "./_sass/book"
 @import "./_sass/native"
-
-@debug $colors

docs/css/bulma-docs.css

@@ -691,6 +691,10 @@ a.has-text-white:hover, a.has-text-white:focus {
   color: #e6e6e6 !important;
 }
 
+.has-background-white {
+  background-color: white !important;
+}
+
 .has-text-black {
   color: #0a0a0a !important;
 }
@@ -699,6 +703,10 @@ a.has-text-black:hover, a.has-text-black:focus {
   color: black !important;
 }
 
+.has-background-black {
+  background-color: #0a0a0a !important;
+}
+
 .has-text-light {
   color: whitesmoke !important;
 }
@@ -707,6 +715,10 @@ a.has-text-light:hover, a.has-text-light:focus {
   color: #dbdbdb !important;
 }
 
+.has-background-light {
+  background-color: whitesmoke !important;
+}
+
 .has-text-dark {
   color: #363636 !important;
 }
@@ -715,6 +727,10 @@ a.has-text-dark:hover, a.has-text-dark:focus {
   color: #1c1c1c !important;
 }
 
+.has-background-dark {
+  background-color: #363636 !important;
+}
+
 .has-text-primary {
   color: #00d1b2 !important;
 }
@@ -723,6 +739,10 @@ a.has-text-primary:hover, a.has-text-primary:focus {
   color: #009e86 !important;
 }
 
+.has-background-primary {
+  background-color: #00d1b2 !important;
+}
+
 .has-text-link {
   color: #3273dc !important;
 }
@@ -731,6 +751,10 @@ a.has-text-link:hover, a.has-text-link:focus {
   color: #205bbc !important;
 }
 
+.has-background-link {
+  background-color: #3273dc !important;
+}
+
 .has-text-info {
   color: #209cee !important;
 }
@@ -739,6 +763,10 @@ a.has-text-info:hover, a.has-text-info:focus {
   color: #0f81cc !important;
 }
 
+.has-background-info {
+  background-color: #209cee !important;
+}
+
 .has-text-success {
   color: #23d160 !important;
 }
@@ -747,6 +775,10 @@ a.has-text-success:hover, a.has-text-success:focus {
   color: #1ca64c !important;
 }
 
+.has-background-success {
+  background-color: #23d160 !important;
+}
+
 .has-text-warning {
   color: #ffdd57 !important;
 }
@@ -755,6 +787,10 @@ a.has-text-warning:hover, a.has-text-warning:focus {
   color: #ffd324 !important;
 }
 
+.has-background-warning {
+  background-color: #ffdd57 !important;
+}
+
 .has-text-danger {
   color: #ff3860 !important;
 }
@@ -763,6 +799,10 @@ a.has-text-danger:hover, a.has-text-danger:focus {
   color: #ff0537 !important;
 }
 
+.has-background-danger {
+  background-color: #ff3860 !important;
+}
+
 .has-text-black-bis {
   color: #121212 !important;
 }

docs/documentation/components/dropdown.html

@@ -327,8 +327,6 @@ doc-subtab: dropdown
 
     {% include anchor.html name="Dropup" %}
 
-    {% include elements/new-tag.html version="0.5.4" %}
-
     <div class="content">
       <p>
         You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.

docs/documentation/elements/table.html

@@ -467,8 +467,6 @@ doc-subtab: table
       </div>
     </div>
 
-    {% include elements/new-tag.html version="0.5.4" %}
-
     <div class="columns">
       <div class="column">
         <p>You can add a <strong>hover effect</strong> on each row</p>

docs/documentation/modifiers/color-helpers.html

@@ -0,0 +1,104 @@
+---
+title: Color helpers
+layout: documentation
+doc-tab: modifiers
+doc-subtab: color-helpers
+---
+
+{% include subnav/subnav-modifiers.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Color helpers</h1>
+    <h2 class="subtitle">
+      Change the <strong>color</strong> of the text and/or background
+    </h2>
+
+    {% include anchor.html name="Text color" %}
+
+    <div class="content">
+      <p>
+        You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
+      </p>
+    </div>
+
+    <table class="table is-bordered">
+      <thead>
+        <tr>
+          <th>
+            Class
+          </th>
+          <th>
+            Color
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
+        <tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
+        <tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
+        <tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
+        <tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
+        <tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
+        <tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
+        <tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
+        <tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
+        <tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
+        <tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
+        <tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
+        <tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
+        <tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
+        <tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
+        <tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
+        <tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
+        <tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
+        <tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
+      </tbody>
+    </table>
+
+    {% include anchor.html name="Background color" %}
+
+    {% include elements/new-tag.html version="0.6.3" %}
+
+    <div class="content">
+      <p>
+        You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
+      </p>
+    </div>
+
+    <table class="table is-bordered">
+      <thead>
+        <tr>
+          <th>
+            Class
+          </th>
+          <th>
+            Background color
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><td><code>has-background-white</code></td><td>{% include color/white.html %}</td></tr>
+        <tr><td><code>has-background-black</code></td><td>{% include color/black.html %}</td></tr>
+        <tr><td><code>has-background-light</code></td><td>{% include color/white-ter.html %}</td></tr>
+        <tr><td><code>has-background-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
+        <tr><td><code>has-background-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
+        <tr><td><code>has-background-info</code></td><td>{% include color/cyan.html %}</td></tr>
+        <tr><td><code>has-background-link</code></td><td>{% include color/blue.html %}</td></tr>
+        <tr><td><code>has-background-success</code></td><td>{% include color/green.html %}</td></tr>
+        <tr><td><code>has-background-warning</code></td><td>{% include color/yellow.html %}</td></tr>
+        <tr><td><code>has-background-danger</code></td><td>{% include color/red.html %}</td></tr>
+        <tr><td><code>has-background-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
+        <tr><td><code>has-background-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
+        <tr><td><code>has-background-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
+        <tr><td><code>has-background-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
+        <tr><td><code>has-background-grey</code></td><td>{% include color/grey.html %}</td></tr>
+        <tr><td><code>has-background-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
+        <tr><td><code>has-background-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
+        <tr><td><code>has-background-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
+        <tr><td><code>has-background-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
+      </tbody>
+    </table>
+
+  </div>
+</section>

sass/base/helpers.sass

@@ -100,7 +100,7 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
     &:hover,
     &:focus
       color: darken($color, 10%) !important
-  .has-bg-#{$name}
+  .has-background-#{$name}
     background-color: $color !important
 
 @each $name, $shade in $shades