FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat: Switch color processing library by camdecoster · Pull Request #7536 · plotly/plotly.js · GitHub

/ plotly.js Public

feat: Switch color processing library - #7536

Merged
camdecoster merged 51 commits into
v4.0from
cam/7523/switch-color-library
Jun 16, 2026
ConversationCommits (51)ChecksFiles changed
Merged

feat: Switch color processing library#7536
camdecoster merged 51 commits into
v4.0from
cam/7523/switch-color-library

Conversation

camdecoster commented Aug 26, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

Switch color processing library from TinyColor to color.

Related to #7523.

Changes

  • Change color processing library
    • hsv color strings are no longer permitted
    • rgb()/rgba() strings with decimal 0–1 fractions are no longer supported. The utility function Color.clean() has been removed.
    • New color specifiers supported:
      • 8-digit hex with alpha (#rrggbbaa) and 4-digit hex short (#rgba)
      • Space-separated and slash-syntax rgb/rgba/hsl (rgba(255 0 0 / 0.5))
      • hsla() and hwb() color functions
  • There are subtle output differences in darken/lighten/mix (HSL multiplicative vs. tinycolor's additive)
  • Update/refactor method calls for dealing with colors
  • Update tests per library change

Testing

  • Check CI for broken tests
  • Run npm run test-jasmine and verify that all tests pass
  • Run npm run test-image and verify that all image-baseline diffs match the regenerated baselines in this PR
  • Verify that npm run schema produces no diff against test/plot-schema.json
  • Run devtools and open the new mock color_syntax_formats and verify that it runs correctly without any errors

Screenshots

Color.contrast, Color.brighten, and Color.addOpacity produce slightly different RGB output. Here are some example plots that can be used to see the difference between tinycolor and color when pasted into Plotly devtools:

Auto-contrast text on a heatmap

Plotly.newPlot(
    gd,
    [
        {
            type: 'heatmap',
            z: [
                [1, 2, 3],
                [4, 5, 6],
                [7, 8, 9]
            ],
            colorscale: 'Jet',
            texttemplate: '%{z}'
        }
    ],
    { width: 400, height: 300 }
);
Before After

Auto inside-text color on default colorway

Plotly.newPlot(gd, {
    data: [
        {
            type: 'bar',
            x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
            y: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            marker: {
                color: [
                    '#1f77b4',
                    '#ff7f0e',
                    '#2ca02c',
                    '#d62728',
                    '#9467bd',
                    '#8c564b',
                    '#e377c2',
                    '#7f7f7f',
                    '#bcbd22',
                    '#17becf'
                ]
            },
            text: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
            textposition: 'inside',
            insidetextanchor: 'middle',
            textfont: { size: 32 },
            hoverinfo: 'skip'
        }
    ],
    layout: {
        title: { text: 'Auto inside-text color on default colorway' },
        showlegend: false,
        bargap: 0,
        xaxis: { visible: false },
        yaxis: { visible: false },
        width: 900,
        height: 220,
        margin: { l: 20, r: 20, t: 60, b: 20 }
    }
});
Before After

Pie with extended colorway (lighten/darken)

Plotly.newPlot(
    gd,
    [
        {
            type: 'pie',
            values: [7, 6, 5, 4, 3, 2, 1]
        }
    ],
    {
        colorway: ['#777', '#F00'],
        width: 400,
        height: 400
    }
);
Before After

Notes

  • The new library allows for use of modern CSS color syntax
  • Derived colors are now always rgb() / rgba() strings
  • The new library increases the plotly.js bundle size by 32kB (14kB for minified)

camdecoster self-assigned this Aug 26, 2025
gvwilson added P1 needed for current cycle fix fixes something broken labels Aug 28, 2025

camdecoster commented Oct 21, 2025

Copy link
Copy Markdown
Contributor Author

I created a couple of PRs (#78 and #81) in a dependency used by color that will add some new features for parsing color strings that would bring it closer to parity with TinyColor. The maintainer recently merged one of these and will (hopefully) be merging the other soon. Once he publishes a new release, I'll be able to use it in plotly.js.

archmoj mentioned this pull request Jan 27, 2026
Merged
camdecoster added this to the v4.0.0 milestone Feb 3, 2026
camdecoster mentioned this pull request Apr 17, 2026
Closed
camdecoster force-pushed the cam/7523/switch-color-library branch from fc905c7 to 6e83d8a Compare April 27, 2026 19:56

emilykl commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

@camdecoster Looks good overall, but lightened/darkened colors seem much less distinct after this change, is there any way to adjust that? Maybe increase the degree of lightening/darkening?

Before After

(codepen)

emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/components/color/index.js
emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/components/color/index.js
};

color.rgb = function(cstr) { return color.tinyRGB(tinycolor(cstr)); };
const rgb = (cstr) => {

emilykl Jun 12, 2026

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.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Can you add a comment explaining that this is for returning a string which doesn't contain alpha? (Or whatever is the purpose of this function, I'm assuming it's that because of the comment in the old file.)

emilykl Jun 13, 2026

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.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

More generally if you could add a few docstrings for the most-commonly-used functions in that file it would be a big improvement

camdecoster Jun 15, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

I'll add descriptions for all the functions in here.

emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/components/color/index.js Outdated
emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/components/color/index.js Outdated
emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/lib/coerce.js
Comment on lines +163 to +168
"- hex (e.g. '#d3d3d3', '#d3d3d3aa')",
"- rgb (e.g. 'rgb(255, 0, 0)', 'rgb(255 0 0)')",
"- rgba (e.g. 'rgba(255, 0, 0, 0.5)', 'rgba(255 0 0 / 0.5)')",
"- hsl (e.g. 'hsl(0, 100%, 50%)')",
"- hsla (e.g. 'hsla(0, 100%, 50%, 0.5)')",
"- hwb (e.g. 'hwb(0, 0%, 0%)')",

emilykl Jun 12, 2026

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.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Weirdly, I can't find this info in the docs anywhere, although I could be missing it. We should make sure the supported color formats are documented with the next release.

camdecoster Jun 15, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

I agree. I'm prepping a migration guide for v4 that should include some of this info, but a follow up should be to update the docs for v4.

emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/traces/carpet/axis_defaults.js
emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/traces/pie/calc.js Outdated
emilykl reviewed Jun 12, 2026
View reviewed changes
Comment thread src/traces/pie/calc.js Outdated

for(i = 0; i < colorList.length; i++) {
colors.push(tinycolor(colorList[i]).lighten(20).toHexString());
colors.push(Color.color(colorList[i]).lighten(0.2).hex());

emilykl Jun 12, 2026 •
edited
Loading

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.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Re: my comment about lightened/darkened colors being too similar, I assume you could just increase this value here to fix.

camdecoster Jun 15, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

I reworked the lighten/darken code to better match what tinycolor did.

emilykl requested changes Jun 13, 2026
View reviewed changes

emilykl 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.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

My only concern is the lighten/darken changes, everything else looks good

camdecoster requested a review from emilykl June 15, 2026 23:32

emilykl commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

@camdecoster Nice, with your edits, the lightened/darkened colors look identical to master.

Before (master) After (this PR)

emilykl approved these changes Jun 16, 2026
View reviewed changes

emilykl 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.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

🌈

camdecoster merged commit 6b143ce into v4.0 Jun 16, 2026
83 checks passed
camdecoster deleted the cam/7523/switch-color-library branch June 16, 2026 20:06
emilykl mentioned this pull request Jul 27, 2026
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

emilykl emilykl approved these changes

Assignees

camdecoster

Labels

fix fixes something broken P1 needed for current cycle

Projects

None yet

Milestone

v4.0.0

Development

Successfully merging this pull request may close these issues.

Update color processing library to handle modern CSS color syntax

3 participants

Back | FazBrowse Home | New Git URL