[NUI] apply Tizen 7.0 UX on CollectionView and Scrollbar and add samples.
[platform/core/csapi/tizenfx.git] / src / Tizen.NUI.Components / Theme / DefaultThemeCommon.cs
index 53ccc23..b3b158a 100755 (executable)
@@ -1,5 +1,5 @@
 /*
- * Copyright(c) 2021 Samsung Electronics Co., Ltd.
+ * Copyright(c) 2022 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,6 +24,9 @@ namespace Tizen.NUI.Components
     // It is a C# version of res/Tizen.NUI.Components_Tizen.NUI.Theme.Common.xaml
     internal partial class DefaultThemeCreator : IThemeCreator
     {
+        /// <summary>
+        /// The base theme description.
+        /// </summary>
         [SuppressMessage("Microsoft.Reliability", "CA2000: Dispose objects before losing scope", Justification = "The responsibility to dispose the object is transferred to the theme object.")]
         public Theme Create()
         {
@@ -33,61 +36,57 @@ namespace Tizen.NUI.Components
                 Version = Tizen.NUI.DefaultThemeCreator.DefaultVersion
             };
 
+            // Button base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Button", new ButtonStyle()
             {
                 Size = new Size(339, 96),
-                CornerRadiusPolicy = VisualTransformPolicyType.Relative,
-                CornerRadius = 0.2916f,
+                CornerRadius = 12.0f,
+                ItemHorizontalAlignment = HorizontalAlignment.Center,
+                ItemVerticalAlignment = VerticalAlignment.Center,
                 BackgroundColor = new Selector<Color>()
                 {
-                    Normal = new Color(0.039f, 0.055f, 0.29f, 1),
-                    Focused = new Color(0, 0.2f, 0.545f, 1),
-                    Pressed = new Color(0.106f, 0.412f, 0.792f, 1),
-                    Disabled = new Color(0.765f, 0.792f, 0.824f, 1),
+                    Normal = new Color(1.0f, 0.384f, 0.0f, 1),
+                    Pressed = new Color(0.85f, 0.325f, 0.0f, 1),
+                    Focused = new Color(1.0f, 0.827f, 0.624f, 1),
+                    Selected = new Color(0.624f, 0.239f, 0.0f, 1),
+                    Disabled = new Color(0.792f, 0.792f, 0.792f, 1),
                 },
                 Text = new TextLabelStyle()
                 {
-                    PixelSize = 32,
                     TextColor = Color.White,
+                    PixelSize = 24,
                 }
             });
 
+            // CheckBox base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.CheckBox", new ButtonStyle()
             {
-                Size = new Size(30, 30),
+                ItemSpacing = new Size2D(32, 32),
+                ItemHorizontalAlignment = HorizontalAlignment.Begin,
+                ItemVerticalAlignment = VerticalAlignment.Center,
                 Icon = new ImageViewStyle()
                 {
-                    Opacity = new Selector<float?>()
-                    {
-                        Normal = 1.0f,
-                        Disabled = 0.4f,
-                        Selected = 1.0f,
-                    },
-                    BackgroundImage = new Selector<string>()
-                    {
-                        Pressed = FrameworkInformation.ResourcePath + "nui_component_default_checkbox_bg_p.png",
-                        Selected = FrameworkInformation.ResourcePath + "nui_component_default_checkbox_bg_p.png",
-                        Other = FrameworkInformation.ResourcePath + "nui_component_default_checkbox_bg_n.png",
-                    },
+                    Size = new Size(36, 36),
                     ResourceUrl = new Selector<string>()
                     {
-                        Pressed = "",
-                        Selected = FrameworkInformation.ResourcePath + "nui_component_default_checkbox_s.png",
-                        Other = "",
+                        Normal = FrameworkInformation.ResourcePath + "IoT_check_off.png",
+                        Pressed = FrameworkInformation.ResourcePath + "IoT_check_off_p.png",
+                        Disabled = FrameworkInformation.ResourcePath + "IoT_check_off_d.png",
+                        Focused = FrameworkInformation.ResourcePath + "IoT_check_off_f.png",
+                        Selected = FrameworkInformation.ResourcePath + "IoT_check_on.png",
+                        SelectedPressed = FrameworkInformation.ResourcePath + "IoT_check_on_p.png",
+                        SelectedFocused = FrameworkInformation.ResourcePath + "IoT_check_on_f.png",
+                        DisabledSelected = FrameworkInformation.ResourcePath + "IoT_check_on_d.png",
                     },
                 },
                 Text = new TextLabelStyle()
                 {
-                    PointSize = 12,
-                    TextColor = new Selector<Color>()
-                    {
-                        Normal = new Color(0.22f, 0.22f, 0.22f, 1),
-                        Pressed = new Color(0.11f, 0.11f, 0.11f, 1),
-                        Disabled = new Color(0.66f, 0.66f, 0.66f, 1),
-                    }
+                    TextColor = new Color("#001447"),
+                    PixelSize = 32,
                 }
             });
 
+            // Popup base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Popup", new PopupStyle()
             {
                 Size = new Size(500, 280),
@@ -106,6 +105,7 @@ namespace Tizen.NUI.Components
                 Buttons = new ButtonStyle()
                 {
                     Size = new Size(0, 80),
+                    CornerRadius = 0,
                     BackgroundColor = new Selector<Color>()
                     {
                         Normal = new Color(1, 1, 1, 1),
@@ -115,9 +115,8 @@ namespace Tizen.NUI.Components
                     {
                         BackgroundColor = new Selector<Color>()
                         {
-                            Normal = new Color(1, 1, 1, 1),
                             Pressed = new Color(0, 0, 0, 0.1f),
-                            Other = new Color(1, 1, 1, 1),
+                            Other = new Color(1, 1, 1, 0.1f),
                         },
                     },
                     Text = new TextLabelStyle()
@@ -127,141 +126,199 @@ namespace Tizen.NUI.Components
                 }
             });
 
+            // Progress base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Progress", new ProgressStyle()
             {
-                Size = new Size(200, 5),
+                Size = new Size(508, 16),
                 Track = new ImageViewStyle()
                 {
-                    BackgroundColor = new Color(0, 0, 0, 0.1f),
+                    CornerRadius = 8.0f,
+                    BackgroundColor = new Selector<Color>()
+                    {
+                        Normal = new Color(0.82f, 0.31f, 0.0f, 0.1f),
+                        Disabled = new Color(0.82f, 0.31f, 0.0f, 0.1f),
+                    },
                 },
                 Buffer = new ImageViewStyle()
                 {
-                    BackgroundColor = new Color(0.05f, 0.63f, 0.9f, 0.3f),
+                    CornerRadius = 8.0f,
+                    BackgroundColor = new Color(0.82f, 0.31f, 0.0f, 0.1f),
                 },
                 Progress = new ImageViewStyle()
                 {
-                    BackgroundColor = new Color(0.05f, 0.63f, 0.9f, 1),
+                    CornerRadius = 8.0f,
+                    BackgroundColor = new Color("#D25000"),
                 },
+                IndeterminateImageUrl = FrameworkInformation.ResourcePath + "IoT_progress_indeterminate.png",
             });
 
+            // RadioButton base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.RadioButton", new ButtonStyle()
             {
-                Size = new Size(30, 30),
+                ItemSpacing = new Size2D(32, 32),
+                ItemHorizontalAlignment = HorizontalAlignment.Begin,
+                ItemVerticalAlignment = VerticalAlignment.Center,
                 Icon = new ImageViewStyle()
                 {
-                    Opacity = new Selector<float?>()
+                    Size = new Size(36, 36),
+                    ResourceUrl = new Selector<string>()
                     {
-                        Normal = 1.0f,
-                        Disabled = 0.4f,
-                        Selected = 1.0f,
+                        Normal = FrameworkInformation.ResourcePath + "IoT_radiobutton_off.png",
+                        Pressed = FrameworkInformation.ResourcePath + "IoT_radiobutton_off_p.png",
+                        Disabled = FrameworkInformation.ResourcePath + "IoT_radiobutton_off_d.png",
+                        Focused = FrameworkInformation.ResourcePath + "IoT_radiobutton_off_f.png",
+                        Selected = FrameworkInformation.ResourcePath + "IoT_radiobutton_on.png",
+                        SelectedPressed = FrameworkInformation.ResourcePath + "IoT_radiobutton_on_p.png",
+                        SelectedFocused = FrameworkInformation.ResourcePath + "IoT_radiobutton_on_f.png",
+                        DisabledSelected = FrameworkInformation.ResourcePath + "IoT_radiobutton_on_d.png",
                     },
-                    BackgroundImage = new Selector<string>()
-                    {
-                        Pressed = FrameworkInformation.ResourcePath + "nui_component_default_radiobutton_p.png",
-                        Selected = FrameworkInformation.ResourcePath + "nui_component_default_radiobutton_s.png",
-                        Other = FrameworkInformation.ResourcePath + "nui_component_default_radiobutton_n.png",
-                    }
                 },
                 Text = new TextLabelStyle()
                 {
-                    PointSize = 12,
-                    TextColor = new Selector<Color>()
-                    {
-                        Normal = new Color(0.22f, 0.22f, 0.22f, 1),
-                        Pressed = new Color(0.11f, 0.11f, 0.11f, 1),
-                        Disabled = new Color(0.66f, 0.66f, 0.66f, 1),
-                    }
+                    TextColor = new Color("#001447"),
+                    PixelSize = 32,
                 }
             });
 
+            // Slider base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Slider", new SliderStyle()
             {
-                Size = new Size(200, 50),
-                TrackThickness = 5,
+                Size = new Size(850, 50),
+                TrackThickness = 8,
                 Track = new ImageViewStyle()
                 {
-                    BackgroundColor = new Color(0, 0, 0, 0.1f),
+                    Size = new Size(800, 8),
+                    CornerRadius = 4.0f,
+                    BackgroundColor = new Selector<Color>()
+                    {
+                        Normal = new Color(1.0f, 0.37f, 0.0f, 0.1f),
+                        Disabled = new Color(1.0f, 0.37f, 0.0f, 0.1f),
+                    },
                 },
                 Progress = new ImageViewStyle()
                 {
-                    BackgroundColor = new Color(0.5f, 0.63f, 0.9f, 1),
+                    Size = new Size(800, 8),
+                    CornerRadius = 4.0f,
+                    BackgroundColor = new Selector<Color>()
+                    {
+                        Normal = new Color("#FF6200"),
+                        Disabled = new Color("#CACACA"),
+                    },
                 },
                 Thumb = new ImageViewStyle()
                 {
-                    Size = new Size(50, 50),
-                    ResourceUrl = FrameworkInformation.ResourcePath + "nui_component_default_slider_thumb_n.png",
-                    BackgroundImage = new Selector<string>()
+                    Size = new Size(40, 40),
+                    ResourceUrl = new Selector<string>()
                     {
-                        Normal = FrameworkInformation.ResourcePath + "nui_component_default_slider_thumb_bg_p.png",
-                        Pressed = FrameworkInformation.ResourcePath + "nui_component_default_slider_thumb_bg_p.png",
-                    }
+                        Normal = FrameworkInformation.ResourcePath + "IoT_slider_handler_normal.png",
+                        Pressed = FrameworkInformation.ResourcePath + "IoT_slider_handler_pressed.png",
+                        Focused = FrameworkInformation.ResourcePath + "IoT_slider_handler_pressed.png",
+                        Disabled = FrameworkInformation.ResourcePath + "IoT_slider_handler_disabled.png",
+                    },
                 },
                 ValueIndicatorImage = new ImageViewStyle()
                 {
-                    Size = new Size(83, 54),
-                    ResourceUrl = FrameworkInformation.ResourcePath + "nui_component_default_slider_value_indicator.png",
+                    Size = new Size(16, 24),
+                    BorderlineWidth = 0.5f,
+                    BorderlineColor = new Color("#FF6200"),
+                    BackgroundColor = new Color(0.0f, 0.04f, 0.16f, 1.0f),
                 },
             });
 
+            // Switch base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Switch", new SwitchStyle()
             {
-                Size = new Size(96, 60),
+                ItemSpacing = new Size2D(32, 32),
+                ItemHorizontalAlignment = HorizontalAlignment.Begin,
+                ItemVerticalAlignment = VerticalAlignment.Center,
                 Track = new ImageViewStyle()
                 {
-                    Size = new Size(96, 60),
+                    Size = new Size(84, 44),
                     ResourceUrl = new Selector<string>()
                     {
-                        Normal = FrameworkInformation.ResourcePath + "nui_component_default_switch_track_n.png",
-                        Selected = FrameworkInformation.ResourcePath + "nui_component_default_switch_track_s.png",
-                        Disabled = FrameworkInformation.ResourcePath + "nui_component_default_switch_track_d.png",
-                        DisabledSelected = FrameworkInformation.ResourcePath + "nui_component_default_switch_track_ds.png",
-                    }
+                        Normal = FrameworkInformation.ResourcePath + "IoT_switch_track_off.png",
+                        Pressed = FrameworkInformation.ResourcePath + "IoT_switch_track_off_p.png",
+                        Disabled = FrameworkInformation.ResourcePath + "IoT_switch_track_off_d.png",
+                        Focused = FrameworkInformation.ResourcePath + "IoT_switch_track_off_f.png",
+                        Selected = FrameworkInformation.ResourcePath + "IoT_switch_track_on.png",
+                        SelectedPressed = FrameworkInformation.ResourcePath + "IoT_switch_track_on_p.png",
+                        SelectedFocused = FrameworkInformation.ResourcePath + "IoT_switch_track_on_f.png",
+                        DisabledSelected = FrameworkInformation.ResourcePath + "IoT_switch_track_on_d.png",
+                    },
                 },
                 Thumb = new ImageViewStyle()
                 {
-                    Size = new Size(60, 60),
+                    Size = new Size(44, 44),
                     ResourceUrl = new Selector<string>()
                     {
-                        Normal = FrameworkInformation.ResourcePath + "nui_component_default_switch_thumb_n.png",
-                        Disabled = FrameworkInformation.ResourcePath + "nui_component_default_switch_thumb_d.png",
-                        Selected = FrameworkInformation.ResourcePath + "nui_component_default_switch_thumb_n.png",
+                        Normal = FrameworkInformation.ResourcePath + "IoT_switch_thumb.png",
+                        Disabled = FrameworkInformation.ResourcePath + "IoT_switch_thumb_d.png",
+                        Selected = FrameworkInformation.ResourcePath + "IoT_switch_thumb_s.png",
+                        SelectedPressed = FrameworkInformation.ResourcePath + "IoT_switch_thumb_sp.png",
+                        SelectedFocused = FrameworkInformation.ResourcePath + "IoT_switch_thumb_sf.png",
                     }
                 },
                 Text = new TextLabelStyle()
                 {
-                    PointSize = 12,
-                    TextColor = new Selector<Color>()
-                    {
-                        Normal = new Color(0.22f, 0.22f, 0.22f, 1),
-                        Pressed = new Color(0.11f, 0.11f, 0.11f, 1),
-                        Disabled = new Color(0.66f, 0.66f, 0.66f, 1),
-                    }
+                    TextColor = new Color("#001447"),
+                    PixelSize = 32,
                 }
             });
 
+            // Loading base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Loading", new LoadingStyle()
             {
-                LoadingSize = new Size(100, 100),
+                LoadingSize = new Size(200, 200),
             });
 
+            // Pagination base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Pagination", new PaginationStyle()
             {
                 IndicatorImageUrl = new Selector<string>()
                 {
                     Normal = FrameworkInformation.ResourcePath + "nui_component_default_pagination_normal_dot.png",
                     Selected = FrameworkInformation.ResourcePath + "nui_component_default_pagination_focus_dot.png",
-                }
+                },
+                IndicatorSize = new Size(10, 10),
             });
 
+            // Scrollbar base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Scrollbar", new ScrollbarStyle()
             {
-                TrackThickness = 6,
-                ThumbThickness = 6,
-                TrackColor = new Color(1, 1, 1, 0.15f),
-                ThumbColor = new Color(0.6f, 0.6f, 0.6f, 1.0f),
-                TrackPadding = 4
+                TrackThickness = 8,
+                ThumbThickness = 8,
+                TrackColor = new Color(0f, 0f, 0f, 0f),
+                ThumbColor = new Color("#FFFEFE"),
+                TrackPadding = 4,
+                //7.0 UX no require image resource.
+                Thumb = new ImageViewStyle()
+                {
+                    CornerRadius = 4.0f,
+                    BoxShadow = new Shadow(8.0f, new Color(0.0f, 0.0f, 0.0f, 0.16f), new Vector2(0.0f, 2.0f)),
+                }
+                //ThumbVerticalImageUrl = FrameworkInformation.ResourcePath + "nui_component_default_scroll_vbar.#.png",
+                //ThumbHorizontalImageUrl = FrameworkInformation.ResourcePath + "nui_component_default_scroll_hbar.#.png",
+            });
+
+            // LinearLayouter base style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.LinearLayouter", new ViewStyle()
+            {
+                Padding = new Extents(0, 0, 0, 0)
+            });
+
+            // GridLayouter base style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.GridLayouter", new ViewStyle()
+            {
+                Padding = new Extents(0, 0, 0, 0),
+            });
+
+            // ItemsLayouter base style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.ItemsLayouter", new ViewStyle()
+            {
+                Padding = new Extents(0, 0, 0, 0),
             });
 
+            // RecyclerViewItem base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.RecyclerViewItem", new RecyclerViewItemStyle()
             {
                 BackgroundColor = new Selector<Color>()
@@ -273,77 +330,461 @@ namespace Tizen.NUI.Components
                 },
             });
 
+            // DefaultLinearItem base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.DefaultLinearItem", new DefaultLinearItemStyle()
             {
-                SizeHeight = 130,
-                Padding = new Extents(20, 20, 5, 5),
-                BackgroundColor = new Selector<Color>()
-                {
-                    Normal = new Color(1, 1, 1, 1),
-                    Pressed = new Color(0.85f, 0.85f, 0.85f, 1),
-                    Disabled = new Color(0.70f, 0.70f, 0.70f, 1),
-                    Selected = new Color(0.701f, 0.898f, 0.937f, 1),
-                },
+                SizeHeight = 64,
+                Padding = new Extents(20, 20, 0, 0),
+                Margin = new Extents(0, 0, 0, 0),
                 Label = new TextLabelStyle()
                 {
-                    PointSize = 10,
+                    PixelSize = 24,
                     Ellipsis = true,
+                    FontFamily = "SamsungOneUI600",
+                    TextColor = new Selector<Color>()
+                    {
+                        Normal = new Color("#090E21"),
+                        Pressed = new Color("#FF6200"),
+                        Disabled = new Color("#CACACA"),
+                        Selected = new Color("#FF6200"),
+                    },
+                    ThemeChangeSensitive = false
                 },
                 SubLabel = new TextLabelStyle()
                 {
-                    PointSize = 6,
+                    PixelSize = 20,
                     Ellipsis = true,
+                    FontFamily = "SamsungOneUI400",
+                    TextColor = new Selector<Color>()
+                    {
+                        Normal = new Color("#090E21"),
+                        Pressed = new Color("#FF6200"),
+                        Disabled = new Color("#CACACA"),
+                        Selected = new Color("#FF6200"),
+                    },
+                    ThemeChangeSensitive = false
                 },
                 Icon = new ViewStyle()
                 {
-                    Margin = new Extents(0, 20, 0, 0)
+                    Margin = new Extents(0, 24, 0, 0)
                 },
                 Extra = new ViewStyle()
                 {
-                    Margin = new Extents(20, 0, 0, 0)
-                },
-                Seperator = new ViewStyle()
-                {
-                    Margin = new Extents(5, 5, 0, 0),
-                    BackgroundColor = new Color(0.78f, 0.78f, 0.78f, 1),
+                    Margin = new Extents(24, 0, 0, 0)
                 },
             });
+
+            // DefaultGridItem base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.DefaultGridItem", new DefaultGridItemStyle()
             {
-                Padding = new Extents(5, 5, 5, 5),
-                Caption = new TextLabelStyle()
+                ClippingMode = ClippingModeType.ClipChildren,
+                Padding = new Extents(0, 0, 0, 0),
+                Margin = new Extents(5, 5, 5, 5),
+                CornerRadius = 12.0f,
+                BackgroundColor = new Selector<Color>()
                 {
-                    PointSize = 9,
-                    Ellipsis = true,
+                    Normal = new Color("#FAFAFA"),
+                    Pressed = new Color(1f, 0.38f, 0, 0.2f),
+                    Disabled = new Color("#FAFAFA"),
+                    Selected = new Color(1f, 0.38f, 0, 0.2f),
+                },
+                Image = new ImageViewStyle()
+                {
+                    //FIXME: Clip mode is not working on CornerRadius.
+                    CornerRadius = 12.0f,
+                    ClippingMode = ClippingModeType.ClipChildren,
+                },
+                Label = new TextLabelStyle()
+                {
+                    SizeHeight = 24,
+                    PixelSize = 16,
+                    FontFamily = "SamsungOneUI400",
+                    LineWrapMode = LineWrapMode.Character,
+                    TextColor = new Selector<Color>()
+                    {
+                        Normal = new Color("#090E21"),
+                        Pressed = new Color("#FF6200"),
+                        Disabled = new Color("#CACACA"),
+                        Selected = new Color("#FF6200"),
+                    },
+                    ThemeChangeSensitive = false
                 },
                 Badge = new ViewStyle()
                 {
-                    Margin = new Extents(5, 5, 5, 5),
+                    Margin = new Extents(0, 0, 0, 0),
                 },
+                BoxShadow = new Shadow(12.0f, new Color(0.0f, 0.0f, 0.0f, 0.16f), new Vector2(0.0f, 4.0f)),
             });
 
+            // DefaultTitleItem base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.DefaultTitleItem", new DefaultTitleItemStyle()
             {
-                SizeHeight = 90,
-                Padding = new Extents(10, 10, 5, 5),
-                BackgroundColor = new Selector<Color>()
-                {
-                    Normal = new Color(0.78f, 0.78f, 0.78f, 1),
-                },
+                SizeHeight = 48,
+                Padding = new Extents(20, 20, 0, 0),
+                Margin = new Extents(0, 0, 0, 0),
+                BackgroundColor = Color.Transparent,
                 Label = new TextLabelStyle()
                 {
-                    PointSize = 10,
+                    PixelSize = 24,
                     Ellipsis = true,
+                    FontFamily = "SamsungOneUI400",
+                    TextColor = new Color("#090E217F"),
+                    ThemeChangeSensitive = false
                 },
                 Icon = new ViewStyle()
                 {
-                    Margin = new Extents(10, 0, 0, 0)
+                    Margin = new Extents(24, 0, 0, 0)
                 },
                 Seperator = new ViewStyle()
                 {
                     Margin = new Extents(0, 0, 0, 0),
-                    BackgroundColor = new Color(0.85f, 0.85f, 0.85f, 1),
+                    BackgroundColor = new Color(0, 0, 0, 0),
+                },
+            });
+
+            // ContentPage base style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.ContentPage", new ViewStyle()
+            {
+                BackgroundColor = new Color("#FAFAFA"),
+                CornerRadius = new Vector4(24.0f, 24.0f, 24.0f ,24.0f),
+                CornerRadiusPolicy = VisualTransformPolicyType.Absolute,
+                BoxShadow = new Shadow(8.0f, new Color(0.0f, 0.0f, 0.0f, 0.16f), new Vector2(0.0f, 2.0f)),
+            });
+
+            // AppBar base style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.AppBar", new AppBarStyle()
+            {
+                Size = new Size(-1, 64),
+                BackgroundColor = Color.Transparent,
+                BackButton = new ButtonStyle()
+                {
+                    Size = new Size(48, 48),
+                    CornerRadius = 0,
+                    BackgroundColor = Color.Transparent,
+                    Icon = new ImageViewStyle()
+                    {
+                        Size = new Size(48, 48),
+                        ResourceUrl = FrameworkInformation.ResourcePath + "nui_component_default_back_button.png",
+                        Color = new Selector<Color>()
+                        {
+                            Normal = new Color("#17234D"),
+                            Focused = new Color("#17234D"),
+                            Pressed = new Color("#FF6200"),
+                            Disabled = new Color("#CACACA"),
+                        },
+                    },
+                    ThemeChangeSensitive = false
+                },
+                TitleTextLabel = new TextLabelStyle()
+                {
+                    PixelSize = 24,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    TextColor = new Selector<Color>()
+                    {
+                        Normal = new Color("#17234D"),
+                    },
+                    ThemeChangeSensitive = false
                 },
+                ActionView = new ViewStyle()
+                {
+                    Size = new Size(48, 64),
+                    CornerRadius = 0,
+                    BackgroundColor = Color.Transparent,
+                },
+                ActionButton = new ButtonStyle()
+                {
+                    Size = new Size(-2, 64),
+                    CornerRadius = 0,
+                    BackgroundColor = Color.Transparent,
+                    Text = new TextLabelStyle()
+                    {
+                        PixelSize = 24,
+                        TextColor = new Selector<Color>()
+                        {
+                            Normal = new Color("#FF6200"),
+                            Focused = new Color("#FF6200"),
+                            Pressed = new Color("#D95300"),
+                            Disabled = new Color("#CACACA"),
+                        },
+                    },
+                    Icon = new ImageViewStyle()
+                    {
+                        Size = new Size(48, 48),
+                        Color = new Selector<Color>()
+                        {
+                            Normal = new Color("#17234D"),
+                            Focused = new Color("#17234D"),
+                            Pressed = new Color("#FF6200"),
+                            Disabled = new Color("#CACACA"),
+                        },
+                    },
+                    ThemeChangeSensitive = false,
+                },
+                Padding = new Extents(16, 16, 0, 0),
+                NavigationPadding = new Extents(0, 8, 0, 0),
+                ActionPadding = new Extents(16, 0, 0, 0),
+                ActionCellPadding = new Size2D(16, 0),
+            });
+
+            // Picker base style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.Picker", new PickerStyle()
+            {
+                Size = new Size(160, 339),
+                ItemTextLabel = new TextLabelStyle()
+                {
+                    //FIXME: Should be check PointSize. given size from UX is too large.
+                    PixelSize = 32,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    Size = new Size(0,72),
+                    TextColor = new Selector<Color>()
+                    {
+                        Normal = new Color("#000C2B"),
+                    },
+                    BackgroundColor = Color.White,
+                },
+                Divider = new ViewStyle()
+                {
+                    SizeHeight = 2.0f,
+                    WidthResizePolicy = ResizePolicyType.FillToParent,
+                    Position = new Position(0, 132),
+                    BackgroundColor = new Color("#0A0E4A"),
+                },
+                StartScrollOffset = new Size(0, 12),
+            });
+
+            // TabBar base style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.TabBar", new ViewStyle()
+            {
+                Size = new Size(-1, -2),
+                Margin = new Extents(16, 16, 0, 0),
+                Padding = new Extents(14, 14, 0, 0),
+                CornerRadius = new Vector4(12.0f, 12.0f, 12.0f, 12.0f),
+                CornerRadiusPolicy = VisualTransformPolicyType.Absolute,
+                BoxShadow = new Shadow(8.0f, new Color(0.0f, 0.0f, 0.0f, 0.16f), new Vector2(0.0f, 2.0f)),
+                BackgroundColor = new Color("#FAFAFA"),
+            });
+
+            // TabButton base style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.TabButton", new TabButtonStyle()
+            {
+                Size = new Size(-1, 116),
+                SizeWithTextOnly = new Size(-1, 72),
+                SizeWithIconOnly = new Size(-1, 64),
+                MinimumSize = new Size(100, -1),
+                Padding = new Extents(24, 24, 18, 16),
+                PaddingWithTextOnly = new Extents(24, 24, 20, 20),
+                PaddingWithIconOnly = new Extents(24, 24, 16, 16),
+                ItemSpacing = new Size2D(0, 10),
+                CornerRadius = 0,
+                IconSizeWithIconOnly = new Size(32, 32),
+                BackgroundColor = new Selector<Color>()
+                {
+                    Normal = new Color("#FAFAFA"),
+                    Selected = new Color("#FFE0CC"),
+                    Pressed = new Color("#FFCAA8"),
+                    Focused = new Color("#FAFAFA"),
+                    Disabled = new Color("#FAFAFA"),
+                },
+                Text = new TextLabelStyle()
+                {
+                    PixelSize = 28,
+                    Size = new Size(-2, -2),
+                    TextColor = new Selector<Color>()
+                    {
+                        Normal = new Color("#090E21"),
+                        Selected = new Color("#FF6200"),
+                        Pressed = new Color("#FF6200"),
+                        Focused = new Color("#FF6200"),
+                        Disabled = new Color("#CACACA"),
+                    },
+                    ThemeChangeSensitive = false,
+                },
+                Icon = new ImageViewStyle()
+                {
+                    Size = new Size(48, 48),
+                    Color = new Selector<Color>()
+                    {
+                        Normal = new Color("#090E21"),
+                        Selected = new Color("#FF6200"),
+                        Pressed = new Color("#FF6200"),
+                        Focused = new Color("#FF6200"),
+                        Disabled = new Color("#CACACA"),
+                    },
+                },
+            });
+
+            // NotificationToast base style
+            theme.AddStyleWithoutClone("NotificationToast", new TextLabelStyle()
+            {
+                BackgroundColor = new Color("#FAFAFA"),
+                CornerRadius = 12.0f,
+                BoxShadow = new Shadow(8.0f, new Color(0.0f, 0.0f, 0.0f, 0.16f), new Vector2(0.0f, 2.0f)),
+                TextColor = new Color("#090E21"),
+                PixelSize = 32,
+                WidthResizePolicy = ResizePolicyType.UseNaturalSize,
+                HeightResizePolicy = ResizePolicyType.UseNaturalSize,
+                PositionUsesPivotPoint = true,
+                HorizontalAlignment = HorizontalAlignment.Center,
+                VerticalAlignment = VerticalAlignment.Center,
+                Padding = new Extents(16, 16, 16, 16),
+                PositionY = 120,
+            });
+
+            // AlertDialog base style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.AlertDialog", new AlertDialogStyle()
+            {
+                Size = new Size(-2, -2),
+                Padding = new Extents(32, 32, 32, 32),
+                ItemSpacing = new Size2D(0, 32),
+                BackgroundColor = new Color("#FAFAFA"),
+                CornerRadius = 12.0f,
+                BoxShadow = new Shadow(8.0f, new Color(0.0f, 0.0f, 0.0f, 0.16f), new Vector2(0.0f, 2.0f)),
+                TitleTextLabel = new TextLabelStyle()
+                {
+                    Size = new Size(626, -2),
+                    PixelSize = 24,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    TextColor = new Color("#090E21"),
+                    ThemeChangeSensitive = false,
+                },
+                MessageTextLabel = new TextLabelStyle()
+                {
+                    Size = new Size(626, -2),
+                    PixelSize = 24,
+                    MultiLine = true,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    TextColor = new Color("#090E21"),
+                    ThemeChangeSensitive = false,
+                },
+                ActionContent = new ViewStyle()
+                {
+                    Size = new Size(626, -2),
+                },
+            });
+
+            // TimePicker base style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.TimePicker", new TimePickerStyle()
+            {
+                CellPadding = new Size(50, 339),
+
+                Pickers = new PickerStyle()
+                {
+                    Size = new Size(160, 339),
+                    ItemTextLabel = new TextLabelStyle()
+                    {
+                        //FIXME: Should be check PointSize. given size from UX is too large.
+                        PixelSize = 32,
+                        VerticalAlignment = VerticalAlignment.Center,
+                        HorizontalAlignment = HorizontalAlignment.Center,
+                        Size = new Size(0,72),
+                        TextColor = new Color("#000C2B"),
+                        BackgroundColor = Color.White,
+                        ThemeChangeSensitive = false
+                    },
+                    Divider = new ViewStyle()
+                    {
+                        SizeHeight = 2.0f,
+                        WidthResizePolicy = ResizePolicyType.FillToParent,
+                        Position = new Position(0, 132),
+                        BackgroundColor = new Color("#0A0E4A"),
+                    },
+                    StartScrollOffset = new Size2D(0, 12),
+                }
+            });
+
+            // DatePicker base style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.DatePicker", new DatePickerStyle()
+            {
+                CellPadding = new Size(50, 339),
+
+                Pickers = new PickerStyle()
+                {
+                    Size = new Size(160, 339),
+                    ItemTextLabel = new TextLabelStyle()
+                    {
+                        //FIXME: Should be check PointSize. given size from UX is too large.
+                        PixelSize = 32,
+                        VerticalAlignment = VerticalAlignment.Center,
+                        HorizontalAlignment = HorizontalAlignment.Center,
+                        Size = new Size(0,72),
+                        TextColor = new Color("#000C2B"),
+                        BackgroundColor = Color.White,
+                        ThemeChangeSensitive = false
+                    },
+                    Divider = new ViewStyle()
+                    {
+                        SizeHeight = 2.0f,
+                        WidthResizePolicy = ResizePolicyType.FillToParent,
+                        Position = new Position(0, 132),
+                        BackgroundColor = new Color("#0A0E4A"),
+                    },
+                    StartScrollOffset = new Size2D(0, 12),
+                }
+            });
+
+            // Menu base style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.Menu", new MenuStyle()
+            {
+                Content = new ViewStyle()
+                {
+                    BackgroundColor = new Color("#FFFEFE"),
+                    CornerRadius = 24.0f,
+                    BoxShadow = new Shadow(8.0f, new Color(0.0f, 0.0f, 0.0f, 0.16f), new Vector2(0.0f, 2.0f)),
+                    // FIXME: ScrollableBase with LinearLayout's Padding.Start is applied both Start and End.
+                    //        ScrollableBase with LinearLayout's Padding.Top is applied both Top and Bottom.
+                    Padding = new Extents(32, 0, 16, 0),
+                },
+            });
+
+            // MenuItem base style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.MenuItem", new ButtonStyle()
+            {
+                Size = new Size(324, -2),
+                MinimumSize = new Size2D(0, 64),
+                BackgroundColor = new Color("#FFFEFE"),
+                CornerRadius = 0,
+                // FIXME: ClippingModeType.ClipChildren cannot support anti-aliasing
+                //        So not to show left bottom corner of MenuItem, MenuItem.Padding.Start is 0 and Menu.Content.Padding.Start is 32.
+                //        (instead of MenuItem.Padding.Start 16 and Menu.Content.Padding.Start is 16)
+                Padding = new Extents(0, 0, 24, 24),
+                Text = new TextLabelStyle()
+                {
+                    PixelSize = 24,
+                    MultiLine = true,
+                    HorizontalAlignment = HorizontalAlignment.Begin,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    TextColor = new Selector<Color>()
+                    {
+                        Normal = new Color("#090E21"),
+                        Focused = new Color("#FF6200"),
+                        Pressed = new Color("#FF6200"),
+                        Disabled = new Color("#CACACA"),
+                        Selected = new Color("#FF6200"),
+                    },
+                    ThemeChangeSensitive = false
+                },
+                Icon = new ImageViewStyle()
+                {
+                    Size = new Size(32, 32),
+                    Color = new Selector<Color>()
+                    {
+                        Normal = new Color("#090E21"),
+                        Focused = new Color("#FF6200"),
+                        Pressed = new Color("#FF6200"),
+                        Disabled = new Color("#CACACA"),
+                        Selected = new Color("#FF6200"),
+                    },
+                },
+            });
+
+            // AlertDialog base style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.DialogPage.Scrim", new ViewStyle()
+            {
+                BackgroundColor = new Color("#090E21"),
+                Opacity = 0.5f,
             });
 
             return theme;
@@ -351,4 +792,4 @@ namespace Tizen.NUI.Components
     }
 }
 
-#endif
+#endif // !PROFILE_WEARABLE