{{ 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