Skip to content

Commit ea74c1f

Browse files
apmanapman
authored
Refactor resource structure & update Sampler for new theme name (#5)
* Refactor resource structure & naming scheme * Update Sampler app with new theme name
1 parent 2148da3 commit ea74c1f

File tree

9 files changed

+504
-490
lines changed

9 files changed

+504
-490
lines changed

‎samples/SampleApp/App.axaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@
1313
<Application.Styles>
1414
<!-- <StyleInclude Source="avares://Avalonia.Themes.Simple/SimpleTheme.axaml" /> -->
1515
<!-- <StyleInclude Source="avares://Avalonia.Themes.Fluent/FluentTheme.axaml" /> -->
16-
<StyleInclude Source="avares://MacOS.Avalonia.Theme/MacOSTheme.axaml" />
16+
<StyleInclude Source="avares://Devolutions.MacOS.Avalonia.Theme/MacOSTheme.axaml" />
1717
</Application.Styles>
1818
</Application>

‎samples/SampleApp/MainWindow.axaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<TextBlock FontWeight="600">Overview</TextBlock>
1616
</TabItem.Header>
1717
<StackPanel Margin="10">
18-
<TextBlock Classes="h1" Text="Theme Sampler" />
18+
<TextBlock Classes="h1" Text="Devolutions MacOS Theme Sampler" />
1919
<TextBlock FontSize="15" LineSpacing="2" TextWrapping="Wrap">
2020
Elements in this sampler are styled with a partial
2121
<TextBlock Classes="code" FontSize="16" Text="Avalonia.MacOS" />

‎samples/SampleApp/SampleApp.csproj

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,16 @@
2121
<PackageReference Include="Avalonia.Svg.Skia" Version="11.2.0.2"/>
2222
<PackageReference Include="Svg.SourceGenerator.Skia" Version="2.0.0.4"/>
2323
<PackageReference Include="Avalonia.Controls.Skia" Version="11.2.0.2"/>
24+
<!-- <PackageReference Include="Devolutions.MacOS.Avalonia.Theme" Version="2024.12.4" /> -->
2425
</ItemGroup>
2526

2627
<ItemGroup>
2728
<AdditionalFiles Include="Assets/Padlock.svg" NamespaceName="SampleApp" ClassName="Padlock"/>
2829
</ItemGroup>
2930

30-
<!-- AMP: Temporary link during development. Once the theme is packaged as a nuget, it can be referenced like the others above-->
31+
<!-- Temporary link for development.
32+
(To use the published nuget, uncomment PackageReference above (update version) or install with Nuget manager) -->
3133
<ItemGroup>
32-
<ProjectReference Include="..\..\src\MacOS.Avalonia.Theme\MacOS.Avalonia.Theme.csproj" />
34+
<ProjectReference Include="..\..\src\Devolutions.MacOS.Avalonia.Theme\Devolutions.MacOS.Avalonia.Theme.csproj"/>
3335
</ItemGroup>
3436
</Project>

‎src/Devolutions.MacOS.Avalonia.Theme/Accents/ThemeResources.axaml

Lines changed: 56 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,72 @@
11
<ResourceDictionary xmlns="https://github.com/avaloniaui"
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
3-
<Color x:Key="ButtonDefaultBackgroundColor">White</Color>
4-
<Color x:Key="ButtonBackgroundActiveColor">LightGray</Color>
5-
<Color x:Key="ButtonBackgroundPointerOverColor">red</Color>
6-
<Color x:Key="ButtonBorderTopColor">#d6d6d6</Color>
7-
<Color x:Key="ButtonBorderBottomColor">#b5b5b5</Color>
8-
<!-- TODO: Appkit buttons have DD at the bottom, EE at the top & fading ... -->
9-
<Color x:Key="ButtonPrimaryForegroundColor">White</Color>
10-
<Color x:Key="CodeFontColor">SlateBlue</Color>
11-
<Color x:Key="CodeBackgroundColor">#f7f7f7</Color>
12-
<!-- <Color x:Key="SelectionUnfocusedColor">#f3f3f3</Color> -->
13-
<Color x:Key="TabUnselectedColor">#f2f2f2</Color>
14-
<Color x:Key="PanelBorderColor">#ececec</Color>
15-
<Color x:Key="PanelBackgroundColor">#f7f7f7</Color>
16-
<Color x:Key="SidePanelBackgroundColor">#e5e5e5</Color>
17-
<Color x:Key="TabStripBorderColor">#e6e6e6</Color>
3+
<Color x:Key="BackgroundColor">#ffffff</Color>
4+
<Color x:Key="ForegroundColor">#000000</Color>
185

6+
<Color x:Key="AccentForegroundColor">#ffffff</Color>
7+
8+
<Color x:Key="ControlBorderHighColor">#4a000000</Color> <!-- 29% -->
9+
<Color x:Key="ControlBorderLowColor">#29000000</Color> <!-- 16% -->
10+
<!-- TODO: Appkit buttons have DD at the bottom, EE at the top & fading -> try sub-pixel rendering (UseLayoutRounding) (s. `default button issues.psd` ... -->
1911

2012
<CornerRadius x:Key="ControlCornerRadius">5</CornerRadius>
2113

22-
<!-- Typography -->
23-
<SolidColorBrush x:Key="TextPrimaryColor" Color="Black" />
24-
<SolidColorBrush x:Key="TextOnDarkColor" Color="White" />
25-
<SolidColorBrush x:Key="TextSecondaryColor" Color="Black" Opacity="0.5" />
26-
<SolidColorBrush x:Key="TextTertiaryColor" Color="Black" Opacity="0.25" />
27-
<SolidColorBrush x:Key="SelectionUnfocused" Color="Black" Opacity="0.09" />
28-
<x:Double x:Key="H1FontSize">16</x:Double>
29-
<FontWeight x:Key="H1FontWeight">Bold</FontWeight>
30-
<Thickness x:Key="H1Margins">0,0,0,10</Thickness>
31-
<FontFamily x:Key="CodeFontFamily">"Courier New, Courier, monospace"</FontFamily>
14+
<Thickness x:Key="BorderThickness">1</Thickness>
15+
<Thickness x:Key="ControlBorderThickness">1</Thickness>
3216

33-
<SolidColorBrush x:Key="Highlight" Color="{DynamicResource HighlightColor}" />
17+
<x:Double x:Key="FontSize">13</x:Double>
3418

35-
<SolidColorBrush x:Key="PanelBorder" Color="{DynamicResource PanelBorderColor}" />
36-
<SolidColorBrush x:Key="PanelBackground" Color="{DynamicResource PanelBackgroundColor}" />
37-
<SolidColorBrush x:Key="SidePanelBackground" Color="{DynamicResource SidePanelBackgroundColor}" />
38-
<Thickness x:Key="PanelBorderThickness">1</Thickness>
3919

40-
<Thickness x:Key="TabItemPadding">8 2</Thickness>
20+
<SolidColorBrush x:Key="ForegroundHighBrush" Color="{StaticResource ForegroundColor}" />
21+
<SolidColorBrush x:Key="ForegroundMidBrush" Color="{StaticResource ForegroundColor}" Opacity="0.5" />
22+
<SolidColorBrush x:Key="ForegroundLowBrush" Color="{StaticResource ForegroundColor}" Opacity="0.25" />
4123

42-
<Thickness x:Key="ButtonDefaultBorderThickness">1</Thickness>
43-
<Thickness x:Key="ButtonDefaultPadding">10 2</Thickness>
44-
<x:Double x:Key="ButtonDefaultFontSize">13</x:Double>
45-
<FontWeight x:Key="ButtonDefaultFontWeight">400</FontWeight>
46-
<SolidColorBrush x:Key="ButtonDefaultBackground" Color="{DynamicResource ButtonDefaultBackgroundColor}" />
47-
<SolidColorBrush x:Key="ButtonDefaultPressedBackground" Color="{DynamicResource ButtonBackgroundActiveColor}" />
48-
<LinearGradientBrush x:Key="ButtonDefaultBorder" StartPoint="0%,0%" EndPoint="0%,100%">
49-
<GradientStop Offset="0" Color="{DynamicResource ButtonBorderTopColor}" />
50-
<GradientStop Offset="1" Color="{DynamicResource ButtonBorderBottomColor}" />
51-
</LinearGradientBrush>
52-
<SolidColorBrush x:Key="ButtonDisabledBorder" Color="{DynamicResource ButtonBorderTopColor}" />
53-
<SolidColorBrush x:Key="ButtonDisabledBackground" Color="{DynamicResource ButtonDefaultBackgroundColor}" Opacity="50" />
54-
<SolidColorBrush x:Key="ButtonPrimaryForeground" Color="{DynamicResource ButtonPrimaryForegroundColor}" />
55-
<SolidColorBrush x:Key="AccentDefault" Color="{DynamicResource SystemAccentColor}" />
56-
<SolidColorBrush x:Key="AccentDefaultDark" Color="{DynamicResource SystemAccentColorDark1}" />
57-
<SolidColorBrush x:Key="TabStripBorder" Color="{DynamicResource TabStripBorderColor}" />
24+
<SolidColorBrush x:Key="LayoutBackgroundHighBrush" Color="{StaticResource ForegroundColor}" Opacity="0.12" />
25+
<SolidColorBrush x:Key="LayoutBackgroundLowBrush" Color="{StaticResource ForegroundColor}" Opacity="0.03" />
5826

59-
<LinearGradientBrush x:Key="ButtonPrimaryBackground" StartPoint="0%,0%" EndPoint="0%,100%">
60-
<GradientStop Offset="0" Color="{DynamicResource SystemAccentColorLight1}" />
61-
<GradientStop Offset="1" Color="{DynamicResource SystemAccentColor}" />
27+
<SolidColorBrush x:Key="LayoutBorderMidBrush" Color="{StaticResource ForegroundColor}" Opacity="0.07" />
28+
<SolidColorBrush x:Key="LayoutBorderLowBrush" Color="{StaticResource ForegroundColor}" Opacity="0.02" />
29+
30+
<SolidColorBrush x:Key="ControlForegroundAccentHighBrush" Color="{StaticResource AccentForegroundColor}" />
31+
32+
<SolidColorBrush x:Key="ControlBackgroundHighBrush" Color="{StaticResource BackgroundColor}" />
33+
<SolidColorBrush x:Key="ControlBackgroundMidBrush" Color="{StaticResource ForegroundColor}" Opacity="0.1" />
34+
<SolidColorBrush x:Key="ControlBackgroundLowBrush" Color="{StaticResource ForegroundColor}" Opacity="0.9" />
35+
<SolidColorBrush x:Key="ControlBackgroundActiveHighBrush" Color="{StaticResource ForegroundColor}" Opacity="0.05" />
36+
<LinearGradientBrush x:Key="ControlBackgroundAccentRaisedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
37+
<GradientStop Offset="0" Color="{StaticResource SystemAccentColorLight1}" />
38+
<GradientStop Offset="1" Color="{StaticResource SystemAccentColor}" />
39+
</LinearGradientBrush>
40+
<LinearGradientBrush x:Key="ControlBackgroundAccentRecessedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
41+
<GradientStop Offset="0" Color="{StaticResource SystemAccentColor}" />
42+
<GradientStop Offset="1" Color="{StaticResource SystemAccentColorDark1}" />
6243
</LinearGradientBrush>
63-
<LinearGradientBrush x:Key="ButtonPrimaryPressedBackground" StartPoint="0%,0%" EndPoint="0%,100%">
64-
<GradientStop Offset="0" Color="{DynamicResource SystemAccentColor}" />
65-
<GradientStop Offset="1" Color="{DynamicResource SystemAccentColorDark1}" />
44+
<SolidColorBrush x:Key="ControlBackgroundDisabledHighBrush"
45+
Color="{StaticResource BackgroundColor}" Opacity="0.5" />
46+
<LinearGradientBrush x:Key="ControlBorderRaisedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
47+
<GradientStop Offset="0" Color="{StaticResource ControlBorderLowColor}" />
48+
<GradientStop Offset="1" Color="{StaticResource ControlBorderHighColor}" />
6649
</LinearGradientBrush>
67-
<VisualBrush x:Key="ButtonPrimaryBackgroundPrecise" Stretch="Fill">
50+
<LinearGradientBrush x:Key="ControlBorderRecessedBrush" StartPoint="0%,0%" EndPoint="0%,100%">
51+
<GradientStop Offset="0" Color="{StaticResource ControlBorderHighColor}" />
52+
<GradientStop Offset="1" Color="{StaticResource ControlBorderLowColor}" />
53+
</LinearGradientBrush>
54+
<SolidColorBrush x:Key="ControlBorderDisabledBrush" Color="{StaticResource ControlBorderLowColor}" />
55+
56+
<!-- Button Resources -->
57+
<Thickness x:Key="ButtonPadding">10 2</Thickness>
58+
<FontWeight x:Key="ButtonFontWeight">400</FontWeight>
59+
60+
<!-- TabControl & TabItem Resources -->
61+
<Color x:Key="TabControlBackgroundColor">#f2f2f2</Color>
62+
<Thickness x:Key="TabItemPadding">8 2</Thickness>
63+
<SolidColorBrush x:Key="TabControlBackgroundBrush" Color="{StaticResource TabControlBackgroundColor}" />
64+
65+
<!-- TODO: To be replaced by templated button control (accent colour with hard-coded gradient overlay) -->
66+
<VisualBrush x:Key="TempButtonPrimaryBackgroundPrecise" Stretch="Fill">
6867
<VisualBrush.Visual>
6968
<Panel>
70-
<!-- <Rectangle Fill="{DynamicResource SystemAccentColor}" Width="20" Height="20" /> // might not have access to Logical tree where resources are defined-->
69+
<!-- <Rectangle Fill="{StaticResource SystemAccentColor}" Width="20" Height="20" /> // might not have access to Logical tree where resources are defined-->
7170
<Rectangle Fill="#007aff" Width="20" Height="20" />
7271
<Rectangle>
7372
<Rectangle.Fill>
@@ -84,10 +83,10 @@
8483
</VisualBrush.Visual>
8584
</VisualBrush>
8685

87-
<VisualBrush x:Key="ButtonPrimaryPressedBackgroundPrecise" Stretch="Fill">
86+
<VisualBrush x:Key="TempButtonPrimaryPressedBackgroundPrecise" Stretch="Fill">
8887
<VisualBrush.Visual>
8988
<Panel>
90-
<!-- <Rectangle Fill="{DynamicResource AccentDefaultDark}" Width="20" Height="20" /> -->
89+
<!-- <Rectangle Fill="{StaticResource ControlBackgroundAccentMidBrush}" Width="20" Height="20" /> -->
9190
<Rectangle Fill="#005FC6" Width="20" Height="20" />
9291
<Rectangle>
9392
<Rectangle.Fill>
@@ -103,5 +102,4 @@
103102
</Panel>
104103
</VisualBrush.Visual>
105104
</VisualBrush>
106-
107105
</ResourceDictionary>

‎src/Devolutions.MacOS.Avalonia.Theme/Controls/Button.axaml

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,50 +11,50 @@
1111

1212
<ControlTheme x:Key="{x:Type Button}"
1313
TargetType="Button">
14-
<Setter Property="Background" Value="{DynamicResource ButtonDefaultBackgroundColor}" />
15-
<Setter Property="Foreground" Value="{DynamicResource TextPrimaryColor}" />
16-
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorder}" />
17-
<Setter Property="BorderThickness" Value="{DynamicResource ButtonDefaultBorderThickness}" />
14+
<Setter Property="Background" Value="{DynamicResource ControlBackgroundHighBrush}" />
15+
<Setter Property="Foreground" Value="{DynamicResource ForegroundHighBrush}" />
16+
<Setter Property="BorderBrush" Value="{DynamicResource ControlBorderRaisedBrush}" />
17+
<Setter Property="BorderThickness" Value="{DynamicResource ControlBorderThickness}" />
1818
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
19-
<Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
19+
<Setter Property="Padding" Value="{DynamicResource ButtonPadding}" />
2020
<Setter Property="HorizontalContentAlignment" Value="Center" />
2121
<Setter Property="VerticalContentAlignment" Value="Center" />
22-
<Setter Property="FontSize" Value="{DynamicResource ButtonDefaultFontSize}" />
23-
<Setter Property="FontWeight" Value="{DynamicResource ButtonDefaultFontWeight}" />
22+
<Setter Property="FontSize" Value="{DynamicResource FontSize}" />
23+
<Setter Property="FontWeight" Value="{DynamicResource ButtonFontWeight}" />
2424
<Style Selector="^:pressed">
25-
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
25+
<Setter Property="Background" Value="{DynamicResource ControlBackgroundActiveHighBrush}" />
2626
</Style>
2727
<Style Selector="^:disabled">
28-
<Setter Property="Foreground" Value="{DynamicResource TextTertiaryColor}" />
29-
<Setter Property="Background" Value="{DynamicResource ButtonDisabledBackground}" />
30-
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDisabledBorder}" />
28+
<Setter Property="Foreground" Value="{DynamicResource ForegroundLowBrush}" />
29+
<Setter Property="Background" Value="{DynamicResource ControlBackgroundDisabledHighBrush}" />
30+
<Setter Property="BorderBrush" Value="{DynamicResource ControlBorderDisabledBrush}" />
3131
</Style>
3232

3333
<Style Selector="^.Primary">
34-
<Setter Property="Background" Value="{DynamicResource ButtonPrimaryBackground}" />
35-
<Setter Property="Foreground" Value="{DynamicResource ButtonPrimaryForeground}" />
34+
<Setter Property="Background" Value="{DynamicResource ControlBackgroundAccentRaisedBrush}" />
35+
<Setter Property="Foreground" Value="{DynamicResource ControlForegroundAccentHighBrush}" />
3636
<Setter Property="BorderThickness" Value="0" />
3737
<Style Selector="^:pressed">
38-
<Setter Property="Background" Value="{DynamicResource ButtonPrimaryPressedBackground}" />
38+
<Setter Property="Background" Value="{DynamicResource ControlBackgroundAccentRecessedBrush}" />
3939
</Style>
4040
<Style Selector="^:disabled">
41-
<Setter Property="Foreground" Value="{DynamicResource TextTertiaryColor}" />
42-
<Setter Property="Background" Value="{DynamicResource ButtonDisabledBackground}" />
43-
<Setter Property="BorderThickness" Value="{DynamicResource ButtonDefaultBorderThickness}" />
41+
<Setter Property="Foreground" Value="{DynamicResource ForegroundLowBrush}" />
42+
<Setter Property="Background" Value="{DynamicResource ControlBackgroundDisabledHighBrush}" />
43+
<Setter Property="BorderThickness" Value="{DynamicResource ControlBorderThickness}" />
4444
</Style>
4545
</Style>
4646

4747
<Style Selector="^.PrimaryPrecise">
48-
<Setter Property="Background" Value="{DynamicResource ButtonPrimaryBackgroundPrecise}" />
49-
<Setter Property="Foreground" Value="{DynamicResource ButtonPrimaryForeground}" />
48+
<Setter Property="Background" Value="{DynamicResource TempButtonPrimaryBackgroundPrecise}" />
49+
<Setter Property="Foreground" Value="{DynamicResource ControlForegroundAccentHighBrush}" />
5050
<Setter Property="BorderThickness" Value="0" />
5151
<Style Selector="^:pressed">
52-
<Setter Property="Background" Value="{DynamicResource ButtonPrimaryPressedBackgroundPrecise}" />
52+
<Setter Property="Background" Value="{DynamicResource TempButtonPrimaryPressedBackgroundPrecise}" />
5353
</Style>
5454
<Style Selector="^:disabled">
55-
<Setter Property="Foreground" Value="{DynamicResource TextTertiaryColor}" />
56-
<Setter Property="Background" Value="{DynamicResource ButtonDisabledBackground}" />
57-
<Setter Property="BorderThickness" Value="{DynamicResource ButtonDefaultBorderThickness}" />
55+
<Setter Property="Foreground" Value="{DynamicResource ForegroundLowBrush}" />
56+
<Setter Property="Background" Value="{DynamicResource ControlBackgroundDisabledHighBrush}" />
57+
<Setter Property="BorderThickness" Value="{DynamicResource ControlBorderThickness}" />
5858
</Style>
5959
</Style>
6060
</ControlTheme>

0 commit comments

Comments
 (0)