{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "theme-catppuccin-v4-hsl", "title": "Catppuccin (Tailwind v4, HSL)", "description": "Soothing pastel theme for coders — Tailwind v4 / HSL variant.", "files": [ { "path": "registry/themes/variants/catppuccin.v4.hsl.css", "content": "/* Catppuccin Theme - Auto-generated from tweakcn */\r\n\r\n/* Light mode */\r\n[data-theme=\"catppuccin-light\"] {\r\n --background: hsl(220.01 45.46% 95.52%);\r\n --foreground: hsl(233.63 14.88% 35.73%);\r\n --card: hsl(300 50% 100%);\r\n --card-foreground: hsl(233.63 14.88% 35.73%);\r\n --popover: hsl(222.83 10.99% 82.7%);\r\n --popover-foreground: hsl(233.63 14.88% 35.73%);\r\n --primary: hsl(266.18 83.62% 57.35%);\r\n --primary-foreground: hsl(300 50% 100%);\r\n --secondary: hsl(222.83 10.99% 82.7%);\r\n --secondary-foreground: hsl(233.63 14.88% 35.73%);\r\n --muted: hsl(220 18.32% 89.02%);\r\n --muted-foreground: hsl(232.64 9.12% 47.2%);\r\n --accent: hsl(198.41 80.25% 49.14%);\r\n --accent-foreground: hsl(300 50% 100%);\r\n --destructive: hsl(344.77 97.82% 41.92%);\r\n --destructive-foreground: hsl(300 50% 100%);\r\n --border: hsl(225.03 15.88% 77.3%);\r\n --input: hsl(222.83 10.99% 82.7%);\r\n --ring: hsl(266.18 83.62% 57.35%);\r\n --chart-1: hsl(266.18 83.62% 57.35%);\r\n --chart-2: hsl(198.41 80.25% 49.14%);\r\n --chart-3: hsl(109.12 58.68% 40.01%);\r\n --chart-4: hsl(20.98 97.16% 53.3%);\r\n --chart-5: hsl(10.84 55.33% 66.1%);\r\n --radius: 0.35rem;\r\n --sidebar: hsl(220 24.1% 91.61%);\r\n --sidebar-foreground: hsl(233.63 14.88% 35.73%);\r\n --sidebar-primary: hsl(266.18 83.62% 57.35%);\r\n --sidebar-primary-foreground: hsl(300 50% 100%);\r\n --sidebar-accent: hsl(198.41 80.25% 49.14%);\r\n --sidebar-accent-foreground: hsl(300 50% 100%);\r\n --sidebar-border: hsl(225.03 15.88% 77.3%);\r\n --sidebar-ring: hsl(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: hsl(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 */\r\n[data-theme=\"catppuccin-dark\"] {\r\n --background: hsl(240.53 23.84% 12.7%);\r\n --foreground: hsl(226.12 59.94% 87.99%);\r\n --card: hsl(240 21.17% 14.6%);\r\n --card-foreground: hsl(226.12 59.94% 87.99%);\r\n --popover: hsl(234.2 12.62% 30.62%);\r\n --popover-foreground: hsl(226.12 59.94% 87.99%);\r\n --primary: hsl(267.43 86.56% 81.43%);\r\n --primary-foreground: hsl(240 21.17% 14.6%);\r\n --secondary: hsl(232.33 10.64% 39.26%);\r\n --secondary-foreground: hsl(226.12 59.94% 87.99%);\r\n --muted: hsl(230.54 18.95% 20.11%);\r\n --muted-foreground: hsl(227.65 23.79% 71.68%);\r\n --accent: hsl(189.22 69.9% 73.79%);\r\n --accent-foreground: hsl(240 21.17% 14.6%);\r\n --destructive: hsl(343.28 83.47% 75.48%);\r\n --destructive-foreground: hsl(240 21.17% 14.6%);\r\n --border: hsl(236.73 15.65% 22.38%);\r\n --input: hsl(236.73 15.65% 22.38%);\r\n --ring: hsl(267.43 86.56% 81.43%);\r\n --chart-1: hsl(267.43 86.56% 81.43%);\r\n --chart-2: hsl(189.22 69.9% 73.79%);\r\n --chart-3: hsl(115.47 55.09% 76.32%);\r\n --chart-4: hsl(22.94 89.06% 75.08%);\r\n --chart-5: hsl(9.61 44.09% 90.65%);\r\n --radius: 0.35rem;\r\n --sidebar: hsl(239.98 22.96% 8.35%);\r\n --sidebar-foreground: hsl(226.12 59.94% 87.99%);\r\n --sidebar-primary: hsl(267.43 86.56% 81.43%);\r\n --sidebar-primary-foreground: hsl(240 21.17% 14.6%);\r\n --sidebar-accent: hsl(189.22 69.9% 73.79%);\r\n --sidebar-accent-foreground: hsl(240 21.17% 14.6%);\r\n --sidebar-border: hsl(234.2 12.62% 30.62%);\r\n --sidebar-ring: hsl(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: hsl(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", "type": "registry:file", "target": "styles/themes/catppuccin.css" } ], "meta": { "generatedVariant": true }, "type": "registry:theme" }