Skip to content

Add OKLAB and OKLCH to color-picker #2446

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.

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

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

V1OL3TF0X
Copy link

@V1OL3TF0X V1OL3TF0X commented May 9, 2025

Addresses @2439

📝 Description

This PR adds two new modes to the color-picker: oklch and oklab. I also needed to fix a bit of the logic, so switching between modes worked properly. A also tried to update the examples to the best of my abilities

⛳️ Current behavior (updates)

  • color pikcer has 3 modes: RGBA, HSLA and HSBA

🚀 New behavior

  • color-picker has 2 new modes - OKLAB and OKLCH.
  • examples are updated to see effects of switching modes, as well as show all channels of the current mode under area picker
  • switching the mode doesn't break the UI

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

If anything falls outside contribution guidelines, please let me know - I tried to follow the code style to the best of my abilities, but some things may have slipped through.

As parsing oklab and oklch has some complicated math involved, I opted to add culori/js to take care of that

Copy link

changeset-bot bot commented May 9, 2025

⚠️ No Changeset found

Latest commit: bf1fb50

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

vercel bot commented May 9, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
zag-nextjs ✅ Ready (Inspect) Visit Preview May 10, 2025 0:47am
zag-solid ✅ Ready (Inspect) Visit Preview May 10, 2025 0:47am
zag-svelte ✅ Ready (Inspect) Visit Preview May 10, 2025 0:47am
zag-vue ✅ Ready (Inspect) Visit Preview May 10, 2025 0:47am
zag-website ✅ Ready (Inspect) Visit Preview May 10, 2025 0:47am

@segunadebayo
Copy link
Member

@V1OL3TF0X thanks for this PR. Love the direction.

Could we do this without an additional dependency? We want to keep the bundle size roughly similar

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants