From 41fe1e6a950483b466cb3e9e44ed41460ae3e21f Mon Sep 17 00:00:00 2001 From: Carter <35710697+cmintey@users.noreply.github.com> Date: Tue, 10 Oct 2023 17:40:10 -0500 Subject: [PATCH] upgrade to skeleton v2 (#49) --- package.json | 6 +- pnpm-lock.yaml | 49 +++++++- src/app.html | 16 ++- src/app.postcss | 106 +++++++++++++++++- .../components/account/ChangePassword.svelte | 4 +- src/lib/components/admin/ActionsForm.svelte | 5 +- src/lib/components/admin/Groups.svelte | 7 +- src/lib/components/admin/InviteUser.svelte | 5 +- src/lib/components/modals/AddUserModal.svelte | 4 +- .../components/modals/GroupSelectModal.svelte | 3 +- .../components/modals/InviteUserModal.svelte | 3 +- src/lib/components/navigation/NavBar.svelte | 4 +- src/lib/components/navigation/NavMenu.svelte | 4 +- .../navigation/NavigationDrawer.svelte | 4 +- src/lib/components/wishlists/ItemCard.svelte | 5 +- src/routes/+layout.svelte | 6 +- .../groups/[groupId]/members/+page.svelte | 4 +- .../admin/users/[username]/+page@.svelte | 5 +- .../[username]/edit/[itemId]/+page.svelte | 4 +- tailwind.config.cjs | 19 ---- tailwind.config.ts | 26 +++++ theme.ts | 101 +++++++++++++++++ vite.config.ts | 2 + 23 files changed, 346 insertions(+), 46 deletions(-) delete mode 100644 tailwind.config.cjs create mode 100644 tailwind.config.ts create mode 100644 theme.ts diff --git a/package.json b/package.json index 7f37c18..e5fee80 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ }, "devDependencies": { "@floating-ui/dom": "^1.5.3", - "@skeletonlabs/skeleton": "^1.12.0", + "@skeletonlabs/skeleton": "^2.3.0", + "@skeletonlabs/tw-plugin": "^0.2.2", "@sveltejs/adapter-node": "^1.3.1", "@sveltejs/kit": "^1.25.2", "@tailwindcss/forms": "^0.5.6", @@ -45,7 +46,8 @@ "tslib": "^2.6.2", "typescript": "^5.2.2", "vite": "^4.4.11", - "vite-plugin-pwa": "^0.16.5" + "vite-plugin-pwa": "^0.16.5", + "vite-plugin-tailwind-purgecss": "^0.1.3" }, "type": "module", "dependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7db6693..5639931 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: '6.1' +lockfileVersion: '6.0' settings: autoInstallPeers: true @@ -62,8 +62,11 @@ devDependencies: specifier: ^1.5.3 version: 1.5.3 '@skeletonlabs/skeleton': - specifier: ^1.12.0 - version: 1.12.0(svelte@4.2.1) + specifier: ^2.3.0 + version: 2.3.0(svelte@4.2.1) + '@skeletonlabs/tw-plugin': + specifier: ^0.2.2 + version: 0.2.2(tailwindcss@3.3.3) '@sveltejs/adapter-node': specifier: ^1.3.1 version: 1.3.1(@sveltejs/kit@1.25.2) @@ -148,6 +151,9 @@ devDependencies: vite-plugin-pwa: specifier: ^0.16.5 version: 0.16.5(vite@4.4.11)(workbox-build@7.0.0)(workbox-window@7.0.0) + vite-plugin-tailwind-purgecss: + specifier: ^0.1.3 + version: 0.1.3(vite@4.4.11) packages: @@ -1914,8 +1920,8 @@ packages: engines: {node: '>=10'} dev: false - /@skeletonlabs/skeleton@1.12.0(svelte@4.2.1): - resolution: {integrity: sha512-NCGy6WT3LUqu6EaFEG7J6lFQNB/DHlqFQpXMWkSpwdZIZ005OEVoZznNgdATYdTet++nS6LymBGVUQK00z82gw==} + /@skeletonlabs/skeleton@2.3.0(svelte@4.2.1): + resolution: {integrity: sha512-qXzm1ETXJ7uCmeX/OWp5IK7kRRYLmTqcTv0uM/GXrwuYn/CZ4CZtGP31amVtsphVLWBBKWf4uzIZgg+2KKzd4w==} peerDependencies: svelte: ^3.56.0 || ^4.0.0 dependencies: @@ -1923,6 +1929,14 @@ packages: svelte: 4.2.1 dev: true + /@skeletonlabs/tw-plugin@0.2.2(tailwindcss@3.3.3): + resolution: {integrity: sha512-Q1GPWXh+9Ing1378pPFu2uryfJYtHx+6CQjH5fnV043DYf1Ui2OozJPB9HsTsRCV2bcX5nksHJlgUAz2pypY9A==} + peerDependencies: + tailwindcss: '>=3.0.0' + dependencies: + tailwindcss: 3.3.3(ts-node@10.9.1) + dev: true + /@surma/rollup-plugin-off-main-thread@2.2.3: resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==} dependencies: @@ -2742,6 +2756,11 @@ packages: delayed-stream: 1.0.0 dev: false + /commander@10.0.1: + resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==} + engines: {node: '>=14'} + dev: true + /commander@2.20.3: resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} dev: true @@ -5121,6 +5140,16 @@ packages: resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==} engines: {node: '>=6'} + /purgecss@6.0.0-alpha.0: + resolution: {integrity: sha512-UC7d7uIyZsky+srEsSXny9BkbTcVn3ZtBCNX3rW3DsqJKhvUXFRpufA4ktcHzWF0+JLZgmsqjUm/8R82x9bHpw==} + hasBin: true + dependencies: + commander: 10.0.1 + glob: 8.1.0 + postcss: 8.4.31 + postcss-selector-parser: 6.0.13 + dev: true + /querystringify@2.2.0: resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==} dev: false @@ -6189,6 +6218,16 @@ packages: - supports-color dev: true + /vite-plugin-tailwind-purgecss@0.1.3(vite@4.4.11): + resolution: {integrity: sha512-VVz9fwKBEEFSbj/rKxtwtczvoSrIqbzbo6S+MT7gH0CsmKNwlx947VMoV8B085ocxGCuFlddOPRDszNXLi2nTQ==} + peerDependencies: + vite: ^4.1.1 + dependencies: + estree-walker: 3.0.3 + purgecss: 6.0.0-alpha.0 + vite: 4.4.11(@types/node@18.18.4) + dev: true + /vite@4.4.11(@types/node@18.18.4): resolution: {integrity: sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==} engines: {node: ^14.18.0 || >=16.0.0} diff --git a/src/app.html b/src/app.html index e4d16a9..1b63570 100644 --- a/src/app.html +++ b/src/app.html @@ -22,12 +22,26 @@ sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png?v=2" /> + + %sveltekit.head% - +
%sveltekit.body%
diff --git a/src/app.postcss b/src/app.postcss index ee4e26b..30046b5 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -1,4 +1,108 @@ -/* Write your global styles here, in PostCSS syntax */ +@font-face { + font-family: "Lato"; + src: + url("/fonts/Lato-Regular.woff2") format("woff2"), + url("/fonts/Lato-Regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Lato"; + src: + url("/fonts/Lato-Light.woff2") format("woff2"), + url("/fonts/Lato-Light.woff") format("woff"); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Lato"; + src: + url("/fonts/Lato-LightItalic.woff2") format("woff2"), + url("/fonts/Lato-LightItalic.woff") format("woff"); + font-weight: 300; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "Lato Hairline"; + src: + url("/fonts/Lato-Hairline.woff2") format("woff2"), + url("/fonts/Lato-Hairline.woff") format("woff"); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Lato"; + src: + url("/fonts/Lato-Italic.woff2") format("woff2"), + url("/fonts/Lato-Italic.woff") format("woff"); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "Lato"; + src: + url("/fonts/Lato-Bold.woff2") format("woff2"), + url("/fonts/Lato-Bold.woff") format("woff"); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Lato Hairline"; + src: + url("/fonts/Lato-HairlineItalic.woff2") format("woff2"), + url("/fonts/Lato-HairlineItalic.woff") format("woff"); + font-weight: 300; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "Lato"; + src: + url("/fonts/Lato-Black.woff2") format("woff2"), + url("/fonts/Lato-Black.woff") format("woff"); + font-weight: 900; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Lato"; + src: + url("/fonts/Lato-BlackItalic.woff2") format("woff2"), + url("/fonts/Lato-BlackItalic.woff") format("woff"); + font-weight: 900; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "Lato"; + src: + url("/fonts/Lato-BoldItalic.woff2") format("woff2"), + url("/fonts/Lato-BoldItalic.woff") format("woff"); + font-weight: bold; + font-style: italic; + font-display: swap; +} + +@tailwind base; +@tailwind components; +@tailwind utilities; +@tailwind variants; + html, body { @apply h-full overflow-hidden; diff --git a/src/lib/components/account/ChangePassword.svelte b/src/lib/components/account/ChangePassword.svelte index a409850..dcbd558 100644 --- a/src/lib/components/account/ChangePassword.svelte +++ b/src/lib/components/account/ChangePassword.svelte @@ -1,9 +1,11 @@ diff --git a/src/lib/components/navigation/NavMenu.svelte b/src/lib/components/navigation/NavMenu.svelte index 9b17192..d3b3e67 100644 --- a/src/lib/components/navigation/NavMenu.svelte +++ b/src/lib/components/navigation/NavMenu.svelte @@ -6,7 +6,7 @@ import type { Group } from "@prisma/client"; import { LightSwitch, - modalStore, + getModalStore, popup, type ModalSettings, type PopupSettings @@ -15,6 +15,8 @@ import type { User } from "lucia"; export let user: User | undefined; + + const modalStore = getModalStore(); const menuSettings: PopupSettings = { event: "click", diff --git a/src/lib/components/navigation/NavigationDrawer.svelte b/src/lib/components/navigation/NavigationDrawer.svelte index 45b90fd..8b998d0 100644 --- a/src/lib/components/navigation/NavigationDrawer.svelte +++ b/src/lib/components/navigation/NavigationDrawer.svelte @@ -1,8 +1,10 @@ diff --git a/src/lib/components/wishlists/ItemCard.svelte b/src/lib/components/wishlists/ItemCard.svelte index 9bed7c8..d1cbf7f 100644 --- a/src/lib/components/wishlists/ItemCard.svelte +++ b/src/lib/components/wishlists/ItemCard.svelte @@ -1,7 +1,7 @@ {#if data?.item} diff --git a/tailwind.config.cjs b/tailwind.config.cjs deleted file mode 100644 index 166369d..0000000 --- a/tailwind.config.cjs +++ /dev/null @@ -1,19 +0,0 @@ -const config = { - darkMode: "class", - - content: [ - "./src/**/*.{html,js,svelte,ts}", - require("path").join(require.resolve("@skeletonlabs/skeleton"), "../**/*.{html,js,svelte,ts}") - ], - - theme: { - extend: {} - }, - - plugins: [ - require("@tailwindcss/forms"), - ...require("@skeletonlabs/skeleton/tailwind/skeleton.cjs")() - ] -}; - -module.exports = config; diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 0000000..5785dab --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,26 @@ +import { join } from "path"; +import type { Config } from "tailwindcss"; + +import { skeleton } from "@skeletonlabs/tw-plugin"; +import { theme } from "./theme"; + +const config = { + darkMode: "class", + content: [ + "./src/**/*.{html,js,svelte,ts}", + join(require.resolve("@skeletonlabs/skeleton"), "../**/*.{html,js,svelte,ts}") + ], + theme: { + extend: {} + }, + plugins: [ + require("@tailwindcss/forms"), + skeleton({ + themes: { + custom: [theme] + } + }) + ] +} satisfies Config; + +export default config; diff --git a/theme.ts b/theme.ts new file mode 100644 index 0000000..9e3fe80 --- /dev/null +++ b/theme.ts @@ -0,0 +1,101 @@ +import type { CustomThemeConfig } from "@skeletonlabs/tw-plugin"; + +export const theme: CustomThemeConfig = { + name: "theme", + properties: { + // =~= Theme Properties =~= + "--theme-font-family-base": `Lato, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`, + "--theme-font-family-heading": `Lato, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`, + "--theme-font-color-base": "var(--color-surface-900)", + "--theme-font-color-dark": "var(--color-surface-50)", + "--theme-rounded-base": "12px", + "--theme-rounded-container": "8px", + "--theme-border-base": "1px", + // =~= Theme On-X Colors =~= + "--on-primary": "255 255 255", + "--on-secondary": "0 0 0", + "--on-tertiary": "0 0 0", + "--on-success": "0 0 0", + "--on-warning": "0 0 0", + "--on-error": "255 255 255", + "--on-surface": "255 255 255", + // =~= Theme Colors =~= + // primary | #a940bf + "--color-primary-50": "242 226 245", // #f2e2f5 + "--color-primary-100": "238 217 242", // #eed9f2 + "--color-primary-200": "234 207 239", // #eacfef + "--color-primary-300": "221 179 229", // #ddb3e5 + "--color-primary-400": "195 121 210", // #c379d2 + "--color-primary-500": "169 64 191", // #a940bf + "--color-primary-600": "152 58 172", // #983aac + "--color-primary-700": "127 48 143", // #7f308f + "--color-primary-800": "101 38 115", // #652673 + "--color-primary-900": "83 31 94", // #531f5e + // secondary | #128ca1 + "--color-secondary-50": "219 238 241", // #dbeef1 + "--color-secondary-100": "208 232 236", // #d0e8ec + "--color-secondary-200": "196 226 232", // #c4e2e8 + "--color-secondary-300": "160 209 217", // #a0d1d9 + "--color-secondary-400": "89 175 189", // #59afbd + "--color-secondary-500": "18 140 161", // #128ca1 + "--color-secondary-600": "16 126 145", // #107e91 + "--color-secondary-700": "14 105 121", // #0e6979 + "--color-secondary-800": "11 84 97", // #0b5461 + "--color-secondary-900": "9 69 79", // #09454f + // tertiary | #33d17a + "--color-tertiary-50": "224 248 235", // #e0f8eb + "--color-tertiary-100": "214 246 228", // #d6f6e4 + "--color-tertiary-200": "204 244 222", // #ccf4de + "--color-tertiary-300": "173 237 202", // #adedca + "--color-tertiary-400": "112 223 162", // #70dfa2 + "--color-tertiary-500": "51 209 122", // #33d17a + "--color-tertiary-600": "46 188 110", // #2ebc6e + "--color-tertiary-700": "38 157 92", // #269d5c + "--color-tertiary-800": "31 125 73", // #1f7d49 + "--color-tertiary-900": "25 102 60", // #19663c + // success | #84cc16 + "--color-success-50": "237 247 220", // #edf7dc + "--color-success-100": "230 245 208", // #e6f5d0 + "--color-success-200": "224 242 197", // #e0f2c5 + "--color-success-300": "206 235 162", // #ceeba2 + "--color-success-400": "169 219 92", // #a9db5c + "--color-success-500": "132 204 22", // #84cc16 + "--color-success-600": "119 184 20", // #77b814 + "--color-success-700": "99 153 17", // #639911 + "--color-success-800": "79 122 13", // #4f7a0d + "--color-success-900": "65 100 11", // #41640b + // warning | #EAB308 + "--color-warning-50": "252 244 218", // #fcf4da + "--color-warning-100": "251 240 206", // #fbf0ce + "--color-warning-200": "250 236 193", // #faecc1 + "--color-warning-300": "247 225 156", // #f7e19c + "--color-warning-400": "240 202 82", // #f0ca52 + "--color-warning-500": "234 179 8", // #EAB308 + "--color-warning-600": "211 161 7", // #d3a107 + "--color-warning-700": "176 134 6", // #b08606 + "--color-warning-800": "140 107 5", // #8c6b05 + "--color-warning-900": "115 88 4", // #735804 + // error | #c92424 + "--color-error-50": "247 222 222", // #f7dede + "--color-error-100": "244 211 211", // #f4d3d3 + "--color-error-200": "242 200 200", // #f2c8c8 + "--color-error-300": "233 167 167", // #e9a7a7 + "--color-error-400": "217 102 102", // #d96666 + "--color-error-500": "201 36 36", // #c92424 + "--color-error-600": "181 32 32", // #b52020 + "--color-error-700": "151 27 27", // #971b1b + "--color-error-800": "121 22 22", // #791616 + "--color-error-900": "98 18 18", // #621212 + // surface | #423654 + "--color-surface-50": "227 225 229", // #e3e1e5 + "--color-surface-100": "217 215 221", // #d9d7dd + "--color-surface-200": "208 205 212", // #d0cdd4 + "--color-surface-300": "179 175 187", // #b3afbb + "--color-surface-400": "123 114 135", // #7b7287 + "--color-surface-500": "66 54 84", // #423654 + "--color-surface-600": "59 49 76", // #3b314c + "--color-surface-700": "50 41 63", // #32293f + "--color-surface-800": "40 32 50", // #282032 + "--color-surface-900": "32 26 41" // #201a29 + } +}; diff --git a/vite.config.ts b/vite.config.ts index be02168..c9ed9c7 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,10 +1,12 @@ import { sveltekit } from "@sveltejs/kit/vite"; import { SvelteKitPWA } from "@vite-pwa/sveltekit"; import type { UserConfig } from "vite"; +import { purgeCss } from "vite-plugin-tailwind-purgecss"; const config: UserConfig = { plugins: [ sveltekit(), + purgeCss(), SvelteKitPWA({ registerType: "autoUpdate", manifest: {