@designbasekorea/ui 0.2.32 → 0.2.34

package/dist/index.umd.js

@@ -2476,56 +2476,57 @@
     });
     Button.displayName = 'Button';
 
-    // 톤별 색상 팔레트
+    // 톤별 색상 팔레트 (Light Tone은 더 밝은 색상만 사용)
     const colorPalettes = {
         primary: {
-            light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa'], // blue-50 ~ blue-400 (더 밝게)
+            light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd'], // blue-50 ~ blue-300 (더 밝게, blue-400 제거)
             vivid: ['#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a'], // blue-500 ~ blue-900
             dark: ['#0f172a', '#1e293b', '#334155', '#475569', '#64748b'], // slate-900 ~ slate-600 (더 어둡게)
         },
         secondary: {
-            light: ['#f8fafc', '#f1f5f9', '#e2e8f0', '#cbd5e1', '#94a3b8'], // slate-50 ~ slate-400 (더 밝게)
+            light: ['#f8fafc', '#f1f5f9', '#e2e8f0', '#cbd5e1'], // slate-50 ~ slate-300 (더 밝게, slate-400 제거)
             vivid: ['#6b7280', '#4b5563', '#374151', '#1f2937', '#111827'], // gray-500 ~ gray-900
             dark: ['#0f0f0f', '#1a1a1a', '#262626', '#404040', '#525252'], // neutral-950 ~ neutral-600 (더 어둡게)
         },
         success: {
-            light: ['#f0fdf4', '#dcfce7', '#bbf7d0', '#86efac', '#4ade80'], // green-50 ~ green-400 (더 밝게)
+            light: ['#f0fdf4', '#dcfce7', '#bbf7d0', '#86efac'], // green-50 ~ green-300 (더 밝게, green-400 제거)
             vivid: ['#22c55e', '#16a34a', '#15803d', '#166534', '#14532d'], // green-500 ~ green-900
             dark: ['#052e16', '#14532d', '#166534', '#15803d', '#16a34a'], // green-950 ~ green-600 (더 어둡게)
         },
         warning: {
-            light: ['#fffbeb', '#fef3c7', '#fde68a', '#fcd34d', '#fbbf24'], // amber-50 ~ amber-400 (더 밝게)
+            light: ['#fffbeb', '#fef3c7', '#fde68a'], // amber-50 ~ amber-200 (더 밝게, amber-300 이상 제거)
             vivid: ['#f59e0b', '#d97706', '#b45309', '#92400e', '#78350f'], // amber-600 ~ amber-900
             dark: ['#451a03', '#78350f', '#92400e', '#b45309', '#d97706'], // amber-950 ~ amber-600 (더 어둡게)
         },
         error: {
-            light: ['#fef2f2', '#fecaca', '#fca5a5', '#f87171', '#f56565'], // red-50 ~ red-400 (더 밝게)
+            light: ['#fef2f2', '#fecaca', '#fca5a5'], // red-50 ~ red-200 (더 밝게, red-300 이상 제거)
             vivid: ['#ef4444', '#dc2626', '#b91c1c', '#991b1b', '#7f1d1d'], // red-500 ~ red-900
             dark: ['#450a0a', '#7f1d1d', '#991b1b', '#b91c1c', '#dc2626'], // red-950 ~ red-600 (더 어둡게)
         },
         info: {
-            light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa'], // blue-50 ~ blue-400 (더 밝게)
+            light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd'], // blue-50 ~ blue-300 (더 밝게, blue-400 제거)
             vivid: ['#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a'], // blue-500 ~ blue-900
             dark: ['#0f172a', '#1e293b', '#334155', '#475569', '#64748b'], // slate-900 ~ slate-600 (더 어둡게)
         },
         purple: {
-            light: ['#faf5ff', '#f3e8ff', '#e9d5ff', '#d8b4fe', '#c084fc'], // purple-50 ~ purple-400 (더 밝게)
+            light: ['#faf5ff', '#f3e8ff', '#e9d5ff', '#d8b4fe'], // purple-50 ~ purple-300 (더 밝게, purple-400 제거)
             vivid: ['#a855f7', '#9333ea', '#7c3aed', '#6d28d9', '#5b21b6'], // purple-600 ~ purple-900
             dark: ['#3b0764', '#581c87', '#6b21a8', '#7c3aed', '#9333ea'], // purple-950 ~ purple-600 (더 어둡게)
         },
         ocean: {
-            light: ['#f0fdfa', '#ccfbf1', '#99f6e4', '#5eead4', '#2dd4bf'], // teal-50 ~ teal-400 (더 밝게)
+            light: ['#f0fdfa', '#ccfbf1', '#99f6e4'], // teal-50 ~ teal-200 (더 밝게, teal-300 이상 제거)
             vivid: ['#14b8a6', '#0d9488', '#0f766e', '#115e59', '#134e4a'], // teal-500 ~ teal-900
             dark: ['#042f2e', '#134e4a', '#115e59', '#0f766e', '#0d9488'], // teal-950 ~ teal-600 (더 어둡게)
         },
         sunset: {
-            light: ['#fff7ed', '#fed7aa', '#fdba74', '#fb923c', '#f97316'], // orange-50 ~ orange-500 (더 밝게)
+            light: ['#fff7ed', '#fed7aa', '#fdba74'], // orange-50 ~ orange-200 (더 밝게, orange-300 이상 제거)
             vivid: ['#f97316', '#ea580c', '#c2410c', '#9a3412', '#7c2d12'], // orange-600 ~ orange-900
             dark: ['#431407', '#7c2d12', '#9a3412', '#c2410c', '#ea580c'], // orange-950 ~ orange-600 (더 어둡게)
         },
     };
-    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 RandomGradient = ({ scheme = 'primary', tone = 'vivid', width = '100%', height = '600px', blur = 80, colorCount = 4, animated = false, animationDuration = 10, overlay = true, overlayOpacity = 0.2, children, className, }) => {
+        // 블러 최소값 80으로 제한 (더 부드러운 그라데이션을 위해)
+        const minBlur = Math.max(80, blur);
         // 그라데이션 생성 함수
         const generateGradient = React.useMemo(() => {
             return () => {
@@ -2542,14 +2543,55 @@
                 const centerY = Math.random() * 100;
                 return {
                     background: `radial-gradient(circle at ${centerX}% ${centerY}%, ${gradientStops})`,
-                    filter: `blur(${blur}px)`,
-                    transition: `all ${animationDuration}s ease-in-out`,
+                    filter: `blur(${minBlur}px)`,
+                    transition: animated ? `background ${animationDuration}s ease-in-out` : 'none', // 블러는 transition 적용 안 함
                 };
             };
-        }, [scheme, tone, colorCount, blur, animationDuration]);
-        // 초기 그라데이션 및 애니메이션
+        }, [scheme, tone, colorCount, minBlur, animationDuration, animated]);
+        // 초기 그라데이션 생성 함수
+        const createInitialGradient = React.useCallback(() => {
+            const schemeColors = colorPalettes[scheme][tone];
+            const numColors = Math.min(6, Math.max(3, colorCount));
+            const colors = [];
+            for (let i = 0; i < numColors; i++) {
+                const randomColor = schemeColors[Math.floor(Math.random() * schemeColors.length)];
+                colors.push(randomColor);
+            }
+            const positions = Array.from({ length: numColors }, () => Math.random() * 100).sort((a, b) => a - b);
+            const gradientStops = colors.map((color, i) => `${color} ${positions[i]}%`).join(', ');
+            const centerX = Math.random() * 100;
+            const centerY = Math.random() * 100;
+            return {
+                background: `radial-gradient(circle at ${centerX}% ${centerY}%, ${gradientStops})`,
+                filter: `blur(${minBlur}px)`,
+                transition: animated ? `background ${animationDuration}s ease-in-out` : 'none',
+            };
+        }, [scheme, tone, colorCount, minBlur, animated, animationDuration]);
+        // 초기 그라데이션을 즉시 계산하여 설정 (useState 초기값 함수 사용)
+        const [gradientStyle, setGradientStyle] = React.useState(() => {
+            const schemeColors = colorPalettes[scheme][tone];
+            const numColors = Math.min(6, Math.max(3, colorCount));
+            const colors = [];
+            for (let i = 0; i < numColors; i++) {
+                const randomColor = schemeColors[Math.floor(Math.random() * schemeColors.length)];
+                colors.push(randomColor);
+            }
+            const positions = Array.from({ length: numColors }, () => Math.random() * 100).sort((a, b) => a - b);
+            const gradientStops = colors.map((color, i) => `${color} ${positions[i]}%`).join(', ');
+            const centerX = Math.random() * 100;
+            const centerY = Math.random() * 100;
+            return {
+                background: `radial-gradient(circle at ${centerX}% ${centerY}%, ${gradientStops})`,
+                filter: `blur(${minBlur}px)`,
+                transition: animated ? `background ${animationDuration}s ease-in-out` : 'none',
+            };
+        });
+        // props 변경 시 그라데이션 업데이트
+        React.useEffect(() => {
+            setGradientStyle(createInitialGradient());
+        }, [createInitialGradient]);
+        // 애니메이션 업데이트
         React.useEffect(() => {
-            setGradientStyle(generateGradient());
             if (animated) {
                 const interval = setInterval(() => {
                     setGradientStyle(generateGradient());