HSL: click a colour chip to open its panel, the way PICK does

The colour band chips only aimed the mixer before; now they open the same
panel the eyedropper opens, seeded with the colour the chip is named after
(hexToRgb turns that readout back into the RGB bytes the picker stores).
A pick already on the photo keeps its spot — only a mixer with nowhere to
hang takes the middle of the frame.

The HSL column itself is untouched: 8 chips, the rule, IMAGE,
HUE/SAT/LUM, the readout and RESET all stay where they were.
This commit is contained in:
2026-09-30 07:34:07 +07:00
parent f7031c1809
commit 35d8d57984
6 changed files with 44 additions and 16 deletions
+4 -4
View File
@@ -613,14 +613,14 @@ export function Landing() {
className={`chip${mode === 'light' ? ' on' : ''}`}
onClick={() => setMode('light')}
>
Light
<span className="chip-label">Light</span>
</button>
<button
type="button"
className={`chip${mode === 'dark' ? ' on' : ''}`}
onClick={() => setMode('dark')}
>
Dark
<span className="chip-label">Dark</span>
</button>
<button
type="button"
@@ -628,7 +628,7 @@ export function Landing() {
data-key="theme-auto"
onClick={() => setMode('auto')}
>
Auto
<span className="chip-label">Auto</span>
</button>
</div>
{/* The same colour groups the workspace offers; the page's own
@@ -642,7 +642,7 @@ export function Landing() {
className={`chip${accent === entry.id ? ' on' : ''}`}
onClick={() => setAccent(entry.id)}
>
{entry.label}
<span className="chip-label">{entry.label}</span>
</button>
))}
</div>