@designbasekorea/ui 0.1.40 → 0.1.41

package/dist/index.umd.js

@@ -2263,78 +2263,60 @@
     });
     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] = React.useState({});
         // 그라데이션 생성 함수
         const generateGradient = React.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++) {
@@ -2351,7 +2333,7 @@
                     transition: `all ${animationDuration}s ease-in-out`,
                 };
             };
-        }, [scheme, colorCount, blur, animationDuration]);
+        }, [scheme, tone, colorCount, blur, animationDuration]);
         // 초기 그라데이션 및 애니메이션
         React.useEffect(() => {
             setGradientStyle(generateGradient());
@@ -2372,7 +2354,7 @@
         };
         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,
             }
             : {};
@@ -2380,7 +2362,7 @@
     };
     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] = React.useState(true);
         const [progress, setProgress] = React.useState(100);
         React.useEffect(() => {
@@ -2439,7 +2421,7 @@
         };
         // 배너 컨텐츠
         const bannerContent = (jsxRuntime.jsxs("div", { className: "designbase-ad-banner__content", children: [jsxRuntime.jsx("button", { className: "designbase-ad-banner__close", onClick: handleClose, "aria-label": "\uB2EB\uAE30", children: jsxRuntime.jsx(icons.CloseIcon, { size: type === 'hero' ? 20 : 18 }) }), type === 'hero' && !useRandomGradient && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "designbase-ad-banner__decoration designbase-ad-banner__decoration--top" }), jsxRuntime.jsx("div", { className: "designbase-ad-banner__decoration designbase-ad-banner__decoration--bottom" })] })), jsxRuntime.jsxs("div", { className: "designbase-ad-banner__main", children: [jsxRuntime.jsxs("div", { className: "designbase-ad-banner__icon", children: [displayIcon, type === 'topbar' && (jsxRuntime.jsx("span", { className: "designbase-ad-banner__label", children: "\uD2B9\uBCC4 \uC774\uBCA4\uD2B8" })), type === 'floating' && (jsxRuntime.jsx("span", { className: "designbase-ad-banner__badge", children: "HOT DEAL" }))] }), jsxRuntime.jsxs("div", { className: "designbase-ad-banner__text", children: [jsxRuntime.jsx("h2", { className: "designbase-ad-banner__title", children: displayTitle }), jsxRuntime.jsx("p", { className: "designbase-ad-banner__subtitle", children: displaySubtitle })] }), jsxRuntime.jsx("div", { className: "designbase-ad-banner__actions", children: jsxRuntime.jsxs(Button, { variant: "primary", size: type === 'hero' ? 'l' : type === 'card' ? 's' : 'm', onPress: handleCtaClick, className: "designbase-ad-banner__cta", fullWidth: type === 'floating', children: [displayCtaText, jsxRuntime.jsx(icons.ArrowRightIcon, { size: type === 'hero' ? 20 : 16 })] }) })] }), autoClose && (jsxRuntime.jsx("div", { className: "designbase-ad-banner__progress", children: jsxRuntime.jsx("div", { className: "designbase-ad-banner__progress-bar", style: { width: `${progress}%` } }) }))] }));
-        return (jsxRuntime.jsx("div", { className: classes, children: useRandomGradient ? (jsxRuntime.jsx(RandomGradient, { scheme: getGradientScheme(), animated: gradientAnimated, height: "100%", width: "100%", className: "designbase-ad-banner__gradient-bg", children: bannerContent })) : (bannerContent) }));
+        return (jsxRuntime.jsx("div", { className: classes, children: useRandomGradient ? (jsxRuntime.jsx(RandomGradient, { scheme: getGradientScheme(), tone: gradientTone, animated: gradientAnimated, height: "100%", width: "100%", className: "designbase-ad-banner__gradient-bg", children: bannerContent })) : (bannerContent) }));
     };
     // 기본 텍스트 헬퍼
     function getDefaultTitle(type) {