fix: --fill-color not reverting back to original color when toggling theme mode

[garrenf]

🐛 Bug Report

On some occasions, when switching from light mode to dark mode, then back to light mode, --fill-color will not revert back to it's original white color, but rather a slightly different darker shade.

💻 Repro or Code Sample

The issue can be seen on the demo site here.

1. Make sure the theme mode is set to light in settings.
2. Observe the background color for the 2 cards under simple card example.
3. Under settings, switch theme to dark then back to light.
4. The top card will revert back to it's original white background color (#FFFFFF), whereas the bottom card will not have a slightly different background color (#FBFBFB).

🤔 Expected Behavior

The bottom card should revert back to it's original white background color.

😯 Current Behavior

--fill-color is reverting back to a different color than the original.

Before toggling theme mode (bottom card's background is pure white):

After toggling theme mode (bottom card's background is slightly darker):

🌍 Your Environment

Browser: Edge

[vnbaaij]

This is due to a bug in the underlying web components.

It can be solved in two ways:

1. Each card needs to be placed in its own HTML container (div/span)
2. Each card should be given the MinimalStyle parameter with value true

Option 1 inserts a lot of extra information into the generated HTML so option 2 is the preferred solution.

[vnbaaij]

PR mentioned updates the example on the demosite to use option 1