{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "theme-generator", "title": "Theme Generator", "description": "Generate light/dark theme CSS (including glass-effect variables) from a set of base colors.", "dependencies": [], "registryDependencies": [], "files": [ { "path": "lib/theme-generator.ts", "content": "export interface ThemeColors {\n primary: string;\n primaryForeground: string;\n background: string;\n foreground: string;\n card: string;\n cardForeground: string;\n popover: string;\n popoverForeground: string;\n secondary: string;\n secondaryForeground: string;\n muted: string;\n mutedForeground: string;\n accent: string;\n accentForeground: string;\n destructive: string;\n destructiveForeground: string;\n border: string;\n input: string;\n ring: string;\n radius?: string;\n // Glass effect variables\n glassBg?: string;\n glassBorder?: string;\n glassShadow?: string;\n glassShadowLg?: string;\n glassShadowSm?: string;\n blur?: string;\n blurSm?: string;\n blurLg?: string;\n // Dark mode glass variables\n darkGlassBg?: string;\n darkGlassBorder?: string;\n darkGlassShadow?: string;\n darkGlassShadowLg?: string;\n darkGlassShadowSm?: string;\n}\n\nexport function generateThemeCSS(colors: ThemeColors, darkColors?: Partial): string {\n const lightTheme = `:root {\n --radius: ${colors.radius || \"0.625rem\"};\n --primary: ${colors.primary};\n --primary-foreground: ${colors.primaryForeground};\n --background: ${colors.background};\n --foreground: ${colors.foreground};\n --card: ${colors.card};\n --card-foreground: ${colors.cardForeground};\n --popover: ${colors.popover};\n --popover-foreground: ${colors.popoverForeground};\n --secondary: ${colors.secondary};\n --secondary-foreground: ${colors.secondaryForeground};\n --muted: ${colors.muted};\n --muted-foreground: ${colors.mutedForeground};\n --accent: ${colors.accent};\n --accent-foreground: ${colors.accentForeground};\n --destructive: ${colors.destructive};\n --destructive-foreground: ${colors.destructiveForeground};\n --border: ${colors.border};\n --input: ${colors.input};\n --ring: ${colors.ring};\n \n /* Glass effect variables - Enhanced with gradient tint and border glow */\n --glass-bg: ${colors.glassBg || \"linear-gradient(in oklch, 135deg, oklch(100.000% 0.000000 0.000000 / 0.400000) 0%, oklch(100.000% 0.000000 0.000000 / 0.250000) 50%, oklch(97.6470% 0.010680 245.000000 / 0.300000) 100%)\"};\n --glass-border: ${colors.glassBorder || \"oklch(100.000% 0.000000 0.000000 / 0.300000)\"};\n --glass-shadow: ${colors.glassShadow || \"0 8px 32px oklch(0.000000% 0.000000 0.000000 / 0.120000), 0 2px 8px oklch(0.000000% 0.000000 0.000000 / 0.080000), 0 0 0 1px oklch(100.000% 0.000000 0.000000 / 0.100000) inset, 0 0 20px oklch(100.000% 0.000000 0.000000 / 0.050000)\"};\n --glass-shadow-lg: ${colors.glassShadowLg || \"0 12px 48px oklch(0.000000% 0.000000 0.000000 / 0.180000), 0 4px 16px oklch(0.000000% 0.000000 0.000000 / 0.120000), 0 0 0 1px oklch(100.000% 0.000000 0.000000 / 0.150000) inset, 0 0 30px oklch(100.000% 0.000000 0.000000 / 0.080000)\"};\n --glass-shadow-sm: ${colors.glassShadowSm || \"0 4px 16px oklch(0.000000% 0.000000 0.000000 / 0.100000), 0 1px 4px oklch(0.000000% 0.000000 0.000000 / 0.060000), 0 0 0 1px oklch(100.000% 0.000000 0.000000 / 0.080000) inset, 0 0 10px oklch(100.000% 0.000000 0.000000 / 0.030000)\"};\n --blur: ${colors.blur || \"30px\"};\n --blur-sm: ${colors.blurSm || \"15px\"};\n --blur-lg: ${colors.blurLg || \"50px\"};\n}`;\n\n const darkTheme = darkColors\n ? `\n.dark {\n --primary: ${darkColors.primary || colors.primary};\n --primary-foreground: ${darkColors.primaryForeground || colors.primaryForeground};\n --background: ${darkColors.background || colors.background};\n --foreground: ${darkColors.foreground || colors.foreground};\n --card: ${darkColors.card || colors.card};\n --card-foreground: ${darkColors.cardForeground || colors.cardForeground};\n --popover: ${darkColors.popover || colors.popover};\n --popover-foreground: ${darkColors.popoverForeground || colors.popoverForeground};\n --secondary: ${darkColors.secondary || colors.secondary};\n --secondary-foreground: ${darkColors.secondaryForeground || colors.secondaryForeground};\n --muted: ${darkColors.muted || colors.muted};\n --muted-foreground: ${darkColors.mutedForeground || colors.mutedForeground};\n --accent: ${darkColors.accent || colors.accent};\n --accent-foreground: ${darkColors.accentForeground || colors.accentForeground};\n --destructive: ${darkColors.destructive || colors.destructive};\n --destructive-foreground: ${darkColors.destructiveForeground || colors.destructiveForeground};\n --border: ${darkColors.border || colors.border};\n --input: ${darkColors.input || colors.input};\n --ring: ${darkColors.ring || colors.ring};\n \n /* Glass effect variables - Dark mode (Enhanced with gradient tint and border glow) */\n --glass-bg: ${colors.darkGlassBg || darkColors.darkGlassBg || \"linear-gradient(in oklch, 135deg, oklch(100.000% 0.000000 0.000000 / 0.150000) 0%, oklch(100.000% 0.000000 0.000000 / 0.080000) 50%, oklch(97.6470% 0.010680 245.000000 / 0.100000) 100%)\"};\n --glass-border: ${colors.darkGlassBorder || darkColors.darkGlassBorder || \"oklch(100.000% 0.000000 0.000000 / 0.250000)\"};\n --glass-shadow: ${colors.darkGlassShadow || darkColors.darkGlassShadow || \"0 8px 32px oklch(0.000000% 0.000000 0.000000 / 0.500000), 0 2px 8px oklch(0.000000% 0.000000 0.000000 / 0.300000), 0 0 0 1px oklch(100.000% 0.000000 0.000000 / 0.150000) inset, 0 0 20px oklch(100.000% 0.000000 0.000000 / 0.080000)\"};\n --glass-shadow-lg: ${colors.darkGlassShadowLg || darkColors.darkGlassShadowLg || \"0 12px 48px oklch(0.000000% 0.000000 0.000000 / 0.600000), 0 4px 16px oklch(0.000000% 0.000000 0.000000 / 0.400000), 0 0 0 1px oklch(100.000% 0.000000 0.000000 / 0.200000) inset, 0 0 30px oklch(100.000% 0.000000 0.000000 / 0.100000)\"};\n --glass-shadow-sm: ${colors.darkGlassShadowSm || darkColors.darkGlassShadowSm || \"0 4px 16px oklch(0.000000% 0.000000 0.000000 / 0.400000), 0 1px 4px oklch(0.000000% 0.000000 0.000000 / 0.200000), 0 0 0 1px oklch(100.000% 0.000000 0.000000 / 0.100000) inset, 0 0 10px oklch(100.000% 0.000000 0.000000 / 0.050000)\"};\n}`\n : \"\";\n\n return lightTheme + darkTheme;\n}\n\nexport const defaultTheme: ThemeColors = {\n primary: \"oklch(0.42 0 0)\", // neutral dark grey — \"pure glass\" primary; the tint comes from the glass overlay, not the token\n primaryForeground: \"oklch(0.98 0 0)\",\n background: \"transparent\", // glass / canvas shows through (the Sistine model)\n foreground: \"oklch(0.15 0 0)\",\n card: \"transparent\",\n cardForeground: \"oklch(0.15 0 0)\",\n popover: \"transparent\",\n popoverForeground: \"oklch(0.15 0 0)\",\n secondary: \"oklch(0.96 0 0)\",\n secondaryForeground: \"oklch(0.15 0 0)\",\n muted: \"oklch(0.85 0 0)\", // darker gray for light mode - avoids glass effect override\n mutedForeground: \"oklch(0.45 0 0)\",\n accent: \"oklch(0.96 0 0)\",\n accentForeground: \"oklch(0.15 0 0)\",\n destructive: \"oklch(0.55 0.22 25)\",\n destructiveForeground: \"oklch(0.98 0 0)\",\n border: \"oklch(0.88 0 0)\",\n input: \"oklch(0.88 0 0)\",\n ring: \"oklch(0.5 0.2 250)\",\n radius: \"1.25rem\",\n // Glass effect defaults - Enhanced with gradient tint and border glow\n glassBg:\n \"linear-gradient(in oklch, 135deg, oklch(100.000% 0.000000 0.000000 / 0.400000) 0%, oklch(100.000% 0.000000 0.000000 / 0.250000) 50%, oklch(97.6470% 0.010680 245.000000 / 0.300000) 100%)\",\n glassBorder: \"oklch(100.000% 0.000000 0.000000 / 0.300000)\",\n glassShadow:\n \"0 8px 32px oklch(0.000000% 0.000000 0.000000 / 0.120000), 0 2px 8px oklch(0.000000% 0.000000 0.000000 / 0.080000), 0 0 0 1px oklch(100.000% 0.000000 0.000000 / 0.100000) inset, 0 0 20px oklch(100.000% 0.000000 0.000000 / 0.050000)\",\n glassShadowLg:\n \"0 12px 48px oklch(0.000000% 0.000000 0.000000 / 0.180000), 0 4px 16px oklch(0.000000% 0.000000 0.000000 / 0.120000), 0 0 0 1px oklch(100.000% 0.000000 0.000000 / 0.150000) inset, 0 0 30px oklch(100.000% 0.000000 0.000000 / 0.080000)\",\n glassShadowSm:\n \"0 4px 16px oklch(0.000000% 0.000000 0.000000 / 0.100000), 0 1px 4px oklch(0.000000% 0.000000 0.000000 / 0.060000), 0 0 0 1px oklch(100.000% 0.000000 0.000000 / 0.080000) inset, 0 0 10px oklch(100.000% 0.000000 0.000000 / 0.030000)\",\n blur: \"30px\",\n blurSm: \"15px\",\n blurLg: \"50px\",\n // Dark mode glass defaults - Enhanced with gradient tint and border glow\n darkGlassBg:\n \"linear-gradient(in oklch, 135deg, oklch(100.000% 0.000000 0.000000 / 0.150000) 0%, oklch(100.000% 0.000000 0.000000 / 0.080000) 50%, oklch(97.6470% 0.010680 245.000000 / 0.100000) 100%)\",\n darkGlassBorder: \"oklch(100.000% 0.000000 0.000000 / 0.250000)\",\n darkGlassShadow:\n \"0 8px 32px oklch(0.000000% 0.000000 0.000000 / 0.500000), 0 2px 8px oklch(0.000000% 0.000000 0.000000 / 0.300000), 0 0 0 1px oklch(100.000% 0.000000 0.000000 / 0.150000) inset, 0 0 20px oklch(100.000% 0.000000 0.000000 / 0.080000)\",\n darkGlassShadowLg:\n \"0 12px 48px oklch(0.000000% 0.000000 0.000000 / 0.600000), 0 4px 16px oklch(0.000000% 0.000000 0.000000 / 0.400000), 0 0 0 1px oklch(100.000% 0.000000 0.000000 / 0.200000) inset, 0 0 30px oklch(100.000% 0.000000 0.000000 / 0.100000)\",\n darkGlassShadowSm:\n \"0 4px 16px oklch(0.000000% 0.000000 0.000000 / 0.400000), 0 1px 4px oklch(0.000000% 0.000000 0.000000 / 0.200000), 0 0 0 1px oklch(100.000% 0.000000 0.000000 / 0.100000) inset, 0 0 10px oklch(100.000% 0.000000 0.000000 / 0.050000)\",\n};\n", "type": "registry:lib", "target": "lib/theme-generator.ts" } ], "type": "registry:lib" }