final textbox style and discrete controls background

kikipoulet · Aug 10, 2024 · 8aed7e2 · 8aed7e2
1 parent ddec032
commit 8aed7e2
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 48 deletions.
diff --git a/SukiUI/ColorTheme/Dark.axaml b/SukiUI/ColorTheme/Dark.axaml
@@ -36,7 +36,9 @@
     <system:Boolean x:Key="IsLight">False</system:Boolean>
 
     <system:Double x:Key="GlassOpacity">0.18</system:Double>
-    <system:Double x:Key="GlassOpacityDark">0.18</system:Double>
-    <system:Double x:Key="GlassOpacityLight">0.57</system:Double>
+
+    <system:Double x:Key="ControlGlassOpacity">0.3</system:Double>
+    <system:Double x:Key="DiscreteControlGlassOpacity">0.14</system:Double>
+    <Color x:Key="ControlSukiGlassCardBackground">#49aaaaaa</Color>
 
 </ResourceDictionary>
diff --git a/SukiUI/ColorTheme/Light.axaml b/SukiUI/ColorTheme/Light.axaml
@@ -36,6 +36,9 @@
     <system:Boolean x:Key="IsLight">True</system:Boolean>
 
     <system:Double x:Key="GlassOpacity">0.42</system:Double>
-    <system:Double x:Key="GlassOpacityDark">0.3</system:Double>
-    <system:Double x:Key="GlassOpacityLight">0.42</system:Double>
+
+    <system:Double x:Key="ControlGlassOpacity">0.05</system:Double>
+    <system:Double x:Key="DiscreteControlGlassOpacity">0.3</system:Double>
+    <Color x:Key="ControlSukiGlassCardBackground">#fd111111</Color>
+
 </ResourceDictionary>
diff --git a/SukiUI/Controls/GlassMorphism/GlassCard.axaml b/SukiUI/Controls/GlassMorphism/GlassCard.axaml
@@ -53,6 +53,22 @@
                 </Panel>
             </ControlTemplate>
         </Setter>
+
+
+        <Style Selector="^.Control">
+            <Setter Property="IsAnimated" Value="False"></Setter>
+            <Setter Property="Padding" Value="0"></Setter>
+        </Style>
+        <Style Selector="^.Control /template/ Border#PART_BorderCard">
+            <Setter Property="Background" Value="{DynamicResource ControlSukiGlassCardBackground}" />
+            <Setter Property="Opacity" Value="{DynamicResource ControlGlassOpacity}" />
+        </Style>
+
+        <Style Selector="^.Discrete /template/ Border#PART_BorderCard">
+
+            <Setter Property="Opacity" Value="{DynamicResource DiscreteControlGlassOpacity}" />
+        </Style>
+
         <Style Selector="^.Primary /template/ Border#PART_ClipBorder">
             <Setter Property="BorderBrush" Value="{DynamicResource SukiAccentColor0}" />
         </Style>

diff --git a/SukiUI/Theme/ProgressBarStyles.xaml b/SukiUI/Theme/ProgressBarStyles.xaml
@@ -1,7 +1,9 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:suki="https://github.com/kikipoulet/SukiUI"
+        xmlns:system="clr-namespace:System;assembly=netstandard">
 
     <Design.PreviewWith>
-        <Panel>
+        <Panel Background="Red">
             <ProgressBar Width="100"
                          Height="6"
                          Value="50" />
@@ -16,7 +18,9 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <DockPanel Name="PART_Dock">
-
+<DockPanel.Resources>
+
+</DockPanel.Resources>
                     <TextBlock Name="PART_Text"
                                Width="0"
                                Height="0"
@@ -29,9 +33,9 @@
                                Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, StringFormat={}{0:0}%}"
                                TextAlignment="Right" />
 
-                    <Border Name="PART_RootBorder"
+                    <suki:GlassCard Name="PART_RootBorder"
                             MinWidth="{TemplateBinding MinWidth}"
-                            Background="{TemplateBinding Background}"
+                          Padding="0" Classes="Control"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
                             ClipToBounds="True"
@@ -62,7 +66,7 @@
                                     CornerRadius="{TemplateBinding CornerRadius}"
                                     IsVisible="{Binding IsIndeterminate, RelativeSource={RelativeSource TemplatedParent}}" />
                         </Panel>
-                    </Border>
+                    </suki:GlassCard>
 
 
                 </DockPanel>
@@ -156,13 +160,13 @@
         </Style.Animations>
     </Style>
 
-    <Style Selector="ProgressBar:horizontal /template/ Border#PART_RootBorder">
+    <Style Selector="ProgressBar:horizontal /template/ suki|GlassCard#PART_RootBorder">
         <Setter Property="MinHeight" Value="8" />
         <Setter Property="Height" Value="8" />
         <Setter Property="MaxHeight" Value="8" />
     </Style>
 
-    <Style Selector="ProgressBar:vertical /template/ Border#PART_RootBorder">
+    <Style Selector="ProgressBar:vertical /template/ suki|GlassCard#PART_RootBorder">
         <Setter Property="MinWidth" Value="8" />
         <Setter Property="Width" Value="8" />
         <Setter Property="MaxWidth" Value="8" />

diff --git a/SukiUI/Theme/SliderStyles.xaml b/SukiUI/Theme/SliderStyles.xaml
@@ -1,4 +1,6 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:suki="https://github.com/kikipoulet/SukiUI"
+        xmlns:system="clr-namespace:System;assembly=netstandard">
     <Design.PreviewWith>
         <Border Padding="20" Background="White">
             <Slider Width="100" Value="50" />
@@ -55,17 +57,19 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Grid Name="grid">
+                    <Grid.Resources>
+
+                    </Grid.Resources>
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />
                         <RowDefinition Height="Auto" MinHeight="20" />
                         <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
-                    <Border Name="TrackBackground"
-                            Grid.Row="1"
+                    <suki:GlassCard Name="TrackBackground"
+                            Grid.Row="1" Classes="Control"
                             Height="22"
                             Margin="8,0"
                             VerticalAlignment="Center"
-                            Background="{DynamicResource SukiLightBorderBrush}"
                             BorderThickness="0"
                             CornerRadius="20" />
 
@@ -156,11 +160,7 @@
         <Setter Property="Maximum" Value="{TemplateBinding Maximum}" />
         <Setter Property="Value" Value="{TemplateBinding Value, Mode=TwoWay}" />
     </Style>
-    <Style Selector="Slider /template/ Border#TrackBackground">
-
-        <Setter Property="BorderThickness" Value="2" />
-        <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderLowBrush}" />
-    </Style>
+
     <Style Selector="Slider /template/ RepeatButton.repeattrack">
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Focusable" Value="False" />

diff --git a/SukiUI/Theme/TextBoxStyles.xaml b/SukiUI/Theme/TextBoxStyles.xaml
@@ -1,7 +1,9 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:content="clr-namespace:SukiUI.Content"
-        xmlns:theme="clr-namespace:SukiUI.Theme">
+        xmlns:theme="clr-namespace:SukiUI.Theme"
+        xmlns:suki="https://github.com/kikipoulet/SukiUI"
+        xmlns:system="clr-namespace:System;assembly=netstandard">
 
     <Design.PreviewWith>
         <Border Width="300"
@@ -334,10 +336,10 @@
 
     <Style Selector="TextBox">
         <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="BorderThickness" Value="0,0,0,1" />
+        <Setter Property="BorderThickness" Value="1" />
         <Setter Property="FontSize" Value="14" />
         <Setter Property="BorderBrush" Value="{DynamicResource SukiControlBorderBrush}" />
-        <Setter Property="CornerRadius" Value="0" />
+        <Setter Property="CornerRadius" Value="{DynamicResource SmallCornerRadius}" />
         <Setter Property="Background" Value="{DynamicResource SukiBackground}" />
 
 
@@ -353,23 +355,25 @@
 
                 <Border Padding="5">
                     <Border.Resources>
+
+
                         <theme:StringToDoubleConverter x:Key="StringToDoubleC" />
                     </Border.Resources>
-                    <Border Name="border"
-                            Background="{TemplateBinding Background}"
+                    <suki:GlassCard Name="border"
+                            Padding="0" Classes="Discrete"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
-                            BoxShadow="{DynamicResource SukiLowShadow}"
+
                             CornerRadius="{TemplateBinding CornerRadius}">
-                        <Border.Transitions>
+                        <suki:GlassCard.Transitions>
                             <Transitions>
                                 <BrushTransition Property="BorderBrush" Duration="0:0:0.2" />
                             </Transitions>
-                        </Border.Transitions>
+                        </suki:GlassCard.Transitions>
                         <Border Name="borderbottom"
                                 Margin="1,-1,1,-1"
                                 BorderBrush="{TemplateBinding BorderBrush}"
-                                BorderThickness="{TemplateBinding BorderThickness}"
+                                BorderThickness="0"
                                 ClipToBounds="True"
                                 CornerRadius="1">
                             <Border.Transitions>
@@ -456,21 +460,21 @@
 
                             </DockPanel>
                         </Border>
-                    </Border>
+                    </suki:GlassCard>
                 </Border>
 
             </ControlTemplate>
         </Setter>
     </Style>
-    <Style Selector="TextBox:pointerover /template/ Border#border">
+    <Style Selector="TextBox:pointerover /template/ suki|GlassCard#border">
         <Setter Property="BorderBrush" Value="{DynamicResource SukiBorderBrush}" />
 
     </Style>
 
-    <Style Selector="TextBox.FlatTextBox /template/ Border#border">
+    <Style Selector="TextBox.FlatTextBox /template/ suki|GlassCard#border">
         <Setter Property="BorderThickness" Value="0" />
         <Setter Property="ClipToBounds" Value="True" />
-        <Setter Property="BoxShadow" Value="0 0 0 0 White" />
+
     </Style>
 
 
@@ -490,17 +494,17 @@
         <Setter Property="BorderBrush" Value="{DynamicResource SukiPrimaryColor}" />
 
     </Style>
-    <Style Selector="TextBox:focus /template/ Border#border">
+    <Style Selector="TextBox:focus /template/ suki|GlassCard#border">
         <Setter Property="BorderBrush" Value="{DynamicResource SukiPrimaryColor}" />
-
+<Setter Property="BorderThickness" Value="1.2" />
     </Style>
-    <Style Selector="TextBox:error /template/ Border#border">
+    <Style Selector="TextBox:error /template/ suki|GlassCard#border">
         <Setter Property="BorderBrush" Value="{DynamicResource ErrorBrush}" />
     </Style>
     <Style Selector="TextBox /template/ DockPanel">
         <Setter Property="Cursor" Value="IBeam" />
     </Style>
-    <Style Selector="TextBox:disabled /template/ Border#border">
+    <Style Selector="TextBox:disabled /template/ suki|GlassCard#border">
         <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
     </Style>
 

diff --git a/SukiUI/Theme/ToggleSwitchStyles.xaml b/SukiUI/Theme/ToggleSwitchStyles.xaml
@@ -1,4 +1,6 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:suki="https://github.com/kikipoulet/SukiUI"
+        xmlns:system="clr-namespace:System;assembly=netstandard">
     <Styles.Resources>
         <Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,6</Thickness>
         <GridLength x:Key="ToggleSwitchPreContentMargin">6</GridLength>
@@ -45,7 +47,10 @@
                                       ContentTemplate="{TemplateBinding OnContentTemplate}" />
 
                 <Grid Background="Transparent" RowDefinitions="Auto,*">
-
+<Grid.Resources>
+
+
+</Grid.Resources>
                     <ContentPresenter x:Name="PART_ContentPresenter"
                                       Grid.Row="0"
                                       VerticalAlignment="Top"
@@ -75,13 +80,13 @@
                               Grid.ColumnSpan="3"
                               Margin="0,5"
                               TemplatedControl.IsTemplateFocusTarget="True" />
-
+                        
 
                         <Border 
                                 Grid.Row="1"
                                 Width="40"
                                 Height="22"
-                                Background="{DynamicResource SukiControlBorderBrush}"
+                                Background="{DynamicResource SukiPrimaryColor0}"
                                 BorderThickness="0"
                                 CornerRadius="{DynamicResource MediumCornerRadius}">
                             <Border.Transitions>
@@ -90,15 +95,42 @@
                                 </Transitions>
                             </Border.Transitions>
                         </Border>
+
+
+                        <suki:GlassCard 
+                            Grid.Row="1"
+                            Width="40" Classes="Control"
+                            Height="22" IsAnimated="False"
+
+                            BorderThickness="0"
+                            CornerRadius="{DynamicResource MediumCornerRadius}">
+
+                        </suki:GlassCard>
 
                         <Border x:Name="SwitchBackground"
                                 Grid.Row="1"
-                                Width="40"
+                                Width="40" ClipToBounds="True"
                                 Height="22"
-                                Background="{DynamicResource SukiControlBorderBrush}"
+                                Background="Transparent"
                                 BorderThickness="0"
                                 CornerRadius="{DynamicResource MediumCornerRadius}">
-
+                            <Panel HorizontalAlignment="Right" Name="PanelSelected" Width="160" Margin="40,0,-160,0" >
+                             <Panel.Background>
+                                 <LinearGradientBrush StartPoint="0%,50%" EndPoint="100%,50%">
+                                     <GradientStop Color="{DynamicResource SukiPrimaryColor0}" Offset="0.3"></GradientStop>
+                                     <GradientStop Color="{DynamicResource SukiPrimaryColor}" Offset="1"></GradientStop>
+                                 </LinearGradientBrush>
+                             </Panel.Background>
+                                <Panel.Transitions>
+                                    <Transitions>
+                                        <ThicknessTransition Delay="0:0:0" Property="Margin" Duration="0:0:0.7">
+                                            <ThicknessTransition.Easing>
+                                                    <SineEaseOut />
+                                            </ThicknessTransition.Easing>
+                                        </ThicknessTransition>
+                                    </Transitions>
+                                </Panel.Transitions>
+                            </Panel>
                             <Border.Transitions>
                                 <Transitions>
                                     <DoubleTransition Property="Opacity" Duration="0:0:0.15" />
@@ -239,10 +271,12 @@
     </Style>
 
 
-    <Style Selector="ToggleSwitch:checked /template/ Border#SwitchBackground">
+   <!-- <Style Selector="ToggleSwitch:checked /template/ Border#SwitchBackground">
         <Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
-    </Style>
-
+    </Style> -->
 
+   <Style Selector="ToggleSwitch:checked /template/ Panel#PanelSelected">
+       <Setter Property="Margin" Value="40,0,0,0" />
+   </Style>
 
 </Styles>