50b77ea1be
The new palette makes use of oklch(), a modern function based on cielab color space.
Oklch has bigger gamut support, while being a perceptual and uniform space - easier to create a system with colors that step down evenly.
While oklch gets us pretty far, you will notice if you look close though that all color groups don't follow the same exact lightness and chroma values to a T. I lightly tweaked some color families based on how colors tend to respond to the human eye as they get more or less lightness and chroma.
I will release alongside this palette some minimal guidance of how to combine colors on acorn.firefox.com. This palette provides an easy to understand system where
0 is the lightest and 110 is the darkest, and 1-100 step towards the darkest value evenly. You could then pretty much split
the scale in half to create light/dark mode safe combinations for background + text, icon + background, etc. But as mentioned before, more guidance to come.
I'm applying colors to tab groups here so made sure to get Amy Lee's approval.
I also ran this by theme reviewers.
UX org has also approved this work.
I also planned with #reusable-components-reviewers team to launch this at the beginning of the next cycle alongside a note to dev mailist announcing the changes.
You should notice some small differences on certain colors, but nothing too dramatic. Colors, besides themes, pretty much only show up as an accent (e.g. primary button) or for feedback (e.g. message bars). Before and after pics can be found [here](https://www.figma.com/design/ZDl1O6w3AA8CC2Keo8ExFg/Bug-1861526-before-and-afters?node-id=0-1&p=f&t=0HeNRoieubFL4ZFl-0).
Note: Storybook isn't playing nicely with oklch and we get some warnings for contrast. I talked to Mark Striemer, and for now we can land this but should look into a solution, if possible. I filed 1950988.
Note to ReComp: I touched up message bar's design slightly here by tweaking the border color.
I also used Julian Gaibler's help to ignore oklch for now since it was spitting errors in the Figma config.
### oklch reads
w3: https://www.w3.org/TR/css-color-4/#lab-colors
tldr: https://chriscoyier.net/2023/10/20/more-oklch-musings/
Differential Revision: https://phabricator.services.mozilla.com/D239079
An explanation of the Firefox Source Code Directory Structure and links to
project pages with documentation can be found at:
https://firefox-source-docs.mozilla.org/contributing/directory_structure.html
For information on how to build Firefox from the source code and create the patch see:
https://firefox-source-docs.mozilla.org/contributing/contribution_quickref.html
If you have a question about developing Firefox, and can't find the solution
on https://firefox-source-docs.mozilla.org/, you can try asking your question on Matrix at chat.mozilla.org in `Introduction` (https://chat.mozilla.org/#/room/#introduction:mozilla.org) channel.
Nightly development builds can be downloaded from:
https://archive.mozilla.org/pub/firefox/nightly/latest-mozilla-central/
- or -
https://www.mozilla.org/firefox/channel/desktop/#nightly
Keep in mind that nightly builds, which are used by Firefox developers for
testing, may be buggy.