From 43cd48acb5fddb5f0ccf7c632cd4d992481a59b1 Mon Sep 17 00:00:00 2001
From: a <a@a>
Date: Fri, 14 Aug 2020 10:55:22 +0200
Subject: [PATCH] Start working on a color scheme

---
 src/frontend/color_scheme.scss                | 49 +++++++++++++++++++
 src/frontend/content_script/Translated.svelte |  7 +++
 src/frontend/popup/LanguageSelection.svelte   | 31 +++++++++---
 src/frontend/popup/Popup.svelte               | 46 +++++++++++------
 4 files changed, 110 insertions(+), 23 deletions(-)
 create mode 100644 src/frontend/color_scheme.scss

diff --git a/src/frontend/color_scheme.scss b/src/frontend/color_scheme.scss
new file mode 100644
index 0000000..404b6d5
--- /dev/null
+++ b/src/frontend/color_scheme.scss
@@ -0,0 +1,49 @@
+@use "sass:color";
+
+// https://coolors.co/25a35a-3c91e6-f50000-f2f4ff-e9ce2c
+$text-color-light: rgba(7, 59, 58, 1);
+$background-color-light: white;
+
+$green: hsla(145, 63%, 39%, 1);
+$blue: hsla(210, 77%, 57%, 1);
+$red: hsla(0, 100%, 48%, 1);
+$yellow: hsla(51, 81%, 54%, 1);
+
+$background-color-dark: hsla(222, 19%, 27%, 1);
+$text-color-dark: hsla(60, 15%, 95%, 1);
+
+:root {
+	@for $i from 0 to 3 {
+		--background-color-#{$i+1}: #{color.scale(
+				$background-color-light,
+				$lightness: -$i * 5%
+			)};
+		--text-color-#{$i+1}: #{color.scale(
+				$text-color-light,
+				$lightness: $i * 10%
+			)};
+
+		--green-#{$i+1}: #{color.scale($green, $lightness: -$i * 10%)};
+		--red-#{$i+1}: #{color.scale($red, $lightness: -$i * 10%)};
+	}
+
+	--blue: #{$blue};
+	--yellow: #{$yellow};
+
+	@media (prefers-color-scheme: dark) {
+		@for $i from 0 to 3 {
+			--background-color-#{$i+1}: #{color.scale(
+					$background-color-dark,
+					$lightness: $i * 10%
+				)};
+			--text-color-#{$i+1}: #{color.scale(
+					$text-color-dark,
+					$lightness: -$i * 10%
+				)};
+		}
+	}
+}
+
+* {
+	color: var(--text-color-1);
+}
diff --git a/src/frontend/content_script/Translated.svelte b/src/frontend/content_script/Translated.svelte
index 4178498..3c3b13a 100644
--- a/src/frontend/content_script/Translated.svelte
+++ b/src/frontend/content_script/Translated.svelte
@@ -16,6 +16,13 @@
 </script>
 
 <style lang="scss">
+	:global(:root) {
+		--background-color: $blackish;
+		--green: $green;
+		--blue: $blue;
+		--yellow: $yellow;
+	}
+
 	.translatedContainer {
 		display: flex;
 		align-items: center;
diff --git a/src/frontend/popup/LanguageSelection.svelte b/src/frontend/popup/LanguageSelection.svelte
index 3458559..dc3f152 100644
--- a/src/frontend/popup/LanguageSelection.svelte
+++ b/src/frontend/popup/LanguageSelection.svelte
@@ -8,11 +8,26 @@
 		label.toLowerCase().startsWith(filterText.toLowerCase());
 </script>
 
-<Select
-	items={langs}
-	getOptionLabel={getLabel}
-	getSelectionLabel={getLabel}
-	optionIdentifier="code"
-	{itemFilter}
-	isClearable={false}
-	bind:selectedValue />
+<style lang="scss">
+	@use "../color_scheme.scss";
+	.select-styling {
+		--background: var(--background-color-3);
+		--itemIsActiveBG: var(--background-color-1);
+		--itemHoverBG: var(--background-color-3);
+		--listBackground: var(--background-color-2);
+		--inputColor: var(--text-color-1);
+		--itemIsActiveColor: var(--text-color-3);
+		--border: none;
+	}
+</style>
+
+<div class="select-styling">
+	<Select
+		items={langs}
+		getOptionLabel={getLabel}
+		getSelectionLabel={getLabel}
+		optionIdentifier="code"
+		{itemFilter}
+		isClearable={false}
+		bind:selectedValue />
+</div>
diff --git a/src/frontend/popup/Popup.svelte b/src/frontend/popup/Popup.svelte
index bae037d..6535883 100644
--- a/src/frontend/popup/Popup.svelte
+++ b/src/frontend/popup/Popup.svelte
@@ -5,7 +5,6 @@
 	Communicator.getEnabled().then((v) => (enabled = v));
 
 	let enabled: boolean;
-	$: console.log(enabled);
 	$: if (enabled !== undefined) Communicator.setEnabled(enabled);
 
 	const langPromise = Communicator.getLanguages();
@@ -18,25 +17,42 @@
 </script>
 
 <style lang="scss">
+	@use "../color_scheme.scss";
+
 	#container {
-		width: 387px;
+		display: flex;
+		flex-direction: column;
 		height: 600px;
+		width: 387px;
+		background-color: var(--background-color-1);
+		padding: 3vh 3vh;
 	}
+
+	input {
+		display: none;
+	}
+
 	label {
-		display: block;
-		width: 100%;
-		text-align: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		align-self: center;
+		width: 70%;
+		height: 8vh;
 		cursor: pointer;
-		border: 1px solid #d8dbdf;
-	}
-	label:hover {
-		border-color: #b2b8bf;
-	}
-	label {
-		background-color: red;
-	}
-	.enabled {
-		background-color: green;
+		border-radius: 10vw;
+		background-color: var(--green-1);
+		&:hover {
+			background-color: var(--green-2);
+		}
+
+		&.enabled {
+			background-color: var(--red-1);
+			&:hover {
+				background-color: var(--red-2);
+			}
+		}
 	}
 </style>