From 9e6834eabada780a5cb6b45be76e0d4753eb02da Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Thu, 3 Jul 2025 20:58:04 -0700
Subject: [PATCH] reconfigure css to allow consumer styling

It's a little jank, but it works. The consumer absolutely MUST have a
file at `$lib/styles/tailwind.css` that contains all necessary tailwind
imports AND also imports the `src/lib/styles/base.css` file from sui.

WILL address this in another commit.
---
 src/app.css                            |  2 +-
 src/lib/Combobox.svelte                |  2 +-
 src/lib/DateInput.svelte               |  2 +-
 src/lib/StateMachine.svelte            |  2 +-
 src/lib/TimeInput.svelte               |  2 +-
 src/lib/styles/{theme.css => base.css} | 19 -------------------
 src/lib/styles/tailwind.css            | 18 ++++++++++++++++++
 src/routes/+page.svelte                |  4 +++-
 8 files changed, 26 insertions(+), 25 deletions(-)
 rename src/lib/styles/{theme.css => base.css} (90%)
 create mode 100644 src/lib/styles/tailwind.css

diff --git a/src/app.css b/src/app.css
index aa70351..fb7ffb2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,3 @@
-@import '$lib/styles/theme.css';
+@import '$lib/styles/tailwind.css';
 
 @custom-variant dark (&:where(.dark, .dark *));
diff --git a/src/lib/Combobox.svelte b/src/lib/Combobox.svelte
index b97f718..4bd4926 100644
--- a/src/lib/Combobox.svelte
+++ b/src/lib/Combobox.svelte
@@ -462,7 +462,7 @@
 {/snippet}
 
 <style lang="postcss">
-	@reference "./styles/theme.css";
+	@reference "$lib/styles/tailwind.css";
 
 	.picker {
 		--outer-gap: 0.5rem;
diff --git a/src/lib/DateInput.svelte b/src/lib/DateInput.svelte
index 8fb3985..8ee3a38 100644
--- a/src/lib/DateInput.svelte
+++ b/src/lib/DateInput.svelte
@@ -311,7 +311,7 @@
 {/snippet}
 
 <style lang="postcss">
-	@reference "./styles/theme.css";
+	@reference "$lib/styles/tailwind.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 897ea51..0dfc09a 100644
--- a/src/lib/StateMachine.svelte
+++ b/src/lib/StateMachine.svelte
@@ -435,7 +435,7 @@
 </div>
 
 <style lang="postcss">
-	@reference "./styles/theme.css";
+	@reference "$lib/styles/tailwind.css";
 
 	:global(.circle-initial) {
 		transition: opacity 1s;
diff --git a/src/lib/TimeInput.svelte b/src/lib/TimeInput.svelte
index 6e0328d..455eda9 100644
--- a/src/lib/TimeInput.svelte
+++ b/src/lib/TimeInput.svelte
@@ -363,7 +363,7 @@
 </div>
 
 <style lang="postcss">
-	@reference "./styles/theme.css";
+	@reference "$lib/styles/tailwind.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/base.css
similarity index 90%
rename from src/lib/styles/theme.css
rename to src/lib/styles/base.css
index 4dcc85d..8b6d02f 100644
--- a/src/lib/styles/theme.css
+++ b/src/lib/styles/base.css
@@ -1,12 +1,3 @@
-/* packages/ui/src/styles/theme.css */
-@import 'tailwindcss';
-
-@plugin '@tailwindcss/forms';
-@plugin '@tailwindcss/container-queries';
-@plugin 'tailwindcss-animate';
-
-@custom-variant dark (&:where(.dark, .dark *));
-
 @theme {
 	/* Fonts - easily overrideable */
 	--font-*: initial;
@@ -93,13 +84,3 @@
 	--transition-property-colors: background-color, border-color, color, fill, stroke;
 	--transition-property-font-color: color;
 }
-
-@layer base {
-	*,
-	::after,
-	::before,
-	::backdrop,
-	::file-selector-button {
-		border-color: var(--color-sui-gray-200, currentcolor);
-	}
-}
diff --git a/src/lib/styles/tailwind.css b/src/lib/styles/tailwind.css
new file mode 100644
index 0000000..0c569f5
--- /dev/null
+++ b/src/lib/styles/tailwind.css
@@ -0,0 +1,18 @@
+/* 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,
+	::before,
+	::backdrop,
+	::file-selector-button {
+		border-color: var(--color-sui-gray-200, currentcolor);
+	}
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 48bc33c..47d709d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -19,6 +19,8 @@
 	let dateInputValue = $state<Date | undefined>(undefined);
 </script>
 
+<title>sui</title>
+
 <h1 class="mb-4 text-3xl font-bold">sui — Opinionated Svelte 5 UI toolkit</h1>
 
 <p class="mb-4">
@@ -153,7 +155,7 @@
 </div>
 
 <style lang="postcss">
-	@reference '$lib/styles/theme.css';
+	@reference '$lib/styles/tailwind.css';
 
 	.component .title {
 		@apply mb-2 text-lg font-semibold;