library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bound lightness

Browse Source
This commit is contained in:
Jeremy Thomas 2020-03-23 09:31:09 +00:00
parent 2594422d7a
commit f007bd379f
2 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
sass/utilities/derived-variables.sass
View File

@ -100,26 +100,26 @@ $size-large: $size-4 !default
$custom-colors: null !default $custom-colors: null !default
$custom-shades: 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 $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 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
@function findLightColor($color) // @function findLightColor($color)
@if type-of($color) == 'color' // @if type-of($color) == 'color'
$l: 96% // $l: 96%
@if lightness($color) > 96% // @if lightness($color) > 96%
$l: lightness($color) // $l: lightness($color)
@return change-color($color, $lightness: $l) // @return change-color($color, $lightness: $l)
@return $background // @return $background
@function findDarkColor($color) // @function findDarkColor($color)
@if type-of($color) == 'color' // @if type-of($color) == 'color'
$l: 29% // $l: 29%
@if lightness($color) < 29% // @if lightness($color) < 29%
$l: lightness($color) // $l: lightness($color)
@return change-color($color, $lightness: $l) // @return change-color($color, $lightness: $l)
@return $text-strong // @return $text-strong
=css-variable($color, $name, $cssvar-invert) =css-variable($color, $name, $cssvar-invert)
$hue: hue($color) $hue: hue($color)

13
sass/utilities/functions.sass
View File

@ -84,19 +84,18 @@
@function findLightColor($color) @function findLightColor($color)
@if type-of($color) == 'color' @if type-of($color) == 'color'
$l: 96% $target-l: max(lightness($color), 96%)
@if lightness($color) > 96% @return change-color($color, $lightness: $target-l)
$l: lightness($color)
@return change-color($color, $lightness: $l)
@return $background @return $background
@function findDarkColor($color) @function findDarkColor($color)
@if type-of($color) == 'color' @if type-of($color) == 'color'
$base-l: 29% $min-l: 29%
$max-l: 48%
$luminance: colorLuminance($color) $luminance: colorLuminance($color)
$luminance-delta: (0.53 - $luminance) $luminance-delta: (0.53 - $luminance)
$target-l: round($base-l + ($luminance-delta * 53)) $target-l: round($min-l + ($luminance-delta * 53))
@return change-color($color, $lightness: max($base-l, $target-l)) @return change-color($color, $lightness: max($min-l, min($max-l, $target-l)))
@return $text-strong @return $text-strong
@function getCssVariable($color, $name) @function getCssVariable($color, $name)