From f007bd379fe60736fc0a776320e2b197b19c0bcb Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 23 Mar 2020 09:31:09 +0000 Subject: [PATCH] Bound lightness --- sass/utilities/derived-variables.sass | 30 +++++++++++++-------------- sass/utilities/functions.sass | 13 ++++++------ 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/sass/utilities/derived-variables.sass b/sass/utilities/derived-variables.sass index 3504d7f6..5d25d7a7 100644 --- a/sass/utilities/derived-variables.sass +++ b/sass/utilities/derived-variables.sass @@ -100,26 +100,26 @@ $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, $primary-light, $primary-dark, "white"), "link": ($link, $link-invert, $link-light, $link-dark, "white"), "info": ($info, $info-invert, $info-light, $info-dark, "white"), "success": ($success, $success-invert, $success-light, $success-dark, "white"), "warning": ($warning, $warning-invert, $warning-light, $warning-dark, "white"), "danger": ($danger, $danger-invert, $danger-light, $danger-dark, "white")), $custom-colors) !default +$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark, "white"), "link": ($link, $link-invert, $link-light, $link-dark, "white"), "info": ($info, $info-invert, $info-light, $info-dark, "white"), "success": ($success, $success-invert, $success-light, $success-dark, "white"), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark, "white")), $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 -@function findLightColor($color) - @if type-of($color) == 'color' - $l: 96% - @if lightness($color) > 96% - $l: lightness($color) - @return change-color($color, $lightness: $l) - @return $background +// @function findLightColor($color) +// @if type-of($color) == 'color' +// $l: 96% +// @if lightness($color) > 96% +// $l: lightness($color) +// @return change-color($color, $lightness: $l) +// @return $background -@function findDarkColor($color) - @if type-of($color) == 'color' - $l: 29% - @if lightness($color) < 29% - $l: lightness($color) - @return change-color($color, $lightness: $l) - @return $text-strong +// @function findDarkColor($color) +// @if type-of($color) == 'color' +// $l: 29% +// @if lightness($color) < 29% +// $l: lightness($color) +// @return change-color($color, $lightness: $l) +// @return $text-strong =css-variable($color, $name, $cssvar-invert) $hue: hue($color) diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass index 244aad75..4e520f99 100644 --- a/sass/utilities/functions.sass +++ b/sass/utilities/functions.sass @@ -84,19 +84,18 @@ @function findLightColor($color) @if type-of($color) == 'color' - $l: 96% - @if lightness($color) > 96% - $l: lightness($color) - @return change-color($color, $lightness: $l) + $target-l: max(lightness($color), 96%) + @return change-color($color, $lightness: $target-l) @return $background @function findDarkColor($color) @if type-of($color) == 'color' - $base-l: 29% + $min-l: 29% + $max-l: 48% $luminance: colorLuminance($color) $luminance-delta: (0.53 - $luminance) - $target-l: round($base-l + ($luminance-delta * 53)) - @return change-color($color, $lightness: max($base-l, $target-l)) + $target-l: round($min-l + ($luminance-delta * 53)) + @return change-color($color, $lightness: max($min-l, min($max-l, $target-l))) @return $text-strong @function getCssVariable($color, $name)