//------------------------------------------------------------------------------------------------
// COLOR FUNCTIONS
//------------------------------------------------------------------------------------------------

/*
A collection of functions and mixins for handling color values
*/


// GET COLOR
//------------------------------------------------------------------------------------------------

/*
Function to return a specific color from either the `colors` or `theme` maps

.myElement {
	border-color: color('primary');
}
*/

@function color($value, $returnBool: false) {
	// If existing color, do nothing and just return it
	@if(type-of($value) == 'color') {
		@return $value;
	}
	$color: null;
	@if map-has-key($theme-shades, $value) {
		$color: map-get($theme-shades, $value);
	}
	@else if map-has-key($theme, $value) {
		$color: map-get($theme, $value);
	}
	@else if map-has-key($colors, $value) {
		$color: map-get($colors, $value);
	}
	@else {
		@if($returnBool) {
			@if($color == null) {
				@return false;
			}
			@else {
				@return true;
			}
		}
		@else {
			@error "'#{$value}' doesn't exist in either '$theme', '$colors', or '$theme-shades'";
		}
	}
	@return $color;
}


// SET COLORS
//------------------------------------------------------------------------------------------------

/*
There are maps which form the framework colours:-

- $colors - General purpose colours, by default Evolution Funding branding. Eg: green, grey etc.
- $theme - Where colours from $color are assigned to specific UI functions. Eg: primary, accent etc.
- $theme-shades-percentages - A 10% darker and 10% lighter variant are programatically generated for each $theme color.
  You can edit these percentages on a colour by colour basis to something better suited.

You can edit or add to these using the below bespoke mixins:-

@include set-color((
	'green' : #00ff00
));

@include set-theme((
	'primary' : #ff0000,
	'subtle' : color('green')
));

@include set-theme-shades((
	'subtle': (
		'dark': 5%,
		'light': 23%
	)
));

@include set-theme-dark-text-color(('primary', 'subtle'));

*/

@mixin set-color($map) {
	$colors: amend-map($colors, $map) !global;
	// Rerender theme map, incase any edited colours are referenced there
	@include render-theme();
}

@mixin set-theme($map) {
	$theme: amend-map($theme, $map) !global;
	@include render-theme($theme);
}

@mixin set-theme-shades($map) {
	$theme-shade-percentages: amend-map($theme-shade-percentages, $map) !global;
	// Rerender theme map, incase any edited colours are referenced there
	@include render-theme($theme);
}

@mixin set-theme-dark-text-color($colors) {
	@each $color in $colors {
		$theme-dark-text-colors: append($theme-dark-text-colors, $color) !global;
	}
}


// GET TEXT COLOR
//------------------------------------------------------------------------------------------------

/*
Returns either 'very-light' or 'very-dark' based on the $theme color passed to it.
This is based on info set in $theme-text-color.
*/

@function get-theme-text-color($color, $returnTrueIfDark: false) {
	@if(not not index($theme-dark-text-colors, $color)) {
		@if $returnTrueIfDark {
			@return true;
		}
		@return color('black');
	}
	@else {
		@if $returnTrueIfDark {
			@return false;
		}
		@return color('white');
	}
}