From a1a6a048a1e751ed255df40b3f413ce4aba91c10 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sat, 18 May 2019 11:54:58 +0100
Subject: [PATCH] Add lighter and darker

---
 docs/css/bulma-docs.css                    | 94 +++++++++++-----------
 docs/documentation/components/message.html | 11 +--
 sass/components/message.sass               |  4 +-
 sass/utilities/derived-variables.sass      |  2 +-
 4 files changed, 51 insertions(+), 60 deletions(-)

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 6bcf31f0..4fa4b96a 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -375,7 +375,7 @@ a:hover {
 }
 
 code {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   color: #ff3860;
   font-size: 0.875em;
   font-weight: normal;
@@ -383,7 +383,7 @@ code {
 }
 
 hr {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   border: none;
   display: block;
   height: 2px;
@@ -420,7 +420,7 @@ fieldset {
 
 pre {
   -webkit-overflow-scrolling: touch;
-  background-color: whitesmoke;
+  background-color: #fafafa;
   color: #4a4a4a;
   font-size: 0.875em;
   overflow-x: auto;
@@ -1640,12 +1640,12 @@ a.box:active {
 }
 
 .button.is-text:hover, .button.is-text.is-hovered, .button.is-text:focus, .button.is-text.is-focused {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   color: #363636;
 }
 
 .button.is-text:active, .button.is-text.is-active {
-  background-color: #e8e8e8;
+  background-color: #ededed;
   color: #363636;
 }
 
@@ -2888,7 +2888,7 @@ fieldset[disabled] .button {
 }
 
 .content blockquote {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   border-left: 5px solid #dbdbdb;
   padding: 1.25em 1.5em;
 }
@@ -3073,8 +3073,8 @@ fieldset[disabled] .input,
 .textarea[disabled],
 fieldset[disabled]
 .textarea {
-  background-color: whitesmoke;
-  border-color: whitesmoke;
+  background-color: #fafafa;
+  border-color: #fafafa;
   box-shadow: none;
   color: #7a7a7a;
 }
@@ -3401,8 +3401,8 @@ fieldset[disabled]
 
 .select select[disabled],
 fieldset[disabled] .select select {
-  background-color: whitesmoke;
-  border-color: whitesmoke;
+  background-color: #fafafa;
+  border-color: #fafafa;
   box-shadow: none;
   color: #7a7a7a;
 }
@@ -3433,7 +3433,7 @@ fieldset[disabled] .select select:-ms-input-placeholder {
 
 .select select[disabled]:hover,
 fieldset[disabled] .select select:hover {
-  border-color: whitesmoke;
+  border-color: #fafafa;
 }
 
 .select select:not([multiple]) {
@@ -4585,7 +4585,7 @@ fieldset[disabled] .select select:hover {
 }
 
 .notification {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   border-radius: 4px;
   padding: 1.25rem 2.5rem 1.25rem 1.5rem;
   position: relative;
@@ -5167,7 +5167,7 @@ fieldset[disabled] .select select:hover {
 
 .tag:not(body) {
   align-items: center;
-  background-color: whitesmoke;
+  background-color: #fafafa;
   border-radius: 4px;
   color: #4a4a4a;
   display: inline-flex;
@@ -5291,11 +5291,11 @@ fieldset[disabled] .select select:hover {
 }
 
 .tag:not(body).is-delete:hover, .tag:not(body).is-delete:focus {
-  background-color: #e8e8e8;
+  background-color: #ededed;
 }
 
 .tag:not(body).is-delete:active {
-  background-color: #dbdbdb;
+  background-color: #e0e0e0;
 }
 
 .tag:not(body).is-rounded {
@@ -5447,7 +5447,7 @@ a.tag:hover {
 
 .number {
   align-items: center;
-  background-color: whitesmoke;
+  background-color: #fafafa;
   border-radius: 290486px;
   display: inline-flex;
   font-size: 1.25rem;
@@ -5681,7 +5681,7 @@ button.dropdown-item {
 
 a.dropdown-item:hover,
 button.dropdown-item:hover {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   color: #0a0a0a;
 }
 
@@ -5846,7 +5846,7 @@ button.dropdown-item.is-active {
 }
 
 a.list-item {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   cursor: pointer;
 }
 
@@ -5946,7 +5946,7 @@ a.list-item {
 }
 
 .menu-list a:hover {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   color: #363636;
 }
 
@@ -5977,7 +5977,7 @@ a.list-item {
 }
 
 .message {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   border-radius: 4px;
   font-size: 1rem;
 }
@@ -6145,9 +6145,9 @@ a.list-item {
 
 .message-header {
   align-items: center;
-  background-color: #4a4a4a;
+  background-color: white;
   border-radius: 4px 4px 0 0;
-  color: #fff;
+  color: #363636;
   display: flex;
   font-weight: 700;
   justify-content: space-between;
@@ -6242,7 +6242,7 @@ a.list-item {
 .modal-card-head,
 .modal-card-foot {
   align-items: center;
-  background-color: whitesmoke;
+  background-color: #fafafa;
   display: flex;
   flex-shrink: 0;
   justify-content: flex-start;
@@ -6918,7 +6918,7 @@ a.list-item {
 }
 
 .navbar.has-shadow {
-  box-shadow: 0 2px 0 0 whitesmoke;
+  box-shadow: 0 2px 0 0 #fafafa;
 }
 
 .navbar.is-fixed-bottom, .navbar.is-fixed-top {
@@ -6933,7 +6933,7 @@ a.list-item {
 }
 
 .navbar.is-fixed-bottom.has-shadow {
-  box-shadow: 0 -2px 0 0 whitesmoke;
+  box-shadow: 0 -2px 0 0 #fafafa;
 }
 
 .navbar.is-fixed-top {
@@ -7119,7 +7119,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
 }
 
 .navbar-divider {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   border: none;
   display: none;
   height: 2px;
@@ -7208,11 +7208,11 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
     background-color: transparent !important;
   }
   .navbar.is-transparent .navbar-dropdown a.navbar-item:focus, .navbar.is-transparent .navbar-dropdown a.navbar-item:hover {
-    background-color: whitesmoke;
+    background-color: #fafafa;
     color: #0a0a0a;
   }
   .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active {
-    background-color: whitesmoke;
+    background-color: #fafafa;
     color: #3273dc;
   }
   .navbar-burger {
@@ -7282,11 +7282,11 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
     padding-right: 3rem;
   }
   .navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover {
-    background-color: whitesmoke;
+    background-color: #fafafa;
     color: #0a0a0a;
   }
   .navbar-dropdown a.navbar-item.is-active {
-    background-color: whitesmoke;
+    background-color: #fafafa;
     color: #3273dc;
   }
   .navbar.is-spaced .navbar-dropdown, .navbar-dropdown.is-boxed {
@@ -7547,7 +7547,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
 }
 
 .panel-heading {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   border-radius: 4px 4px 0 0;
   color: #363636;
   font-size: 1.25em;
@@ -7620,7 +7620,7 @@ label.panel-block {
 
 a.panel-block:hover,
 label.panel-block:hover {
-  background-color: whitesmoke;
+  background-color: #fafafa;
 }
 
 .panel-icon {
@@ -7727,7 +7727,7 @@ label.panel-block:hover {
 }
 
 .tabs.is-boxed a:hover {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   border-bottom-color: #dbdbdb;
 }
 
@@ -7751,7 +7751,7 @@ label.panel-block:hover {
 }
 
 .tabs.is-toggle a:hover {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   border-color: #b5b5b5;
   z-index: 2;
 }
@@ -10671,11 +10671,11 @@ label.panel-block:hover {
 }
 
 .bd-prev-next a:hover {
-  background-color: whitesmoke;
+  background-color: #fafafa;
 }
 
 .bd-prev-next-bis {
-  border-top: 2px solid whitesmoke;
+  border-top: 2px solid #fafafa;
   display: flex;
   justify-content: space-between;
   margin-top: 3rem;
@@ -10973,7 +10973,7 @@ label.panel-block:hover {
 }
 
 .highlight {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   border-radius: 6px;
   color: #586e75;
 }
@@ -12528,7 +12528,7 @@ svg {
 }
 
 .bd-box {
-  border: 4px solid whitesmoke;
+  border: 4px solid #fafafa;
   border-radius: 4px;
 }
 
@@ -12670,7 +12670,7 @@ svg {
 }
 
 .bd-notification {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   border-radius: 4px;
   color: #7a7a7a;
   font-weight: 600;
@@ -12762,7 +12762,7 @@ svg {
 .bd-example,
 .bd-structure,
 .bd-snippet {
-  border: 2px solid whitesmoke;
+  border: 2px solid #fafafa;
   position: relative;
 }
 
@@ -12978,7 +12978,7 @@ svg {
   right: 0;
   top: 0;
   background: rgba(10, 10, 10, 0.7);
-  background: whitesmoke;
+  background: #fafafa;
   border: 1px solid #dbdbdb;
   content: "";
   display: block;
@@ -13053,7 +13053,7 @@ svg {
   right: 0;
   top: 0;
   align-items: center;
-  background-color: rgba(245, 245, 245, 0.7);
+  background-color: rgba(250, 250, 250, 0.7);
   border: none;
   color: rgba(0, 0, 0, 0.5);
   cursor: pointer;
@@ -13114,7 +13114,7 @@ svg {
 }
 
 .bd-callout {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   border-radius: 4px;
   padding: 1.25rem 2.5rem 1.25rem 1.5rem;
   position: relative;
@@ -13596,7 +13596,7 @@ svg {
 }
 
 .bd-testimonials {
-  background-color: whitesmoke;
+  background-color: #fafafa;
 }
 
 .bd-testimonial {
@@ -13747,7 +13747,7 @@ svg {
 }
 
 .bd-shoutout {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   padding: 2rem;
   text-align: center;
 }
@@ -13861,7 +13861,7 @@ svg {
 }
 
 .bd-bootstrap-comparison .table .bd-is-empty {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   color: #7a7a7a;
 }
 
@@ -13892,7 +13892,7 @@ svg {
 }
 
 .bd-klmn-gap {
-  background-color: whitesmoke;
+  background-color: #fafafa;
   border-radius: 4px;
   color: #ff3860;
   font-family: monospace;
diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html
index 6bec6fa4..01aa5346 100644
--- a/docs/documentation/components/message.html
+++ b/docs/documentation/components/message.html
@@ -27,16 +27,7 @@ meta:
 {% endcapture %}
 
 {% capture message_colors_example %}
-<article class="message is-dark">
-  <div class="message-header">
-    <p>Dark</p>
-    <button class="delete" aria-label="delete"></button>
-  </div>
-  <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <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. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-  </div>
-</article>
-{% for color in site.data.colors.allColors %}
+{% for color in site.data.colors.justColors %}
 <article class="message is-{{ color }}">
   <div class="message-header">
     <p>{{ color | capitalize }}</p>
diff --git a/sass/components/message.sass b/sass/components/message.sass
index 9af9eb5c..c3a794ae 100644
--- a/sass/components/message.sass
+++ b/sass/components/message.sass
@@ -1,8 +1,8 @@
 $message-background-color: $background !default
 $message-radius: $radius !default
 
-$message-header-background-color: $text !default
-$message-header-color: $text-invert !default
+$message-header-background-color: $white !default
+$message-header-color: $text-strong !default
 $message-header-weight: $weight-bold !default
 $message-header-padding: 0.75em 1em !default
 $message-header-radius: $radius !default
diff --git a/sass/utilities/derived-variables.sass b/sass/utilities/derived-variables.sass
index f122f0fc..22d861ef 100644
--- a/sass/utilities/derived-variables.sass
+++ b/sass/utilities/derived-variables.sass
@@ -63,7 +63,7 @@ $dark-dark: $darker !default
 
 // General colors
 
-$background: $white-ter !default
+$background: $white-bis !default
 
 $border: $grey-lighter !default
 $border-hover: $grey-light !default