More theming work

src/frontend/color_scheme.scss

@@ -2,18 +2,17 @@
 
 // https://coolors.co/25a35a-3c91e6-f50000-f2f4ff-e9ce2c
 $text-color-light: rgba(7, 59, 58, 1);
-$background-color-light: white;
+$background-color-light: hsla(272, 32%, 97%, 1);
-
+$green-light: hsla(145, 63%, 50%, 1);
-$green: hsla(145, 63%, 39%, 1);
+$red-light: hsla(0, 100%, 48%, 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);
+$green-dark: color.scale($green-light, $lightness: -20%);
+$red-dark: color.scale($red-light, $lightness: -20%);
 
 :root {
-	@for $i from 0 to 3 {
+	@for $i from 0 to 4 {
 		--background-color-#{$i+1}: #{color.scale(
 				$background-color-light,
 				$lightness: -$i * 5%
@@ -23,15 +22,12 @@ $text-color-dark: hsla(60, 15%, 95%, 1);
 				$lightness: $i * 10%
 			)};
 
-		--green-#{$i+1}: #{color.scale($green, $lightness: -$i * 10%)};
+		--green-#{$i+1}: #{color.scale($green-light, $lightness: -$i * 10%)};
-		--red-#{$i+1}: #{color.scale($red, $lightness: -$i * 10%)};
+		--red-#{$i+1}: #{color.scale($red-light, $lightness: -$i * 10%)};
 	}
 
-	--blue: #{$blue};
-	--yellow: #{$yellow};
-
 	@media (prefers-color-scheme: dark) {
-		@for $i from 0 to 3 {
+		@for $i from 0 to 4 {
 			--background-color-#{$i+1}: #{color.scale(
 					$background-color-dark,
 					$lightness: $i * 10%
@@ -40,10 +36,8 @@ $text-color-dark: hsla(60, 15%, 95%, 1);
 					$text-color-dark,
 					$lightness: -$i * 10%
 				)};
+			--green-#{$i+1}: #{color.scale($green-dark, $lightness: -$i * 10%)};
+			--red-#{$i+1}: #{color.scale($red-dark, $lightness: -$i * 10%)};
 		}
 	}
 }
-
-* {
-	color: var(--text-color-1);
-}

src/frontend/content_script/Translated.svelte

@@ -2,26 +2,20 @@
 	import { Communicator } from "../../communication";
 
 	export let trans: Translation;
-	let card: Flashcard;
+	let card: Flashcard | undefined;
-	$: card = undefined;
 
 	const addFlashcard = async () => {
 		card = await Communicator.addFlashcard(trans);
 	};
 
 	const removeFlashcard = async () => {
-		await Communicator.removeFlashcard(card);
+		if (card) await Communicator.removeFlashcard(card);
 		card = undefined;
 	};
 </script>
 
 <style lang="scss">
-	:global(:root) {
+	@use "../color_scheme";
-		--background-color: $blackish;
-		--green: $green;
-		--blue: $blue;
-		--yellow: $yellow;
-	}
 
 	.translatedContainer {
 		display: flex;
@@ -33,7 +27,6 @@
 	}
 
 	button {
-		color: white;
 		font-size: 0.8em;
 		border: 0;
 		min-width: 9ch;
@@ -42,11 +35,17 @@
 	}
 
 	.remove {
-		background-color: red;
+		background-color: var(--red-1);
+		&:hover {
+			background-color: var(--red-2);
+		}
 	}
 
 	.add {
-		background-color: #25a35a;
+		background-color: var(--green-1);
+		&:hover {
+			background-color: var(--green-2);
+		}
 	}
 </style>
 

src/frontend/content_script/content_script.ts

@@ -1,7 +1,6 @@
 import { Communicator } from "../../communication";
-import tippy from "tippy.js";
+import tippy, { roundArrow } from "tippy.js";
 import App from "./Translate.svelte";
-import "tippy.js/dist/tippy.css";
 import "./tippy.scss";
 
 (() => {
@@ -36,9 +35,10 @@ import "./tippy.scss";
 		});
 		return tippy(document.body, {
 			content: svelteElement,
-			allowHTML: true,
 			trigger: "manual",
 			interactive: true,
+			arrow: roundArrow,
+			theme: "webext",
 			getReferenceClientRect: () =>
 				document.getSelection()!.getRangeAt(0).getBoundingClientRect(),
 			onCreate: (instance) => {

src/frontend/content_script/tippy.scss

@@ -1,6 +1,18 @@
-.tippy-content {
+@use "../color_scheme";
-	user-select: none;
+@import "tippy.js/dist/tippy.css";
-	* {
+@import "tippy.js/dist/svg-arrow.css";
+
+.tippy-box[data-theme~="webext"] {
+	background-color: var(--background-color-1);
+	tippy-svg-arrow {
+		fill: var(--background-color-1);
+	}
+
+	.tippy-content {
 		user-select: none;
+		* {
+			user-select: none;
+			color: var(--text-color-1);
+		}
 	}
 }

src/frontend/popup/LanguageSelection.svelte

@@ -12,7 +12,7 @@
 	@use "../color_scheme.scss";
 	.select-styling {
 		--background: var(--background-color-3);
-		--itemIsActiveBG: var(--background-color-1);
+		--itemIsActiveBG: var(--background-color-4);
 		--itemHoverBG: var(--background-color-3);
 		--listBackground: var(--background-color-2);
 		--inputColor: var(--text-color-1);

src/frontend/popup/Popup.svelte

@@ -31,7 +31,6 @@
 	input {
 		display: none;
 	}
-
 	label {
 		display: flex;
 		align-items: center;
@@ -42,6 +41,9 @@
 		height: 8vh;
 		cursor: pointer;
 		border-radius: 10vw;
+
+		font-weight: 500;
+
 		background-color: var(--green-1);
 		&:hover {
 			background-color: var(--green-2);