From c8074300a08e5d52c22c224a603ce59e1f569605 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Sat, 28 Jan 2023 03:12:01 +0800
Subject: [PATCH] feat: Add more styles. pending on extacting more resources.

---
 .../Pages/TimePickerDemo.axaml                |   1 +
 src/Semi.Avalonia/Controls/Controls.axaml     |   1 +
 .../Controls/DateTimePickerShared.axaml       | 102 +++++++++++
 src/Semi.Avalonia/Controls/TimePicker.axaml   | 159 +++++++++---------
 .../Themes/Light/DateTimePickerShared.axaml   |  20 +++
 src/Semi.Avalonia/Themes/Light/Light.axaml    |   1 +
 .../Themes/Light/TimePicker.axaml             |   5 +
 7 files changed, 212 insertions(+), 77 deletions(-)
 create mode 100644 src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml

diff --git a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
index 1c7e4f2..566f133 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
@@ -9,5 +9,6 @@
     mc:Ignorable="d">
     <StackPanel Margin="20" Spacing="20">
         <TimePicker />
+        <Button Content="Hello" Theme="{DynamicResource FluentTimePickerFlyoutButton}" />
     </StackPanel>
 </UserControl>
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index 21ea127..904d623 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -10,6 +10,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ComboBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ContentControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ContextMenu.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/DateTimePickerShared.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/FlyoutPresenter.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/GridSplitter.axaml" />
diff --git a/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml b/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
new file mode 100644
index 0000000..f9bbf0c
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/DateTimePickerShared.axaml
@@ -0,0 +1,102 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+
+    <!--  Theme for the items displayed in the selectors  -->
+    <ControlTheme
+        x:Key="FluentDateTimePickerItem"
+        BasedOn="{StaticResource {x:Type ListBoxItem}}"
+        TargetType="ListBoxItem">
+        <Setter Property="ListBoxItem.CornerRadius" Value="0" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="Background" Value="{DynamicResource DateTimePickerListItemBackground}" />
+
+        <Style Selector="^:selected">
+            <Setter Property="IsHitTestVisible" Value="False" />
+        </Style>
+        <Style Selector="^.MonthItem">
+            <Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterMonthPadding}" />
+            <Setter Property="HorizontalContentAlignment" Value="Left" />
+        </Style>
+    </ControlTheme>
+
+    <!--  This is used for both the accept/dismiss & buttons in the presenter  -->
+    <ControlTheme x:Key="FluentDateTimePickerButton" TargetType="Button">
+        <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonForeground}" />
+        <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonBackground}" />
+        <Setter Property="Padding" Value="0 8" />
+        <Setter Property="CornerRadius" Value="0" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="Button">
+                <Border Background="{TemplateBinding Background}">
+                    <ContentPresenter
+                        x:Name="ContentPresenter"
+                        Padding="{TemplateBinding Padding}"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                        Background="{TemplateBinding Background}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        Foreground="{TemplateBinding Foreground}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pointerover /template/ ContentPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonPointeroverForeground}" />
+            <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonPointeroverBackground}" />
+        </Style>
+
+        <Style Selector="^:pressed /template/ ContentPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonPressedForeground}" />
+            <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonPressedBackground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="FluentDateTimePickerUpButton"
+        BasedOn="{StaticResource FluentDateTimePickerButton}"
+        TargetType="RepeatButton">
+        <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="Focusable" Value="False" />
+        <Setter Property="IsVisible" Value="False" />
+        <Setter Property="Padding" Value="0 4" />
+        <Setter Property="Content">
+            <Template>
+                <PathIcon
+                    Width="8"
+                    Height="8"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Data="{DynamicResource DateTimePickerButtonUpGlyph}"
+                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
+            </Template>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="FluentDateTimePickerDownButton"
+        BasedOn="{StaticResource FluentDateTimePickerButton}"
+        TargetType="RepeatButton">
+        <Setter Property="VerticalAlignment" Value="Bottom" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="Focusable" Value="False" />
+        <Setter Property="IsVisible" Value="False" />
+        <Setter Property="Padding" Value="0 4" />
+        <Setter Property="Content">
+            <Template>
+                <PathIcon
+                    Width="8"
+                    Height="8"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Data="{DynamicResource DateTimePickerButtonDownGlyph}"
+                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
+            </Template>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Controls/TimePicker.axaml b/src/Semi.Avalonia/Controls/TimePicker.axaml
index 5ca9928..3c30c2e 100644
--- a/src/Semi.Avalonia/Controls/TimePicker.axaml
+++ b/src/Semi.Avalonia/Controls/TimePicker.axaml
@@ -30,32 +30,39 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type TimePickerPresenter}" TargetType="TimePickerPresenter">
-        <Setter Property="Width" Value="242" />
         <Setter Property="MinWidth" Value="242" />
-        <Setter Property="MaxHeight" Value="398" />
+        <Setter Property="Width" Value="242" />
+        <Setter Property="MaxHeight" Value="300" />
         <Setter Property="FontWeight" Value="Normal" />
-        <Setter Property="Background" Value="{DynamicResource TimePickerFlyoutPresenterBackground}" />
+        <Setter Property="Background" Value="White" />
         <Setter Property="BorderBrush" Value="{DynamicResource TimePickerFlyoutPresenterBorderBrush}" />
         <Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+        <Setter Property="CornerRadius" Value="6" />
         <Setter Property="Template">
-            <ControlTemplate>
+            <ControlTemplate TargetType="TimePickerPresenter">
                 <Border
                     Name="Background"
-                    MaxHeight="398"
-                    Padding="{DynamicResource DateTimeFlyoutBorderPadding}"
+                    Margin="8"
+                    Padding="16,0"
+                    HorizontalAlignment="Stretch"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
+                    BoxShadow="0 0 8 0 #1A000000"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid Name="ContentPanel" RowDefinitions="*,Auto">
                         <Grid Name="PART_PickerContainer">
+                            <Grid.Styles>
+                                <Style Selector="DateTimePickerPanel &gt; ListBoxItem">
+                                    <Setter Property="Theme" Value="{StaticResource FluentDateTimePickerItem}" />
+                                </Style>
+                            </Grid.Styles>
                             <!--  Ignore col defs here, set in code  -->
                             <Panel Name="PART_HourHost" Grid.Column="0">
                                 <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
                                     <DateTimePickerPanel
                                         Name="PART_HourSelector"
-                                        ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"
+                                        ItemHeight="28"
                                         PanelType="Hour"
                                         ShouldLoop="True" />
                                 </ScrollViewer>
@@ -67,7 +74,7 @@
                                 <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
                                     <DateTimePickerPanel
                                         Name="PART_MinuteSelector"
-                                        ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"
+                                        ItemHeight="28"
                                         PanelType="Minute"
                                         ShouldLoop="True" />
                                 </ScrollViewer>
@@ -79,7 +86,7 @@
                                 <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
                                     <DateTimePickerPanel
                                         Name="PART_PeriodSelector"
-                                        ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"
+                                        ItemHeight="28"
                                         PanelType="TimePeriod"
                                         ShouldLoop="False" />
                                 </ScrollViewer>
@@ -87,64 +94,54 @@
                                 <RepeatButton Name="PART_PeriodDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}" />
                             </Panel>
 
-                            <Rectangle
-                                x:Name="HighlightRect"
-                                Grid.Column="0"
-                                Grid.ColumnSpan="5"
-                                Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}"
-                                VerticalAlignment="Center"
-                                Fill="{DynamicResource TimePickerFlyoutPresenterHighlightFill}"
-                                ZIndex="-1" />
                             <Rectangle
                                 Name="PART_FirstSpacer"
                                 Grid.Column="1"
-                                Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                Width="1"
                                 HorizontalAlignment="Center"
-                                Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
+                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                             <Rectangle
                                 Name="PART_SecondSpacer"
                                 Grid.Column="3"
-                                Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                Width="1"
                                 HorizontalAlignment="Center"
-                                Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
+                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                         </Grid>
 
                         <Grid
                             Name="AcceptDismissGrid"
                             Grid.Row="1"
                             ColumnDefinitions="*,*">
-                            <Rectangle
-                                Grid.ColumnSpan="2"
-                                Height="{DynamicResource TimePickerSpacerThemeWidth}"
-                                VerticalAlignment="Top"
-                                Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
                             <Button
                                 Name="PART_AcceptButton"
                                 Grid.Column="0"
-                                Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Theme="{StaticResource FluentDateTimePickerButton}">
-                                <Path
-                                    Data="M0.5,8.5 5,13.5 15.5,3"
-                                    Stroke="{Binding $parent[Button].Foreground}"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="0.75" />
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{DynamicResource DateTimePickerAcceptGlyph}"
+                                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
                             </Button>
                             <Button
                                 Name="PART_DismissButton"
                                 Grid.Column="1"
-                                Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 FontSize="16"
                                 Theme="{StaticResource FluentDateTimePickerButton}">
-                                <Path
-                                    Data="M2,2 14,14 M2,14 14 2"
-                                    Stroke="{Binding $parent[Button].Foreground}"
-                                    StrokeLineCap="Round"
-                                    StrokeThickness="0.75" />
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{DynamicResource DateTimePickerDismissGlyph}"
+                                    Foreground="{Binding $parent[ContentPresenter].Foreground}" />
                             </Button>
+                            <Rectangle
+                                Grid.ColumnSpan="2"
+                                Height="1"
+                                VerticalAlignment="Top"
+                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                         </Grid>
                     </Grid>
                 </Border>
@@ -159,33 +156,33 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type TimePicker}" TargetType="TimePicker">
-        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+        <Setter Property="FontSize" Value="14" />
+        <Setter Property="Height" Value="30" />
         <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForeground}" />
         <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrush}" />
-        <Setter Property="BorderThickness" Value="{DynamicResource TimePickerBorderThemeThickness}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="CornerRadius" Value="3" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="Template">
             <ControlTemplate>
-                <DataValidationErrors>
-                    <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
-                        <Button
-                            x:Name="PART_FlyoutButton"
-                            MinWidth="{DynamicResource TimePickerThemeMinWidth}"
-                            MaxWidth="{DynamicResource TimePickerThemeMaxWidth}"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Top"
-                            Background="{TemplateBinding Background}"
-                            BorderBrush="{TemplateBinding BorderBrush}"
-                            BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="{TemplateBinding CornerRadius}"
-                            Foreground="{TemplateBinding Foreground}"
-                            IsEnabled="{TemplateBinding IsEnabled}"
-                            Theme="{StaticResource FluentTimePickerFlyoutButton}">
-
-                            <Grid Name="PART_FlyoutButtonContentGrid">
+                <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
+                    <Button
+                        x:Name="PART_FlyoutButton"
+                        MinWidth="242"
+                        MaxWidth="242"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Top"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        Foreground="{TemplateBinding Foreground}"
+                        IsEnabled="{TemplateBinding IsEnabled}"
+                        Theme="{StaticResource FluentTimePickerFlyoutButton}">
+                        <Grid ColumnDefinitions="*, Auto">
+                            <Grid Name="PART_FlyoutButtonContentGrid" Grid.Column="0">
                                 <!--  Ignore col defs here, set in code  -->
                                 <Border
                                     x:Name="PART_FirstPickerHost"
@@ -194,7 +191,7 @@
                                     VerticalAlignment="Stretch">
                                     <TextBlock
                                         x:Name="PART_HourTextBlock"
-                                        Padding="{DynamicResource TimePickerHostPadding}"
+                                        Padding="12,4"
                                         HorizontalAlignment="Center"
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontSize="{TemplateBinding FontSize}"
@@ -204,9 +201,9 @@
                                 <Rectangle
                                     Name="PART_FirstColumnDivider"
                                     Grid.Column="1"
-                                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                    Width="1"
                                     HorizontalAlignment="Center"
-                                    Fill="{DynamicResource TimePickerSpacerFill}" />
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
 
                                 <Border
                                     x:Name="PART_SecondPickerHost"
@@ -215,7 +212,7 @@
                                     VerticalAlignment="Stretch">
                                     <TextBlock
                                         x:Name="PART_MinuteTextBlock"
-                                        Padding="{DynamicResource TimePickerHostPadding}"
+                                        Padding="12,4"
                                         HorizontalAlignment="Center"
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontSize="{TemplateBinding FontSize}"
@@ -225,9 +222,9 @@
                                 <Rectangle
                                     Name="PART_SecondColumnDivider"
                                     Grid.Column="3"
-                                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                                    Width="1"
                                     HorizontalAlignment="Center"
-                                    Fill="{DynamicResource TimePickerSpacerFill}" />
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
 
                                 <Border
                                     x:Name="PART_ThirdPickerHost"
@@ -236,26 +233,34 @@
                                     VerticalAlignment="Stretch">
                                     <TextBlock
                                         x:Name="PART_PeriodTextBlock"
-                                        Padding="{DynamicResource TimePickerHostPadding}"
+                                        Padding="12,4"
                                         HorizontalAlignment="Center"
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontSize="{TemplateBinding FontSize}"
                                         FontWeight="{TemplateBinding FontWeight}" />
                                 </Border>
                             </Grid>
-                        </Button>
+                            <PathIcon
+                                Grid.Column="1"
+                                Width="12"
+                                Height="12"
+                                Margin="0,0,8,0"
+                                Data="{DynamicResource TimePickerIconGlyph}"
+                                Foreground="{DynamicResource TimePickerIconForeground}" />
+                        </Grid>
 
-                        <Popup
-                            Name="PART_Popup"
-                            IsLightDismissEnabled="True"
-                            PlacementMode="Bottom"
-                            PlacementTarget="{TemplateBinding}"
-                            WindowManagerAddShadowHint="False">
-                            <TimePickerPresenter Name="PART_PickerPresenter" />
-                        </Popup>
+                    </Button>
 
-                    </Grid>
-                </DataValidationErrors>
+                    <Popup
+                        Name="PART_Popup"
+                        IsLightDismissEnabled="True"
+                        PlacementMode="Bottom"
+                        PlacementTarget="{TemplateBinding}"
+                        WindowManagerAddShadowHint="False">
+                        <TimePickerPresenter Name="PART_PickerPresenter" />
+                    </Popup>
+
+                </Grid>
             </ControlTemplate>
         </Setter>
 
diff --git a/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml b/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
new file mode 100644
index 0000000..274acc3
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml
@@ -0,0 +1,20 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="DateTimePickerListItemBackground" Color="White" />
+    <Thickness x:Key="DateTimePickerListItemPadding">0 3 0 6</Thickness>
+    <SolidColorBrush x:Key="DateTimePickerButtonForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="DateTimePickerButtonPointeroverForeground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="DateTimePickerButtonPressedForeground" Color="#1C1F23" />
+
+    <SolidColorBrush x:Key="DateTimePickerButtonBackground" Color="White" />
+    <SolidColorBrush x:Key="DateTimePickerButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="DateTimePickerButtonPressedBackground" Opacity="0.13" Color="#2E3238" />
+
+    <PathGeometry x:Key="DateTimePickerButtonUpGlyph">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</PathGeometry>
+    <PathGeometry x:Key="DateTimePickerButtonDownGlyph">M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z</PathGeometry>
+    <PathGeometry x:Key="DateTimePickerAcceptGlyph">M17.4111 7.30848C18.0692 7.81171 18.1947 8.75312 17.6915 9.41119L11.1915 17.9112C10.909 18.2806 10.4711 18.4981 10.0061 18.5C9.54105 18.5019 9.10143 18.288 8.81592 17.9209L5.31592 13.4209C4.80731 12.767 4.92512 11.8246 5.57904 11.316C6.23296 10.8074 7.17537 10.9252 7.68398 11.5791L9.98988 14.5438L15.3084 7.58884C15.8116 6.93077 16.7531 6.80525 17.4111 7.30848Z</PathGeometry>
+    <PathGeometry x:Key="DateTimePickerDismissGlyph">M17.6568 19.7782C18.2426 20.3639 19.1924 20.3639 19.7782 19.7782C20.3639 19.1924 20.3639 18.2426 19.7782 17.6568L14.1213 12L19.7782 6.34313C20.3639 5.75734 20.3639 4.8076 19.7782 4.22181C19.1924 3.63602 18.2426 3.63602 17.6568 4.22181L12 9.87866L6.34313 4.22181C5.75734 3.63602 4.8076 3.63602 4.22181 4.22181C3.63602 4.8076 3.63602 5.75734 4.22181 6.34313L9.87866 12L4.22181 17.6568C3.63602 18.2426 3.63602 19.1924 4.22181 19.7782C4.8076 20.3639 5.75734 20.3639 6.34313 19.7782L12 14.1213L17.6568 19.7782Z</PathGeometry>
+
+
+    <SolidColorBrush x:Key="DateTimePickerSeparatorBackground" Opacity="0.08" Color="#1C1F23" />
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index 5026287..a7ec7c4 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -8,6 +8,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ButtonSpinner.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ComboBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/DateTimePickerShared.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/GridSplitter.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Label.axaml" />
diff --git a/src/Semi.Avalonia/Themes/Light/TimePicker.axaml b/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
index 9017e8d..e808fbc 100644
--- a/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
+++ b/src/Semi.Avalonia/Themes/Light/TimePicker.axaml
@@ -1,3 +1,8 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="TimePickerButtonBorderBrush" Color="#C6CACD" />
+    <SolidColorBrush x:Key="TimePickerButtonBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="TimePickerButtonForeground" Color="#1C1F23" />
+    <PathGeometry x:Key="TimePickerIconGlyph">M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM13.5 6.5V11.3787L17.0607 14.9393C17.6464 15.5251 17.6464 16.4749 17.0607 17.0607C16.4749 17.6464 15.5251 17.6464 14.9393 17.0607L10.9393 13.0607C10.658 12.7794 10.5 12.3978 10.5 12V6.5C10.5 5.67157 11.1716 5 12 5C12.8284 5 13.5 5.67157 13.5 6.5Z</PathGeometry>
+    <SolidColorBrush x:Key="TimePickerIconForeground" Opacity="0.62" Color="#1C1F23" />
 </ResourceDictionary>