fix(platform-insights): Neutral chart color too light

[ArthurKnaus]

In the new UI the color gray200 is much lighter than before and unfit for usage in chart. This PR adds a hook for calculating a neutral chart color until the new theme supports this natively.

Light mode

Dark mode

[cursor]

Bug: Color Lightening Method Accepts Invalid Range

The Color.lighten() method is called with 1.3, which is outside the standard 0-1 range for color lightening. This can cause unexpected behavior, errors, or the color being clamped (e.g., to white), leading to inconsistent rendering across environments or with different Color library versions.

static/app/views/insights/pages/platform/shared/useNeutralChartColor.tsx#L17-L18

sentry/static/app/views/insights/pages/platform/shared/useNeutralChartColor.tsx

Lines 17 to 18 in 625e19c

	? Color(theme.gray400).darken(0.35)
	: Color(theme.gray400).lighten(1.3);

Fix in Cursor • Fix in Web

---

Was this report helpful? Give feedback by reacting with 👍 or 👎

[shellmayr]

Looks good! Should we also use it in Laravel, Next.js and the generic backend view? (edit: ah I just realized the base widget takes care of that)

[JonasBa]

@matejminar @shellmayr @ArthurKnaus

Would you mind please surfacing these issues in ui2 or design engineering channels next time?

While the approach here is fine, we need to tackle these problems at a systematic level, else we'll just end up with different looking chart colors everywhere. A custom hook here is also the wrong approach, because we now have two different places where chart color definitions live (we want these to be centralized). The problem with hooks like these is that in the context of the Sentry codebase, they are virtually non discoverable, so nobody besides you will know they exist.