diff --git a/package.json b/package.json index 3c2533d..be79658 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,10 @@ }, "devDependencies": { "@skeletonlabs/skeleton": "^2.0.0", + "@skeletonlabs/tw-plugin": "^0.1.0", "@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/kit": "^1.20.4", + "@types/node": "^20.5.9", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "autoprefixer": "^10.4.14", @@ -32,7 +34,8 @@ "tailwindcss": "^3.3.2", "tslib": "^2.4.1", "typescript": "^5.0.0", - "vite": "^4.4.2" + "vite": "^4.4.2", + "vite-plugin-tailwind-purgecss": "^0.1.3" }, "type": "module", "dependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4a77911..be21495 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -37,12 +37,18 @@ devDependencies: '@skeletonlabs/skeleton': specifier: ^2.0.0 version: 2.0.0(svelte@4.1.0) + '@skeletonlabs/tw-plugin': + specifier: ^0.1.0 + version: 0.1.0(tailwindcss@3.3.3) '@sveltejs/adapter-auto': specifier: ^2.0.0 version: 2.1.0(@sveltejs/kit@1.22.3) '@sveltejs/kit': specifier: ^1.20.4 version: 1.22.3(svelte@4.1.0)(vite@4.4.4) + '@types/node': + specifier: ^20.5.9 + version: 20.5.9 '@typescript-eslint/eslint-plugin': specifier: ^6.0.0 version: 6.2.0(@typescript-eslint/parser@6.2.0)(eslint@8.45.0)(typescript@5.1.6) @@ -93,7 +99,10 @@ devDependencies: version: 5.1.6 vite: specifier: ^4.4.2 - version: 4.4.4 + version: 4.4.4(@types/node@20.5.9) + vite-plugin-tailwind-purgecss: + specifier: ^0.1.3 + version: 0.1.3(vite@4.4.4) packages: @@ -431,6 +440,14 @@ packages: svelte: 4.1.0 dev: true + /@skeletonlabs/tw-plugin@0.1.0(tailwindcss@3.3.3): + resolution: {integrity: sha512-ufnm4FS+s/khuho4yJ/uqfW91u2YXnH3E5N541MtX9XjmoimQzYIcxWyTIuX9AM/brIPP6M6l0et3nRx17CRoQ==} + peerDependencies: + tailwindcss: '>=3.0.0' + dependencies: + tailwindcss: 3.3.3 + dev: true + /@sveltejs/adapter-auto@2.1.0(@sveltejs/kit@1.22.3): resolution: {integrity: sha512-o2pZCfATFtA/Gw/BB0Xm7k4EYaekXxaPGER3xGSY3FvzFJGTlJlZjBseaXwYSM94lZ0HniOjTokN3cWaLX6fow==} peerDependencies: @@ -462,7 +479,7 @@ packages: sirv: 2.0.3 svelte: 4.1.0 undici: 5.22.1 - vite: 4.4.4 + vite: 4.4.4(@types/node@20.5.9) transitivePeerDependencies: - supports-color dev: true @@ -478,7 +495,7 @@ packages: '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@4.1.0)(vite@4.4.4) debug: 4.3.4 svelte: 4.1.0 - vite: 4.4.4 + vite: 4.4.4(@types/node@20.5.9) transitivePeerDependencies: - supports-color dev: true @@ -497,7 +514,7 @@ packages: magic-string: 0.30.1 svelte: 4.1.0 svelte-hmr: 0.15.2(svelte@4.1.0) - vite: 4.4.4 + vite: 4.4.4(@types/node@20.5.9) vitefu: 0.2.4(vite@4.4.4) transitivePeerDependencies: - supports-color @@ -579,6 +596,10 @@ packages: resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==} dev: true + /@types/node@20.5.9: + resolution: {integrity: sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==} + dev: true + /@types/pug@2.0.6: resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==} dev: true @@ -866,6 +887,12 @@ packages: concat-map: 0.0.1 dev: true + /brace-expansion@2.0.1: + resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==} + dependencies: + balanced-match: 1.0.2 + dev: true + /braces@3.0.2: resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==} engines: {node: '>=8'} @@ -976,6 +1003,11 @@ packages: resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==} dev: true + /commander@10.0.1: + resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==} + engines: {node: '>=14'} + dev: true + /commander@11.0.0: resolution: {integrity: sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==} engines: {node: '>=16'} @@ -1414,6 +1446,17 @@ packages: path-is-absolute: 1.0.1 dev: true + /glob@8.1.0: + resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==} + engines: {node: '>=12'} + dependencies: + fs.realpath: 1.0.0 + inflight: 1.0.6 + inherits: 2.0.4 + minimatch: 5.1.6 + once: 1.4.0 + dev: true + /globals@13.20.0: resolution: {integrity: sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==} engines: {node: '>=8'} @@ -1732,6 +1775,13 @@ packages: brace-expansion: 1.1.11 dev: true + /minimatch@5.1.6: + resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==} + engines: {node: '>=10'} + dependencies: + brace-expansion: 2.0.1 + dev: true + /minimist@1.2.8: resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} dev: true @@ -2055,6 +2105,16 @@ packages: engines: {node: '>=6'} dev: true + /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.26 + postcss-selector-parser: 6.0.13 + dev: true + /queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} dev: true @@ -2568,7 +2628,17 @@ packages: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} dev: true - /vite@4.4.4: + /vite-plugin-tailwind-purgecss@0.1.3(vite@4.4.4): + 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.4(@types/node@20.5.9) + dev: true + + /vite@4.4.4(@types/node@20.5.9): resolution: {integrity: sha512-4mvsTxjkveWrKDJI70QmelfVqTm+ihFAb6+xf4sjEU2TmUCTlVX87tmg/QooPEMQb/lM9qGHT99ebqPziEd3wg==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -2596,6 +2666,7 @@ packages: terser: optional: true dependencies: + '@types/node': 20.5.9 esbuild: 0.18.14 postcss: 8.4.26 rollup: 3.26.3 @@ -2611,7 +2682,7 @@ packages: vite: optional: true dependencies: - vite: 4.4.4 + vite: 4.4.4(@types/node@20.5.9) dev: true /web-vitals@3.4.0: diff --git a/src/app.html b/src/app.html index 448723f..303e501 100644 --- a/src/app.html +++ b/src/app.html @@ -14,7 +14,7 @@ %sveltekit.head% - +
%sveltekit.body%
diff --git a/src/app.postcss b/src/app.postcss index cb59d9c..02cebe4 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -1,3 +1,8 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; +@tailwind variants; + html, body { @apply h-full overflow-hidden; diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index a042e6f..6fe2d71 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -1,15 +1,19 @@ @@ -59,7 +63,9 @@ diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte index e90d0db..a6b60f3 100644 --- a/src/lib/components/Navigation.svelte +++ b/src/lib/components/Navigation.svelte @@ -1,23 +1,27 @@ diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 75ffa5f..7e94593 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,9 +1,7 @@ - +

Pages

diff --git a/src/theme.postcss b/src/theme.postcss deleted file mode 100644 index a081143..0000000 --- a/src/theme.postcss +++ /dev/null @@ -1,96 +0,0 @@ -:root { - /* =~= Theme Properties =~= */ - --theme-font-family-base: system-ui; - --theme-font-family-heading: system-ui; - --theme-font-color-base: 0 0 0; - --theme-font-color-dark: 255 255 255; - --theme-rounded-base: 9999px; - --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 | #3833a5 */ - --color-primary-50: 225 224 242; /* ⬅ #e1e0f2 */ - --color-primary-100: 215 214 237; /* ⬅ #d7d6ed */ - --color-primary-200: 205 204 233; /* ⬅ #cdcce9 */ - --color-primary-300: 175 173 219; /* ⬅ #afaddb */ - --color-primary-400: 116 112 192; /* ⬅ #7470c0 */ - --color-primary-500: 56 51 165; /* ⬅ #3833a5 */ - --color-primary-600: 50 46 149; /* ⬅ #322e95 */ - --color-primary-700: 42 38 124; /* ⬅ #2a267c */ - --color-primary-800: 34 31 99; /* ⬅ #221f63 */ - --color-primary-900: 27 25 81; /* ⬅ #1b1951 */ - /* secondary | #0FBA81 */ - --color-secondary-50: 219 245 236; /* ⬅ #dbf5ec */ - --color-secondary-100: 207 241 230; /* ⬅ #cff1e6 */ - --color-secondary-200: 195 238 224; /* ⬅ #c3eee0 */ - --color-secondary-300: 159 227 205; /* ⬅ #9fe3cd */ - --color-secondary-400: 87 207 167; /* ⬅ #57cfa7 */ - --color-secondary-500: 15 186 129; /* ⬅ #0FBA81 */ - --color-secondary-600: 14 167 116; /* ⬅ #0ea774 */ - --color-secondary-700: 11 140 97; /* ⬅ #0b8c61 */ - --color-secondary-800: 9 112 77; /* ⬅ #09704d */ - --color-secondary-900: 7 91 63; /* ⬅ #075b3f */ - /* tertiary | #0EA5E9 */ - --color-tertiary-50: 219 242 252; /* ⬅ #dbf2fc */ - --color-tertiary-100: 207 237 251; /* ⬅ #cfedfb */ - --color-tertiary-200: 195 233 250; /* ⬅ #c3e9fa */ - --color-tertiary-300: 159 219 246; /* ⬅ #9fdbf6 */ - --color-tertiary-400: 86 192 240; /* ⬅ #56c0f0 */ - --color-tertiary-500: 14 165 233; /* ⬅ #0EA5E9 */ - --color-tertiary-600: 13 149 210; /* ⬅ #0d95d2 */ - --color-tertiary-700: 11 124 175; /* ⬅ #0b7caf */ - --color-tertiary-800: 8 99 140; /* ⬅ #08638c */ - --color-tertiary-900: 7 81 114; /* ⬅ #075172 */ - /* 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 | #D41976 */ - --color-error-50: 249 221 234; /* ⬅ #f9ddea */ - --color-error-100: 246 209 228; /* ⬅ #f6d1e4 */ - --color-error-200: 244 198 221; /* ⬅ #f4c6dd */ - --color-error-300: 238 163 200; /* ⬅ #eea3c8 */ - --color-error-400: 225 94 159; /* ⬅ #e15e9f */ - --color-error-500: 212 25 118; /* ⬅ #D41976 */ - --color-error-600: 191 23 106; /* ⬅ #bf176a */ - --color-error-700: 159 19 89; /* ⬅ #9f1359 */ - --color-error-800: 127 15 71; /* ⬅ #7f0f47 */ - --color-error-900: 104 12 58; /* ⬅ #680c3a */ - /* surface | #141a26 */ - --color-surface-50: 220 221 222; /* ⬅ #dcddde */ - --color-surface-100: 208 209 212; /* ⬅ #d0d1d4 */ - --color-surface-200: 196 198 201; /* ⬅ #c4c6c9 */ - --color-surface-300: 161 163 168; /* ⬅ #a1a3a8 */ - --color-surface-400: 91 95 103; /* ⬅ #5b5f67 */ - --color-surface-500: 20 26 38; /* ⬅ #141a26 */ - --color-surface-600: 18 23 34; /* ⬅ #121722 */ - --color-surface-700: 15 20 29; /* ⬅ #0f141d */ - --color-surface-800: 12 16 23; /* ⬅ #0c1017 */ - --color-surface-900: 10 13 19; /* ⬅ #0a0d13 */ -} diff --git a/tailwind.config.cjs b/tailwind.config.ts similarity index 57% rename from tailwind.config.cjs rename to tailwind.config.ts index 67b2a12..d63db06 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.ts @@ -1,10 +1,13 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -/** @type {import('tailwindcss').Config} */ -module.exports = { +import { join } from 'path'; +import type { Config } from 'tailwindcss'; +import { theme } from './theme'; +import { skeleton } from '@skeletonlabs/tw-plugin'; + +const config = { darkMode: 'class', content: [ './src/**/*.{html,js,svelte,ts}', - require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}') + join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}') ], theme: { extend: { @@ -28,5 +31,13 @@ module.exports = { } } }, - plugins: [...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()] -}; + plugins: [ + skeleton({ + themes: { + custom: [theme] + } + }) + ] +} satisfies Config; + +export default config; diff --git a/theme.ts b/theme.ts new file mode 100644 index 0000000..194d302 --- /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': 'system-ui', + '--theme-font-family-heading': 'system-ui', + '--theme-font-color-base': '0 0 0', + '--theme-font-color-dark': '255 255 255', + '--theme-rounded-base': '6px', + '--theme-rounded-container': '8px', + '--theme-border-base': '1px', + // =~= Theme On-X Colors =~= + '--on-primary': '0 0 0', + '--on-secondary': '255 255 255', + '--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 | #4F46E5 + '--color-primary-50': '229 227 251', // #e5e3fb + '--color-primary-100': '220 218 250', // #dcdafa + '--color-primary-200': '211 209 249', // #d3d1f9 + '--color-primary-300': '185 181 245', // #b9b5f5 + '--color-primary-400': '132 126 237', // #847eed + '--color-primary-500': '79 70 229', // #4F46E5 + '--color-primary-600': '71 63 206', // #473fce + '--color-primary-700': '59 53 172', // #3b35ac + '--color-primary-800': '47 42 137', // #2f2a89 + '--color-primary-900': '39 34 112', // #272270 + // secondary | #0cb79e + '--color-secondary-50': '219 244 240', // #dbf4f0 + '--color-secondary-100': '206 241 236', // #cef1ec + '--color-secondary-200': '194 237 231', // #c2ede7 + '--color-secondary-300': '158 226 216', // #9ee2d8 + '--color-secondary-400': '85 205 187', // #55cdbb + '--color-secondary-500': '12 183 158', // #0cb79e + '--color-secondary-600': '11 165 142', // #0ba58e + '--color-secondary-700': '9 137 119', // #098977 + '--color-secondary-800': '7 110 95', // #076e5f + '--color-secondary-900': '6 90 77', // #065a4d + // tertiary | #0ea5e9 + '--color-tertiary-50': '219 242 252', // #dbf2fc + '--color-tertiary-100': '207 237 251', // #cfedfb + '--color-tertiary-200': '195 233 250', // #c3e9fa + '--color-tertiary-300': '159 219 246', // #9fdbf6 + '--color-tertiary-400': '86 192 240', // #56c0f0 + '--color-tertiary-500': '14 165 233', // #0ea5e9 + '--color-tertiary-600': '13 149 210', // #0d95d2 + '--color-tertiary-700': '11 124 175', // #0b7caf + '--color-tertiary-800': '8 99 140', // #08638c + '--color-tertiary-900': '7 81 114', // #075172 + // 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 | #D41976 + '--color-error-50': '249 221 234', // #f9ddea + '--color-error-100': '246 209 228', // #f6d1e4 + '--color-error-200': '244 198 221', // #f4c6dd + '--color-error-300': '238 163 200', // #eea3c8 + '--color-error-400': '225 94 159', // #e15e9f + '--color-error-500': '212 25 118', // #D41976 + '--color-error-600': '191 23 106', // #bf176a + '--color-error-700': '159 19 89', // #9f1359 + '--color-error-800': '127 15 71', // #7f0f47 + '--color-error-900': '104 12 58', // #680c3a + // surface | #050609 + '--color-surface-50': '218 218 218', // #dadada + '--color-surface-100': '205 205 206', // #cdcdce + '--color-surface-200': '193 193 194', // #c1c1c2 + '--color-surface-300': '155 155 157', // #9b9b9d + '--color-surface-400': '80 81 83', // #505153 + '--color-surface-500': '5 6 9', // #050609 + '--color-surface-600': '5 5 8', // #050508 + '--color-surface-700': '4 5 7', // #040507 + '--color-surface-800': '3 4 5', // #030405 + '--color-surface-900': '2 3 4' // #020304 + } +};