Dark mode colors: Stacked column chart (stepped saturation)
Problem
- From this issue: gitlab-org/gitlab-services/design.gitlab.com#619 (closed)
- Transparency in charts + dark mode = disaster
Solution
Update stacked column chart dark mode color scheme.
Color Sequence
Color sequence follows similar pattern to light mode
- Set 1 (top down)
- $data-viz-blue-100
- $data-viz-blue-200
- $data-viz-blue-300
- $data-viz-blue-400
- $data-viz-blue-500
- Set 2
- $data-viz-orange-100
- ...
- Set 3
- $data-viz-aqua-100
- ...
- ...
Gap
- Create a 1px gap to differentiate column stacks further
Hovering
While hovering over columns:
- 2px white border (inner radius) across entire stacked column
- Saturate color by an extra 200 (for example $dv-blue-300 >>> $dv-blue-500)
- Fill opacity 80%
Links
Edited by Michael Lunøe