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.52k stars 643 forks source link

[UI] Add new themes to Packages List view page #9852

Closed martinrrm closed 3 months ago

martinrrm commented 3 months ago

Addresses https://github.com/NuGet/NuGetGallery/issues/9854 Figma: https://www.figma.com/file/ZaAD9rDujh8JDkRF4q9Fd8/NuGet---Simple-theme-updates?type=design&node-id=61%3A9109&mode=design&t=Urj8iIoXc4thBO3E-1 Spec: https://github.com/NuGet/Engineering/pull/5209

Description

These PR add's colors/theme for the Package List view, for this page we added:

Dark Theme

image

Light Theme

image

Transparent button

States

State Dark Light
Focused image image
Hover image image
Pressed image image
Rest image image

Checkbox, Switch and TreeView

The icon button uses the new transparent button so the styles are the same.

Dark

checkbox-dark-theme

Light

checkbox-light-theme

Radio button

radiobutton-dark-theme

Badges

image image

Accessibility errors

Links color are not accessible enough

I'll contact designers again to ask for guidance here. There are two options, add an underline for these kinds of links or change the color of hyperlinks image

erdembayar commented 3 months ago

Please add link to main tracking issue and if there's any spec.