@import "functions";

/*
###### USAGE ####
Index 0: hue
Index 1: saturation
Index 2: lightning

$test-palette: (
		400: (224, 42%, 52%),
		500: (224, 47%, 38%),
		600: (224, 49%, 30%),
		contrast: (0, 100%, 100%)
);

Contrast can be a map if you want to specify a contrast color for each hue.

$test-palette: (
		400: (224, 42%, 52%),
		500: (224, 47%, 38%),
		600: (224, 49%, 30%),
		contrast: (
			400: (0, 0%, 0%),
			500: (0, 100%, 100%),
			600: (0, 100%, 100%)
		)
);
 */

$light-hue: 400;
$default-hue: 500;
$dark-hue: 600;

$black-hsl: (0, 0%, 0%);
$white-hsl: (0, 100%, 100%);

$palette-black: (
		400: $black-hsl,
		500: $black-hsl,
		600: $black-hsl,
		"contrast": $white-hsl
);

$palette-white: (
		400: $white-hsl,
		500: $white-hsl,
		600: $white-hsl,
		"contrast": $white-hsl
);

$palette-black-dirty: (
		400: (0, 22%, 9%),
		500: (0, 0%, 9%),
		600: (0, 0%, 4%),
		"contrast": $white-hsl
);

$palette-white-dirty: (
		400: (231, 54%, 97%),
		500: (228, 38%, 97%),
		600: (228, 38%, 82%),
		"contrast": $white-hsl
);

$palette-grey: (
		200: (233, 53%, 97%),
		300: (222, 22%, 91%),
		400: (213, 9%, 80%),
		500: (214, 10%, 70%),
		600: (216, 11%, 52%),
		700: (229, 9%, 34%),
		"contrast": (
				200: $black-hsl,
				300: $black-hsl,
				400: $white-hsl,
				500: $white-hsl,
				600: $white-hsl,
				700: $white-hsl
		)
);

$palette-cobalt: (
		400: (237, 94%, 66%),
		500: (232, 90%, 51%),
		600: (229, 100%, 40%),
		"contrast": $white-hsl
);

$palette-red: (
		400: (345, 86%, 66%),
		500: (340, 82%, 52%),
		600: (334, 100%, 40%),
		"contrast": $white-hsl
);

$palette-orange: (
		400: (42, 100%, 69%),
		500: (36, 100%, 57%),
		600: (35, 96%, 41%),
		"contrast": $white-hsl
);

$palette-royal-blue: (
		400: (224, 42%, 52%),
		500: (224, 47%, 38%),
		600: (224, 49%, 30%),
		"contrast": $white-hsl
);

$palette-tasty-pineapple: (
		400: (37, 100%, 75%),
		500: (37, 100%, 64%),
		600: (38, 60%, 44%),
		"contrast": $white-hsl
);

$palette-blood-orange: (
		400: (8, 82%, 68%),
		500: (3, 80%, 54%),
		600: (3, 71%, 38%),
		"contrast": $white-hsl
);

$palette-dark-asphalt: (
		100: (100, 4%, 95%), // +10
		200: (200, 4%, 85%), // +10
		300: (200, 4%, 75%), // +10
		400: (200, 4%, 65%), // +10
		500: (200, 4%, 55%), // +20
		600: (200, 4%, 35%), // +10
		700: (200, 4%, 25%), // +10
		800: (200, 4%, 15%), // +10
		900: (200, 4%, 5%),
		"contrast": (
				100: $black-hsl,
				200: $black-hsl,
				300: $black-hsl,
				400: $white-hsl,
				500: $white-hsl,
				600: $white-hsl,
				700: $white-hsl,
				800: $white-hsl,
				900: $white-hsl
		)
);

$palette-dark-asphalt-inverted: (
		100: get-entry($palette-dark-asphalt, 800),
		200: get-entry($palette-dark-asphalt, 700),
		300: get-entry($palette-dark-asphalt, 600),
		400: get-entry($palette-dark-asphalt, 500),
		500: get-entry($palette-dark-asphalt, 400),
		600: get-entry($palette-dark-asphalt, 300),
		700: get-entry($palette-dark-asphalt, 200),
		800: get-entry($palette-dark-asphalt, 100),
		"contrast": (
				100: get-mapped-entry($palette-dark-asphalt, "contrast", 900),
				200: get-mapped-entry($palette-dark-asphalt, "contrast", 800),
				300: get-mapped-entry($palette-dark-asphalt, "contrast", 700),
				400: get-mapped-entry($palette-dark-asphalt, "contrast", 600),
				500: get-mapped-entry($palette-dark-asphalt, "contrast", 500),
				600: get-mapped-entry($palette-dark-asphalt, "contrast", 400),
				700: get-mapped-entry($palette-dark-asphalt, "contrast", 300),
				800: get-mapped-entry($palette-dark-asphalt, "contrast", 200),
				900: get-mapped-entry($palette-dark-asphalt, "contrast", 100)
		)
);

$palette-map: (
		"primary": $palette-royal-blue,
		"error": $palette-blood-orange,
		"shade": $palette-dark-asphalt
);