Applied theme Orchid

Applied theme in Lovable

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%;
+    --background: 240 4% 95%;
-    --foreground: 210 20% 92%;
+    --foreground: 240 5% 10%;
 
-    --card: 220 18% 10%;
+    --card: 0 0% 98%;
-    --card-foreground: 210 20% 92%;
+    --card-foreground: 240 5% 10%;
 
-    --popover: 220 18% 10%;
+    --popover: 240 5% 90%;
-    --popover-foreground: 210 20% 92%;
+    --popover-foreground: 240 5% 10%;
 
-    --primary: 38 92% 55%;
+    --primary: 333 71% 50%;
-    --primary-foreground: 220 20% 7%;
+    --primary-foreground: 327 73% 97%;
 
-    --secondary: 220 16% 16%;
+    --secondary: 240 5% 33%;
-    --secondary-foreground: 210 20% 85%;
+    --secondary-foreground: 0 0% 98%;
 
-    --muted: 220 14% 14%;
+    --muted: 240 4% 83%;
-    --muted-foreground: 215 12% 55%;
+    --muted-foreground: 240 5% 10%;
 
-    --accent: 200 80% 50%;
+    --accent: 355 100% 97%;
-    --accent-foreground: 220 20% 7%;
+    --accent-foreground: 349 89% 60%;
 
-    --destructive: 0 72% 51%;
+    --destructive: 0 72% 50%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive-foreground: 0 85% 97%;
 
     --success: 142 72% 42%;
     --success-foreground: 220 20% 7%;
 
-    --border: 220 14% 18%;
+    --border: 240 4% 83%;
-    --input: 220 14% 18%;
+    --input: 240 4% 83%;
-    --ring: 38 92% 55%;
+    --ring: 333 71% 50%;
 
-    --radius: 0.5rem;
+    --radius: 1.5rem;
 
     --sidebar-background: 220 18% 9%;
-    --sidebar-foreground: 210 20% 85%;
+    --sidebar-foreground: 240 5% 10%;
-    --sidebar-primary: 38 92% 55%;
+    --sidebar-primary: 333 71% 50%;
-    --sidebar-primary-foreground: 220 20% 7%;
+    --sidebar-primary-foreground: 327 73% 97%;
-    --sidebar-accent: 220 14% 14%;
+    --sidebar-accent: 240 5% 33%;
-    --sidebar-accent-foreground: 210 20% 85%;
+    --sidebar-accent-foreground: 0 0% 98%;
-    --sidebar-border: 220 14% 18%;
+    --sidebar-border: 240 4% 83%;
-    --sidebar-ring: 38 92% 55%;
+    --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);
   }
 }
 

tailwind.config.ts

@@ -7,90 +7,142 @@ export default {
   theme: {
   	container: {
   		center: true,
-      padding: "2rem",
+  		padding: '2rem',
   		screens: {
-        "2xl": "1400px",
+  			'2xl': '1400px'
-      },
+  		}
   	},
   	extend: {
   		fontFamily: {
-        mono: ["JetBrains Mono", "monospace"],
+  			mono: [
-        sans: ["Inter", "system-ui", "sans-serif"],
+  				'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))",
+  			border: 'hsl(var(--border))',
-        input: "hsl(var(--input))",
+  			input: 'hsl(var(--input))',
-        ring: "hsl(var(--ring))",
+  			ring: 'hsl(var(--ring))',
-        background: "hsl(var(--background))",
+  			background: 'hsl(var(--background))',
-        foreground: "hsl(var(--foreground))",
+  			foreground: 'hsl(var(--foreground))',
   			primary: {
-          DEFAULT: "hsl(var(--primary))",
+  				DEFAULT: 'hsl(var(--primary))',
-          foreground: "hsl(var(--primary-foreground))",
+  				foreground: 'hsl(var(--primary-foreground))'
   			},
   			secondary: {
-          DEFAULT: "hsl(var(--secondary))",
+  				DEFAULT: 'hsl(var(--secondary))',
-          foreground: "hsl(var(--secondary-foreground))",
+  				foreground: 'hsl(var(--secondary-foreground))'
   			},
   			destructive: {
-          DEFAULT: "hsl(var(--destructive))",
+  				DEFAULT: 'hsl(var(--destructive))',
-          foreground: "hsl(var(--destructive-foreground))",
+  				foreground: 'hsl(var(--destructive-foreground))'
   			},
   			success: {
-          DEFAULT: "hsl(var(--success))",
+  				DEFAULT: 'hsl(var(--success))',
-          foreground: "hsl(var(--success-foreground))",
+  				foreground: 'hsl(var(--success-foreground))'
   			},
   			muted: {
-          DEFAULT: "hsl(var(--muted))",
+  				DEFAULT: 'hsl(var(--muted))',
-          foreground: "hsl(var(--muted-foreground))",
+  				foreground: 'hsl(var(--muted-foreground))'
   			},
   			accent: {
-          DEFAULT: "hsl(var(--accent))",
+  				DEFAULT: 'hsl(var(--accent))',
-          foreground: "hsl(var(--accent-foreground))",
+  				foreground: 'hsl(var(--accent-foreground))'
   			},
   			popover: {
-          DEFAULT: "hsl(var(--popover))",
+  				DEFAULT: 'hsl(var(--popover))',
-          foreground: "hsl(var(--popover-foreground))",
+  				foreground: 'hsl(var(--popover-foreground))'
   			},
   			card: {
-          DEFAULT: "hsl(var(--card))",
+  				DEFAULT: 'hsl(var(--card))',
-          foreground: "hsl(var(--card-foreground))",
+  				foreground: 'hsl(var(--card-foreground))'
   			},
   			sidebar: {
-          DEFAULT: "hsl(var(--sidebar-background))",
+  				DEFAULT: 'hsl(var(--sidebar-background))',
-          foreground: "hsl(var(--sidebar-foreground))",
+  				foreground: 'hsl(var(--sidebar-foreground))',
-          primary: "hsl(var(--sidebar-primary))",
+  				primary: 'hsl(var(--sidebar-primary))',
-          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          accent: "hsl(var(--sidebar-accent))",
+  				accent: 'hsl(var(--sidebar-accent))',
-          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          border: "hsl(var(--sidebar-border))",
+  				border: 'hsl(var(--sidebar-border))',
-          ring: "hsl(var(--sidebar-ring))",
+  				ring: 'hsl(var(--sidebar-ring))'
-        },
+  			}
   		},
   		borderRadius: {
-        lg: "var(--radius)",
+  			lg: 'var(--radius)',
-        md: "calc(var(--radius) - 2px)",
+  			md: 'calc(var(--radius) - 2px)',
-        sm: "calc(var(--radius) - 4px)",
+  			sm: 'calc(var(--radius) - 4px)'
   		},
   		keyframes: {
-        "accordion-down": {
+  			'accordion-down': {
-          from: { height: "0" },
+  				from: {
-          to: { height: "var(--radix-accordion-content-height)" },
+  					height: '0'
   				},
-        "accordion-up": {
+  				to: {
-          from: { height: "var(--radix-accordion-content-height)" },
+  					height: 'var(--radix-accordion-content-height)'
-          to: { height: "0" },
+  				}
   			},
-        "pulse-glow": {
+  			'accordion-up': {
-          "0%, 100%": { opacity: "1" },
+  				from: {
-          "50%": { opacity: "0.5" },
+  					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-down': 'accordion-down 0.2s ease-out',
-        "accordion-up": "accordion-up 0.2s ease-out",
+  			'accordion-up': 'accordion-up 0.2s ease-out',
-        "pulse-glow": "pulse-glow 2s ease-in-out infinite",
+  			'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;