fix(loading): light mode

4 files changed, 74 insertions, 98 deletions

diff --git a/src/lib/Loading/Ellipsis.svelte b/src/lib/Loading/Ellipsis.svelte
index 1dbe3b9f..dd7800d7 100644
--- a/src/lib/Loading/Ellipsis.svelte
+++ b/src/lib/Loading/Ellipsis.svelte
@@ -1,26 +1,29 @@
-<div class="ellipsis">
-	<div />
-	<div />
-	<div />
-	<div />
+<script lang="ts">
+	export let colour = 'var(--fg)';
+</script>
+
+<div class="ellipsis" style={`--loader-colour: ${colour};`}>
+	{#each Array.from({ length: 4 }) as _}
+		<div />
+	{/each}
 </div>
 
-<style>
+<style lang="scss">
 	.ellipsis {
 		display: inline-block;
 		position: relative;
 		width: 80px;
 		height: 80px;
-	}
 
-	.ellipsis div {
-		position: absolute;
-		top: 33px;
-		width: 13px;
-		height: 13px;
-		border-radius: 50%;
-		background: #fff;
-		animation-timing-function: cubic-bezier(0, 1, 1, 0);
+		div {
+			position: absolute;
+			top: 33px;
+			width: 13px;
+			height: 13px;
+			border-radius: 50%;
+			background: var(--loader-colour);
+			animation-timing-function: cubic-bezier(0, 1, 1, 0);
+		}
 	}
 
 	.ellipsis div:nth-child(1) {
@@ -47,6 +50,7 @@
 		0% {
 			transform: scale(0);
 		}
+
 		100% {
 			transform: scale(1);
 		}
@@ -56,6 +60,7 @@
 		0% {
 			transform: translate(0, 0);
 		}
+
 		100% {
 			transform: translate(24px, 0);
 		}
@@ -65,6 +70,7 @@
 		0% {
 			transform: scale(1);
 		}
+
 		100% {
 			transform: scale(0);
 		}
diff --git a/src/lib/Loading/Grid.svelte b/src/lib/Loading/Grid.svelte
index fb355e21..353600be 100644
--- a/src/lib/Loading/Grid.svelte
+++ b/src/lib/Loading/Grid.svelte
@@ -1,84 +1,47 @@
-<div class="grid">
-	<div />
-	<div />
-	<div />
-	<div />
-	<div />
-	<div />
-	<div />
-	<div />
-	<div />
+<script lang="ts">
+	export let colour = 'var(--fg)';
+</script>
+
+<div class="grid" style={`--loader-colour: ${colour};`}>
+	{#each Array.from({ length: 9 }) as _}
+		<div />
+	{/each}
 </div>
 
-<style>
+<style lang="scss">
 	.grid {
 		display: inline-block;
 		position: relative;
 		width: 64px;
 		height: 64px;
-	}
-
-	.grid div {
-		position: absolute;
-		width: 13px;
-		height: 13px;
-		border-radius: 50%;
-		background: #fff;
-		animation: grid 1.2s linear infinite;
-	}
-
-	.grid div:nth-child(1) {
-		top: 6px;
-		left: 6px;
-		animation-delay: 0s;
-	}
-
-	.grid div:nth-child(2) {
-		top: 6px;
-		left: 26px;
-		animation-delay: -0.4s;
-	}
-
-	.grid div:nth-child(3) {
-		top: 6px;
-		left: 45px;
-		animation-delay: -0.8s;
-	}
 
-	.grid div:nth-child(4) {
-		top: 26px;
-		left: 6px;
-		animation-delay: -0.4s;
-	}
-
-	.grid div:nth-child(5) {
-		top: 26px;
-		left: 26px;
-		animation-delay: -0.8s;
-	}
-
-	.grid div:nth-child(6) {
-		top: 26px;
-		left: 45px;
-		animation-delay: -1.2s;
+		div {
+			position: absolute;
+			width: 13px;
+			height: 13px;
+			border-radius: 50%;
+			background: var(--loader-colour);
+			animation: grid 1.2s linear infinite;
+		}
 	}
 
-	.grid div:nth-child(7) {
-		top: 45px;
-		left: 6px;
-		animation-delay: -0.8s;
+	@function column($i) {
+		@if $i % 3 == 0 {
+			@return 3;
+		} @else {
+			@return $i % 3;
+		}
 	}
 
-	.grid div:nth-child(8) {
-		top: 45px;
-		left: 26px;
-		animation-delay: -1.2s;
-	}
+	@for $i from 1 through 9 {
+		.grid div:nth-child(#{$i}) {
+			$row: ceil($i / 3);
+			$column: column($i);
 
-	.grid div:nth-child(9) {
-		top: 45px;
-		left: 45px;
-		animation-delay: -1.6s;
+			top: 6px + ($row - 1) * 20px;
+			left: 6px + ($column - 1) * 20px;
+			animation-delay: -0.4s * ($i - 1);
+		}
 	}
 
 	@keyframes grid {
@@ -86,6 +49,7 @@
 		100% {
 			opacity: 1;
 		}
+
 		50% {
 			opacity: 0.5;
 		}
diff --git a/src/lib/Loading/Message.svelte b/src/lib/Loading/Message.svelte
index b0fc1e40..95a84180 100644
--- a/src/lib/Loading/Message.svelte
+++ b/src/lib/Loading/Message.svelte
@@ -5,15 +5,16 @@
 
 	export let message: string | undefined = undefined;
 	export let loader: 'ellipsis' | 'ripple' | 'grid' = 'ellipsis';
+	export let colour = 'var(--fg)';
 </script>
 
 <div class="card popup">
 	{#if loader === 'ellipsis'}
-		<Ellipsis />
+		<Ellipsis {colour} />
 	{:else if loader === 'ripple'}
-		<Ripple />
+		<Ripple {colour} />
 	{:else if loader === 'grid'}
-		<Grid />
+		<Grid {colour} />
 	{/if}
 
 	{#if message}
diff --git a/src/lib/Loading/Ripple.svelte b/src/lib/Loading/Ripple.svelte
index 33e2ab8b..40fa07b8 100644
--- a/src/lib/Loading/Ripple.svelte
+++ b/src/lib/Loading/Ripple.svelte
@@ -1,26 +1,30 @@
-<div class="ripple">
+<script lang="ts">
+	export let colour = 'var(--fg)';
+</script>
+
+<div class="ripple" style={`--loader-colour: ${colour};`}>
 	<div />
 	<div />
 </div>
 
-<style>
+<style lang="scss">
 	.ripple {
 		display: inline-block;
 		position: relative;
 		width: 80px;
 		height: 80px;
-	}
 
-	.ripple div {
-		position: absolute;
-		border: 4px solid #fff;
-		opacity: 1;
-		border-radius: 50%;
-		animation: ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-	}
+		div {
+			position: absolute;
+			border: 4px solid var(--loader-colour);
+			opacity: 1;
+			border-radius: 50%;
+			animation: ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 
-	.ripple div:nth-child(2) {
-		animation-delay: -0.5s;
+			&:nth-child(2) {
+				animation-delay: -0.5s;
+			}
+		}
 	}
 
 	@keyframes ripple {
@@ -31,6 +35,7 @@
 			height: 0;
 			opacity: 1;
 		}
+
 		100% {
 			top: 0px;
 			left: 0px;