Skip to content

fix: Convert CSS color specifiers to rgba in gl traces - #8119

Merged
camdecoster merged 3 commits into
mainfrom
cam/8116/convert-css-specifiers-rgba-gl-traces
Oct 14, 2026
Merged

camdecoster merged 3 commits into
mainfrom
cam/8116/convert-css-specifiers-rgba-gl-traces

Conversation

@camdecoster

@camdecoster camdecoster commented Oct 14, 2026 •

Copy link
Copy Markdown
Contributor

Description

Convert CSS color specifiers to rgba before passing them to regl libraries to avoid issues with syntax compatibility.

Closes #8116.

Changes

  • Convert color specifiers
  • Add tests

Screenshots

Before After
image image

Testing

  • Be on main
  • Open Plotly devtools and paste the following into the browser devtools console:
    const c = 'oklch(0.7 0.15 30)';
    const trace = {
        x: [1, 2, 3], y: [1, 3, 2], mode: 'lines+text', text: ['a', 'b', 'c'], textposition: 'top center',
        line: { color: c, width: 4 }, fill: 'tozeroy', fillcolor: c, textfont: { color: c, size: 20 },
        error_y: { array: [0.5, 0.5, 0.5], color: c, thickness: 3 }
    };
    Plotly.newPlot(gd, [
        { ...trace, type: 'scatter', name: 'scatter' },
        { ...trace, type: 'scattergl', name: 'scattergl', xaxis: 'x2', yaxis: 'y2' }
    ], { grid: { rows: 1, columns: 2, pattern: 'independent' }, width: 800, height: 400 });
  • Note that the scattergl trace has the incorrect color
  • Switch to this branch
  • Run the snippet again
  • Note that the scattergl trace has the correct color

Notes

  • The underlying regl libraries that these traces use rely on an older color parsing library that doesn't parse modern CSS color specifiers (color-normalize v1.5.2)
  • plotly.js already has the feature to convert modern specifiers to rgba, so I did that here

@camdecoster
camdecoster marked this pull request as ready for review October 14, 2026 12:44

@KoolADE85 KoolADE85 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Looks good here! 💃

@camdecoster
camdecoster merged commit eff4574 into main Oct 14, 2026
328 of 337 checks passed
@camdecoster
camdecoster deleted the cam/8116/convert-css-specifiers-rgba-gl-traces branch October 14, 2026 21:09
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.

[BUG]: scattergl renders line.color, fillcolor, error_x.color, error_y.color, and textfont.color incorrectly with modern CSS color spaces

2 participants