]> git.ipfire.org Git - thirdparty/bulma.git/commitdiff
Bound lightness css-variables
authorJeremy Thomas <bbxdesign@gmail.com>
Mon, 23 Mar 2020 09:31:09 +0000 (09:31 +0000)
committerJeremy Thomas <bbxdesign@gmail.com>
Mon, 23 Mar 2020 09:31:09 +0000 (09:31 +0000)
sass/utilities/derived-variables.sass
sass/utilities/functions.sass

index 3504d7f679e854ebc851549a6b139273aa07267a..5d25d7a7ceaf24d4e114f0fb0f37169d5cd98555 100644 (file)
@@ -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 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 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
 
 =css-variable($color, $name, $cssvar-invert)
   $hue: hue($color)
index 244aad75ca02e0effd9b43a63e0e3e1d56915a8f..4e520f9926f93e68a6246a3a75ee7ed528152997 100644 (file)
 
 @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)