//------------------------------------------------------------------------------------------------
// COLORS
//------------------------------------------------------------------------------------------------

/*
Defines project colors and theme colors.
*/


// VARIABLES
//------------------------------------------------------------------------------------------------

$colors: (
	// Greyscale colours named after opacity
	// https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3
	'white': #ffffff, // White
	'grey-04': #f5f5f5, // Very Light
	'grey-12': #e0e0e0, // Lighter
	'grey-23': #c4c4c4, // Light
	'grey-40': #999999, // Dark
	'grey-56': #707070, // Darker
	'grey-75': #404040, // Very Dark
	'black': #000000, // Black

	// Evo brand colours
	'evo-dark-blue': #231e46,
	'evo-darker-blue': #150b30,
	'evo-green': #5ab6b2,
	'evo-dark-green': #007a82,
	'evo-red': #ba4252,
	'evo-yellow': #ffe600,
	
	// Supplementary colours required by UI
	'blue': #5aa1ce,
	'orange': #eca737,
	'very-green': #84bc44,
	'very-red': #dc3545
) !default;

$theme-shades: ();

// Defaults:  dark 10%, light 40%
$theme-shade-percentages: (
	'primary' : (
		'light' : 35%
	),
	'accent' : (
		'dark': 10%
	),
	'positive' : (
		'light': 35%
	),
	'negative' : (
		'light': 40%
	),
	'caution' : (
		'light': 35%
	),
	'info' : (
		'light': 35%
	),
	'disabled' : (
		'dark': 5%,
		'light': 13%
	)
) !default;

/*
Flag which theme colours are light enough to warrant 'very-dark' text.
Otherwise 'very-light' will be used. These are used by certain classes.
*/
$theme-dark-text-colors: 'white', 'very-light', 'lighter', 'light', 'accent' !default;


// COLOUR HELPER FUNCTIONS
//------------------------------------------------------------------------------------------------

@mixin render-theme($currentTheme: null) {
	@if($currentTheme == null) {
		$theme: (
			// Neutrals
			'white': map-get($colors, 'white'),
			'very-light': map-get($colors, 'grey-04'),
			'lighter': map-get($colors, 'grey-12'),
			'light': map-get($colors, 'grey-23'),
			'dark': map-get($colors, 'grey-40'),
			'darker': map-get($colors, 'grey-56'),
			'very-dark': map-get($colors, 'grey-75'),
			'black': map-get($colors, 'black'),

			// Brand Theme Colours
			'primary': map-get($colors, 'evo-green'),
			'accent': map-get($colors, 'evo-yellow'),
			'pop': map-get($colors, 'evo-red'),

			// State Theme Colours
			'positive': map-get($colors, 'very-green'),
			'info': map-get($colors, 'blue'),
			'caution': map-get($colors, 'orange'),
			'negative': map-get($colors, 'very-red'),
			'disabled': map-get($colors, 'grey-23')
		) !global;
	}

	// Render shades
	@each $key, $value in $theme {
		$shades: ();
		@if map-has-key($theme-shade-percentages, $key) {
			$shades-item: map-get($theme-shade-percentages, $key);
			$dark-value: null;
			$light-value: null;
			@if map-has-key($shades-item, 'dark') {
				$dark-value: map-get($shades-item, 'dark');
			}
			@else {
				$dark-value: 10%;
			}
			@if map-has-key($shades-item, 'light') {
				$light-value: map-get($shades-item, 'light');
			}
			@else {
				$light-value: 40%;
			}
			$shades: (
				'dark':  $dark-value,
				'light':  $light-value
			);
		}
		@else {
			$shades: (
				'dark': 10%,
				'light': 20%
			);
		}
		$theme-shades: map-merge($theme-shades, (
			'#{$key}-dark' : darken($value, map-get($shades, 'dark')),
			'#{$key}-light' : lighten($value, map-get($shades, 'light'))
		)) !global;
	}
}
@include render-theme();

// Import colors so we can use in other settings
@import '../tools/colors';