From e7647fb80b4653ba62718446ddda5896342e5c77 Mon Sep 17 00:00:00 2001 From: Quinta <0pietroquintavalle0@gmail.com> Date: Thu, 26 Jun 2025 17:14:20 +0200 Subject: [PATCH] refactor: enhance Nord theme styles and update Tailwind configuration --- app/globals.css | 69 ++++++++++++++++++++++++++++++++++ components.json | 5 ++- lib/constants.ts | 31 --------------- package-lock.json | 4 +- package.json | 6 +-- src/lib/utils.ts | 6 +++ tailwind.config.ts | 94 +++++++++++++++++++++++++++++++++------------- 7 files changed, 150 insertions(+), 65 deletions(-) delete mode 100644 lib/constants.ts create mode 100644 src/lib/utils.ts diff --git a/app/globals.css b/app/globals.css index 171bfdf..3331c23 100644 --- a/app/globals.css +++ b/app/globals.css @@ -83,3 +83,72 @@ body { .nord-accent { color: var(--nord-accent); } + + + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } +} + + + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/components.json b/components.json index 481633d..dea737b 100644 --- a/components.json +++ b/components.json @@ -1,6 +1,6 @@ { "$schema": "https://ui.shadcn.com/schema.json", - "style": "default", + "style": "new-york", "rsc": true, "tsx": true, "tailwind": { @@ -16,5 +16,6 @@ "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" - } + }, + "iconLibrary": "lucide" } \ No newline at end of file diff --git a/lib/constants.ts b/lib/constants.ts deleted file mode 100644 index bd0b44f..0000000 --- a/lib/constants.ts +++ /dev/null @@ -1,31 +0,0 @@ -export const NORD_COLORS: NordColors = { - bg: '#2E3440', - bgLight: '#3B4252', - bgLighter: '#434C5E', - bgLightest: '#4C566A', - text: '#D8DEE9', - textMuted: 'rgba(216, 222, 233, 0.6)', - accent: '#88C0D0', - blue: '#81A1C1', - darkBlue: '#5E81AC', - cyan: '#8FBCBB', - green: '#A3BE8C', - yellow: '#EBCB8B', - orange: '#D08770', - red: '#BF616A', - purple: '#B48EAD' -}; - -export const SKILLS: Record = { - 'Data & Analytics': ['Python', 'R', 'SQL', 'Statistical Analysis', 'Data Visualization', 'Business Intelligence'], - 'Web Development': ['JavaScript', 'TypeScript', 'React', 'Next.js', 'HTML5', 'CSS3', 'Tailwind CSS'], - 'Backend & Tools': ['Flask', 'Express', 'MongoDB', 'SQLite', 'Git', 'Linux'], - 'Other': ['Java', 'LaTeX', 'Project Planning', 'Financial Analysis'] -}; - -export const CERTIFICATES: string[] = [ - 'Google Data Analytics Professional Certificate', - 'Google IT Support Professional Certificate', - 'IT Security: Defense against the digital dark arts', - 'Python for Data Science, AI & Development' -]; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ae4965f..c79e2a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,13 +9,13 @@ "version": "0.1.0", "dependencies": { "@radix-ui/react-slot": "^1.1.0", - "class-variance-authority": "^0.7.0", + "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.441.0", "next": "14.2.13", "react": "^18.3.1", "react-dom": "^18.3.1", - "tailwind-merge": "^2.5.2", + "tailwind-merge": "^2.6.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { diff --git a/package.json b/package.json index 731401b..ed1b7f5 100644 --- a/package.json +++ b/package.json @@ -11,13 +11,13 @@ }, "dependencies": { "@radix-ui/react-slot": "^1.1.0", - "class-variance-authority": "^0.7.0", + "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.441.0", "next": "14.2.13", "react": "^18.3.1", "react-dom": "^18.3.1", - "tailwind-merge": "^2.5.2", + "tailwind-merge": "^2.6.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { @@ -30,4 +30,4 @@ "tailwindcss": "^3.4.12", "typescript": "^5.6.2" } -} \ No newline at end of file +} diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..bd0c391 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } 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 923cdf5..e404152 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -8,33 +8,73 @@ const config: Config = { "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { - extend: { - colors: { - nord: { - 0: '#2E3440', - 1: '#3B4252', - 2: '#434C5E', - 3: '#4C566A', - 4: '#D8DEE9', - 5: '#E5E9F0', - 6: '#ECEFF4', - 7: '#8FBCBB', - 8: '#88C0D0', - 9: '#81A1C1', - 10: '#5E81AC', - 11: '#BF616A', - 12: '#D08770', - 13: '#EBCB8B', - 14: '#A3BE8C', - 15: '#B48EAD', - }, - }, - borderRadius: { - lg: 'var(--radius)', - md: 'calc(var(--radius) - 2px)', - sm: 'calc(var(--radius) - 4px)' - } - }, + extend: { + colors: { + nord: { + '0': '#2E3440', + '1': '#3B4252', + '2': '#434C5E', + '3': '#4C566A', + '4': '#D8DEE9', + '5': '#E5E9F0', + '6': '#ECEFF4', + '7': '#8FBCBB', + '8': '#88C0D0', + '9': '#81A1C1', + '10': '#5E81AC', + '11': '#BF616A', + '12': '#D08770', + '13': '#EBCB8B', + '14': '#A3BE8C', + '15': '#B48EAD' + }, + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))' + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))' + }, + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))' + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))' + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))' + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))' + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))' + }, + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + chart: { + '1': 'hsl(var(--chart-1))', + '2': 'hsl(var(--chart-2))', + '3': 'hsl(var(--chart-3))', + '4': 'hsl(var(--chart-4))', + '5': 'hsl(var(--chart-5))' + } + }, + borderRadius: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)' + } + } }, plugins: [require("tailwindcss-animate")], };