Update to use zinc and alpha

Author: handotdev

react-hooks.mdx

@@ -86,20 +86,20 @@ Import snippets into your MDX files to create reusable interactive components. S
       }
 
       return (
-        <div className="p-4 border dark:border-zinc-800 rounded-xl bg-white dark:bg-gray-800 shadow-sm">
-          <span className="text-xl mb-4 font-semibold text-gray-800 dark:text-white">HSL Color Generator</span>
+        <div className="p-4 border dark:border-zinc-950/80 rounded-xl bg-white dark:bg-zinc-950/80 shadow-sm">
+          <span className="text-xl mb-4 font-semibold text-zinc-950/80 dark:text-white/80">HSL Color Generator</span>
 
           <div className="space-y-4">
             <div className="space-y-2">
-              <label className="block text-sm text-gray-700 dark:text-gray-300">
+              <label className="block text-sm text-zinc-950/70 dark:text-white/70">
                 Hue: {hue}°
                 <input
                   type="range"
                   min="0"
                   max="360"
                   value={hue}
                   onChange={(e) => setHue(Number.parseInt(e.target.value))}
-                  className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 mt-1"
+                  className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
                   style={{
                     background: `linear-gradient(to right, 
                       hsl(0, ${saturation}%, ${lightness}%), 
@@ -113,15 +113,15 @@ Import snippets into your MDX files to create reusable interactive components. S
                 />
               </label>
 
-              <label className="block text-sm text-gray-700 dark:text-gray-300">
+              <label className="block text-sm text-zinc-950/70 dark:text-white/70">
                 Saturation: {saturation}%
                 <input
                   type="range"
                   min="0"
                   max="100"
                   value={saturation}
                   onChange={(e) => setSaturation(Number.parseInt(e.target.value))}
-                  className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 mt-1"
+                  className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
                   style={{
                     background: `linear-gradient(to right, 
                       hsl(${hue}, 0%, ${lightness}%), 
@@ -131,15 +131,15 @@ Import snippets into your MDX files to create reusable interactive components. S
                 />
               </label>
 
-              <label className="block text-sm text-gray-700 dark:text-gray-300">
+              <label className="block text-sm text-zinc-950/70 dark:text-white/70">
                 Lightness: {lightness}%
                 <input
                   type="range"
                   min="0"
                   max="100"
                   value={lightness}
                   onChange={(e) => setLightness(Number.parseInt(e.target.value))}
-                  className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 mt-1"
+                  className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
                   style={{
                     background: `linear-gradient(to right, 
                       hsl(${hue}, ${saturation}%, 0%), 
@@ -162,7 +162,7 @@ Import snippets into your MDX files to create reusable interactive components. S
               ))}
             </div>
 
-            <div className="text-sm font-mono text-gray-700 dark:text-gray-300">
+            <div className="text-sm font-mono text-zinc-950/70 dark:text-white/70">
               <p>
                 Base color: hsl({hue}, {saturation}%, {lightness}%)
               </p>