From 69574ae1243136f99fdd8befd7ce985c61ba5ce7 Mon Sep 17 00:00:00 2001 From: Neshura Date: Wed, 6 Dec 2023 21:01:54 +0100 Subject: [PATCH] shadcn UI config changes --- components.json | 13 +++++++ src/app.postcss | 78 ++++++++++++++++++++++++++++++++++++++-- tailwind.config.js | 88 ++++++++++++++++++++++++++++++++-------------- 3 files changed, 149 insertions(+), 30 deletions(-) create mode 100644 components.json diff --git a/components.json b/components.json new file mode 100644 index 0000000..42519ae --- /dev/null +++ b/components.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://shadcn-svelte.com/schema.json", + "style": "new-york", + "tailwind": { + "config": "tailwind.config.js", + "css": "src/app.postcss", + "baseColor": "slate" + }, + "aliases": { + "components": "$lib/components", + "utils": "$lib/utils" + } +} \ No newline at end of file diff --git a/src/app.postcss b/src/app.postcss index 3445e3b..6ff7062 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -1,6 +1,78 @@ @tailwind base; @tailwind components; @tailwind utilities; -@tailwind variants; - -html, body { @apply h-full overflow-hidden; } \ No newline at end of file + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 72.2% 50.6%; + --destructive-foreground: 210 40% 98%; + + --ring: 222.2 84% 4.9%; + + --radius: 0.5rem; + } + + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --ring: hsl(212.7,26.8%,83.9); + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index b7651cb..8d260d9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,30 +1,64 @@ -module.exports = { - mode: 'jit', - purge: ['./src/**/*.svelte', './src/**/*.html'], - darkMode: false, +import { fontFamily } from "tailwindcss/defaultTheme"; + +/** @type {import('tailwindcss').Config} */ +const config = { + darkMode: ["class"], + content: ["./src/**/*.{html,js,svelte,ts}"], + safelist: ["dark"], theme: { - extend: {}, - }, - variants: { + 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) / )" + } + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)" + }, + fontFamily: { + sans: [...fontFamily.sans] + } + } }, - plugins: [], - safelist: [ - { - pattern: /bg-.+/, - }, - { - pattern: /text-.+/, - }, - { - pattern: /primary-.+/, - }, - { - pattern: /secondary-.+/, - }, - { - pattern: /border-.+/, - }, - ] -} \ No newline at end of file +}; + +export default config;