{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "theme-catppuccin-v3-hsl", "title": "Catppuccin (Tailwind v3, HSL)", "description": "Soothing pastel theme for coders — Tailwind v3 / HSL variant.", "files": [ { "path": "registry/themes/variants/catppuccin.v3.hsl.css", "content": "/* Catppuccin Theme — Tailwind v3 (hsl) */\r\n/* Channel triplets — consume via hsl(var(--token)). See tailwind.config snippet in docs. */\r\n\r\n@layer base {\r\n /* Catppuccin Theme - Auto-generated from tweakcn */\r\n\r\n /* Light mode (:root) */\r\n :root {\r\n --background: 220.01 45.46% 95.52%;\r\n --foreground: 233.63 14.88% 35.73%;\r\n --card: 300 50% 100%;\r\n --card-foreground: 233.63 14.88% 35.73%;\r\n --popover: 222.83 10.99% 82.7%;\r\n --popover-foreground: 233.63 14.88% 35.73%;\r\n --primary: 266.18 83.62% 57.35%;\r\n --primary-foreground: 300 50% 100%;\r\n --secondary: 222.83 10.99% 82.7%;\r\n --secondary-foreground: 233.63 14.88% 35.73%;\r\n --muted: 220 18.32% 89.02%;\r\n --muted-foreground: 232.64 9.12% 47.2%;\r\n --accent: 198.41 80.25% 49.14%;\r\n --accent-foreground: 300 50% 100%;\r\n --destructive: 344.77 97.82% 41.92%;\r\n --destructive-foreground: 300 50% 100%;\r\n --border: 225.03 15.88% 77.3%;\r\n --input: 222.83 10.99% 82.7%;\r\n --ring: 266.18 83.62% 57.35%;\r\n --chart-1: 266.18 83.62% 57.35%;\r\n --chart-2: 198.41 80.25% 49.14%;\r\n --chart-3: 109.12 58.68% 40.01%;\r\n --chart-4: 20.98 97.16% 53.3%;\r\n --chart-5: 10.84 55.33% 66.1%;\r\n --radius: 0.35rem;\r\n --sidebar: 220 24.1% 91.61%;\r\n --sidebar-foreground: 233.63 14.88% 35.73%;\r\n --sidebar-primary: 266.18 83.62% 57.35%;\r\n --sidebar-primary-foreground: 300 50% 100%;\r\n --sidebar-accent: 198.41 80.25% 49.14%;\r\n --sidebar-accent-foreground: 300 50% 100%;\r\n --sidebar-border: 225.03 15.88% 77.3%;\r\n --sidebar-ring: 266.18 83.62% 57.35%;\r\n --font-sans: Montserrat, sans-serif;\r\n --font-serif: Georgia, serif;\r\n --font-mono: Fira Code, monospace;\r\n --shadow-color: 240 30% 25%;\r\n --shadow-opacity: 0.12;\r\n --shadow-blur: 6px;\r\n --shadow-spread: 0px;\r\n --shadow-offset-x: 0px;\r\n --shadow-offset-y: 4px;\r\n --letter-spacing: 0em;\r\n --spacing: 0.25rem;\r\n --shadow-2xs: 0px 4px 6px 0px hsl(240 30% 25% / 0.06);\r\n --shadow-xs: 0px 4px 6px 0px hsl(240 30% 25% / 0.06);\r\n --shadow-sm:\r\n 0px 4px 6px 0px hsl(240 30% 25% / 0.12),\r\n 0px 1px 2px -1px hsl(240 30% 25% / 0.12);\r\n --shadow:\r\n 0px 4px 6px 0px hsl(240 30% 25% / 0.12),\r\n 0px 1px 2px -1px hsl(240 30% 25% / 0.12);\r\n --shadow-md:\r\n 0px 4px 6px 0px hsl(240 30% 25% / 0.12),\r\n 0px 2px 4px -1px hsl(240 30% 25% / 0.12);\r\n --shadow-lg:\r\n 0px 4px 6px 0px hsl(240 30% 25% / 0.12),\r\n 0px 4px 6px -1px hsl(240 30% 25% / 0.12);\r\n --shadow-xl:\r\n 0px 4px 6px 0px hsl(240 30% 25% / 0.12),\r\n 0px 8px 10px -1px hsl(240 30% 25% / 0.12);\r\n --shadow-2xl: 0px 4px 6px 0px hsl(240 30% 25% / 0.3);\r\n --tracking-normal: 0em;\r\n }\r\n\r\n /* Dark mode (.dark) */\r\n .dark {\r\n --background: 240.53 23.84% 12.7%;\r\n --foreground: 226.12 59.94% 87.99%;\r\n --card: 240 21.17% 14.6%;\r\n --card-foreground: 226.12 59.94% 87.99%;\r\n --popover: 234.2 12.62% 30.62%;\r\n --popover-foreground: 226.12 59.94% 87.99%;\r\n --primary: 267.43 86.56% 81.43%;\r\n --primary-foreground: 240 21.17% 14.6%;\r\n --secondary: 232.33 10.64% 39.26%;\r\n --secondary-foreground: 226.12 59.94% 87.99%;\r\n --muted: 230.54 18.95% 20.11%;\r\n --muted-foreground: 227.65 23.79% 71.68%;\r\n --accent: 189.22 69.9% 73.79%;\r\n --accent-foreground: 240 21.17% 14.6%;\r\n --destructive: 343.28 83.47% 75.48%;\r\n --destructive-foreground: 240 21.17% 14.6%;\r\n --border: 236.73 15.65% 22.38%;\r\n --input: 236.73 15.65% 22.38%;\r\n --ring: 267.43 86.56% 81.43%;\r\n --chart-1: 267.43 86.56% 81.43%;\r\n --chart-2: 189.22 69.9% 73.79%;\r\n --chart-3: 115.47 55.09% 76.32%;\r\n --chart-4: 22.94 89.06% 75.08%;\r\n --chart-5: 9.61 44.09% 90.65%;\r\n --radius: 0.35rem;\r\n --sidebar: 239.98 22.96% 8.35%;\r\n --sidebar-foreground: 226.12 59.94% 87.99%;\r\n --sidebar-primary: 267.43 86.56% 81.43%;\r\n --sidebar-primary-foreground: 240 21.17% 14.6%;\r\n --sidebar-accent: 189.22 69.9% 73.79%;\r\n --sidebar-accent-foreground: 240 21.17% 14.6%;\r\n --sidebar-border: 234.2 12.62% 30.62%;\r\n --sidebar-ring: 267.43 86.56% 81.43%;\r\n --font-sans: Montserrat, sans-serif;\r\n --font-serif: Georgia, serif;\r\n --font-mono: Fira Code, monospace;\r\n --shadow-color: 240 30% 25%;\r\n --shadow-opacity: 0.12;\r\n --shadow-blur: 6px;\r\n --shadow-spread: 0px;\r\n --shadow-offset-x: 0px;\r\n --shadow-offset-y: 4px;\r\n --letter-spacing: 0em;\r\n --spacing: 0.25rem;\r\n --shadow-2xs: 0px 4px 6px 0px hsl(240 30% 25% / 0.06);\r\n --shadow-xs: 0px 4px 6px 0px hsl(240 30% 25% / 0.06);\r\n --shadow-sm:\r\n 0px 4px 6px 0px hsl(240 30% 25% / 0.12),\r\n 0px 1px 2px -1px hsl(240 30% 25% / 0.12);\r\n --shadow:\r\n 0px 4px 6px 0px hsl(240 30% 25% / 0.12),\r\n 0px 1px 2px -1px hsl(240 30% 25% / 0.12);\r\n --shadow-md:\r\n 0px 4px 6px 0px hsl(240 30% 25% / 0.12),\r\n 0px 2px 4px -1px hsl(240 30% 25% / 0.12);\r\n --shadow-lg:\r\n 0px 4px 6px 0px hsl(240 30% 25% / 0.12),\r\n 0px 4px 6px -1px hsl(240 30% 25% / 0.12);\r\n --shadow-xl:\r\n 0px 4px 6px 0px hsl(240 30% 25% / 0.12),\r\n 0px 8px 10px -1px hsl(240 30% 25% / 0.12);\r\n --shadow-2xl: 0px 4px 6px 0px hsl(240 30% 25% / 0.3);\r\n }\r\n\r\n}\r\n", "type": "registry:file", "target": "styles/themes/catppuccin.css" } ], "meta": { "generatedVariant": true }, "type": "registry:theme" }