101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
import { ThemeConfig, ThemeColors } from "./ThemeConfig";
|
|
|
|
export function exportConfigToCss(config: ThemeConfig): string {
|
|
let css = "";
|
|
|
|
// Export light mode colors
|
|
if (config.colors && Object.keys(config.colors).length > 0) {
|
|
css += ":root {\n";
|
|
|
|
// Add font family if present
|
|
if (config.fontFamily) {
|
|
css += ` --font-sans: ${config.fontFamily};\n`;
|
|
}
|
|
// Add radius if present
|
|
if (config.radius) {
|
|
css += ` --radius: ${config.radius};\n`;
|
|
}
|
|
|
|
css += exportColors(config.colors);
|
|
|
|
css += "}\n";
|
|
}
|
|
|
|
// Export dark mode colors
|
|
if (config.darkColors && Object.keys(config.darkColors).length > 0) {
|
|
if (css) css += "\n";
|
|
css += ".dark {\n";
|
|
|
|
if (config.fontFamily) {
|
|
css += ` --font-sans: ${config.fontFamily};\n`;
|
|
}
|
|
|
|
// Add radius if different from light mode
|
|
if (config.radius && !config.colors) {
|
|
css += ` --radius: ${config.radius};\n`;
|
|
}
|
|
|
|
css += exportColors(config.darkColors);
|
|
|
|
css += "}\n";
|
|
}
|
|
|
|
// If no colors but has other config, export to :root
|
|
if (!css && (config.radius || config.fontFamily)) {
|
|
css += ":root {\n";
|
|
if (config.fontFamily) {
|
|
css += ` --font-sans: ${config.fontFamily};\n`;
|
|
}
|
|
if (config.radius) {
|
|
css += ` --radius: ${config.radius};\n`;
|
|
}
|
|
css += "}\n";
|
|
}
|
|
|
|
return css || "/* No custom theme configuration */";
|
|
}
|
|
|
|
function exportColors(colors: ThemeColors): string {
|
|
let css = "";
|
|
|
|
const colorMap: Record<keyof ThemeColors, string> = {
|
|
background: "--background",
|
|
foreground: "--foreground",
|
|
card: "--card",
|
|
cardForeground: "--card-foreground",
|
|
popover: "--popover",
|
|
popoverForeground: "--popover-foreground",
|
|
primary: "--primary",
|
|
primaryForeground: "--primary-foreground",
|
|
secondary: "--secondary",
|
|
secondaryForeground: "--secondary-foreground",
|
|
muted: "--muted",
|
|
mutedForeground: "--muted-foreground",
|
|
accent: "--accent",
|
|
accentForeground: "--accent-foreground",
|
|
destructive: "--destructive",
|
|
destructiveForeground: "--destructive-foreground",
|
|
border: "--border",
|
|
input: "--input",
|
|
ring: "--ring",
|
|
sidebar: "--sidebar",
|
|
sidebarBackground: "--sidebar-background",
|
|
sidebarForeground: "--sidebar-foreground",
|
|
sidebarPrimary: "--sidebar-primary",
|
|
sidebarPrimaryForeground: "--sidebar-primary-foreground",
|
|
sidebarAccent: "--sidebar-accent",
|
|
sidebarAccentForeground: "--sidebar-accent-foreground",
|
|
sidebarBorder: "--sidebar-border",
|
|
sidebarRing: "--sidebar-ring",
|
|
};
|
|
|
|
for (const [key, cssVar] of Object.entries(colorMap)) {
|
|
const value = colors[key as keyof ThemeColors];
|
|
if (value) {
|
|
css += ` ${cssVar}: ${value};\n`;
|
|
}
|
|
}
|
|
|
|
return css;
|
|
}
|