[color-swatch][color-scale] First stab at implementing the coords prop

[DmitrySharabin]

It's a very basic implementation, so we could have something to start with. 🙂 It looks like this:

When defining the type of coords, I used a workaround because of the issue I faced.

I wonder whether we should do something like +(value).toPrecision(4) to make the output look nicer (or is it OK to see that many digits?). Is there a way to specify precision in Color.js we could use?

UPDATE

Here is the code that produces the image above:

<color-swatch coords="oklch.l, oklch.c, oklch.h" size="large">oklch(80% 50% 70)</color-swatch>

<div id="future_swatch_container"></div>
<script>
    let swatch = document.createElement("color-swatch");
    swatch.color = "oklch(65% 0.15 210)";
    swatch.setAttribute("size", "large");
    swatch.textContent = "Turquoise";
    swatch.coords = "L: oklch.l, C: oklch.c, H: oklch.h";
    future_swatch_container.append(swatch);
</script>

<color-scale colors="#e3fafc, #0b7285" steps="4" space="oklch" coords="L: oklch.l, C: oklch.c"></color-scale>

<color-scale space="oklch" colors="
    Gray 50: #f9fafb,
    Gray 100: #f3f4f6,
    Gray 200: #e5e7eb,
    Gray 300: #d1d5db,
    Gray 400: #9ca3af
" coords="srgb.r"></color-scale>

[netlify[bot]]

✅ Deploy Preview for color-elements ready!

Name	Link
🔨 Latest commit	c362771b08f5fb6f07533cd2684382f411839f04
🔍 Latest deploy log	https://app.netlify.com/sites/color-elements/deploys/6668066ed51d1b0008daad40
😎 Deploy Preview	https://deploy-preview-93--color-elements.netlify.app
📱 Preview on mobile	Toggle 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]

I addressed all your feedback. Thank you so much! It should be ready now for another iteration.

[DmitrySharabin]

I addressed all your feedback. Thank you!

Before requesting your review again, I'd love to know if there is a way to output formatted values for coordinates (the way they are displayed in the parsed color). We might get a result much closer to the one you showcased in the issue:

[LeaVerou]

No, but that's an excellent feature request for getAll().

[DmitrySharabin]

No, but that's an excellent feature request for getAll().

Do you mean Color.getAll() in Color.js? Should I file an issue?

[LeaVerou]

No, but that's an excellent feature request for getAll().

Do you mean Color.getAll() in Color.js? Should I file an issue?

Yes

[LeaVerou]

Don't worry about formatting for now, just apply precision. We'll deal with formatting in Color.js.

[DmitrySharabin]

Don't worry about formatting for now, just apply precision. We'll deal with formatting in Color.js.

Sure. Just to ensure I follow: we can do it like this: value.toPrecision(4). Right? Or do we have a way to get the needed precision with Color.js (with some feature I'm not yet aware of 🫣)?

UPDATE value.toPrecision(4) add zeroes to all the values (e.g., 0.1500). Can't say I like it.

UPDATE 2 This works fine: +value.toPrecision(4).

[LeaVerou]

Yup, +value.toPrecision().