Button: Tizen 3.0 GUI implementation

svg image applied with color_class definitions

//rect
"elm/button/base/default"
"elm/button/base/datetime/ampm"
"elm/button/base/bottom"
"elm/button/base/popup"

//circle
"elm/button/base/circle"

//VI rect
"elm/button/base/naviframe/title_left"
"elm/button/base/naviframe/title_right"
"elm/button/base/naviframe/back_btn/default"

//VI circle
"elm/button/base/floatingbutton/default"
"elm/button/base/floatingbutton/white_bg"
"elm/button/base/editfield_clear"
"elm/button/base/icon_reorder"
"elm/button/base/icon_expand_add"
"elm/button/base/icon_expand_delete"
"calendar/decrease/default"
"calendar/increase/default"

Change-Id: I8eb0eec5f27a975192f95756042639620425065a

1 files changed, 1625 insertions, 2505 deletions

diff --git a/mobile/widgets/button.edc b/mobile/widgets/button.edc
index 91ef5af1..272574bf 100644
--- a/mobile/widgets/button.edc
+++ b/mobile/widgets/button.edc
@@ -24,153 +24,369 @@
  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-   group { name: "elm/button/base/default";
-      data.item: "vector_ux" "default";
-      data.item: "corner_radius" BUTTON_CORNER_RADIUS_INC;
-      script {
-         public mouse_down = 0;
-         public multi_down = 0;
-         public disabled = 0;
-         public text = 0;
-         public content = 0;
-         public animate = 0;
-         public selected = 0;
-         public minw = 0;
-         public minh = 0;
-         public get_effect_min_size(base_effect, Float:ratio, min_w, min_h) {
-            new x, y, w, h;
-            get_geometry(base_effect, x, y, w, h);
-            if (w > h) {
-               set_float(min_w, (w - h * (1 - ratio)) / w);
-               set_float(min_h, ratio);
-            } else {
-               set_float(min_w, ratio);
-               set_float(min_h, (h - w * (1 - ratio)) / h);
+   group { "elm/button/event/default";
+      inherit_only: 1;
+      parts {
+         rect { "event";
+            mouse;
+            desc { "default";
+               color: 0 0 0 0;
+               rel.to: "base";
+            }
+            desc { "disabled";
+               inherit: "default";
+               hid;
+            }
+         }
+      }
+      programs {
+         /* Program for pressed event */
+         program { "pressed";
+            signal: "mouse,down,1*";
+            source: "event";
+            action: SIGNAL_EMIT "elm,action,press" "";
+            after: "on_pressed";
+         }
+         /* Program for unpressed event */
+         program { "unpressed";
+             signal: "mouse,up,1*";
+             source: "event";
+             action: SIGNAL_EMIT "elm,action,unpress" "";
+             after: "on_unpressed";
+         }
+         /* Program for clicked event */
+         program { "clicked";
+             signal: "mouse,clicked,1";
+             source: "event";
+             action: SIGNAL_EMIT "elm,action,click" "";
+             after: "on_clicked";
+         }
+         /* Program for enabled event */
+         program { "enabled";
+             signal: "elm,state,enabled";
+             source: "elm";
+             action: STATE_SET "default";
+             target: "event";
+             after: "on_enabled";
+         }
+         /* Program for disabled event */
+         program { "disabled";
+            signal: "elm,state,disabled";
+            source: "elm";
+            action: STATE_SET "disabled";
+            target: "event";
+            after: "on_disabled";
+         }
+         program { "enable_event_pass";
+            signal: "elm,event,pass,enabled";
+            source: "elm";
+            script {
+               set_mouse_events(PART:"event", 0);
+            }
+         }
+         program { "disable_event_pass";
+            signal: "elm,event,pass,disabled";
+            source:"elm";
+               script {
+                  set_mouse_events(PART:"event", 1);
+            }
+         }
+         program { "enable_event_repeat";
+            signal: "elm,event,repeat,enabled";
+            source: "elm";
+            script {
+               set_repeat_events(PART:"event", 1);
+            }
+         }
+         program { "disable_event_repeat";
+            signal: "elm,event,repeat,disabled";
+            source:"elm";
+            script {
+               set_repeat_events(PART:"event", 0);
             }
          }
       }
+   }
+
+   group { "elm/button/base/template";
+      inherit_only: 1;
+      nomouse;                // only event part can have mouse events.
+//    images {
+//       image: "bg.png" COMP; // Background image for bg and event masking.
+//    }
       parts {
-         part { name: "base";
-            scale: 1;
-            type: SPACER;
-            description { state: "default" 0.0;
+         /* Base part for button */
+         spacer { "base";
+            desc { "default";
+            }
+         }
+         image { "bg";
+            desc { "default";
+               rel.to: "base";
+//             image.normal: "bg.png";
+            }
+         }
+         /* Default swallow part */
+         swallow { "elm.swallow.content";
+            desc { "default";
+               rel.to: "base";
+            }
+         }
+         /* Default text part */
+         text { "elm.text";
+            desc { "default";
+               rel.to: "base";
+            }
+         }
+      }
+      inherit: "elm/button/event/default";
+      programs {
+         /* Program for pressed effect */
+         program { "on_pressed";
+         }
+         /* Program for unpressed effect */
+         program { "on_unpressed";
+         }
+         /* Program for clicked effect */
+         program { "on_clicked";
+         }
+         /* Program for disabled effect */
+         program { "on_disabled";
+         }
+         /* Program for enabled effect */
+         program { "on_enabled";
+         }
+      }
+   }
+   #define BUTTON_VECTOR_PART(min_size, ratio, vector_base, clipper_vector_base, left_top, right_top, mid, left_bottom, right_bottom) \
+         vector { "bg_effect_top_left"; \
+            clip: clipper_vector_base; \
+            desc { "default"; \
+               align: 0.0 0.0; \
+               max: (min_size)*ratio (min_size)*ratio; \
+               rel1.to: vector_base; \
+               rel2.to: vector_base; \
+               rel1.relative: 0.0 0.0; \
+               rel2.relative: 1.0 1.0; \
+               image.normal: left_top; \
+            } \
+            desc { "ready"; \
+               inherit: "default"; \
+               min: (min_size)-1 (min_size)-1; \
+            } \
+            desc { "pressed"; \
+               inherit: "ready"; \
+            } \
+         } \
+         vector { "bg_effect_top_right"; \
+            clip: clipper_vector_base; \
+            desc { "default"; \
+               align: 1.0 0.0; \
+               max: (min_size)*ratio (min_size)*ratio; \
+               rel1.to: vector_base; \
+               rel2.to: vector_base; \
+               rel1.relative: 0.0 0.0; \
+               rel2.relative: 1.0 1.0; \
+               image.normal: right_top; \
+            } \
+            desc { "ready"; \
+               inherit: "default"; \
+               min: (min_size)-1 (min_size)-1; \
+            } \
+            desc { "pressed"; \
+               inherit: "ready"; \
+            } \
+         } \
+         vector { "bg_effect_top_mid"; \
+            clip: clipper_vector_base; \
+            desc { "default"; \
+               rel1.to: "bg_effect_top_left"; \
+               rel1.relative: 1.0 0.0; \
+               rel2.to: "bg_effect_top_right"; \
+               rel2.relative: 0.0 1.0; \
+               image.normal: mid; \
+            } \
+            desc { "ready"; \
+               inherit: "default"; \
+            } \
+            desc { "pressed"; \
+               inherit: "ready"; \
+            } \
+         } \
+         vector { "bg_effect_mid"; \
+            clip: clipper_vector_base; \
+            desc { "default"; \
+               rel1.to: "bg_effect_top_left"; \
+               rel1.relative: 0.0 1.0; \
+               rel2.to: "bg_effect_bottom_right"; \
+               rel2.relative: 1.0 0.0; \
+               image.normal: mid; \
+            } \
+            desc { "ready"; \
+               inherit: "default"; \
+            } \
+            desc { "pressed"; \
+               inherit: "ready"; \
+            } \
+         } \
+         vector { "bg_effect_bottom_left"; \
+            clip: clipper_vector_base; \
+            desc { "default"; \
+               align: 0.0 1.0; \
+               max: (min_size)*ratio (min_size)*ratio; \
+               rel1.to: vector_base; \
+               rel2.to: vector_base; \
+               rel1.relative: 0.0 0.0; \
+               rel2.relative: 1.0 1.0; \
+               image.normal: left_bottom; \
+            } \
+            desc { "ready"; \
+               inherit: "default"; \
+               min: (min_size)-1 (min_size)-1; \
+            } \
+            desc { "pressed"; \
+               inherit: "ready"; \
+            } \
+         } \
+         vector { "bg_effect_bottom_right"; \
+            clip: clipper_vector_base; \
+            desc { "default"; \
+               align: 1.0 1.0; \
+               max: (min_size)*ratio (min_size)*ratio; \
+               rel1.to: vector_base; \
+               rel2.to: vector_base; \
+               rel1.relative: 0.0 0.0; \
+               rel2.relative: 1.0 1.0; \
+               image.normal: right_bottom; \
+            } \
+            desc { "ready"; \
+               inherit: "default"; \
+               min: (min_size)-1 (min_size)-1; \
+            } \
+            desc { "pressed"; \
+               inherit: "ready"; \
+            } \
+         } \
+         vector { "bg_effect_bottom_mid"; \
+            clip: clipper_vector_base; \
+            desc { "default"; \
+               rel1.to: "bg_effect_bottom_left"; \
+               rel1.relative: 1.0 0.0; \
+               rel2.to: "bg_effect_bottom_right"; \
+               rel2.relative: 0.0 1.0; \
+               image.normal: mid; \
+            } \
+            desc { "ready"; \
+               inherit: "default"; \
+            } \
+            desc { "pressed"; \
+               inherit: "ready"; \
+            } \
+         }
+
+   group { "elm/button/base/default";
+      images {
+         image: "core_list_button_bg.#.png" COMP;
+      }
+      parts {
+         spacer { "base";
+            scale;
+            desc { "default";
                min: BUTTON_MIN_WIDTH_INC BUTTON_MIN_HEIGHT_INC;
             }
          }
          //Base Shape Part
-         part { name: "tizen_vg_shape";
-            type: SWALLOW;
-            clip_to: "tizen_vg_shape_clipper";
-            scale: 1;
-            description { state: "default" 0.0;
+         image { "bg";
+            clip: "clipper_bg";
+            scale;
+            desc { "default";
                min: 0 BUTTON_MIN_HEIGHT_INC;
-               rel1.relative: 0 0.0;
-               rel2.relative: 1 1.0;
+               rel.to: "base";
+               image.normal: "core_list_button_bg.#.png";
             }
          }
-         part { name: "tizen_vg_shape_clipper";
-            type: RECT;
-            scale: 1;
-            description { state: "default" 0.0;
-               color_class: "elm/widget/button/default/bg-default";
+         rect { "clipper_bg";
+            scale;
+            desc { "default";
+               color_class: "button/default/bg-normal";
             }
-            description { state: "disabled" 0.0;
-               color_class: "elm/widget/button/default/bg-disabled";
+            desc { "pressed";
+               color_class: "button/default/bg-pressed";
             }
-         }
-         part { name: "effect_spacer";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
+            desc { "disabled";
+               color_class: "button/default/bg-disabled";
             }
          }
          //Effect Shape Part
-         part { name: "tizen_vg_shape2";
-            type: SWALLOW;
-            clip_to: "tizen_vg_shape_clipper2";
-            scale: 1;
-            description { state: "default" 0.0;
-               fixed: 1 1;
-               rel1.relative: 0.5 0.5;
-               rel2.relative: 0.5 0.5;
-            }
-            description { state: "ready" 0.0;
-               rel1.to: "effect_spacer";
-               rel2.to: "effect_spacer";
-            }
-            description { state: "pressed" 0.0;
-               inherit: "ready" 0.0;
+         image { "bg_effect";
+            clip: "clipper_bg_effect";
+            scale;
+            desc { "default";
+               min: 0 BUTTON_MIN_HEIGHT_INC;
+               rel.to: "base";
+               image.normal: "core_list_button_bg.#.png";
             }
          }
-         part { name: "tizen_vg_shape_clipper2";
-            type: RECT;
-            description { state: "default" 0.0;
-               visible: 0;
-               color: 0 0 0 0;
+         rect { "clipper_bg_effect";
+            desc { "default";
+               color_class: "button/default/effect-normal";
             }
-            description { state: "ready" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
+            desc { "pressed";
+               color_class: "button/default/effect-pressed";
             }
-            description { state: "pressed" 0.0;
-               color: 0 0 0 77;
+            desc { "disabled";
+               color_class: "button/default/effect-disabled";
             }
          }
-         part { name: "padding_left_top";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
+         spacer { "padding_top_left";
+            scale;
+            desc { "default";
+               rel.to: "base";
                align: 0.0 0.0;
                rel2.relative: 0.0 0.0;
                min: BUTTON_PADDING_LEFT_RIGHT_INC BUTTON_PADDING_TOP_HEIGHT_INC;
                fixed: 1 1;
             }
          }
-         part { name: "padding_right_bottom";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
+         spacer { "padding_bottom_right";
+            scale;
+            desc { "default";
+               rel.to: "base";
                align: 1.0 1.0;
                rel1.relative: 1.0 1.0;
                min: BUTTON_PADDING_LEFT_RIGHT_INC BUTTON_PADDING_BOTTOM_HEIGHT_INC;
                fixed: 1 1;
             }
          }
-         part { name: "icon_rect";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
+         spacer { "icon_rect";
+            scale;
+            desc { "default";
                align: 0.0 0.5;
                rel1 {
                   relative: 1.0 1.0;
-                  to: "padding_left_top";
+                  to: "padding_top_left";
                }
                rel2 {
                   relative: 1.0 0.0;
-                  to_x: "padding_left_top";
-                  to_y: "padding_right_bottom";
+                  to_x: "padding_top_left";
+                  to_y: "padding_bottom_right";
                }
                min: 0 BUTTON_ICON_DEFAULT_HEIGHT_INC;
                fixed: 1 1;
             }
-            description { state: "visible" 0.0;
-               inherit: "default" 0.0;
+            desc { "visible";
+               inherit: "default";
                min: BUTTON_ICON_DEFAULT_WIDTH_INC BUTTON_ICON_DEFAULT_HEIGHT_INC;
                max: BUTTON_ICON_DEFAULT_WIDTH_INC BUTTON_ICON_DEFAULT_HEIGHT_INC;
                fixed: 1 1;
             }
-            description { state: "icon_only" 0.0;
-               inherit: "default" 0.0;
+            desc { "icon_only";
+               inherit: "default";
             }
          }
-         part { name: "icon_text_padding";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
+         spacer { "icon_text_padding";
+            scale;
+            desc { "default";
                align: 1.0 0.5;
                min: 0 0;
                rel1 {
@@ -183,227 +399,217 @@
                }
                fixed: 1 1;
             }
-            description { state: "visible" 0.0;
-               inherit: "default" 0.0;
+            desc { "visible";
+               inherit: "default";
                min: BUTTON_PADDING_ICON_RIGHT_INC 0;
             }
          }
-         part { name: "elm.swallow.content";
-            type: SWALLOW;
-            scale: 1;
-            clip_to: "clipper";
-            description { state: "default" 0.0;
+         swallow { "elm.swallow.content";
+            scale;
+            clip: "clipper_elm.swallow.content";
+            desc { "default";
                align: 0.0 1.0;
                rel1 {
                   relative: 1.0 1.0;
-                  to: "padding_left_top";
+                  to: "padding_top_left";
                }
                rel2 {
                   relative: 1.0 1.0;
-                  to_x: "padding_left_top";
-                  to_y: "padding_right_bottom";
+                  to_x: "padding_top_left";
+                  to_y: "padding_bottom_right";
                }
                min: 0 BUTTON_ICON_DEFAULT_HEIGHT_INC;
                fixed: 1 0;
             }
-            description { state: "visible" 0.0;
-               inherit: "default" 0.0;
+            desc { "visible";
+               inherit: "default";
                align: 1.0 0.5;
                rel1 {
                   relative: 0.0 1.0;
                   to_x: "icon_text_padding";
-                  to_y: "padding_left_top";
+                  to_y: "padding_top_left";
                }
                rel2 {
                   relative: 0.0 0.0;
                   to_x: "icon_text_padding";
-                  to_y: "padding_right_bottom";
+                  to_y: "padding_bottom_right";
                }
                min: BUTTON_ICON_DEFAULT_WIDTH_INC BUTTON_ICON_DEFAULT_HEIGHT_INC;
                fixed: 1 1;
             }
-            description { state: "icon_only" 0.0;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
+            desc { "icon_only";
+               rel.to: "bg";
                min: BUTTON_ICON_DEFAULT_WIDTH_INC BUTTON_ICON_DEFAULT_HEIGHT_INC;
                max: BUTTON_ICON_DEFAULT_WIDTH_INC BUTTON_ICON_DEFAULT_HEIGHT_INC;
                align: 0.5 0.5;
                fixed: 1 1;
             }
          }
-         part { name: "elm.text";
-            type: TEXTBLOCK;
+         textblock { name: "elm.text";
             mouse_events: 0;
-            scale: 1;
-            description { state: "default" 0.0;
+            scale;
+            desc { "default";
                fixed: 1 1;
                rel1 {
                   relative: 1.0 1.0;
                   to_x: "icon_rect";
-                  to_y: "padding_left_top";
+                  to_y: "padding_top_left";
                }
                rel2 {
                   relative: 0.0 0.0;
-                  to: "padding_right_bottom";
+                  to: "padding_bottom_right";
                }
                text {
                   style: "button_main";
                   max: 1 0;
                }
-               color_class: "elm/widget/button/default/label-default";
             }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
+            desc { "pressed";
+               inherit: "default";
                text.style: "button_main_press";
-               color_class: "elm/widget/button/default/label-pressed";
             }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
+            desc { "disabled";
+               inherit: "default";
                text.style: "button_main_dim";
-               color_class: "elm/widget/button/default/label-disabled";
             }
          }
-         part { name: "clipper";
-            type: RECT;
-            description { state: "default" 0.0;
+         rect { "clipper_elm.swallow.content";
+            desc { "default";
+               color_class: "button/default/icon-normal";
             }
-            description { state: "pressed" 0.0;
+            desc { "pressed";
+               color_class: "button/default/icon-pressed";
             }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
-               color: 255 255 255 163;
-            }
-         }
-         part { name: "event";
-            type: RECT;
-            description { state: "default" 0.0;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
-               color: 0 0 0 0;
+            desc { "disabled";
+               color_class: "button/default/icon-disabled";
             }
          }
       }
+      inherit: "elm/button/event/default";
+      script {
+         public mouse_down = 0;
+         public multi_down = 0;
+         public disabled = 0;
+         public text = 0;
+         public content = 0;
+         public animate = 0;
+         public selected = 0;
+         public minw = 0;
+         public minh = 0;
+      }
+      program_remove: "unpressed";
+      program_remove: "clicked";
       programs {
-         program { name: "pressed_effect";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape_clipper2";
-            action: STATE_SET "custom" 0.0;
-            target: "tizen_vg_shape2";
-            after: "pressed_effect2";
+         program { "on_pressed";
+            script {
+               if ((get_int(multi_down) == 0) && (get_int(mouse_down) == 0) && (get_int(disabled) == 0)) {
+                  stop_program(PROGRAM:"delay_unpressed_effect");
+                  set_int(mouse_down, 1);
+                  run_program(PROGRAM:"pressed_effect");
+               }
+            }
          }
-         program { name: "pressed_effect2";
-            action: STATE_SET "pressed" 0.0;
-            target: "elm.text";
-            target: "clipper";
-            target: "tizen_vg_shape2";
-            target: "tizen_vg_shape_clipper2";
-            transition: GLIDE_EASE_OUT(0.15);
-            after: "pressed_effect3";
+         program { "unpressed";
+            signal: "mouse,up,1";
+            source: "event";
+            script {
+               if (get_int(mouse_down) == 1) {
+                  set_int(mouse_down, 0);
+                  if (get_int(animate) == 0) {
+                     emit("elm,action,unpress", "");
+                     run_program(PROGRAM:"unpressed_effect");
+                  } else {
+                     set_state(PART:"elm.text", "pressed", 0.0);
+                     set_state(PART:"clipper_elm.swallow.content", "pressed", 0.0);
+                     set_state(PART:"bg_effect", "pressed", 0.0);
+                     set_state(PART:"clipper_bg_effect", "pressed", 0.0);
+                     set_int(animate, 0);
+                     run_program(PROGRAM:"delay_unpressed_effect");
+                  }
+               }
+            }
+         }
+         program { "on_enabled";
+            script {
+               set_int(disabled, 0);
+               set_state(PART:"clipper_elm.swallow.content", "default", 0.0);
+               set_state(PART:"clipper_bg", "default", 0.0);
+               set_state(PART:"elm.text", "default", 0.0);
+            }
          }
-         program { name: "pressed_effect3";
+         program { "on_disabled";
             script {
+               set_int(disabled, 1);
+               if (get_int(animate) == 1) return;
+               set_state(PART:"clipper_elm.swallow.content", "disabled", 0.0);
+               set_state(PART:"clipper_bg", "disabled", 0.0);
+               set_state(PART:"elm.text", "disabled", 0.0);
+            }
+         }
+         program { "pressed_effect";
+            script {
+               set_state(PART:"elm.text", "pressed", 0.0);
+               set_state(PART:"clipper_elm.swallow.content", "pressed", 0.0);
+               set_state(PART:"bg_effect", "pressed", 0.0);
+               set_state(PART:"clipper_bg", "pressed", 0.0);
+               set_state(PART:"clipper_bg_effect", "pressed", 0.0);
                set_int(animate, 0);
             }
          }
-         program { name: "delay_unpressed_effect";
+         program { "delay_unpressed_effect";
             in: 0.1 0.0;
             after: "unpressed_effect";
          }
-         program { name: "unpressed_effect";
+         program { "unpressed_effect";
             script {
                if (get_int(disabled) == 0) {
-                 run_program(PROGRAM:"unpressed_effect2");
-                 run_program(PROGRAM:"unpressed_effect3");
+                 run_program(PROGRAM:"unpressed_effect_bg_effect");
+                 run_program(PROGRAM:"unpressed_effect_text");
                } else {
-                 run_program(PROGRAM:"disabled_effect");
-                 run_program(PROGRAM:"disabled_effect2");
-                 run_program(PROGRAM:"disabled_effect3");
+                 run_program(PROGRAM:"disabled_unpress_effect_bg_effect");
+                 run_program(PROGRAM:"disabled_unpress_effect_text");
+                 run_program(PROGRAM:"disabled_unpress_effect_icon");
                }
             }
          }
-         program { name: "unpressed_effect2";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape2";
-            target: "tizen_vg_shape_clipper2";
+         program { "unpressed_effect_bg_effect";
+            action: STATE_SET "default";
+            targets: "bg_effect" "clipper_bg_effect";
             transition: GLIDE_EASE_OUT(0.45);
          }
-         program { name: "unpressed_effect3";
-            action: STATE_SET "default" 0.0;
+         program { "unpressed_effect_text";
+            action: STATE_SET "default";
             target: "elm.text";
             transition: GLIDE_EASE_OUT(0.45);
-            after: "unpressed_effect4";
+            after: "unpressed_effect_icon";
          }
-         program { name: "unpressed_effect4";
-            action: STATE_SET "default" 0.0;
-            target: "clipper";
+         program { "unpressed_effect_icon";
+            action: STATE_SET "default";
+            target: "clipper_elm.swallow.content";
             after: "finished_animation";
          }
-         program { name: "disabled_effect";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape2";
-            target: "tizen_vg_shape_clipper2";
+         program { "disabled_unpress_effect_bg_effect";
+            action: STATE_SET "default";
+            targets: "bg_effect" "clipper_bg_effect";
             transition: GLIDE_EASE_OUT(0.45);
          }
-         program { name: "disabled_effect2";
-            action: STATE_SET "disabled" 0.0;
+         program { "disabled_unpress_effect_text";
+            action: STATE_SET "disabled";
             target: "elm.text";
             transition: GLIDE_EASE_OUT(0.45);
          }
-         program { name: "disabled_effect3";
-            action: STATE_SET "disabled" 0.0;
-            target: "clipper";
-            target: "tizen_vg_shape_clipper";
+         program { "disabled_unpress_effect_icon";
+            action: STATE_SET "disabled";
+            target: "clipper_elm.swallow.content";
+            target: "clipper_bg";
             transition: GLIDE_EASE_OUT(0.45);
             after: "finished_animation";
          }
-         program { name: "finished_animation";
-            action: STATE_SET "default" 0.0;
-            target: "tizen_vg_shape2";
-            target: "tizen_vg_shape_clipper2";
+         program { "finished_animation";
+            action: STATE_SET "default";
+            targets: "bg_effect" "clipper_bg_effect";
          }
-         program { name: "pressed";
-            signal: "mouse,down,1*";
-            source: "event";
-            script {
-               if ((get_int(multi_down) == 0) && (get_int(mouse_down) == 0) && (get_int(disabled) == 0)) {
-                  new Float:rel_w, Float:rel_h;
-                  stop_program(PROGRAM:"delay_unpressed_effect");
-                  set_int(mouse_down, 1);
-                  set_int(animate, 1);
-                  custom_state(PART:"tizen_vg_shape2", "default", 0.0);
-                  get_effect_min_size(PART:"effect_spacer", 0.7, minw, minh);
-                  rel_w = (1 - get_float(minw)) / 2;
-                  rel_h = (1 - get_float(minh)) / 2;
-                  set_state_val(PART:"tizen_vg_shape2", STATE_REL1, rel_w, rel_h);
-                  set_state_val(PART:"tizen_vg_shape2", STATE_REL2, 1 - rel_w, 1 - rel_h);
-                  emit("elm,action,press", "");
-                  run_program(PROGRAM:"pressed_effect");
-               }
-            }
-         }
-         program { name: "unpressed";
-            signal: "mouse,up,1";
-            source: "event";
-            script {
-               if (get_int(mouse_down) == 1) {
-                  set_int(mouse_down, 0);
-                  if (get_int(disabled) == 0) {
-                     if (get_int(animate) == 0) {
-                        run_program(PROGRAM:"unpressed_effect");
-                     } else {
-                        set_state(PART:"elm.text", "pressed", 0.0);
-                        set_state(PART:"clipper", "pressed", 0.0);
-                        set_state(PART:"tizen_vg_shape2", "pressed", 0.0);
-                        set_state(PART:"tizen_vg_shape_clipper2", "pressed", 0.0);
-                        set_int(animate, 0);
-                        run_program(PROGRAM:"delay_unpressed_effect");
-                     }
-                     emit("elm,action,unpress", "");
-                  }
-               }
-            }
-         }
-         program { name: "touch_snd";
+         program { "clicked";
             signal: "mouse,clicked,1";
             source: "event";
             script {
@@ -415,14 +621,14 @@
                }
             }
          }
-         program { name: "touch_sound";
+         program { "touch_sound";
             action: RUN_PLUGIN "touch_sound";
          }
-         program { name: "clicked_signal";
+         program { "clicked_signal";
             in: 0.001 0.0;
             action: SIGNAL_EMIT "elm,action,click" "";
          }
-         program { name: "icon_show";
+         program { "icon_show";
             signal: "elm,state,icon,visible";
             source: "elm";
             script {
@@ -434,11 +640,11 @@
                } else {
                   set_state(PART:"icon_rect", "icon_only", 0.0);
                   set_state(PART:"elm.swallow.content", "icon_only", 0.0);
-                  set_state(PART:"padding_left_top", "icon_only", 0.0);
+                  set_state(PART:"padding_top_left", "icon_only", 0.0);
                }
             }
          }
-         program { name: "icon_hide";
+         program { "icon_hide";
             signal: "elm,state,icon,hidden";
             source: "elm";
             script {
@@ -448,7 +654,7 @@
                set_state(PART:"elm.swallow.content", "default", 0.0);
             }
          }
-         program { name: "text_show";
+         program { "text_show";
             signal: "elm,state,text,visible";
             source: "elm";
             script {
@@ -459,7 +665,7 @@
                }
             }
          }
-         program { name: "text_hide";
+         program { "text_hide";
             signal: "elm,state,text,hidden";
             source: "elm";
             script {
@@ -470,188 +676,119 @@
                }
             }
          }
-         program { name: "disable";
-            signal: "elm,state,disabled";
-            source: "elm";
-            script {
-               set_int(disabled, 1);
-               if (get_int(animate) == 1) return;
-               set_state(PART:"clipper", "disabled", 0.0);
-               set_state(PART:"tizen_vg_shape_clipper", "disabled", 0.0);
-               set_state(PART:"elm.text", "disabled", 0.0);
-            }
-         }
-         program { name: "enable";
-            signal: "elm,state,enabled";
-            source: "elm";
-            script {
-               set_int(disabled, 0);
-               set_state(PART:"clipper", "default", 0.0);
-               set_state(PART:"tizen_vg_shape_clipper", "default", 0.0);
-               set_state(PART:"elm.text", "default", 0.0);
-            }
-         }
-         program { name: "multi_down";
+         program { "multi_down";
             signal: "elm,action,multi,down";
             source: "elm";
             script {
                set_int(multi_down, 1);
             }
          }
-         program { name: "multi_up";
+         program { "multi_up";
             signal: "elm,action,multi,up";
             source: "elm";
             script {
                set_int(multi_down, 0);
             }
          }
-         program { name: "pass_event_enable";
-            signal: "elm,event,pass,enabled";
-            source: "elm";
-            script {
-               set_mouse_events(PART:"event", 0);
-            }
-         }
-         program { name: "pass_event_disable";
-            signal: "elm,event,pass,disabled";
-            source:"elm";
-            script {
-               set_mouse_events(PART:"event", 1);
-            }
-         }
-         program { name: "repeat_event_enable";
-            signal: "elm,event,repeat,enabled";
-            source: "elm";
-            script {
-               set_repeat_events(PART:"event", 1);
-            }
-         }
-         program { name: "repeat_event_disable";
-            signal: "elm,event,repeat,disabled";
-            source:"elm";
-            script {
-               set_repeat_events(PART:"event", 0);
-            }
-         }
       }
    }
 
-   group { name: "elm/button/base/circle";
-      data.item: "vector_ux" "circle";
-      script {
-         public mouse_down = 0;
-         public multi_down = 0;
-         public disabled = 0;
-         public animate = 0;
+   group { "elm/button/base/circle";
+      images {
+         vector: "core_icon_container.svg";
       }
       parts {
-         part { name: "base";
-            scale: 1;
-            type: SPACER;
-            description { state: "default" 0.0;
+         spacer { "base";
+            scale;
+            desc { "default";
                min: BUTTON_CIRCLE_BASE_SIZE_INC;
             }
-            description { state: "extended" 0.0;
+            desc { "extended";
                min: BUTTON_CIRCLE_EXTENDED_SIZE_INC;
             }
          }
          //Base Shape Part
-         part { name: "tizen_vg_shape";
-            type: SWALLOW;
-            clip_to: "tizen_vg_shape_clipper";
-            scale: 1;
-            description { state: "default" 0.0;
+         vector { "bg";
+            clip: "clipper_bg";
+            scale;
+            desc { "default";
                min: BUTTON_CIRCLE_SIZE_INC;
                rel1.relative: 0.5 0;
                rel2.relative: 0.5 0;
                align: 0.5 0;
                fixed: 1 1;
+               image.normal: "core_icon_container.svg";
             }
          }
-         part { name: "tizen_vg_shape_clipper";
-            type: RECT;
-            description { state: "default" 0.0;
-               color: 82 198 216 255;
+         rect { "clipper_bg";
+            desc { "default";
+               color_class: "button/circle/bg-normal";
             }
-            description { state: "disabled" 0.0;
-               color: 147 208 217 255;
+            desc { "pressed";
+               color_class: "button/circle/bg-pressed";
+            }
+            desc { "disabled";
+               color_class: "button/circle/bg-disabled";
             }
          }
-         part { name: "effect_spacer";
-            type: SPACER;
-            description { state: "default" 0.0;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
+         spacer { "effect_spacer";
+            desc { "default";
+               rel.to: "bg";
             }
          }
          //Effect Shape Part
-         part { name: "tizen_vg_shape2";
-            type: SWALLOW;
-            clip_to: "tizen_vg_shape_clipper2";
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to: "effect_spacer";
-               rel2.to: "effect_spacer";
-               rel1.relative: 0.15 0.15;
-               rel2.relative: 0.85 0.85;
+         vector { "bg_effect";
+            clip: "clipper_bg_effect";
+            scale;
+            desc { "default";
+               rel.to: "effect_spacer";
+               image.normal: "core_icon_container.svg";
             }
-            description { state: "ready" 0.0;
-               inherit: "default" 0.0;
-            }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
-               rel1.relative: 0.0 0.0;
-               rel2.relative: 1.0 1.0;
+            desc { "pressed";
+               inherit: "default";
             }
          }
-         part { name: "tizen_vg_shape_clipper2";
-            type: RECT;
-            description { state: "default" 0.0;
-               visible: 0;
-               color: 0 0 0 0;
+         rect { "clipper_bg_effect";
+            desc { "default";
+               color_class: "button/circle/effect-normal";
             }
-            description { state: "ready" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
+            desc { "pressed";
+               color_class: "button/circle/effect-pressed";
             }
-            description { state: "pressed" 0.0;
-               color: 0 0 0 77;
+            desc { "disabled";
+               color_class: "button/circle/effect-disabled";
             }
          }
-         part { name: "elm.swallow.content";
-            type: SWALLOW;
-            scale: 1;
-            clip_to: "clipper";
-            description { state: "default" 0.0;
+         swallow { "elm.swallow.content";
+            scale;
+            clip: "clipper_elm.swallow.content";
+            desc { "default";
                min: BUTTON_CIRCLE_ICON_SIZE_INC;
                fixed: 1 1;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
+               rel.to: "bg";
                rel1.relative: 0.5 0.5;
                rel2.relative: 0.5 0.5;
             }
          }
-         part { name: "icon_text_padding";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to_y: "tizen_vg_shape";
-               rel2.to_y: "tizen_vg_shape";
+         spacer { "icon_text_padding";
+            scale;
+            desc { "default";
+               rel1.to_y: "bg";
+               rel2.to_y: "bg";
                rel1.relative: 0.0 1.0;
                rel2.relative: 1.0 1.0;
                align: 0.5 0.0;
                min: 0 0;
                fixed: 1 1;
             }
-            description { state: "visible" 0.0;
-               inherit: "default" 0.0;
+            desc { "visible";
+               inherit: "default";
                min: 0 BUTTON_CIRCLE_PADDING_ICON_BOTTOM_INC;
             }
          }
-         part { name: "text_left_padding";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
+         spacer { "text_left_padding";
+            scale;
+            desc { "default";
                min: BUTTON_CIRCLE_PADDING_TEXT_LEFT_RIGHT_INC 0;
                rel1 {
                   relative: 0.0 1.0;
@@ -662,10 +799,9 @@
                fixed: 1 0;
             }
          }
-         part { name: "text_right_padding";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
+         spacer { "text_right_padding";
+            scale;
+            desc { "default";
                min: BUTTON_CIRCLE_PADDING_TEXT_LEFT_RIGHT_INC 0;
                rel1 {
                   relative: 1.0 1.0;
@@ -675,11 +811,10 @@
                fixed: 1 0;
             }
          }
-         part { name: "elm.text";
-            type: TEXTBLOCK;
+         textblock { "elm.text";
             mouse_events: 0;
-            scale: 1;
-            description { state: "default" 0.0;
+            scale;
+            desc { "default";
                rel1 {
                   relative: 1.0 0.0;
                   to: "text_left_padding";
@@ -695,149 +830,147 @@
                }
                align: 0.5 0;
                min: 0 0;
-               color: 0 0 0 222;
             }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
+            desc { "pressed";
+               inherit: "default";
                text.style: "button_circle_press";
-               color: 0 0 0 222;
             }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
+            desc { "disabled";
+               inherit: "default";
                text.style: "button_circle_dim";
-               color: 0 0 0 115;
             }
          }
-         part { name: "clipper";
-            type: RECT;
-            description { state: "default" 0.0;
+         rect { "clipper_elm.swallow.content";
+            desc { "default";
+               color_class: "button/circle/icon-normal";
             }
-            description { state: "pressed" 0.0;
+            desc { "pressed";
+               color_class: "button/circle/icon-pressed";
             }
-            description { state: "disabled" 0.0;
-               color: 255 255 255 127;
-            }
-         }
-         part { name: "event";
-            type: RECT;
-            description { state: "default" 0.0;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "elm.text";
-               color: 0 0 0 0;
+            desc { "disabled";
+               color_class: "button/circle/icon-disabled";
             }
          }
       }
+      inherit: "elm/button/event/default";
+      script {
+         public mouse_down = 0;
+         public multi_down = 0;
+         public disabled = 0;
+         public animate = 0;
+      }
+      program_remove: "unpressed";
+      program_remove: "clicked";
       programs {
-         program { name: "pressed_effect";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape2";
-            target: "tizen_vg_shape_clipper2";
-            after: "pressed_effect2";
+         program { "on_pressed";
+            script {
+               if ((get_int(multi_down) == 0) && (get_int(mouse_down) == 0) && (get_int(disabled) == 0)) {
+                  stop_program(PROGRAM:"delay_unpressed_effect");
+                  set_int(mouse_down, 1);
+                  run_program(PROGRAM:"pressed_effect");
+               }
+            }
          }
-         program { name: "pressed_effect2";
-            action: STATE_SET "pressed" 0.0;
-            target: "tizen_vg_shape2";
-            target: "elm.text";
-            target: "clipper";
-            target: "tizen_vg_shape_clipper2";
-            transition: GLIDE_EASE_OUT(0.15);
+         program { "unpressed";
+            signal: "mouse,up,1";
+            source: "event";
+            script {
+               if (get_int(mouse_down) == 1) {
+               set_int(mouse_down, 0);
+                  if (get_int(animate) == 0) {
+                     emit("elm,action,unpress", "");
+                     run_program(PROGRAM:"unpressed_effect");
+                  } else {
+                     set_state(PART:"elm.text", "pressed", 0.0);
+                     set_state(PART:"clipper_elm.swallow.content", "pressed", 0.0);
+                     set_state(PART:"bg_effect", "pressed", 0.0);
+                     set_state(PART:"clipper_bg_effect", "pressed", 0.0);
+                     set_int(animate, 0);
+                     run_program(PROGRAM:"delay_unpressed_effect");
+                  }
+               }
+            }
+         }
+         program { "on_disabled";
+            script {
+              set_int(disabled, 1);
+              if (get_int(animate) == 1) return;
+              set_state(PART:"clipper_elm.swallow.content", "disabled", 0.0);
+              set_state(PART:"clipper_bg", "disabled", 0.0);
+              set_state(PART:"elm.text", "disabled", 0.0);
+            }
+         }
+         program { "on_enabled";
+            script {
+              set_int(disabled, 0);
+              set_state(PART:"clipper_elm.swallow.content", "default", 0.0);
+              set_state(PART:"clipper_bg", "default", 0.0);
+              set_state(PART:"elm.text", "default", 0.0);
+            }
+         }
+         program { "pressed_effect";
+            action: STATE_SET "pressed";
+            targets: "bg_effect" "elm.text" "clipper_elm.swallow.content" "clipper_bg" "clipper_bg_effect";
             after: "pressed_effect3";
          }
-         program { name: "pressed_effect3";
+         program { "pressed_effect3";
             script {
                set_int(animate, 0);
             }
          }
-         program { name: "delay_unpressed_effect";
+         program { "delay_unpressed_effect";
             in: 0.1 0.0;
             after: "unpressed_effect";
          }
-         program { name: "unpressed_effect";
+         program { "unpressed_effect";
             script {
                if (get_int(disabled) == 0) {
-                 run_program(PROGRAM:"unpressed_effect2");
-                 run_program(PROGRAM:"unpressed_effect3");
+                 run_program(PROGRAM:"unpressed_effect_bg_effect");
+                 run_program(PROGRAM:"unpressed_effect_text");
                } else {
-                 run_program(PROGRAM:"disabled_effect");
-                 run_program(PROGRAM:"disabled_effect2");
-                 run_program(PROGRAM:"disabled_effect3");
+                 run_program(PROGRAM:"disabled_unpress_effect_bg_effect");
+                 run_program(PROGRAM:"disabled_unpress_effect_text");
+                 run_program(PROGRAM:"disabled_unpress_effect_icon");
                }
             }
          }
-         program { name: "unpressed_effect2";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape_clipper2";
+         program { "unpressed_effect_bg_effect";
+            action: STATE_SET "default";
+            targets: "bg_effect" "clipper_bg_effect";
             transition: GLIDE_EASE_OUT(0.45);
          }
-         program { name: "unpressed_effect3";
-            action: STATE_SET "default" 0.0;
+         program { "unpressed_effect_text";
+            action: STATE_SET "default";
             target: "elm.text";
             transition: GLIDE_EASE_OUT(0.45);
-            after: "unpressed_effect4";
+            after: "unpressed_effect_icon";
          }
-         program { name: "unpressed_effect4";
-            action: STATE_SET "default" 0.0;
-            target: "clipper";
+         program { "unpressed_effect_icon";
+            action: STATE_SET "default";
+            target: "clipper_elm.swallow.content";
             after: "finished_animation";
          }
-         program { name: "disabled_effect";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape_clipper2";
+         program { "disabled_unpress_effect_bg_effect";
+            action: STATE_SET "default";
+            targets: "bg_effect" "clipper_bg_effect";
             transition: GLIDE_EASE_OUT(0.45);
          }
-         program { name: "disabled_effect2";
-            action: STATE_SET "disabled" 0.0;
+         program { "disabled_unpress_effect_text";
+            action: STATE_SET "disabled";
             target: "elm.text";
             transition: GLIDE_EASE_OUT(0.45);
          }
-         program { name: "disabled_effect3";
-            action: STATE_SET "disabled" 0.0;
-            target: "clipper";
-            target: "tizen_vg_shape_clipper";
+         program { "disabled_unpress_effect_icon";
+            action: STATE_SET "disabled";
+            targets: "clipper_elm.swallow.content" "clipper_bg";
             transition: GLIDE_EASE_OUT(0.45);
             after: "finished_animation";
          }
-         program { name: "finished_animation";
-            action: STATE_SET "default" 0.0;
-            target: "tizen_vg_shape2";
-            target: "tizen_vg_shape_clipper2";
-         }
-         program { name: "pressed";
-            signal: "mouse,down,1*";
-            source: "event";
-            script {
-               if ((get_int(multi_down) == 0) && (get_int(mouse_down) == 0) && (get_int(disabled) == 0)) {
-                  stop_program(PROGRAM:"delay_unpressed_effect");
-                  set_int(mouse_down, 1);
-                  set_int(animate, 1);
-                  emit("elm,action,press", "");
-                  run_program(PROGRAM:"pressed_effect");
-               }
-            }
+         program { "finished_animation";
+            action: STATE_SET "default";
+            targets: "bg_effect" "clipper_bg_effect";
          }
-         program { name: "unpressed";
-            signal: "mouse,up,1";
-            source: "event";
-            script {
-               if (get_int(mouse_down) == 1) {
-                  set_int(mouse_down, 0);
-                  if (get_int(disabled) == 0) {
-                     if (get_int(animate) == 0) {
-                        emit("elm,action,unpress", "");
-                        run_program(PROGRAM:"unpressed_effect");
-                     } else {
-                        set_state(PART:"elm.text", "pressed", 0.0);
-                        set_state(PART:"clipper", "pressed", 0.0);
-                        set_state(PART:"tizen_vg_shape2", "pressed", 0.0);
-                        set_state(PART:"tizen_vg_shape_clipper2", "pressed", 0.0);
-                        set_int(animate, 0);
-                        run_program(PROGRAM:"delay_unpressed_effect");
-                     }
-                  }
-               }
-            }
-         }
-         program { name: "touch_snd";
+         program { "clicked";
             signal: "mouse,clicked,1";
             source: "event";
             script {
@@ -849,14 +982,14 @@
                }
             }
          }
-         program { name: "touch_sound";
+         program { "touch_sound";
             action: RUN_PLUGIN "touch_sound";
          }
-         program { name: "clicked_signal";
+         program { "clicked_signal";
             in: 0.001 0.0;
             action: SIGNAL_EMIT "elm,action,click" "";
          }
-         program { name: "text_show";
+         program { "text_show";
             signal: "elm,state,text,visible";
             source: "elm";
             script {
@@ -864,7 +997,7 @@
                set_state(PART:"icon_text_padding", "visible", 0.0);
             }
          }
-         program { name: "text_hide";
+         program { "text_hide";
             signal: "elm,state,text,hidden";
             source: "elm";
             script {
@@ -872,245 +1005,149 @@
                set_state(PART:"icon_text_padding", "default", 0.0);
             }
          }
-         program { name: "disable";
-            signal: "elm,state,disabled";
-            source: "elm";
-            script {
-              set_int(disabled, 1);
-              if (get_int(animate) == 1) return;
-              set_state(PART:"clipper", "disabled", 0.0);
-              set_state(PART:"tizen_vg_shape_clipper", "disabled", 0.0);
-              set_state(PART:"elm.text", "disabled", 0.0);
-            }
-         }
-         program { name: "enable";
-            signal: "elm,state,enabled";
-            source: "elm";
-            script {
-              set_int(disabled, 0);
-              set_state(PART:"clipper", "default", 0.0);
-              set_state(PART:"tizen_vg_shape_clipper", "default", 0.0);
-              set_state(PART:"elm.text", "default", 0.0);
-            }
-         }
-         program { name: "multi_down";
+         program { "multi_down";
             signal: "elm,action,multi,down";
             source: "elm";
             script {
                set_int(multi_down, 1);
             }
          }
-         program { name: "multi_up";
+         program { "multi_up";
             signal: "elm,action,multi,up";
             source: "elm";
             script {
                set_int(multi_down, 0);
             }
          }
-         program { name: "pass_event_enable";
-            signal: "elm,event,pass,enabled";
-            source: "elm";
-            script {
-               set_mouse_events(PART:"event", 0);
-            }
-         }
-         program { name: "pass_event_disable";
-            signal: "elm,event,pass,disabled";
-            source:"elm";
-            script {
-               set_mouse_events(PART:"event", 1);
-            }
-         }
-         program { name: "repeat_event_enable";
-            signal: "elm,event,repeat,enabled";
-            source: "elm";
-            script {
-               set_mouse_events(PART:"event", 1);
-            }
-         }
-         program { name: "repeat_event_disable";
-            signal: "elm,event,repeat,disabled";
-            source:"elm";
-            script {
-               set_mouse_events(PART:"event", 0);
-            }
-         }
       }
    }
 
-   group { name: "elm/button/base/floatingbutton/default";
-      data.item: "vector_ux" "no_bg/circle";
-      script {
-         public mouse_down = 0;
-         public multi_down = 0;
-         public disabled = 0;
-         public animate = 0;
-         public rel_x = 0;
-         public rel_y = 0;
-         public get_circumscription_radius(base_effect, radius_w, radius_h) {
-            new x, y, w, h, Float:radius;
-            get_geometry(base_effect, x, y, w, h);
-            radius = sqrt(pow(w, 2) + pow(h, 2));
-            set_float(radius_w, ((radius / w) - 1) / 2);
-            set_float(radius_h, ((radius / h) - 1) / 2);
-         }
+   group { "elm/button/base/floatingbutton/default";
+      images {
+         vector: "core_icon_container.svg";
       }
       parts {
-         part { name: "base";
-            type: SPACER;
-            scale: 1;
-            mouse_events: 0;
-            description { state: "default" 0.0;
+         spacer { "base";
+            scale;
+            nomouse;
+            desc { "default";
                min: BUTTON_ICON_WIDTH_INC BUTTON_ICON_HEIGHT_INC;
                max: BUTTON_ICON_WIDTH_INC BUTTON_ICON_HEIGHT_INC;
             }
          }
-         part { name: "effect_spacer";
-            type: SPACER;
-            description { state: "default" 0.0;
+         //Base Shape Part
+         vector { "bg";
+            clip: "clipper_bg";
+            scale;
+            desc { "default";
+               rel.to: "base";
+               align: 0.5 0;
                fixed: 1 1;
+               image.normal: "core_icon_container.svg";
+            }
+         }
+         rect { "clipper_bg";
+            desc { "default";
+               color_class: "floatingbutton/default/bg-normal";
+            }
+            desc { "pressed";
+               color_class: "floatingbutton/default/bg-pressed";
+            }
+            desc { "disabled";
+               color_class: "floatingbutton/default/bg-disabled";
+            }
+         }
+         spacer { "effect_spacer";
+            desc { "default";
+               rel1.to: "bg";
+               rel2.to: "bg";
             }
          }
          //Effect Shape Part
-         part { name: "tizen_vg_shape";
-            type: SWALLOW;
-            clip_to: "tizen_vg_shape_clipper";
-            scale: 1;
-            description { state: "default" 0.0;
+         vector { "bg_effect";
+            clip: "clipper_bg_effect";
+            scale;
+            desc { "default";
                fixed: 1 1;
                rel1.relative: 0.5 0.5;
                rel2.relative: 0.5 0.5;
+               image.normal: "core_icon_container.svg";
             }
-            description { state: "ready" 0.0;
+            desc { "ready";
                fixed: 1 1;
-               rel1.to: "effect_spacer";
-               rel2.to: "effect_spacer";
+               rel.to: "effect_spacer";
                rel1.relative: 0.15 0.15;
                rel2.relative: 0.85 0.85;
+               image.normal: "core_icon_container.svg";
             }
-            description { state: "pressed" 0.0;
-               inherit: "ready" 0.0;
+            desc { "pressed";
+               inherit: "ready";
                rel1.relative: 0.0 0.0;
                rel2.relative: 1.0 1.0;
             }
          }
-         part { name: "tizen_vg_shape_clipper";
-            type: RECT;
-            description { state: "default" 0.0;
-               color: 0 0 0 0;
-               visible: 0;
+         rect { "clipper_bg_effect";
+            desc { "default";
+               hid;
                fixed: 1 1;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
+               rel.to: "bg_effect";
+               color_class: "floatingbutton/default/effect-normal";
             }
-            description { state: "ready" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
+            desc { "ready";
+               inherit: "default";
+               vis;
             }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
-               color: 0 0 0 77;
+            desc { "pressed";
+               inherit: "default";
+               vis;
+               color_class: "floatingbutton/default/effect-pressed";
             }
          }
-         part { name: "elm.swallow.content";
-            type: SWALLOW;
-            scale: 1;
-            clip_to: "clipper";
-            description { state: "default" 0.0;
+         swallow { "elm.swallow.content";
+            scale;
+            clip: "clipper_elm.swallow.content";
+            desc { "default";
                min: BUTTON_ICON_WIDTH_INC BUTTON_ICON_HEIGHT_INC;
                max: BUTTON_ICON_WIDTH_INC BUTTON_ICON_HEIGHT_INC;
-               rel1.to: "base";
-               rel2.to: "base";
+               rel.to: "base";
                align: 0.5 0.5;
                fixed: 1 1;
             }
          }
-         part { name: "clipper";
-            type: RECT;
-            description { state: "default" 0.0;
+         rect { "clipper_elm.swallow.content";
+            desc { "default";
+               color_class: "floatingbutton/default/icon-normal";
             }
-            description { state: "pressed" 0.0;
+            desc { "pressed";
+               inherit: "default";
+               color_class: "floatingbutton/default/icon-pressed";
             }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
-               color: 250 250 250 163;
+            desc { "disabled";
+               inherit: "default";
+               color_class: "floatingbutton/default/icon-disabled";
             }
          }
-         part { name: "event";
-            type: RECT;
-            description { state: "default" 0.0;
-               rel1.to: "base";
-               rel2.to: "base";
-               color: 0 0 0 0;
-            }
+      }
+      inherit: "elm/button/event/default";
+      script {
+         public mouse_down = 0;
+         public multi_down = 0;
+         public disabled = 0;
+         public animate = 0;
+         public rel_x = 0;
+         public rel_y = 0;
+         public get_circumscription_radius(base_effect, radius_w, radius_h) {
+            new x, y, w, h, Float:radius;
+            get_geometry(base_effect, x, y, w, h);
+            radius = sqrt(pow(w, 2) + pow(h, 2));
+            set_float(radius_w, ((radius / w) - 1) / 2);
+            set_float(radius_h, ((radius / h) - 1) / 2);
          }
       }
+      program_remove: "unpressed";
+      program_remove: "clicked";
       programs {
-         program { name: "pressed_effect";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape_clipper";
-            target: "tizen_vg_shape";
-            after: "pressed_effect2";
-         }
-         program { name: "pressed_effect2";
-            action: STATE_SET "pressed" 0.0;
-            target: "tizen_vg_shape_clipper";
-            target: "tizen_vg_shape";
-            target: "clipper";
-            transition: GLIDE_EASE_OUT(0.15);
-            after: "pressed_effect3";
-         }
-         program { name: "pressed_effect3";
-            script {
-               set_int(animate, 0);
-            }
-         }
-         program { name: "delay_unpressed_effect";
-            in: 0.1 0.0;
-            after: "unpressed_effect";
-         }
-         program { name: "unpressed_effect";
-            script {
-               if (get_int(disabled) == 0) {
-                  run_program(PROGRAM:"unpressed_effect2");
-                  run_program(PROGRAM:"unpressed_effect3");
-               } else {
-                  run_program(PROGRAM:"disabled_effect");
-                  run_program(PROGRAM:"disabled_effect2");
-               }
-            }
-         }
-         program { name: "unpressed_effect2";
-            action: STATE_SET "default" 0.0;
-            target: "clipper";
-            transition: GLIDE_EASE_OUT(0.45);
-         }
-         program { name: "unpressed_effect3";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape_clipper";
-            transition: GLIDE_EASE_OUT(0.45);
-            after: "finished_animation";
-         }
-         program { name: "disabled_effect";
-            action: STATE_SET "disabled" 0.0;
-            target: "clipper";
-            transition: GLIDE_EASE_OUT(0.45);
-         }
-         program { name: "disabled_effect2";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape_clipper";
-            transition: GLIDE_EASE_OUT(0.45);
-            after: "finished_animation";
-         }
-         program { name: "finished_animation";
-            action: STATE_SET "default" 0.0;
-            target: "tizen_vg_shape";
-            target: "tizen_vg_shape_clipper";
-         }
-         program { name: "pressed";
-            signal: "mouse,down,1*";
-            source: "event";
+         program { "on_pressed";
             script {
                if ((get_int(multi_down) == 0) && (get_int(mouse_down) == 0) && (get_int(disabled) == 0)) {
                   stop_program(PROGRAM:"delay_unpressed_effect");
@@ -1122,12 +1159,11 @@
                   set_state(PART:"effect_spacer", "custom", 0.0);
                   set_state_val(PART:"effect_spacer", STATE_REL1, (get_float(rel_x) * -1), (get_float(rel_y) * -1));
                   set_state_val(PART:"effect_spacer", STATE_REL2, (get_float(rel_x) + 1), (get_float(rel_y) + 1));
-                  emit("elm,action,press", "");
                   run_program(PROGRAM:"pressed_effect");
                }
             }
          }
-         program { name: "unpressed";
+         program { "unpressed";
             signal: "mouse,up,1";
             source: "event";
             script {
@@ -1137,8 +1173,8 @@
                      if (get_int(animate) == 0) {
                         run_program(PROGRAM:"unpressed_effect");
                      } else {
-                        set_state(PART:"tizen_vg_shape", "pressed", 0.0);
-                        set_state(PART:"tizen_vg_shape_clipper", "pressed", 0.0);
+                        set_state(PART:"bg_effect", "pressed", 0.0);
+                        set_state(PART:"clipper_bg_effect", "pressed", 0.0);
                         set_int(animate, 0);
                         run_program(PROGRAM:"delay_unpressed_effect");
                      }
@@ -1147,7 +1183,7 @@
                }
             }
          }
-         program { name: "button_click";
+         program { "clicked";
             signal: "mouse,clicked,1";
             source: "event";
             script {
@@ -1159,81 +1195,104 @@
                }
             }
          }
-         program { name: "play_sound";
+         program { "play_sound";
             action: RUN_PLUGIN "touch_sound";
          }
-         program { name: "clicked_signal";
+         program { "clicked_signal";
             in: 0.001 0.0;
             action: SIGNAL_EMIT "elm,action,click" "";
          }
-         program { name: "enable";
-            signal: "elm,state,enabled";
-            source: "elm";
+         program { "on_enabled";
             script {
               set_int(disabled, 0);
-              set_state(PART:"clipper", "default", 0.0);
+              set_state(PART:"clipper_elm.swallow.content", "default", 0.0);
             }
          }
-         program { name: "disable";
-            signal: "elm,state,disabled";
-            source: "elm";
+         program { "on_disabled";
             script {
               set_int(disabled, 1);
               if (get_int(animate) == 1) return;
-              set_state(PART:"clipper", "disabled", 0.0);
+              set_state(PART:"clipper_elm.swallow.content", "disabled", 0.0);
             }
          }
-         program {
-            name: "multi_down";
-            signal: "elm,action,multi,down";
-            source: "elm";
-            script {
-               set_int(multi_down, 1);
-            }
+         program { "pressed_effect";
+            action: STATE_SET "ready";
+            targets: "bg_effect" "clipper_bg_effect";
+            after: "pressed_effect2";
          }
-         program {
-            name: "multi_up";
-            signal: "elm,action,multi,up";
-            source: "elm";
-            script {
-               set_int(multi_down, 0);
-            }
+         program { "pressed_effect2";
+            action: STATE_SET "pressed";
+            targets: "clipper_elm.swallow.content" "bg_effect" "clipper_bg_effect";
+            transition: GLIDE_EASE_OUT(0.15);
+            after: "pressed_effect3";
          }
-         program { name: "pass_event_enable";
-            signal: "elm,event,pass,enabled";
-            source: "elm";
+         program { "pressed_effect3";
             script {
-               set_mouse_events(PART:"event", 0);
+               set_int(animate, 0);
             }
          }
-         program { name: "pass_event_disable";
-            signal: "elm,event,pass,disabled";
-            source:"elm";
+         program { "delay_unpressed_effect";
+            in: 0.1 0.0;
+            after: "unpressed_effect";
+         }
+         program { "unpressed_effect";
             script {
-               set_mouse_events(PART:"event", 1);
+               if (get_int(disabled) == 0) {
+                  run_program(PROGRAM:"unpressed_effect2");
+                  run_program(PROGRAM:"unpressed_effect3");
+               } else {
+                  run_program(PROGRAM:"disabled_effect");
+                  run_program(PROGRAM:"disabled_effect2");
+               }
             }
          }
-         program { name: "repeat_event_enable";
-            signal: "elm,event,repeat,enabled";
+         program { "unpressed_effect2";
+            action: STATE_SET "default";
+            target: "clipper_elm.swallow.content";
+            transition: GLIDE_EASE_OUT(0.45);
+         }
+         program { "unpressed_effect3";
+            action: STATE_SET "ready";
+            target: "clipper_bg_effect";
+            transition: GLIDE_EASE_OUT(0.45);
+            after: "finished_animation";
+         }
+         program { "disabled_effect";
+            action: STATE_SET "disabled";
+            target: "clipper_elm.swallow.content";
+            transition: GLIDE_EASE_OUT(0.45);
+         }
+         program { "disabled_effect2";
+            action: STATE_SET "ready";
+            target: "clipper_bg_effect";
+            transition: GLIDE_EASE_OUT(0.45);
+            after: "finished_animation";
+         }
+         program { "finished_animation";
+            action: STATE_SET "default";
+            targets: "bg_effect" "clipper_bg_effect";
+         }
+         program { "multi_down";
+            signal: "elm,action,multi,down";
             source: "elm";
             script {
-               set_repeat_events(PART:"event", 1);
+               set_int(multi_down, 1);
             }
          }
-         program { name: "repeat_event_disable";
-            signal: "elm,event,repeat,disabled";
-            source:"elm";
+         program { "multi_up";
+            signal: "elm,action,multi,up";
+            source: "elm";
             script {
-               set_repeat_events(PART:"event", 0);
+               set_int(multi_down, 0);
             }
          }
          program {
             signal: "elm,state,default";
             source: "elm";
             script {
-               set_state(PART:"clipper", "default", 0.0);
-               set_state(PART:"tizen_vg_shape", "default", 0.0);
-               set_state(PART:"tizen_vg_shape_clipper", "default", 0.0);
+               set_state(PART:"clipper_elm.swallow.content", "default", 0.0);
+               set_state(PART:"bg_effect", "default", 0.0);
+               set_state(PART:"clipper_bg_effect", "default", 0.0);
                set_state(PART:"effect_spacer", "default", 0.0);
                set_int(mouse_down, 0);
             }
@@ -1243,31 +1302,41 @@
    group { "elm/button/base/floatingbutton/white_bg";
       inherit: "elm/button/base/floatingbutton/default";
       parts {
-         part { name: "tizen_vg_shape_clipper";
-            type: RECT;
-            description { state: "default" 0.0;
-               visible: 0;
-               color: 61 185 204 0;
+         rect { "clipper_bg";
+            desc { "default";
+               color_class: "floatingbutton/white/bg-normal";
             }
-            description { state: "ready" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
+            desc { "pressed";
+               color_class: "floatingbutton/white/bg-pressed";
             }
-            description { state: "pressed" 0.0;
-               color: 61 185 204 77;
+            desc { "disabled";
+               color_class: "floatingbutton/white/bg-disabled";
             }
          }
-         part { name: "clipper";
-            type: RECT;
-            description { state: "default" 0.0;
-               color: 78 97 173 255;
+         rect { "clipper_bg_effect";
+            desc { "default";
+               hid;
+               color_class: "floatingbutton/white/effect-normal";
             }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
+            desc { "ready";
+               inherit: "default";
+               vis;
             }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
-               color: 16 47 173 255;
+            desc { "pressed";
+               color_class: "floatingbutton/white/effect-pressed";
+            }
+         }
+         rect { "clipper_elm.swallow.content";
+            desc { "default";
+               color_class: "floatingbutton/white/icon-normal";
+            }
+            desc { "pressed";
+               inherit: "default";
+               color_class: "floatingbutton/white/icon-pressed";
+            }
+            desc { "disabled";
+               inherit: "default";
+               color_class: "floatingbutton/white/icon-disabled";
             }
          }
       }
@@ -1278,190 +1347,185 @@
          image: "core_button_icon_clear.png" COMP;
       }
       parts {
-         part { name: "base";
-            type: SPACER;
-            scale: 1;
-            mouse_events: 0;
-            description { state: "default" 0.0;
+         spacer { "base";
+            scale;
+            nomouse;
+            desc { "default";
                min: BUTTON_EDITFIELD_CLEAR_BUTTON_WIDTH_INC BUTTON_EDITFIELD_CLEAR_BUTTON_HEIGHT_INC;
                max: BUTTON_EDITFIELD_CLEAR_BUTTON_WIDTH_INC BUTTON_EDITFIELD_CLEAR_BUTTON_HEIGHT_INC;
             }
          }
-         part { name: "tizen_vg_shape_clipper";
-            type: RECT;
-            description { state: "default" 0.0;
-               color: 0 0 0 0;
-               visible: 0;
+         rect { "clipper_bg";
+            desc { "default";
+               hid;
                fixed: 1 1;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
+               rel.to: "bg";
+               color_class: "button/base/editfield_clear/bg-normal";
             }
-            description { state: "ready" 0.0;
-               inherit: "default" 0.0;
-               color: 61 185 204 0;
-               visible: 1;
+            desc { "ready";
+               inherit: "default";
+               vis;
+               color_class: "button/base/editfield_clear/bg-pressed";
             }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
-               color: 61 185 204 77;
+            desc { "pressed";
+               inherit: "default";
+               vis;
+               color_class: "button/base/editfield_clear/bg-disabled";
             }
          }
-         part { name: "button_center_part";
-            clip_to: "clipper";
-            mouse_events: 0;
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to: "base";
-               rel2.to: "base";
+         rect { "clipper_bg_effect";
+            desc { "default";
+               hid;
+               color_class: "button/base/editfield_clear/effect-normal";
+            }
+            desc { "ready";
+               inherit: "default";
+               vis;
+            }
+            desc { "pressed";
+               color_class: "button/base/editfield_clear/effect-pressed";
+            }
+         }
+         image { "button_center_part";
+            clip: "clipper_elm.swallow.content";
+            nomouse;
+            scale;
+            desc { "default";
+               rel.to: "base";
                image.normal: "core_button_icon_clear.png";
             }
          }
-         part { name: "clipper";
-            type: RECT;
-            description { state: "default" 0.0;
-               color: 61 184 204 255;
+         rect { "clipper_elm.swallow.content";
+            desc { "default";
+               color_class: "button/base/editfield_clear/icon-normal";
             }
-            description { state: "pressed" 0.0;
-               color: 34 104 114 255;
+            desc { "pressed";
+               color_class: "button/base/editfield_clear/icon-pressed";
             }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
-               color: 0 0 0 77;
+            desc { "disabled";
+               inherit: "default";
+               color_class: "button/base/editfield_clear/icon-disabled";
             }
          }
       }
    }
-   group { name: "elm/button/base/bottom";
+   group { "elm/button/base/bottom";
       inherit: "elm/button/base/default";
-      data.item: "vector_ux" "bottom";
-      data.item: "corner_radius" BUTTON_BOTTOM_CORNER_RADIUS;
+      images {
+         image: "core_button_bg.#.png" COMP;
+      }
       parts {
-         part { name: "base";
-            scale: 1;
-            type: SPACER;
-            description { state: "default" 0.0;
+         spacer { "base";
+            scale;
+            desc { "default";
                min: BUTTON_BOTTOM_MIN_WIDTH_INC BUTTON_BOTTOM_MIN_HEIGHT_INC;
                max: BUTTON_BOTTOM_MAX_WIDTH_INC BUTTON_BOTTOM_MAX_HEIGHT_INC;
             }
          }
-         part { name: "tizen_vg_shape";
-            type: SWALLOW;
-            clip_to: "tizen_vg_shape_clipper";
-            scale: 1;
-            description { state: "default" 0.0;
+         //Base Shape Part
+         image { "bg";
+            clip: "clipper_bg";
+            scale;
+            desc { "default";
                min: 0 BUTTON_BOTTOM_MIN_HEIGHT_INC;
                max: BUTTON_BOTTOM_MAX_WIDTH_INC BUTTON_BOTTOM_MAX_HEIGHT_INC;
+               image.normal: "core_button_bg.#.png";
             }
          }
-         //Base Shape Part
-         part { name: "tizen_vg_shape_clipper";
-            type: RECT;
-            description { state: "default" 0.0;
-               color: 78 97 173 255;
+         rect { "clipper_bg";
+            desc { "default";
+               color_class: "button/bottom/bg-normal";
             }
-            description { state: "disabled" 0.0;
-               color: 131 145 201 255;
+            desc { "pressed";
+               color_class: "button/bottom/bg-pressed";
             }
-         }
-         part { name: "effect_spacer";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to: "base";
-               rel2.to: "base";
+            desc { "disabled";
+               color_class: "button/bottom/bg-disabled";
             }
          }
-         part { name: "tizen_vg_shape_clipper2";
-            type: RECT;
-            description { state: "default" 0.0;
-               visible: 0;
-               color: 0 0 0 0;
+         //Effect Shape Part
+         image { "bg_effect";
+            clip: "clipper_bg_effect";
+            scale;
+            desc { "default";
+               rel.to: "base";
+               image.normal: "core_button_bg.#.png";
             }
-            description { state: "ready" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
+         }
+         rect { "clipper_bg_effect";
+            desc { "default";
+               color_class: "button/bottom/effect-normal";
             }
-            description { state: "pressed" 0.0;
-               color: 0 0 0 77;
+            desc { "pressed";
+               color_class: "button/bottom/effect-pressed";
             }
          }
-         part { name: "padding_left_top";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
+         spacer { "padding_top_left";
+            scale;
+            desc { "default";
+               rel.to: "bg";
                align: 0.0 0.0;
                rel1.relative: 0.0 0.0;
                min: BUTTON_PADDING_LEFT_RIGHT_INC BUTTON_BOTTOM_PADDING_TOP_HEIGHT_INC;
                fixed: 1 1;
             }
          }
-         part { name: "padding_right_bottom";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
+         spacer { "padding_bottom_right";
+            scale;
+            desc { "default";
+               rel.to: "bg";
                align: 1.0 1.0;
                rel1.relative: 1.0 1.0;
                min: BUTTON_PADDING_LEFT_RIGHT_INC BUTTON_BOTTOM_PADDING_BOTTOM_HEIGHT_INC;
                fixed: 1 1;
             }
          }
-         part { name: "elm.text";
-            type: TEXTBLOCK;
-            mouse_events: 0;
-            scale: 1;
-            description { state: "default" 0.0;
+         textblock { "elm.text";
+            nomouse;
+            scale;
+            desc { "default";
                fixed: 1 1;
                rel1 {
                   relative: 1.0 1.0;
                   to_x: "icon_rect";
-                  to_y: "padding_left_top";
+                  to_y: "padding_top_left";
                }
                rel2 {
                   relative: 0.0 0.0;
-                  to: "padding_right_bottom";
+                  to: "padding_bottom_right";
                }
                text {
                   style: "button_bottom";
                   max: 1 0;
                }
-               color: 255 255 255 255;
             }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
+            desc { "pressed";
+               inherit: "default";
                text.style: "button_bottom_press";
-               color: 255 255 255 255;
             }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
+            desc { "disabled";
+               inherit: "default";
                text.style: "button_bottom_dim";
-               color: 255 255 255 163;
             }
          }
       }
    }
-   group { name: "elm/button/base/popup";
+   group { "elm/button/base/popup";
       inherit: "elm/button/base/bottom";
-      data.item: "vector_ux" "bottom";
-      data.item: "corner_radius" BUTTON_BOTTOM_CORNER_RADIUS;
       parts {
-         part { name: "base";
-            scale: 1;
-            type: SPACER;
-            description { state: "default" 0.0;
+         spacer { "base";
+            scale;
+            desc { "default";
                min: BUTTON_POPUP_MIN_WIDTH_INC BUTTON_POPUP_MIN_HEIGHT_INC;
             }
          }
-         part { name: "tizen_vg_shape";
-            type: SWALLOW;
-            clip_to: "tizen_vg_shape_clipper";
-            scale: 1;
-            description { state: "default" 0.0;
+         //Base Shape Part
+         image { "bg";
+            clip: "clipper_bg";
+            scale;
+            desc { "default";
                min: 0 BUTTON_POPUP_MIN_HEIGHT_INC;
+               image.normal: "core_button_bg.#.png";
             }
          }
       }
@@ -1473,7 +1537,7 @@
          public multi_down = 0;
        }
        parts {
-         part { name: "bg";
+         part { name: "tizen_vg_shape";
             type: SPACER;
             scale: 1;
             description { state: "default" 0.0;
@@ -1516,7 +1580,7 @@
             script {
                new st[31];
                new Float:vl;
-               get_state(PART:"bg", st, 30, vl);
+               get_state(PART:"tizen_vg_shape", st, 30, vl);
                if (strcmp(st, "disabled")) {
                   emit("elm,action,press", "");
                }
@@ -1536,7 +1600,7 @@
             script {
                new st[31];
                new Float:vl;
-               get_state(PART:"bg", st, 30, vl);
+               get_state(PART:"tizen_vg_shape", st, 30, vl);
                if (strcmp(st, "disabled")) {
                   emit("elm,action,unpress", "");
                }
@@ -1549,7 +1613,7 @@
                new st[31];
                new Float:vl;
                if (get_int(multi_down) == 0) {
-                  get_state(PART:"bg", st, 30, vl);
+                  get_state(PART:"tizen_vg_shape", st, 30, vl);
                   if (strcmp(st, "disabled")) {
                      emit("elm,action,click", "");
                   }
@@ -1560,13 +1624,13 @@
             signal: "elm,state,disabled";
             source: "elm";
             action: STATE_SET "disabled" 0.0;
-            target: "bg";
+            target: "tizen_vg_shape";
          }
          program { name: "enable";
             signal: "elm,state,enabled";
             source: "elm";
             action: STATE_SET "default" 0.0;
-            target: "bg";
+            target: "tizen_vg_shape";
          }
          program { name: "multi_down";
             signal: "elm,action,multi,down";
@@ -1614,194 +1678,150 @@
    }
 
 ///////////////////////////////////////////////////////////////////////////////////////
-#define BUTTON_ICON_STYLES(style_name, image_normal, color_normal_r, color_normal_g, color_normal_b, color_normal_a, color_press_r, color_press_g, color_press_b, color_press_a, color_dim_r, color_dim_g, color_dim_b, color_dim_a, min_width, min_height) \
-   group { name: "elm/button/base/"style_name; \
-      data.item: "vector_ux" "no_bg/circle"; \
+#define BUTTON_ICON_STYLES(style_name, image_normal, color_class_bg_normal, color_class_bg_press, color_class_bg_dim, color_class_icon_normal, color_class_icon_press, color_class_icon_dim, color_class_effect_normal, color_class_effect_press, min_width, min_height) \
+group { "elm/button/base/"style_name; \
       images { \
          image: image_normal COMP; \
-      } \
-      script { \
-         public mouse_down = 0; \
-         public multi_down = 0; \
-         public disabled = 0; \
-         public animate = 0; \
-         public rel_x = 0; \
-         public rel_y = 0; \
-         public get_circumscription_radius(base_effect, radius_w, radius_h) { \
-            new x, y, w, h, Float:radius; \
-            get_geometry(base_effect, x, y, w, h); \
-            radius = sqrt(pow(w, 2) + pow(h, 2)); \
-            set_float(radius_w, ((radius / w) - 1) / 2); \
-            set_float(radius_h, ((radius / h) - 1) / 2); \
-         } \
+         vector: "core_press_circle.svg"; \
       } \
       parts { \
-         part { name: "button_bg"; \
-            type: SPACER; \
-            scale: 1; \
-            description { state: "default" 0.0; \
+         spacer { "base"; \
+            scale; \
+            desc { "default"; \
                min: min_width min_height; \
                max: min_width min_height; \
             } \
          } \
-         part { name: "effect_spacer";\
-            type: SPACER; \
-            scale: 1; \
-            description { state: "default" 0.0; \
+         swallow { "bg"; \
+            clip: "clipper_bg"; \
+            scale; \
+            desc { "default"; \
+            }  \
+            desc { "ready"; \
+               vis; \
+            } \
+            desc { "pressed"; \
+               vis; \
+            } \
+            desc { "disabled"; \
+               vis; \
+            } \
+         } \
+         rect { "clipper_bg"; \
+            desc { "default"; \
+               color_class: color_class_bg_normal; \
+            } \
+            desc { "ready"; \
+               color_class: color_class_bg_normal; \
+            } \
+            desc { "pressed"; \
+               color_class: color_class_bg_press; \
+            } \
+            desc { "disabled"; \
+               color_class: color_class_bg_dim; \
+            } \
+         } \
+         spacer { "effect_spacer";\
+            scale; \
+            desc { "default"; \
                fixed: 1 1; \
                rel1.relative: 0.5 0.5; \
                rel2.relative: 0.5 0.5; \
             } \
          } \
-         part { name: "tizen_vg_shape"; \
-            type: SWALLOW; \
-            clip_to: "tizen_vg_shape_clipper"; \
-            scale: 1; \
-            description { state: "default" 0.0; \
+         vector { "bg_effect"; \
+            clip: "clipper_bg_effect"; \
+            scale; \
+            desc { "default"; \
                fixed: 1 1; \
                rel1.relative: 0.5 0.5; \
                rel2.relative: 0.5 0.5; \
+               image.normal: "core_press_circle.svg"; \
             } \
-            description { state: "ready" 0.0; \
+            desc { "ready"; \
                fixed: 1 1; \
                rel1.to: "effect_spacer"; \
                rel2.to: "effect_spacer"; \
+               image.normal: "core_press_circle.svg"; \
             } \
-            description { state: "pressed" 0.0; \
-               inherit: "ready" 0.0; \
+            desc { "pressed"; \
+               inherit: "ready"; \
                rel1.relative: -0.15 -0.15; \
                rel2.relative: 1.15 1.15; \
             } \
          } \
-         part { name: "tizen_vg_shape_clipper"; \
-            type: RECT; \
-            description { state: "default" 0.0; \
-               color: 0 0 0 0; \
-               visible: 0; \
+         rect { "clipper_bg_effect"; \
+            desc { "default"; \
+               color_class: color_class_effect_normal; \
                fixed: 1 1; \
-               rel1.to: "tizen_vg_shape"; \
-               rel2.to: "tizen_vg_shape"; \
+               rel1.to: "bg_effect"; \
+               rel2.to: "bg_effect"; \
             } \
-            description { state: "ready" 0.0; \
-               inherit: "default" 0.0; \
-               color: 61 185 204 0; \
-               visible: 1; \
+            desc { "ready"; \
+               inherit: "default"; \
+               color_class: color_class_effect_normal; \
+               vis; \
             } \
-            description { state: "pressed" 0.0; \
-               inherit: "default" 0.0; \
-               color: 61 185 204 77; \
-               visible: 1; \
+            desc { "pressed"; \
+               inherit: "default"; \
+               color_class: color_class_effect_press; \
+               vis; \
             } \
          } \
-         part { name: "button_center_part"; \
-            mouse_events: 0; \
-            scale: 1; \
-            description { state: "default" 0.0; \
-               rel1.to: "button_bg"; \
-               rel2.to: "button_bg"; \
+         image { "button_center_part"; \
+            nomouse; \
+            scale; \
+            desc { "default"; \
+               rel1.to: "base"; \
+               rel2.to: "base"; \
                image.normal: image_normal; \
-               color: color_normal_r color_normal_g color_normal_b color_normal_a; \
+               color_class: color_class_icon_normal; \
             } \
-            description { state: "pressed" 0.0; \
-               inherit: "default" 0.0; \
-               color: color_press_r color_press_g color_press_b color_press_a; \
+            desc { "pressed"; \
+               inherit: "default"; \
+               color_class: color_class_icon_press; \
             } \
-            description { state: "disabled" 0.0; \
-               inherit: "default" 0.0; \
-               color: color_dim_r color_dim_g color_dim_b color_dim_a; \
+            desc { "disabled"; \
+               inherit: "default"; \
+               color_class: color_class_icon_dim; \
             } \
          } \
-         part { name: "event"; \
-            type: RECT; \
-            description { state: "default" 0.0; \
-               rel1.to: "button_bg"; \
-               rel2.to: "button_bg"; \
-               color: 0 0 0 0; \
-            } \
+      } \
+      inherit: "elm/button/event/default"; \
+      script { \
+         public mouse_down = 0; \
+         public multi_down = 0; \
+         public disabled = 0; \
+         public animate = 0; \
+         public rel_x = 0; \
+         public rel_y = 0; \
+         public get_circumscription_radius(base_effect, radius_w, radius_h) { \
+            new x, y, w, h, Float:radius; \
+            get_geometry(base_effect, x, y, w, h); \
+            radius = sqrt(pow(w, 2) + pow(h, 2)); \
+            set_float(radius_w, ((radius / w) - 1) / 2); \
+            set_float(radius_h, ((radius / h) - 1) / 2); \
          } \
       } \
+      program_remove: "unpressed"; \
+      program_remove: "clicked"; \
       programs { \
-         program { name: "pressed_effect"; \
-            action: STATE_SET "ready" 0.0; \
-            target: "tizen_vg_shape_clipper"; \
-            target: "tizen_vg_shape"; \
-            after: "pressed_effect2"; \
-         } \
-         program { name: "pressed_effect2"; \
-            action: STATE_SET "pressed" 0.0; \
-            target: "tizen_vg_shape_clipper"; \
-            target: "tizen_vg_shape"; \
-            target: "button_center_part"; \
-            transition: GLIDE_EASE_OUT(0.15); \
-            after: "pressed_effect3"; \
-         } \
-         program { name: "pressed_effect3"; \
-            script { \
-               set_int(animate, 0); \
-            } \
-         } \
-         program { name: "delay_unpressed_effect"; \
-            in: 0.1 0.0; \
-            after: "unpressed_effect"; \
-         } \
-         program { name: "unpressed_effect"; \
-            script { \
-               if (get_int(disabled) == 0) { \
-                 run_program(PROGRAM:"unpressed_effect2"); \
-                 run_program(PROGRAM:"unpressed_effect3"); \
-               } \
-               else { \
-                 run_program(PROGRAM:"disabled_effect"); \
-                 run_program(PROGRAM:"disabled_effect2"); \
-               } \
-            } \
-         } \
-         program { name: "unpressed_effect2"; \
-            action: STATE_SET "default" 0.0; \
-            target: "button_center_part"; \
-            transition: GLIDE_EASE_OUT(0.45); \
-         } \
-         program { name: "unpressed_effect3"; \
-            action: STATE_SET "ready" 0.0; \
-            target: "tizen_vg_shape_clipper"; \
-            transition: GLIDE_EASE_OUT(0.45); \
-            after: "finished_animation"; \
-         } \
-         program { name: "disabled_effect"; \
-            action: STATE_SET "disabled" 0.0; \
-            target: "button_center_part"; \
-            transition: GLIDE_EASE_OUT(0.45); \
-         } \
-         program { name: "disabled_effect2"; \
-            action: STATE_SET "ready" 0.0; \
-            target: "tizen_vg_shape_clipper"; \
-            transition: GLIDE_EASE_OUT(0.45); \
-            after: "finished_animation"; \
-         } \
-         program { name: "finished_animation"; \
-            action: STATE_SET "default" 0.0; \
-            target: "tizen_vg_shape"; \
-            target: "tizen_vg_shape_clipper"; \
-         } \
-         program { name: "pressed"; \
-            signal: "mouse,down,1*"; \
-            source: "event"; \
+         program { "on_pressed"; \
             script { \
                if ((get_int(multi_down) == 0) && (get_int(mouse_down) == 0) && (get_int(disabled) == 0)) { \
                   stop_program(PROGRAM:"delay_unpressed_effect"); \
                   set_int(mouse_down, 1); \
                   set_int(animate, 1); \
-                  get_circumscription_radius(PART:"button_bg", rel_x, rel_y); \
+                  get_circumscription_radius(PART:"base", rel_x, rel_y); \
                   custom_state(PART:"effect_spacer", "default", 0.0); \
                   set_state(PART:"effect_spacer", "custom",0.0); \
                   set_state_val(PART:"effect_spacer", STATE_REL1, (get_float(rel_x) * -1), (get_float(rel_y) * -1)); \
                   set_state_val(PART:"effect_spacer", STATE_REL2, (get_float(rel_x) + 1), (get_float(rel_y) + 1)); \
-                  emit("elm,action,press", ""); \
                   run_program(PROGRAM:"pressed_effect"); \
                } \
             } \
          } \
-         program { name: "unpressed"; \
+         program { "unpressed"; \
             signal: "mouse,up,1"; \
             source: "event"; \
             script { \
@@ -1811,8 +1831,8 @@
                      if (get_int(animate) == 0) { \
                         run_program(PROGRAM:"unpressed_effect"); \
                      } else { \
-                        set_state(PART:"tizen_vg_shape", "pressed", 0.0); \
-                        set_state(PART:"tizen_vg_shape_clipper", "pressed", 0.0); \
+                        set_state(PART:"bg_effect", "pressed", 0.0); \
+                        set_state(PART:"clipper_bg_effect", "pressed", 0.0); \
                         set_state(PART:"button_center_part", "pressed", 0.0); \
                         set_int(animate, 0); \
                         run_program(PROGRAM:"delay_unpressed_effect"); \
@@ -1822,7 +1842,7 @@
                } \
             } \
          } \
-         program { name: "button_click"; \
+         program { "clicked"; \
             signal: "mouse,clicked,1"; \
             source: "event"; \
             script { \
@@ -1836,87 +1856,132 @@
                  } \
             } \
          } \
-         program { name: "touch_sound"; \
-            action: RUN_PLUGIN "touch_sound"; \
-         } \
-         program { name: "button_click2"; \
-            in: 0.001 0.0; \
-            action: SIGNAL_EMIT "elm,action,click" ""; \
-         } \
-         program { name: "disable"; \
-            signal: "elm,state,disabled"; \
-            source: "elm"; \
+         program { "on_disabled"; \
             script { \
               set_int(disabled, 1); \
               if (get_int(animate) == 1) return; \
               set_state(PART:"button_center_part", "disabled", 0.0); \
             } \
          } \
-         program { name: "enable"; \
-            signal: "elm,state,enabled"; \
-            source: "elm"; \
-            action: STATE_SET "default" 0.0; \
+         program { "on_enabled"; \
+            action: STATE_SET "default"; \
             script { \
               set_int(disabled, 0); \
               set_state(PART:"button_center_part", "default", 0.0); \
             } \
          } \
-         program { \
-            name: "multi_down"; \
-            signal: "elm,action,multi,down"; \
-            source: "elm"; \
-            script { \
-               set_int(multi_down, 1); \
-            } \
+         program { "touch_sound"; \
+            action: RUN_PLUGIN "touch_sound"; \
          } \
-         program { \
-            name: "multi_up"; \
-            signal: "elm,action,multi,up"; \
-            source: "elm"; \
-            script { \
-               set_int(multi_down, 0); \
-            } \
+         program { "button_click2"; \
+            in: 0.001 0.0; \
+            action: SIGNAL_EMIT "elm,action,click" ""; \
          } \
-         program { name: "pass_event_enable"; \
-            signal: "elm,event,pass,enabled"; \
-            source: "elm"; \
+         program { "pressed_effect"; \
+            action: STATE_SET "ready"; \
+            targets: "clipper_bg" "bg" "clipper_bg_effect" "bg_effect"; \
+            after: "pressed_effect2"; \
+         } \
+         program { "pressed_effect2"; \
+            action: STATE_SET "pressed"; \
+            targets: "clipper_bg" "bg" "clipper_bg_effect" "bg_effect" "button_center_part"; \
+            transition: GLIDE_EASE_OUT(0.15); \
+            after: "pressed_effect3"; \
+         } \
+         program { "pressed_effect3"; \
             script { \
-               set_mouse_events(PART:"event", 0); \
+               set_int(animate, 0); \
             } \
          } \
-         program { name: "pass_event_disable"; \
-            signal: "elm,event,pass,disabled"; \
-            source:"elm"; \
+         program { "delay_unpressed_effect"; \
+            in: 0.1 0.0; \
+            after: "unpressed_effect"; \
+         } \
+         program { "unpressed_effect"; \
             script { \
-               set_mouse_events(PART:"event", 1); \
+               if (get_int(disabled) == 0) { \
+                 run_program(PROGRAM:"unpressed_effect2"); \
+                 run_program(PROGRAM:"unpressed_effect3"); \
+               } \
+               else { \
+                 run_program(PROGRAM:"disabled_effect"); \
+                 run_program(PROGRAM:"disabled_effect2"); \
+               } \
             } \
          } \
-         program { name: "repeat_event_enable"; \
-            signal: "elm,event,repeat,enabled"; \
+         program { "unpressed_effect2"; \
+            action: STATE_SET "default"; \
+            target: "button_center_part"; \
+            transition: GLIDE_EASE_OUT(0.45); \
+         } \
+         program { "unpressed_effect3"; \
+            action: STATE_SET "ready"; \
+            targets: "clipper_bg" "clipper_bg_effect"; \
+            transition: GLIDE_EASE_OUT(0.45); \
+            after: "finished_animation"; \
+         } \
+         program { "disabled_effect"; \
+            action: STATE_SET "disabled"; \
+            target: "button_center_part"; \
+            transition: GLIDE_EASE_OUT(0.45); \
+         } \
+         program { "disabled_effect2"; \
+            action: STATE_SET "ready"; \
+            targets: "clipper_bg" "clipper_bg_effect"; \
+            transition: GLIDE_EASE_OUT(0.45); \
+            after: "finished_animation"; \
+         } \
+         program { "finished_animation"; \
+            action: STATE_SET "default"; \
+            targets: "bg" "clipper_bg" "bg_effect" "clipper_bg_effect"; \
+         } \
+         program { "multi_down"; \
+            signal: "elm,action,multi,down"; \
             source: "elm"; \
             script { \
-               set_mouse_events(PART:"event", 1); \
+               set_int(multi_down, 1); \
             } \
          } \
-         program { name: "repeat_event_disable"; \
-            signal: "elm,event,repeat,disabled"; \
-            source:"elm"; \
+         program { "multi_up"; \
+            signal: "elm,action,multi,up"; \
+            source: "elm"; \
             script { \
-               set_mouse_events(PART:"event", 0); \
+               set_int(multi_down, 0); \
             } \
          } \
       } \
    }
 
 ///////////////////////////////////////////////////////////////////////////////////////
-   BUTTON_ICON_STYLES("icon_reorder", "core_button_reorder.png", 61, 185, 204, 255, 34, 104, 115, 255, 61, 185, 204, 77,  BUTTON_ICON_WIDTH_INC, BUTTON_ICON_HEIGHT_INC)
+   BUTTON_ICON_STYLES("icon_reorder", "core_button_reorder.png",
+                      "button/reorder/bg-normal", "button/reorder/bg-pressed", "button/reorder/bg-disabled",
+                      "button/reorder/icon-normal", "button/reorder/icon-pressed", "button/reorder/icon-disabled",
+                      "button/reorder/effect-normal", "button/reorder/effect-pressed",
+                      BUTTON_ICON_WIDTH_INC, BUTTON_ICON_HEIGHT_INC)
 ///////////////////////////////////////////////////////////////////////////////////////
-   BUTTON_ICON_STYLES("icon_expand_add", "core_button_add.png", 61, 185, 204, 255, 34, 104, 115, 255, 61, 185, 204, 77,  BUTTON_ICON_WIDTH_INC, BUTTON_ICON_HEIGHT_INC)
+   BUTTON_ICON_STYLES("icon_expand_add", "core_button_add.png",
+                      "button/expand_add/bg-normal", "button/expand_add/bg-pressed", "button/expand_add/bg-disabled",
+                      "button/expand_add/icon-normal", "button/expand_add/icon-pressed", "button/expand_add/icon-disabled",
+                      "button/expand_add/effect-normal", "button/expand_add/effect-pressed",
+                      BUTTON_ICON_WIDTH_INC, BUTTON_ICON_HEIGHT_INC)
 ///////////////////////////////////////////////////////////////////////////////////////
-   BUTTON_ICON_STYLES("icon_expand_delete", "core_button_delete.png", 214, 49, 49, 255, 176, 40, 40, 255, 0, 0, 0, 77,  BUTTON_ICON_WIDTH_INC, BUTTON_ICON_HEIGHT_INC)
+   BUTTON_ICON_STYLES("icon_expand_delete", "core_button_delete.png",
+                      "button/expand_delete/bg-normal", "button/expand_delete/bg-pressed", "button/expand_delete/bg-disabled",
+                      "button/expand_delete/icon-normal", "button/expand_delete/icon-pressed","button/expand_delete/icon-disabled",
+                      "button/expand_delete/effect-normal", "button/expand_delete/effect-pressed",
+                      BUTTON_ICON_WIDTH_INC, BUTTON_ICON_HEIGHT_INC)
 ///////////////////////////////////////////////////////////////////////////////////////
-   BUTTON_ICON_STYLES("calendar/decrease/default", "core_date_picker_arrow_l.png", 61, 184, 204, 255, 42, 127, 140, 255, 0, 0, 0, 77, BUTTON_CALENDAR_DATE_PICKER_LEFT_RIGHT_ARROW_WIDTH_INC, BUTTON_CALENDAR_DATE_PICKER_LEFT_RIGHT_ARROW_HEIGHT_INC)
-   BUTTON_ICON_STYLES("calendar/increase/default", "core_date_picker_arrow_r.png", 61, 184, 204, 255, 42, 127, 140, 255, 0, 0, 0, 77, BUTTON_CALENDAR_DATE_PICKER_LEFT_RIGHT_ARROW_WIDTH_INC, BUTTON_CALENDAR_DATE_PICKER_LEFT_RIGHT_ARROW_HEIGHT_INC)
+
+   BUTTON_ICON_STYLES("calendar/decrease/default", "core_date_picker_arrow_l.png",
+                      "button/calendar/decrease/bg-normal", "button/calendar/decrease/bg-pressed", "button/calendar/decrease/bg-disabled",
+                      "button/calendar/decrease/icon-normal", "button/calendar/decrease/icon-pressed", "button/calendar/decrease/icon-disabled",
+                      "button/calendar/decrease/effect-normal", "button/calendar/decrease/effect-pressed",
+                      BUTTON_CALENDAR_DATE_PICKER_LEFT_RIGHT_ARROW_WIDTH_INC, BUTTON_CALENDAR_DATE_PICKER_LEFT_RIGHT_ARROW_HEIGHT_INC)
+   BUTTON_ICON_STYLES("calendar/increase/default", "core_date_picker_arrow_r.png",
+                      "button/calendar/increase/bg-normal", "button/calendar/increase/bg-pressed", "button/calendar/increase/bg-disabled",
+                      "button/calendar/increase/icon-normal", "button/calendar/increase/icon-pressed", "button/calendar/increase/icon-disabled",
+                      "button/calendar/increase/effect-normal", "button/calendar/increase/effect-pressed",
+                      BUTTON_CALENDAR_DATE_PICKER_LEFT_RIGHT_ARROW_WIDTH_INC, BUTTON_CALENDAR_DATE_PICKER_LEFT_RIGHT_ARROW_HEIGHT_INC)
 ///////////////////////////////////////////////////////////////////////////////////////
 
 
@@ -2822,60 +2887,44 @@ group { name: "elm/button/base/contacts";
       }
    }
 
-   group { name: "elm/button/base/naviframe/title_left";
+   group { "elm/button/base/naviframe/title_left";
       alias: "elm/button/base/tizen_view/title_left";
-      data.item: "vector_ux" "no_bg";
-      data.item: "corner_radius" BUTTON_NAVIFRAME_TITLE_CORNER_RADIUS;
-      script {
-         public mouse_down = 0;
-         public multi_down = 0;
-         public disabled = 0;
-         public animate = 0;
-         public minw = 0;
-         public minh = 0;
-         public get_effect_min_size(base_effect, Float:ratio, min_w, min_h) {
-            new x, y, w, h;
-            get_geometry(base_effect, x, y, w, h);
-            if (w > h) {
-               set_float(min_w, (w - h * (1 - ratio)) / w);
-               set_float(min_h, ratio);
-            } else {
-               set_float(min_w, ratio);
-               set_float(min_h, (h - w * (1 - ratio)) / h);
-            }
-         }
+      images {
+         vector: "core_press_top_left.svg";
+         vector: "core_press_top_right.svg";
+         vector: "core_press_bottom_left.svg";
+         vector: "core_press_bottom_right.svg";
+         vector: "core_press_center.svg";
       }
+      target_group: "bg_effect_vector" "bg_effect_top_left" "bg_effect_top_right" "bg_effect_bottom_left" "bg_effect_bottom_right";
+
       parts {
-         part { name: "button_bg";
-            type: SPACER;
-            scale: 1;
-            mouse_events: 0;
-            description { state: "default" 0.0;
+         spacer { "base";
+            scale;
+            nomouse;
+            desc { "default";
                min: BUTTON_NAVIFRAME_TITLE_LEFT_BUTTON_MIN_SIZE_INC;
                max: BUTTON_NAVIFRAME_TITLE_LEFT_BUTTON_MAX_SIZE_INC;
                fixed: 1 1;
             }
          }
-         part { name: "effect_padding";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
+         spacer { "padding_bg";
+            scale;
+            desc { "default";
                fixed: 1 0;
-               rel1.to: "button_bg";
-               rel2.to: "button_bg";
+               rel.to: "base";
                rel1.relative: 0.0 0.0;
                rel2.relative: 0.0 1.0;
                min: NAVIFRAME_TITLE_LEFT_EFFECT_PADDING_WIDTH_INC 0;
                align: 0.0 0.5;
             }
          }
-         part { name: "effect_spacer";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
+         spacer { "bg_spacer";
+            scale;
+            desc { "default";
                fixed: 1 1;
-               rel1.to: "effect_padding";
-               rel2.to: "effect_padding";
+               rel1.to: "padding_bg";
+               rel2.to: "padding_bg";
                rel1.relative: 1.0 0.0;
                rel2.relative: 1.0 1.0;
                align: 0.0 0.5;
@@ -2883,87 +2932,112 @@ group { name: "elm/button/base/contacts";
                max: BUTTON_NAVIFRAME_TITLE_LEFT_BUTTON_EFFECT_SIZE_INC;
             }
          }
+         rect { "bg";
+            scale;
+            nomouse;
+            desc { "default";
+               rel.to: "bg_spacer";
+               hid;
+            }
+         }
+         rect { "clipper_bg";
+            scale;
+            desc { "default";
+               color: 0 0 0 0;
+            }
+            desc { "pressed";
+               color: 0 0 0 0;
+            }
+            desc { "disabled";
+               color: 0 0 0 0;
+            }
+         }
+         spacer { "effect_spacer";
+            scale;
+            desc { "default";
+               rel.to: "bg";
+            }
+         }
+         BUTTON_VECTOR_PART(NAVIFRAME_TITLE_BUTTON_CORNER_RADIUS
+                           , 0.7
+                           , "bg_effect", "clipper_bg_effect"
+                           , "core_press_top_left.svg", "core_press_top_right.svg"
+                           , "core_press_center.svg"
+                           , "core_press_bottom_left.svg", "core_press_bottom_right.svg");
          //Effect Shape Part
-         part { name: "tizen_vg_shape";
-            type: SWALLOW;
-            clip_to: "tizen_vg_shape_clipper";
-            scale: 1;
-            description { state: "default" 0.0;
+         swallow { "bg_effect";
+            clip: "clipper_bg_effect";
+            scale;
+            desc { "default";
                fixed: 1 1;
                rel1.to: "effect_spacer";
                rel2.to: "effect_spacer";
                rel1.relative: 0.5 0.5;
                rel2.relative: 0.5 0.5;
             }
-            description { state: "ready" 0.0;
-               inherit: "default" 0.0;
+            desc { "ready";
+               inherit: "default";
             }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
+            desc { "pressed";
+               inherit: "default";
                rel1.relative: 0.0 0.0;
                rel2.relative: 1.0 1.0;
             }
          }
-         part { name: "tizen_vg_shape_clipper";
-            type: RECT;
-            description { state: "default" 0.0;
+         rect { "clipper_bg_effect";
+            desc { "default";
                color: 0 0 0 0;
-               visible: 0;
+               hid;
                fixed: 1 1;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
+               rel.to: "bg_effect";
             }
-            description { state: "ready" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
+            desc { "ready";
+               inherit: "default";
+               vis;
                fixed: 1 1;
             }
-            description { state: "pressed" 0.0;
+            desc { "pressed";
                color: 0 0 0 77;
                fixed: 1 1;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
+               rel.to: "bg_effect";
             }
-            description { state: "disabled" 0.0;
+            desc { "disabled";
                color: 0 0 0 77;
                fixed: 1 1;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
+               rel.to: "bg_effect";
             }
          }
-         part { name: "left_padding";
-            type: SPACER;
-            scale: 1;
-            mouse_events: 0;
-            description { state: "default" 0.0;
+         spacer { "padding_left";
+            scale;
+            nomouse;
+            desc { "default";
                min: BUTTON_NAVIFRAME_TITLE_LEFT_BUTTON_LEFT_PADDING_WIDTH_INC 0;
                max: BUTTON_NAVIFRAME_TITLE_LEFT_BUTTON_LEFT_PADDING_WIDTH_INC -1;
                align: 0.0 0.0;
                fixed: 1 0;
-               rel1 { to: "button_bg"; relative: 0.0 0.0; }
-               rel2 { to: "button_bg"; relative: 0.0 1.0; }
+               rel1 { to: "base"; relative: 0.0 0.0; }
+               rel2 { to: "base"; relative: 0.0 1.0; }
             }
          }
-         part { name: "right_padding";
+         spacer { "padding_right";
             type: SPACER;
-            scale: 1;
-            mouse_events: 0;
-            description { state: "default" 0.0;
+            scale;
+            nomouse;
+            desc { "default";
                min: BUTTON_NAVIFRAME_TITLE_LEFT_BUTTON_RIGHT_PADDING_WIDTH_INC 0;
                max: BUTTON_NAVIFRAME_TITLE_LEFT_BUTTON_RIGHT_PADDING_WIDTH_INC -1;
                align: 1.0 0.0;
                fixed: 1 0;
-               rel1 { to: "button_bg"; relative: 1.0 0.0; }
-               rel2 { to: "button_bg"; relative: 1.0 1.0; }
+               rel1 { to: "base"; relative: 1.0 0.0; }
+               rel2 { to: "base"; relative: 1.0 1.0; }
             }
          }
-         part { name: "elm.text";
-            type: TEXTBLOCK;
-            scale: 1;
-            mouse_events: 0;
-            description { state: "default" 0.0;
-               rel1 { to_x: "left_padding"; relative: 1.0 0.5; }
-               rel2 { to_x: "right_padding"; relative: 0.0 0.5; }
+         textblock { "elm.text";
+            scale;
+            nomouse;
+            desc { "default";
+               rel1 { to_x: "padding_left"; relative: 1.0 0.5; }
+               rel2 { to_x: "padding_right"; relative: 0.0 0.5; }
                min: 0 BUTTON_NAVIFRAME_TITLE_LEFT_BUTTON_TEXT_HEIGHT_INC;
                max: -1 BUTTON_NAVIFRAME_TITLE_LEFT_BUTTON_TEXT_HEIGHT_INC;
                fixed: 0 1;
@@ -2973,110 +3047,59 @@ group { name: "elm/button/base/contacts";
                }
                color: 255 255 255 221;
             }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
+            desc { "pressed";
+               inherit: "default";
                text.style: "button_title_left_press";
                color: 255 255 255 255;
             }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
+            desc { "disabled";
+               inherit: "default";
                text.style: "button_title_left_dim";
                color: 255 255 255 146;
             }
          }
-         part { name: "event";
-            type: RECT;
-            description { state: "default" 0.0;
-               rel1.to: "button_bg";
-               rel2.to: "button_bg";
-               color: 0 0 0 0;
+      }
+      inherit: "elm/button/event/default";
+      script {
+         public mouse_down = 0;
+         public multi_down = 0;
+         public disabled = 0;
+         public animate = 0;
+         public minw = 0;
+         public minh = 0;
+         public get_effect_min_size(base_effect, Float:ratio, min_w, min_h) {
+            new x, y, w, h;
+            get_geometry(base_effect, x, y, w, h);
+            if (w > h) {
+               set_float(min_w, (w - h * (1 - ratio)) / w);
+               set_float(min_h, ratio);
+            } else {
+               set_float(min_w, ratio);
+               set_float(min_h, (h - w * (1 - ratio)) / h);
             }
          }
       }
+      program_remove: "unpressed";
+      program_remove: "clicked";
       programs {
-         program { name: "pressed_effect";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape_clipper";
-            action: STATE_SET "custom" 0.0;
-            target: "tizen_vg_shape";
-            after: "pressed_effect2";
-         }
-         program { name: "pressed_effect2";
-            action: STATE_SET "pressed" 0.0;
-            target: "tizen_vg_shape_clipper";
-            target: "tizen_vg_shape";
-            target: "elm.text";
-            transition: GLIDE_EASE_OUT(0.15);
-            after: "pressed_effect3";
-         }
-         program { name: "pressed_effect3";
-            script {
-               set_int(animate, 0);
-            }
-         }
-         program { name: "delay_unpressed_effect";
-            in: 0.1 0.0;
-            after: "unpressed_effect";
-         }
-         program { name: "unpressed_effect";
-            script {
-               if (get_int(disabled) == 0) {
-                 run_program(PROGRAM:"unpressed_effect2");
-                 run_program(PROGRAM:"unpressed_effect3");
-               } else {
-                 run_program(PROGRAM:"disabled_effect");
-                 run_program(PROGRAM:"disabled_effect2");
-               }
-            }
-         }
-         program { name: "unpressed_effect2";
-            action: STATE_SET "default" 0.0;
-            target: "elm.text";
-            transition: GLIDE_EASE_OUT(0.45);
-         }
-         program { name: "unpressed_effect3";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape_clipper";
-            transition: GLIDE_EASE_OUT(0.45);
-            after: "finished_animation";
-         }
-         program { name: "disabled_effect";
-            action: STATE_SET "disabled" 0.0;
-            target: "elm.text";
-            transition: GLIDE_EASE_OUT(0.45);
-         }
-         program { name: "disabled_effect2";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape_clipper";
-            transition: GLIDE_EASE_OUT(0.45);
-            after: "finished_animation";
-         }
-         program { name: "finished_animation";
-            action: STATE_SET "default" 0.0;
-            target: "tizen_vg_shape";
-            target: "tizen_vg_shape_clipper";
-         }
-         program { name: "pressed";
-            signal: "mouse,down,1*";
-            source: "event";
+         program { "on_pressed";
             script {
                if ((get_int(multi_down) == 0) && (get_int(mouse_down) == 0) && (get_int(disabled) == 0)) {
                   new Float:rel_w, Float:rel_h;
                   stop_program(PROGRAM:"delay_unpressed_effect");
                   set_int(mouse_down, 1);
                   set_int(animate, 1);
-                  custom_state(PART:"tizen_vg_shape", "ready", 0.0);
+                  custom_state(PART:"bg_effect", "ready", 0.0);
                   get_effect_min_size(PART:"effect_spacer", 0.7, minw, minh);
                   rel_w = (1 - get_float(minw)) / 2;
                   rel_h = (1 - get_float(minh)) / 2;
-                  set_state_val(PART:"tizen_vg_shape", STATE_REL1, rel_w, rel_h);
-                  set_state_val(PART:"tizen_vg_shape", STATE_REL2, 1 - rel_w, 1 - rel_h);
-                  emit("elm,action,press", "");
+                  set_state_val(PART:"bg_effect", STATE_REL1, rel_w, rel_h);
+                  set_state_val(PART:"bg_effect", STATE_REL2, 1 - rel_w, 1 - rel_h);
                   run_program(PROGRAM:"pressed_effect");
                }
             }
          }
-         program { name: "unpressed";
+         program { "unpressed";
             signal: "mouse,up,1";
             source: "event";
             script {
@@ -3086,8 +3109,8 @@ group { name: "elm/button/base/contacts";
                      if (get_int(animate) == 0) {
                         run_program(PROGRAM:"unpressed_effect");
                      } else {
-                        set_state(PART:"tizen_vg_shape", "pressed", 0.0);
-                        set_state(PART:"tizen_vg_shape_clipper", "pressed", 0.0);
+                        set_state(PART:"bg_effect", "pressed", 0.0);
+                        set_state(PART:"clipper_bg_effect", "pressed", 0.0);
                         set_state(PART:"elm.text", "pressed", 0.0);
                         set_int(animate, 0);
                         run_program(PROGRAM:"delay_unpressed_effect");
@@ -3097,7 +3120,7 @@ group { name: "elm/button/base/contacts";
                }
             }
          }
-         program { name: "button_click";
+         program { "clicked";
             signal: "mouse,clicked,1";
             source: "event";
             script {
@@ -3109,14 +3132,7 @@ group { name: "elm/button/base/contacts";
                }
             }
          }
-         program { name: "play_sound";
-            action: RUN_PLUGIN "touch_sound";
-         }
-         program { name: "clicked_signal";
-            in: 0.001 0.0;
-            action: SIGNAL_EMIT "elm,action,click" "";
-         }
-         program { name: "enable";
+         program { "on_enabled";
             signal: "elm,state,enabled";
             source: "elm";
             script {
@@ -3124,7 +3140,7 @@ group { name: "elm/button/base/contacts";
               set_state(PART:"elm.text", "default", 0.0);
             }
          }
-         program { name: "disable";
+         program { "on_disabled";
             signal: "elm,state,disabled";
             source: "elm";
             script {
@@ -3133,77 +3149,131 @@ group { name: "elm/button/base/contacts";
               set_state(PART:"elm.text", "disabled", 0.0);
             }
          }
-         program {
-            name: "multi_down";
-            signal: "elm,action,multi,down";
-            source: "elm";
-            script {
-               set_int(multi_down, 1);
+         program { "pressed_effect";
+            sequence {
+               action: STATE_SET "default";
+               target_groups: "bg_effect_vector";
+
+               action: STATE_SET "ready";
+               target: "clipper_bg_effect";
+
+               action: STATE_SET "custom";
+               target: "bg_effect";
+
+               after: "pressed_effect2";
             }
          }
-         program {
-            name: "multi_up";
-            signal: "elm,action,multi,up";
-            source: "elm";
-            script {
-               set_int(multi_down, 0);
-            }
+         program { "pressed_effect2";
+            action: STATE_SET "pressed";
+            target: "clipper_bg_effect";
+            target: "bg_effect";
+            target: "elm.text";
+            target_groups: "bg_effect_vector";
+            transition: GLIDE_EASE_OUT(0.15);
+            after: "pressed_effect3";
          }
-         program { name: "pass_event_enable";
-            signal: "elm,event,pass,enabled";
-            source: "elm";
+         program { "pressed_effect3";
             script {
-               set_mouse_events(PART:"event", 0);
+               set_int(animate, 0);
             }
          }
-         program { name: "pass_event_disable";
-            signal: "elm,event,pass,disabled";
-            source:"elm";
+         program { "delay_unpressed_effect";
+            in: 0.1 0.0;
+            after: "unpressed_effect";
+         }
+         program { "unpressed_effect";
             script {
-               set_mouse_events(PART:"event", 1);
+               if (get_int(disabled) == 0) {
+                 run_program(PROGRAM:"unpressed_effect2");
+                 run_program(PROGRAM:"unpressed_effect3");
+               } else {
+                 run_program(PROGRAM:"disabled_effect");
+                 run_program(PROGRAM:"disabled_effect2");
+               }
             }
          }
-         program { name: "repeat_event_enable";
-            signal: "elm,event,repeat,enabled";
+         program { "unpressed_effect2";
+            action: STATE_SET "default";
+            target: "elm.text";
+            transition: GLIDE_EASE_OUT(0.45);
+         }
+         program { "unpressed_effect3";
+            action: STATE_SET "ready";
+            target: "clipper_bg_effect";
+            transition: GLIDE_EASE_OUT(0.45);
+            after: "finished_animation";
+         }
+         program { "disabled_effect";
+            action: STATE_SET "disabled";
+            target: "elm.text";
+            transition: GLIDE_EASE_OUT(0.45);
+         }
+         program { "disabled_effect2";
+            action: STATE_SET "ready";
+            target: "clipper_bg_effect";
+            transition: GLIDE_EASE_OUT(0.45);
+            after: "finished_animation";
+         }
+         program { "finished_animation";
+            action: STATE_SET "default";
+            target: "bg_effect";
+            target: "clipper_bg_effect";
+            target_groups: "bg_effect_vector";
+         }
+         program { "play_sound";
+            action: RUN_PLUGIN "touch_sound";
+         }
+         program { "clicked_signal";
+            in: 0.001 0.0;
+            action: SIGNAL_EMIT "elm,action,click" "";
+         }
+         program { "multi_down";
+            signal: "elm,action,multi,down";
             source: "elm";
             script {
-               set_repeat_events(PART:"event", 1);
+               set_int(multi_down, 1);
             }
          }
-         program { name: "repeat_event_disable";
-            signal: "elm,event,repeat,disabled";
-            source:"elm";
+         program { "multi_up";
+            signal: "elm,action,multi,up";
+            source: "elm";
             script {
-               set_repeat_events(PART:"event", 0);
+               set_int(multi_down, 0);
             }
          }
       }
    }
 
-   group { name: "elm/button/base/naviframe/title_right";
+   group { "elm/button/base/naviframe/title_right";
       alias: "elm/button/base/tizen_view/title_right";
       inherit: "elm/button/base/naviframe/title_left";
       parts {
-         part { name: "effect_padding";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
+         spacer { "base";
+            scale;
+            nomouse;
+            desc { "default";
+               min: BUTTON_NAVIFRAME_TITLE_RIGHT_BUTTON_MIN_SIZE_INC;
+               max: BUTTON_NAVIFRAME_TITLE_RIGHT_BUTTON_MAX_SIZE_INC;
+               fixed: 1 1;
+            }
+         }
+         spacer { "padding_bg";
+            scale;
+            desc { "default";
                fixed: 1 0;
-               rel1.to: "button_bg";
-               rel2.to: "button_bg";
+               rel.to: "base";
                rel1.relative: 1.0 0.0;
                rel2.relative: 1.0 1.0;
                min: NAVIFRAME_TITLE_RIGHT_EFFECT_PADDING_WIDTH_INC 0;
                align: 1.0 0.5;
             }
          }
-         part { name: "effect_spacer";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
+         spacer { "bg_spacer";
+            scale;
+            desc { "default";
                fixed: 1 1;
-               rel1.to: "effect_padding";
-               rel2.to: "effect_padding";
+               rel1.to: "padding_bg";
+               rel2.to: "padding_bg";
                rel1.relative: 0.0 0.0;
                rel2.relative: 0.0 1.0;
                align: 1.0 0.5;
@@ -3211,39 +3281,89 @@ group { name: "elm/button/base/contacts";
                max: BUTTON_NAVIFRAME_TITLE_RIGHT_BUTTON_EFFECT_SIZE_INC;
             }
          }
-         part { name: "left_padding";
+         rect { "bg";
+            scale;
+            nomouse;
+            desc { "default";
+               rel.to: "bg_spacer";
+               hid;
+            }
+         }
+         rect { "clipper_bg";
+            scale;
+            desc { "default";
+               color: 0 0 0 0;
+            }
+            desc { "pressed";
+               color: 0 0 0 0;
+            }
+            desc { "disabled";
+               color: 0 0 0 0;
+            }
+         }
+         spacer { "effect_spacer";
+            scale;
+            desc { "default";
+               rel.to: "bg";
+            }
+         }
+         //Effect Shape Part
+         rect { "clipper_bg_effect";
+            desc { "default";
+               color: 0 0 0 0;
+               hid;
+               fixed: 1 1;
+               rel.to: "bg_effect";
+            }
+            desc { "ready";
+               inherit: "default";
+               vis;
+               fixed: 1 1;
+            }
+            desc { "pressed";
+               color: 0 0 0 77;
+               fixed: 1 1;
+               rel.to: "bg_effect";
+            }
+            desc { "disabled";
+               color: 0 0 0 77;
+               fixed: 1 1;
+               rel.to: "bg_effect";
+            }
+         }
+         part { "padding_left";
             type: SPACER;
-            scale: 1;
-            mouse_events: 0;
-            description { state: "default" 0.0;
+            scale;
+            nomouse;
+            desc { "default";
                min: BUTTON_NAVIFRAME_TITLE_RIGHT_BUTTON_LEFT_PADDING_WIDTH_INC 0;
                max: BUTTON_NAVIFRAME_TITLE_RIGHT_BUTTON_LEFT_PADDING_WIDTH_INC -1;
                align: 0.0 0.0;
                fixed: 1 0;
-               rel1 { to: "button_bg"; relative: 0.0 0.0; }
-               rel2 { to: "button_bg"; relative: 0.0 1.0; }
+               rel1 { to: "base"; relative: 0.0 0.0; }
+               rel2 { to: "base"; relative: 0.0 1.0; }
             }
          }
-         part { name: "right_padding";
+         part { "padding_right";
             type: SPACER;
-            scale: 1;
-            mouse_events: 0;
-            description { state: "default" 0.0;
+            scale;
+            nomouse;
+            desc { "default";
                min: BUTTON_NAVIFRAME_TITLE_RIGHT_BUTTON_RIGHT_PADDING_WIDTH_INC 0;
                max: BUTTON_NAVIFRAME_TITLE_RIGHT_BUTTON_RIGHT_PADDING_WIDTH_INC -1;
                align: 1.0 0.0;
                fixed: 1 0;
-               rel1 { to: "button_bg"; relative: 1.0 0.0; }
-               rel2 { to: "button_bg"; relative: 1.0 1.0; }
+               rel1 { to: "base"; relative: 1.0 0.0; }
+               rel2 { to: "base"; relative: 1.0 1.0; }
             }
          }
-         part { name: "elm.text";
+         part { "elm.text";
             type: TEXTBLOCK;
-            scale: 1;
-            mouse_events: 0;
-            description { state: "default" 0.0;
-               rel1 { to_x: "left_padding"; relative: 1.0 0.5; }
-               rel2 { to_x: "right_padding"; relative: 0.0 0.5; }
+            scale;
+            nomouse;
+            desc { "default";
+               rel1 { to_x: "padding_left"; relative: 1.0 0.5; }
+               rel2 { to_x: "padding_right"; relative: 0.0 0.5; }
                min: 0 BUTTON_NAVIFRAME_TITLE_RIGHT_BUTTON_TEXT_HEIGHT_INC;
                max: -1 BUTTON_NAVIFRAME_TITLE_RIGHT_BUTTON_TEXT_HEIGHT_INC;
                fixed: 0 1;
@@ -3253,13 +3373,13 @@ group { name: "elm/button/base/contacts";
                }
                color: 255 255 255 221;
             }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
+            desc { "pressed";
+               inherit: "default";
                text.style: "button_title_right_press";
                color: 255 255 255 255;
             }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
+            desc { "disabled";
+               inherit: "default";
                text.style: "button_title_right_dim";
                color: 255 255 255 146;
             }
@@ -3267,11 +3387,18 @@ group { name: "elm/button/base/contacts";
       }
    }
 
-   group { name: "elm/button/base/naviframe/back_btn/default";
+   group { "elm/button/base/naviframe/back_btn/default";
       alias: "elm/button/base/tizen_view/prev_btn";
       alias: "elm/button/base/naviframe/end_btn/default";
-      data.item: "vector_ux" "no_bg";
-      data.item: "corner_radius" BUTTON_NAVIFRAME_BACK_CORNER_RADIUS;
+      images {
+         vector: "core_press_top_left.svg";
+         vector: "core_press_top_right.svg";
+         vector: "core_press_bottom_left.svg";
+         vector: "core_press_bottom_right.svg";
+         vector: "core_press_center.svg";
+      }
+      target_group: "bg_effect_vector" "bg_effect_top_left" "bg_effect_top_right" "bg_effect_bottom_left" "bg_effect_bottom_right";
+
       images {
          set {
             name: "core_icon_back";
@@ -3283,27 +3410,19 @@ group { name: "elm/button/base/contacts";
             }
          }
       }
-      script {
-         public mouse_down = 0;
-         public multi_down = 0;
-         public animate = 0;
-         public disabled = 0;
-      }
       parts {
-         part { name: "button_bg";
-            type: SPACER;
-            scale: 1;
-            mouse_events: 0;
-            description { state: "default" 0.0;
+         spacer { "base";
+            scale;
+            nomouse;
+            desc { "default";
                min: BUTTON_NAVIFRAME_BACK_BUTTON_SIZE_INC;
                max: BUTTON_NAVIFRAME_BACK_BUTTON_SIZE_INC;
                fixed: 1 1;
             }
          }
-         part { name: "effect_spacer";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
+         spacer { "bg_spacer";
+            scale;
+            desc { "default";
                fixed: 1 1;
                rel1.relative: 0.5 0.5;
                rel2.relative: 0.5 0.5;
@@ -3311,126 +3430,139 @@ group { name: "elm/button/base/contacts";
                max: BUTTON_NAVIFRAME_BACK_BUTTON_EFFECT_MAX_SIZE_INC;
             }
          }
+         rect { "bg";
+            scale;
+            nomouse;
+            desc { "default";
+               rel.to: "bg_spacer";
+               hid;
+            }
+         }
+         rect { "clipper_bg";
+            scale;
+            desc { "default";
+               color: 0 0 0 0;
+            }
+            desc { "pressed";
+               color: 0 0 0 0;
+            }
+            desc { "disabled";
+               color: 0 0 0 0;
+            }
+         }
+         spacer { "effect_spacer";
+            scale;
+            desc { "default";
+               rel.to: "bg";
+            }
+         }
+         BUTTON_VECTOR_PART(BUTTON_NAVIFRAME_BACK_CORNER_RADIUS
+                           , 0.7
+                           , "bg_effect", "clipper_bg_effect"
+                           , "core_press_top_left.svg", "core_press_top_right.svg"
+                           , "core_press_center.svg"
+                           , "core_press_bottom_left.svg", "core_press_bottom_right.svg");
          //Effect Shape Part
-         part { name: "tizen_vg_shape";
-            type: SWALLOW;
-            clip_to: "tizen_vg_shape_clipper";
-            scale: 1;
-            description { state: "default" 0.0;
+         swallow { "bg_effect";
+            clip: "clipper_bg_effect";
+            scale;
+            desc { "default";
                fixed: 1 1;
+               rel1.to: "effect_spacer";
+               rel2.to: "effect_spacer";
                rel1.relative: 0.5 0.5;
                rel2.relative: 0.5 0.5;
             }
-            description { state: "ready" 0.0;
-               rel1.to: "effect_spacer";
-               rel2.to: "effect_spacer";
-               rel1.relative: 0.15 0.15;
-               rel2.relative: 0.85 0.85;
+            desc { "ready";
+               inherit: "default";
             }
-            description { state: "pressed" 0.0;
-               inherit: "ready" 0.0;
+            desc { "pressed";
+               inherit: "default";
                rel1.relative: 0.0 0.0;
                rel2.relative: 1.0 1.0;
             }
          }
-         part { name: "tizen_vg_shape_clipper";
-            type: RECT;
-            description { state: "default" 0.0;
+         rect { "clipper_bg_effect";
+            desc { "default";
                color: 0 0 0 0;
-               visible: 0;
+               hid;
                fixed: 1 1;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
+               rel.to: "bg_effect";
             }
-            description { state: "ready" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
+            desc { "ready";
+               inherit: "default";
+               vis;
+               fixed: 1 1;
             }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
+            desc { "pressed";
                color: 0 0 0 77;
-               visible: 1;
+               fixed: 1 1;
+               rel.to: "bg_effect";
+            }
+            desc { "disabled";
+               color: 0 0 0 77;
+               fixed: 1 1;
+               rel.to: "bg_effect";
             }
          }
-         part { name: "button_icon";
-            type: IMAGE;
-            scale: 1;
-            mouse_events: 0;
-            description { state: "default" 0.0;
+         image { "icon";
+            scale;
+            nomouse;
+            desc { "default";
                min: BUTTON_NAVIFRAME_BACK_BUTTON_SIZE_INC;
                max: BUTTON_NAVIFRAME_BACK_BUTTON_SIZE_INC;
                fixed: 1 1;
                color: 255 255 255 255;
                image.normal: "core_icon_back";
             }
-            description { state: "rtl" 0.0;
-               inherit: "default" 0.0;
+            desc { "rtl";
+               inherit: "default";
                map.on: 1;
                map.rotation.y: 180.0;
             }
          }
-         part { name: "event";
-            type: RECT;
-            description { state: "default" 0.0;
-               rel1.to: "button_bg";
-               rel2.to: "button_bg";
-               color: 0 0 0 0;
+      }
+      inherit: "elm/button/event/default";
+      script {
+         public mouse_down = 0;
+         public multi_down = 0;
+         public animate = 0;
+         public disabled = 0;
+         public minw = 0;
+         public minh = 0;
+         public get_effect_min_size(base_effect, Float:ratio, min_w, min_h) {
+            new x, y, w, h;
+            get_geometry(base_effect, x, y, w, h);
+            if (w > h) {
+               set_float(min_w, (w - h * (1 - ratio)) / w);
+               set_float(min_h, ratio);
+            } else {
+               set_float(min_w, ratio);
+               set_float(min_h, (h - w * (1 - ratio)) / h);
             }
          }
       }
+      program_remove: "unpressed";
+      program_remove: "clicked";
       programs {
-         program { name: "pressed_effect";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape_clipper";
-            target: "tizen_vg_shape";
-            after: "pressed_effect2";
-         }
-         program { name: "pressed_effect2";
-            action: STATE_SET "pressed" 0.0;
-            target: "tizen_vg_shape_clipper";
-            target: "tizen_vg_shape";
-            transition: GLIDE_EASE_OUT(0.15);
-            after: "pressed_effect3";
-         }
-         program { name: "pressed_effect3";
-            script {
-               set_int(animate, 0);
-            }
-         }
-         program { name: "delay_unpressed_effect";
-            in: 0.1 0.0;
-            after: "unpressed_effect";
-         }
-         program { name: "unpressed_effect";
-            script {
-               run_program(PROGRAM:"unpressed_effect2");
-            }
-         }
-         program { name: "unpressed_effect2";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape_clipper";
-            transition: GLIDE_EASE_OUT(0.45);
-            after: "unpressed_effect3";
-         }
-         program { name: "unpressed_effect3";
-            action: STATE_SET "default" 0.0;
-            target: "tizen_vg_shape";
-            target: "tizen_vg_shape_clipper";
-         }
-         program { name: "pressed";
-            signal: "mouse,down,1*";
-            source: "event";
+         program { "on_pressed";
             script {
                if ((get_int(multi_down) == 0) && (get_int(mouse_down) == 0) && (get_int(disabled) == 0)) {
+                  new Float:rel_w, Float:rel_h;
                   stop_program(PROGRAM:"delay_unpressed_effect");
                   set_int(mouse_down, 1);
                   set_int(animate, 1);
-                  emit("elm,action,press", "");
+                  custom_state(PART:"bg_effect", "ready", 0.0);
+                  get_effect_min_size(PART:"effect_spacer", 0.7, minw, minh);
+                  rel_w = (1 - get_float(minw)) / 2;
+                  rel_h = (1 - get_float(minh)) / 2;
+                  set_state_val(PART:"bg_effect", STATE_REL1, rel_w, rel_h);
+                  set_state_val(PART:"bg_effect", STATE_REL2, 1 - rel_w, 1 - rel_h);
                   run_program(PROGRAM:"pressed_effect");
                }
             }
          }
-         program { name: "unpressed";
+         program { "unpressed";
             signal: "mouse,up,1";
             source: "event";
             script {
@@ -3440,8 +3572,8 @@ group { name: "elm/button/base/contacts";
                      if (get_int(animate) == 0) {
                         run_program(PROGRAM:"unpressed_effect");
                      } else {
-                        set_state(PART:"tizen_vg_shape", "pressed", 0.0);
-                        set_state(PART:"tizen_vg_shape_clipper", "pressed", 0.0);
+                        set_state(PART:"bg_effect", "pressed", 0.0);
+                        set_state(PART:"clipper_bg_effect", "pressed", 0.0);
                         set_int(animate, 0);
                         run_program(PROGRAM:"delay_unpressed_effect");
                      }
@@ -3450,7 +3582,7 @@ group { name: "elm/button/base/contacts";
                }
             }
          }
-         program { name: "button_click";
+         program { "clicked";
             signal: "mouse,clicked,1";
             source: "event";
             script {
@@ -3460,82 +3592,98 @@ group { name: "elm/button/base/contacts";
                }
             }
          }
-         program { name: "play_sound";
-            action: RUN_PLUGIN "touch_sound";
-         }
-         program { name: "clicked_signal";
-            in: 0.001 0.0;
-            action: SIGNAL_EMIT "elm,action,click" "";
-         }
-         program { name: "enable";
-            signal: "elm,state,enabled";
-            source: "elm";
+         program { "on_enabled";
             script {
               set_int(disabled, 0);
             }
          }
-         program { name: "disable";
-            signal: "elm,state,disabled";
-            source: "elm";
+         program { "on_disabled";
             script {
               set_int(disabled, 1);
             }
          }
-         program {
-            name: "multi_down";
-            signal: "elm,action,multi,down";
-            source: "elm";
-            script {
-               set_int(multi_down, 1);
+         program { "pressed_effect";
+            sequence {
+               action: STATE_SET "default";
+               target_groups: "bg_effect_vector";
+
+               action: STATE_SET "ready";
+               target: "clipper_bg_effect";
+
+               action: STATE_SET "custom";
+               target: "bg_effect";
+
+               after: "pressed_effect2";
             }
          }
-         program {
-            name: "multi_up";
-            signal: "elm,action,multi,up";
-            source: "elm";
-            script {
-               set_int(multi_down, 0);
-            }
+         program { "pressed_effect2";
+            action: STATE_SET "pressed";
+            target: "clipper_bg_effect";
+            target: "bg_effect";
+            target_groups: "bg_effect_vector";
+            transition: GLIDE_EASE_OUT(0.15);
+            after: "pressed_effect3";
          }
-         program { name: "pass_event_enable";
-            signal: "elm,event,pass,enabled";
-            source: "elm";
+         program { "pressed_effect3";
             script {
-               set_mouse_events(PART:"event", 0);
+               set_int(animate, 0);
             }
          }
-         program { name: "pass_event_disable";
-            signal: "elm,event,pass,disabled";
-            source:"elm";
+         program { "delay_unpressed_effect";
+            in: 0.1 0.0;
+            after: "unpressed_effect";
+         }
+         program { "unpressed_effect";
             script {
-               set_mouse_events(PART:"event", 1);
+               run_program(PROGRAM:"unpressed_effect2");
             }
          }
-         program { name: "repeat_event_enable";
-            signal: "elm,event,repeat,enabled";
+         program { "unpressed_effect2";
+            action: STATE_SET "ready";
+            target: "clipper_bg_effect";
+            transition: GLIDE_EASE_OUT(0.45);
+            after: "unpressed_effect3";
+         }
+         program { "unpressed_effect3";
+            action: STATE_SET "default";
+            target: "bg_effect";
+            target: "clipper_bg_effect";
+            target_groups: "bg_effect_vector";
+         }
+         program { "play_sound";
+            action: RUN_PLUGIN "touch_sound";
+         }
+         program { "clicked_signal";
+            in: 0.001 0.0;
+            action: SIGNAL_EMIT "elm,action,click" "";
+         }
+         program {
+            name: "multi_down";
+            signal: "elm,action,multi,down";
             source: "elm";
             script {
-               set_repeat_events(PART:"event", 1);
+               set_int(multi_down, 1);
             }
          }
-         program { name: "repeat_event_disable";
-            signal: "elm,event,repeat,disabled";
-            source:"elm";
+         program {
+            name: "multi_up";
+            signal: "elm,action,multi,up";
+            source: "elm";
             script {
-               set_repeat_events(PART:"event", 0);
+               set_int(multi_down, 0);
             }
          }
-         program { name: "rtl_mirrored";
+         program { "rtl_mirrored";
             signal: "edje,state,rtl";
             source: "edje";
-            action: STATE_SET "rtl" 0.0;
-            target: "button_icon";
+            action: STATE_SET "rtl";
+            target: "icon";
          }
-         program { name: "ltr_mirrored";
+         program { "ltr_mirrored";
             signal: "edje,state,ltr";
             source: "edje";
-            action: STATE_SET "default" 0.0;
-            target: "button_icon";
+            action: STATE_SET "default";
+            target: "icon";
          }
       }
    }
@@ -4153,1143 +4301,115 @@ BUTTON_DEFAULT_FOCUS_STYLES("focus")
    group { name: "elm/button/base/datetime/ampm";
       inherit: "elm/button/base/default";
       parts {
-         part { name: "base";
-            description { state: "default" 0.0;
+         spacer { "base";
+            desc { "default";
                min: DATETIME_AMPM_BUTTON_WIDTH_SIZE_INC DATETIME_AMPM_BUTTON_HEIGHT_SIZE_INC;
             }
          }
-         part { name: "tizen_vg_shape";
-            description { state: "default" 0.0;
+         image { "bg";
+            desc { "default";
                min: 0 DATETIME_AMPM_BUTTON_HEIGHT_SIZE_INC;
             }
          }
-          part { name: "tizen_vg_shape_clipper";
-              description { state: "unselected" 0.0;
-                 color: 204 204 204 255;
-              }
-         }
-         part { name: "padding_left_top";
-            description { state: "default" 0.0;
-               min: DATETIME_AMPM_BUTTON_TOP_LEFT_PADDING_INC;
-            }
-         }
-         part { name: "padding_right_bottom";
-            description { state: "default" 0.0;
-               min: DATETIME_AMPM_BUTTON_BOTTOM_RIGHT_PADDING_INC;
-            }
-         }
-         part { name: "elm.text";
-            description { state: "default" 0.0;
-               text.style: "button_ampm";
-               color: 250 250 250 255;
+         rect { "clipper_bg";
+            desc { "default";
+               color_class: "datetime/default/ampm/bg-normal";
             }
-            description { state: "pressed" 0.0;
-               text.style: "button_ampm_press";
-               color: 250 250 250 255;
+            desc { "pressed";
+               color_class: "datetime/default/ampm/bg-pressed";
             }
-            description { state: "unselected" 0.0;
-               inherit: "default" 0.0;
-               text.style: "button_ampm_dim";
-               color: 250 250 250 163;
+            desc { "disabled";
+               color_class: "datetime/default/ampm/bg-disabled";
             }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
-               text.style: "button_ampm_dim";
-               color: 250 250 250 163;
+            desc { "unselected";
+               color_class: "datetime/default/ampm/bg-unselected";
             }
          }
-      }
-      program { name: "unselected";
-         signal: "elm,action,button,unselected";
-         source: "elm";
-         script {
-            set_int(selected, 0);
-            set_state(PART:"tizen_vg_shape_clipper", "unselected", 0.0);
-            set_state(PART:"elm.text", "unselected", 0.0);
-            if (get_int(animate) == 1)
-              run_program(PROGRAM:"pressed_effect3");
-         }
-      }
-      program { name: "selected";
-         signal: "elm,action,button,selected";
-         source: "elm";
-         script {
-            set_int(selected, 1);
-            set_state(PART:"tizen_vg_shape_clipper", "default", 0.0);
-            if (get_int(animate) == 0)
-               set_state(PART:"elm.text", "default", 0.0);
-         }
-      }
-      program { name: "unselected_effect";
-         action: STATE_SET "unselected" 0.0;
-         target: "elm.text";
-         transition: GLIDE_EASE_OUT(0.45);
-         after: "unpressed_effect4";
-      }
-      program { name: "unpressed_effect";
-         script {
-            if (get_int(disabled) == 0) {
-               run_program(PROGRAM:"unpressed_effect2");
-               if (get_int(selected) == 0)
-                  run_program(PROGRAM:"unselected_effect");
-               else
-                  run_program(PROGRAM:"unpressed_effect3");
-            } else {
-               run_program(PROGRAM:"disabled_effect");
-               run_program(PROGRAM:"disabled_effect2");
-               run_program(PROGRAM:"disabled_effect3");
-            }
-         }
-      }
-   }
-
-/******************* SPINNER BUTTONS STYLES **********************/
-
-   group { name: "elm/button/base/spinner/increase/default";
-      alias: "elm/button/base/spinner/increase/horizontal";
-      data.item: "focus_highlight" "on";
-      images {
-         image: "core_icon_picker_arrow_right.png" COMP;
-      }
-      script {
-         public mouse_down = 0;
-         public multi_down = 0;
-      }
-      parts {
-         part { name: "arrow.image.bg";
-            type: RECT;
-            scale: 1;
-            description { state: "default" 0.0;
-               visible: 0;
-               align: 0.5 0.0;
-               min: SPINNER_LEFT_RIGHT_BG_IMAGE_SIZE_INC;
-               max: SPINNER_LEFT_RIGHT_BG_IMAGE_SIZE_INC;
+         rect { "clipper_bg_effect";
+            desc { "default";
+               hid;
+               color_class: "datetime/default/ampm/effect-normal";
             }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
-               color: 2 61 132 127;
-               visible: 1;
+            desc { "ready";
+               inherit: "default";
+               vis;
             }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
+            desc { "pressed";
+               color_class: "datetime/default/ampm/effect-pressed";
             }
          }
-         part { name: "arrow.image";
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to: "arrow.image.bg";
-               rel2.to: "arrow.image.bg";
-               min: SPINNER_LEFT_RIGHT_ARROW_IMAGE_SIZE_INC;
-               max: SPINNER_LEFT_RIGHT_ARROW_IMAGE_SIZE_INC;
-               color: 111 125 142 255;
-               image.normal: "core_icon_picker_arrow_right.png";
-            }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
-               color: 244 244 244 255;
-            }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
-               color: 111 125 142 127;
-            }
-         }
-         part { name: "focus_image";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
-               align: 0.5 0.0;
-               rel1.to: "arrow.image.bg";
-               rel2.to: "arrow.image.bg";
-            }
-            description { state: "focused" 0.0;
-               inherit: "default" 0.0;
-            }
-         }
-         part { name: "over";
-            type: RECT;
-            repeat_events: 1;
-            description { state: "default" 0.0;
-               color: 0 0 0 0;
-            }
-         }
-         part { name: "disabler";
-            type: RECT;
-            description { state: "default" 0.0;
-               color: 0 0 0 0;
-               visible: 0;
-            }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
-            }
-         }
-      }
-      programs {
-         program { name: "button_press";
-            signal: "mouse,down,1*";
-            source: "over";
-            script {
-               if ((get_int(multi_down) == 0) &&
-                   (get_int(mouse_down) == 0)) {
-                     set_int(mouse_down, 1);
-                     run_program(PROGRAM:"button_press2");
-               }
-            }
-         }
-         program { name: "button_press2";
-            action: SIGNAL_EMIT "elm,action,press" "";
-            after: "button_press_anim";
-         }
-         program { name: "button_press_anim";
-            action: STATE_SET "pressed" 0.0;
-            target: "arrow.image.bg";
-            target: "arrow.image";
-         }
-         program { name: "button_unpress";
-            signal: "mouse,up,1*";
-            source: "over";
-            script {
-               if (get_int(mouse_down) == 1) {
-                     set_int(mouse_down, 0);
-                     run_program(PROGRAM:"button_unpress2");
-                     run_program(PROGRAM:"button_unpress_anim");
-               }
-            }
-         }
-         program { name: "button_unpress2";
-            action: SIGNAL_EMIT "elm,action,unpress" "";
-         }
-         program { name: "button_unpress_anim";
-            action: STATE_SET "default" 0.0;
-            target: "arrow.image.bg";
-            target: "arrow.image";
-         }
-         program { name: "button_click";
-            signal: "mouse,clicked,1";
-            source: "over";
-            script {
-               if (get_int(multi_down) == 0) {
-                 run_program(PROGRAM:"play_sound");
-                 run_program(PROGRAM:"button_click2");
-               }
-            }
-         }
-         program { name: "play_sound";
-            action: RUN_PLUGIN "touch_sound";
-         }
-         program { name: "longpress_sound";
-            signal: "elm,action,longpress";
-            source: "elm";
-            action: RUN_PLUGIN "touch_haptic";
-         }
-         program { name: "action_unpressed";
-            signal: "elm,action,unpressed";
-            source: "elm";
-            after: "button_unpress_anim";
-         }
-         program { name: "action_pressed";
-            signal: "elm,action,pressed";
-            source: "elm";
-            after: "button_press_anim";
-         }
-         program { name: "button_click2";
-            action: SIGNAL_EMIT "elm,action,click" "";
-         }
-         program { name: "action_focus";
-            signal: "elm,action,focus_highlight,show";
-            source: "elm";
-            action: STATE_SET "focused" 0.0;
-            target: "focus_image";
-         }
-         program { name: "action_unfocus";
-            signal: "elm,action,focus_highlight,hide";
-            source: "elm";
-            action: STATE_SET "default" 0.0;
-            target: "focus_image";
-         }
-         program { name: "access_pressed";
-            signal: "elm,action,anim,activate";
-            source: "elm";
-            action: STATE_SET "pressed" 0.0;
-            target: "arrow.image.bg";
-            target: "arrow.image";
-            after: "access_pressed_anim";
-         }
-         program { name: "access_pressed_anim";
-            action: STATE_SET "default" 0.0;
-            transition: DECELERATE 0.1;
-            target: "arrow.image.bg";
-            target: "arrow.image";
-         }
-         program { name: "disable";
-            signal: "elm,state,disabled";
-            source: "elm";
-            action: STATE_SET "disabled" 0.0;
-            target: "arrow.image.bg";
-            target: "arrow.image";
-            target: "disabler";
-         }
-         program { name: "enable";
-            signal: "elm,state,enabled";
-            source: "elm";
-            action: STATE_SET "default" 0.0;
-            target: "arrow.image.bg";
-            target: "arrow.image";
-            target: "disabler";
-         }
-         program {
-            name: "multi_down";
-            signal: "elm,action,multi,down";
-            source: "elm";
-            script {
-               set_int(multi_down, 1);
-            }
-         }
-         program {
-            name: "multi_up";
-            signal: "elm,action,multi,up";
-            source: "elm";
-            script {
-               set_int(multi_down, 0);
-            }
-         }
-         program { name: "pass_event_enable";
-            signal: "elm,event,pass,enabled";
-            source: "elm";
-            script {
-               set_mouse_events(PART:"over", 0);
-               set_mouse_events(PART:"disabler", 0);
-            }
-         }
-         program { name: "pass_event_disable";
-            signal: "elm,event,pass,disabled";
-            source:"elm";
-            script {
-               set_mouse_events(PART:"over", 1);
-               set_mouse_events(PART:"disabler", 1);
-            }
-         }
-         program { name: "repeat_event_enable";
-            signal: "elm,event,repeat,enabled";
-            source: "elm";
-            script {
-               set_repeat_events(PART:"over", 1);
-               set_repeat_events(PART:"disabler", 1);
-            }
-         }
-         program { name: "repeat_event_disable";
-            signal: "elm,event,repeat,disabled";
-            source:"elm";
-            script {
-               set_repeat_events(PART:"over", 0);
-               set_repeat_events(PART:"disabler", 0);
-            }
-         }
-      }
-   }
-
-   group { name: "elm/button/base/spinner/decrease/default";
-      inherit: "elm/button/base/spinner/increase/default";
-      alias: "elm/button/base/spinner/decrease/horizontal";
-      images {
-         image: "core_icon_picker_arrow_left.png" COMP;
-      }
-      parts {
-         part { name: "arrow.image";
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to: "arrow.image.bg";
-               rel2.to: "arrow.image.bg";
-               min: SPINNER_LEFT_RIGHT_ARROW_IMAGE_SIZE_INC;
-               max: SPINNER_LEFT_RIGHT_ARROW_IMAGE_SIZE_INC;
-               color: 111 125 142 255;
-               image.normal: "core_icon_picker_arrow_left.png";
-            }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
-               color: 244 244 244 255;
-            }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
-               color: 111 125 142 127;
-            }
-         }
-      }
-   }
-
-   group { name: "elm/button/base/spinner/default";
-      alias: "elm/button/base/spinner/horizontal";
-      data.item: "focus_highlight" "on";
-      script {
-         public mouse_down = 0;
-         public multi_down = 0;
-      }
-      parts {
-         part { name: "bg";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
-               min: SPINNER_VERTICAL_TEXT_BUTTON_BG_SIZE_INC;
+         spacer { "padding_top_left";
+            desc { "default";
+               min: DATETIME_AMPM_BUTTON_TOP_LEFT_PADDING_INC;
             }
          }
-         part { name: "elm.text";
-            type: TEXT;
-            scale: 1;
-            description { state: "default" 0.0;
-               min: 0 SPINNER_TEXT_HEIGHT_INC;
-               max: -1 SPINNER_TEXT_HEIGHT_INC;
-               fixed: 1 1;
-               color: 7 7 7 255;
-               rel1.to: "bg";
-               rel2.to: "bg";
-               text {
-                  font: "Tizen:style=Light";
-                  size: 106;
-                  text_class: "tizen";
-               }
-            }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0 ;
-            }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0 ;
+         spacer { "padding_bottom_right";
+            desc { "default";
+               min: DATETIME_AMPM_BUTTON_BOTTOM_RIGHT_PADDING_INC;
             }
          }
-         part { name: "focus_image";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to: "bg";
-               rel2.to: "bg";
-            }
-            description { state: "focused" 0.0;
-               inherit: "default" 0.0;
+         textblock { "elm.text";
+            desc { "default";
+               text.style: "button_ampm";
             }
-         }
-         part { name: "over";
-            type: RECT;
-            repeat_events: 1;
-            description { state: "default" 0.0;
-               color: 0 0 0 0;
+            desc { "pressed";
+               text.style: "button_ampm_press";
             }
-         }
-         part { name: "disabler";
-            type: RECT;
-            description { state: "default" 0.0;
-               color: 0 0 0 0;
-               visible: 0;
+            desc { "unselected";
+               inherit: "default";
+               text.style: "button_ampm_unselected";
             }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
+            desc { "disabled";
+               inherit: "default";
+               text.style: "button_ampm_dim";
             }
          }
       }
       programs {
-         program { name: "button_press";
-            signal: "mouse,down,1*";
-            source: "over";
-            script {
-               if ((get_int(multi_down) == 0) &&
-                   (get_int(mouse_down) == 0)) {
-                     set_int(mouse_down, 1);
-                     run_program(PROGRAM:"button_press2");
-               }
-            }
-         }
-         program { name: "button_press2";
-            action: SIGNAL_EMIT "elm,action,press" "";
-            after: "action_pressed";
-         }
-         program { name: "button_unpress";
-            signal: "mouse,up,1*";
-            source: "over";
-            script {
-               if (get_int(mouse_down) == 1) {
-                     set_int(mouse_down, 0);
-                     run_program(PROGRAM:"button_unpress2");
-               }
-            }
-         }
-         program { name: "button_unpress2";
-            action: SIGNAL_EMIT "elm,action,unpress" "";
-            after: "action_unpressed";
-         }
-         program { name: "button_click";
-            signal: "mouse,clicked,1";
-            source: "over";
-            script {
-                 run_program(PROGRAM:"play_sound");
-                 run_program(PROGRAM:"button_click2");
-            }
-         }
-         program { name: "play_sound";
-            action: RUN_PLUGIN "touch_sound";
-         }
-         program { name: "button_click2";
-            action: SIGNAL_EMIT "elm,action,click" "";
-         }
-         program { name: "action_pressed";
-            action: STATE_SET "pressed" 0.0;
-            target: "elm.text";
-         }
-         program { name: "action_unpressed";
-            action: STATE_SET "default" 0.0;
-            target: "elm.text";
-         }
-         program { name: "action_focus";
-            signal: "elm,action,focus_highlight,show";
-            source: "elm";
-            action: STATE_SET "focused" 0.0;
-            target: "focus_image";
-         }
-         program { name: "action_unfocus";
-            signal: "elm,action,focus_highlight,hide";
-            source: "elm";
-            action: STATE_SET "default" 0.0;
-            target: "focus_image";
-         }
-         program { name: "disable";
-            signal: "elm,state,disabled";
-            source: "elm";
-            action: STATE_SET "disabled" 0.0;
-            target: "disabler";
-            target: "elm.text";
-         }
-         program { name: "enable";
-            signal: "elm,state,enabled";
+         program { "unselected";
+            signal: "elm,action,button,unselected";
             source: "elm";
-            action: STATE_SET "default" 0.0;
-            target: "disabler";
-            target: "elm.text";
-         }
-         program { name: "pass_event_enable";
-            signal: "elm,event,pass,enabled";
-            source: "elm";
-            script {
-               set_mouse_events(PART:"over", 0);
-               set_mouse_events(PART:"disabler", 0);
-            }
-         }
-         program { name: "pass_event_disable";
-            signal: "elm,event,pass,disabled";
-            source:"elm";
             script {
-               set_mouse_events(PART:"over", 1);
-               set_mouse_events(PART:"disabler", 1);
+               set_int(selected, 0);
+               set_int(animate, 1);
+               set_state(PART:"clipper_bg", "unselected", 0.0);
+               set_state(PART:"elm.text", "unselected", 0.0);
             }
          }
-         program { name: "repeat_event_enable";
-            signal: "elm,event,repeat,enabled";
+         program { "selected";
+            signal: "elm,action,button,selected";
             source: "elm";
             script {
-               set_repeat_events(PART:"over", 1);
-               set_repeat_events(PART:"disabler", 1);
+               set_int(selected, 1);
+               set_state(PART:"clipper_bg", "default", 0.0);
+               if (get_int(animate) == 0)
+                  set_state(PART:"elm.text", "default", 0.0);
             }
          }
-         program { name: "repeat_event_disable";
-            signal: "elm,event,repeat,disabled";
-            source:"elm";
-            script {
-               set_repeat_events(PART:"over", 0);
-               set_repeat_events(PART:"disabler", 0);
-            }
-         }
-      }
-   }
-
-/////////////////////////
-// Vertical /////////////
-/////////////////////////
-   group { name: "elm/button/base/spinner/increase/vertical";
-      alias: "elm/button/base/spinner/increase/vertical_time_picker";
-      alias: "elm/button/base/spinner/increase/vertical_date_picker";
-      alias: "elm/button/base/spinner/increase/datetime";
-      data.item: "focus_highlight" "on";
-      data.item: "vector_ux" "no_bg";
-      data.item: "corner_radius" SPINNER_UP_DOWN_CORNER_RADIUS;
-      images {
-         image: "core_icon_picker_arrow_up.png" COMP;
-      }
-      script {
-         public mouse_down = 0;
-         public multi_down = 0;
-         public disabled = 0;
-         public animate = 0;
-      }
-      parts {
-         part { name: "arrow.image.bg";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
-               align: 0.5 0.0;
-               min: SPINNER_UP_DOWN_BG_IMAGE_SIZE_INC;
-               max: SPINNER_UP_DOWN_BG_IMAGE_SIZE_INC;
-            }
-         }
-         part { name: "effect_spacer";
-            type: SPACER;
-            description { state: "default" 0.0;
-               rel1.to: "arrow.image.bg";
-               rel2.to: "arrow.image.bg";
-            }
-         }
-         //Effect Shape Part
-         part { name: "tizen_vg_shape";
-            type: SWALLOW;
-            clip_to: "tizen_vg_shape_clipper";
-            scale: 1;
-            description { state: "default" 0.0;
-               fixed: 1 1;
-               rel1.to: "effect_spacer";
-               rel2.to: "effect_spacer";
-               rel1.relative: 0.5 0.5;
-               rel2.relative: 0.5 0.5;
-            }
-            description { state: "ready" 0.0;
-               inherit: "default" 0.0;
-               min: SPINNER_UP_DOWN_EFFECT_MIN_SIZE_INC;
-            }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
-               rel1.relative: 0.0 0.0;
-               rel2.relative: 1.0 1.0;
-            }
-         }
-         part { name: "tizen_vg_shape_clipper";
-            type: RECT;
-            description { state: "default" 0.0;
-               color: 0 0 0 0;
-               visible: 0;
-               fixed: 1 1;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
-            }
-            description { state: "ready" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
-            }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
-               color: 0 0 0 77;
-            }
-            description { state: "disabled" 0.0;
-               color: 0 0 0 77;
-               fixed: 1 1;
-               rel1.to: "tizen_vg_shape";
-               rel2.to: "tizen_vg_shape";
-            }
-         }
-         part { name: "arrow.image";
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to: "arrow.image.bg";
-               rel2.to: "arrow.image.bg";
-               min: SPINNER_UP_DOWN_ARROW_IMAGE_SIZE_INC;
-               max: SPINNER_UP_DOWN_ARROW_IMAGE_SIZE_INC;
-               color: 204 204 204 255;
-               image.normal: "core_icon_picker_arrow_up.png";
-            }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
-               color: 255 255 255 255;
-            }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
-               color: 204 204 204 127;
-            }
-         }
-         part { name: "focus_image";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
-               align: 0.5 0.0;
-               rel1.to: "arrow.image.bg";
-               rel2.to: "arrow.image.bg";
-            }
-            description { state: "focused" 0.0;
-               inherit: "default" 0.0;
-            }
-         }
-         part { name: "event";
-            type: RECT;
-            repeat_events: 1;
-            description { state: "default" 0.0;
-               rel1.to: "arrow.image.bg";
-               rel2.to: "arrow.image.bg";
-               color: 0 0 0 0;
-            }
-         }
-      }
-      programs {
-         program { name: "pressed_effect";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape_clipper";
-            target: "tizen_vg_shape";
-            after: "pressed_effect2";
-         }
-         program { name: "pressed_effect2";
-            action: STATE_SET "pressed" 0.0;
-            target: "tizen_vg_shape_clipper";
-            target: "tizen_vg_shape";
-            target: "arrow.image";
-            transition: GLIDE_EASE_OUT(0.15);
-            after: "pressed_effect3";
-         }
-         program { name: "pressed_effect3";
-            script {
-               set_int(animate, 0);
-            }
-         }
-         program { name: "delay_unpressed_effect";
-            in: 0.1 0.0;
-            after: "unpressed_effect";
+         program { "unselected_effect";
+            action: STATE_SET "unselected";
+            target: "elm.text";
+            transition: GLIDE_EASE_OUT(0.45);
+            after: "unpressed_effect_icon";
          }
-         program { name: "unpressed_effect";
+         program { "unpressed_effect";
             script {
                if (get_int(disabled) == 0) {
-                  run_program(PROGRAM:"unpressed_effect2");
-                  run_program(PROGRAM:"unpressed_effect3");
+                  run_program(PROGRAM:"unpressed_effect_bg_effect");
+                  if (get_int(selected) == 0)
+                     run_program(PROGRAM:"unselected_effect");
+                  else
+                     run_program(PROGRAM:"unpressed_effect_text");
                } else {
-                  run_program(PROGRAM:"disabled_effect");
-                  run_program(PROGRAM:"disabled_effect2");
-               }
-            }
-         }
-         program { name: "unpressed_effect2";
-            action: STATE_SET "default" 0.0;
-            target: "arrow.image";
-            transition: GLIDE_EASE_OUT(0.45);
-         }
-         program { name: "unpressed_effect3";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape_clipper";
-            transition: GLIDE_EASE_OUT(0.45);
-            after: "finished_animation";
-         }
-         program { name: "disabled_effect";
-            action: STATE_SET "disabled" 0.0;
-            target: "arrow.image";
-            transition: GLIDE_EASE_OUT(0.45);
-         }
-         program { name: "disabled_effect2";
-            action: STATE_SET "ready" 0.0;
-            target: "tizen_vg_shape_clipper";
-            transition: GLIDE_EASE_OUT(0.45);
-            after: "finished_animation";
-         }
-         program { name: "finished_animation";
-            action: STATE_SET "default" 0.0;
-            target: "tizen_vg_shape_clipper";
-            target: "tizen_vg_shape";
-         }
-         program { name: "pressed";
-            signal: "mouse,down,1*";
-            source: "event";
-            script {
-               if ((get_int(multi_down) == 0) && (get_int(mouse_down) == 0) && (get_int(disabled) == 0)) {
-                  stop_program(PROGRAM:"delay_unpressed_effect");
-                  set_int(mouse_down, 1);
-                  set_int(animate, 1);
-                  emit("elm,action,press", "");
-                  run_program(PROGRAM:"pressed_effect");
-               }
-            }
-         }
-         program { name: "unpressed";
-            signal: "mouse,up,1";
-            source: "event";
-            script {
-               if (get_int(mouse_down) == 1) {
-                  set_int(mouse_down, 0);
-                  if (get_int(disabled) == 0) {
-                     if (get_int(animate) == 0) {
-                        run_program(PROGRAM:"unpressed_effect");
-                     } else {
-                        set_state(PART:"tizen_vg_shape", "pressed", 0.0);
-                        set_state(PART:"tizen_vg_shape_clipper", "pressed", 0.0);
-                        set_state(PART:"arrow.image", "pressed", 0.0);
-                        set_int(animate, 0);
-                        run_program(PROGRAM:"delay_unpressed_effect");
-                     }
-                     emit("elm,action,unpress", "");
-                  }
-               }
-            }
-         }
-         program { name: "button_click";
-            signal: "mouse,clicked,1";
-            source: "event";
-            script {
-               if ((get_int(multi_down) == 0) && (get_int(disabled) == 0)) {
-                 run_program(PROGRAM:"play_sound");
-                 run_program(PROGRAM:"button_click2");
+                  run_program(PROGRAM:"disabled_unpress_effect_bg_effect");
+                  run_program(PROGRAM:"disabled_unpress_effect_text");
+                  run_program(PROGRAM:"disabled_unpress_effect_icon");
                }
             }
          }
-         program { name: "play_sound";
-            action: RUN_PLUGIN "touch_sound";
-         }
-         program { name: "longpress_sound";
-            signal: "elm,action,longpress";
-            source: "elm";
-            action: RUN_PLUGIN "touch_haptic";
-         }
-         program { name: "button_click2";
-            in: 0.001 0.0;
-            action: SIGNAL_EMIT "elm,action,click" "";
-         }
-         program { name: "action_focus";
-            signal: "elm,action,focus_highlight,show";
-            source: "elm";
-            action: STATE_SET "focused" 0.0;
-            target: "focus_image";
-         }
-         program { name: "action_unfocus";
-            signal: "elm,action,focus_highlight,hide";
-            source: "elm";
-            action: STATE_SET "default" 0.0;
-            target: "focus_image";
-         }
-         program { name: "access_pressed";
-            signal: "elm,action,anim,activate";
-            source: "elm";
-            after: "pressed_effect";
-         }
-         program { name: "disable";
-            signal: "elm,state,disabled";
-            source: "elm";
-            script {
-               set_int(disabled, 1);
-               if (get_int(animate) == 1) return;
-               set_state(PART:"arrow.image", "disabled", 0.0);
-            }
-         }
-         program { name: "enable";
-            signal: "elm,state,enabled";
-            source: "elm";
-            script {
-               set_int(disabled, 0);
-               set_state(PART:"arrow.image", "default", 0.0);
-            }
-         }
-         program {
-            name: "multi_down";
-            signal: "elm,action,multi,down";
-            source: "elm";
-            script {
-               set_int(multi_down, 1);
-            }
-         }
-         program {
-            name: "multi_up";
-            signal: "elm,action,multi,up";
-            source: "elm";
-            script {
-               set_int(multi_down, 0);
-            }
-         }
-         program { name: "pass_event_enable";
-            signal: "elm,event,pass,enabled";
-            source: "elm";
-            script {
-               set_mouse_events(PART:"event", 0);
-            }
-         }
-         program { name: "pass_event_disable";
-            signal: "elm,event,pass,disabled";
-            source:"elm";
-            script {
-               set_mouse_events(PART:"event", 1);
-            }
-         }
-         program { name: "repeat_event_enable";
-            signal: "elm,event,repeat,enabled";
-            source: "elm";
-            script {
-               set_repeat_events(PART:"event", 1);
-            }
-         }
-         program { name: "repeat_event_disable";
-            signal: "elm,event,repeat,disabled";
-            source:"elm";
-            script {
-               set_repeat_events(PART:"event", 0);
-            }
-         }
-      }
-   }
-
-   group { name: "elm/button/base/spinner/decrease/vertical";
-      inherit: "elm/button/base/spinner/increase/vertical";
-      alias: "elm/button/base/spinner/decrease/vertical_time_picker";
-      alias: "elm/button/base/spinner/decrease/vertical_date_picker";
-      alias: "elm/button/base/spinner/decrease/datetime";
-      images {
-         image: "core_icon_picker_arrow_down.png" COMP;
-      }
-      parts {
-         part { name: "arrow.image";
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to: "arrow.image.bg";
-               rel2.to: "arrow.image.bg";
-               min: SPINNER_UP_DOWN_ARROW_IMAGE_SIZE_INC;
-               max: SPINNER_UP_DOWN_ARROW_IMAGE_SIZE_INC;
-               color: 204 204 204 255;
-               image.normal: "core_icon_picker_arrow_down.png";
-            }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0;
-               color: 255 255 255 255;
-            }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
-               color: 204 204 204 127;
-            }
-         }
       }
    }
 
-   group { name: "elm/button/base/spinner/vertical";
-      alias: "elm/button/base/spinner/vertical_time_picker";
-      alias: "elm/button/base/spinner/datetime";
-      data.item: "focus_highlight" "on";
-      script {
-         public mouse_down = 0;
-         public multi_down = 0;
-      }
-      parts {
-         part { name: "bg";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
-               min: SPINNER_VERTICAL_TEXT_BUTTON_BG_SIZE_INC;
-            }
-         }
-         part { name: "elm.text";
-            type: TEXT;
-            scale: 1;
-            description { state: "default" 0.0;
-               min: 0 SPINNER_TEXT_HEIGHT_INC;
-               max: -1 SPINNER_TEXT_HEIGHT_INC;
-               fixed: 1 1;
-               color: 0 0 0 255;
-               rel1.to: "bg";
-               rel2.to: "bg";
-               text {
-                  font: "Tizen:style=Light";
-                  size: 106;
-                  text_class: "tizen";
-                  ellipsis: -1.0;
-               }
-            }
-            description { state: "pressed" 0.0;
-               inherit: "default" 0.0 ;
-            }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0 ;
-            }
-         }
-         part { name: "focus_image";
-            type: SPACER;
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to: "bg";
-               rel2.to: "bg";
-            }
-            description { state: "focused" 0.0;
-               inherit: "default" 0.0;
-            }
-         }
-         part { name: "over";
-            type: RECT;
-            repeat_events: 1;
-            description { state: "default" 0.0;
-               color: 0 0 0 0;
-            }
-         }
-         part { name: "disabler";
-            type: RECT;
-            description { state: "default" 0.0;
-               color: 0 0 0 0;
-               visible: 0;
-            }
-            description { state: "disabled" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
-            }
-         }
-      }
-      programs {
-         program { name: "button_press";
-            signal: "mouse,down,1*";
-            source: "over";
-            script {
-               if ((get_int(multi_down) == 0) &&
-                   (get_int(mouse_down) == 0)) {
-                     set_int(mouse_down, 1);
-                     run_program(PROGRAM:"button_press2");
-               }
-            }
-         }
-         program { name: "button_press2";
-            action: SIGNAL_EMIT "elm,action,press" "";
-            after: "action_pressed";
-         }
-         program { name: "button_unpress";
-            signal: "mouse,up,1*";
-            source: "over";
-            script {
-               if (get_int(mouse_down) == 1) {
-                     set_int(mouse_down, 0);
-                     run_program(PROGRAM:"button_unpress2");
-               }
-            }
-         }
-         program { name: "button_unpress2";
-            action: SIGNAL_EMIT "elm,action,unpress" "";
-            after: "action_unpressed";
-         }
-         program { name: "button_click";
-            signal: "mouse,clicked,1";
-            source: "over";
-            script {
-               if (get_int(multi_down) == 0) {
-                 run_program(PROGRAM:"play_sound");
-                 run_program(PROGRAM:"button_click2");
-               }
-            }
-         }
-         program { name: "play_sound";
-            action: RUN_PLUGIN "touch_sound";
-         }
-         program { name: "button_click2";
-            action: SIGNAL_EMIT "elm,action,click" "";
-         }
-         program { name: "action_pressed";
-            action: STATE_SET "pressed" 0.0;
-            target: "elm.text";
-         }
-         program { name: "action_unpressed";
-            action: STATE_SET "default" 0.0;
-            target: "elm.text";
-         }
-         program { name: "action_focus";
-            signal: "elm,action,focus_highlight,show";
-            source: "elm";
-            action: STATE_SET "focused" 0.0;
-            target: "focus_image";
-         }
-         program { name: "action_unfocus";
-            signal: "elm,action,focus_highlight,hide";
-            source: "elm";
-            action: STATE_SET "default" 0.0;
-            target: "focus_image";
-         }
-         program { name: "disable";
-            signal: "elm,state,disabled";
-            source: "elm";
-            action: STATE_SET "disabled" 0.0;
-            target: "disabler";
-            target: "elm.text";
-         }
-         program { name: "enable";
-            signal: "elm,state,enabled";
-            source: "elm";
-            action: STATE_SET "default" 0.0;
-            target: "disabler";
-            target: "elm.text";
-         }
-         program {
-            name: "multi_down";
-            signal: "elm,action,multi,down";
-            source: "elm";
-            script {
-               set_int(multi_down, 1);
-            }
-         }
-         program {
-            name: "multi_up";
-            signal: "elm,action,multi,up";
-            source: "elm";
-            script {
-               set_int(multi_down, 0);
-            }
-         }
-         program { name: "pass_event_enable";
-            signal: "elm,event,pass,enabled";
-            source: "elm";
-            script {
-               set_mouse_events(PART:"over", 0);
-               set_mouse_events(PART:"disabler", 0);
-            }
-         }
-         program { name: "pass_event_disable";
-            signal: "elm,event,pass,disabled";
-            source:"elm";
-            script {
-               set_mouse_events(PART:"over", 1);
-               set_mouse_events(PART:"disabler", 1);
-            }
-         }
-         program { name: "repeat_event_enable";
-            signal: "elm,event,repeat,enabled";
-            source: "elm";
-            script {
-               set_repeat_events(PART:"over", 1);
-               set_repeat_events(PART:"disabler", 1);
-            }
-         }
-         program { name: "repeat_event_disable";
-            signal: "elm,event,repeat,disabled";
-            source:"elm";
-            script {
-               set_repeat_events(PART:"over", 0);
-               set_repeat_events(PART:"disabler", 0);
-            }
-         }
-      }
-   }
-
-group { name: "elm/button/base/spinner/vertical_date_picker";
-   inherit: "elm/button/base/spinner/vertical";
-   parts {
-      part { name: "bg";
-         type: SPACER;
-         scale: 1;
-         description { state: "default" 0.0;
-            min: SPINNER_VERTICAL_DATE_PICKER_TEXT_BUTTON_SIZE_INC;
-         }
-      }
-      part { name: "elm.text";
-         type: TEXT;
-         scale: 1;
-         description { state: "default" 0.0;
-            min: 0 SPINNER_TEXT_HEIGHT_INC;
-            max: -1 SPINNER_TEXT_HEIGHT_INC;
-            fixed: 1 1;
-            color: 0 0 0 255;
-            rel1.to: "bg";
-            rel2.to: "bg";
-            text {
-               font: "TizenSans:style=Light";
-               size: 85;
-               ellipsis: 0.0;
-            }
-         }
-         description { state: "pressed" 0.0;
-            inherit: "default" 0.0 ;
-         }
-         description { state: "disabled" 0.0;
-            inherit: "default" 0.0 ;
-         }
-      }
-   }
-}
-/***********************SPINNER BUTTONS STYLES******************************/
-
 group { name: "elm/button/base/hoversel_vertical_entry/default";
    alias: "elm/button/base/hoversel_vertical_entry/entry";
    alias: "elm/button/base/hoversel_horizontal_entry/default";