Add light notifications

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Bulma Changelog
 
-## 0.8.1
+## Next release
+
+### Improvements
+
+* #2709 Add light colors to the `notification` element
 
 ### Bug fixes
 

docs/_includes/elements/new-tag.html

@@ -3,8 +3,7 @@
 
 <div class="tags has-addons">
   {% if tag_version_value > current_version_value %}
-    <span class="tag">Coming soon!</span>
-    <span class="tag is-warning">{{ include.version }}</span>
+    <span class="tag is-warning">Coming soon!</span>
   {% elsif tag_version_value == current_version_value %}
     <span class="tag">New!</span>
     <span class="tag is-success">{{ include.version }}</span>

docs/css/bulma-docs.css

@@ -3429,31 +3429,61 @@ fieldset[disabled] .button {
   color: #fff;
 }
 
+.notification.is-primary.is-light {
+  background-color: #ebfffc;
+  color: #00947e;
+}
+
 .notification.is-link {
   background-color: #3273dc;
   color: #fff;
 }
 
+.notification.is-link.is-light {
+  background-color: #eef3fc;
+  color: #2160c4;
+}
+
 .notification.is-info {
   background-color: #3298dc;
   color: #fff;
 }
 
+.notification.is-info.is-light {
+  background-color: #eef6fc;
+  color: #1d72aa;
+}
+
 .notification.is-success {
   background-color: #48c774;
   color: #fff;
 }
 
+.notification.is-success.is-light {
+  background-color: #effaf3;
+  color: #257942;
+}
+
 .notification.is-warning {
   background-color: #ffdd57;
   color: rgba(0, 0, 0, 0.7);
 }
 
+.notification.is-warning.is-light {
+  background-color: #fffbeb;
+  color: #947600;
+}
+
 .notification.is-danger {
   background-color: #f14668;
   color: #fff;
 }
 
+.notification.is-danger.is-light {
+  background-color: #feecf0;
+  color: #cc0f35;
+}
+
 .progress {
   -moz-appearance: none;
   -webkit-appearance: none;

docs/documentation/elements/notification.html

@@ -34,6 +34,17 @@ meta:
 {% endfor %}
 {% endcapture %}
 
+{% capture notification_light_colors %}
+{% for color in site.data.colors.justColors %}
+<div class="notification is-{{ color }} is-light">
+  <button class="delete"></button>
+  Primar lorem ipsum dolor sit amet, consectetur
+  adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
+  consectetur adipiscing elit
+</div>
+{% endfor %}
+{% endcapture %}
+
 {% capture notification_js_html %}
 <div class="notification">
   <button class="delete"></button>
@@ -45,6 +56,7 @@ meta:
 document.addEventListener('DOMContentLoaded', () => {
   (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
     $notification = $delete.parentNode;
+
     $delete.addEventListener('click', () => {
       $notification.parentNode.removeChild($notification);
     });
@@ -70,19 +82,24 @@ document.addEventListener('DOMContentLoaded', () => {
 
 {% include elements/snippet.html content=notification_colors %}
 
-<div id="notificationJsExample" class="message is-info">
-  <h4 class="message-header">Javascript delete notification</h4>
-  <div class="message-body">
-    <div class="content">
-      <p>
-        The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example, which sets <code>click</code> handler for <code>delete</code> elements of all notifications on the page, in Vanilla Javascript.
-      </p>
+{% include elements/anchor.html name="Light colors" %}
 
-      {% highlight html %}{{ notification_js_html }}{% endhighlight %}
+{% include elements/new-tag.html version="0.8.1" %}
 
-      {% highlight javascript %}{{ notification_js_code }}{% endhighlight %}
-    </div>
-  </div>
+Each color now comes in its <strong>light</strong> version. Simply append the <code>is-light</code> modifier to obtain the light version of the notification.
+
+{% include elements/snippet.html content=notification_light_colors %}
+
+{% include elements/anchor.html name="JavaScript example" %}
+
+<div class="content">
+  <p>
+    The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example, which sets the <code>click</code> handler for Bulma <code>delete</code> all on the page, in vanilla JavaScript.
+  </p>
+
+  {% highlight html %}{{ notification_js_html }}{% endhighlight %}
+
+  {% highlight javascript %}{{ notification_js_code }}{% endhighlight %}
 </div>
 
 {% include elements/variables.html type='element' %}