From 770bae827f9835d90cd10f382f0d527e1ec801a5 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Fri, 17 May 2019 15:49:25 +0100 Subject: [PATCH] Init light dark colors --- docs/_data/colors.json | 3 +- docs/css/bulma-docs.css | 36 ++++++++++---------- docs/documentation/components/message.html | 2 +- sass/components/message.sass | 26 ++++++++++----- sass/utilities/derived-variables.sass | 38 +++++++++++++++++++++- sass/utilities/functions.sass | 12 ++++++- 6 files changed, 86 insertions(+), 31 deletions(-) diff --git a/docs/_data/colors.json b/docs/_data/colors.json index 659b1856..4cb849d1 100644 --- a/docs/_data/colors.json +++ b/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"] -} \ No newline at end of file +} diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 9c95c334..6bcf31f0 100644 --- a/docs/css/bulma-docs.css +++ b/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 { diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html index b595b33d..6bec6fa4 100644 --- a/docs/documentation/components/message.html +++ b/docs/documentation/components/message.html @@ -36,7 +36,7 @@ meta: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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. -{% for color in site.data.colors.justColors %} +{% for color in site.data.colors.allColors %}

{{ color | capitalize }}

diff --git a/sass/components/message.sass b/sass/components/message.sass index 2e626adb..9af9eb5c 100644 --- a/sass/components/message.sass +++ b/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 - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - $color-lightning: max((100% - lightness($color)) - 2%, 0%) - $color-luminance: colorLuminance($color) - $darken-percentage: $color-luminance * 70% - $desaturate-percentage: $color-luminance * 30% + @each $name, $list in $message-colors + $color: nth($list, 1) + $color-invert: nth($list, 2) + $color-light: null + $color-dark: null + @if length($list) > 2 + $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 diff --git a/sass/utilities/derived-variables.sass b/sass/utilities/derived-variables.sass index c464814a..f122f0fc 100644 --- a/sass/utilities/derived-variables.sass +++ b/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 diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass index acd3e839..774fad40 100644 --- a/sass/utilities/functions.sass +++ b/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