/* ⬓ SELECT CONTRAST RATIO */

// Learn more about contrast
// @link https://webaim.org/articles/contrast/

// ✏️*Minimum* acceptable for *all* text
$contrastAAText: 4.5;

// 🧩Acceptable for UI components and graphics such as icons
// Also for text > 18pt, or > 14pt and bold (general rule, typeface dependent)
$contrastAAUI: 3.1;

// ⚪️⚫️Swap value to update computed contrast
$contrastThreshold: $contrastAAText;

/* 🖌MODIFY/ADD/SELECT PALETTE TO USE */

$default: (
	"purple": change-color(#4c34a2, $lightness: lightness(#ec513f)),
	"red": #ec513f,
	"green": scale-color(#41b880, $saturation: 60%, $lightness: -40%),
	"orange": scale-color(#d98800, $lightness: 15%, $saturation: -20%),
	"gray": scale-color(#f3f4f6, $blue: 20%)
);

$defaultBalancedLuminance: (
	"purple": scale-color(map-get($default, 'purple'), $lightness: 29%, $saturation: 25%),
	"red": scale-color(map-get($default, 'red'), $lightness: 13%),
	"green": scale-color(map-get($default, 'green'), $lightness: 10%, $saturation: 5%),
	"orange": scale-color(map-get($default, 'orange'), $lightness: -17%, $saturation: 35%),
	"gray": scale-color(map-get($default, 'gray'), $lightness: -35%)
);

$equalSaturation: (
	"purple": #6721a1,
	"blue": #2321a3,
	"green": #22a858,
	"red": #db6050,
	"orange": #db8952
);

// Sample from Stripe's new (Oct. '19) accessible palette
// @link https://stripe.com/blog/accessible-color-systems
$stripe: (
	"blue": #668ef1,
	"green": #1ca672,
	"yellow": #d97919,
	"red": #ed5f74,
	"purple": #c96dd0
);

$stripeBlue: (
	50: #f6fcff,
	100: #dbedff,
	200: #adcffe,
	300: #86acf6,
	400: #748ced
);

// Sample from MineralUI v4
// @link https://uxplanet.org/designing-systematic-colors-b5d2605b15c
$mineralUI: (
	"bronze-60": #ad5f00,
	"green-60": #258537,
	"indigo-60": #6767e6,
	"purple-60": #9656d6,
	"magenta-60": #d6246f
);

/* 🦄 Your magical mystical palette here */
$myPalette: ("key": #bada55);

/* 🎨 SWAP THE PALETTE VARIABLE */
$palette: $default;

/* Uniformly scale palette color attributes */
// Values in percents, can be negative
$palette-scale-lightness: 0%;
$palette-scale-saturation: 0%;

/* 
✨Luminance and contrast functions borrowed from Material Web Components, with the extensive precomputed linear color channel values linked in via CodePen's external stylesheet functionality.
*
Luminance is calculated using the WCAG formula and then rounded as a percentage for graphing purposes.
*/

// ☀️Calculate the luminance for a color
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function mdc-theme-luminance($color) {
	$red: nth($linear-channel-values, red($color) + 1);
	$green: nth($linear-channel-values, green($color) + 1);
	$blue: nth($linear-channel-values, blue($color) + 1);

	@return .2126 * $red + .7152 * $green + .0722 * $blue;
}

// ⬔ Calculate the contrast ratio between two colors
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function mdc-theme-contrast($back, $front) {
	$backLum: mdc-theme-luminance($back) + 0.05;
	$foreLum: mdc-theme-luminance($front) + 0.05;

	@return max($backLum, $foreLum) / min($backLum, $foreLum);
}

// 🧪Return appropriate text color given contrast
// Modified from MDC to directly return contrasting color value
@function text-contrast($color) {
	$minimumContrast: $contrastThreshold;

	$lightContrast: mdc-theme-contrast($color, white);
	$darkContrast: mdc-theme-contrast($color, rgba(black, 0.87));

	@if ($lightContrast < $minimumContrast) and ($darkContrast > $lightContrast) {
		@return rgba(black, 0.87);
	} @else {
		@return #fff;
	}
}

// Scale each value in the provided palette
@function palette($palette: $palette) {
	@each $name, $color in $palette {
		$scaled-value: scale-color(
			$color,
			$lightness: $palette-scale-lightness,
			$saturation: $palette-scale-saturation
		);
		$scaled-pair: ($name: $scaled-value);
		$palette: map-merge($palette, $scaled-pair);
	}

	@return $palette;
}
$palette: palette();

/* ⚙️LAYOUT SETTINGS VARIABLES */

$numColors: length($palette);
$markerSize: 80% / $numColors / 3;
$gridCellSize: 10%;

body {
	height: 100vh;
	width: 100vw;
	display: grid;
	align-content: center;
	justify-content: center;

	@media (min-width: 450px) {
		grid-template-columns: min-content minmax(0, min-content);
	}
}

.settings {
	fieldset {
		border: 0;
		padding: 0;
		margin: 0;
	}

	legend {
		margin: 1rem;
		font-weight: bold;
		font-size: 1.2rem;
		white-space: nowrap;
		
		@media (min-width: 450px) {
			padding-top: 10vh;	
		}
	}

	.settings_inputs {
		display: flex;
		flex-wrap: wrap;

		label {
			margin: 0.5rem 1rem;
			display: flex;
		}

		span {
			margin-left: 0.5rem;
		}
	}

	p {
		font-size: 0.875rem;
		font-style: italic;
		text-align: center;
		color: rgba(0, 0, 0, 0.54);
		margin: 1rem;
	}
}

main {
	// 📈Create grid background
	background: repeating-linear-gradient(
			to right,
			#f2f2f2,
			#f2f2f2 2px,
			transparent 2px,
			transparent #{$gridCellSize}
		),
		repeating-linear-gradient(
			to bottom,
			#f2f2f2,
			#f2f2f2 2px,
			transparent 2px,
			transparent #{$gridCellSize}
		);
	border-bottom: 2px solid #f2f2f2;
	border-right: 2px solid #f2f2f2;

	position: relative;
	width: 100vmin;
	max-width: 100%;
	margin-top: 10vh;

	&:after {
		content: "";
		display: block;
		width: 100%;
		padding-top: 80%;
	}
}

#graph {
	display: flex;
	justify-content: space-around;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	// 🌈Create palette gradient
	$g: null;
	$colorWidth: 100/$numColors;
	@each $name, $color in $palette {
		$i: index(($palette),  ($name $color));
		$colorStart: if($i > 1,  ($i - 1)*$colorWidth, 0%);
		$colorStop: $colorStart + $colorWidth;
		
		$colorValue: if(
			$i < $numColors,
			$color unquote("#{$colorStart}%,") $color unquote("#{$colorStop}%,"),
			$color unquote("#{$colorStart}%,") $color
		);
		@if ($i == 1) {
			$colorValue: unquote("#{$color},") $color unquote("#{$colorStop},");
		}
		
		$g: append($g, $colorValue);
	}

	&:before {
		content: "";
		position: absolute;
		top: -8vh;
		left: 0;
		right: 0;
		height: 24px;
		border-radius: 2px;
		background: linear-gradient(90deg, $g) 0 0 / 100% 24px;
		border: 1px solid white;
		box-shadow: 0 0 0 3px rgba(black, 0.17);
	}

	// 📍Define structure of graph plot points
	.graph__point {
		width: $markerSize;
		padding-top: $markerSize;
		border-radius: 50%;
		position: relative;
		align-self: flex-start;

		&:after {
			content: "";
			position: absolute;
			top: 110%;
			left: 50%;
			transform: translateX(-50%);
		}

		&:before {
			content: "";
			position: absolute;
			border-radius: 50%;
			height: 40%;
			width: 40%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}

// 🎩Magical SASS is magical
@mixin create_graph_points($type: "luminance") {
	@each $name, $color in $palette {
		$i: index(($palette),  ($name $color));
		$typeValue: round(percentage(mdc-theme-luminance($color)));

		@if ($type == "saturation") {
			$typeValue: round(saturation($color));
		}

		@if ($type == "lightness") {
			$typeValue: round(lightness($color));
		}

		.graph__point:nth-child(#{$numColors}n + #{$i}) {
			background-color: $color;

			@if ($typeValue > 0 and $typeValue != 100) {
				top: calc(100% - #{$typeValue});
				transform: translateY(-50%);
			}

			@if ($typeValue == 0) {
				top: 100%;
				transform: translateY(-50%);
			}

			@if ($typeValue == 100) {
				transform: translateY(-50%);
			}

			// Graph plot point label
			&:after {
				$lightness: if(lightness($color) > 50%, -60%, -40%);
				content: "#{$typeValue}";
				color: scale-color($color, $lightness: $lightness);
			}

			// Contrast indicator circle
			&:before {
				background-color: text-contrast($color);
			}
		}
	}
}

// 💅Prepare rules for each graph type #phew
#graph {
	&.luminance {
		@include create_graph_points();
	}

	&.saturation {
		@include create_graph_points("saturation");
	}

	&.lightness {
		@include create_graph_points("lightness");
	}
}