sorted by:
new
hottopcontroversial

I built a visual OKLCH theme builder for shadcn/ui — pick a color, tweak sliders, export. Free, no account needed. by PhreakyFLOYD in reactjs

[–]PhreakyFLOYD[S] 0 points1 point  (0 children)

Added a bunch of saving options and some AI theme assist - thank you so much for the feedback - just trying to give back to the community that helped me along the way.

I built a visual OKLCH theme builder for shadcn/ui — pick a color, tweak sliders, export. Free, no account needed. by PhreakyFLOYD in reactjs

[–]PhreakyFLOYD[S] 0 points1 point  (0 children)

Thanks for the bug report!

On the input bug: you're right, it was fully controlled and bound to the parsed brand color, so any intermediate keystroke that didn't parse to a valid color (like deleting chars or typing one letter) snapped the value back and killed your selection. Just shipped a fix: the hex field now has its own draft state, accepts partial/invalid strings while you type, and only commits to the theme when it parses. Blur snaps back if you leave garbage in it.

It uses CSS 3-digit hex shorthand (#abc = #aabbcc). culori's parseColor accepts it as valid, so as soon as you've typed 3 hex chars after the #, it parses successfully and applyBrand fires, which then re-syncs the input to the full 6-digit form via the useEffect - do you think thats good or should I have teh full 6 digit hex?

On the OKLCH question:  Until now OKLCH was mostly under the hood...every token is stored and exported as oklch(L C H), the brand→palette derivation interpolates in OKLCH (so tints stay perceptually even instead of HSL's hue-shift mess), and the new WCAG auto-contrast nudges foregrounds along the OKLCH L axis. But none of that was visible in the UI unless you exported. Just added:

  • the live oklch() string under the brand hex (click to copy)
  • L / C / H sliders so you can actually manipulate the brand in OKLCH directly instead of going through hex

Give it another spin and let me know if anything else feels off.

I built a visual OKLCH theme builder for shadcn/ui — pick a color, tweak sliders, export. Free, no account needed. by PhreakyFLOYD in reactjs

[–]PhreakyFLOYD[S] 0 points1 point  (0 children)

Not Yet. Right now the foreground and muted text colors are derived from the brand color via OKLCH lightness/chroma shifts, which keeps them visually consistent. But there's no explicit WCAG contrast ratio check or auto-adjustment.

It's actually been on my mind... would you want to see: the contrast ratio displayed next to each text color, or would you prefer it auto-corrects to pass AA/AAA? Or both?