feat: Update <Alert> style

[mydea]

This updates the style of the <Alert> component according to new designes from @Jesse-Box .

This also re-introduces the succeess level

Before:

Afterwards:

The <Note> component is now just an alias for <Alert> without a title, it will be removed in a follow up.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
develop-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 23, 2025 1:31pm
sentry-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 23, 2025 1:31pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
changelog	⬜️ Ignored (Inspect)	Visit Preview		Jan 23, 2025 1:31pm

[codecov]

Bundle Report

Changes will increase total bundle size by 11.14kB (0.06%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
sentry-docs-server-cjs	10.39MB	7.35kB (0.07%) ⬆️
sentry-docs-client-array-push	9.3MB	3.79kB (0.04%) ⬆️

View changes by path for bundle: sentry-docs-server-cjs

File path	Size	Change
/[[...path]]	514.67kB	252 bytes (0.05%)

[stephanie-anderson]

@Jesse-Box

• Do we only plan to have info and warning, or other levels as well (success, error)? If we could prepare for that would be amazing!
• I think the contrast for the info one is really low, could we increase that somehow?

[Jesse-Box]

• I think the contrast for the info one is really low, could we increase that somehow?

I'm up for increasing the contrast, but I need a bit of guidance as to what colours we could use because I dont want to come up a magic colour value.

• Do we only plan to have info and warning, or other levels as well (success, error)? If we could prepare for that would be amazing!

@mydea and I checked the codebase for error levels, but could find anything.

[mydea]

yeah, we did not use success at all, and danger in very few places, so I dropped these here: #12418 - we can always add them back if needed, but IMHO the difference between warning & danger is slim/not 100% clear, so it's fine to just have info & warning from my POV!

I can try to use an even lighter background!

[mydea]

I could mix the background colors with transparency (TIL I learned about https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix, really cool!). E.g. mixed with 10% transparency:

[mydea]

So I re-added success level here:

cc @inventarSarah we need to define when to use these 🤔

[mydea]

Another update to the design:

[stephanie-anderson]

Oh, we still need to address the dark mode before merging

[mydea]

ah, great catch! Latest update, I changed the colors slightly to use existing color vars that also have dark mode variants:

vs

[mydea]

@chargome what is your opinion on this? I opted to error out if an invalid level is passed in. this way, you'll know and the build will fail if you do this.

Alternatively, we would have to check the level and fall back to info if something invalid is passed in 🤔 I think it is more helpful to error there, as we def. had cases where users passed in invalid stuff and possibly did not even notice it. But happy to defer to your POV on this here!

[chargome]

Yeah throwing in the build makes sense to me when working with MDX 👍

[chargome]

Looks sharp, left a comment on colors but feel free to merge!

[stephanie-anderson]

great, thank you @mydea !!

[inventarSarah]

The new alerts look really really good!! ♥

I'll update the Contributing to the Docs with information on how and when to use these (#12466)

Re the "Danger" alert:
I agree with @mydea: we can always add it back when needed.
For example, you would use the "danger" type to warn users of actions that could lead to data loss or other serious consequences that are difficult to reverse and potentially cause damage.