feat(core): Colors, themes & more design updates

[theiliad]

Updates

• Add a color service to provide the new color palette
• Add theme utilities, and default themes (Only high contrast currently)
• Pie & donut sizing and spacing between slices

#246, #252, #254, #255

Closes #243

[netlify]

Deploy preview for carbon-charts ready!

Built with commit c32b6da

https://deploy-preview-261--carbon-charts.netlify.com

[cal-smith]

Looking good 🎉 I'll close my draft since you've got all the high points covered

[theiliad]

Looking good 🎉 I'll close my draft since you've got all the high points covered

Cool. We should find a way to collab on PRs, since I could've expanded on yours

[shixiedesign]

Question, so in Carbon we do visual reviews in the PR thread. This thread might get really long because all the charts updates are in one PR. Is there a different place you guys do visual reviews before merge? Or should we split this PR into a few parts so we can merge the charts one by one as soon as it is ready?

[theiliad]

@shixiedesign This PR will mostly focus on some of the obvious or immediate changes we're going to merge (once colors are approved we will probably go ahead an merge this, then open up separate PRs for the nitty gritty of the rest of the component related updates)

Therefore, you're welcome to share your review here 🙂

[shixiedesign]

Visual feedback on the color themes:

• [Theme 1] all looks good except 1 color, Purple 80 should be Purple 30. My mistake in the spec image!

• [Theme 2] please use below color progression for theme 2
  

• [Theme 3] is it possible to implement the dark theme? For light ui, theme 1 & 2 are sufficient for the time being I think. Unless you know more use cases. For dark ui, let's use this color progression:
  

[theiliad]

@shixiedesign Added all 3. For [Theme 2] that you sent, I added another variation teal Teal 70 that I was hoping you can review as well.

Here are the themes:
[Theme 1] => https://deploy-preview-261--carbon-charts.netlify.com/?experimental=true&theme=1
[Theme 2] => https://deploy-preview-261--carbon-charts.netlify.com/?experimental=true&theme=2
[Theme 2 + teal 70] => https://deploy-preview-261--carbon-charts.netlify.com/?experimental=true&theme=3
[Theme 3 (dark)] => https://deploy-preview-261--carbon-charts.netlify.com/?experimental=true&theme=4

[shixiedesign]

Theme 1 & 3 looks good to go 🎉 🎉 🎉
Theme 2, I see why you are proposing Teal 70. I agree it's better too. But to maximize the rage of light and dark, let's use Teal 70 but darken the last color Cyan to Cyan 80. So this sequence:

Lemme know if you agree.

[cal-smith]

LGTM code wise 👍

[jeoffw]

Can we add a Charts page to the main site (possibly linking to this site) so this is actually discoverable?

[zvonimirfras]

@jeoffw yes please 😃

[shixiedesign]

👍 Thanks!

[theiliad]

@zvonimirfras @cal-smith
My final commit in this PR (no design changes @shixiedesign).

I changed the export themes to colorPalettes because I think the word theme can be interpreted as more than what this PR does.

We can explore the possibility of "themes" at some point, but I'd like to call the newly added service color palettes.

Feel free to merge if there are no objections 💯

[cal-smith]

Makes sense, themes are definitely a larger topic than just the colours ... Everything looks good to me 👍