feat: unify pastel application into single playground and remove standalone pages

components/pastel/ColorPicker.tsx

@@ -3,6 +3,7 @@
 import { HexColorPicker } from 'react-colorful';
 import { Input } from '@/components/ui/input';
 import { cn } from '@/lib/utils/cn';
+import { hexToRgb } from '@/lib/pastel/utils/color';
 
 interface ColorPickerProps {
   color: string;
@@ -17,21 +18,38 @@ export function ColorPicker({ color, onChange, className }: ColorPickerProps) {
     onChange(value);
   };
 
+  // Determine text color based on background brightness
+  const getContrastColor = (hex: string) => {
+    const rgb = hexToRgb(hex);
+    if (!rgb) return 'inherit';
+    const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+    return brightness > 128 ? '#000000' : '#ffffff';
+  };
+
+  const textColor = getContrastColor(color);
+
   return (
-    <div className={cn('space-y-4', className)}>
-      <HexColorPicker color={color} onChange={onChange} className="w-full" />
-      <div className="space-y-2">
-        <label htmlFor="color-input" className="text-sm font-medium">
-          Color Value
-        </label>
-        <Input
-          id="color-input"
-          type="text"
-          value={color}
-          onChange={handleInputChange}
-          placeholder="#ff0099 or rgb(255, 0, 153)"
-          className="font-mono"
-        />
+    <div className={cn('flex flex-col items-center justify-center space-y-4', className)}>
+      <div className="w-full max-w-[200px] space-y-4">
+        <HexColorPicker color={color} onChange={onChange} className="!w-full" />
+        <div className="space-y-2">
+          <label htmlFor="color-input" className="text-sm font-medium">
+            Color Value
+          </label>
+          <Input
+            id="color-input"
+            type="text"
+            value={color}
+            onChange={handleInputChange}
+            placeholder="#ff0099 or rgb(255, 0, 153)"
+            className="font-mono transition-colors duration-200"
+            style={{
+              backgroundColor: color,
+              color: textColor,
+              borderColor: textColor === '#000000' ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.2)'
+            }}
+          />
+        </div>
       </div>
     </div>
   );