Charts: custom palettes (brushes, outlines) are not applied when chart is in step or tab content (IgxStepper, IgxTabs)

[ddaribo]

Description

When Pie or Category charts are rendered within in IgxStep or IgxTab content, the custom --brushes and --outlines CSS variables are not applied. For a "standalone" chart, custom palette is correctly applied.

.pie-chart {
  --brushes: #77567A #679EC1 #6600BE #D7FCF0 #DEBAC0;
  --outlines: #77567A #679EC1 #6600BE #D7FCF0 #DEBAC0;
}

Usual workarounds, such as applying the :host ::ng-deep pseudo-classes or declaring the variables on the :root level do not resolve this.

The attached sample also includes a button having custom background, which is affecting it both outside and within a step/tab content, showing that the styles are propagated correctly for other components:

button {
  --background: #77567A;
}

Note: this is the code generated from the App Builder (project here).
For WC and React, custom palette is applied correctly in the exported app witht the same approach, so it should be correct. For Blazor, currently there is this TFS issue open, so custom palettes are not applied at all.
Hence, logging this as an issue with the Ignite UI for Angular charts, as the approach seems to be working for the other platforms and components.

• igniteui-angular version: any
• browser: any

Steps to reproduce

1. Open attached sample

Result

Expected result

Attachments

test-charts-custom-palette_angular-standalone.zip