@function brightness($color) {
$r: red($color) / 255 * 100;
$g: green($color) / 255 * 100;
$b: blue($color) / 255 * 100;
$brightness: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@return $brightness;
}
@function color-difference($c1, $c2) {
@return (max(red($c1), red($c2)) - min(red($c1), red($c2))) + (max(green($c1), green($c2)) - min(green($c1), green($c2))) + (max(blue($c1), blue($c2)) - min(blue($c1), blue($c2)));
}
@function color-luminance($value) {
@if $value <= 0.03928 {
@return $value / 12.92;
} @else {
@return ($value + 0.055)/1.055 * ($value + 0.055)/1.055;
}
}
@function luminosity($color) {
$r: color-luminance(red($color) / 255);
$g: color-luminance(green($color) / 255);
$b: color-luminance(blue($color) / 255);
$l: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
@debug 'luminosity for ' + $color + ' is ' + $l;
@return $l;
}
@function contrast-ratio($color1, $color2) {
$l1: luminosity($color1);
$l2: luminosity($color2);
@if $l2 > $l1 {
@return $l2 / $l1;
} @else {
@return $l1 / $l2;
}
}
@function get-color-mode($color) {
@if brightness($color) > 55 {
@return light;
} @else {
@return dark;
}
}
$color-mode: 'inverse';
@function color-offset($color, $contrast: 85%, $mode: $color-mode, $inverse: false) {
$flat_color: check-opacity($color);
@if $mode == inverse {
$mode: reverse-color-mode($color-mode);
}
@if $inverse == true {
$mode: reverse-color-mode($mode);
}
@if ($mode == light) {
@return rgba(lighten($flat_color, $contrast), opacity($color));
} @else if ($mode == dark) {
@return rgba(darken($flat_color, $contrast), opacity($color));
} @else {
@debug $mode + " is not a valid color mode. Use light, dark, or inverse.";
@return white;
}
}
@function reverse-color-mode($mode) {
@if $mode == dark {
@return light;
} @else {
@return dark;
}
}
@function check-opacity($color) {
@if (opacity($color) == 0) {
$color: opacify($color, 1);
}
@if $color == transparent {
$color: opacify($color, 1);
}
@return $color;
}
@function color-by-background($bg-color, $contrast: $default-text-contrast) {
$bg-color: check-opacity($bg-color);
$tmpmode: get-color-mode($bg-color);
@return color-offset($bg-color, $contrast, $tmpmode, $inverse: true);
}
@function get-inset-offset($mode){
@if $mode == light {
@return 1px;
} @else {
@return -1px;
}
}
@function safe-saturate($color, $amount) {
@if saturation($color) > 0 {
@return saturate($color, $amount);
} @else {
@return $color;
}
}
@mixin color-by-background($bg-color, $contrast: $default-text-contrast, $default-color: false, $inset-text: false) {
@if $default-color {
color: color-by-background(hsla(hue($default-color), saturation($default-color), lightness($bg-color), opacity($bg-color)), $contrast);
} @else {
color: color-by-background($bg-color, $contrast);
}
@if $inset-text {
@include inset-by-background($bg-color);
}
}
@mixin inset-by-background($bg-color, $contrast: 10%, $box: false){
$bg-color: check-opacity($bg-color);
$offset: get-inset-offset(get-color-mode($bg-color));
@if ($box == true) {
@include box-shadow(color-offset($bg-color, $contrast, $mode: get-color-mode($bg-color)) 0 $offset 0);
}
@include text-shadow(color-offset($bg-color, $contrast, $mode: get-color-mode($bg-color)) 0 $offset 0);
}
@function hsv-to-rgb($color) {
$r: red($color) / 255;
$g: green($color) / 255;
$b: blue($color) / 255;
$a: opacity($color);
}
@function brighten($color, $amount) {
$current_brightness: brightness($color);
}