search

mdn / css-examples

Code examples that accompany the MDN CSS documentation
https://developer.mozilla.org/docs/Web/CSS
Creative Commons Zero v1.0 Universal
618 stars 854 forks source link

Updates to colour picker tool #178

Open schalkneethling opened 7 months ago

schalkneethling commented 7 months ago

What was incorrect, unhelpful, or incomplete?

This stems from the discussion I started concerning the tools on MDN Web Docs. Please read the discussion for more details and context.

There are a couple of common problems between these tools and issues filed here. This issue will track the work on addressing the relevant issues and do a bit of a rewrite of the color picker tool.

Known issues

Common issues

The work will be split up into two to three separate pull requests. The first will address the responsiveness, the second the JS, and the last any existing issues that were not already fixed by the JS updates.

Reviewers for the work will be between @caugner and @LeoMcA

What did you expect to see?

The tool is responsive and usable across viewports and devices. The code has been updated and is in a better state to ensure they can be more easily maintained going forward.

Do you have any supporting links, references, or citations?

https://github.com/orgs/mdn/discussions/674

Do you have anything more you want to share?

No response

estelle commented 6 months ago

The tool was updated in https://github.com/mdn/content/pull/33071. It's now responsive and converts into all the srgb color spaces. It includes hex, rgb() with modern syntax, hsl() with modern syntax, hwb(), and color(). It includes opacity for all the syntaxes. The JS is really intuitive with no polyfills and uses the browser/OS color picker.