The great flattification

svelte/src/util/Chart.svelte

@@ -38,7 +38,7 @@ export const update = () => {
 	return chart_object.update()
 }
 
-Chart.defaults.color = "#"+window.style.textColor;
+Chart.defaults.color = "#"+window.style.bodyTextColor;
 Chart.defaults.font.size = 15;
 Chart.defaults.font.family = "system-ui, sans-serif";
 Chart.defaults.maintainAspectRatio = false;
@@ -91,7 +91,7 @@ onMount(() => {
 						grid: {
 							display: true,
 							drawBorder: false,
-							color: "#"+window.style.layer3Color,
+							color: "#"+window.style.separatorColor,
 						},
 					},
 					x: {

svelte/src/util/Euro.svelte

@@ -5,7 +5,7 @@ export let precision = 2
 
 <span>
 	€
-	<span class:red={amount < 0} class:green={amount > 0} class:zero={amount === 0}>
+	<span class:red={amount < 0} class:green={amount > 0}>
 		{(amount / 1000000).toFixed(precision)}
 	</span>
 </span>
@@ -17,7 +17,4 @@ export let precision = 2
 .green {
 	color: var(--highlight_color);
 }
-.zero {
-	color: var(--layer_4_color);
-}
 </style>

svelte/src/util/Expandable.svelte

@@ -41,7 +41,7 @@ export let highlight = false
 <style>
 .expandable {
 	text-decoration: none;
-	background-color: var(--layer_3_color);
+	background-color: var(--popout_color);
 	margin: 0.6em 0;
 	border-radius: 6px;
 	overflow: hidden;
@@ -49,11 +49,11 @@ export let highlight = false
 .header {
 	display: flex;
 	flex-direction: row;
-	color: var(--text_color);
+	color: var(--body_text_color);
 }
 .click_expand:hover, .highlight:hover {
-	background-color: var(--input_color_dark);
-	color: var(--input_text_color);
+	background: var(--input_background);
+	color: var(--input_text);
 }
 .click_expand {
 	cursor: pointer;
@@ -72,8 +72,7 @@ export let highlight = false
 	padding: 0.4em;
 	flex-direction: column;
 	text-decoration: none;
-	border-top: 1px solid var(--layer_3_color_border);
-	color: var(--text_color);
+	border-top: 1px solid var(--separator);
 }
 .hidden {
 	display: none;

svelte/src/util/Modal.svelte

@@ -79,7 +79,7 @@ const keydown = e => {
 	z-index: inherit;
 	display: flex;
 	flex-direction: column;
-	background-color: var(--layer_2_color);
+	background: var(--body_color);
 	max-height: 100%;
 	max-width: 100%;
 	margin: 0 auto;
@@ -97,8 +97,8 @@ const keydown = e => {
 	display: flex;
 	flex-direction: row;
 	padding: 1px;
-	background-color: var(--layer_1_color);
-	color: var(--layer_1_text_color);
+	background: var(--background_color);
+	color: var(--background_text_color);
 }
 .title {
 	flex-grow: 1;

svelte/src/util/ProgressBar.svelte

@@ -24,13 +24,13 @@ $: {
 <style>
 .progress_bar_outer {
 	display: block;
-	background-color: var(--layer_1_color);
+	background: var(--background_color);
 	width: 100%;
 	height: 3px;
 	margin: 6px 0 12px 0;
 }
 .progress_bar_inner {
-	background-color: var(--highlight_color);
+	background: var(--highlight_background);
 	height: 100%;
 	width: 0;
 	transition: width 1s;

svelte/src/util/ThemePicker.svelte

@@ -38,9 +38,6 @@ let set = s => {
 	<button class:button_highlight={theme==="snowstorm"} on:click={() => {set("snowstorm")}}>
 		Snowstorm
 	</button>
-	<button class:button_highlight={theme==="deepsea"} on:click={() => {set("deepsea")}}>
-		Deep sea
-	</button>
 	<button class:button_highlight={theme==="skeuos"} on:click={() => {set("skeuos")}}>
 		Skeuos
 	</button>