fix: Inconsistent contrast when nesting layers in Card

[f2bo]

🐛 Bug Report

I'm not quite satisfied with the contrast between a card and its container, particularly in dark mode.

When MinimalStyle is enabled, every layer is rendered using the same color, which I suppose is expected. However, when MinimalStyle is not applied, the first two layers are rendered using the same background color as its container. Why is the behavior that can be seen starting at Layer 3 not applied with the first two layers? (see screenshot below)

To be clear, I'm not planning to use this many layers but how can I ensure that the background color is always changed with respect to its container, starting with the first layer.

💻 Repro or Code Sample

@page "/"

<FluentDesignTheme Mode="DesignThemeModes.Dark" />

<FluentCard MinimalStyle="@minimal">
    Layer 1
    <FluentCard MinimalStyle="@minimal">
        Layer 2
        <FluentCard MinimalStyle="@minimal">
            Layer 3
            <FluentCard MinimalStyle="@minimal">
                Layer 4
                <FluentCard MinimalStyle="@minimal">
                    Layer 5
                    <FluentCard MinimalStyle="@minimal">
                        Layer 6
                    </FluentCard>
                </FluentCard>
            </FluentCard>
        </FluentCard>
    </FluentCard>
</FluentCard>

<FluentCheckbox @bind-Value="@minimal" Label="Use MinimalStyle" Style="margin-top: 30px;"/>

@code {
    private bool minimal = false;
}

🤔 Expected Behavior

Layers 1 and 2 in the screenshot below should be rendered in a different color.

😯 Current Behavior

🔦 Context

🌍 Your Environment

• Windows 10
• Microsoft Edge
• .NET 8.0.6 and Fluent UI Blazor library 4.8.1

[f2bo]

Another oddity that may or may not be related. In the demo site, for the Simple Card example (and others), if you switch from the Light theme to the Dark theme and vice versa, the top card is rendered in a lighter color than the bottom card. Both contain identical markup except for the width and height settings. This is most noticeable in Dark mode. If you then refresh the page, both cards are rendered equally.

[dvoituron]

This is the result desired by MinimalStyle :-)

As explained in the documentation:

... by design, the FluentCard component includes all the styles required for a good representation of the other components included in it (...over 80 CSS variables).

To avoid this, you can use the MinimalStyle property. This will remove all the default styles from the FluentCard component...

So if you use MinimalStyle, all the styles provided by the fluent-card WebComponent are not included. If you want the same color result, you have to add them yourself

[f2bo]

This is the result desired by MinimalStyle :-)

Thanks for the reply.

I did mention above that I expected this result with MinimalStyle but not what I had anticipated when I did not apply it. Please see the second screenshot, which is NOT using MinimalStyle, and where Layers 1 and 2 are both rendered using the same color as their container, whereas the remaining layers exhibit a gradient where each one is rendered in a lighter color than its parent. Why doesn't this behavior apply to the first two layers? Is this behavior by design?

You also make no mention about the second issue I pointed out when switching between dark and light modes and that can be seen in your demo site but I care less about this particular problem.

[dvoituron]

I did mention above that I expected this result with MinimalStyle but not what I had anticipated when I did not apply it. Please see the second screenshot, which is NOT using MinimalStyle, and where Layers 1 and 2 are both rendered using the same color as their container, whereas the remaining layers exhibit a gradient where each one is rendered in a lighter color than its parent. Why doesn't this behavior apply to the first two layers? Is this behavior by design?

Unfortunately, we can't change the behavior of the FluentCard with MinimalStyle=false, because we're using the web component fluent-card created in this repository. You can drop in an Issue for more information.

This is also one of the reasons why we've redesigned the FluentCard with MinimalStyle=true: to have more control over the visual aspect of this component.