Update severity badges
Background:
From this issue: #34352 (closed) we are redesigning our severity badges to be more clear, quickly identifiable, scaleable, and accessible.
Proposal:
New badge designs:
Old badge | New badge | New badge color |
---|---|---|
![]() |
![]() |
#8B2615 |
![]() |
![]() |
#C0341D |
![]() |
![]() |
#FCA429 |
![]() |
![]() |
#FDBC60 |
![]() |
![]() |
#418CD8 |
![]() |
![]() |
#919191 |
Text styling:
- Severity label text is always in GitLab's default paragraph style and color (unless defined otherwise)
- Severity label text is always sentence case (unless defined otherwise)
- Severity label text always has 8px padding between the icon and the severity text
Severity icon:
- Colors defined in table
- Icon is 12px x 12px
Locations to change:
These locations use the same list styling/component
Note: In the Dependency list all the items should be left aligned.
Location | Before | After |
---|---|---|
Project, Group, and Instance security dashboard, Pipeline vulnerability list | TBA | ![]() |
Vulnerability charts | ![]() |
![]() |
Vulnerability modal | ![]() |
![]() |
Dependency List | ![]() |
![]() |
Edited by Lukas Eipert