From 79552d21f8189c757e5fb1840d8cebd238504fa2 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Thu, 3 Jul 2025 19:30:45 -0700
Subject: [PATCH] fix css references to make suitable for import

---
 src/lib/Combobox.svelte     |  2 +-
 src/lib/Dateinput.svelte    |  2 +-
 src/lib/Spinner.svelte      | 12 ++++++++++--
 src/lib/StateMachine.svelte |  2 +-
 src/lib/TimeInput.svelte    |  2 +-
 src/lib/styles/theme.css    |  2 ++
 6 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/lib/Combobox.svelte b/src/lib/Combobox.svelte
index 1362a1c..dfc12d2 100644
--- a/src/lib/Combobox.svelte
+++ b/src/lib/Combobox.svelte
@@ -462,7 +462,7 @@
 {/snippet}
 
 <style lang="postcss">
-	@reference "../app.css";
+	@reference "./styles/theme.css";
 
 	.picker {
 		--outer-gap: 0.5rem;
diff --git a/src/lib/Dateinput.svelte b/src/lib/Dateinput.svelte
index db3fb25..4e47fbd 100644
--- a/src/lib/Dateinput.svelte
+++ b/src/lib/Dateinput.svelte
@@ -311,7 +311,7 @@
 {/snippet}
 
 <style lang="postcss">
-	@reference "$lib/styles/theme.css";
+	@reference "./styles/theme.css";
 
 	.date-input {
 		@apply ring-accent dark:ring-accent/50 h-6 min-w-[1ch] outline-0 transition-all focus:ring-2;
diff --git a/src/lib/Spinner.svelte b/src/lib/Spinner.svelte
index ed94245..6a0cc09 100644
--- a/src/lib/Spinner.svelte
+++ b/src/lib/Spinner.svelte
@@ -1,8 +1,16 @@
 <script lang="ts">
-	let { size }: { size: string } = $props();
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props {
+		size: string;
+		class?: ClassValue;
+		color?: string;
+	}
+
+	let { size, class: classValue, color = '#fff' }: Props = $props();
 </script>
 
-<div class="lds-ring" style="--size: {size}">
+<div class={['lds-ring border-white', classValue]} style="--size: {size};--color: {color}">
 	<div></div>
 	<div></div>
 	<div></div>
diff --git a/src/lib/StateMachine.svelte b/src/lib/StateMachine.svelte
index 3124135..16dbdcd 100644
--- a/src/lib/StateMachine.svelte
+++ b/src/lib/StateMachine.svelte
@@ -435,7 +435,7 @@
 </div>
 
 <style lang="postcss">
-	@reference "../app.css";
+	@reference "./styles/theme.css";
 
 	:global(.circle-initial) {
 		transition: opacity 1s;
diff --git a/src/lib/TimeInput.svelte b/src/lib/TimeInput.svelte
index 9899daf..f744b97 100644
--- a/src/lib/TimeInput.svelte
+++ b/src/lib/TimeInput.svelte
@@ -363,7 +363,7 @@
 </div>
 
 <style lang="postcss">
-	@reference "../app.css";
+	@reference "./styles/theme.css";
 
 	:global(.time-input) {
 		@apply h-16 w-24 text-center text-xl;
diff --git a/src/lib/styles/theme.css b/src/lib/styles/theme.css
index bd8c6b4..52abae5 100644
--- a/src/lib/styles/theme.css
+++ b/src/lib/styles/theme.css
@@ -5,6 +5,8 @@
 @plugin '@tailwindcss/container-queries';
 @plugin 'tailwindcss-animate';
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
 	/* Fonts - easily overrideable */
 	--font-*: initial;