@restnfeel/agentc-starter-kit
Version:
한국어 기업용 CMS 모듈 - Task Master AI와 함께 빠르게 웹사이트를 구현할 수 있는 재사용 가능한 컴포넌트 시스템
180 lines (177 loc) • 5.29 kB
JavaScript
import React from 'react';
const defaultTheme = {
primary: "#3B82F6",
secondary: "#64748B",
background: "#FFFFFF",
surface: "#F8FAFC",
text: {
primary: "#1F2937",
secondary: "#6B7280",
inverse: "#FFFFFF",
},
border: "#E5E7EB",
shadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
success: "#10B981",
warning: "#F59E0B",
error: "#EF4444",
radius: {
sm: "0.375rem",
md: "0.5rem",
lg: "0.75rem",
full: "9999px",
},
spacing: {
xs: "0.25rem",
sm: "0.5rem",
md: "1rem",
lg: "1.5rem",
xl: "2rem",
},
typography: {
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
fontSize: {
xs: "0.75rem",
sm: "0.875rem",
md: "1rem",
lg: "1.125rem",
xl: "1.25rem",
},
fontWeight: {
normal: "400",
medium: "500",
semibold: "600",
bold: "700",
},
},
};
const darkTheme = {
primary: "#60A5FA",
secondary: "#94A3B8",
background: "#1F2937",
surface: "#374151",
text: {
primary: "#F9FAFB",
secondary: "#D1D5DB",
inverse: "#1F2937",
},
border: "#4B5563",
shadow: "0 10px 15px -3px rgba(0, 0, 0, 0.3)",
success: "#34D399",
warning: "#FBBF24",
error: "#F87171",
radius: {
sm: "0.375rem",
md: "0.5rem",
lg: "0.75rem",
full: "9999px",
},
spacing: {
xs: "0.25rem",
sm: "0.5rem",
md: "1rem",
lg: "1.5rem",
xl: "2rem",
},
typography: {
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
fontSize: {
xs: "0.75rem",
sm: "0.875rem",
md: "1rem",
lg: "1.125rem",
xl: "1.25rem",
},
fontWeight: {
normal: "400",
medium: "500",
semibold: "600",
bold: "700",
},
},
};
const compactTheme = {
...defaultTheme,
spacing: {
xs: "0.125rem",
sm: "0.25rem",
md: "0.5rem",
lg: "0.75rem",
xl: "1rem",
},
typography: {
...defaultTheme.typography,
fontSize: {
xs: "0.625rem",
sm: "0.75rem",
md: "0.875rem",
lg: "1rem",
xl: "1.125rem",
},
},
};
const themes = {
default: defaultTheme,
dark: darkTheme,
compact: compactTheme,
};
// Theme utility functions
function getThemeVariables(theme) {
return {
"--chatbot-primary": theme.primary,
"--chatbot-secondary": theme.secondary,
"--chatbot-background": theme.background,
"--chatbot-surface": theme.surface,
"--chatbot-text-primary": theme.text.primary,
"--chatbot-text-secondary": theme.text.secondary,
"--chatbot-text-inverse": theme.text.inverse,
"--chatbot-border": theme.border,
"--chatbot-shadow": theme.shadow,
"--chatbot-success": theme.success,
"--chatbot-warning": theme.warning,
"--chatbot-error": theme.error,
"--chatbot-radius-sm": theme.radius.sm,
"--chatbot-radius-md": theme.radius.md,
"--chatbot-radius-lg": theme.radius.lg,
"--chatbot-radius-full": theme.radius.full,
"--chatbot-spacing-xs": theme.spacing.xs,
"--chatbot-spacing-sm": theme.spacing.sm,
"--chatbot-spacing-md": theme.spacing.md,
"--chatbot-spacing-lg": theme.spacing.lg,
"--chatbot-spacing-xl": theme.spacing.xl,
"--chatbot-font-family": theme.typography.fontFamily,
"--chatbot-font-size-xs": theme.typography.fontSize.xs,
"--chatbot-font-size-sm": theme.typography.fontSize.sm,
"--chatbot-font-size-md": theme.typography.fontSize.md,
"--chatbot-font-size-lg": theme.typography.fontSize.lg,
"--chatbot-font-size-xl": theme.typography.fontSize.xl,
"--chatbot-font-weight-normal": theme.typography.fontWeight.normal,
"--chatbot-font-weight-medium": theme.typography.fontWeight.medium,
"--chatbot-font-weight-semibold": theme.typography.fontWeight.semibold,
"--chatbot-font-weight-bold": theme.typography.fontWeight.bold,
};
}
function applyTheme(theme, element) {
const target = document.documentElement;
const variables = getThemeVariables(theme);
Object.entries(variables).forEach(([property, value]) => {
target.style.setProperty(property, value);
});
}
// React hook for theme management
function useTheme(initialTheme = "default") {
const [currentTheme, setCurrentTheme] = React.useState(initialTheme);
React.useEffect(() => {
applyTheme(themes[currentTheme]);
}, [currentTheme]);
const changeTheme = React.useCallback((themeName) => {
setCurrentTheme(themeName);
}, []);
return {
currentTheme,
theme: themes[currentTheme],
changeTheme,
availableThemes: Object.keys(themes),
};
}
export { applyTheme, compactTheme, darkTheme, defaultTheme, getThemeVariables, themes, useTheme };
//# sourceMappingURL=theme-config.js.map