Skip to content

Commit 38da6eb

Browse files
AtHeartEngineerAtHeartEngineer
committed
chore(ui framework) migrated skeleton to v2
1 parent 5c912ce commit 38da6eb

9 files changed

+151
-41
lines changed

‎package-lock.json

+18-7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,15 @@
1616
"devDependencies": {
1717
"@faker-js/faker": "^8.0.2",
1818
"@playwright/test": "^1.28.1",
19-
"@skeletonlabs/skeleton": "^1.9.0",
19+
"@skeletonlabs/skeleton": "^2.1.0",
20+
"@skeletonlabs/tw-plugin": "^0.2.0",
2021
"@sveltejs/adapter-auto": "^2.1.0",
2122
"@sveltejs/adapter-cloudflare": "^2.3.0",
2223
"@sveltejs/adapter-static": "^2.0.3",
2324
"@sveltejs/kit": "^1.21.0",
2425
"@tailwindcss/forms": "^0.5.3",
2526
"@types/dompurify": "^3.0.2",
27+
"@types/node": "^20.6.3",
2628
"@types/qrcode": "^1.5.1",
2729
"@typescript-eslint/eslint-plugin": "^5.45.0",
2830
"@typescript-eslint/parser": "^5.45.0",

‎src/app.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" class="dark">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/favicon-256.png" />
@@ -8,7 +8,7 @@
88
<meta name="viewport" content="width=device-width" />
99
%sveltekit.head%
1010
</head>
11-
<body data-sveltekit-preload-data="hover">
11+
<body data-sveltekit-preload-data="hover" data-theme="discreetly-theme">
1212
<div>%sveltekit.body%</div>
1313
</body>
1414
</html>

‎src/routes/+layout.svelte

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<script lang="ts">
2-
import { AppShell, Modal } from '@skeletonlabs/skeleton';
2+
import { AppShell, Modal, initializeStores } from '@skeletonlabs/skeleton';
33
import { Toast } from '@skeletonlabs/skeleton';
4-
import '../theme.postcss';
5-
import '@skeletonlabs/skeleton/styles/skeleton.css';
64
import '../app.postcss';
75
import { onMount } from 'svelte';
86
import AppHeader from './AppHeader.svelte';
@@ -13,7 +11,9 @@
1311
import { Drawer } from '@skeletonlabs/skeleton';
1412
import SelectServer from '$lib/components/SelectServer.svelte';
1513
import SelectRoom from '$lib/components/SelectRoom.svelte';
16-
export const ssr = false;
14+
15+
initializeStores();
16+
1717
// Hack to get BigInt <-> JSON compatibility
1818
(BigInt.prototype as any).toJSON = function () {
1919
return this.toString();

‎src/routes/chat/ChatRoom.svelte

+2
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,8 @@
152152
toastStore.trigger({ message: data, timeout: 3000 });
153153
console.debug('Received System Message: ', data);
154154
});
155+
156+
scrollChatToBottom();
155157
});
156158
157159
setInterval(() => {

‎src/theme.postcss

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
21
:root {
32
/* =~= Theme Properties =~= */
4-
--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';
5-
--theme-font-family-heading: 'Nippo', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
3+
--theme-font-family-base: 'Space Grotesk', Inter, ui-sans-serif, system-ui, -apple-system,
4+
BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
5+
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
6+
--theme-font-family-heading: 'Nippo', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
7+
'Liberation Mono', 'Courier New', monospace;
68
--theme-font-color-base: var(--color-surface-900);
79
--theme-font-color-dark: var(--color-surface-50);
810
--theme-rounded-base: 4px;
@@ -21,7 +23,7 @@
2123
--color-primary-50: 254 231 231; /* ⬅ #fee7e7 */
2224
--color-primary-100: 254 223 223; /* ⬅ #fedfdf */
2325
--color-primary-200: 254 215 215; /* ⬅ #fed7d7 */
24-
--color-primary-300: 253 191 191; /* ⬅ #fdbfbf */
26+
--color-primary-299: 253 191 191; /* ⬅ #fdbfbf */
2527
--color-primary-400: 252 143 143; /* ⬅ #fc8f8f */
2628
--color-primary-500: 250 95 95; /* ⬅ #fa5f5f */
2729
--color-primary-600: 225 86 86; /* ⬅ #e15656 */
@@ -94,5 +96,4 @@
9496
--color-surface-700: 33 39 39; /* ⬅ #212727 */
9597
--color-surface-800: 26 31 31; /* ⬅ #1a1f1f */
9698
--color-surface-900: 22 25 25; /* ⬅ #161919 */
97-
98-
}
99+
}

‎tailwind.config.cjs

-21
This file was deleted.

‎tailwind.config.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { join } from 'path';
2+
import type { Config } from 'tailwindcss';
3+
import { discreetlyTheme } from './theme';
4+
import { skeleton } from '@skeletonlabs/tw-plugin';
5+
6+
const config = {
7+
darkMode: 'class',
8+
content: [
9+
'./src/**/*.{html,js,svelte,ts}',
10+
join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
11+
],
12+
theme: {
13+
extend: {}
14+
},
15+
plugins: [
16+
skeleton({
17+
themes: { custom: [discreetlyTheme] }
18+
})
19+
]
20+
} satisfies Config;
21+
22+
export default config;

‎theme.ts

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
2+
3+
export const discreetlyTheme: CustomThemeConfig = {
4+
name: 'discreetly-theme',
5+
properties: {
6+
'--theme-font-family-base':
7+
"'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'",
8+
'--theme-font-family-heading':
9+
'\'Nippo\', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
10+
'--theme-font-color-base': 'var(--color-surface-900)',
11+
'--theme-font-color-dark': 'var(--color-surface-50)',
12+
'--theme-rounded-base': '4px',
13+
'--theme-rounded-container': '6px',
14+
'--theme-border-base': '1px',
15+
'--on-primary': '0 0 0',
16+
'--on-secondary': '255 255 255',
17+
'--on-tertiary': '0 0 0',
18+
'--on-success': '0 0 0',
19+
'--on-warning': '0 0 0',
20+
'--on-error': '255 255 255',
21+
'--on-surface': '255 255 255',
22+
'--color-primary-50': '254 231 231',
23+
'--color-primary-100': '254 223 223',
24+
'--color-primary-200': '254 215 215',
25+
'--color-primary-300': '253 191 191',
26+
'--color-primary-400': '252 143 143',
27+
'--color-primary-500': '250 95 95',
28+
'--color-primary-600': '225 86 86',
29+
'--color-primary-700': '188 71 71',
30+
'--color-primary-800': '150 57 57',
31+
'--color-primary-900': '123 47 47',
32+
'--color-secondary-50': '240 244 244',
33+
'--color-secondary-100': '235 240 241',
34+
'--color-secondary-200': '230 237 237',
35+
'--color-secondary-300': '214 225 227',
36+
'--color-secondary-400': '184 203 205',
37+
'--color-secondary-500': '153 181 184',
38+
'--color-secondary-600': '138 163 166',
39+
'--color-secondary-700': '115 136 138',
40+
'--color-secondary-800': '92 109 110',
41+
'--color-secondary-900': '75 89 90',
42+
'--color-tertiary-50': '220 237 239',
43+
'--color-tertiary-100': '208 231 233',
44+
'--color-tertiary-200': '197 226 228',
45+
'--color-tertiary-300': '161 208 212',
46+
'--color-tertiary-400': '91 172 179',
47+
'--color-tertiary-500': '21 137 147',
48+
'--color-tertiary-600': '19 123 132',
49+
'--color-tertiary-700': '16 103 110',
50+
'--color-tertiary-800': '13 82 88',
51+
'--color-tertiary-900': '10 67 72',
52+
'--color-success-50': '227 241 232',
53+
'--color-success-100': '218 236 224',
54+
'--color-success-200': '209 232 216',
55+
'--color-success-300': '181 217 193',
56+
'--color-success-400': '125 189 147',
57+
'--color-success-500': '69 161 100',
58+
'--color-success-600': '62 145 90',
59+
'--color-success-700': '52 121 75',
60+
'--color-success-800': '41 97 60',
61+
'--color-success-900': '34 79 49',
62+
'--color-warning-50': '248 244 231',
63+
'--color-warning-100': '246 240 222',
64+
'--color-warning-200': '244 236 214',
65+
'--color-warning-300': '237 225 190',
66+
'--color-warning-400': '224 203 141',
67+
'--color-warning-500': '210 180 92',
68+
'--color-warning-600': '189 162 83',
69+
'--color-warning-700': '158 135 69',
70+
'--color-warning-800': '126 108 55',
71+
'--color-warning-900': '103 88 45',
72+
'--color-error-50': '254 231 231',
73+
'--color-error-100': '254 223 223',
74+
'--color-error-200': '254 215 215',
75+
'--color-error-300': '253 191 191',
76+
'--color-error-400': '252 143 143',
77+
'--color-error-500': '250 95 95',
78+
'--color-error-600': '225 86 86',
79+
'--color-error-700': '188 71 71',
80+
'--color-error-800': '150 57 57',
81+
'--color-error-900': '123 47 47',
82+
'--color-surface-50': '223 225 225',
83+
'--color-surface-100': '213 214 214',
84+
'--color-surface-200': '202 204 204',
85+
'--color-surface-300': '171 174 174',
86+
'--color-surface-400': '107 113 113',
87+
'--color-surface-500': '44 52 52',
88+
'--color-surface-600': '40 47 47',
89+
'--color-surface-700': '33 39 39',
90+
'--color-surface-800': '26 31 31',
91+
'--color-surface-900': '22 25 25'
92+
}
93+
};

0 commit comments

Comments
 (0)