Skip to content

Proposal: Sequential blue palette for version download chart#37

Open
Thomas-Vos00 wants to merge 1 commit intomainfrom
feat/sequential-blue-download-chart-palette
Open

Proposal: Sequential blue palette for version download chart#37
Thomas-Vos00 wants to merge 1 commit intomainfrom
feat/sequential-blue-download-chart-palette

Conversation

@Thomas-Vos00
Copy link
Collaborator

Proposal

Replace the rainbow categorical color scheme in the version download bar chart with a single-hue sequential blue palette. This is a visual design proposal — feedback welcome.

Problem

The current chart uses 6 highly saturated, unrelated colors (blue, teal, yellow, orange, dark navy + muted foreground) that create visual noise:

  • No visual hierarchy — every segment competes equally for attention, with "Other" (the least meaningful category) being just as prominent
  • Warm/cool clash — jumping between unrelated hues creates a jarring rainbow effect
  • Adjacent high-contrast pairs — dark navy next to bright teal, yellow next to orange creates harsh segment boundaries

Solution

  • Sequential blue palette (#08519c#9ecae1) — signals that all version segments are related (versions of the same package) and naturally reduces visual noise. Most-downloaded version gets the darkest blue (most prominent at bottom of stack).
  • Neutral gray for "Other" — pushes the catch-all category to the background
  • Dark mode support — colors are defined as CSS custom properties (--chart-blue-1 through --chart-blue-5, --chart-other) with separate light/dark values
  • Dynamic interpolation — colors are evenly distributed across the palette regardless of the number of versions (1–5) via a getVersionColor() helper

Additional fixes

  • Fixed useMemo never cachingversions was derived via .map() outside useMemo but listed as a dependency, creating a new array reference every render and defeating memoization entirely
  • Extracted OTHER_VERSION constant — reduces fragile string coupling with the backend

Palette

Segment Light mode Dark mode
Version 1 (most downloaded) #08519c (dark blue) #6baed6 (light blue)
Version 2 #2171b5 #4292c6
Version 3 #4292c6 #2171b5
Version 4 #6baed6 #08519c
Version 5 #9ecae1 (light blue) #084594 (dark blue)
Other #d4d4d8 (light gray) oklch(0.35 0 0) (dark gray)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: it'd probably be more logical to keep the colors in oklch color space.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants