chore(ui framework) migrated skeleton to v2

2026-01-08 04:23:56 -05:00 · 2023-09-19 23:33:23 -04:00
parent 5c912ce013
commit 38da6eb813
9 changed files with 151 additions and 41 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,13 +29,15 @@
 			"devDependencies": {
 				"@faker-js/faker": "^8.0.2",
 				"@playwright/test": "^1.28.1",
-				"@skeletonlabs/skeleton": "^1.9.0",
+				"@skeletonlabs/skeleton": "^2.1.0",
+				"@skeletonlabs/tw-plugin": "^0.2.0",
 				"@sveltejs/adapter-auto": "^2.1.0",
 				"@sveltejs/adapter-cloudflare": "^2.3.0",
 				"@sveltejs/adapter-static": "^2.0.3",
 				"@sveltejs/kit": "^1.21.0",
 				"@tailwindcss/forms": "^0.5.3",
 				"@types/dompurify": "^3.0.2",
+				"@types/node": "^20.6.3",
 				"@types/qrcode": "^1.5.1",
 				"@typescript-eslint/eslint-plugin": "^5.45.0",
 				"@typescript-eslint/parser": "^5.45.0",
@@ -927,9 +929,9 @@
 			}
 		},
 		"node_modules/@skeletonlabs/skeleton": {
-			"version": "1.12.0",
-			"resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-1.12.0.tgz",
-			"integrity": "sha512-NCGy6WT3LUqu6EaFEG7J6lFQNB/DHlqFQpXMWkSpwdZIZ005OEVoZznNgdATYdTet++nS6LymBGVUQK00z82gw==",
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-2.1.0.tgz",
+			"integrity": "sha512-i+H67MTo9w3BP8dqr0l9qjVWmxEDwLyTqif/+pTmTOpAZpV/B3wqHShtoh0sxminUBSncE3bsNdn694B+6zUnw==",
 			"dev": true,
 			"dependencies": {
 				"esm-env": "1.0.0"
@@ -938,6 +940,15 @@
 				"svelte": "^3.56.0 || ^4.0.0"
 			}
 		},
+		"node_modules/@skeletonlabs/tw-plugin": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/@skeletonlabs/tw-plugin/-/tw-plugin-0.2.0.tgz",
+			"integrity": "sha512-Mtao12JMrmlYvhv9AfvKNBd5qz+v5MImMG9tri++/4FUORAmzB3F3Qq9+ukfdDtoPT/+Q1CRPn1CL05gDxsKSQ==",
+			"dev": true,
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0"
+			}
+		},
 		"node_modules/@socket.io/component-emitter": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
@@ -1087,9 +1098,9 @@
 			"dev": true
 		},
 		"node_modules/@types/node": {
-			"version": "20.5.4",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.4.tgz",
-			"integrity": "sha512-Y9vbIAoM31djQZrPYjpTLo0XlaSwOIsrlfE3LpulZeRblttsLQRFRlBAppW0LOxyT3ALj2M5vU1ucQQayQH3jA==",
+			"version": "20.6.3",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.3.tgz",
+			"integrity": "sha512-HksnYH4Ljr4VQgEy2lTStbCKv/P590tmPe5HqOnv9Gprffgv5WXAY+Y5Gqniu0GGqeTCUdBnzC3QSrzPkBkAMA==",
 			"dev": true
 		},
 		"node_modules/@types/offscreencanvas": {
--- a/package.json
+++ b/package.json
@@ -16,13 +16,15 @@
 	"devDependencies": {
 		"@faker-js/faker": "^8.0.2",
 		"@playwright/test": "^1.28.1",
-		"@skeletonlabs/skeleton": "^1.9.0",
+		"@skeletonlabs/skeleton": "^2.1.0",
+		"@skeletonlabs/tw-plugin": "^0.2.0",
 		"@sveltejs/adapter-auto": "^2.1.0",
 		"@sveltejs/adapter-cloudflare": "^2.3.0",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.21.0",
 		"@tailwindcss/forms": "^0.5.3",
 		"@types/dompurify": "^3.0.2",
+		"@types/node": "^20.6.3",
 		"@types/qrcode": "^1.5.1",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
--- a/src/app.html
+++ b/src/app.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon-256.png" />
@@ -8,7 +8,7 @@
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
+	<body data-sveltekit-preload-data="hover" data-theme="discreetly-theme">
 		<div>%sveltekit.body%</div>
 	</body>
 </html>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import { AppShell, Modal } from '@skeletonlabs/skeleton';
+	import { AppShell, Modal, initializeStores } from '@skeletonlabs/skeleton';
 	import { Toast } from '@skeletonlabs/skeleton';
-	import '../theme.postcss';
-	import '@skeletonlabs/skeleton/styles/skeleton.css';
 	import '../app.postcss';
 	import { onMount } from 'svelte';
 	import AppHeader from './AppHeader.svelte';
@@ -13,7 +11,9 @@
 	import { Drawer } from '@skeletonlabs/skeleton';
 	import SelectServer from '$lib/components/SelectServer.svelte';
 	import SelectRoom from '$lib/components/SelectRoom.svelte';
-	export const ssr = false;
+
+	initializeStores();
+
 	// Hack to get BigInt <-> JSON compatibility
 	(BigInt.prototype as any).toJSON = function () {
 		return this.toString();
--- a/src/routes/chat/ChatRoom.svelte
+++ b/src/routes/chat/ChatRoom.svelte
@@ -152,6 +152,8 @@
 				toastStore.trigger({ message: data, timeout: 3000 });
 				console.debug('Received System Message: ', data);
 			});
+
+			scrollChatToBottom();
 		});

 		setInterval(() => {
--- a/src/theme.postcss
+++ b/src/theme.postcss
@@ -1,8 +1,10 @@
-
 :root {
 	/* =~= Theme Properties =~= */
-	--theme-font-family-base: 'Space Grotesk', 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: 'Nippo', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+	--theme-font-family-base: 'Space Grotesk', 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: 'Nippo', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+		'Liberation Mono', 'Courier New', monospace;
 	--theme-font-color-base: var(--color-surface-900);
 	--theme-font-color-dark: var(--color-surface-50);
 	--theme-rounded-base: 4px;
@@ -21,7 +23,7 @@
 	--color-primary-50: 254 231 231; /* ⬅ #fee7e7 */
 	--color-primary-100: 254 223 223; /* ⬅ #fedfdf */
 	--color-primary-200: 254 215 215; /* ⬅ #fed7d7 */
-	--color-primary-300: 253 191 191; /* ⬅ #fdbfbf */
+	--color-primary-299: 253 191 191; /* ⬅ #fdbfbf */
 	--color-primary-400: 252 143 143; /* ⬅ #fc8f8f */
 	--color-primary-500: 250 95 95; /* ⬅ #fa5f5f */
 	--color-primary-600: 225 86 86; /* ⬅ #e15656 */
@@ -94,5 +96,4 @@
 	--color-surface-700: 33 39 39; /* ⬅ #212727 */
 	--color-surface-800: 26 31 31; /* ⬅ #1a1f1f */
 	--color-surface-900: 22 25 25; /* ⬅ #161919 */
-
-}
+}
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,21 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-	// 1. Apply the dark mode class setting:
-	darkMode: 'class',
-	content: [
-		'./src/**/*.{html,js,svelte,ts}',
-		// 2. Append the path for the Skeleton NPM package and files:
-		require('path').join(require.resolve(
-			'@skeletonlabs/skeleton'),
-			'../**/*.{html,js,svelte,ts}'
-		)
-	],
-	theme: {
-		extend: {},
-	},
-	plugins: [
-		require('@tailwindcss/forms'),
-		// 3. Append the Skeleton plugin to the end of this list
-		...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()
-	]
-}
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -0,0 +1,22 @@
+import { join } from 'path';
+import type { Config } from 'tailwindcss';
+import { discreetlyTheme } from './theme';
+import { skeleton } from '@skeletonlabs/tw-plugin';
+
+const config = {
+	darkMode: 'class',
+	content: [
+		'./src/**/*.{html,js,svelte,ts}',
+		join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
+	],
+	theme: {
+		extend: {}
+	},
+	plugins: [
+		skeleton({
+			themes: { custom: [discreetlyTheme] }
+		})
+	]
+} satisfies Config;
+
+export default config;
--- a/theme.ts
+++ b/theme.ts
@@ -0,0 +1,93 @@
+import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
+
+export const discreetlyTheme: CustomThemeConfig = {
+	name: 'discreetly-theme',
+	properties: {
+		'--theme-font-family-base':
+			"'Space Grotesk', 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':
+			'\'Nippo\', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+		'--theme-font-color-base': 'var(--color-surface-900)',
+		'--theme-font-color-dark': 'var(--color-surface-50)',
+		'--theme-rounded-base': '4px',
+		'--theme-rounded-container': '6px',
+		'--theme-border-base': '1px',
+		'--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',
+		'--color-primary-50': '254 231 231',
+		'--color-primary-100': '254 223 223',
+		'--color-primary-200': '254 215 215',
+		'--color-primary-300': '253 191 191',
+		'--color-primary-400': '252 143 143',
+		'--color-primary-500': '250 95 95',
+		'--color-primary-600': '225 86 86',
+		'--color-primary-700': '188 71 71',
+		'--color-primary-800': '150 57 57',
+		'--color-primary-900': '123 47 47',
+		'--color-secondary-50': '240 244 244',
+		'--color-secondary-100': '235 240 241',
+		'--color-secondary-200': '230 237 237',
+		'--color-secondary-300': '214 225 227',
+		'--color-secondary-400': '184 203 205',
+		'--color-secondary-500': '153 181 184',
+		'--color-secondary-600': '138 163 166',
+		'--color-secondary-700': '115 136 138',
+		'--color-secondary-800': '92 109 110',
+		'--color-secondary-900': '75 89 90',
+		'--color-tertiary-50': '220 237 239',
+		'--color-tertiary-100': '208 231 233',
+		'--color-tertiary-200': '197 226 228',
+		'--color-tertiary-300': '161 208 212',
+		'--color-tertiary-400': '91 172 179',
+		'--color-tertiary-500': '21 137 147',
+		'--color-tertiary-600': '19 123 132',
+		'--color-tertiary-700': '16 103 110',
+		'--color-tertiary-800': '13 82 88',
+		'--color-tertiary-900': '10 67 72',
+		'--color-success-50': '227 241 232',
+		'--color-success-100': '218 236 224',
+		'--color-success-200': '209 232 216',
+		'--color-success-300': '181 217 193',
+		'--color-success-400': '125 189 147',
+		'--color-success-500': '69 161 100',
+		'--color-success-600': '62 145 90',
+		'--color-success-700': '52 121 75',
+		'--color-success-800': '41 97 60',
+		'--color-success-900': '34 79 49',
+		'--color-warning-50': '248 244 231',
+		'--color-warning-100': '246 240 222',
+		'--color-warning-200': '244 236 214',
+		'--color-warning-300': '237 225 190',
+		'--color-warning-400': '224 203 141',
+		'--color-warning-500': '210 180 92',
+		'--color-warning-600': '189 162 83',
+		'--color-warning-700': '158 135 69',
+		'--color-warning-800': '126 108 55',
+		'--color-warning-900': '103 88 45',
+		'--color-error-50': '254 231 231',
+		'--color-error-100': '254 223 223',
+		'--color-error-200': '254 215 215',
+		'--color-error-300': '253 191 191',
+		'--color-error-400': '252 143 143',
+		'--color-error-500': '250 95 95',
+		'--color-error-600': '225 86 86',
+		'--color-error-700': '188 71 71',
+		'--color-error-800': '150 57 57',
+		'--color-error-900': '123 47 47',
+		'--color-surface-50': '223 225 225',
+		'--color-surface-100': '213 214 214',
+		'--color-surface-200': '202 204 204',
+		'--color-surface-300': '171 174 174',
+		'--color-surface-400': '107 113 113',
+		'--color-surface-500': '44 52 52',
+		'--color-surface-600': '40 47 47',
+		'--color-surface-700': '33 39 39',
+		'--color-surface-800': '26 31 31',
+		'--color-surface-900': '22 25 25'
+	}
+};