From bdc820302653fefd781f66d2fc19ab05f3094c72 Mon Sep 17 00:00:00 2001 From: Neshura Date: Mon, 1 Jan 2024 05:56:10 +0100 Subject: [PATCH] Add postcss/tailwind/shadcn --- components.json | 13 +++++ postcss.config.cjs | 13 +++++ src/app.pcss | 115 +++++++++++++++++++++++++++++++++++++++++++++ tailwind.config.js | 64 +++++++++++++++++++++++++ 4 files changed, 205 insertions(+) create mode 100644 components.json create mode 100644 postcss.config.cjs create mode 100644 src/app.pcss create mode 100644 tailwind.config.js diff --git a/components.json b/components.json new file mode 100644 index 0000000..04ed94f --- /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.pcss", + "baseColor": "slate" + }, + "aliases": { + "components": "$lib/components", + "utils": "$lib/utils" + } +} \ No newline at end of file diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..fe10e55 --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,13 @@ +const tailwindcss = require('tailwindcss'); +const autoprefixer = require('autoprefixer'); + +const config = { + plugins: [ + //Some plugins, like tailwindcss/nesting, need to run before Tailwind, + tailwindcss(), + //But others, like autoprefixer, need to run after, + autoprefixer + ] +}; + +module.exports = config; diff --git a/src/app.pcss b/src/app.pcss new file mode 100644 index 0000000..6f2c98b --- /dev/null +++ b/src/app.pcss @@ -0,0 +1,115 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@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); + } + + .nordlys { + --background: 0 0% 0%; /* #000000 */ + --foreground: 173 80% 40%; /* #14b8a6 */ + + --muted: 183 100% 96%; /* #ecfeff */ + --muted-foreground: 176 61% 19%; /* #134e4a */ + + --popover: 0 0% 0%; /* #000000 */ + --popover-foreground: 173 80% 40%; /* #14b8a6 */ + + --card: 0 0% 0%; /* #000000 */ + --card-foreground: 173 80% 40%; /* #14b8a6 */ + + --border: 183 100% 96%; /* #ecfeff */ + --input: 183 100% 96%; /* #ecfeff */ + + --primary: 173 80% 40%; /* #14b8a6 */ + --primary-foreground: 221 39% 11%; /* #111827 */ + + --secondary: 183 100% 96%; /* #ecfeff */ + --secondary-foreground: 173 80% 40%; /* #14b8a6 */ + + --accent: 183 100% 96%; /* #ecfeff */ + --accent-foreground: 173 80% 40%; /* #14b8a6 */ + + --destructive: 0 70% 35%; /* #991b1b */ + --destructive-foreground: 173 80% 40%; /* #14b8a6 */ + + --offline: var(--destructive); + --online: 142 76% 36%; /* #16a34a */ + --pending: 45 93% 47%; /* #eab308 */ + --maintenance: 224 76% 48%; /* #1d4ed8 */ + + /* that border thingy when you tab through stuff */ + --ring: hsl(168 84% 78%); /* #99f6e4 */ + } +} + +@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 new file mode 100644 index 0000000..8d260d9 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,64 @@ +import { fontFamily } from "tailwindcss/defaultTheme"; + +/** @type {import('tailwindcss').Config} */ +const 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) / )" + } + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)" + }, + fontFamily: { + sans: [...fontFamily.sans] + } + } + }, +}; + +export default config;