Env: Replace daisyui with skeletonui
This commit is contained in:
1003
package-lock.json
generated
1003
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
22
package.json
22
package.json
@ -10,22 +10,26 @@
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@skeletonlabs/skeleton": "^2.10.3",
|
||||
"@skeletonlabs/tw-plugin": "^0.4.0",
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@sveltejs/kit": "^2.9.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.1.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^6.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/forms": "^0.5.9",
|
||||
"@types/node": "^22.10.2",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"daisyui": "^4.12.20",
|
||||
"pocketbase": "^0.22.1",
|
||||
"postcss": "^8.4.49",
|
||||
"prettier": "^3.4.2",
|
||||
"prettier-plugin-svelte": "^3.3.2",
|
||||
"prettier-plugin-tailwindcss": "^0.6.9",
|
||||
"tailwindcss": "^3.4.16"
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.1.1",
|
||||
"tailwindcss": "^3.4.16",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^6.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.6.12",
|
||||
"pocketbase": "^0.22.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
</head>
|
||||
|
||||
<!-- Prefetch data specified in "load" functions on link hover -->
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<body data-theme="formula11Theme" data-sveltekit-preload-data="hover">
|
||||
<!-- SvelteKit inserts the body contents here -->
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
import daisyui from "daisyui";
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./src/**/*.{html,js,svelte,ts}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [daisyui],
|
||||
daisyui: {
|
||||
logs: false,
|
||||
themes: [
|
||||
{
|
||||
formula11: {
|
||||
primary: "#F8D7DA",
|
||||
secondary: "#FFF3CD",
|
||||
accent: "#D1E7DD",
|
||||
neutral: "#E8E8E8",
|
||||
error: "#DC3545",
|
||||
warning: "#FFC107",
|
||||
success: "#198754",
|
||||
"base-100": "#FFFFFF",
|
||||
|
||||
"--rounded-box": "1rem", // border radius rounded-box utility class, used in card and other large boxes
|
||||
"--rounded-btn": "0.35rem", // border radius rounded-btn utility class, used in buttons and similar element
|
||||
"--rounded-badge": "1.9rem", // border radius rounded-badge utility class, used in badges and similar
|
||||
"--animation-btn": "0.25s", // duration of animation when you click on button
|
||||
"--animation-input": "0.2s", // duration of animation for inputs like checkbox, toggle, radio, etc
|
||||
"--btn-focus-scale": "0.95", // scale transform of button when you focus on it
|
||||
"--border-btn": "1px", // border width of buttons
|
||||
"--tab-border": "1px", // border width of tabs
|
||||
"--tab-radius": "0.5rem", // border radius of tabs
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
28
tailwind.config.ts
Normal file
28
tailwind.config.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
import { skeleton } from "@skeletonlabs/tw-plugin";
|
||||
import { join } from "path";
|
||||
import { formula11Theme } from "./tailwind.formula11";
|
||||
import forms from "@tailwindcss/forms";
|
||||
|
||||
const config = {
|
||||
content: [
|
||||
"./src/**/*.{html,js,svelte,ts}",
|
||||
join(
|
||||
require.resolve("@skeletonlabs/skeleton"),
|
||||
"../**/*.{html,js,svelte,ts}",
|
||||
),
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [
|
||||
forms,
|
||||
skeleton({
|
||||
themes: {
|
||||
custom: [formula11Theme],
|
||||
},
|
||||
}),
|
||||
],
|
||||
} satisfies Config;
|
||||
|
||||
export default config;
|
||||
101
tailwind.formula11.ts
Normal file
101
tailwind.formula11.ts
Normal file
@ -0,0 +1,101 @@
|
||||
import type { CustomThemeConfig } from "@skeletonlabs/tw-plugin";
|
||||
|
||||
export const formula11Theme: CustomThemeConfig = {
|
||||
name: "formula11Theme",
|
||||
properties: {
|
||||
// =~= Theme Properties =~=
|
||||
"--theme-font-family-base": `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": `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": "0 0 0",
|
||||
"--theme-font-color-dark": "255 255 255",
|
||||
"--theme-rounded-base": "8px",
|
||||
"--theme-rounded-container": "8px",
|
||||
"--theme-border-base": "1px",
|
||||
// =~= Theme On-X Colors =~=
|
||||
"--on-primary": "0 0 0",
|
||||
"--on-secondary": "0 0 0",
|
||||
"--on-tertiary": "0 0 0",
|
||||
"--on-success": "var(--color-primary-50)",
|
||||
"--on-warning": "0 0 0",
|
||||
"--on-error": "255 255 255",
|
||||
"--on-surface": "0 0 0",
|
||||
// =~= Theme Colors =~=
|
||||
// primary | #F8D7DA
|
||||
"--color-primary-50": "254 249 249", // #fef9f9
|
||||
"--color-primary-100": "254 247 248", // #fef7f8
|
||||
"--color-primary-200": "253 245 246", // #fdf5f6
|
||||
"--color-primary-300": "252 239 240", // #fceff0
|
||||
"--color-primary-400": "250 227 229", // #fae3e5
|
||||
"--color-primary-500": "248 215 218", // #F8D7DA
|
||||
"--color-primary-600": "223 194 196", // #dfc2c4
|
||||
"--color-primary-700": "186 161 164", // #baa1a4
|
||||
"--color-primary-800": "149 129 131", // #958183
|
||||
"--color-primary-900": "122 105 107", // #7a696b
|
||||
// secondary | #FFF3CD
|
||||
"--color-secondary-50": "255 253 248", // #fffdf8
|
||||
"--color-secondary-100": "255 253 245", // #fffdf5
|
||||
"--color-secondary-200": "255 252 243", // #fffcf3
|
||||
"--color-secondary-300": "255 250 235", // #fffaeb
|
||||
"--color-secondary-400": "255 247 220", // #fff7dc
|
||||
"--color-secondary-500": "255 243 205", // #FFF3CD
|
||||
"--color-secondary-600": "230 219 185", // #e6dbb9
|
||||
"--color-secondary-700": "191 182 154", // #bfb69a
|
||||
"--color-secondary-800": "153 146 123", // #99927b
|
||||
"--color-secondary-900": "125 119 100", // #7d7764
|
||||
// tertiary | #D1E7DD
|
||||
"--color-tertiary-50": "248 251 250", // #f8fbfa
|
||||
"--color-tertiary-100": "246 250 248", // #f6faf8
|
||||
"--color-tertiary-200": "244 249 247", // #f4f9f7
|
||||
"--color-tertiary-300": "237 245 241", // #edf5f1
|
||||
"--color-tertiary-400": "223 238 231", // #dfeee7
|
||||
"--color-tertiary-500": "209 231 221", // #D1E7DD
|
||||
"--color-tertiary-600": "188 208 199", // #bcd0c7
|
||||
"--color-tertiary-700": "157 173 166", // #9dada6
|
||||
"--color-tertiary-800": "125 139 133", // #7d8b85
|
||||
"--color-tertiary-900": "102 113 108", // #66716c
|
||||
// success | #198754
|
||||
"--color-success-50": "221 237 229", // #ddede5
|
||||
"--color-success-100": "209 231 221", // #d1e7dd
|
||||
"--color-success-200": "198 225 212", // #c6e1d4
|
||||
"--color-success-300": "163 207 187", // #a3cfbb
|
||||
"--color-success-400": "94 171 135", // #5eab87
|
||||
"--color-success-500": "25 135 84", // #198754
|
||||
"--color-success-600": "23 122 76", // #177a4c
|
||||
"--color-success-700": "19 101 63", // #13653f
|
||||
"--color-success-800": "15 81 50", // #0f5132
|
||||
"--color-success-900": "12 66 41", // #0c4229
|
||||
// warning | #FFC107
|
||||
"--color-warning-50": "255 246 218", // #fff6da
|
||||
"--color-warning-100": "255 243 205", // #fff3cd
|
||||
"--color-warning-200": "255 240 193", // #fff0c1
|
||||
"--color-warning-300": "255 230 156", // #ffe69c
|
||||
"--color-warning-400": "255 212 81", // #ffd451
|
||||
"--color-warning-500": "255 193 7", // #FFC107
|
||||
"--color-warning-600": "230 174 6", // #e6ae06
|
||||
"--color-warning-700": "191 145 5", // #bf9105
|
||||
"--color-warning-800": "153 116 4", // #997404
|
||||
"--color-warning-900": "125 95 3", // #7d5f03
|
||||
// error | #DC3545
|
||||
"--color-error-50": "250 225 227", // #fae1e3
|
||||
"--color-error-100": "248 215 218", // #f8d7da
|
||||
"--color-error-200": "246 205 209", // #f6cdd1
|
||||
"--color-error-300": "241 174 181", // #f1aeb5
|
||||
"--color-error-400": "231 114 125", // #e7727d
|
||||
"--color-error-500": "220 53 69", // #DC3545
|
||||
"--color-error-600": "198 48 62", // #c6303e
|
||||
"--color-error-700": "165 40 52", // #a52834
|
||||
"--color-error-800": "132 32 41", // #842029
|
||||
"--color-error-900": "108 26 34", // #6c1a22
|
||||
// surface | #DDDDDD
|
||||
"--color-surface-50": "250 250 250", // #fafafa
|
||||
"--color-surface-100": "248 248 248", // #f8f8f8
|
||||
"--color-surface-200": "247 247 247", // #f7f7f7
|
||||
"--color-surface-300": "241 241 241", // #f1f1f1
|
||||
"--color-surface-400": "231 231 231", // #e7e7e7
|
||||
"--color-surface-500": "221 221 221", // #DDDDDD
|
||||
"--color-surface-600": "199 199 199", // #c7c7c7
|
||||
"--color-surface-700": "166 166 166", // #a6a6a6
|
||||
"--color-surface-800": "133 133 133", // #858585
|
||||
"--color-surface-900": "108 108 108", // #6c6c6c
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user