Update severity badges in dependency list
Background:
From this issue: #34352 (closed) we are redesigning our severity badges to be more clear, quickly identifiable, scaleable, and accessible.
Proposal:
Current design | Proposed Design |
---|---|
![]() |
![]() |
New alignment:
With the icons, it now makes sense to left-align the severity labels.
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