diff --git a/website/components.json b/website/components.json index f5e3a96a1..b61120517 100644 --- a/website/components.json +++ b/website/components.json @@ -1,17 +1,20 @@ { - "$schema": "https://shadcn-svelte.com/schema.json", - "style": "default", - "tailwind": { - "css": "src/app.css", - "baseColor": "slate" - }, - "aliases": { - "components": "$lib/components", - "utils": "$lib/utils", - "ui": "$lib/components/ui", - "hooks": "$lib/hooks", - "lib": "$lib" - }, - "typescript": true, - "registry": "https://shadcn-svelte.com/registry" + "$schema": "https://shadcn-svelte.com/schema.json", + "tailwind": { + "css": "src/app.css", + "baseColor": "neutral" + }, + "aliases": { + "components": "$lib/components", + "utils": "$lib/utils", + "ui": "$lib/components/ui", + "hooks": "$lib/hooks", + "lib": "$lib" + }, + "typescript": true, + "registry": "https://shadcn-svelte.com/registry", + "style": "nova", + "iconLibrary": "lucide", + "menuColor": "default", + "menuAccent": "subtle" } diff --git a/website/package-lock.json b/website/package-lock.json index 4df98f70a..b04c1a725 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -14,7 +14,6 @@ "@maplibre/maplibre-gl-geocoder": "^1.9.4", "chart.js": "^4.5.1", "chartjs-plugin-zoom": "^2.2.0", - "clsx": "^2.1.1", "dexie": "^4.0.11", "file-saver": "^2.0.5", "gpx": "file:../gpx", @@ -23,12 +22,12 @@ "mapillary-js": "^4.1.2", "maplibre-gl": "^5.21.1", "sanitize-html": "^2.17.0", - "sortablejs": "^1.15.6", - "tailwind-merge": "^3.3.0" + "sortablejs": "^1.15.6" }, "devDependencies": { + "@fontsource-variable/inter": "^5.2.8", "@internationalized/date": "^3.12.0", - "@lucide/svelte": "^0.544.0", + "@lucide/svelte": "^1.7.0", "@sveltejs/adapter-static": "^3.0.8", "@sveltejs/enhanced-img": "^0.6.0", "@sveltejs/kit": "^2.21.2", @@ -45,6 +44,7 @@ "@typescript-eslint/eslint-plugin": "^8.33.1", "@typescript-eslint/parser": "^8.33.1", "bits-ui": "^2.17.2", + "clsx": "^2.1.1", "eslint": "^9.28.0", "eslint-config-prettier": "^10.1.5", "eslint-plugin-svelte": "^3.9.1", @@ -57,15 +57,17 @@ "postcss": "^8.4.47", "prettier": "^3.5.3", "prettier-plugin-svelte": "^3.4.0", + "shadcn-svelte": "^1.2.7", "svelte": "^5.33.18", "svelte-check": "^4.0.0", "svelte-dnd-action": "^0.9.65", - "svelte-sonner": "^1.0.5", - "tailwind-variants": "^3.1.1", + "svelte-sonner": "^1.1.0", + "tailwind-merge": "^3.5.0", + "tailwind-variants": "^3.2.2", "tailwindcss": "^4.1.8", "tslib": "^2.8.1", "tsx": "^4.19.1", - "tw-animate-css": "^1.3.4", + "tw-animate-css": "^1.4.0", "typescript": "^5.8.3", "vaul-svelte": "^1.0.0-next.7", "vite": "^6.3.5" @@ -2567,6 +2569,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@fontsource-variable/inter": { + "version": "5.2.8", + "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.8.tgz", + "integrity": "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==", + "dev": true, + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "dev": true, @@ -3214,9 +3226,9 @@ "license": "MIT" }, "node_modules/@lucide/svelte": { - "version": "0.544.0", - "resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.544.0.tgz", - "integrity": "sha512-9f9O6uxng2pLB01sxNySHduJN3HTl5p0HDu4H26VR51vhZfiMzyOMe9Mhof3XAk4l813eTtl+/DYRvGyoRR+yw==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-1.7.0.tgz", + "integrity": "sha512-YytBKOUBGox7yWcykZnYxOkn5WpR5G1qYXLYXV/j1B79SOTTEKzB+s5yF5Rq9l9OkweDStNH2b4yTqfvhEhV8g==", "dev": true, "license": "ISC", "peerDependencies": { @@ -4726,6 +4738,9 @@ }, "node_modules/clsx": { "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -4751,6 +4766,16 @@ "dev": true, "license": "MIT" }, + "node_modules/commander": { + "version": "14.0.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.3.tgz", + "integrity": "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -6348,6 +6373,13 @@ "version": "0.2.2", "license": "MIT" }, + "node_modules/node-fetch-native": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz", + "integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==", + "dev": true, + "license": "MIT" + }, "node_modules/optionator": { "version": "0.9.4", "dev": true, @@ -6958,6 +6990,25 @@ "version": "1.0.5", "license": "MIT" }, + "node_modules/shadcn-svelte": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/shadcn-svelte/-/shadcn-svelte-1.2.7.tgz", + "integrity": "sha512-mWuQk4H4gtV+J2wJQ7nEPKNnB/v86AALFryZU0SSM7ChHmJJMZ1kH+qIuxYKrXm9vOOOcSWHRsWzPDB71DnjYA==", + "dev": true, + "license": "MIT", + "dependencies": { + "commander": "^14.0.0", + "node-fetch-native": "^1.6.4", + "postcss": "^8.5.5", + "tailwind-merge": "^3.0.0" + }, + "bin": { + "shadcn-svelte": "dist/index.mjs" + }, + "peerDependencies": { + "svelte": "^5.0.0" + } + }, "node_modules/sharp": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz", @@ -7235,6 +7286,8 @@ }, "node_modules/svelte-sonner": { "version": "1.1.0", + "resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-1.1.0.tgz", + "integrity": "sha512-3lYM6ZIqWe+p9vwwWHGWP/ZdvHiUtzURsud2quIxivrX4rvpXh6i+geBGn0m3JS6KwW6W8VgbOl3xQMcDuh6gg==", "dev": true, "license": "MIT", "dependencies": { @@ -7285,6 +7338,9 @@ }, "node_modules/tailwind-merge": { "version": "3.5.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz", + "integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==", + "dev": true, "license": "MIT", "funding": { "type": "github", @@ -7293,6 +7349,8 @@ }, "node_modules/tailwind-variants": { "version": "3.2.2", + "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-3.2.2.tgz", + "integrity": "sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==", "dev": true, "license": "MIT", "engines": { @@ -7392,6 +7450,8 @@ }, "node_modules/tw-animate-css": { "version": "1.4.0", + "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz", + "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==", "dev": true, "license": "MIT", "funding": { diff --git a/website/package.json b/website/package.json index a5110d5f9..36784d0f9 100644 --- a/website/package.json +++ b/website/package.json @@ -14,8 +14,9 @@ "format": "prettier --write . --config ../.prettierrc --ignore-path ../.prettierignore --ignore-path ./.gitignore" }, "devDependencies": { + "@fontsource-variable/inter": "^5.2.8", "@internationalized/date": "^3.12.0", - "@lucide/svelte": "^0.544.0", + "@lucide/svelte": "^1.7.0", "@sveltejs/adapter-static": "^3.0.8", "@sveltejs/enhanced-img": "^0.6.0", "@sveltejs/kit": "^2.21.2", @@ -32,6 +33,7 @@ "@typescript-eslint/eslint-plugin": "^8.33.1", "@typescript-eslint/parser": "^8.33.1", "bits-ui": "^2.17.2", + "clsx": "^2.1.1", "eslint": "^9.28.0", "eslint-config-prettier": "^10.1.5", "eslint-plugin-svelte": "^3.9.1", @@ -44,15 +46,17 @@ "postcss": "^8.4.47", "prettier": "^3.5.3", "prettier-plugin-svelte": "^3.4.0", + "shadcn-svelte": "^1.2.7", "svelte": "^5.33.18", "svelte-check": "^4.0.0", "svelte-dnd-action": "^0.9.65", - "svelte-sonner": "^1.0.5", - "tailwind-variants": "^3.1.1", + "svelte-sonner": "^1.1.0", + "tailwind-merge": "^3.5.0", + "tailwind-variants": "^3.2.2", "tailwindcss": "^4.1.8", "tslib": "^2.8.1", "tsx": "^4.19.1", - "tw-animate-css": "^1.3.4", + "tw-animate-css": "^1.4.0", "typescript": "^5.8.3", "vaul-svelte": "^1.0.0-next.7", "vite": "^6.3.5" @@ -65,7 +69,6 @@ "@maplibre/maplibre-gl-geocoder": "^1.9.4", "chart.js": "^4.5.1", "chartjs-plugin-zoom": "^2.2.0", - "clsx": "^2.1.1", "dexie": "^4.0.11", "file-saver": "^2.0.5", "gpx": "file:../gpx", @@ -74,7 +77,6 @@ "mapillary-js": "^4.1.2", "maplibre-gl": "^5.21.1", "sanitize-html": "^2.17.0", - "sortablejs": "^1.15.6", - "tailwind-merge": "^3.3.0" + "sortablejs": "^1.15.6" } } diff --git a/website/src/app.css b/website/src/app.css index a3300b90e..763088b64 100644 --- a/website/src/app.css +++ b/website/src/app.css @@ -1,76 +1,93 @@ @import 'tailwindcss'; @import 'tw-animate-css'; +@import "shadcn-svelte/tailwind.css"; +@import "@fontsource-variable/inter"; @custom-variant dark (&:is(.dark *)); :root { - --background: hsl(0 0% 100%) /* <- Wrap in HSL */; - --foreground: hsl(240 10% 3.9%); - --muted: hsl(240 4.8% 95.9%); - --muted-foreground: hsl(240 3.8% 46.1%); - --popover: hsl(0 0% 100%); - --popover-foreground: hsl(240 10% 3.9%); - --card: hsl(0 0% 100%); - --card-foreground: hsl(240 10% 3.9%); - --border: hsl(240 5.9% 90%); - --input: hsl(240 5.9% 90%); - --primary: hsl(240 5.9% 10%); - --primary-foreground: hsl(0 0% 98%); - --secondary: hsl(240 4.8% 95.9%); - --secondary-foreground: hsl(240 5.9% 10%); - --accent: hsl(240 4.8% 95.9%); - --accent-foreground: hsl(240 5.9% 10%); - --destructive: hsl(0 72.2% 50.6%); + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: hsl(0 0% 98%); - --ring: hsl(240 10% 3.9%); - --sidebar: hsl(0 0% 98%); - --sidebar-foreground: hsl(240 5.3% 26.1%); - --sidebar-primary: hsl(240 5.9% 10%); - --sidebar-primary-foreground: hsl(0 0% 98%); - --sidebar-accent: hsl(240 4.8% 95.9%); - --sidebar-accent-foreground: hsl(240 5.9% 10%); - --sidebar-border: hsl(220 13% 91%); - --sidebar-ring: hsl(217.2 91.2% 59.8%); + --ring: oklch(0.708 0 0); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); --support: rgb(220 15 130); --link: rgb(0 110 180); --selection: hsl(240 4.8% 93%); --radius: 0.5rem; + + --chart-1: oklch(0.87 0 0); + + --chart-2: oklch(0.556 0 0); + + --chart-3: oklch(0.439 0 0); + + --chart-4: oklch(0.371 0 0); + + --chart-5: oklch(0.269 0 0); } .dark { - --background: hsl(240 10% 3.9%); - --foreground: hsl(0 0% 98%); - --muted: hsl(240 3.7% 15.9%); - --muted-foreground: hsl(240 5% 64.9%); - --popover: hsl(240 10% 3.9%); - --popover-foreground: hsl(0 0% 98%); - --card: hsl(240 10% 3.9%); - --card-foreground: hsl(0 0% 98%); - --border: hsl(240 3.7% 15.9%); - --input: hsl(240 3.7% 15.9%); - --primary: hsl(0 0% 98%); - --primary-foreground: hsl(240 5.9% 10%); - --secondary: hsl(240 3.7% 15.9%); - --secondary-foreground: hsl(0 0% 98%); - --accent: hsl(240 3.7% 15.9%); - --accent-foreground: hsl(0 0% 98%); - --destructive: hsl(0 62.8% 30.6%); + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: hsl(0 0% 98%); - --ring: hsl(240 4.9% 83.9%); - --sidebar: hsl(240 5.9% 10%); - --sidebar-foreground: hsl(240 4.8% 95.9%); - --sidebar-primary: hsl(224.3 76.3% 48%); - --sidebar-primary-foreground: hsl(0 0% 100%); - --sidebar-accent: hsl(240 3.7% 15.9%); - --sidebar-accent-foreground: hsl(240 4.8% 95.9%); - --sidebar-border: hsl(240 3.7% 15.9%); - --sidebar-ring: hsl(217.2 91.2% 59.8%); + --ring: oklch(0.556 0 0); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); --support: rgb(255 110 190); --link: rgb(80 190 255); --selection: hsl(240 3.7% 22%); + --chart-1: oklch(0.87 0 0); + --chart-2: oklch(0.556 0 0); + --chart-3: oklch(0.439 0 0); + --chart-4: oklch(0.371 0 0); + --chart-5: oklch(0.269 0 0); } @theme inline { @@ -113,14 +130,35 @@ --color-link: var(--link); --breakpoint-xs: 540px; + + --font-sans: 'Inter Variable', sans-serif; + + --color-chart-5: var(--chart-5); + + --color-chart-4: var(--chart-4); + + --color-chart-3: var(--chart-3); + + --color-chart-2: var(--chart-2); + + --color-chart-1: var(--chart-1); + + --radius-2xl: calc(var(--radius) * 1.8); + + --radius-3xl: calc(var(--radius) * 2.2); + + --radius-4xl: calc(var(--radius) * 2.6); } @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } + html { + @apply font-sans; + } } diff --git a/website/src/lib/components/Help.svelte b/website/src/lib/components/Help.svelte index 15a83d341..80163d2f9 100644 --- a/website/src/lib/components/Help.svelte +++ b/website/src/lib/components/Help.svelte @@ -14,12 +14,12 @@ } = $props(); -
+
{@render children()} {#if link} - + {i18n._('menu.more')} {/if} diff --git a/website/src/lib/components/ui/slider/slider.svelte b/website/src/lib/components/ui/slider/slider.svelte index bb6dfdc18..3aa502d98 100644 --- a/website/src/lib/components/ui/slider/slider.svelte +++ b/website/src/lib/components/ui/slider/slider.svelte @@ -31,13 +31,13 @@ get along, so we shut typescript up by casting `value` to `never`. data-slot="slider-track" data-orientation={orientation} class={cn( - "h-1.5 bg-muted rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 bg-muted relative grow overflow-hidden data-horizontal:w-full data-vertical:h-full" + "bg-muted rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 bg-muted relative grow overflow-hidden data-horizontal:w-full data-vertical:h-full" )} > diff --git a/website/src/lib/utils.ts b/website/src/lib/utils.ts index a030374a1..3c9dd330d 100644 --- a/website/src/lib/utils.ts +++ b/website/src/lib/utils.ts @@ -1,4 +1,4 @@ -import { type ClassValue, clsx } from 'clsx'; +import { clsx, type ClassValue } from 'clsx'; import { twMerge } from 'tailwind-merge'; import { base } from '$app/paths'; import { languages } from '$lib/languages'; @@ -18,9 +18,7 @@ export type WithoutChild = T extends { child?: any } ? Omit : T; // eslint-disable-next-line @typescript-eslint/no-explicit-any export type WithoutChildren = T extends { children?: any } ? Omit : T; export type WithoutChildrenOrChild = WithoutChildren>; -export type WithElementRef = T & { - ref?: U | null; -}; +export type WithElementRef = T & { ref?: U | null }; export function getClosestLinePoint( points: TrackPoint[],