shadcn inspire high contrast theme

SukiUI.Demo/App.axaml.cs

@@ -1,8 +1,12 @@
+using System;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Controls.Templates;
 using Avalonia.Markup.Xaml;
+using Avalonia.Markup.Xaml.Styling;
+using Avalonia.Media;
+using Avalonia.Styling;
 using Microsoft.Extensions.DependencyInjection;
 using SukiUI.Demo.Common;
 using SukiUI.Demo.Features.ControlsLibrary;
@@ -19,6 +23,8 @@
 using SukiUI.Demo.Features.Theming;
 using SukiUI.Demo.Services;
 using SukiUI.Dialogs;
+using SukiUI.Models;
+using SukiUI.Theme.Shadcn;
 using SukiUI.Toasts;
 
 namespace SukiUI.Demo;
@@ -28,6 +34,7 @@ public class App : Application
     public override void Initialize()
     {
         AvaloniaXamlLoader.Load(this);
+
     }
 
     public override void OnFrameworkInitializationCompleted()
@@ -47,6 +54,8 @@ public override void OnFrameworkInitializationCompleted()
         }
 
         base.OnFrameworkInitializationCompleted();
+
+    //    Shadcn.Configure(Application.Current, ThemeVariant.Dark);
     }
 
     private static SukiViews ConfigureViews(ServiceCollection services)

SukiUI.Demo/Features/ControlsLibrary/PropertyGridView.axaml

@@ -18,11 +18,15 @@
         <suki:GlassCard Width="500">
             <ScrollViewer>
                 <DockPanel>
-                    <ToggleButton HorizontalAlignment="Right"
-                                  Content="Use external dialog window"
-                                  DockPanel.Dock="Top"
-                                  IsChecked="True"
-                                  IsCheckedChanged="ToggleButton_OnIsCheckedChanged" />
+                    <suki:GlassCard Padding="12" Margin="0,0,0,25"  DockPanel.Dock="Top" HorizontalAlignment="Right">
+                        <StackPanel Orientation="Horizontal" Spacing="12">
+                            <TextBlock Margin="8,0,0,0" VerticalAlignment="Center" FontWeight="DemiBold" Text="Use external dialog window :"></TextBlock>
+                            <ToggleSwitch 
+                                          IsChecked="True"
+                                          IsCheckedChanged="ToggleButton_OnIsCheckedChanged" />
+                        </StackPanel>
+                    </suki:GlassCard>
+
                     <suki:PropertyGrid Item="{Binding Form}">
                         <suki:PropertyGrid.DataTemplates>
                             <!--

SukiUI.Demo/SukiUIDemoViewModel.cs

@@ -34,7 +34,7 @@ public partial class SukiUIDemoViewModel : ObservableObject
     [ObservableProperty] private DemoPageBase? _activePage;
     [ObservableProperty] private bool _windowLocked;
     [ObservableProperty] private bool _titleBarVisible = true;
-    [ObservableProperty] private SukiBackgroundStyle _backgroundStyle = SukiBackgroundStyle.Gradient;
+    [ObservableProperty] private SukiBackgroundStyle _backgroundStyle = SukiBackgroundStyle.GradientSoft;
     [ObservableProperty] private bool _animationsEnabled;
     [ObservableProperty] private string? _customShaderFile;
     [ObservableProperty] private bool _transitionsEnabled;

SukiUI/Content/Shaders/Background/backgroundshadcn.sksl

@@ -0,0 +1,102 @@
+float smoothstep(float a, float b, float x) {
+    float t = clamp((x - a) / (b - a), 0.0, 1.0);
+    return t * t * (3.0 - 2.0 * t);
+}
+
+vec3 blendOverlay(vec3 base, vec3 blend) {
+    return vec3(
+        base.r < 0.5 ? (2.0 * base.r * blend.r) : (1.0 - 2.0 * (1.0 - base.r) * (1.0 - blend.r)),
+        base.g < 0.5 ? (2.0 * base.g * blend.g) : (1.0 - 2.0 * (1.0 - base.g) * (1.0 - blend.g)),
+        base.b < 0.5 ? (2.0 * base.b * blend.b) : (1.0 - 2.0 * (1.0 - base.b) * (1.0 - blend.b))
+    );
+}
+
+vec3 blendOverlayDark(vec3 base, vec3 blend) {
+    vec3 result;
+    result.r = (base.r < 0.5) ? (2 * base.r * blend.r) : (4 - 1.5 * (3 - base.r) * (4 - blend.r));
+    result.g = (base.g < 0.5) ? (2* base.g * blend.g) : (4 - 1.5 * (3 - base.g) * (4 - blend.g));
+    result.b = (base.b < 0.5) ? (2 * base.b * blend.b) : (4 - 1.5 * (3 - base.b) * (4 - blend.b));
+    return mix(base, clamp(result, 0.0, 1.0), 0.5); // Mélange avec la couleur de base pour réduire l'assombrissement
+}
+
+mat2 Rot(float a) {
+    float s = sin(a);
+    float c = cos(a);
+    return mat2(c, -s, s, c);
+}
+
+vec2 hash(vec2 p) {
+    p = vec2(dot(p, vec2(2127.1, 81.17)), dot(p, vec2(1269.5, 283.37)));
+    return fract(sin(p) * 43758.5453);
+}
+
+float noise(in vec2 p) {
+    vec2 i = floor(p);
+    vec2 f = fract(p);
+
+    vec2 u = f * f * (3.0 - 2.0 * f);
+
+    float n = mix(mix(dot(-1.0 + 2.0 * hash(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
+                      dot(-1.0 + 2.0 * hash(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
+                  mix(dot(-1.0 + 2.0 * hash(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
+                      dot(-1.0 + 2.0 * hash(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y);
+    return 0.42 + 0.42 * n;
+}
+
+vec4 main(vec2 fragCoord) {
+
+vec3 grayBase = vec3(0.03,0.03,0.03);
+vec3 whiteBase = vec3(0.98,0.98,0.98);
+
+    vec2 uv = fragCoord / iResolution.xy;
+    float ratio = iResolution.x / iResolution.y;
+
+    vec2 tuv = uv;
+    tuv -= .5;
+
+    float degree = noise(vec2(iTime * .15, tuv.x * tuv.y));
+
+    tuv.y *= 0.7 / ratio;
+    tuv *= Rot(radians((degree - .5) * 720. + 180.));
+    tuv.y *= ratio;
+
+    float frequency = 1.;
+    float amplitude = 155.;
+    float speed = iTime * 0.1;
+    tuv.x += sin(tuv.y * frequency + speed) / amplitude;
+    tuv.y += sin(tuv.x * frequency * 1.5 + speed) / (amplitude * .5);
+
+    float opacityLayer1 = 0.95;
+    float opacityLayer2 = 0.85 - (iDark / 2);
+
+
+    float iPrimaryOpacity = 1.5; // Exemple de nouvelle opacité pour iPrimary
+    if (iDark == 1) {
+        iPrimaryOpacity = 0.6;
+    }
+    vec3 iPrimaryWithOpacity = iPrimary * iPrimaryOpacity;
+
+
+    float iAccentOpacity = -1.05; 
+    if (iDark == 1) {
+            iAccentOpacity = 4.5;
+        }
+    vec3 iAccentWithOpacity = iPrimary * iAccentOpacity;
+
+    vec3 layer1Color = mix(vec3(0.0), iPrimaryWithOpacity, opacityLayer1);
+    vec3 layer1 = mix(layer1Color, iAccentWithOpacity * 0.85, smoothstep(-.3, .4, (tuv * Rot(radians(-5.))).x));
+
+    vec3 layer2Color = mix(vec3(0.0), iAccentWithOpacity, opacityLayer2);
+    vec3 layer2 = mix(layer2Color, iPrimaryWithOpacity * 0.65, smoothstep(-.2, .3, (tuv * Rot(radians(-5.))).x));
+
+    vec3 finalComp = mix(layer1, layer2, smoothstep(.8, -.5, tuv.y));
+
+    vec3 col;
+    if (iDark == 0) {
+        col = blendOverlay( whiteBase * 1.02, finalComp);
+    } else {
+        col = blendOverlayDark(grayBase, finalComp);
+    }
+
+    return vec4(col, iAlpha);
+}

SukiUI/Content/Shaders/Background/gradientdarker.sksl

@@ -0,0 +1,101 @@
+float smoothstep(float a, float b, float x) {
+    float t = clamp((x - a) / (b - a), 0.0, 1.0);
+    return t * t * (3.0 - 2.0 * t);
+}
+
+vec3 blendOverlay(vec3 base, vec3 blend) {
+    return vec3(
+        base.r < 0.5 ? (2.0 * base.r * blend.r) : (1.0 - 2.0 * (1.0 - base.r) * (1.0 - blend.r)),
+        base.g < 0.5 ? (2.0 * base.g * blend.g) : (1.0 - 2.0 * (1.0 - base.g) * (1.0 - blend.g)),
+        base.b < 0.5 ? (2.0 * base.b * blend.b) : (1.0 - 2.0 * (1.0 - base.b) * (1.0 - blend.b))
+    );
+}
+
+vec3 blendOverlayDark(vec3 base, vec3 blend) {
+    vec3 result;
+    result.r = (base.r < 0.5) ? (2 * base.r * blend.r) : (4 - 1.5 * (3 - base.r) * (4 - blend.r));
+    result.g = (base.g < 0.5) ? (2* base.g * blend.g) : (4 - 1.5 * (3 - base.g) * (4 - blend.g));
+    result.b = (base.b < 0.5) ? (2 * base.b * blend.b) : (4 - 1.5 * (3 - base.b) * (4 - blend.b));
+    return mix(base, clamp(result, 0.0, 1.0), 0.5); // Mélange avec la couleur de base pour réduire l'assombrissement
+}
+
+mat2 Rot(float a) {
+    float s = sin(a);
+    float c = cos(a);
+    return mat2(c, -s, s, c);
+}
+
+vec2 hash(vec2 p) {
+    p = vec2(dot(p, vec2(2127.1, 81.17)), dot(p, vec2(1269.5, 283.37)));
+    return fract(sin(p) * 43758.5453);
+}
+
+float noise(in vec2 p) {
+    vec2 i = floor(p);
+    vec2 f = fract(p);
+
+    vec2 u = f * f * (3.0 - 2.0 * f);
+
+    float n = mix(mix(dot(-1.0 + 2.0 * hash(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
+                      dot(-1.0 + 2.0 * hash(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
+                  mix(dot(-1.0 + 2.0 * hash(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
+                      dot(-1.0 + 2.0 * hash(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y);
+    return 0.42 + 0.42 * n;
+}
+
+vec4 main(vec2 fragCoord) {
+
+vec3 grayBase = vec3(0.08,0.08,0.08);
+
+    vec2 uv = fragCoord / iResolution.xy;
+    float ratio = iResolution.x / iResolution.y;
+
+    vec2 tuv = uv;
+    tuv -= .5;
+
+    float degree = noise(vec2(iTime * .15, tuv.x * tuv.y));
+
+    tuv.y *= 0.7 / ratio;
+    tuv *= Rot(radians((degree - .5) * 720. + 180.));
+    tuv.y *= ratio;
+
+    float frequency = 1.;
+    float amplitude = 155.;
+    float speed = iTime * 0.1;
+    tuv.x += sin(tuv.y * frequency + speed) / amplitude;
+    tuv.y += sin(tuv.x * frequency * 1.5 + speed) / (amplitude * .5);
+
+    float opacityLayer1 = 0.95;
+    float opacityLayer2 = 0.85 - (iDark / 2);
+
+
+    float iPrimaryOpacity = 1.5; // Exemple de nouvelle opacité pour iPrimary
+    if (iDark == 1) {
+        iPrimaryOpacity = 0.6;
+    }
+    vec3 iPrimaryWithOpacity = iPrimary * iPrimaryOpacity;
+
+
+    float iAccentOpacity = -1.05; 
+    if (iDark == 1) {
+            iAccentOpacity = 4.5;
+        }
+    vec3 iAccentWithOpacity = iPrimary * iAccentOpacity;
+
+    vec3 layer1Color = mix(vec3(0.0), iPrimaryWithOpacity, opacityLayer1);
+    vec3 layer1 = mix(layer1Color, iAccentWithOpacity * 0.85, smoothstep(-.3, .4, (tuv * Rot(radians(-5.))).x));
+
+    vec3 layer2Color = mix(vec3(0.0), iAccentWithOpacity, opacityLayer2);
+    vec3 layer2 = mix(layer2Color, iPrimaryWithOpacity * 0.65, smoothstep(-.2, .3, (tuv * Rot(radians(-5.))).x));
+
+    vec3 finalComp = mix(layer1, layer2, smoothstep(.8, -.5, tuv.y));
+
+    vec3 col;
+    if (iDark == 0) {
+        col = blendOverlay( iBase * 1.02, finalComp);
+    } else {
+        col = blendOverlayDark(grayBase, finalComp);
+    }
+
+    return vec4(col, iAlpha);
+}

SukiUI/Controls/SukiWindow.axaml.cs

@@ -126,7 +126,7 @@ public bool BackgroundAnimationEnabled
 
     public static readonly StyledProperty<SukiBackgroundStyle> BackgroundStyleProperty =
         AvaloniaProperty.Register<SukiWindow, SukiBackgroundStyle>(nameof(BackgroundStyle),
-            defaultValue: SukiBackgroundStyle.Gradient);
+            defaultValue: SukiBackgroundStyle.GradientSoft);
 
     /// <inheritdoc cref="SukiBackground.Style"/>
     public SukiBackgroundStyle BackgroundStyle

SukiUI/Enums/SukiBackgroundStyle.cs

@@ -4,6 +4,7 @@ public enum SukiBackgroundStyle
     {
         Gradient,
         GradientSoft,
+        GradientDarker,
         Flat,
         Bubble,
 

SukiUI/SukiUI.csproj

@@ -105,6 +105,10 @@
 	  <EmbeddedResource Include="Content\Shaders\Loading\simple.sksl" />
 	  <None Remove="Content\Shaders\Background\gradientsoft.sksl" />
 	  <EmbeddedResource Include="Content\Shaders\Background\gradientsoft.sksl" />
+	  <None Remove="Content\Shaders\Background\gradientdarker.sksl" />
+	  <EmbeddedResource Include="Content\Shaders\Background\gradientdarker.sksl" />
+	  <None Remove="Content\Shaders\Background\backgroundshadcn.sksl" />
+	  <EmbeddedResource Include="Content\Shaders\Background\backgroundshadcn.sksl" />
 	</ItemGroup>
 
 </Project>

SukiUI/Theme/Shadcn/BlackWhiteTheme.axaml

@@ -0,0 +1,27 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="https://github.com/kikipoulet/SukiUI"
+                    xmlns:system="clr-namespace:System;assembly=netstandard">
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key='Light'>
+            <Color x:Key='SukiPrimaryColor'>Black</Color>
+            <system:Double x:Key="GlassOpacity">0.5</system:Double>
+            <Color x:Key="GlassBorderBrush">#cccccc</Color>
+            <Color x:Key="SukiCardBackground">#ffffff</Color>
+        </ResourceDictionary>
+        <ResourceDictionary x:Key='Dark'>
+
+            <Color x:Key='SukiPrimaryColor'>White</Color>
+            <system:Double x:Key="GlassOpacity">0.09</system:Double>
+            <BoxShadows x:Key="SukiSwitchShadow">0 0 0 0 Transparent</BoxShadows>
+            <Color x:Key="SukiCardBackground">#2a2a2a</Color>
+            <Color x:Key="GlassBorderBrush">White</Color>
+            <LinearGradientBrush x:Key="PopupGradientBrush" StartPoint="0%,0%" EndPoint="100%,100%">
+                <GradientStop Color="{DynamicResource Transparent}" Offset="0"></GradientStop>
+                <GradientStop Color="{DynamicResource Transparent}" Offset="0.9"></GradientStop>
+
+            </LinearGradientBrush>
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+
+</ResourceDictionary>