From 0407df4a2aa70d37ebb6e8bb65e29d80dd7b1932 Mon Sep 17 00:00:00 2001 From: Mihkel Martin Kasterpalu Date: Sat, 18 Jan 2025 23:17:25 +0200 Subject: [PATCH] Add shadcn --- components.json | 17 ++++++++ package.json | 4 ++ pnpm-lock.yaml | 42 +++++++++++++++++++ src/app.css | 78 ++++++++++++++++++++++++++++++++-- src/lib/utils.ts | 6 +++ tailwind.config.ts | 101 +++++++++++++++++++++++++++++++++++++++++---- 6 files changed, 236 insertions(+), 12 deletions(-) create mode 100644 components.json create mode 100644 src/lib/utils.ts diff --git a/components.json b/components.json new file mode 100644 index 0000000..a4a93e2 --- /dev/null +++ b/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://next.shadcn-svelte.com/schema.json", + "style": "new-york", + "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" +} diff --git a/package.json b/package.json index 6fb46eb..da22092 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@tailwindcss/forms": "^0.5.10", "@types/better-sqlite3": "^7.6.12", "autoprefixer": "^10.4.20", + "clsx": "^2.1.1", "drizzle-kit": "^0.30.2", "eslint": "^9.18.0", "eslint-config-prettier": "^10.0.1", @@ -35,7 +36,10 @@ "prettier-plugin-tailwindcss": "^0.6.10", "svelte": "^5.0.0", "svelte-check": "^4.0.0", + "tailwind-merge": "^2.6.0", + "tailwind-variants": "^0.3.1", "tailwindcss": "^3.4.17", + "tailwindcss-animate": "^1.0.7", "typescript": "^5.0.0", "typescript-eslint": "^8.20.0", "vite": "^5.4.11" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6216360..bbb60b8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -42,6 +42,9 @@ importers: autoprefixer: specifier: ^10.4.20 version: 10.4.20(postcss@8.5.1) + clsx: + specifier: ^2.1.1 + version: 2.1.1 drizzle-kit: specifier: ^0.30.2 version: 0.30.2 @@ -72,9 +75,18 @@ importers: svelte-check: specifier: ^4.0.0 version: 4.1.4(picomatch@4.0.2)(svelte@5.19.0)(typescript@5.7.3) + tailwind-merge: + specifier: ^2.6.0 + version: 2.6.0 + tailwind-variants: + specifier: ^0.3.1 + version: 0.3.1(tailwindcss@3.4.17) tailwindcss: specifier: ^3.4.17 version: 3.4.17 + tailwindcss-animate: + specifier: ^1.0.7 + version: 1.0.7(tailwindcss@3.4.17) typescript: specifier: ^5.0.0 version: 5.7.3 @@ -1937,6 +1949,23 @@ packages: resolution: {integrity: sha512-qvd2GvvYnJxS/MteQKFSMyq8cQrAAut28QZ39ySv9k3ggmhw4Au4Rfcsqva74i0xMys//OhbhVCNfXPrDzL/Bg==} engines: {node: '>=18'} + tailwind-merge@2.5.4: + resolution: {integrity: sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==} + + tailwind-merge@2.6.0: + resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==} + + tailwind-variants@0.3.1: + resolution: {integrity: sha512-krn67M3FpPwElg4FsZrOQd0U26o7UDH/QOkK8RNaiCCrr052f6YJPBUfNKnPo/s/xRzNPtv1Mldlxsg8Tb46BQ==} + 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.17: resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==} engines: {node: '>=14.0.0'} @@ -3632,6 +3661,19 @@ snapshots: magic-string: 0.30.17 zimmerframe: 1.1.2 + tailwind-merge@2.5.4: {} + + tailwind-merge@2.6.0: {} + + tailwind-variants@0.3.1(tailwindcss@3.4.17): + dependencies: + tailwind-merge: 2.5.4 + tailwindcss: 3.4.17 + + tailwindcss-animate@1.0.7(tailwindcss@3.4.17): + dependencies: + tailwindcss: 3.4.17 + tailwindcss@3.4.17: 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/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/tailwind.config.ts b/tailwind.config.ts index c715262..d91ff63 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,13 +1,96 @@ -import containerQueries from '@tailwindcss/container-queries'; -import forms from '@tailwindcss/forms'; -import type { Config } from 'tailwindcss'; - -export default { - content: ['./src/**/*.{html,js,svelte,ts}'], +import { fontFamily } from "tailwindcss/defaultTheme"; +import type { Config } from "tailwindcss"; +import tailwindcssAnimate from "tailwindcss-animate"; +const config: Config = { + darkMode: ["class"], + content: ["./src/**/*.{html,js,svelte,ts}"], + safelist: ["dark"], theme: { - extend: {} + 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: [...fontFamily.sans] + }, + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--bits-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--bits-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: [tailwindcssAnimate], +}; - plugins: [forms, containerQueries] -} satisfies Config; +export default config;