LWLP-925: integrate SPUR feedback (brand palette, column width)

[katarinazaprazna]

Summary

• Brand palette: Ecosystem exact/partial fills use CSS variables. Light mode keeps brand colors for exact matches and a white-mixed tint for partials. Dark mode lightens both so darker brand hexes stay above contrast ratio of 3:1. Unknown ecosystems fall back to purple tokens.

• A11Y (ecosystem bars): The SVG chart is hidden from assistive tech and a screen-reader-only table exposes the same per-ecosystem counts. This companion-table approach was discussed in patternfly-react#2506.

• Chart modularization: Charts move into standalone modules so a Lens report can be easily exported as PDF later. With explicit width/height, the charts serialize to SVG that Puppeteer can print (content-sources-frontend#1209). Charts can turn tooltips and legend on/off per surface (web or PDF).

• Package table: Sets fixed column widths so the table layout and its loading skeleton stay the same.

Testing steps

• Confirm ecosystem bars use brand colors per ecosystem
• Confirm donut uses green match colors
• Toggle Console dark mode and confirm color swap
• Screen reader: ecosystem breakdown exposes “Package matches by ecosystem” table data
• Package coverage table columns keep readable widths across the four columns

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 63.89%. Comparing base (73dda14) to head (02a0b7d).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1221   +/-   ##
=======================================
  Coverage   63.89%   63.89%           
=======================================
  Files         149      149           
  Lines        5511     5511           
  Branches     1077     1077           
=======================================
  Hits         3521     3521           
  Misses       1688     1688           
  Partials      302      302           

Flag	Coverage Δ
e2e	63.89% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[sourcery-ai]

Hey - I've reviewed your changes and they look great!

Sourcery assessment

Approved.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

[dominikvagner]

just a thought, not sure if this was discussed somewhere 💭
why is there a npm entry, when everything else is actually a language, shouldn't it be Javascript? It looks a bit out of place imo, given that the rest are languages and then this one is a package manager/registry 🤔😅

[katarinazaprazna]

Thanks for pointing this out @dominikvagner! It’s just dummy data for demonstration purposes at the moment. Before the ecosystem → language change happened, I’d often hear about upcoming support for the npm ecosystem, so I haven't questioned the naming. I’ll ask around, since technically it could be either JavaScript or TypeScript packages, and I’m not sure what we want to call it here

[xbhouse]

i'm seeing exact matches have a lighter saturation in dark mode, though in your screenshots it looks like exact matches are more saturated in both light and dark modes. the brighter/darker color for exact is what i'd expect, but maybe i'm missing something 😅

[katarinazaprazna]

Quick note from our Slack discussion: this screenshot is actually from before dark mode color modulation was added

[sourcery-ai]

Sourcery assessment

Approved.

[sourcery-ai]

Sourcery assessment

Approved.

[sourcery-ai]

Sourcery assessment

Approved.

[sourcery-ai]

Sourcery assessment

Approved.

[sourcery-ai]

Sourcery assessment

Approved.

[xbhouse]

this looks so nice 🤩 awesome job!! just a couple thoughts:

1. with the color switch in the charts, the label colors for "Exact" and "Partial" in the packages table might be confusing. what do you think about matching these label colors with the donut chart?

2. the color shades for "exact"/"partial" inverting in dark mode could make "partial" look like the better match. as i understand it (and please correct me if this is wrong!), this is done this way because there might be concerns (accessibility, going against PF standards, etc) with keeping the "exact" shade more prominent in both light and dark modes?