Can't change TextElement.Foreground property in Button if accent class is present (Fluent Theme)

[NotQuiteLoona]

If I'm specifying the accent class in a button and changing TextElement.Foreground property in styles, it doesn't work.

Screenshot

The same is if I'm specifying selector as just Button, without accent class.

Screenshot

However, when I'm removing the accent class from button, it works.

Screenshot

Minimal reproducible example of my problem

Use Fluent Theme in the app.

<Window> <!-- I'll skip here all of the Window's tags -->
    <Window.Styles>
        <Style Selector="Button.accent">
            <Setter Property="TextElement.Foreground" Value="Gray"/>
        </Style>
    </Window.Styles>
    
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <Button Classes="accent">Click me!</Button>
    </StackPanel>
</Window>

Also creating style for some other class and adding this class to the button doesn't work too.

Screenshot

I first thought that maybe Fluent Theme overrides somewhere TextElement.Foreground for accent class, but no, as I saw here.

What is the reason of such a behavior and how can I still style that element?

[timunie]

Please lookup the original styles for button. Most likely there is a dynamic resource to override. Otherwise your selector may need to access some template parts.

DevTools can also help ironing out such issues.

[NotQuiteLoona]

As I said in the message that started this topic, I already checked Button's style in Fluent Theme, and found nothing.

But in DevTools I saw that Button has a subcontrol called AccessText. If I was changing Button's TextElement.Foreground, it done nothing, but if I was changing AccessText's Foreground, it did change the color.

I tried to make a style for Button's AccessText.Foreground. It didn't work (but autocompletion did worked, meaning that I was doing the right thing, probably):

<Style Selector="Button.accent">
    <Setter Property="AccessText.Foreground" Value="Blue"/>
</Style>

But after I specified all AccessText's in the selector, it worked:

<Style Selector="AccessText">
    <Setter Property="Foreground" Value="Blue"/>
</Style>

So, the solution for my problem was the next:

<Style Selector="Button.accent > AccessText">
    <Setter Property="Foreground" Value="Blue"/>
</Style>

However, this is not looking like a really good way to do such a thing.

What if a control contains two subcontrols, but under different names, and I want to change them differently?

So, I'm curious about the reason of such a behavior.
Why I can't change subcontrols in a style, if I'm specifying their parent in the selector and them in the Setter's Property, but I can change their styles if I'm specifying their class in the selector, and adding that they should be the children of the parent class?

[timunie]

Here is the relevant part:

Avalonia/src/Avalonia.Themes.Fluent/Controls/Button.xaml

Lines 67 to 91 in aa25441

	<Style Selector="^.accent">
	<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
	<Setter Property="Background" Value="{DynamicResource AccentButtonBackground}" />
	<Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrush}" />
	<Setter Property="Foreground" Value="{DynamicResource AccentButtonForeground}" />
	</Style>
	<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
	<Setter Property="Background" Value="{DynamicResource AccentButtonBackgroundPointerOver}" />
	<Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrushPointerOver}" />
	<Setter Property="Foreground" Value="{DynamicResource AccentButtonForegroundPointerOver}" />
	</Style>
	<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
	<Setter Property="Background" Value="{DynamicResource AccentButtonBackgroundPressed}" />
	<Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrushPressed}" />
	<Setter Property="Foreground" Value="{DynamicResource AccentButtonForegroundPressed}" />
	</Style>
	<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
	<Setter Property="Background" Value="{DynamicResource AccentButtonBackgroundDisabled}" />
	<Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrushDisabled}" />
	<Setter Property="Foreground" Value="{DynamicResource AccentButtonForegroundDisabled}" />
	</Style>
	</Style>

Easiest way is to re-define the DynamicResources:

<App.Resources>
    <SolidColorBrush x:Key="TheKeyYouWantToOverride">Blue</SolidColorBrush>
...

[NotQuiteLoona]

Here is the relevant part:

Avalonia/src/Avalonia.Themes.Fluent/Controls/Button.xaml

Lines 67 to 91 in aa25441

	<Style Selector="^.accent">
	<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
	<Setter Property="Background" Value="{DynamicResource AccentButtonBackground}" />
	<Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrush}" />
	<Setter Property="Foreground" Value="{DynamicResource AccentButtonForeground}" />
	</Style>
	<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
	<Setter Property="Background" Value="{DynamicResource AccentButtonBackgroundPointerOver}" />
	<Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrushPointerOver}" />
	<Setter Property="Foreground" Value="{DynamicResource AccentButtonForegroundPointerOver}" />
	</Style>
	<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
	<Setter Property="Background" Value="{DynamicResource AccentButtonBackgroundPressed}" />
	<Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrushPressed}" />
	<Setter Property="Foreground" Value="{DynamicResource AccentButtonForegroundPressed}" />
	</Style>
	<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
	<Setter Property="Background" Value="{DynamicResource AccentButtonBackgroundDisabled}" />
	<Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBorderBrushDisabled}" />
	<Setter Property="Foreground" Value="{DynamicResource AccentButtonForegroundDisabled}" />
	</Style>
	</Style>

Easiest way is to re-define the DynamicResources:

<App.Resources>
    <SolidColorBrush x:Key="TheKeyYouWantToOverride">Blue</SolidColorBrush>
...

Oh, I'm feeling myself so stupid... I was searching for something like AccentButtonTextForeground, I didn't think about these resources.

Thank you for answering, you helped me a lot!