1 @function mergeColorMaps($bulma-colors, $custom-colors)
2 // We return at least Bulma's hard-coded colors
3 $merged-colors: $bulma-colors
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
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
39 $color-invert: nth($components, 2)
40 $color-light: findLightColor($color-base)
41 $color-dark: findDarkColor($color-base)
43 $value: ($color-base, $color-invert, $color-light, $color-dark)
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))
52 @return $merged-colors
54 @function powerNumber($number, $exp)
57 @for $i from 1 through $exp
58 $value: $value * $number
60 @for $i from 1 through -$exp
61 $value: $value / $number
64 @function colorLuminance($color)
65 $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
66 @each $name, $value in $color-rgb
70 $value: $value / 12.92
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)
77 @function findColorInvert($color)
78 @if (colorLuminance($color) > 0.55)
79 @return rgba(#000, 0.7)
83 @function findLightColor($color)
84 @if type-of($color) == 'color'
86 @if lightness($color) > 96%
88 @return change-color($color, $lightness: $l)
91 @function findDarkColor($color)
92 @if type-of($color) == 'color'
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))