diff --git a/data/elementary/themes/edc/elm/panel.edc b/data/elementary/themes/edc/elm/panel.edc
index 926b45da8e..cb61d5caf8 100644
--- a/data/elementary/themes/edc/elm/panel.edc
+++ b/data/elementary/themes/edc/elm/panel.edc
@@ -47,17 +47,15 @@ group { name: "elm/scroller/panel/left/default";
          type: RECT;
          repeat_events: 1;
          description { state: "default" 0.0;
-            rel1.to: "elm.panel_area";
-            rel2.to: "elm.panel_area";
-            color: 0 0 0 0;
+            rel.to: "elm.panel_area";
+            color: 0 0 0 0; // no cc
          }
       }
       part { name: "bg";
          type: RECT;
          description { state: "default" 0.0;
-            rel1.to: "elm.panel_area";
-            rel2.to: "elm.panel_area";
-            color: 64 64 64 255;
+            rel.to: "elm.panel_area";
+            color_class: "/bg/normal/panel";
             visible: 0;
          }
          description { state: "visible" 0.0;
@@ -68,8 +66,7 @@ group { name: "elm/scroller/panel/left/default";
       part { name: "elm.swallow.content";
          type: SWALLOW;
          description { state: "default" 0.0;
-            rel1.to: "elm.panel_area";
-            rel2.to: "elm.panel_area";
+            rel.to: "elm.panel_area";
             visible: 0;
          }
          description { state: "visible" 0.0;
@@ -139,17 +136,15 @@ group { name: "elm/scroller/panel/right/default";
          type: RECT;
          repeat_events: 1;
          description { state: "default" 0.0;
-            rel1.to: "elm.panel_area";
-            rel2.to: "elm.panel_area";
-            color: 0 0 0 0;
+            rel.to: "elm.panel_area";
+            color: 0 0 0 0; // no cc
          }
       }
       part { name: "bg";
          type: RECT;
          description { state: "default" 0.0;
-            rel1.to: "elm.panel_area";
-            rel2.to: "elm.panel_area";
-            color: 64 64 64 255;
+            rel.to: "elm.panel_area";
+            color_class: "/bg/normal/panel";
             visible: 0;
          }
          description { state: "visible" 0.0;
@@ -160,8 +155,7 @@ group { name: "elm/scroller/panel/right/default";
       part { name: "elm.swallow.content";
          type: SWALLOW;
          description { state: "default" 0.0;
-            rel1.to: "elm.panel_area";
-            rel2.to: "elm.panel_area";
+            rel.to: "elm.panel_area";
             visible: 0;
          }
          description { state: "visible" 0.0;
@@ -231,17 +225,15 @@ group { name: "elm/scroller/panel/top/default";
          type: RECT;
          repeat_events: 1;
          description { state: "default" 0.0;
-            rel1.to: "elm.panel_area";
-            rel2.to: "elm.panel_area";
-            color: 0 0 0 0;
+            rel.to: "elm.panel_area";
+            color: 0 0 0 0; // no cc
          }
       }
       part { name: "bg";
          type: RECT;
          description { state: "default" 0.0;
-            rel1.to: "elm.panel_area";
-            rel2.to: "elm.panel_area";
-            color: 64 64 64 255;
+            rel.to: "elm.panel_area";
+            color_class: "/bg/normal/panel";
             visible: 0;
          }
          description { state: "visible" 0.0;
@@ -252,8 +244,7 @@ group { name: "elm/scroller/panel/top/default";
       part { name: "elm.swallow.content";
          type: SWALLOW;
          description { state: "default" 0.0;
-            rel1.to: "elm.panel_area";
-            rel2.to: "elm.panel_area";
+            rel.to: "elm.panel_area";
             visible: 0;
          }
          description { state: "visible" 0.0;
@@ -315,13 +306,13 @@ group { name: "elm/scroller/panel/bottom/default";
       part { name: "access.outline"; type: RECT; repeat_events: 1;
          description { state: "default" 0.0;
             rel.to: "elm.panel_area";
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
       }
       part { name: "bg"; type: RECT;
          description { state: "default" 0.0;
             rel.to: "elm.panel_area";
-            color: 64 64 64 255;
+            color_class: "/bg/normal/panel";
             visible: 0;
          }
          description { state: "visible" 0.0;
@@ -369,13 +360,14 @@ group { name: "elm/panel/left/default";
          description { state: "default" 0.0;
             rel.to: "base";
             WIN_SHADOW_SMALL;
+            color_class: "/shadow/normal/panel";
          }
       }
       part { name: "glow"; type: RECT; mouse_events: 0;
          scale: 1;
          description { state: "default" 0.0;
             rel.to: "base";
-            color: 51 153 255 255;
+            color_class: "/bg/selected/panel";
             visible: 0;
             offscale;
          }
@@ -395,7 +387,7 @@ group { name: "elm/panel/left/default";
             rel1.to_x: "all";
             rel2.to_x: "elm.swallow.event";
             rel2.relative: 0.0 1.0;
-            color: 64 64 64 255;
+            color_class: "/bg/normal/panel";
          }
       }
       part { name: "elm.swallow.content"; type: SWALLOW;
@@ -415,7 +407,7 @@ group { name: "elm/panel/left/default";
             align: 1.0 0.5;
             rel1.relative: 1.0 0.0;
             rel2.relative: 1.0 1.0;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
          description { state: "hidden" 0.0;
             inherit: "default" 0.0;
@@ -427,7 +419,7 @@ group { name: "elm/panel/left/default";
       part { name: "btn"; type: RECT;
          description { state: "default" 0.0;
             rel.to: "elm.swallow.event";
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
          description { state: "hidden" 0.0;
             rel.to: "elm.swallow.event";
@@ -440,6 +432,7 @@ group { name: "elm/panel/left/default";
             min: 30 30; max: 30 30;
             rel.to: "btn";
             image.normal: "i-arrow-l";
+            color_class: "/fg/normal/panel/arrow";
          }
          description { state: "hidden" 0.0;
             inherit: "default" 0.0;
@@ -682,14 +675,11 @@ group { name: "elm/panel/top/default";
             set_state_val(PART:"base", STATE_REL1_OFFSET, 0, h);
          }
       }
-      program {
-         signal: "elm,action,show"; source: "elm";
+      program { signal: "elm,action,show"; source: "elm";
          action: STATE_SET "default" 0.0;
          target: "icn";
       }
-      program {
-         signal: "edje,state,rtl"; 
-         source: "edje";
+      program { signal: "edje,state,rtl"; source: "edje";
          script {
             new st[31];
             new Float:vl;
@@ -700,9 +690,7 @@ group { name: "elm/panel/top/default";
               set_state(PART:"icn", "hidden", 0.0);
          }
       }
-      program {
-         signal: "edje,state,ltr"; 
-         source: "edje";
+      program { signal: "edje,state,ltr"; source: "edje";
          script {
             new st[31];
             new Float:vl;
@@ -713,8 +701,7 @@ group { name: "elm/panel/top/default";
               set_state(PART:"icn", "hidden", 0.0);
          }
       }
-      program {
-         signal: "elm,action,hide"; source: "elm";
+      program { signal: "elm,action,hide"; source: "elm";
          action: STATE_SET "hidden" 0.0;
          target: "icn";
       }