chore(colors): update color palettes

[dancormier]

SPARK-49

---

Deploy preview

This PR updates Stacks to use the new SHINE color palettes.

TODO

• All colors updated
  • Light
  • Dark
  • Light HC
  • Dark HC
• Pink color set added
• Metallic colors sets removed
• Documentation updated as needed
• (verify) Code highlight colors updated
  • We should leave them as-is
• (verify) Update or remove translucent color sets (these are mostly used for focus rings)
  • For now, we should retain these colors for backwards compatibility. See also Coexistence of Multiple Design System Versions in SHINE UIs doc

cc @leileitun3

[changeset-bot]

🦋 Changeset detected

Latest commit: 137a3f0

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	137a3f0
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/6902850bb8a68d00084aa063
😎 Deploy Preview	https://deploy-preview-2015--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 project configuration.

[netlify]

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	137a3f0
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/6902850b9798860008946f15
😎 Deploy Preview	https://deploy-preview-2015--stacks-svelte.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 project configuration.

[dancormier]

@CGuindon, @leileitun3 I've popped in a few questions here

[dancormier]

Note to reviewers: This file is where the vast majority of changes have happened.

[CGuindon]

Looks like Dark mode is using HC Dark mode colors and the reverse for orange

[CGuindon]

Pink in light mode isn't using the right color codes

[CGuindon]

Color values should be (I think some of these are the ones Lei Lei tweaked recently):

• Light mode blue 400: hsl(226, 67%, 95%)
• Light mode green 200: hsv(82, 30%, 95%)
• HC Light mode green 300: hsv(82, 80%, 63%)
• HC Light mode green 400: hsv(82, 93%, 38%)
• Dark mode red 500: hsv(0, 20%, 99%)
• Light mode yellow 200: hsv(48, 36%, 96%);
• Light mode pink
  100: hsv(293, 6%, 99%);
  200: hsv(293, 25%, 95%);
  300: hsv(293, 45%, 95%);
  400: hsv(293, 68%, 91%);
  500: hsv(293, 80%, 70%);
  600: hsv(293, 90%, 45%);
• HC Light mode pink 300: hsv(293, 68%, 91%);
• HC Dark mode pink 400: hsv(293, 30%, 80%);

[dancormier]

@CGuindon thank you for the detailed suggestions. You saved me a lot of time (your bolding helped a lot!) 🫶 I've made those changes in 6a9f965.

I've also:

• Added gold/silver/bronze color sets back in since we might need to retain the CSS variables for legacy purposes
• Updated theme-secondary to use black values
  • I expect this will require some tweaking as theme-400 is now a gray tone (in light mode) whereas I'd expect it to be close to pure black. I'm not entirely sure how we should handle this. Any ideas @CGuindon?

Looks like Dark mode is using HC Dark mode colors and the reverse for orange

I might be misunderstanding. You're suggesting that the dark and dark HC orange palettes are swapped? To me it looks correct. Can you clarify @CGuindon?

[CGuindon]

I might be misunderstanding. You're suggesting that the dark and dark HC orange palettes are swapped? To me it looks correct. Can you clarify @CGuindon?

@dancormier The oranges looked swapped in the preview but I don't think I saw anything that off in the code file you sent me... Would that preview need to be regenerated?

[CGuindon]

@dancormier
If we keep theme-secondary to use blue values, would that change the buttons on SO to be blue? Or does it just change the Team's default theming to use blue buttons? SE sites too perhaps?

I don't mind having the buttons remain blue in the Teams template/default but ideally SE sites (without custom) use the new black buttons down the line.