From a08d6ac2e4ec480439615ffa6029fa876728173e Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Fri, 27 Feb 2026 20:44:38 +0000 Subject: [PATCH] Applied theme Orchid Applied theme in Lovable --- src/index.css | 120 ++++++++++++++++++------ tailwind.config.ts | 224 ++++++++++++++++++++++++++++----------------- 2 files changed, 230 insertions(+), 114 deletions(-) diff --git a/src/index.css b/src/index.css index df98860..f570998 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,7 @@ @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; @@ -6,47 +9,108 @@ @layer base { :root { - --background: 220 20% 7%; - --foreground: 210 20% 92%; + --background: 240 4% 95%; + --foreground: 240 5% 10%; - --card: 220 18% 10%; - --card-foreground: 210 20% 92%; + --card: 0 0% 98%; + --card-foreground: 240 5% 10%; - --popover: 220 18% 10%; - --popover-foreground: 210 20% 92%; + --popover: 240 5% 90%; + --popover-foreground: 240 5% 10%; - --primary: 38 92% 55%; - --primary-foreground: 220 20% 7%; + --primary: 333 71% 50%; + --primary-foreground: 327 73% 97%; - --secondary: 220 16% 16%; - --secondary-foreground: 210 20% 85%; + --secondary: 240 5% 33%; + --secondary-foreground: 0 0% 98%; - --muted: 220 14% 14%; - --muted-foreground: 215 12% 55%; + --muted: 240 4% 83%; + --muted-foreground: 240 5% 10%; - --accent: 200 80% 50%; - --accent-foreground: 220 20% 7%; + --accent: 355 100% 97%; + --accent-foreground: 349 89% 60%; - --destructive: 0 72% 51%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 72% 50%; + --destructive-foreground: 0 85% 97%; --success: 142 72% 42%; --success-foreground: 220 20% 7%; - --border: 220 14% 18%; - --input: 220 14% 18%; - --ring: 38 92% 55%; + --border: 240 4% 83%; + --input: 240 4% 83%; + --ring: 333 71% 50%; - --radius: 0.5rem; + --radius: 1.5rem; --sidebar-background: 220 18% 9%; - --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%; + --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); } } @@ -92,4 +156,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 58f082f..d7f47ba 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -5,92 +5,144 @@ 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", "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", - }, - }, + 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)' + } + } }, plugins: [require("tailwindcss-animate")], } satisfies Config;