bulma/sass/utilities/functions.sass

136 lines
4.8 KiB
Sass
Raw Normal View History

2018-04-08 13:38:59 +00:00
@function mergeColorMaps($bulma-colors, $custom-colors)
2019-05-20 20:19:36 +00:00
// We return at least Bulma's hard-coded colors
$merged-colors: $bulma-colors
2018-04-08 15:06:57 +00:00
2019-05-20 20:19:36 +00:00
// We want a map as input
@if type-of($custom-colors) == 'map'
@each $name, $components in $custom-colors
2019-05-20 20:19:36 +00:00
// 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
2018-04-08 13:38:59 +00:00
$color-base: null
2019-10-13 14:12:30 +00:00
$color-invert: null
$color-light: null
$color-dark: null
2019-05-20 20:19:36 +00:00
$value: null
2018-04-08 15:06:57 +00:00
2019-05-20 20:19:36 +00:00
// The param can either be a single color
2018-04-08 15:06:57 +00:00
// or a list of 2 colors
2018-04-08 13:38:59 +00:00
@if type-of($components) == 'color'
$color-base: $components
2019-10-13 14:12:30 +00:00
$color-invert: findColorInvert($color-base)
$color-light: findLightColor($color-base)
$color-dark: findDarkColor($color-base)
2018-04-08 13:38:59 +00:00
@else if type-of($components) == 'list'
$color-base: nth($components, 1)
2019-10-13 14:12:30 +00:00
// If Invert, Light and Dark are provided
@if length($components) > 3
2019-05-20 20:19:36 +00:00
$color-invert: nth($components, 2)
2019-10-13 14:12:30 +00:00
$color-light: nth($components, 3)
$color-dark: nth($components, 4)
2019-10-13 15:31:23 +00:00
// If only Invert and Light are provided
2019-10-13 14:12:30 +00:00
@else if length($components) > 2
$color-invert: nth($components, 2)
$color-light: nth($components, 3)
$color-dark: findDarkColor($color-base)
2019-10-13 15:31:23 +00:00
// If only Invert is provided
2019-05-20 20:19:36 +00:00
@else
2019-10-13 14:12:30 +00:00
$color-invert: nth($components, 2)
$color-light: findLightColor($color-base)
$color-dark: findDarkColor($color-base)
$value: ($color-base, $color-invert, $color-light, $color-dark)
2018-04-08 15:06:57 +00:00
2019-05-20 20:19:36 +00:00
// 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)
2019-10-13 14:12:30 +00:00
// $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
2019-05-20 20:19:36 +00:00
$merged-colors: map_merge($merged-colors, ($name: $value))
2018-04-08 15:06:57 +00:00
@return $merged-colors
2016-01-24 00:03:43 +00:00
@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: divide($value, $number)
2016-01-24 00:03:43 +00:00
@return $value
@function colorLuminance($color)
2020-03-16 02:29:44 +00:00
@if type-of($color) != 'color'
@return 0.55
$color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
@each $name, $value in $color-rgb
2016-01-24 00:03:43 +00:00
$adjusted: 0
$value: divide($value, 255)
2016-01-24 00:03:43 +00:00
@if $value < 0.03928
$value: divide($value, 12.92)
2016-01-24 00:03:43 +00:00
@else
$value: divide(($value + .055), 1.055)
2016-01-24 00:03:43 +00:00
$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)
2016-01-24 00:03:43 +00:00
@function findColorInvert($color)
2016-09-25 16:44:01 +00:00
@if (colorLuminance($color) > 0.55)
2016-10-30 10:41:53 +00:00
@return rgba(#000, 0.7)
2016-01-24 00:03:43 +00:00
@else
2016-10-30 10:41:53 +00:00
@return #fff
2019-10-13 09:10:13 +00:00
2021-09-19 00:23:53 +00:00
@function findLightColor($color, $l: 96%)
2019-10-13 09:10:13 +00:00
@if type-of($color) == 'color'
$l: 96%
@if lightness($color) > 96%
$l: lightness($color)
@return change-color($color, $lightness: $l)
@return $background
2021-09-19 00:23:53 +00:00
@function findDarkColor($color, $base-l: 29%)
2019-10-13 09:10:13 +00:00
@if type-of($color) == 'color'
2019-10-13 14:12:30 +00:00
$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))
2019-10-13 09:10:13 +00:00
@return $text-strong
2020-01-05 13:27:54 +00:00
@function bulmaRgba($color, $alpha)
2020-03-16 02:29:44 +00:00
@if type-of($color) != 'color'
@return $color
@return rgba($color, $alpha)
@function bulmaDarken($color, $amount)
@if type-of($color) != 'color'
@return $color
@return darken($color, $amount)
2020-05-10 21:10:51 +00:00
@function bulmaLighten($color, $amount)
@if type-of($color) != 'color'
@return $color
@return lighten($color, $amount)
// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
// Replaces old slash division deprecated in Dart Sass
@function divide($dividend, $divisor, $precision: 10)
$sign: if($dividend > 0 and $divisor > 0, 1, -1)
$dividend: abs($dividend)
$divisor: abs($divisor)
$quotient: 0
$remainder: $dividend
@if $dividend == 0
@return 0
@if $divisor == 0
@error "Cannot divide by 0"
@if $divisor == 1
@return $dividend
@while $remainder >= $divisor
$quotient: $quotient + 1
$remainder: $remainder - $divisor
@if $remainder > 0 and $precision > 0
$remainder: divide($remainder * 10, $divisor, $precision - 1) * .1
@return ($quotient + $remainder) * $sign