Merge pull request #2 from GuiEpi/expand-color-formats

✨ defaultColor support multiple formats

Author: GuiEpi

src/index.tsx

@@ -30,11 +30,12 @@ const Cursor: React.FC<CursorProps> = ({
     }
   }, [currentVariant]);
 
-  const defaultColor = useMemo(
-    () =>
-      customDefaultColor || (window.matchMedia('(prefers-color-scheme: dark)').matches ? '0 0% 98%' : '240 10% 3.9%'),
-    [customDefaultColor],
-  );
+  const defaultColor = useMemo(() => {
+    const fallbackColor = window.matchMedia('(prefers-color-scheme: dark)').matches 
+      ? 'hsl(0 0% 98%)' 
+      : 'hsl(240 10% 3.9%)';
+    return customDefaultColor || fallbackColor;
+  }, [customDefaultColor]);
 
   const defaultVariants: Record<CursorType, CursorVariant> = {
     default: {
@@ -185,7 +186,7 @@ const Cursor: React.FC<CursorProps> = ({
         left: position.x,
         pointerEvents: 'none',
         zIndex,
-        backgroundColor: `hsl(var(--cursor-color, ${defaultColor}))`,
+        backgroundColor: `var(--cursor-color, ${defaultColor})`,
         transformOrigin: 'left center',
         overflow: 'hidden', // Important for the compression effect
       }}

src/types.ts

@@ -47,7 +47,7 @@ export interface CursorProps {
   theme?: CursorTheme;
   /** Whether to scale cursor on click */
   scaleOnClick?: boolean;
-  /** Default color in HSL format */
+  /** Default color in valid CSS format (e.g., 'hsl(240 10% 3.9%)', '#ff4081', 'rgb(255 64 129)', 'oklch(0.7 0.15 330)') */
   defaultColor?: string;
 }
 

website/src/index.css

@@ -29,7 +29,7 @@
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
-    --cursor-color: 349, 80%, 59%;
+    --cursor-color: hsl(349, 80%, 59%);
   }
   .dark {
     --background: 240 10% 3.9%;
@@ -56,7 +56,7 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
-    --cursor-color: 349, 80%, 59%;
+    --cursor-color: hsl(349, 80%, 59%);
   }
 }
 

website/src/pages/docs/cursor.mdx

@@ -36,7 +36,7 @@ This component will render the cursor.
       <td>[defaultColor](#default-color-prop)</td>
       <td>string</td>
       <td>auto</td>
-      <td>Default HSL color value</td>
+      <td>Default color in valid CSS format</td>
     </tr>
   </tbody>
 </table>
@@ -96,11 +96,34 @@ If `false`, do not scale cursor when clicking. Defaults to `true`.
 
 ### <a name="default-color-prop"></a>`defaultColor` Prop
 
-Change the default cursor color. The value should be in **HSL format**. By default, the cursor uses the HSL values from the <a href="https://ui.shadcn.com/colors" target="_blank" rel="noopener noreferrer">Tailwind CSS color palette</a>:
+Change the default cursor color using any **valid CSS color format**. By default, the cursor uses HSL colors from the <a href="https://ui.shadcn.com/colors" target="_blank" rel="noopener noreferrer">Tailwind CSS color palette</a>:
 
-- Dark mode: `0 0% 98%` (zinc-50)
-- Light mode: `240 10% 3.9%` (zinc-950)
+- Dark mode: `hsl(0 0% 98%)` (zinc-50)
+- Light mode: `hsl(240 10% 3.9%)` (zinc-950)
+
+**Examples with explicit CSS color formats:**
 
 ```jsx
-<Cursor defaultColor="349, 80%, 59%" />
+// HSL colors
+<Cursor defaultColor="hsl(349 80% 59%)" />
+<Cursor defaultColor="hsl(349, 80%, 59%)" />
+
+// RGB colors
+<Cursor defaultColor="rgb(255 64 129)" />
+<Cursor defaultColor="rgb(255, 64, 129)" />
+
+// OKLCH colors
+<Cursor defaultColor="oklch(0.7 0.15 330)" />
+
+// Hex colors
+<Cursor defaultColor="#ff4081" />
+<Cursor defaultColor="#f41" />
+
+// Named colors
+<Cursor defaultColor="red" />
+<Cursor defaultColor="hotpink" />
+
+// Other CSS color functions
+<Cursor defaultColor="lab(50% 20 -30)" />
+<Cursor defaultColor="lch(50% 50 130)" />
 ```

website/src/pages/docs/styling.mdx

@@ -4,28 +4,32 @@
 
 ### <a name="using-css-variables"></a>Using CSS Variables
 
-You can style the cursor by setting the `--cursor-color` CSS variable. The value should be in **HSL format**.
+You can style the cursor by setting the `--cursor-color` CSS variable using any **valid CSS color format**.
 
 ```css
 :root {
-  --cursor-color: 349, 80%, 59%;
+  --cursor-color: hsl(349 80% 59%); /* HSL */
+  --cursor-color: #ff4081; /* Hex */
+  --cursor-color: rgb(255 64 129); /* RGB */
+  --cursor-color: oklch(0.7 0.15 330); /* OKLCH */
+  --cursor-color: hotpink; /* Named color */
 }
 ```
 
 ### <a name="dark-mode-support"></a>Dark Mode Support
 
-The cursor automatically detects system dark mode preferences and adjusts its color. You can override this behavior:
+The cursor automatically detects system dark mode preferences and adjusts its color. You can override this behavior using any valid CSS color format:
 
 ```css
 /* Light mode */
 :root {
-  --cursor-color: 240, 10%, 3.9%;
+  --cursor-color: hsl(240 10% 3.9%);
 }
 
 /* Dark mode */
 @media (prefers-color-scheme: dark) {
   :root {
-    --cursor-color: 0, 0%, 98%;
+    --cursor-color: hsl(0 0% 98%);
   }
 }
 ```
@@ -103,7 +107,7 @@ const theme: CursorTheme = {
         padding: '1em',
 
         // Optional: override color for this variant
-        backgroundColor: 'hsl(160, 100%, 50%)',
+        backgroundColor: 'hsl(160, 100%, 50%)', // Or any other format: '#00ff80', 'oklch(0.8 0.2 150)', etc.
       },
       // Optional: content styling
       content: {