Severity and Risk score colors in dark mode
Problems to solve
In light mode, we use a darker/ more saturated red color for critical (red-800), and a lighter red color for high (red-600). This logic (darker = more severe) is reversed in dark mode:
| Light mode | Dark mode |
|---|---|
|
|
This problem is emphasized further on the new security dashboard, when the risk score panel is grouped by projects:
| Light mode | Dark mode |
|---|---|
|
|
We should also note that the dark mode colors don't match the critical and high severity colors in dark mode in the panel just below it. Also note that the Medium and Low colors cannot be differentiated.
Anecdotes from engineering team members:
The project grouping tab in dark mode has lighter colors for higher scores compared to the ones with lower scores which seems to be not the case for light mode. Is this intentional?
Hmm I also found this a bit confusing. I feel like my eyes are drawn to the darker shades (lower risk) more so than the lighter shades.
Proposal
Define CSS custom properties and classes in gitlab project for severity colors for both light and dark mode.
Make sure they are updated throughout the code base, in multiple locations in the UI, including:
- in the MR
- in the Pipeline page > Security tab
- Vulnerability report
- Vulnerability detail page
Implementation details
- Define CSS custom properties in
root.scss(see table) - Define class names for convenience use
- Update in all places where severity colors are used
| token name | light mode value | dark mode value |
|---|---|---|
--severity-foreground-color-critical |
gl-color-red-800 |
gl-color-red-500 |
--severity-foreground-color-high |
gl-color-red-600 |
gl-color-red-300 |
--severity-foreground-color-medium |
gl-color-orange-400 |
gl-color-orange-300 |
--severity-foreground-color-low |
gl-color-orange-300 |
gl-color-orange-100 |
--severity-foreground-color-info |
gl-color-blue-400 |
gl-color-blue-300 |
--severity-foreground-color-unknown |
gl-color-neutral-400 |
gl-color-neutral-300 |