Skip to content

implement color picker #186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
louisphi921-dev merged 1 commit into from
Jan 19, 2026
Merged

implement color picker #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
269 changes: 261 additions & 8 deletions playground/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,16 @@ import Flex from "../../src/components/flex/Flex";
import CopyButton from "../../src/components/copy-button/CopyButton";
import ToastStack from "../../src/components/toastcontainer/ToastStack";
import { toastStore } from "../../src/stores/toastStore";
import { createSignal } from "solid-js";
import ColorPicker from "@src/components/colorpicker";

export default function App() {
const [color1, setColor1] = createSignal("#4ECDC4");
const [color2, setColor2] = createSignal("rgb(255, 107, 107)");
const [color3, setColor3] = createSignal("rgba(69, 183, 209, 0.7)");
const [color4, setColor4] = createSignal("hsl(45, 100%, 60%)");
const [color5, setColor5] = createSignal("#98D8C8");

return (
<Background>
<Flex
Expand All @@ -22,10 +30,7 @@ export default function App() {
You can start editing <code class="font-mono">App.tsx</code> to try
out any component from <code>@pathscale/ui</code>.
</p>
<CopyButton
text="Copy"
copiedToken={"jiohiohiohjioj"}
>
<CopyButton text="Copy" copiedToken={"jiohiohiohjioj"}>
hiohoho
</CopyButton>
<Flex gap="sm" wrap="wrap" justify="center">
Expand Down Expand Up @@ -55,10 +60,7 @@ export default function App() {
<Button onClick={() => toastStore.showInfo("New message received.")}>
Info Toast
</Button>
<Button
variant="outline"
onClick={() => toastStore.clearAll()}
>
<Button variant="outline" onClick={() => toastStore.clearAll()}>
Clear All
</Button>
</Flex>
Expand All @@ -71,6 +73,257 @@ export default function App() {
</div>
</Flex>
<ToastStack max={4} />
<div class="mx-auto max-w-5xl w-full space-y-8">
<div>
<h1 class="text-5xl font-bold text-primary mb-4">
ColorPicker Component
</h1>
<p class="text-base text-neutral-content">
A comprehensive color picker with support for multiple formats,
alpha channel, swatches, and full keyboard navigation.
</p>
</div>

<section class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-left">Basic Usage</h2>
<div class="flex items-center gap-4">
<ColorPicker
value={color1()}
onChange={(c) => setColor1(c)}
format="hex"
/>
<div class="text-left">
<p class="text-sm text-gray-600 dark:text-gray-400">
Selected Color (HEX):
</p>
<p class="font-mono text-lg font-bold">{color1()}</p>
</div>
</div>
</section>

<section class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-left">
Multiple Color Formats
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="flex flex-col items-center gap-2">
<ColorPicker value={color1()} onChange={setColor1} format="hex" />
<div class="text-center">
<p class="text-xs text-gray-500">HEX</p>
<p class="font-mono text-sm">{color1()}</p>
</div>
</div>
<div class="flex flex-col items-center gap-2">
<ColorPicker value={color2()} onChange={setColor2} format="rgb" />
<div class="text-center">
<p class="text-xs text-gray-500">RGB</p>
<p class="font-mono text-sm">{color2()}</p>
</div>
</div>
<div class="flex flex-col items-center gap-2">
<ColorPicker
value={color3()}
onChange={setColor3}
format="rgba"
showAlpha
/>
<div class="text-center">
<p class="text-xs text-gray-500">RGBA</p>
<p class="font-mono text-sm">{color3()}</p>
</div>
</div>
<div class="flex flex-col items-center gap-2">
<ColorPicker value={color4()} onChange={setColor4} format="hsl" />
<div class="text-center">
<p class="text-xs text-gray-500">HSL</p>
<p class="font-mono text-sm">{color4()}</p>
</div>
</div>
</div>
</section>

<section class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-left">
With Alpha/Opacity Control
</h2>
<div class="flex items-center gap-4">
<ColorPicker
value={color3()}
onChange={setColor3}
format="rgba"
showAlpha
/>
<div class="text-left">
<p class="text-sm text-gray-600 dark:text-gray-400">
Selected Color (RGBA):
</p>
<p class="font-mono text-lg font-bold">{color3()}</p>
<div
class="mt-2 w-full h-12 rounded border-2 border-gray-300"
style={{
"background-image":
"linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
"background-size": "20px 20px",
"background-position": "0 0, 0 10px, 10px -10px, -10px 0px",
}}
>
<div
class="w-full h-full rounded"
style={{ "background-color": color3() }}
/>
</div>
</div>
</div>
</section>

<section class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-left">Custom Swatches</h2>
<div class="flex items-center gap-4">
<ColorPicker
value={color5()}
onChange={setColor5}
format="hex"
swatches={[
"#FF6B6B",
"#4ECDC4",
"#45B7D1",
"#FFA07A",
"#98D8C8",
"#F7DC6F",
"#BB8FCE",
"#85929E",
]}
/>
<div class="text-left">
<p class="text-sm text-gray-600 dark:text-gray-400">
Custom Color Palette:
</p>
<p class="font-mono text-lg font-bold">{color5()}</p>
</div>
</div>
</section>

<section class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-left">Color Wheel Mode</h2>
<div class="flex items-center gap-4">
<ColorPicker
value={color4()}
onChange={setColor4}
format="hsl"
initialMode="wheel"
/>
<div class="text-left">
<p class="text-sm text-gray-600 dark:text-gray-400">
Starts in Wheel Mode:
</p>
<p class="font-mono text-lg font-bold">{color4()}</p>
</div>
</div>
</section>

<section class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-left">
Popover Placement Options
</h2>
<div class="flex items-center justify-around gap-4 flex-wrap">
<div class="flex flex-col items-center gap-2">
<ColorPicker
value={color1()}
onChange={setColor1}
placement="bottom"
/>
<p class="text-xs text-gray-500">Bottom (default)</p>
</div>
<div class="flex flex-col items-center gap-2">
<ColorPicker
value={color2()}
onChange={setColor2}
placement="top"
/>
<p class="text-xs text-gray-500">Top</p>
</div>
<div class="flex flex-col items-center gap-2">
<ColorPicker
value={color3()}
onChange={setColor3}
placement="left"
/>
<p class="text-xs text-gray-500">Left</p>
</div>
<div class="flex flex-col items-center gap-2">
<ColorPicker
value={color4()}
onChange={setColor4}
placement="right"
/>
<p class="text-xs text-gray-500">Right</p>
</div>
</div>
</section>

<section class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-left">Disabled State</h2>
<div class="flex items-center gap-4">
<ColorPicker value="#98D8C8" disabled />
<p class="text-sm text-gray-600 dark:text-gray-400">
This picker is disabled and cannot be opened.
</p>
</div>
</section>

<section class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-left">Keyboard Navigation</h2>
<div class="text-left space-y-2 text-sm">
<p class="font-semibold">Try these keyboard shortcuts:</p>
<ul class="list-disc list-inside space-y-1 text-gray-600 dark:text-gray-400">
<li>
<kbd class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs">
Tab
</kbd>{" "}
- Navigate between elements
</li>
<li>
<kbd class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs">
Arrow Keys
</kbd>{" "}
- Adjust sliders and saturation/brightness
</li>
<li>
<kbd class="px-1 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs">
Enter
</kbd>{" "}
- Select swatches
</li>
<li>
<kbd class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs">
Escape
</kbd>{" "}
- Close popover
</li>
</ul>
<div class="mt-4">
<ColorPicker value={color1()} onChange={setColor1} />
</div>
</div>
</section>

<section class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-left">API Reference</h2>
<div class="text-left">
<pre class="bg-gray-100 dark:bg-gray-900 p-4 rounded-md text-xs overflow-x-auto">
{`<ColorPicker
value?: string
onChange?: (color: string) => void
format?: ColorFormat // 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla'
disabled?: boolean
swatches?: string[]
showAlpha?: boolean
placement?: 'top' | 'bottom' | 'left' | 'right'
/>`}
</pre>
</div>
</section>
</div>
</Background>
);
}
Loading