From c39a55a84a710e5488a37a2f37ecff2d328b4035 Mon Sep 17 00:00:00 2001 From: Taku Fukada Date: Fri, 1 Nov 2024 16:18:29 +0900 Subject: [PATCH] docs: dark mode --- components.json | 17 ++ package.json | 13 +- pnpm-lock.yaml | 154 ++++++++++++++++++ src/app.css | 78 ++++++++- src/lib/assets/icons/GitHub.svelte | 12 ++ src/lib/components/ui/button/button.svelte | 74 +++++++++ src/lib/components/ui/button/index.ts | 17 ++ .../dropdown-menu-checkbox-item.svelte | 35 ++++ .../dropdown-menu-content.svelte | 21 +++ .../dropdown-menu-group-heading.svelte | 19 +++ .../dropdown-menu/dropdown-menu-item.svelte | 23 +++ .../dropdown-menu/dropdown-menu-label.svelte | 23 +++ .../dropdown-menu-radio-item.svelte | 30 ++++ .../dropdown-menu-separator.svelte | 16 ++ .../dropdown-menu-shortcut.svelte | 20 +++ .../dropdown-menu-sub-content.svelte | 19 +++ .../dropdown-menu-sub-trigger.svelte | 28 ++++ src/lib/components/ui/dropdown-menu/index.ts | 50 ++++++ src/lib/utils.ts | 6 + src/routes/+layout.svelte | 5 +- src/routes/+page.svelte | 2 +- src/routes/DarkModeSelector.svelte | 21 +++ src/routes/Header.svelte | 31 +++- src/routes/components/[slug]/+page.svelte | 4 +- src/routes/examples/[slug]/+page.svelte | 4 +- tailwind.config.ts | 96 ++++++++++- 26 files changed, 790 insertions(+), 28 deletions(-) create mode 100644 components.json create mode 100644 src/lib/assets/icons/GitHub.svelte create mode 100644 src/lib/components/ui/button/button.svelte create mode 100644 src/lib/components/ui/button/index.ts create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte create mode 100644 src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte create mode 100644 src/lib/components/ui/dropdown-menu/index.ts create mode 100644 src/lib/utils.ts create mode 100644 src/routes/DarkModeSelector.svelte diff --git a/components.json b/components.json new file mode 100644 index 0000000..d780c55 --- /dev/null +++ b/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://next.shadcn-svelte.com/schema.json", + "style": "default", + "tailwind": { + "config": "tailwind.config.ts", + "css": "src/app.css", + "baseColor": "stone" + }, + "aliases": { + "components": "$lib/components", + "utils": "$lib/utils", + "ui": "$lib/components/ui", + "hooks": "$lib/hooks" + }, + "typescript": true, + "registry": "https://next.shadcn-svelte.com/registry" +} \ No newline at end of file diff --git a/package.json b/package.json index c7f0b17..9b5b1d4 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "dev": "vite dev", "build": "vite build && npm run package", "preview": "vite preview", - "package": "svelte-kit sync && svelte-package && publint", + "package": "svelte-kit sync && svelte-package -i src/lib/maplibre && publint", "prepublishOnly": "npm run package", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", @@ -45,10 +45,13 @@ "@tailwindcss/typography": "^0.5.15", "@types/eslint": "^9.6.1", "autoprefixer": "^10.4.20", + "bits-ui": "1.0.0-next.35", + "clsx": "^2.1.1", "eslint": "^9.13.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-svelte": "^2.46.0", "globals": "^15.11.0", + "lucide-svelte": "^0.454.0", "mdsvex": "^0.12.3", "prettier": "^3.3.3", "prettier-plugin-svelte": "^3.2.7", @@ -56,11 +59,17 @@ "publint": "^0.2.12", "svelte": "^5.1.9", "svelte-check": "^4.0.5", + "tailwind-merge": "^2.5.4", + "tailwind-variants": "^0.2.1", "tailwindcss": "^3.4.14", + "tailwindcss-animate": "^1.0.7", "typescript": "^5.6.3", "typescript-eslint": "^8.12.2", "vite": "^5.4.10", "vitest": "^2.1.4" }, - "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1" + "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1", + "dependencies": { + "mode-watcher": "^0.4.1" + } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b332cf4..2003292 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: maplibre-gl: specifier: ^4.7.0 version: 4.7.1 + mode-watcher: + specifier: ^0.4.1 + version: 0.4.1(svelte@5.1.9) devDependencies: '@playwright/test': specifier: ^1.48.2 @@ -36,6 +39,12 @@ importers: autoprefixer: specifier: ^10.4.20 version: 10.4.20(postcss@8.4.47) + bits-ui: + specifier: 1.0.0-next.35 + version: 1.0.0-next.35(svelte@5.1.9) + clsx: + specifier: ^2.1.1 + version: 2.1.1 eslint: specifier: ^9.13.0 version: 9.13.0(jiti@1.21.6) @@ -48,6 +57,9 @@ importers: globals: specifier: ^15.11.0 version: 15.11.0 + lucide-svelte: + specifier: ^0.454.0 + version: 0.454.0(svelte@5.1.9) mdsvex: specifier: ^0.12.3 version: 0.12.3(svelte@5.1.9) @@ -69,9 +81,18 @@ importers: svelte-check: specifier: ^4.0.5 version: 4.0.5(svelte@5.1.9)(typescript@5.6.3) + tailwind-merge: + specifier: ^2.5.4 + version: 2.5.4 + tailwind-variants: + specifier: ^0.2.1 + version: 0.2.1(tailwindcss@3.4.14) tailwindcss: specifier: ^3.4.14 version: 3.4.14 + tailwindcss-animate: + specifier: ^1.0.7 + version: 1.0.7(tailwindcss@3.4.14) typescript: specifier: ^5.6.3 version: 5.6.3 @@ -267,6 +288,15 @@ packages: resolution: {integrity: sha512-CXtq5nR4Su+2I47WPOlWud98Y5Lv8Kyxp2ukhgFx/eW6Blm18VXJO5WuQylPugRo8nbluoi6GvvxBLqHcvqUUw==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@floating-ui/core@1.6.8': + resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==} + + '@floating-ui/dom@1.6.12': + resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==} + + '@floating-ui/utils@0.2.8': + resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==} + '@humanfs/core@0.19.1': resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==} engines: {node: '>=18.18.0'} @@ -283,6 +313,9 @@ packages: resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==} engines: {node: '>=18.18'} + '@internationalized/date@3.5.6': + resolution: {integrity: sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==} + '@isaacs/cliui@8.0.2': resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -483,6 +516,9 @@ packages: svelte: ^5.0.0-next.96 || ^5.0.0 vite: ^5.0.0 + '@swc/helpers@0.5.13': + resolution: {integrity: sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==} + '@tailwindcss/typography@0.5.15': resolution: {integrity: sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==} peerDependencies: @@ -680,6 +716,12 @@ packages: resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==} engines: {node: '>=8'} + bits-ui@1.0.0-next.35: + resolution: {integrity: sha512-Bm9hPlswA1hbYwn3xmSUsimEp7UlpNcoT7YddshtG7zd/lcZe5I5vr27flRTjYlBOKkjX6V32b+xwHNBOKSvvA==} + engines: {node: '>=18', pnpm: '>=8.7.0'} + peerDependencies: + svelte: ^5.0.0-next.1 + brace-expansion@1.1.11: resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} @@ -730,6 +772,10 @@ packages: resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==} engines: {node: '>= 14.16.0'} + clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + color-convert@2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} engines: {node: '>=7.0.0'} @@ -1057,6 +1103,9 @@ packages: resolution: {integrity: sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + inline-style-parser@0.2.4: + resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==} + is-binary-path@2.1.0: resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} engines: {node: '>=8'} @@ -1171,6 +1220,11 @@ packages: lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} + lucide-svelte@0.454.0: + resolution: {integrity: sha512-TgW17HI7M8LeFZ3NpaDp1LwPGBGMVjx/x81TtK+AacEQvmJcqetqeJNeBT18NMEJP9+zi/Wt+Zc8mo44K5Uszw==} + peerDependencies: + svelte: ^3 || ^4 || ^5.0.0-next.42 + magic-string@0.30.12: resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==} @@ -1209,6 +1263,11 @@ packages: resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==} engines: {node: '>=16 || 14 >=14.17'} + mode-watcher@0.4.1: + resolution: {integrity: sha512-bNC+1NXmwEFZtziCdZSgP7HFQTpqJPcQn9GwwJQGSf6SBF3neEPYV1uRwkYuAQwbsvsXIYtzaqgedDzJ7D1mhg==} + peerDependencies: + svelte: ^4.0.0 || ^5.0.0-next.1 + mri@1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} engines: {node: '>=4'} @@ -1549,6 +1608,11 @@ packages: run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} + runed@0.15.3: + resolution: {integrity: sha512-HtayB+loDcGdqJDHW8JFdsZzGQMyVzim6+s3052MkjZnwmwDstmF+cusMeTssBe6TCdt5i9D/Tb+KYXN3L0kXA==} + peerDependencies: + svelte: ^5.0.0-next.1 + rw@1.3.3: resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==} @@ -1613,6 +1677,9 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} + style-to-object@1.0.8: + resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==} + sucrase@3.35.0: resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==} engines: {node: '>=16 || 14 >=14.17'} @@ -1646,6 +1713,12 @@ packages: svelte: optional: true + svelte-toolbelt@0.4.4: + resolution: {integrity: sha512-sNSJ4zUUVpou/p7O2IagMGfSPKHwqsOCYvDceFEMoPmkRXlNDvRethDDAzYM8hO3ayYpdEAPG4H8wsD385hspw==} + engines: {node: '>=18', pnpm: '>=8.7.0'} + peerDependencies: + svelte: ^5.0.0-next.126 + svelte2tsx@0.7.22: resolution: {integrity: sha512-hf55ujq17ufVpDQlJzaQfRr9EjlLIwGmFlpKq4uYrQAQFw/99q1OcVYyBT6568iJySgBUY9PdccURrORmfetmQ==} peerDependencies: @@ -1656,6 +1729,20 @@ packages: resolution: {integrity: sha512-nzq+PPKGS2PoEWDjAcXSrKSbXmmmOAxd6dAz1IhRusUpVkFS6DMELWPyBPGwu6TpO/gsgtFXwX0M4+pAR5gzKw==} engines: {node: '>=18'} + tailwind-merge@2.5.4: + resolution: {integrity: sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==} + + tailwind-variants@0.2.1: + resolution: {integrity: sha512-2xmhAf4UIc3PijOUcJPA1LP4AbxhpcHuHM2C26xM0k81r0maAO6uoUSHl3APmvHZcY5cZCY/bYuJdfFa4eGoaw==} + engines: {node: '>=16.x', pnpm: '>=7.x'} + peerDependencies: + tailwindcss: '*' + + tailwindcss-animate@1.0.7: + resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} + peerDependencies: + tailwindcss: '>=3.0.0 || insiders' + tailwindcss@3.4.14: resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==} engines: {node: '>=14.0.0'} @@ -1986,6 +2073,17 @@ snapshots: dependencies: levn: 0.4.1 + '@floating-ui/core@1.6.8': + dependencies: + '@floating-ui/utils': 0.2.8 + + '@floating-ui/dom@1.6.12': + dependencies: + '@floating-ui/core': 1.6.8 + '@floating-ui/utils': 0.2.8 + + '@floating-ui/utils@0.2.8': {} + '@humanfs/core@0.19.1': {} '@humanfs/node@0.16.6': @@ -1997,6 +2095,10 @@ snapshots: '@humanwhocodes/retry@0.3.1': {} + '@internationalized/date@3.5.6': + dependencies: + '@swc/helpers': 0.5.13 + '@isaacs/cliui@8.0.2': dependencies: string-width: 5.1.2 @@ -2183,6 +2285,10 @@ snapshots: transitivePeerDependencies: - supports-color + '@swc/helpers@0.5.13': + dependencies: + tslib: 2.8.1 + '@tailwindcss/typography@0.5.15(tailwindcss@3.4.14)': dependencies: lodash.castarray: 4.4.0 @@ -2403,6 +2509,16 @@ snapshots: binary-extensions@2.3.0: {} + bits-ui@1.0.0-next.35(svelte@5.1.9): + dependencies: + '@floating-ui/core': 1.6.8 + '@floating-ui/dom': 1.6.12 + '@internationalized/date': 3.5.6 + esm-env: 1.1.4 + runed: 0.15.3(svelte@5.1.9) + svelte: 5.1.9 + svelte-toolbelt: 0.4.4(svelte@5.1.9) + brace-expansion@1.1.11: dependencies: balanced-match: 1.0.2 @@ -2462,6 +2578,8 @@ snapshots: dependencies: readdirp: 4.0.2 + clsx@2.1.1: {} + color-convert@2.0.1: dependencies: color-name: 1.1.4 @@ -2797,6 +2915,8 @@ snapshots: ini@4.1.3: {} + inline-style-parser@0.2.4: {} + is-binary-path@2.1.0: dependencies: binary-extensions: 2.3.0 @@ -2886,6 +3006,10 @@ snapshots: lru-cache@10.4.3: {} + lucide-svelte@0.454.0(svelte@5.1.9): + dependencies: + svelte: 5.1.9 + magic-string@0.30.12: dependencies: '@jridgewell/sourcemap-codec': 1.5.0 @@ -2950,6 +3074,10 @@ snapshots: minipass@7.1.2: {} + mode-watcher@0.4.1(svelte@5.1.9): + dependencies: + svelte: 5.1.9 + mri@1.2.0: {} mrmime@2.0.0: {} @@ -3210,6 +3338,11 @@ snapshots: dependencies: queue-microtask: 1.2.3 + runed@0.15.3(svelte@5.1.9): + dependencies: + esm-env: 1.1.4 + svelte: 5.1.9 + rw@1.3.3: {} sade@1.8.1: @@ -3264,6 +3397,10 @@ snapshots: strip-json-comments@3.1.1: {} + style-to-object@1.0.8: + dependencies: + inline-style-parser: 0.2.4 + sucrase@3.35.0: dependencies: '@jridgewell/gen-mapping': 0.3.5 @@ -3306,6 +3443,12 @@ snapshots: optionalDependencies: svelte: 5.1.9 + svelte-toolbelt@0.4.4(svelte@5.1.9): + dependencies: + clsx: 2.1.1 + style-to-object: 1.0.8 + svelte: 5.1.9 + svelte2tsx@0.7.22(svelte@5.1.9)(typescript@5.6.3): dependencies: dedent-js: 1.0.1 @@ -3329,6 +3472,17 @@ snapshots: magic-string: 0.30.12 zimmerframe: 1.1.2 + tailwind-merge@2.5.4: {} + + tailwind-variants@0.2.1(tailwindcss@3.4.14): + dependencies: + tailwind-merge: 2.5.4 + tailwindcss: 3.4.14 + + tailwindcss-animate@1.0.7(tailwindcss@3.4.14): + dependencies: + tailwindcss: 3.4.14 + tailwindcss@3.4.14: dependencies: '@alloc/quick-lru': 5.2.0 diff --git a/src/app.css b/src/app.css index a31e444..bd56ec4 100644 --- a/src/app.css +++ b/src/app.css @@ -1,3 +1,75 @@ -@import 'tailwindcss/base'; -@import 'tailwindcss/components'; -@import 'tailwindcss/utilities'; +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 20 14.3% 4.1%; + --muted: 60 4.8% 95.9%; + --muted-foreground: 25 5.3% 44.7%; + --popover: 0 0% 100%; + --popover-foreground: 20 14.3% 4.1%; + --card: 0 0% 100%; + --card-foreground: 20 14.3% 4.1%; + --border: 20 5.9% 90%; + --input: 20 5.9% 90%; + --primary: 24 9.8% 10%; + --primary-foreground: 60 9.1% 97.8%; + --secondary: 60 4.8% 95.9%; + --secondary-foreground: 24 9.8% 10%; + --accent: 60 4.8% 95.9%; + --accent-foreground: 24 9.8% 10%; + --destructive: 0 72.2% 50.6%; + --destructive-foreground: 60 9.1% 97.8%; + --ring: 20 14.3% 4.1%; + --radius: 0.5rem; + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-primary: 240 5.9% 10%; + --sidebar-primary-foreground: 0 0% 98%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 217.2 91.2% 59.8%; + } + + .dark { + --background: 20 14.3% 4.1%; + --foreground: 60 9.1% 97.8%; + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 97.8%; + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 97.8%; + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + --primary: 60 9.1% 97.8%; + --primary-foreground: 24 9.8% 10%; + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 97.8%; + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 97.8%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 60 9.1% 97.8%; + --ring: 24 5.7% 82.9%; + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} \ No newline at end of file diff --git a/src/lib/assets/icons/GitHub.svelte b/src/lib/assets/icons/GitHub.svelte new file mode 100644 index 0000000..246c0be --- /dev/null +++ b/src/lib/assets/icons/GitHub.svelte @@ -0,0 +1,12 @@ + + + + + diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte new file mode 100644 index 0000000..8f44d5c --- /dev/null +++ b/src/lib/components/ui/button/button.svelte @@ -0,0 +1,74 @@ + + + + +{#if href} + + {@render children?.()} + +{:else} + +{/if} diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts new file mode 100644 index 0000000..fb585d7 --- /dev/null +++ b/src/lib/components/ui/button/index.ts @@ -0,0 +1,17 @@ +import Root, { + type ButtonProps, + type ButtonSize, + type ButtonVariant, + buttonVariants, +} from "./button.svelte"; + +export { + Root, + type ButtonProps as Props, + // + Root as Button, + buttonVariants, + type ButtonProps, + type ButtonSize, + type ButtonVariant, +}; diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte new file mode 100644 index 0000000..f5f9db4 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte @@ -0,0 +1,35 @@ + + + + {#snippet children({ checked })} + + {#if checked === "indeterminate"} + + {:else} + + {/if} + + {@render childrenProp?.({ checked })} + {/snippet} + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte new file mode 100644 index 0000000..255b1a6 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte @@ -0,0 +1,21 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte new file mode 100644 index 0000000..84d5cca --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte @@ -0,0 +1,19 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte new file mode 100644 index 0000000..70a5236 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte @@ -0,0 +1,23 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte new file mode 100644 index 0000000..9837d5a --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte @@ -0,0 +1,23 @@ + + +
+ {@render children?.()} +
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte new file mode 100644 index 0000000..0f219da --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte @@ -0,0 +1,30 @@ + + + + {#snippet children({ checked })} + + {#if checked} + + {/if} + + {@render childrenProp?.({ checked })} + {/snippet} + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte new file mode 100644 index 0000000..32fac4b --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte new file mode 100644 index 0000000..053e2a2 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte @@ -0,0 +1,20 @@ + + + + {@render children?.()} + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte new file mode 100644 index 0000000..0bb6eea --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte @@ -0,0 +1,19 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte new file mode 100644 index 0000000..c2dcd32 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte @@ -0,0 +1,28 @@ + + + + {@render children?.()} + + diff --git a/src/lib/components/ui/dropdown-menu/index.ts b/src/lib/components/ui/dropdown-menu/index.ts new file mode 100644 index 0000000..40c4502 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/index.ts @@ -0,0 +1,50 @@ +import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; +import CheckboxItem from "./dropdown-menu-checkbox-item.svelte"; +import Content from "./dropdown-menu-content.svelte"; +import GroupHeading from "./dropdown-menu-group-heading.svelte"; +import Item from "./dropdown-menu-item.svelte"; +import Label from "./dropdown-menu-label.svelte"; +import RadioItem from "./dropdown-menu-radio-item.svelte"; +import Separator from "./dropdown-menu-separator.svelte"; +import Shortcut from "./dropdown-menu-shortcut.svelte"; +import SubContent from "./dropdown-menu-sub-content.svelte"; +import SubTrigger from "./dropdown-menu-sub-trigger.svelte"; + +const Sub = DropdownMenuPrimitive.Sub; +const Root = DropdownMenuPrimitive.Root; +const Trigger = DropdownMenuPrimitive.Trigger; +const Group = DropdownMenuPrimitive.Group; +const RadioGroup = DropdownMenuPrimitive.RadioGroup; + +export { + CheckboxItem, + Content, + Root as DropdownMenu, + CheckboxItem as DropdownMenuCheckboxItem, + Content as DropdownMenuContent, + Group as DropdownMenuGroup, + GroupHeading as DropdownMenuGroupHeading, + Item as DropdownMenuItem, + Label as DropdownMenuLabel, + RadioGroup as DropdownMenuRadioGroup, + RadioItem as DropdownMenuRadioItem, + Separator as DropdownMenuSeparator, + Shortcut as DropdownMenuShortcut, + Sub as DropdownMenuSub, + SubContent as DropdownMenuSubContent, + SubTrigger as DropdownMenuSubTrigger, + Trigger as DropdownMenuTrigger, + Group, + GroupHeading, + Item, + Label, + RadioGroup, + RadioItem, + Root, + Separator, + Shortcut, + Sub, + SubContent, + SubTrigger, + Trigger, +}; diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..ac680b3 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index c53207e..9172e08 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,4 +1,5 @@ -
+ + +
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index b0be941..4957df6 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,5 +1,5 @@
-
+

Svelte MapLibre GL

Examples diff --git a/src/routes/DarkModeSelector.svelte b/src/routes/DarkModeSelector.svelte new file mode 100644 index 0000000..8b6cf72 --- /dev/null +++ b/src/routes/DarkModeSelector.svelte @@ -0,0 +1,21 @@ + + + + + + + Toggle theme + + + setMode('light')}>Light + setMode('dark')}>Dark + resetMode()}>System + + diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte index a3d8ef1..ae2d733 100644 --- a/src/routes/Header.svelte +++ b/src/routes/Header.svelte @@ -1,18 +1,33 @@ -

+ + +

- Svelte MapLibre GL + + Svelte MapLibre GL +

- Examples - Components
-
-
Search Box
- -
Dark
icon
+
+
SearchBox
+ +
+ +
diff --git a/src/routes/components/[slug]/+page.svelte b/src/routes/components/[slug]/+page.svelte index 94d58f2..6574fd9 100644 --- a/src/routes/components/[slug]/+page.svelte +++ b/src/routes/components/[slug]/+page.svelte @@ -6,11 +6,11 @@

{data.meta.title}

-

+

{data.meta.description}

-
+
diff --git a/src/routes/examples/[slug]/+page.svelte b/src/routes/examples/[slug]/+page.svelte index 94d58f2..6574fd9 100644 --- a/src/routes/examples/[slug]/+page.svelte +++ b/src/routes/examples/[slug]/+page.svelte @@ -6,11 +6,11 @@

{data.meta.title}

-

+

{data.meta.description}

-
+
diff --git a/tailwind.config.ts b/tailwind.config.ts index 2b88af2..d863f76 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,19 +1,97 @@ -// import aspectRatio from '@tailwindcss/aspect-ratio'; -import typography from '@tailwindcss/typography'; -import defaultTheme from 'tailwindcss/defaultTheme'; +import { fontFamily } from 'tailwindcss/defaultTheme'; import type { Config } from 'tailwindcss'; +import tailwindcssAnimate from 'tailwindcss-animate'; +import tailwindcssTypography from '@tailwindcss/typography'; -export default { +const config: Config = { + darkMode: ['class'], content: ['./src/**/*.{html,js,svelte,ts}'], - + safelist: ['dark'], theme: { + container: { + center: true, + padding: '2rem', + screens: { + '2xl': '1400px' + } + }, extend: { + colors: { + border: 'hsl(var(--border) / )', + input: 'hsl(var(--input) / )', + ring: 'hsl(var(--ring) / )', + background: 'hsl(var(--background) / )', + foreground: 'hsl(var(--foreground) / )', + primary: { + DEFAULT: 'hsl(var(--primary) / )', + foreground: 'hsl(var(--primary-foreground) / )' + }, + secondary: { + DEFAULT: 'hsl(var(--secondary) / )', + foreground: 'hsl(var(--secondary-foreground) / )' + }, + destructive: { + DEFAULT: 'hsl(var(--destructive) / )', + foreground: 'hsl(var(--destructive-foreground) / )' + }, + muted: { + DEFAULT: 'hsl(var(--muted) / )', + foreground: 'hsl(var(--muted-foreground) / )' + }, + accent: { + DEFAULT: 'hsl(var(--accent) / )', + foreground: 'hsl(var(--accent-foreground) / )' + }, + popover: { + DEFAULT: 'hsl(var(--popover) / )', + foreground: 'hsl(var(--popover-foreground) / )' + }, + card: { + DEFAULT: 'hsl(var(--card) / )', + foreground: 'hsl(var(--card-foreground) / )' + }, + sidebar: { + DEFAULT: 'hsl(var(--sidebar-background))', + foreground: 'hsl(var(--sidebar-foreground))', + primary: 'hsl(var(--sidebar-primary))', + 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))', + accent: 'hsl(var(--sidebar-accent))', + 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))', + border: 'hsl(var(--sidebar-border))', + ring: 'hsl(var(--sidebar-ring))' + } + }, + borderRadius: { + xl: 'calc(var(--radius) + 4px)', + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)' + }, fontFamily: { - sans: ['Geist', ...defaultTheme.fontFamily.sans], - mono: ['Geist Mono', ...defaultTheme.fontFamily.mono] + sans: [...fontFamily.sans] + }, + keyframes: { + 'accordion-down': { + from: { height: '0' }, + to: { height: 'var(--radix-accordion-content-height)' } + }, + 'accordion-up': { + from: { height: 'var(--radix-accordion-content-height)' }, + to: { height: '0' } + }, + 'caret-blink': { + '0%,70%,100%': { opacity: '1' }, + '20%,50%': { opacity: '0' } + } + }, + animation: { + 'accordion-down': 'accordion-down 0.2s ease-out', + 'accordion-up': 'accordion-up 0.2s ease-out', + 'caret-blink': 'caret-blink 1.25s ease-out infinite' } } }, + plugins: [tailwindcssTypography, tailwindcssAnimate] +}; - plugins: [typography] -} as Config; +export default config;