[NUI] Fix TextLabel Theme to set FontSizeScale with UseSystemSetting
[platform/core/csapi/tizenfx.git] / src / Tizen.NUI.Components / Theme / DefaultThemeCommon.cs
index a16f417..f587dce 100755 (executable)
@@ -39,7 +39,9 @@ namespace Tizen.NUI.Components
             // Button base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Button", new ButtonStyle()
             {
-                Size = new Size(339, 96),
+                MinimumSize = new Size(252, 48),
+                Padding = new Extents(32, 32, 8, 8),
+                ItemSpacing = new Size2D(8, 8),
                 CornerRadius = 12.0f,
                 ItemHorizontalAlignment = HorizontalAlignment.Center,
                 ItemVerticalAlignment = VerticalAlignment.Center,
@@ -47,25 +49,85 @@ namespace Tizen.NUI.Components
                 {
                     Normal = new Color(1.0f, 0.384f, 0.0f, 1),
                     Pressed = new Color(0.85f, 0.325f, 0.0f, 1),
-                    Focused = new Color(0, 0.2f, 0.545f, 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()
                 {
-                    TextColor = Color.White,
-                    PixelSize = 32,
+                    TextColor = new Color("#FDFDFD"),
+                    PixelSize = 24,
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
+                }
+            });
+
+            // Outlined Button style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.Button.Outlined", new ButtonStyle()
+            {
+                MinimumSize = new Size(252, 48),
+                Padding = new Extents(32, 32, 8, 8),
+                ItemSpacing = new Size2D(8, 8),
+                CornerRadius = 12.0f,
+                BorderlineWidth = 2.0f,
+                BorderlineColorSelector = new Selector<Color>()
+                {
+                    Normal = new Color("#FF6200"),
+                    Pressed = new Color("#FFA166"),
+                    Focused = new Color("#FF7119"),
+                    Selected = new Color("#FF8133"),
+                    Disabled = new Color("#CACACA"),
+                },
+                ItemHorizontalAlignment = HorizontalAlignment.Center,
+                ItemVerticalAlignment = VerticalAlignment.Center,
+                BackgroundColor = Color.Transparent,
+                Text = new TextLabelStyle()
+                {
+                    TextColor = new Selector<Color>()
+                    {
+                        Normal = new Color("#FF6200"),
+                        Pressed = new Color("#FFA166"),
+                        Focused = new Color("#FF7119"),
+                        Selected = new Color("#FF8133"),
+                        Disabled = new Color("#CACACA"),
+                    },
+                    PixelSize = 24,
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
+                }
+            });
+
+            // TextOnly Button style
+            theme.AddStyleWithoutClone("Tizen.NUI.Components.Button.TextOnly", new ButtonStyle()
+            {
+                MinimumSize = new Size(120, 48),
+                Padding = new Extents(32, 32, 8, 8),
+                ItemHorizontalAlignment = HorizontalAlignment.Center,
+                ItemVerticalAlignment = VerticalAlignment.Center,
+                BackgroundColor = Color.Transparent,
+                Text = new TextLabelStyle()
+                {
+                    TextColor = new Selector<Color>()
+                    {
+                        Normal = new Color("#FF6200"),
+                        Pressed = new Color("#FFA166"),
+                        Focused = new Color("#FF7119"),
+                        Selected = new Color("#FF8133"),
+                        Disabled = new Color("#CACACA"),
+                    },
+                    PixelSize = 24,
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
                 }
             });
 
             // CheckBox base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.CheckBox", new ButtonStyle()
             {
-                ItemSpacing = new Size2D(32, 32),
-                ItemHorizontalAlignment = HorizontalAlignment.Begin,
+                Padding = new Extents(8, 8, 8, 8),
+                ItemSpacing = new Size2D(16, 16),
+                ItemHorizontalAlignment = HorizontalAlignment.Center,
                 ItemVerticalAlignment = VerticalAlignment.Center,
                 Icon = new ImageViewStyle()
                 {
-                    Size = new Size(36, 36),
+                    Size = new Size(32, 32),
                     ResourceUrl = new Selector<string>()
                     {
                         Normal = FrameworkInformation.ResourcePath + "IoT_check_off.png",
@@ -80,8 +142,9 @@ namespace Tizen.NUI.Components
                 },
                 Text = new TextLabelStyle()
                 {
-                    TextColor = new Color("#001447"),
-                    PixelSize = 32,
+                    TextColor = new Color("#090E21"),
+                    PixelSize = 24,
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
                 }
             });
 
@@ -100,10 +163,11 @@ namespace Tizen.NUI.Components
                 {
                     PointSize = 16,
                     Padding = new Extents(20, 20, 20, 20),
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
                 },
                 Buttons = new ButtonStyle()
                 {
-                    Size = new Size(0, 80),
+                    SizeHeight = 80,
                     CornerRadius = 0,
                     BackgroundColor = new Selector<Color>()
                     {
@@ -121,6 +185,7 @@ namespace Tizen.NUI.Components
                     Text = new TextLabelStyle()
                     {
                         TextColor = new Color(0.05f, 0.63f, 0.9f, 1),
+                        FontSizeScale = FontSizeScale.UseSystemSetting,
                     }
                 }
             });
@@ -128,37 +193,39 @@ namespace Tizen.NUI.Components
             // Progress base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Progress", new ProgressStyle()
             {
-                Size = new Size(200, 25),
+                Size = new Size(508, 16),
                 Track = new ImageViewStyle()
                 {
-                    BorderlineWidth = 0.5f,
-                    BorderlineColor = new Color(0.92f, 0.93f, 0.94f, 1.0f),
+                    CornerRadius = 8.0f,
                     BackgroundColor = new Selector<Color>()
                     {
-                        Normal = new Color(1.0f, 1.0f, 1.0f, 0.5f),
-                        Disabled = new Color(0.73f, 0.76f, 0.79f, 1),
+                        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.03f, 0.05f, 0.29f, 1),
+                    CornerRadius = 8.0f,
+                    BackgroundColor = new Color("#D25000"),
                 },
-                IndeterminateImageUrl = FrameworkInformation.ResourcePath + "nui_component_default_progress_indeterminate.png",
+                IndeterminateImageUrl = FrameworkInformation.ResourcePath + "IoT_progress_indeterminate.png",
             });
 
             // RadioButton base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.RadioButton", new ButtonStyle()
             {
-                ItemSpacing = new Size2D(32, 32),
-                ItemHorizontalAlignment = HorizontalAlignment.Begin,
+                Padding = new Extents(8, 8, 8, 8),
+                ItemSpacing = new Size2D(16, 16),
+                ItemHorizontalAlignment = HorizontalAlignment.Center,
                 ItemVerticalAlignment = VerticalAlignment.Center,
                 Icon = new ImageViewStyle()
                 {
-                    Size = new Size(36, 36),
+                    Size = new Size(32, 32),
                     ResourceUrl = new Selector<string>()
                     {
                         Normal = FrameworkInformation.ResourcePath + "IoT_radiobutton_off.png",
@@ -173,39 +240,40 @@ namespace Tizen.NUI.Components
                 },
                 Text = new TextLabelStyle()
                 {
-                    TextColor = new Color("#001447"),
-                    PixelSize = 32,
+                    TextColor = new Color("#090E21"),
+                    PixelSize = 24,
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
                 }
             });
 
             // Slider base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Slider", new SliderStyle()
             {
-                Size = new Size(200, 50),
+                Size = new Size(850, 50),
                 TrackThickness = 8,
                 Track = new ImageViewStyle()
                 {
-                    Size = new Size(100, 8),
-                    BorderlineWidth = 0.5f,
-                    BorderlineColor = new Color(0.84f, 0.85f, 0.87f, 1.0f),
+                    Size = new Size(800, 8),
+                    CornerRadius = 4.0f,
                     BackgroundColor = new Selector<Color>()
                     {
-                        Normal = new Color(1.0f, 1.0f, 1.0f, 0.2f),
-                        Disabled = new Color(0.76f, 0.79f, 0.82f, 1),
+                        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()
                 {
-                    Size = new Size(100, 8),
+                    Size = new Size(800, 8),
+                    CornerRadius = 4.0f,
                     BackgroundColor = new Selector<Color>()
                     {
-                        Normal = new Color(0.03f, 0.05f, 0.3f, 1),
-                        Disabled = new Color(0.76f, 0.79f, 0.82f, 1),
+                        Normal = new Color("#FF6200"),
+                        Disabled = new Color("#CACACA"),
                     },
                 },
                 Thumb = new ImageViewStyle()
                 {
-                    Size = new Size(36, 36),
+                    Size = new Size(40, 40),
                     ResourceUrl = new Selector<string>()
                     {
                         Normal = FrameworkInformation.ResourcePath + "IoT_slider_handler_normal.png",
@@ -216,15 +284,25 @@ namespace Tizen.NUI.Components
                 },
                 ValueIndicatorImage = new ImageViewStyle()
                 {
-                    Size = new Size(49, 24),
-                    BackgroundColor = new Color(0.0f, 0.04f, 0.16f, 1.0f),
+                    Size = new Size(43, 40),
+                    BorderlineWidth = 1.0f,
+                    BorderlineColor = new Color("#FF6200"),
+                    BackgroundColor = new Color(1.0f, 1.0f, 1.0f, 0.0f),
+                    CornerRadius = 12.0f,
                 },
+                ValueIndicatorText = new TextLabelStyle()
+                {
+                    SizeHeight = 24,
+                    PixelSize = 16,
+                    TextColor = new Color("#FF6200"),
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
+                }
             });
 
             // Switch base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Switch", new SwitchStyle()
             {
-                ItemSpacing = new Size2D(32, 32),
+                ItemSpacing = new Size2D(16, 16),
                 ItemHorizontalAlignment = HorizontalAlignment.Begin,
                 ItemVerticalAlignment = VerticalAlignment.Center,
                 Track = new ImageViewStyle()
@@ -256,44 +334,53 @@ namespace Tizen.NUI.Components
                 },
                 Text = new TextLabelStyle()
                 {
-                    TextColor = new Color("#001447"),
-                    PixelSize = 32,
+                    TextColor = new Color("#090E21"),
+                    PixelSize = 24,
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
                 }
             });
 
             // 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()
             {
+                Size = new Size(450, 24),
                 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),
+                IndicatorSize = new Size(64, 8),
+                IndicatorSpacing = 16,
             });
 
             // Scrollbar base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Scrollbar", new ScrollbarStyle()
             {
-                TrackThickness = 12,
-                ThumbThickness = 12,
+                TrackThickness = 8,
+                ThumbThickness = 8,
                 TrackColor = new Color(0f, 0f, 0f, 0f),
-                ThumbColor = new Color("#0A0E4A"),
+                ThumbColor = new Color("#FFFEFE"),
                 TrackPadding = 4,
-                ThumbVerticalImageUrl = FrameworkInformation.ResourcePath + "nui_component_default_scroll_vbar.#.png",
-                ThumbHorizontalImageUrl = FrameworkInformation.ResourcePath + "nui_component_default_scroll_hbar.#.png",
+                //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(64, 64, 0, 0)
+                Padding = new Extents(0, 0, 0, 0)
             });
 
             // GridLayouter base style
@@ -323,86 +410,111 @@ namespace Tizen.NUI.Components
             // DefaultLinearItem base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.DefaultLinearItem", new DefaultLinearItemStyle()
             {
-                SizeHeight = 108,
-                Padding = new Extents(64, 64, 18, 17),
+                SizeHeight = 64,
+                Padding = new Extents(16, 16, 0, 0),
                 Margin = new Extents(0, 0, 0, 0),
-                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.85f, 0.85f, 0.85f, 1),
-                },
                 Label = new TextLabelStyle()
                 {
-                    PixelSize = 32,
+                    PixelSize = 24,
                     Ellipsis = true,
-                    FontFamily = "BreezeSans", //FXIME Font Weight is Light
-                    TextColor = new Color("#001447"),
+                    FontFamily = "SamsungOneUI600",
+                    TextColor = new Selector<Color>()
+                    {
+                        Normal = new Color("#090E21"),
+                        Pressed = new Color("#FF6200"),
+                        Disabled = new Color("#CACACA"),
+                        Selected = new Color("#FF6200"),
+                    },
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
                     ThemeChangeSensitive = false
                 },
                 SubLabel = new TextLabelStyle()
                 {
-                    PixelSize = 28,
+                    PixelSize = 20,
                     Ellipsis = true,
-                    FontFamily = "BreezeSans",
-                    TextColor = new Color("#001447"),
+                    FontFamily = "SamsungOneUI400",
+                    TextColor = new Selector<Color>()
+                    {
+                        Normal = new Color("#090E21"),
+                        Pressed = new Color("#FF6200"),
+                        Disabled = new Color("#CACACA"),
+                        Selected = new Color("#FF6200"),
+                    },
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
                     ThemeChangeSensitive = false
                 },
                 Icon = new ViewStyle()
                 {
-                    Margin = new Extents(0, 32, 0, 0)
+                    Margin = new Extents(0, 16, 0, 0)
                 },
                 Extra = new ViewStyle()
                 {
-                    Margin = new Extents(32, 0, 0, 0)
-                },
-                Seperator = new ViewStyle()
-                {
-                    SizeHeight = 1,
-                    Margin = new Extents(64, 64, 0, 0),
-                    BackgroundColor = new Color("#C3CAD2"),
+                    Margin = new Extents(16, 0, 0, 0)
                 },
             });
 
             // DefaultGridItem base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.DefaultGridItem", new DefaultGridItemStyle()
             {
+                ClippingMode = ClippingModeType.ClipChildren,
                 Padding = new Extents(0, 0, 0, 0),
                 Margin = new Extents(5, 5, 5, 5),
+                CornerRadius = 12.0f,
+                BackgroundColor = new Selector<Color>()
+                {
+                    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 = 60,
-                    PixelSize = 24,
+                    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"),
+                    },
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
                     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 = 60,
-                Padding = new Extents(64, 64, 12, 12),
+                SizeHeight = 48,
+                Padding = new Extents(20, 20, 0, 0),
                 Margin = new Extents(0, 0, 0, 0),
-                BackgroundColor = new Selector<Color>()
-                {
-                    Normal = new Color("#EEEEF1"),
-                },
+                BackgroundColor = Color.Transparent,
                 Label = new TextLabelStyle()
                 {
-                    PixelSize = 28,
+                    PixelSize = 24,
                     Ellipsis = true,
-                    TextColor = new Color("#001447"),
+                    FontFamily = "SamsungOneUI400",
+                    TextColor = new Color("#090E217F"),
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
                     ThemeChangeSensitive = false
                 },
                 Icon = new ViewStyle()
                 {
-                    Margin = new Extents(40, 0, 0, 0)
+                    Margin = new Extents(24, 0, 0, 0)
                 },
                 Seperator = new ViewStyle()
                 {
@@ -452,6 +564,7 @@ namespace Tizen.NUI.Components
                     {
                         Normal = new Color("#17234D"),
                     },
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
                     ThemeChangeSensitive = false
                 },
                 ActionView = new ViewStyle()
@@ -475,6 +588,7 @@ namespace Tizen.NUI.Components
                             Pressed = new Color("#D95300"),
                             Disabled = new Color("#CACACA"),
                         },
+                        FontSizeScale = FontSizeScale.UseSystemSetting,
                     },
                     Icon = new ImageViewStyle()
                     {
@@ -498,28 +612,22 @@ namespace Tizen.NUI.Components
             // Picker base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Picker", new PickerStyle()
             {
-                Size = new Size(160, 339),
+                SizeHeight = 220.0f,
+                MinimumSize = new Size(80, -1),
                 ItemTextLabel = new TextLabelStyle()
                 {
-                    //FIXME: Should be check PointSize. given size from UX is too large.
-                    PixelSize = 32,
+                    PixelSize = 24,
                     VerticalAlignment = VerticalAlignment.Center,
                     HorizontalAlignment = HorizontalAlignment.Center,
-                    Size = new Size(0,72),
+                    SizeHeight = 44,
                     TextColor = new Selector<Color>()
                     {
-                        Normal = new Color("#000C2B"),
+                        Normal = new Color(0.035f, 0.055f, 0.123f, 1.0f),
                     },
-                    BackgroundColor = Color.White,
-                },
-                Divider = new ViewStyle()
-                {
-                    SizeHeight = 2.0f,
-                    WidthResizePolicy = ResizePolicyType.FillToParent,
-                    Position = new Position(0, 132),
-                    BackgroundColor = new Color("#0A0E4A"),
+                    BackgroundColor = new Color("#FAFAFA"),
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
                 },
-                StartScrollOffset = new Size(0, 12),
+                StartScrollOffset = new Size(0, 0),
             });
 
             // TabBar base style
@@ -537,34 +645,36 @@ namespace Tizen.NUI.Components
             // TabButton base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.TabButton", new TabButtonStyle()
             {
-                Size = new Size(-1, 116),
-                SizeWithTextOnly = new Size(-1, 72),
+                Size = new Size(-1, 72),
+                SizeWithIcon = new Size(-1, 116),
                 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),
+                MinimumSize = new Size(80, 64),
+                Padding = new Extents(24, 24, 16, 16),
+                ItemSpacing = new Size2D(10, 10),
                 CornerRadius = 0,
                 IconSizeWithIconOnly = new Size(32, 32),
+                TextSizeWithIcon = 16.0f,
                 BackgroundColor = new Selector<Color>()
                 {
                     Normal = new Color("#FAFAFA"),
                     Selected = new Color("#FFE0CC"),
-                    Pressed = new Color("#FFE0CC"),
+                    Pressed = new Color("#FFCAA8"),
+                    Focused = new Color("#FAFAFA"),
                     Disabled = new Color("#FAFAFA"),
                 },
                 Text = new TextLabelStyle()
                 {
-                    PixelSize = 28,
+                    PixelSize = 24,
                     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"),
                     },
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
                     ThemeChangeSensitive = false,
                 },
                 Icon = new ImageViewStyle()
@@ -575,6 +685,7 @@ namespace Tizen.NUI.Components
                         Normal = new Color("#090E21"),
                         Selected = new Color("#FF6200"),
                         Pressed = new Color("#FF6200"),
+                        Focused = new Color("#FF6200"),
                         Disabled = new Color("#CACACA"),
                     },
                 },
@@ -587,7 +698,7 @@ namespace Tizen.NUI.Components
                 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,
+                PixelSize = 24,
                 WidthResizePolicy = ResizePolicyType.UseNaturalSize,
                 HeightResizePolicy = ResizePolicyType.UseNaturalSize,
                 PositionUsesPivotPoint = true,
@@ -595,6 +706,7 @@ namespace Tizen.NUI.Components
                 VerticalAlignment = VerticalAlignment.Center,
                 Padding = new Extents(16, 16, 16, 16),
                 PositionY = 120,
+                FontSizeScale = FontSizeScale.UseSystemSetting,
             });
 
             // AlertDialog base style
@@ -613,6 +725,7 @@ namespace Tizen.NUI.Components
                     HorizontalAlignment = HorizontalAlignment.Center,
                     VerticalAlignment = VerticalAlignment.Center,
                     TextColor = new Color("#090E21"),
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
                     ThemeChangeSensitive = false,
                 },
                 MessageTextLabel = new TextLabelStyle()
@@ -623,6 +736,7 @@ namespace Tizen.NUI.Components
                     HorizontalAlignment = HorizontalAlignment.Center,
                     VerticalAlignment = VerticalAlignment.Center,
                     TextColor = new Color("#090E21"),
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
                     ThemeChangeSensitive = false,
                 },
                 ActionContent = new ViewStyle()
@@ -634,66 +748,59 @@ namespace Tizen.NUI.Components
             // TimePicker base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.TimePicker", new TimePickerStyle()
             {
-                CellPadding = new Size(50, 339),
+                CellPadding = new Size(12, 220),
 
                 Pickers = new PickerStyle()
                 {
-                    Size = new Size(160, 339),
+                    Size = new Size(80, 220),
                     ItemTextLabel = new TextLabelStyle()
                     {
-                        //FIXME: Should be check PointSize. given size from UX is too large.
-                        PixelSize = 32,
+                        PixelSize = 24,
                         VerticalAlignment = VerticalAlignment.Center,
                         HorizontalAlignment = HorizontalAlignment.Center,
-                        Size = new Size(0,72),
-                        TextColor = new Color("#000C2B"),
-                        BackgroundColor = Color.White,
+                        SizeHeight = 44,
+                        TextColor = new Selector<Color>()
+                        {
+                            Normal = new Color(0.035f, 0.055f, 0.123f, 1.0f),
+                        },
+                        BackgroundColor = new Color("#FAFAFA"),
+                        FontSizeScale = FontSizeScale.UseSystemSetting,
                         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),
+                    StartScrollOffset = new Size2D(0, 0),
                 }
             });
 
             // DatePicker base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.DatePicker", new DatePickerStyle()
             {
-                CellPadding = new Size(50, 339),
+                CellPadding = new Size(12, 220),
 
                 Pickers = new PickerStyle()
                 {
-                    Size = new Size(160, 339),
+                    Size = new Size(80, 220),
                     ItemTextLabel = new TextLabelStyle()
                     {
-                        //FIXME: Should be check PointSize. given size from UX is too large.
-                        PixelSize = 32,
+                        PixelSize = 24,
                         VerticalAlignment = VerticalAlignment.Center,
                         HorizontalAlignment = HorizontalAlignment.Center,
-                        Size = new Size(0,72),
-                        TextColor = new Color("#000C2B"),
-                        BackgroundColor = Color.White,
+                        SizeHeight = 44,
+                        TextColor = new Selector<Color>()
+                        {
+                            Normal = new Color(0.035f, 0.055f, 0.123f, 1.0f),
+                        },
+                        BackgroundColor = new Color("#FAFAFA"),
+                        FontSizeScale = FontSizeScale.UseSystemSetting,
                         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),
+                    StartScrollOffset = new Size2D(0, 0),
                 }
             });
 
             // Menu base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Menu", new MenuStyle()
             {
+                BackgroundColor = Color.Transparent,
                 Content = new ViewStyle()
                 {
                     BackgroundColor = new Color("#FFFEFE"),
@@ -730,11 +837,11 @@ namespace Tizen.NUI.Components
                         Disabled = new Color("#CACACA"),
                         Selected = new Color("#FF6200"),
                     },
+                    FontSizeScale = FontSizeScale.UseSystemSetting,
                     ThemeChangeSensitive = false
                 },
                 Icon = new ImageViewStyle()
                 {
-                    Size = new Size(32, 32),
                     Color = new Selector<Color>()
                     {
                         Normal = new Color("#090E21"),