From 81021c98e59c1d35500e4f69c0769dcdcbb83b6c Mon Sep 17 00:00:00 2001
From: Andy Swick <andy@techenby.com>
Date: Sun, 24 May 2026 10:49:00 -0500
Subject: [PATCH] Add sunset Tweakflux theme

---
 resources/css/app.css             |  5 +++
 resources/css/tweakflux-theme.css | 52 +++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 resources/css/tweakflux-theme.css

diff --git a/resources/css/app.css b/resources/css/app.css
index 7d6fcfe..3076b8d 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,3 +1,6 @@
+/* tweakflux:fonts:start */
+@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&family=Ubuntu+Mono:wght@400;700&display=swap");
+/* tweakflux:fonts:end */
 @import 'tailwindcss';
 @import '../../vendor/livewire/flux/dist/flux.css';
 @plugin "@tailwindcss/typography";
@@ -13,3 +16,5 @@
 }
 
 @custom-variant dark (&:where(.dark, .dark *));
+
+@import "./tweakflux-theme.css";
diff --git a/resources/css/tweakflux-theme.css b/resources/css/tweakflux-theme.css
new file mode 100644
index 0000000..c65cc38
--- /dev/null
+++ b/resources/css/tweakflux-theme.css
@@ -0,0 +1,52 @@
+@layer theme {
+    :root {
+        --font-sans: Nunito, sans-serif;
+        --font-mono: Ubuntu Mono, monospace;
+        --color-accent: oklch(0.65 0.18 30);
+        --color-accent-content: oklch(0.65 0.18 30);
+        --color-accent-foreground: oklch(0.98 0.006 35);
+        --color-zinc-50: oklch(0.985 0.006 35);
+        --color-zinc-100: oklch(0.965 0.01 35);
+        --color-zinc-200: oklch(0.93 0.012 35);
+        --color-zinc-300: oklch(0.87 0.014 35);
+        --color-zinc-400: oklch(0.70 0.016 35);
+        --color-zinc-500: oklch(0.55 0.016 35);
+        --color-zinc-600: oklch(0.45 0.014 35);
+        --color-zinc-700: oklch(0.37 0.012 35);
+        --color-zinc-800: oklch(0.27 0.01 35);
+        --color-zinc-900: oklch(0.20 0.008 35);
+        --color-zinc-950: oklch(0.14 0.006 35);
+        --radius-sm: 0.3rem;
+        --radius-md: 0.5rem;
+        --radius-lg: 0.75rem;
+        --radius-xl: 1.125rem;
+        --radius-2xl: 1.5rem;
+        --shadow-2xs: 0 1px 1px oklch(0.55 0.10 30 / 0.07);
+        --shadow-xs: 0 1px 3px oklch(0.55 0.10 30 / 0.10), 0 1px 2px oklch(0.55 0.10 30 / 0.07);
+        --shadow-sm: 0 2px 6px oklch(0.55 0.10 30 / 0.12), 0 1px 3px oklch(0.55 0.10 30 / 0.08);
+        --shadow: 0 4px 10px oklch(0.55 0.10 30 / 0.12), 0 2px 4px oklch(0.55 0.10 30 / 0.08);
+        --shadow-md: 0 6px 16px oklch(0.55 0.10 30 / 0.14), 0 2px 6px oklch(0.55 0.10 30 / 0.08);
+        --shadow-lg: 0 12px 28px oklch(0.55 0.10 30 / 0.16), 0 4px 10px oklch(0.55 0.10 30 / 0.08);
+        --shadow-xl: 0 20px 40px oklch(0.55 0.10 30 / 0.18);
+        --shadow-2xl: 0 28px 56px oklch(0.55 0.10 30 / 0.22);
+    }
+}
+
+@layer theme {
+    .dark {
+        --color-accent: oklch(0.72 0.16 30);
+        --color-accent-content: oklch(0.72 0.16 30);
+        --color-accent-foreground: oklch(0.16 0.02 35);
+        --color-zinc-50: oklch(0.985 0.006 35);
+        --color-zinc-100: oklch(0.965 0.01 35);
+        --color-zinc-200: oklch(0.93 0.012 35);
+        --color-zinc-300: oklch(0.87 0.014 35);
+        --color-zinc-400: oklch(0.70 0.016 35);
+        --color-zinc-500: oklch(0.55 0.016 35);
+        --color-zinc-600: oklch(0.45 0.014 35);
+        --color-zinc-700: oklch(0.37 0.012 35);
+        --color-zinc-800: oklch(0.27 0.012 35);
+        --color-zinc-900: oklch(0.20 0.01 35);
+        --color-zinc-950: oklch(0.14 0.008 35);
+    }
+}