Animate's panelBackgroundColor is inaccurate and only works for 2 of 4 total themes

[Inventsable]

I've known of this for a while and should've posted an Issue much sooner but have only now started panels for Animate, this is at least since 2018. Take the following code in a CEP panel:

window.__adobe_cep__.addEventListener("com.adobe.csxs.events.ThemeColorChanged", () => {
        let color = JSON.parse(window.__adobe_cep__.getHostEnvironment())
          .appSkinInfo.panelBackgroundColor.color;
        console.log(rgbToHex([color.red + 1, color.green + 1, color.blue + 1]));
      })

function rgbToHex(rgbArray) {
  return ("#" + rgbArray
      .map(c => {
        c = c <= 255 ? Math.abs(Math.floor(c)).toString(16) : 0;
        return c.length < 2 ? `0${c}` : c;
      }).join("")
  );
}

The above code works for every other CEP app -- Illustrator, AE, etc, with reliable results to get the exact background hex color. But with Animate, despite firing ThemeChanges accurately (actually fires events incorrectly, see #266), appSkinInfo.panelBackgroundColor provides these values:

• Darkest = #424242
• Dark = #424242
• Light = #d3d3d3
• Lightest = #d3d3d3

Not only does it provide a single value per light/dark variant, but the above are completely inaccurate (may be hardcoded fake values somewhere?). The real values should instead be:

• Darkest = #1e1e1e
• Dark = #323232
• Light = #f5f5f5
• Lightest = #ffffff

[Inventsable]

For posterity the color provided on Dark themes is a delta shift of 35, and light themes of at least -43. This is the difference between:

• DARK: #424242 => #1e1e1e
• LIGHT: #d3d3d3 => #ffffff

No idea where these values came from but they're way off from the actual background.

[justintaylor-dev]

+1 for this