@designbasekorea/ui 0.1.40 → 0.1.41

package/dist/index.esm.js

@@ -2262,78 +2262,60 @@ const Button = forwardRef(({ variant = 'primary', size = 'm', radius, fullWidth
 });
 Button.displayName = 'Button';
 
-// Designbase 테마 기반 색상 계열 (hex 값 사용)
-const colorSchemes = {
-    primary: [
-        '#48c3ff', // blue-400
-        '#1ea2ff', // blue-500
-        '#0683ff', // blue-600
-        '#006fff', // blue-700
-        '#0855c5', // blue-800
-    ],
-    secondary: [
-        '#a4adb2', // neutral-400
-        '#8c9499', // neutral-500
-        '#757b80', // neutral-600
-        '#5e6366', // neutral-700
-        '#464a4d', // neutral-800
-    ],
-    success: [
-        '#4ade80', // green-400
-        '#22c55e', // green-500
-        '#16a34a', // green-600
-        '#14b8a6', // teal-500
-        '#0d9485', // teal-600
-    ],
-    warning: [
-        '#ff8c32', // orange-400
-        '#ff6b0a', // orange-500
-        '#ff5100', // orange-600
-        '#ffe50d', // yellow-400
-        '#ffd600', // yellow-500
-    ],
-    error: [
-        '#f87171', // red-400
-        '#ef4444', // red-500
-        '#dc2626', // red-600
-        '#b91c1c', // red-700
-        '#991b1b', // red-800
-    ],
-    info: [
-        '#48c3ff', // blue-400
-        '#1ea2ff', // blue-500
-        '#0683ff', // blue-600
-        '#006fff', // blue-700
-        '#0855c5', // blue-800
-    ],
-    purple: [
-        '#a385ff', // purple-400
-        '#8a58ff', // purple-500
-        '#7830f7', // purple-600
-        '#6a1ee3', // purple-700
-        '#5818bf', // purple-800
-    ],
-    ocean: [
-        '#1ea2ff', // blue-500
-        '#48c3ff', // blue-400
-        '#2dd4c2', // teal-400
-        '#14b8a6', // teal-500
-        '#0d9485', // teal-600
-    ],
-    sunset: [
-        '#ff8c32', // orange-400
-        '#ff6b0a', // orange-500
-        '#ff5100', // orange-600
-        '#ef4444', // red-500
-        '#f87171', // red-400
-    ],
+// 톤별 색상 팔레트
+const colorPalettes = {
+    primary: {
+        light: ['#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa', '#3b82f6'], // blue-100 ~ blue-500
+        vivid: ['#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a'], // blue-500 ~ blue-900
+        dark: ['#1e3a8a', '#1e40af', '#1d4ed8', '#2563eb', '#3b82f6'], // blue-900 ~ blue-500
+    },
+    secondary: {
+        light: ['#f3f4f6', '#e5e7eb', '#d1d5db', '#9ca3af', '#6b7280'], // gray-100 ~ gray-500
+        vivid: ['#6b7280', '#4b5563', '#374151', '#1f2937', '#111827'], // gray-500 ~ gray-900
+        dark: ['#111827', '#1f2937', '#374151', '#4b5563', '#6b7280'], // gray-900 ~ gray-500
+    },
+    success: {
+        light: ['#dcfce7', '#bbf7d0', '#86efac', '#4ade80', '#22c55e'], // green-100 ~ green-500
+        vivid: ['#22c55e', '#16a34a', '#15803d', '#166534', '#14532d'], // green-500 ~ green-900
+        dark: ['#14532d', '#166534', '#15803d', '#16a34a', '#22c55e'], // green-900 ~ green-500
+    },
+    warning: {
+        light: ['#fef3c7', '#fde68a', '#fcd34d', '#f59e0b', '#d97706'], // yellow-100 ~ yellow-600
+        vivid: ['#f59e0b', '#d97706', '#b45309', '#92400e', '#78350f'], // yellow-600 ~ yellow-900
+        dark: ['#78350f', '#92400e', '#b45309', '#d97706', '#f59e0b'], // yellow-900 ~ yellow-600
+    },
+    error: {
+        light: ['#fecaca', '#fca5a5', '#f87171', '#ef4444', '#dc2626'], // red-100 ~ red-600
+        vivid: ['#ef4444', '#dc2626', '#b91c1c', '#991b1b', '#7f1d1d'], // red-500 ~ red-900
+        dark: ['#7f1d1d', '#991b1b', '#b91c1c', '#dc2626', '#ef4444'], // red-900 ~ red-500
+    },
+    info: {
+        light: ['#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa', '#3b82f6'], // blue-100 ~ blue-500
+        vivid: ['#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a'], // blue-500 ~ blue-900
+        dark: ['#1e3a8a', '#1e40af', '#1d4ed8', '#2563eb', '#3b82f6'], // blue-900 ~ blue-500
+    },
+    purple: {
+        light: ['#e9d5ff', '#d8b4fe', '#c084fc', '#a855f7', '#9333ea'], // purple-100 ~ purple-600
+        vivid: ['#a855f7', '#9333ea', '#7c3aed', '#6d28d9', '#5b21b6'], // purple-600 ~ purple-900
+        dark: ['#5b21b6', '#6d28d9', '#7c3aed', '#9333ea', '#a855f7'], // purple-900 ~ purple-600
+    },
+    ocean: {
+        light: ['#ccfbf1', '#99f6e4', '#5eead4', '#2dd4bf', '#14b8a6'], // teal-100 ~ teal-500
+        vivid: ['#14b8a6', '#0d9488', '#0f766e', '#115e59', '#134e4a'], // teal-500 ~ teal-900
+        dark: ['#134e4a', '#115e59', '#0f766e', '#0d9488', '#14b8a6'], // teal-900 ~ teal-500
+    },
+    sunset: {
+        light: ['#fed7aa', '#fdba74', '#fb923c', '#f97316', '#ea580c'], // orange-100 ~ orange-600
+        vivid: ['#f97316', '#ea580c', '#c2410c', '#9a3412', '#7c2d12'], // orange-600 ~ orange-900
+        dark: ['#7c2d12', '#9a3412', '#c2410c', '#ea580c', '#f97316'], // orange-900 ~ orange-600
+    },
 };
-const RandomGradient = ({ scheme = 'primary', width = '100%', height = '600px', blur = 60, colorCount = 4, animated = false, animationDuration = 10, overlay = true, overlayOpacity = 0.2, children, className, }) => {
+const RandomGradient = ({ scheme = 'primary', tone = 'vivid', width = '100%', height = '600px', blur = 60, colorCount = 4, animated = false, animationDuration = 10, overlay = true, overlayOpacity = 0.2, children, className, }) => {
     const [gradientStyle, setGradientStyle] = useState({});
     // 그라데이션 생성 함수
     const generateGradient = useMemo(() => {
         return () => {
-            const schemeColors = colorSchemes[scheme];
+            const schemeColors = colorPalettes[scheme][tone];
             const numColors = Math.min(6, Math.max(3, colorCount));
             const colors = [];
             for (let i = 0; i < numColors; i++) {
@@ -2350,7 +2332,7 @@ const RandomGradient = ({ scheme = 'primary', width = '100%', height = '600px',
                 transition: `all ${animationDuration}s ease-in-out`,
             };
         };
-    }, [scheme, colorCount, blur, animationDuration]);
+    }, [scheme, tone, colorCount, blur, animationDuration]);
     // 초기 그라데이션 및 애니메이션
     useEffect(() => {
         setGradientStyle(generateGradient());
@@ -2371,7 +2353,7 @@ const RandomGradient = ({ scheme = 'primary', width = '100%', height = '600px',
     };
     const overlayStyle = overlay
         ? {
-            background: `linear-gradient(45deg, ${colorSchemes[scheme][0]}, ${colorSchemes[scheme][1]})`,
+            background: `linear-gradient(45deg, ${colorPalettes[scheme][tone][0]}, ${colorPalettes[scheme][tone][1]})`,
             opacity: overlayOpacity,
         }
         : {};
@@ -2379,7 +2361,7 @@ const RandomGradient = ({ scheme = 'primary', width = '100%', height = '600px',
 };
 RandomGradient.displayName = 'RandomGradient';
 
-const AdBanner = ({ type = 'hero', variant = 'primary', title, subtitle, ctaText, onCtaClick, onClose, autoClose = false, closeDelay = 5000, icon, useRandomGradient = false, gradientScheme, gradientAnimated = true, className, }) => {
+const AdBanner = ({ type = 'hero', variant = 'primary', title, subtitle, ctaText, onCtaClick, onClose, autoClose = false, closeDelay = 5000, icon, useRandomGradient = false, gradientScheme, gradientTone = 'vivid', gradientAnimated = true, className, }) => {
     const [isVisible, setIsVisible] = useState(true);
     const [progress, setProgress] = useState(100);
     useEffect(() => {
@@ -2438,7 +2420,7 @@ const AdBanner = ({ type = 'hero', variant = 'primary', title, subtitle, ctaText
     };
     // 배너 컨텐츠
     const bannerContent = (jsxs("div", { className: "designbase-ad-banner__content", children: [jsx("button", { className: "designbase-ad-banner__close", onClick: handleClose, "aria-label": "\uB2EB\uAE30", children: jsx(CloseIcon, { size: type === 'hero' ? 20 : 18 }) }), type === 'hero' && !useRandomGradient && (jsxs(Fragment, { children: [jsx("div", { className: "designbase-ad-banner__decoration designbase-ad-banner__decoration--top" }), jsx("div", { className: "designbase-ad-banner__decoration designbase-ad-banner__decoration--bottom" })] })), jsxs("div", { className: "designbase-ad-banner__main", children: [jsxs("div", { className: "designbase-ad-banner__icon", children: [displayIcon, type === 'topbar' && (jsx("span", { className: "designbase-ad-banner__label", children: "\uD2B9\uBCC4 \uC774\uBCA4\uD2B8" })), type === 'floating' && (jsx("span", { className: "designbase-ad-banner__badge", children: "HOT DEAL" }))] }), jsxs("div", { className: "designbase-ad-banner__text", children: [jsx("h2", { className: "designbase-ad-banner__title", children: displayTitle }), jsx("p", { className: "designbase-ad-banner__subtitle", children: displaySubtitle })] }), jsx("div", { className: "designbase-ad-banner__actions", children: jsxs(Button, { variant: "primary", size: type === 'hero' ? 'l' : type === 'card' ? 's' : 'm', onPress: handleCtaClick, className: "designbase-ad-banner__cta", fullWidth: type === 'floating', children: [displayCtaText, jsx(ArrowRightIcon, { size: type === 'hero' ? 20 : 16 })] }) })] }), autoClose && (jsx("div", { className: "designbase-ad-banner__progress", children: jsx("div", { className: "designbase-ad-banner__progress-bar", style: { width: `${progress}%` } }) }))] }));
-    return (jsx("div", { className: classes, children: useRandomGradient ? (jsx(RandomGradient, { scheme: getGradientScheme(), animated: gradientAnimated, height: "100%", width: "100%", className: "designbase-ad-banner__gradient-bg", children: bannerContent })) : (bannerContent) }));
+    return (jsx("div", { className: classes, children: useRandomGradient ? (jsx(RandomGradient, { scheme: getGradientScheme(), tone: gradientTone, animated: gradientAnimated, height: "100%", width: "100%", className: "designbase-ad-banner__gradient-bg", children: bannerContent })) : (bannerContent) }));
 };
 // 기본 텍스트 헬퍼
 function getDefaultTitle(type) {