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
• Resolve tests
  • Recreate visual regression test images
  • Fix (or skip) accessibility failures on components yet-to-be updated
  • Recreate less test snapshots
• Add changeset

cc @leileitun3

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2b3473a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

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

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	2b3473a
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/690a7e600648ed0008cc26a8
😎 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	2b3473a
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/690a7e605be3050008832cbc
😎 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.

[dancormier]

@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.

Since blue is no longer being used as a theme color, I'd suggest replacing it with black. I haven't tested it, but I think we could get away with mapping black color stops 1-to-1 with theme secondary stops and then have theme-secondary (with no color stop suffix) as pure black. Like this:

In this orientation, we'd default to using theme-secondary for themable components like button and links. Does this sound reasonable @CGuindon? I'll update this PR to show this so we can get a better idea of how it would look in practice.

[dancormier]

I've updated this PR to have theme-secondary set to black (see Color palette). I also switched references of --theme-secondary-400 to --theme-secondary so themed components will get that black color (with the exception of components currently being worked on like Button). I also took this opportunity to update the activity indicator colors to match the Figma.

I think it looks alright and allows it to be overridden by a custom theme. @CGuindon please give it a look and let me know what you think. Thanks!

[CGuindon]

@dancormier I think that makes sense to me. Looping in @andrewmeacham to see if he has any extra insights we're not considering for theming.

How do I test the theming in this PR?

[CGuindon]

Approved in case you need colors to merge sooner than later since it's blocking other tickets — I think documentation still needs to be updated (add pink to usage). Maybe we can spin up a separate PR/ticket for that if needed.

[dancormier]

How do I test the theming in this PR?

Click the button far right end of the navbar (after the search input). There, we the have a toggle within the popover to apply a custom theme. This is a custom theme we've applied in the docs using the same functions one would as a consumer of Stacks.

Approved in case you need colors to merge sooner than later since it's blocking other tickets — I think documentation still needs to be updated (add pink to usage). Maybe we can spin up a separate PR/ticket for that if needed.

Thank you! Is there guidance written down anywhere for pink? I looked in the Figma but didn't find it. Happy to add a row for guidance on that. If there are lots of docs changes missing, I'll create a follow up ticket.