Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce new colours and fix up buttons. #240

Merged
merged 1 commit into from
Jul 2, 2024
+78 −18
Merged

Introduce new colours and fix up buttons. #240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions SukiUI.Demo/SukiUIDemoView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,18 @@
</MenuItem>
</suki:SukiWindow.MenuItems>
<suki:SukiSideMenu ItemsSource="{Binding DemoPages}" SelectedItem="{Binding ActivePage}">
<suki:SukiSideMenu.Styles>
<Style Selector="Image.AppIcon">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Opacity" Duration="0.1" />
</Transitions>
</Setter>
<Style Selector="^:pointerover">
<Setter Property="Opacity" Value="0.5" />
</Style>
</Style>
</suki:SukiSideMenu.Styles>
<suki:SukiSideMenu.ItemTemplate>
<DataTemplate>
<suki:SukiSideMenuItem Header="{Binding DisplayName}">
Expand All @@ -106,9 +118,11 @@
<Image Width="80"
Height="80"
Margin="30,10,30,30"
Classes="AppIcon"
IsVisible="{Binding $parent[suki:SukiWindow].((demo:SukiUIDemoViewModel)DataContext).TitleBarVisible}"
PointerPressed="InputElement_OnPointerPressed"
Source="Assets/OIG.N5o-removebg-preview.png"
ToolTip.ShowDelay="0"
ToolTip.Tip="Click To Toggle Top Menu." />
</suki:SukiSideMenu.HeaderContent>
<suki:SukiSideMenu.FooterContent>
Expand Down
13 changes: 13 additions & 0 deletions SukiUI/Models/SukiColorTheme.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,34 @@ public record SukiColorTheme
public Color Primary { get; }

public IBrush PrimaryBrush => new SolidColorBrush(Primary);

public Color PrimaryDark { get; }

public IBrush PrimaryDarkBrush => new SolidColorBrush(PrimaryDark);

public Color Accent { get; }

public IBrush AccentBrush => new SolidColorBrush(Accent);

public Color AccentDark { get; }

public IBrush AccentDarkBrush => new SolidColorBrush(AccentDark);

// Used in shaders to save calculating them per-frame.
internal Color BackgroundPrimary { get; }
internal Color BackgroundAccent { get; }
internal Color Background { get; }

// dark scale...
private const double dS = 0.5;

public SukiColorTheme(string displayName, Color primary, Color accent)
{
DisplayName = displayName;
Primary = primary;
Accent = accent;
PrimaryDark = new Color(primary.A, (byte)(primary.R * dS), (byte)(primary.G * dS), (byte)(primary.B * dS));
AccentDark = new Color(accent.A, (byte)(accent.R * dS), (byte)(accent.G * dS), (byte)(accent.B * dS));
Background = GetBackgroundColor(Primary);
BackgroundPrimary = new Color(primary.A, (byte)(primary.R / 1.3), (byte)(primary.G / 1.3), (byte)(primary.B / 1.3));
BackgroundAccent = new Color(accent.A, (byte)(accent.R / 1.3), (byte)(accent.G / 1.3), (byte)(accent.B / 1.3));
Expand Down
67 changes: 49 additions & 18 deletions SukiUI/Theme/Button.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="BorderBrush" Duration="0:0:0.3" />
<BrushTransition Property="Background" Duration="0:0:0.3" />
</Transitions>
</Setter>
</Style>
Expand Down Expand Up @@ -114,7 +115,15 @@
</Style>
</Style>
<Style Selector="^:disabled">
<Setter Property="Opacity" Value="0.5" />
<Style Selector="^ /template/ TextBlock">
<Setter Property="Foreground" Value="{DynamicResource SukiDisabledText}" />
</Style>
<Style Selector="^ /template/ ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource SukiDisabledText}" />
</Style>
<Style Selector="^ /template/ Border">
<Setter Property="BorderBrush" Value="{DynamicResource SukiStrongBackground}" />
</Style>
</Style>

<!-- Classes -->
Expand Down Expand Up @@ -179,14 +188,7 @@
<Setter Property="Background" Value="Transparent" />
<!-- Nested Selectors -->
<Style Selector="^ /template/ TextBlock">
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush StartPoint="48%,0%" EndPoint="50%,100%">
<GradientStop Offset="0.8" Color="{DynamicResource SukiPrimaryColor}" />
<GradientStop Offset="1" Color="{DynamicResource SukiPrimaryColor}" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
</Style>
<Style Selector="^ /template/ controls|Loading">
<Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
Expand All @@ -211,24 +213,23 @@
<Style Selector="^:pressed /template/ Border">
<Setter Property="Background" Value="Transparent" />
</Style>
<Style Selector="^:disabled /template/ ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource SukiPrimaryDarkColor}" />
</Style>
<!-- Color Variants -->
<Style Selector="^.Accent">
<Style Selector="^ /template/ TextBlock">
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush StartPoint="48%,0%" EndPoint="50%,100%">
<GradientStop Offset="0.8" Color="{DynamicResource SukiAccentColor}" />
<GradientStop Offset="1" Color="{DynamicResource SukiAccentColor}" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
</Style>
<Style Selector="^ /template/ controls|Loading">
<Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
</Style>
<Style Selector="^ /template/ ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
</Style>
<Style Selector="^:disabled /template/ ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource SukiAccentDarkColor}" />
</Style>
</Style>
</Style>

Expand Down Expand Up @@ -257,7 +258,6 @@
<Setter Property="Padding" Value="20,8,20,8" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
<Setter Property="BorderBrush" Value="#2948c5" />
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" />
Expand All @@ -284,6 +284,12 @@
<Style Selector="^:pressed /template/ Border">
<Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
</Style>
<Style Selector="^:disabled /template/ Border">
<Setter Property="Background" Value="{DynamicResource SukiPrimaryDarkColor}" />
</Style>
<Style Selector="^:disabled /template/ ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource SukiLowText}" />
</Style>
<!-- Color Variants -->
<Style Selector="^.Accent">
<Setter Property="Background" Value="{DynamicResource SukiAccentColor75}" />
Expand All @@ -293,6 +299,9 @@
<Style Selector="^:pressed /template/ Border">
<Setter Property="Background" Value="{DynamicResource SukiAccentColor}" />
</Style>
<Style Selector="^:disabled /template/ Border">
<Setter Property="Background" Value="{DynamicResource SukiAccentDarkColor}" />
</Style>
</Style>
</Style>

Expand Down Expand Up @@ -342,6 +351,14 @@
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
</Style>
<Style Selector="^:disabled">
<Style Selector="^ /template/ Border">
<Setter Property="BorderBrush" Value="{DynamicResource SukiPrimaryDarkColor}" />
</Style>
<Style Selector="^ /template/ ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource SukiPrimaryDarkColor}" />
</Style>
</Style>
<!-- Color Variants -->
<Style Selector="^.Accent">
<Setter Property="BorderBrush" Value="{DynamicResource SukiAccentColor}" />
Expand All @@ -356,10 +373,24 @@
</Style>
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource SukiAccentColor}" />
<Style Selector="^ /template/ ContentPresenter">
<Setter Property="Foreground" Value="White" />
</Style>
<Style Selector="^ /template/ TextBlock">
<Setter Property="Foreground" Value="White" />
</Style>
</Style>
<Style Selector="^:pressed /template/ Border">
<Setter Property="Background" Value="{DynamicResource SukiAccentColor}" />
</Style>
<Style Selector="^:disabled">
<Style Selector="^ /template/ Border">
<Setter Property="BorderBrush" Value="{DynamicResource SukiAccentDarkColor}" />
</Style>
<Style Selector="^ /template/ ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource SukiAccentDarkColor}" />
</Style>
</Style>
</Style>
</Style>

Expand Down
2 changes: 2 additions & 0 deletions SukiUI/Theme/Index.axaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,9 @@ private void SetColorThemeResourcesOnColorThemeChanged()
private void SetColorTheme(SukiColorTheme colorTheme)
{
SetColorWithOpacities("SukiPrimaryColor", colorTheme.Primary);
SetResource("SukiPrimaryDarkColor", colorTheme.PrimaryDark);
SetColorWithOpacities("SukiAccentColor", colorTheme.Accent);
SetResource("SukiAccentDarkColor", colorTheme.AccentDark);
ActiveColorTheme = colorTheme;
OnColorThemeChanged?.Invoke(ActiveColorTheme);
}
Expand Down