mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
200 lines
5.1 KiB
SCSS
200 lines
5.1 KiB
SCSS
@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: divide($value, $number);
|
|
}
|
|
}
|
|
|
|
@return $value;
|
|
}
|
|
|
|
@function colorLuminance($color) {
|
|
@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 {
|
|
$adjusted: 0;
|
|
$value: divide($value, 255);
|
|
|
|
@if $value < 0.03928 {
|
|
$value: divide($value, 12.92);
|
|
}
|
|
@else {
|
|
$value: divide($value + 0.055, 1.055);
|
|
$value: powerNumber($value, 2);
|
|
}
|
|
|
|
$color-rgb: map-merge($color-rgb, ($name: $value));
|
|
}
|
|
|
|
@return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") * 0.7152 + map-get($color-rgb, "blue") * 0.0722;
|
|
}
|
|
|
|
@function findColorInvert($color) {
|
|
@if colorLuminance($color) > 0.55 {
|
|
@return rgba(#000, 0.7);
|
|
}
|
|
@else {
|
|
@return #fff;
|
|
}
|
|
}
|
|
|
|
@function findLightColor($color, $l: 96%) {
|
|
@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, $base-l: 29%) {
|
|
@if type-of($color) == "color" {
|
|
$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 bulmaRgba($color, $alpha) {
|
|
@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);
|
|
}
|
|
|
|
@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) * 0.1;
|
|
}
|
|
|
|
@return ($quotient + $remainder) * $sign;
|
|
}
|