feat(color): Add new color palette

[dancormier]

Note
This PR is targeted to merge into stacks-next, our long-lived branch intended for our v2 release

tl;dr: This PR adds the new color palettes and updates how they're generated.

---

The new suffix

All added colors include the new suffix. The new color should come immediately before any color stop or h/s/l/

/* Legacy */
--white: …;
--black-200: …;
--theme-base-primary-color-h: …;
.fc-theme-primary-400 { … }

/* New */
--white-new: …;
--black-new-200: …;
--theme-base-primary-color-new-h: …;
.fc-theme-primary-new-400 { … }

New colors

All updated color palettes from the Figma have added. See the new Colors docs page for more details.

Theme generation

Theme colors are now reduced to 6 stops (down from 14), plus a base class/variable that maps to the 400 stop (e.g.: --theme-primary-new: var(--theme-primary-new-400);). All theme colors now fall back to The generation of theme variables/classes now only relies on h/s/l variables, removing any need for r/g/b variables.

See the new Theming docs page for more details.

Base/dark h/s/l/ variables

TODO: Explain how now they're mutually exclusive of one another. Basically, color variables will not fall back to custom light values in dark mode and instead will fall back to default Stacks Classic theme values. This may affect Teams/enterprise, but that needs to be verified.

TODO

• New color palette with updated stops is created (including new less functions to generate “themed“ palettes) and includes the new suffix
• Create a colors doc page Colors (new) and to showcase new colors
• Create a Theming (New) page to showcase the new themed variables (this page will be finalized in a follow up story)

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	afa19ed
🔍 Latest deploy log	https://app.netlify.com/sites/stacks/deploys/64cd34f2af85d60008dd048c
😎 Deploy Preview	https://deploy-preview-1415--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[dancormier]

Note
--highlight-* variables referencing legacy colors need to be remapped.
This should be done in a follow-up PR.

[giamir]

I wrote a comment about this in my review. I guess this should be done in a follow up PR because we need design to confirm the mapping old -> new color?

[giamir]

Great work @dancormier. 🎉

I left few comments across the PR but overall I think we could merge it.

The most important point I had is if we should create a Borders (new) page before merging, to document how borders are expected to be used with the new color palette. (I also noticed we don't create some bc classes/variables anymore - like bronze-darker, etc... - I suppose that is intentional).

There are also few additional NITs.

[giamir]

I could not find any documentation about these highlights variables, is this something we refer only in the code-block and prose styles or also in Core or the editor for example? Try to understand if it makes sense to expose these extra variables or we could encapsulate them directly in those 2 components for the long run.

If the variables are here to be consumed outside stacks I think we should document them somewhere in our docs (maybe a small section in the Colors (new) page)

Any reason why we could not assign the variables to the new color set? Waiting confirmation from design?

[dancormier]

I could not find any documentation about these highlights variables, is this something we refer only in the code-block and prose styles or also in Core or the editor for example? Try to understand if it makes sense to expose these extra variables or we could encapsulate them directly in those 2 components for the long run.

AFAICT, we only refer to these in the the code-block and prose styles. We technically redefine and reference them in Core but they all have equivalent values and references in Stacks.

I think we could safely consider them private and encapsulate them in those two components. I might want to leave that for a follow up PR though just to minimize moving parts.

Any reason why we could not assign the variables to the new color set? Waiting confirmation from design?

I left these as-is since most of the values referenced are of direct color references (hsl(…) instead of var(…)). I've gone ahead and changed what I could to map to the new color palette, but many colors here are one-offs and don't map to any Stacks colors (new or legacy). I'd like to get design's opinion on this before making too many changes here, though I don't think it needs to hold up this PR.

---

@PiperLawson considering most colors used for code blocks are custom and not used elsewhere in Stacks, are we planning on updating the colors or do we want to keep those as-is?

[giamir]

I also think we should not block this PR because of them. We can revisit those colors later on this month if necessary after we get feedback from design.

[giamir]

Thanks @dancormier for taking care of the borders!
We should merge this PR today. Awesome work! 🎉