mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
111 lines
3.9 KiB
Sass
111 lines
3.9 KiB
Sass
@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
|
|
$color-invert: null
|
|
$color-light: null
|
|
$color-dark: 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
|
|
$color-invert: findColorInvert($color-base)
|
|
$color-light: findLightColor($color-base)
|
|
$color-dark: findDarkColor($color-base)
|
|
@else if type-of($components) == 'list'
|
|
$color-base: nth($components, 1)
|
|
// If Invert, Light and Dark are provided
|
|
@if length($components) > 3
|
|
$color-invert: nth($components, 2)
|
|
$color-light: nth($components, 3)
|
|
$color-dark: nth($components, 4)
|
|
// If only Invert and Light are provided
|
|
@else if length($components) > 2
|
|
$color-invert: nth($components, 2)
|
|
$color-light: nth($components, 3)
|
|
$color-dark: findDarkColor($color-base)
|
|
// If only Invert is provided
|
|
@else
|
|
$color-invert: nth($components, 2)
|
|
$color-light: findLightColor($color-base)
|
|
$color-dark: findDarkColor($color-base)
|
|
|
|
$value: ($color-base, $color-invert, $color-light, $color-dark)
|
|
|
|
// 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, $color-light, $color-dark)))
|
|
$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'
|
|
$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'
|
|
$base-l: 29%
|
|
$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))
|
|
@return $text-strong
|
|
|
|
@function getCssVariable($color, $name)
|
|
$hue: hue($color)
|
|
$saturation: saturation($color)
|
|
$lightness: lightness($color)
|
|
$alpha: alpha($color)
|
|
@return $hue, $saturation, $lightness
|
|
|
|
@function bulmaRgba($color, $alpha)
|
|
@if type-of($color) == 'color'
|
|
@return rgba($color, $alpha)
|
|
@return $color
|