Update @layerstack/tailwind and replace tailwind.config.cjs with css-based config

Author: techniq

packages/svelte-ux/package.json

@@ -57,7 +57,7 @@
     "@layerstack/svelte-actions": "^1.0.0",
     "@layerstack/svelte-stores": "^1.0.0",
     "@layerstack/svelte-table": "^1.0.0",
-    "@layerstack/tailwind": "^1.0.0",
+    "@layerstack/tailwind": "https://pkg.pr.new/@layerstack/tailwind@32",
     "@layerstack/utils": "^1.0.0",
     "@mdi/js": "^7.4.47",
     "culori": "^4.0.1",

packages/svelte-ux/src/routes/+layout.server.ts

@@ -1,10 +1,9 @@
 import { redirect } from '@sveltejs/kit';
 import { getThemeNames } from '@layerstack/tailwind';
+import themeCss from '@layerstack/tailwind/themes/all.css?raw';
 
 import { env } from '$env/dynamic/private';
 
-import themes from '../../themes.json' with { type: 'json' };
-
 export async function load({ url }) {
   // Redirect `svelte-ux.vercel.app` to `svelte-ux.techniq.dev`
   if (url.host === 'svelte-ux.vercel.app') {
@@ -14,7 +13,7 @@ export async function load({ url }) {
   }
 
   return {
-    themes: getThemeNames(themes),
+    themes: getThemeNames(themeCss),
     // themes: { light: ['light'], dark: ['dark'] },
     pr_id: env.VERCEL_GIT_PULL_REQUEST_ID,
   };

packages/svelte-ux/src/routes/app.css

@@ -1,6 +1,8 @@
 @import 'tailwindcss';
 
-@config '../../tailwind.config.cjs';
+@import '@layerstack/tailwind/theme.css';
+@import '@layerstack/tailwind/themes/all.css';
+@import '@layerstack/tailwind/utils.css';
 
 /*
   The default border color has changed to `currentColor` in Tailwind CSS v4,
@@ -16,7 +18,8 @@
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: color-mix(in oklab, hsl(var(--color-surface-content) / 1) 20%, transparent);
+    border-color: color-mix(in oklab, var(--color-surface-content) 20%, transparent);
+    outline-color: color-mix(in oklab, var(--color-surface-content) 20%, transparent);
   }
 }