From 4ce40a55fd9dd6f867cc288cfabbe3427c410776 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Thu, 3 Jul 2025 21:17:49 -0700
Subject: [PATCH] clean up consumer styling

Consumer now only imports the styles endpoint from their main CSS file.
Dark mode is currently permanently disabled, I need to add a JS helper
that when used automatically adds the correct class if there is a
preferred color scheme.

Also gets rid of the whole weird thing where the consumer had to have
a SPECIFIC `theme.css` file.
---
 package.json                 | 3 ++-
 src/lib/Combobox.svelte      | 2 +-
 src/lib/DateInput.svelte     | 2 +-
 src/lib/StateMachine.svelte  | 2 +-
 src/lib/TimeInput.svelte     | 2 +-
 src/lib/styles/base.css      | 2 ++
 src/lib/styles/reference.css | 2 ++
 src/lib/styles/tailwind.css  | 3 ---
 8 files changed, 10 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/styles/reference.css

diff --git a/package.json b/package.json
index 0b46b1a..8beb431 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
 		".": {
 			"types": "./src/lib/index.ts",
 			"svelte": "./src/lib/index.ts"
-		}
+		},
+		"./styles": "./src/lib/styles/base.css"
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.20.2",
diff --git a/src/lib/Combobox.svelte b/src/lib/Combobox.svelte
index 4bd4926..e789af6 100644
--- a/src/lib/Combobox.svelte
+++ b/src/lib/Combobox.svelte
@@ -462,7 +462,7 @@
 {/snippet}
 
 <style lang="postcss">
-	@reference "$lib/styles/tailwind.css";
+	@reference "./styles/reference.css";
 
 	.picker {
 		--outer-gap: 0.5rem;
diff --git a/src/lib/DateInput.svelte b/src/lib/DateInput.svelte
index 8ee3a38..863c852 100644
--- a/src/lib/DateInput.svelte
+++ b/src/lib/DateInput.svelte
@@ -311,7 +311,7 @@
 {/snippet}
 
 <style lang="postcss">
-	@reference "$lib/styles/tailwind.css";
+	@reference "./styles/reference.css";
 
 	.date-input {
 		@apply ring-sui-accent dark:ring-sui-accent/50 h-6 min-w-[1ch] outline-0 transition-all focus:ring-2;
diff --git a/src/lib/StateMachine.svelte b/src/lib/StateMachine.svelte
index 0dfc09a..9debde8 100644
--- a/src/lib/StateMachine.svelte
+++ b/src/lib/StateMachine.svelte
@@ -435,7 +435,7 @@
 </div>
 
 <style lang="postcss">
-	@reference "$lib/styles/tailwind.css";
+	@reference "./styles/reference.css";
 
 	:global(.circle-initial) {
 		transition: opacity 1s;
diff --git a/src/lib/TimeInput.svelte b/src/lib/TimeInput.svelte
index 455eda9..609c2b8 100644
--- a/src/lib/TimeInput.svelte
+++ b/src/lib/TimeInput.svelte
@@ -363,7 +363,7 @@
 </div>
 
 <style lang="postcss">
-	@reference "$lib/styles/tailwind.css";
+	@reference "./styles/reference.css";
 
 	:global(.time-input) {
 		@apply h-16 w-24 text-center text-xl;
diff --git a/src/lib/styles/base.css b/src/lib/styles/base.css
index 8b6d02f..98c7a4f 100644
--- a/src/lib/styles/base.css
+++ b/src/lib/styles/base.css
@@ -1,3 +1,5 @@
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
 	/* Fonts - easily overrideable */
 	--font-*: initial;
diff --git a/src/lib/styles/reference.css b/src/lib/styles/reference.css
new file mode 100644
index 0000000..8761b2a
--- /dev/null
+++ b/src/lib/styles/reference.css
@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import './base.css';
diff --git a/src/lib/styles/tailwind.css b/src/lib/styles/tailwind.css
index 0c569f5..b8364a7 100644
--- a/src/lib/styles/tailwind.css
+++ b/src/lib/styles/tailwind.css
@@ -1,12 +1,9 @@
-/* packages/ui/src/styles/tailwind.css */
 @import 'tailwindcss';
 @import '$lib/styles/base.css';
 @plugin '@tailwindcss/forms';
 @plugin '@tailwindcss/container-queries';
 @plugin 'tailwindcss-animate';
 
-@custom-variant dark (&:where(.dark, .dark *));
-
 @layer base {
 	*,
 	::after,