search

color-js / elements

WIP
14 stars 1 forks source link

[color-swatch] Add the `colorInfo` prop #118

Closed DmitrySharabin closed 1 month ago

DmitrySharabin commented 1 month ago

As we discussed in #96, the color info is also helpful to get programmatically. This PR addresses this. Under the hood, the data structure suggested by @LeaVerou (Option 1) is used.

This PR is the first step to implementing deltas and contrast and is intended to check if I got the main idea shaped in the PR mentioned right. The existing API is the same, so it's not a breaking change. Everything still works as before.

The gist of what this PR introduces can be seen in the screenshot (<color-swatch> is a Lego block for color charts):

SCR-20241011-peso
netlify[bot] commented 1 month ago

Deploy Preview for color-elements ready!

Name Link
Latest commit a92705c6892332e127abb800835deaca73ce063c
Latest deploy log https://app.netlify.com/sites/color-elements/deploys/670ea5dcf7a93300085d0101
Deploy Preview https://deploy-preview-118--color-elements.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

DmitrySharabin commented 1 month ago

I'd like to discuss what is more helpful (for our users) to expose as colorInfo keys: the coords labels or channels themselves?

Option 1

{
    Lightness: 0.9158,
    Chroma: 0.05112,
    Hue: 349.9
}

Option 2

{
    "oklch.l": 0.9158,
    "oklch.c": 0.05112,
    "oklch.h": 349.9
}
LeaVerou commented 1 month ago

I would vote for the keys, the labels might even be localized or have weird characters.

DmitrySharabin commented 1 month ago

I would vote for the keys, the labels might even be localized or have weird characters.

Thank you. I'm leaning toward that, too. Let me update the code, then.

DmitrySharabin commented 1 month ago

Done. Here is an updated gist of the proposed changes (in one screenshot):

image