NuGet / NuGetGallery

NuGet Gallery is a package repository that powers https://www.nuget.org. Use this repo for reporting NuGet.org issues.
https://www.nuget.org/
Apache License 2.0
1.54k stars 643 forks source link

[UI] Add new themes for Alert component #9863

Closed martinrrm closed 6 months ago

martinrrm commented 6 months ago

Adding the new themes to the alert component, this PR only changes CSS files, actual usage of the component will be in future PR's.

Light theme

Danger

image

Warning

image

Success

image

Info

image

Dark theme

Danger

image

Warning

image

Success

image

Info

image

Addresses https://github.com/NuGet/NuGetGallery/issues/9862

Nirmal4G commented 3 months ago

@martinrrm Warning should be yellow (bright or dim depending on the base theme) and not orange-ish! It'll be difficult to distinguish error and warning at a glance. When I glanced at this page, I thought both colors were the same. And no, I do not have any issues with recognising colors.

Also, Info can be light/dark blue near to the NuGet accent color instead of Grey-ish!

martinrrm commented 3 months ago

@Nirmal4G Hi! Thanks for your feedback, right now we are trying to stick with Fluent UI color tokens, nevertheless I agree with you, specially in the Light Theme is hard to distinguish the difference. This is another option we can use.

Also, I loved your idea for the info to be Info color, let me double check that with the designers/team

This is a possible alternative for the colors. image image

Nirmal4G commented 3 months ago

How about this one for the warning? GitHub uses it.

Dark Theme Warning Color Light Theme Warning Color
GitHub Warning Color on Dark Theme GitHub Warning Color on Light Theme

These are the default colors on GitHub but you could adjust the hue (brightness/contrast) to make it work on NuGet Gallery.

martinrrm commented 3 months ago

@Nirmal4G Let me check with designers, I don't think we should be using colors from other products given that there is a well-documented color theme for the components we are using.

Nirmal4G commented 3 months ago

@martinrrm Yeah. That's just for visual reference. Adjust the color to match NuGet branding. If you have existing color code, It would not be far off, IMO.