mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-04-26 17:11:21 +00:00
Merge pull request #118 from bartvdbraak/renovate/skeletonlabs-skeleton-2.x
chore(deps): update dependency @skeletonlabs/skeleton to v2
This commit is contained in:
GitHub
commit
0fd976f776
10 changed files with 238 additions and 135 deletions
|
|
@ -13,9 +13,11 @@
|
|||
"prepare": "npx husky install"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@skeletonlabs/skeleton": "^1.10.0",
|
||||
"@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": {
|
||||
|
|
|
|||
|
|
@ -35,14 +35,20 @@ dependencies:
|
|||
|
||||
devDependencies:
|
||||
'@skeletonlabs/skeleton':
|
||||
specifier: ^1.10.0
|
||||
version: 1.10.0(svelte@4.1.0)
|
||||
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:
|
||||
|
||||
|
|
@ -422,8 +431,8 @@ packages:
|
|||
resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
|
||||
dev: true
|
||||
|
||||
/@skeletonlabs/skeleton@1.10.0(svelte@4.1.0):
|
||||
resolution: {integrity: sha512-6Cy1dzF6b2tMGxjFe60WOulN53tfvWMH+SDYoPMzNsRoa20vjlBMjLInWPJGn4dMuSJMiDrR9apniv16m0c9Rg==}
|
||||
/@skeletonlabs/skeleton@2.0.0(svelte@4.1.0):
|
||||
resolution: {integrity: sha512-8SaDK3kEUU57cSb/5a984EbINgnOPzShlkwPkduAhqc71SEqhRvx+RlLEpe1174NAYi00oi//LguIAYuVrSfBA==}
|
||||
peerDependencies:
|
||||
svelte: ^3.56.0 || ^4.0.0
|
||||
dependencies:
|
||||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<title></title>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<body data-sveltekit-preload-data="hover" data-theme="theme">
|
||||
<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@tailwind variants;
|
||||
|
||||
html,
|
||||
body {
|
||||
@apply h-full overflow-hidden;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
<script lang="ts">
|
||||
import { AppBar, LightSwitch, ProgressBar, drawerStore } from '@skeletonlabs/skeleton';
|
||||
import { AppBar, LightSwitch, ProgressBar } from '@skeletonlabs/skeleton';
|
||||
import { getDrawerStore, type DrawerSettings } from '@skeletonlabs/skeleton';
|
||||
import GitHub from './icons/GitHub.svelte';
|
||||
import Hamburger from './icons/Hamburger.svelte';
|
||||
import LinkedIn from './icons/LinkedIn.svelte';
|
||||
import routes from '$lib/routes';
|
||||
import { page } from '$app/stores';
|
||||
$: classesActive = (href: string) => (href === $page.url.pathname ? 'underline' : '');
|
||||
const drawerStore = getDrawerStore();
|
||||
export let progress: number;
|
||||
|
||||
function drawerOpen(): void {
|
||||
drawerStore.open();
|
||||
$: classesActive = (href: string) => (href === $page.url.pathname ? 'underline' : '');
|
||||
|
||||
function trigger(position: 'right'): void {
|
||||
const s: DrawerSettings = { id: 'navigation', position };
|
||||
drawerStore.open(s);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -59,7 +63,9 @@
|
|||
<button
|
||||
aria-label="Toggle navigation menu"
|
||||
class="btn-icon btn-icon-sm hover:variant-soft-primary md:hidden"
|
||||
on:click={drawerOpen}
|
||||
on:click={() => {
|
||||
trigger('right');
|
||||
}}
|
||||
>
|
||||
<Hamburger />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,27 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import type { Route } from '$lib/routes';
|
||||
import { drawerStore } from '@skeletonlabs/skeleton';
|
||||
import { getDrawerStore } from '@skeletonlabs/skeleton';
|
||||
const drawerStore = getDrawerStore();
|
||||
|
||||
$: classesActive = (href: string) =>
|
||||
href === $page.url.pathname ? '!bg-primary-500 text-indigo-100' : '';
|
||||
href === $page.url.pathname ? '!bg-secondary-500 text-indigo-100' : '';
|
||||
|
||||
export let routes: Route[];
|
||||
|
||||
function drawerClose(): void {
|
||||
drawerStore.close();
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav class="list-nav">
|
||||
<ul>
|
||||
{#each routes as route}
|
||||
<li class="mb-2">
|
||||
<a class={classesActive(route.url)} href={route.url} on:click={drawerClose}>
|
||||
<span class="badge bg-primary-500"
|
||||
<a
|
||||
class={classesActive(route.url)}
|
||||
href={route.url}
|
||||
on:click={() => {
|
||||
drawerStore.close();
|
||||
}}
|
||||
>
|
||||
<span class="badge bg-secondary-500"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
|
|
@ -33,7 +37,7 @@
|
|||
>
|
||||
<span class="flex-auto">{route.label}</span>
|
||||
</a>
|
||||
</li>{/each}
|
||||
<!-- ... -->
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<script lang="ts">
|
||||
// import '@skeletonlabs/skeleton/themes/theme-crimson.css';
|
||||
import '../theme.postcss';
|
||||
import '@skeletonlabs/skeleton/styles/skeleton.css';
|
||||
import { Drawer, AppShell, initializeStores } from '@skeletonlabs/skeleton';
|
||||
initializeStores();
|
||||
import '../app.postcss';
|
||||
import { AppShell, Drawer } from '@skeletonlabs/skeleton';
|
||||
import Footer from '../lib/components/Footer.svelte';
|
||||
import Navigation from '../lib/components/Navigation.svelte';
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
|
|
@ -37,7 +35,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Drawer width="w-[280px] md:w-[200px]" position="right" bgDrawer="bg-gray-200 dark:bg-gray-800">
|
||||
<Drawer width="w-[280px] md:w-[200px]" position="right" bgDrawer="bg-black/30 backdrop-blur">
|
||||
<div class="p-5 w-full mx-auto">
|
||||
<h2 class="text-3xl font-bold mb-12 z-10 text-center">Pages</h2>
|
||||
<Navigation {routes} />
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
}
|
||||
|
|
@ -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;
|
||||
101
theme.ts
Normal file
101
theme.ts
Normal file
|
|
@ -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
|
||||
}
|
||||
};
|
||||
Loading…
Reference in a new issue