Init light dark colors

docs/_data/colors.json

@@ -148,5 +148,6 @@
       "invertValue": "#fff"
     }
   ],
+  "allColors": ["white", "black", "light", "dark", "primary", "link", "info", "success", "warning", "danger"],
   "justColors": ["primary", "link", "info", "success", "warning", "danger"]
-}
+}

docs/css/bulma-docs.css

@@ -6014,11 +6014,11 @@ a.list-item {
 
 .message.is-white .message-body {
   border-color: white;
-  color: #4d4d4d;
+  color: #0a0a0a;
 }
 
 .message.is-black {
-  background-color: #fafafa;
+  background-color: #0a0a0a;
 }
 
 .message.is-black .message-header {
@@ -6028,7 +6028,7 @@ a.list-item {
 
 .message.is-black .message-body {
   border-color: #0a0a0a;
-  color: #090909;
+  color: white;
 }
 
 .message.is-light {
@@ -6042,11 +6042,11 @@ a.list-item {
 
 .message.is-light .message-body {
   border-color: whitesmoke;
-  color: #505050;
+  color: #363636;
 }
 
 .message.is-dark {
-  background-color: #fafafa;
+  background-color: whitesmoke;
 }
 
 .message.is-dark .message-header {
@@ -6056,11 +6056,11 @@ a.list-item {
 
 .message.is-dark .message-body {
   border-color: #363636;
-  color: #2a2a2a;
+  color: #242424;
 }
 
 .message.is-primary {
-  background-color: #f5fffd;
+  background-color: #ebfffc;
 }
 
 .message.is-primary .message-header {
@@ -6070,11 +6070,11 @@ a.list-item {
 
 .message.is-primary .message-body {
   border-color: #00d1b2;
-  color: #021310;
+  color: #00947e;
 }
 
 .message.is-link {
-  background-color: #f6f9fe;
+  background-color: #eef3fc;
 }
 
 .message.is-link .message-header {
@@ -6084,11 +6084,11 @@ a.list-item {
 
 .message.is-link .message-body {
   border-color: #3273dc;
-  color: #22509a;
+  color: #153e7e;
 }
 
 .message.is-info {
-  background-color: #f6fbfe;
+  background-color: #ecf7fe;
 }
 
 .message.is-info .message-header {
@@ -6098,11 +6098,11 @@ a.list-item {
 
 .message.is-info .message-body {
   border-color: #209cee;
-  color: #12537e;
+  color: #0a578a;
 }
 
 .message.is-success {
-  background-color: #f6fef9;
+  background-color: #eefcf3;
 }
 
 .message.is-success .message-header {
@@ -6112,11 +6112,11 @@ a.list-item {
 
 .message.is-success .message-body {
   border-color: #23d160;
-  color: #0e301a;
+  color: #157e3a;
 }
 
 .message.is-warning {
-  background-color: #fffdf5;
+  background-color: #fffbeb;
 }
 
 .message.is-warning .message-header {
@@ -6126,11 +6126,11 @@ a.list-item {
 
 .message.is-warning .message-body {
   border-color: #ffdd57;
-  color: #3b3108;
+  color: #947600;
 }
 
 .message.is-danger {
-  background-color: #fff5f7;
+  background-color: #ffebef;
 }
 
 .message.is-danger .message-header {
@@ -6140,7 +6140,7 @@ a.list-item {
 
 .message.is-danger .message-body {
   border-color: #ff3860;
-  color: #cd0930;
+  color: #94001e;
 }
 
 .message-header {

docs/documentation/components/message.html

@@ -36,7 +36,7 @@ meta:
     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.justColors %}
+{% for color in site.data.colors.allColors %}
 <article class="message is-{{ color }}">
   <div class="message-header">
     <p>{{ color | capitalize }}</p>

sass/components/message.sass

@@ -37,21 +37,29 @@ $message-colors: $colors !default
   &.is-large
     font-size: $size-large
   // Colors
-  @each $name, $pair in $message-colors
+  @each $name, $list in $message-colors
-    $color: nth($pair, 1)
+    $color: nth($list, 1)
-    $color-invert: nth($pair, 2)
+    $color-invert: nth($list, 2)
-    $color-lightning: max((100% - lightness($color)) - 2%, 0%)
+    $color-light: null
-    $color-luminance: colorLuminance($color)
+    $color-dark: null
-    $darken-percentage: $color-luminance * 70%
+    @if length($list) > 2
-    $desaturate-percentage: $color-luminance * 30%
+      $color-light: nth($list, 3)
+      $color-dark: nth($list, 4)
+    @else
+      $color-light: findLightColor($color)
+      $color-dark: findDarkColor($color)
+    // $color-lightning: max((100% - lightness($color)) - 2%, 0%)
+    // $color-luminance: colorLuminance($color)
+    // $darken-percentage: $color-luminance * 70%
+    // $desaturate-percentage: $color-luminance * 30%
     &.is-#{$name}
-      background-color: lighten($color, $color-lightning)
+      background-color: $color-light
       .message-header
         background-color: $color
         color: $color-invert
       .message-body
         border-color: $color
-        color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+        color: $color-dark
 
 .message-header
   align-items: center

sass/utilities/derived-variables.sass

@@ -6,26 +6,60 @@ $warning: $yellow !default
 $danger: $red !default
 
 $light: $white-ter !default
+$lighter: $white-bis !default
 $dark: $grey-darker !default
+$darker: $black-ter !default
 
 // Invert colors
 
 $orange-invert: findColorInvert($orange) !default
+$orange-light: findLightColor($orange) !default
+$orange-dark: findDarkColor($orange) !default
 $yellow-invert: findColorInvert($yellow) !default
+$yellow-light: findLightColor($yellow) !default
+$yellow-dark: findDarkColor($yellow) !default
 $green-invert: findColorInvert($green) !default
+$green-light: findLightColor($green) !default
+$green-dark: findDarkColor($green) !default
 $turquoise-invert: findColorInvert($turquoise) !default
+$turquoise-light: findLightColor($turquoise) !default
+$turquoise-dark: findDarkColor($turquoise) !default
 $cyan-invert: findColorInvert($cyan) !default
+$cyan-light: findLightColor($cyan) !default
+$cyan-dark: findDarkColor($cyan) !default
 $blue-invert: findColorInvert($blue) !default
+$blue-light: findLightColor($blue) !default
+$blue-dark: findDarkColor($blue) !default
 $purple-invert: findColorInvert($purple) !default
+$purple-light: findLightColor($purple) !default
+$purple-dark: findDarkColor($purple) !default
 $red-invert: findColorInvert($red) !default
+$red-light: findLightColor($red) !default
+$red-dark: findDarkColor($red) !default
 
 $primary-invert: $turquoise-invert !default
+$primary-light: $turquoise-light !default
+$primary-dark: $turquoise-dark !default
 $info-invert: $cyan-invert !default
+$info-light: $cyan-light !default
+$info-dark: $cyan-dark !default
 $success-invert: $green-invert !default
+$success-light: $green-light !default
+$success-dark: $green-dark !default
 $warning-invert: $yellow-invert !default
+$warning-light: $yellow-light !default
+$warning-dark: $yellow-dark !default
 $danger-invert: $red-invert !default
+$danger-light: $red-light !default
+$danger-dark: $red-dark !default
+
 $light-invert: $dark !default
+$light-light: $lighter !default
+$light-dark: $dark !default
+
 $dark-invert: $light !default
+$dark-light: $light !default
+$dark-dark: $darker !default
 
 // General colors
 
@@ -53,6 +87,8 @@ $pre-background: $background !default
 
 $link: $blue !default
 $link-invert: $blue-invert !default
+$link-light: $blue-light !default
+$link-dark: $blue-dark !default
 $link-visited: $purple !default
 
 $link-hover: $grey-darker !default
@@ -79,7 +115,7 @@ $size-large: $size-4 !default
 $custom-colors: null !default
 $custom-shades: null !default
 
-$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
+$colors: mergeColorMaps(("white": ($white, $black, $white, $black), "black": ($black, $white, $black, $white), "light": ($light, $light-invert, $light-light, $light-dark), "dark": ($dark, $dark-invert, $dark-light, $dark-dark), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
 $shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
 
 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

sass/utilities/functions.sass

@@ -56,7 +56,17 @@
   @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
 
 @function findColorInvert($color)
-  @if (colorLuminance($color) > 0.55)
+  @if (type-of($color) == 'color') and (colorLuminance($color) > 0.6)
     @return rgba(#000, 0.7)
   @else
     @return #fff
+
+@function findLightColor($color)
+  @if type-of($color) == 'color'
+    @return change-color($color, $lightness: 96%)
+  @return $background
+
+@function findDarkColor($color)
+  @if type-of($color) == 'color'
+    @return change-color($color, $lightness: 29%)
+  @return $text-strong