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
50b77ea1be