From cd367f31bf2b777a31026b29c337bca6640df4d7 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Thu, 18 Dec 2025 06:26:43 +0000 Subject: [PATCH] Changes --- src/index.css | 158 +++++++++++++++++++++++----------- tailwind.config.ts | 206 +++++++++++++++++++++++++++------------------ 2 files changed, 232 insertions(+), 132 deletions(-) diff --git a/src/index.css b/src/index.css index 4844bbd..600b8ac 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,6 @@ +@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; @@ -9,88 +12,141 @@ All colors MUST be HSL. @layer base { :root { --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; + --foreground: 0 0% 0%; --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; + --card-foreground: 0 0% 0%; --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; + --popover-foreground: 0 0% 0%; - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; + --primary: 0 0% 0%; + --primary-foreground: 0 0% 100%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; + --secondary: 0 0% 96%; + --secondary-foreground: 0 0% 0%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; + --muted: 0 0% 96%; + --muted-foreground: 0 0% 45%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; + --accent: 0 0% 90%; + --accent-foreground: 0 0% 0%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 84% 60%; + --destructive-foreground: 0 0% 98%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; + --border: 0 0% 0%; + --input: 0 0% 0%; + --ring: 0 0% 0%; - --radius: 0.5rem; + --radius: 0rem; --sidebar-background: 0 0% 98%; - --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-foreground: 0 0% 0%; - --sidebar-primary: 240 5.9% 10%; + --sidebar-primary: 0 0% 0%; - --sidebar-primary-foreground: 0 0% 98%; + --sidebar-primary-foreground: 0 0% 100%; - --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent: 0 0% 90%; - --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-accent-foreground: 0 0% 0%; - --sidebar-border: 220 13% 91%; + --sidebar-border: 0 0% 0%; - --sidebar-ring: 217.2 91.2% 59.8%; + --sidebar-ring: 0 0% 0%; + + --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%; + + --sidebar: 0 0% 98%; + + --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; + + --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; + + --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + + --shadow-2xs: 1px 1px 0px 0px #000000; + + --shadow-xs: 2px 2px 0px 0px #000000; + + --shadow-sm: 3px 3px 0px 0px #000000; + + --shadow: 5px 5px 0px 0px #000000; + + --shadow-md: 8px 8px 0px 0px #000000; + + --shadow-lg: 12px 12px 0px 0px #000000; + + --shadow-xl: 16px 16px 0px 0px #000000; + + --shadow-2xl: 24px 24px 0px 0px #000000; + + --tracking-normal: 0em; + + --spacing: 0.25rem; } .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; + --background: 0 0% 0%; + --foreground: 0 0% 100%; - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; + --card: 0 0% 0%; + --card-foreground: 0 0% 100%; - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; + --popover: 0 0% 0%; + --popover-foreground: 0 0% 100%; - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; + --primary: 0 0% 100%; + --primary-foreground: 0 0% 0%; - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; + --secondary: 0 0% 15%; + --secondary-foreground: 0 0% 100%; - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; + --muted: 0 0% 15%; + --muted-foreground: 0 0% 65%; - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; + --accent: 0 0% 15%; + --accent-foreground: 0 0% 100%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 62% 30%; + --destructive-foreground: 0 0% 100%; - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; + --border: 0 0% 100%; + --input: 0 0% 100%; + --ring: 0 0% 100%; --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%; + --sidebar-foreground: 0 0% 100%; + --sidebar-primary: 0 0% 100%; + --sidebar-primary-foreground: 0 0% 0%; + --sidebar-accent: 0 0% 15%; + --sidebar-accent-foreground: 0 0% 100%; + --sidebar-border: 0 0% 100%; + --sidebar-ring: 0 0% 100%; + --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%; + --sidebar: 0 0% 5%; + --radius: 0rem; + --shadow-2xs: 1px 1px 0px 0px #ffffff; + --shadow-xs: 2px 2px 0px 0px #ffffff; + --shadow-sm: 3px 3px 0px 0px #ffffff; + --shadow: 5px 5px 0px 0px #ffffff; + --shadow-md: 8px 8px 0px 0px #ffffff; + --shadow-lg: 12px 12px 0px 0px #ffffff; + --shadow-xl: 16px 16px 0px 0px #ffffff; + --shadow-2xl: 24px 24px 0px 0px #ffffff; } } @@ -102,4 +158,4 @@ All colors MUST be HSL. body { @apply bg-background text-foreground; } -} +} \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts index a1edb69..adf1b0a 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -5,87 +5,131 @@ export default { content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], prefix: "", 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: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", - }, - 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", - }, - }, - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - }, - }, + 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: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)' + }, + 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' + } + } + }, + animation: { + 'accordion-down': 'accordion-down 0.2s ease-out', + 'accordion-up': 'accordion-up 0.2s ease-out' + }, + fontFamily: { + sans: [ + 'Space Grotesk', + 'ui-sans-serif', + 'system-ui', + '-apple-system', + 'BlinkMacSystemFont', + 'Segoe UI', + 'Roboto', + 'Helvetica Neue', + 'Arial', + 'Noto Sans', + 'sans-serif' + ], + serif: [ + 'Lora', + 'ui-serif', + 'Georgia', + 'Cambria', + 'Times New Roman', + 'Times', + 'serif' + ], + mono: [ + 'Space Mono', + 'ui-monospace', + 'SFMono-Regular', + 'Menlo', + 'Monaco', + 'Consolas', + 'Liberation Mono', + 'Courier New', + 'monospace' + ] + }, + boxShadow: { + '2xs': 'var(--shadow-2xs)', + xs: 'var(--shadow-xs)', + sm: 'var(--shadow-sm)', + md: 'var(--shadow-md)', + lg: 'var(--shadow-lg)', + xl: 'var(--shadow-xl)', + '2xl': 'var(--shadow-2xl)' + } + } }, plugins: [require("tailwindcss-animate")], } satisfies Config;