@function mergeColorMaps($bulma-colors, $custom-colors) // We return at least Bulma's hard-coded colors $merged-colors: $bulma-colors // We want a map as input @if type-of($custom-colors) == 'map' @each $name, $components in $custom-colors // The color name should be a string // and the components either a single color // or a colors list with at least one element @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1 $color-base: null $value: null // The param can either be a single color // or a list of 2 colors @if type-of($components) == 'color' $color-base: $components $value: $components @else if type-of($components) == 'list' $color-base: nth($components, 1) $color-invert: null // Check if the invert color is provided, // otherwise compute it @if length($components) > 1 $color-invert: nth($components, 2) @else $color-invert: findColorInvert($color-base) $value: ($color-base, $color-invert) // We only want to merge the map if the color base is an actual color @if type-of($color-base) == 'color' // We merge this colors elements as map with Bulma's colors map // (we can override them this way, no multiple definition for the same name) // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert))) $merged-colors: map_merge($merged-colors, ($name: $value)) @return $merged-colors @function powerNumber($number, $exp) $value: 1 @if $exp > 0 @for $i from 1 through $exp $value: $value * $number @else if $exp < 0 @for $i from 1 through -$exp $value: $value / $number @return $value @function colorLuminance($color) $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color)) @each $name, $value in $color-rgb $adjusted: 0 $value: $value / 255 @if $value < 0.03928 $value: $value / 12.92 @else $value: ($value + .055) / 1.055 $value: powerNumber($value, 2) $color-rgb: map-merge($color-rgb, ($name: $value)) @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) @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 @function getCssVariable($color, $name) $hue: hue($color) $saturation: saturation($color) $lightness: lightness($color) $alpha: alpha($color) @return $hue, $saturation, $lightness