feat(banner): update styles for SHINE

[mukunku]

Summary

This PR Updates the Banner component styles to match the latest SHINE designs: https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=5982-7648&m=dev

This PR should be merged after #2109

How to Test

Check out the Banner component: https://deploy-preview-2118--stacks.netlify.app/product/components/banners/

There is no Svelte component for banners.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5ded708

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-svelte ready!

Name	Link
🔨 Latest commit	5ded708
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/69792d0b7c95770008190177
😎 Deploy Preview	https://deploy-preview-2118--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.

[mukunku]

When I fixed the ellipsis icon to be the Cross, I noticed it had also reverted to it's default #000 everywhere. I fixed this morning as well in the Figma, for the Important variants, the Cross/X icon should be white like the text (to pass a11y) — except for yellow/warning.

I think that was an oversight by me. It should be fixed now @CGuindon 👍🏾

[mukunku]

I created s-notice--actions and s-banner--actions to define this container. It was getting a bit unruly with the selector we had before.

[dancormier]

Thanks for these changes @mukunku. The styling seems good and I only found one very minor issue with the docs. I have a couple of other notes.

A few suggested changes

• I'd recommend adding the new variants to the visual/a11y test files
  • I think it mainly be updating the array of variants in those test files
  • We should probably add them for Notice/Toast as well
• I think this would be a good time to add a Banner Svelte component
  • I would expect this to be pretty trivial since it's really similar to Notice
  • I wonder if it would be easiest to make a private component that accepts a class name that we could just import into Banner.svelte, Notice.svelte, and maybe Toast.svelte

Let me know if you'd like any help or clarification. Thanks again 🫶

[mukunku]

Hey @dancormier , thanks for the review! I fixed the banners page spacing and updated the visual/a11y tests for banners/notices/toasts. I had forgotten about those 🤦🏾

It was tricky updating the icons dynamically based on the test variant so it took me a bit longer than anticipated.

Additionally, as discussed during Monday's standup, I created a follow-up ticket to create the banner svelte component: https://stackoverflow.atlassian.net/browse/SPARK-168