Dark mode colors: Stacked column chart (cross-column colors)
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
- $dv-blue-300
- $dv-orange-300
- $dv-aqua-300
- $dv-green-300
- $dv-magenta-300
- Set 2
- $dv-blue-500
- ...
- Set 3
- $dv-blue-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%