feat(css): add color-mix() tool

[OnkarRuikar]

• related to fix(css): update color-mix() page content#34371

The PR adds a tool to experiment with the CSS color-mix() function. Following is the screenshot of the tool:

[bsmth]

Thanks, @OnkarRuikar. Looking good! I made some suggestions on a branch, do you want to have a look here:

https://github.com/OnkarRuikar/css-examples/compare/css_color_mix...bsmth:css-examples:css_color_mix_brian?expand=1

• monospace font for readability of the <label>s.
• Change event listeners to use input so we have faster feedback
• Flex for alignment
• Some margin to give the calc / output some breathing room

[bsmth]

And just general question; why do we want to include Pickr? Not a blocker, just curious 🤔

[OnkarRuikar]

I've applied the changes.

And just a general question; why do we want to include Pickr?

Because HTML color input doesn't support alpha(transparency) channel: whatwg/html#3400 (comment) .

[bsmth]

I've applied the changes.

Nice, taking a look again!

And just a general question; why do we want to include Pickr?

Because HTML color input doesn't support alpha(transparency) channel: whatwg/html#3400 (comment) .

Ah-ha, thanks for the hint 👍🏻

[bsmth]

LGTM, only last thing to think about is demonstrating that the percentage doesn't have to be a whole number;

<input id="percentage-one" type="range" name="percent1" step="0.1" />

What do you think? I'm fine with merging as-is!

[OnkarRuikar]

LGTM, only last thing to think about is demonstrating that the percentage doesn't have to be a whole number;

🤓 done.

[bsmth]

Merging now, thank you!