public/vendors/bulma/sass/utilities/functions.sass

   1 @function mergeColorMaps($bulma-colors, $custom-colors)
   2   // We return at least Bulma's hard-coded colors
   3   $merged-colors: $bulma-colors
   4
   5   // We want a map as input
   6   @if type-of($custom-colors) == 'map'
   7     @each $name, $components in $custom-colors
   8       // The color name should be a string
   9       // and the components either a single color
  10       // or a colors list with at least one element
  11       @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
  12         $color-base: null
  13         $color-invert: null
  14         $color-light: null
  15         $color-dark: null
  16         $value: null
  17
  18         // The param can either be a single color
  19         // or a list of 2 colors
  20         @if type-of($components) == 'color'
  21           $color-base: $components
  22           $color-invert: findColorInvert($color-base)
  23           $color-light: findLightColor($color-base)
  24           $color-dark: findDarkColor($color-base)
  25         @else if type-of($components) == 'list'
  26           $color-base: nth($components, 1)
  27           // If Invert, Light and Dark are provided
  28           @if length($components) > 3
  29             $color-invert: nth($components, 2)
  30             $color-light: nth($components, 3)
  31             $color-dark: nth($components, 4)
  32             // If only Invert and Light are provided
  33           @else if length($components) > 2
  34             $color-invert: nth($components, 2)
  35             $color-light: nth($components, 3)
  36             $color-dark: findDarkColor($color-base)
  37             // If only Invert is provided
  38           @else
  39             $color-invert: nth($components, 2)
  40             $color-light: findLightColor($color-base)
  41             $color-dark: findDarkColor($color-base)
  42
  43         $value: ($color-base, $color-invert, $color-light, $color-dark)
  44
  45         // We only want to merge the map if the color base is an actual color
  46         @if type-of($color-base) == 'color'
  47           // We merge this colors elements as map with Bulma's colors map
  48           // (we can override them this way, no multiple definition for the same name)
  49           // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
  50           $merged-colors: map_merge($merged-colors, ($name: $value))
  51
  52   @return $merged-colors
  53
  54 @function powerNumber($number, $exp)
  55   $value: 1
  56   @if $exp > 0
  57     @for $i from 1 through $exp
  58       $value: $value * $number
  59   @else if $exp < 0
  60     @for $i from 1 through -$exp
  61       $value: $value / $number
  62   @return $value
  63
  64 @function colorLuminance($color)
  65   $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
  66   @each $name, $value in $color-rgb
  67     $adjusted: 0
  68     $value: $value / 255
  69     @if $value < 0.03928
  70       $value: $value / 12.92
  71     @else
  72       $value: ($value + .055) / 1.055
  73       $value: powerNumber($value, 2)
  74     $color-rgb: map-merge($color-rgb, ($name: $value))
  75   @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
  76
  77 @function findColorInvert($color)
  78   @if (colorLuminance($color) > 0.55)
  79     @return rgba(#000, 0.7)
  80   @else
  81     @return #fff
  82
  83 @function findLightColor($color)
  84   @if type-of($color) == 'color'
  85     $l: 96%
  86     @if lightness($color) > 96%
  87       $l: lightness($color)
  88     @return change-color($color, $lightness: $l)
  89   @return $background
  90
  91 @function findDarkColor($color)
  92   @if type-of($color) == 'color'
  93     $base-l: 29%
  94     $luminance: colorLuminance($color)
  95     $luminance-delta: (0.53 - $luminance)
  96     $target-l: round($base-l + ($luminance-delta * 53))
  97     @return change-color($color, $lightness: max($base-l, $target-l))
  98   @return $text-strong