Update severity badge in MR security reports

Background:

From this issue: #34352 (closed) we are redesigning our severity badges to be more clear, quickly identifiable, scaleable, and accessible.

Proposal:

In_use__MR_Widget

New badge designs:

Old badge in MR New badge New badge color
critical Severity_critical-label #8B2615
high Severity_high-label #C0341D
medium Severity_medium-label #FCA429
low Severity_low-label #FDBC60
info Severity_info-label #418CD8
unknown Severity_unknown-label #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