search

oddbird / oddcontrast

https://www.oddcontrast.com/
BSD 3-Clause "New" or "Revised" License
28 stars 1 forks source link

Group formats #137

Closed jamesnw closed 9 months ago

jamesnw commented 11 months ago

Description

Groups the formats by groups/space, and moves the out of gamut warning to the group rather than the individual format.

https://www.figma.com/file/JtQTGIpwoaOcqcWfsoeOk1/Browser-bugs-%26-other-warnings?type=design&node-id=5-146&mode=design&t=c0xZQdteuNYmK61O-0

Steps to test/reproduce

https://deploy-preview-137--oddcontrast.netlify.app/

  1. With a format that isn't p3 selected, see that there are 3 groups, and the selected format is missing from its group
  2. With p3 selected, see that there are only 2 groups.
  3. Test out of gamut colors, most easily with oklch, and see that the messages show with the group name.
  4. Check that the links go to the Color 4 Out of Gamut explainer (is that the right place?)

Show me

(Styling is still needed)

image

Related to #95

netlify[bot] commented 11 months ago

Deploy Preview for oddcontrast ready!

Name Link
Latest commit 8b130b1374a4394016de38c3d551a172a7842d0b
Latest deploy log https://app.netlify.com/sites/oddcontrast/deploys/6581188f52f558000867abb9
Deploy Preview https://deploy-preview-137--oddcontrast.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.

stacyk commented 10 months ago

OK, I've updated the errors to wrap if they need space. This is ready for review. Assigning to @mirisuzanne.

Screenshot 2023-11-21 at 3 49 23 PM

jgerigmeyer commented 10 months ago

When the chosen color is outside a given gamut, it seems like some of the output formats are clamped (or gamut-mapped?) and others are just allowed to go out-of-gamut? I think that's maybe to-spec, but we should probably make it clear when output is clamped, and what color it's clamped to?

@mirisuzanne Can you share an example where you're seeing this? I don't think we're (intentionally) doing any gamut-mapping in the output colors, but maybe ColorJS clips for some spaces?

mirisuzanne commented 10 months ago

@jgerigmeyer even when sRGB formats are out of gamut, I'm seeing valid hex, and hsl clamped to 100% in the output. It would not surprise me if colorjs is doing that.