From 1263c1c8ef7d9afa1a89ed55b31b6d60f3b492de Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Wed, 12 Mar 2025 20:57:33 +1100 Subject: [PATCH 1/3] feat: remove colour pallete flattening --- tailwind.config.js | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 383a3120..7b550250 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,3 @@ -import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette"; - /** @type {import('tailwindcss').Config} */ export default { content: [ @@ -42,17 +40,5 @@ export default { }, plugins: [ require('@tailwindcss/forms'), - addVariablesForColors, ], -}; - -function addVariablesForColors({ addBase, theme }) { - let allColors = flattenColorPalette(theme("colors")); - let newVars = Object.fromEntries( - Object.entries(allColors).map(([key, val]) => [`--${key}`, val]) - ); - - addBase({ - ":root": newVars, - }); -} \ No newline at end of file +}; \ No newline at end of file From ca7e6b913795cce8d90bea6885037f20a853ebed Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Wed, 12 Mar 2025 21:46:01 +1100 Subject: [PATCH 2/3] feat: upgrade to tailwindcss v4 --- .postcss.config.js | 6 --- .postcssrc.json | 5 --- package.json | 4 +- .../components/TabbedContainer.svelte | 8 ++-- .../components/store/Backgrounds.svelte | 26 +++++------ .../components/store/CoverSwiper.svelte | 14 +++--- .../components/store/FilterPanel.svelte | 4 +- src/interface/components/store/Header.svelte | 10 ++--- .../components/store/ThemeCard.svelte | 2 +- .../components/store/ThemeModal.svelte | 4 +- .../components/themes/BackgroundItem.svelte | 2 +- .../components/themes/ThemeSelector.svelte | 2 +- src/interface/index.css | 42 ++++++++++++++++-- src/interface/pages/themeCreator.svelte | 10 ++--- tailwind.config.js | 44 ------------------- 15 files changed, 81 insertions(+), 102 deletions(-) delete mode 100644 .postcss.config.js delete mode 100644 .postcssrc.json delete mode 100644 tailwind.config.js diff --git a/.postcss.config.js b/.postcss.config.js deleted file mode 100644 index e99ebc2c..00000000 --- a/.postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -} \ No newline at end of file diff --git a/.postcssrc.json b/.postcssrc.json deleted file mode 100644 index d42c370f..00000000 --- a/.postcssrc.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "plugins": { - "tailwindcss": {} - } -} \ No newline at end of file diff --git a/package.json b/package.json index 953229a8..c5897e9c 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "sass": "^1.85.1", "sass-loader": "^16.0.5", "semver": "^7.7.1", - "tailwindcss": "3.4.11", + "tailwindcss": "^4.0.13", "url": "^0.11.4" }, "dependencies": { @@ -62,7 +62,7 @@ "@codemirror/view": "^6.36.4", "@sveltejs/vite-plugin-svelte": "^5.0.3", "@tailwindcss/forms": "^0.5.9", - "@tailwindcss/postcss": "^4.0.12", + "@tailwindcss/postcss": "^4.0.13", "@tailwindcss/vite": "^4.0.12", "@tsconfig/svelte": "^5.0.4", "@types/chrome": "^0.0.308", diff --git a/src/interface/components/TabbedContainer.svelte b/src/interface/components/TabbedContainer.svelte index 5771af5b..c5866562 100644 --- a/src/interface/components/TabbedContainer.svelte +++ b/src/interface/components/TabbedContainer.svelte @@ -41,7 +41,7 @@
-
+
{#each tabs as { title }, index}
-
+
{#each tabs as { Content, props }, index} -
diff --git a/src/interface/components/store/Backgrounds.svelte b/src/interface/components/store/Backgrounds.svelte index 8dbc4412..26cf2805 100644 --- a/src/interface/components/store/Backgrounds.svelte +++ b/src/interface/components/store/Backgrounds.svelte @@ -176,7 +176,7 @@
-
+

Categories

-
+
-
+

Explore Backgrounds {searchTerm ? `- "${searchTerm}"` : ''}

-
+
setSearchTerm(e.target.value)} - class="px-4 py-2 pl-10 text-lg transition bg-gray-100/80 rounded-lg ring-0 focus:bg-gray-100/0 dark:focus:bg-zinc-700/50 focus:ring-[1px] ring-zinc-200 dark:ring-zinc-600 dark:bg-zinc-700/80 dark:text-gray-100 focus:outline-none focus:border-transparent" /> + class="px-4 py-2 pl-10 text-lg transition bg-gray-100/80 rounded-lg ring-0 focus:bg-gray-100/0 dark:focus:bg-zinc-700/50 focus:ring-[1px] ring-zinc-200 dark:ring-zinc-600 dark:bg-zinc-700/80 dark:text-gray-100 focus:outline-hidden focus:border-transparent" /> {theme.name}
-
+
Theme Preview
diff --git a/src/interface/components/store/ThemeModal.svelte b/src/interface/components/store/ThemeModal.svelte index 7796568d..e7752e70 100644 --- a/src/interface/components/store/ThemeModal.svelte +++ b/src/interface/components/store/ThemeModal.svelte @@ -54,7 +54,7 @@
{ if (e.target === e.currentTarget) hideModal(); }} @@ -115,7 +115,7 @@
{relatedTheme.name}
-
+
Theme Preview
diff --git a/src/interface/components/themes/BackgroundItem.svelte b/src/interface/components/themes/BackgroundItem.svelte index e03945a0..a8a194bb 100644 --- a/src/interface/components/themes/BackgroundItem.svelte +++ b/src/interface/components/themes/BackgroundItem.svelte @@ -15,7 +15,7 @@ onkeydown={onClick} tabindex="-1" role="button" - class="relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-zinc-500/50 ring-zinc-300 {isEditMode ? 'animate-shake' : ''} {isSelected ? 'dark:ring-4 ring-4' : 'ring-0'}" + class="relative w-16 h-16 cursor-pointer rounded-xl transition ring-3 dark:ring-zinc-500/50 ring-zinc-300 {isEditMode ? 'animate-shake' : ''} {isSelected ? 'dark:ring-4 ring-4' : 'ring-0'}" > {#if isEditMode}
handleThemeClick(theme)} > {#if isEditMode} diff --git a/src/interface/index.css b/src/interface/index.css index dedb557e..447cfa1d 100644 --- a/src/interface/index.css +++ b/src/interface/index.css @@ -1,8 +1,42 @@ -@import './components/ColourPicker.css'; +@import './components/ColourPicker.css' layer(base); +@import 'tailwindcss'; -@tailwind base; -@tailwind components; -@tailwind utilities; +@plugin '@tailwindcss/forms'; + +@custom-variant dark (&:is(.dark *)); + +@theme { + --text-*: initial; + --text-xs: 0.65rem; + --text-sm: 0.775rem; + --text-base: 0.65rem; + --text-md: 0.65rem; + --text-lg: 1rem; + --text-xl: 1.25rem; + --text-2xl: 1.5rem; + --text-3xl: 1.875rem; + --text-4xl: 2.25rem; + --text-5xl: 3rem; + --text-6xl: 4rem; + --text-7xl: 5rem; + --text-8xl: 6rem; + --text-9xl: 8rem; + --text-10xl: 10rem; + --text-11xl: 12rem; + --text-12xl: 14rem; + --text-13xl: 16rem; + --text-14xl: 18rem; + + --font-IconFamily: IconFamily; + + --animate-spin-fast: spin 0.4s linear infinite; + + --aspect-theme: 5 / 1; +} + +button { + @apply cursor-pointer; +} :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; diff --git a/src/interface/pages/themeCreator.svelte b/src/interface/pages/themeCreator.svelte index 3248b7b2..d200bd45 100644 --- a/src/interface/pages/themeCreator.svelte +++ b/src/interface/pages/themeCreator.svelte @@ -210,14 +210,14 @@ {#each theme.CustomImages as image (image.id)}
- {image.variableName} + {image.variableName}
onImageVariableChange(image.id, e.currentTarget.value)} placeholder="CSS Variable Name" - class="flex-grow flex-[3] w-full p-2 transition border-0 rounded-lg dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-600/50 focus:bg-zinc-300/50 dark:focus:bg-zinc-600" + class="grow flex-3 w-full p-2 transition border-0 rounded-lg dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-600/50 focus:bg-zinc-300/50 dark:focus:bg-zinc-600" />