Skip to content

Commit

Permalink
Merge pull request #240 from sirdoombox/main
Browse files Browse the repository at this point in the history 
Introduce new colours and fix up buttons.
  • Loading branch information
@kikipoulet
kikipoulet authored Jul 2, 2024
2 parents 73842f0 + 8e678e1 commit 7c67bf4
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 18 deletions.
14 changes: 14 additions & 0 deletions SukiUI.Demo/SukiUIDemoView.axaml
View file
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
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
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
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

0 comments on commit 7c67bf4

Please sign in to comment.