// Color Functions // -------------------------------------------------- @function color-brightness($color-value) { @return (red($color-value) * .299 + green($color-value) * .587 + blue($color-value) * .114) / 255 * 100%; } @function color-inverse($color-value, $dark: #000, $light: #fff) { $brightness: color-brightness($color-value); $red: red($color-value); $green: green($color-value); @if ($brightness > 79) { @return $dark; } @if ($green > 240) { @return $dark; } @if ($red > 220 and $green > 180) { @return $dark; } @return $light; } @function toolbar-button-inverse($color-value) { @return color-inverse($color-value, $dark: $toolbar-md-button-color, $light: #fff); } @function color-shade($color-value, $amount:8%) { $lightness: lightness($color-value); $shade: #fff; @if ($lightness > 50) { $shade: #000; } @return mix($shade, $color-value, $amount); } // Copy Colors Map // -------------------------------------------------- @function copy-colors($colors-map) { @return map-merge($colors-map, ()); } // String Replace Function // -------------------------------------------------- @function str-replace($string, $search, $replace: "") { $index: str-index($string, $search); @if $index { @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); } @return $string; } // URL Encode Function // -------------------------------------------------- @function url-encode($val) { @return str-replace($val, " ", "%20"); } // Fetch nested keys // @param {Map} $map - Map // @param {Arglist} $keys - Keys to fetch // @return {*} // -------------------------------------------------- @function map-fetch($map, $keys...) { @each $key in $keys { $map: map-get($map, $key); } @return $map; } // Fetch map color value // @param {Map} $map - Map // @param {String} $color-name - Color name to get // @param {String} $color-key - Color key (optional), default base // @return {Color} // -------------------------------------------------- @function color($map, $color-name, $color-key:null) { // Get the value from $color-name in the map // this can be of type color or a map $color-value: map-get($map, $color-name); // If we were given a map we need to grab the value // of the key that is passed or the base key @if(type-of($color-value) == map) { @if($color-key) { $color-value: map-fetch($map, $color-name, $color-key); } @else { $color-value: map-fetch($map, $color-name, base); } } // If it isn't a map then return the value @return $color-value; } // Get the color map key based on the value // if it doesn't exist then return the value // -------------------------------------------------- @function color-key($colors, $value) { @each $color-name, $color-value in $colors { $base-value: color($colors, $color-name); @if ($base-value == $value) { @return map-get($colors, $color-name); } } @return $value; } // Fetch map color contrast // @param {Map} $colors - colors map // @param {String} $value - color value or color name // // Example values // -------------------------------------------------- // primary | #327eff | #444 // map key | map value | hex color not in map // -------------------------------------------------- // // @param {Boolean} $toolbar-button - MD toolbar button // @return {Color} // -------------------------------------------------- @function color-contrast($colors, $value, $toolbar-button: null) { $color-value: null; // If the value is a color (i.e. #fff) // we need to call color-key to see if // it exists in the color map or not @if(type-of($value) == color) { $color-value: color-key($colors, $value); // If the value is a string (i.e. primary) // we want to get the value from the map // where it is the key } @else { $color-value: map-get($colors, $value); } // If the value is a map @if(type-of($color-value) == map) { $color-value: map-get($color-value, contrast); } @elseif ($toolbar-button) { $color-value: toolbar-button-inverse($color-value); } @else { $color-value: color-inverse($color-value); } @return $color-value; } // Create a list using the colors map // @param {Map} $colors - colors map // @return {List} $color-name, $color-base, $color-contrast // ---------------------------------------------------------- @function get-colors($colors) { $colors-list: (); @each $color-name, $color-value in $colors { $color-base: null; $color-contrast: null; @if(type-of($color-value) == map) { $color-base: map-get($color-value, base); $color-contrast: map-get($color-value, contrast); } @else { $color-base: $color-value; $color-contrast: color-inverse($color-value); } $colors-list: append($colors-list, ($color-name, $color-base, $color-contrast), comma); } @return $colors-list; }