diff --git a/src/index.css b/src/index.css index f570998..df98860 100644 --- a/src/index.css +++ b/src/index.css @@ -1,7 +1,4 @@ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap'); -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); -@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap"); -@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap"); @tailwind base; @tailwind components; @@ -9,108 +6,47 @@ @layer base { :root { - --background: 240 4% 95%; - --foreground: 240 5% 10%; + --background: 220 20% 7%; + --foreground: 210 20% 92%; - --card: 0 0% 98%; - --card-foreground: 240 5% 10%; + --card: 220 18% 10%; + --card-foreground: 210 20% 92%; - --popover: 240 5% 90%; - --popover-foreground: 240 5% 10%; + --popover: 220 18% 10%; + --popover-foreground: 210 20% 92%; - --primary: 333 71% 50%; - --primary-foreground: 327 73% 97%; + --primary: 38 92% 55%; + --primary-foreground: 220 20% 7%; - --secondary: 240 5% 33%; - --secondary-foreground: 0 0% 98%; + --secondary: 220 16% 16%; + --secondary-foreground: 210 20% 85%; - --muted: 240 4% 83%; - --muted-foreground: 240 5% 10%; + --muted: 220 14% 14%; + --muted-foreground: 215 12% 55%; - --accent: 355 100% 97%; - --accent-foreground: 349 89% 60%; + --accent: 200 80% 50%; + --accent-foreground: 220 20% 7%; - --destructive: 0 72% 50%; - --destructive-foreground: 0 85% 97%; + --destructive: 0 72% 51%; + --destructive-foreground: 210 40% 98%; --success: 142 72% 42%; --success-foreground: 220 20% 7%; - --border: 240 4% 83%; - --input: 240 4% 83%; - --ring: 333 71% 50%; + --border: 220 14% 18%; + --input: 220 14% 18%; + --ring: 38 92% 55%; - --radius: 1.5rem; + --radius: 0.5rem; --sidebar-background: 220 18% 9%; - --sidebar-foreground: 240 5% 10%; - --sidebar-primary: 333 71% 50%; - --sidebar-primary-foreground: 327 73% 97%; - --sidebar-accent: 240 5% 33%; - --sidebar-accent-foreground: 0 0% 98%; - --sidebar-border: 240 4% 83%; - --sidebar-ring: 333 71% 50%; - --chart-1: 328 85% 70%; - --chart-2: 351 94% 71%; - --chart-3: 327 87% 81%; - --chart-4: 352 95% 81%; - --chart-5: 240 3% 46%; - --sidebar: 0 0% 98%; - --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; - --font-serif: 'Merriweather', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; - --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; - --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); - --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); - --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); - --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); - --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1); - --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1); - --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1); - --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25); - --tracking-normal: 0em; - --spacing: 0.25rem; - } - .dark { - --background: 240 5% 10%; - --foreground: 0 0% 98%; - --card: 240 3% 15%; - --card-foreground: 0 0% 98%; - --popover: 240 5% 26%; - --popover-foreground: 0 0% 98%; - --primary: 328 85% 70%; - --primary-foreground: 336 83% 17%; - --secondary: 240 3% 46%; - --secondary-foreground: 0 0% 98%; - --muted: 240 3% 46%; - --muted-foreground: 0 0% 98%; - --accent: 343 87% 15%; - --accent-foreground: 351 94% 71%; - --destructive: 0 84% 60%; - --destructive-foreground: 0 85% 97%; - --border: 240 5% 33%; - --input: 240 5% 33%; - --ring: 328 85% 70%; - --chart-1: 327 87% 81%; - --chart-2: 352 95% 81%; - --chart-3: 328 85% 70%; - --chart-4: 351 94% 71%; - --chart-5: 240 5% 33%; - --sidebar: 240 3% 15%; - --sidebar-foreground: 0 0% 98%; - --sidebar-primary: 328 85% 70%; - --sidebar-primary-foreground: 336 83% 17%; - --sidebar-accent: 351 94% 71%; - --sidebar-accent-foreground: 343 87% 15%; - --sidebar-border: 240 5% 33%; - --sidebar-ring: 328 85% 70%; - --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); - --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); - --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); - --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); - --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1); - --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1); - --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1); - --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25); + --sidebar-foreground: 210 20% 85%; + --sidebar-primary: 38 92% 55%; + --sidebar-primary-foreground: 220 20% 7%; + --sidebar-accent: 220 14% 14%; + --sidebar-accent-foreground: 210 20% 85%; + --sidebar-border: 220 14% 18%; + --sidebar-ring: 38 92% 55%; } } @@ -156,4 +92,4 @@ linear-gradient(90deg, hsl(220 14% 18% / 0.5) 1px, transparent 1px); background-size: 20px 20px; } -} \ No newline at end of file +} diff --git a/tailwind.config.ts b/tailwind.config.ts index d7f47ba..58f082f 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -5,144 +5,92 @@ 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: { - fontFamily: { - mono: [ - 'JetBrains Mono', - 'ui-monospace', - 'SFMono-Regular', - 'Menlo', - 'Monaco', - 'Consolas', - 'Liberation Mono', - 'Courier New', - 'monospace' - ], - sans: [ - 'Poppins', - 'ui-sans-serif', - 'system-ui', - '-apple-system', - 'BlinkMacSystemFont', - 'Segoe UI', - 'Roboto', - 'Helvetica Neue', - 'Arial', - 'Noto Sans', - 'sans-serif' - ], - serif: [ - 'Merriweather', - 'ui-serif', - 'Georgia', - 'Cambria', - 'Times New Roman', - 'Times', - 'serif' - ] - }, - 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))' - }, - success: { - DEFAULT: 'hsl(var(--success))', - foreground: 'hsl(var(--success-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' - } - }, - 'pulse-glow': { - '0%, 100%': { - opacity: '1' - }, - '50%': { - opacity: '0.5' - } - } - }, - animation: { - 'accordion-down': 'accordion-down 0.2s ease-out', - 'accordion-up': 'accordion-up 0.2s ease-out', - 'pulse-glow': 'pulse-glow 2s ease-in-out infinite' - }, - 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)' - } - } + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, + extend: { + fontFamily: { + mono: ["JetBrains Mono", "monospace"], + sans: ["Inter", "system-ui", "sans-serif"], + }, + 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))", + }, + success: { + DEFAULT: "hsl(var(--success))", + foreground: "hsl(var(--success-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" }, + }, + "pulse-glow": { + "0%, 100%": { opacity: "1" }, + "50%": { opacity: "0.5" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + "pulse-glow": "pulse-glow 2s ease-in-out infinite", + }, + }, }, plugins: [require("tailwindcss-animate")], } satisfies Config;