/** * @class Global_CSS */ /** * @method brightness * @ignore * Returns the brightness (out of 100) of a specified color. * @param {color} $color The color you want the brightness value of * @return {number} */@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;} /** * @method color-difference * @param {color} $sc1 * @param {color} $sc1 * @private * @ignore */@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)));} /** * @method color-luminance * @param {color} $value * @private * @ignore */@function color-luminance($value) { @if $value <= 0.03928 { @return $value / 12.92; } @else { @return ($value + 0.055)/1.055 * ($value + 0.055)/1.055; }} /** * @method luminosity * @ignore * Returns the luminosity for a specified color * @param {color} color The color to check * @return {number} */@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;} /** * @method contrast-ratio * @ignore * Returns the contrast ratio between two colors * @param {color} $color1 The color to check * @param {color} $color2 The color to check against * @return {number} */@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; }} /** * Colors the text of an element based on lightness of its background. * * .my-element { * @include color-by-background(#fff); // Colors text black. * } * * .my-element { * @include color-by-background(#fff, 40%); // Colors text gray. * } * * @param {color} $bg-color Background color of element. * @param {percent} $contrast Contrast of text color to its background. * */@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);} // @debug hsv(rgba(#3E87E3, .5)); @function brighten($color, $amount) { $current_brightness: brightness($color);}