diff --git a/data/elementary/themes/colorclasses.edc b/data/elementary/themes/colorclasses.edc
index 516d796e50..5513f0a88e 100644
--- a/data/elementary/themes/colorclasses.edc
+++ b/data/elementary/themes/colorclasses.edc
@@ -130,6 +130,9 @@ color_classes {
       color:   0   0   0  80; }
    color_class { name: "/dim/normal/hover";
       color:   0   0   0  64; }
+///////////////////////////////////////////////////////////////////////////////
+   color_class { name: "/bg/normal/colorclass/color";
+      color:  48  48   48 255; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/bg/normal/popup";
       color:  48  48   48 255; }
@@ -161,6 +164,8 @@ color_classes {
       color:  32  32  32 255; }
    color_class { name: "/bg/normal/colorselector/pattern";
       color:  48  48  48 255; }
+   color_class { name: "/bg/normal/colorselector/cursor";
+      color: 255 255 255 255; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/fg/normal/layout/content-back/title";
       color: 255 255 255 255; }
diff --git a/data/elementary/themes/edc/elm/colorclass.edc b/data/elementary/themes/edc/elm/colorclass.edc
index 947695a099..1719ca5429 100644
--- a/data/elementary/themes/edc/elm/colorclass.edc
+++ b/data/elementary/themes/edc/elm/colorclass.edc
@@ -3,10 +3,11 @@ group { "elm/layout/colorclass/base"; program_source: "elm"; nobroadcast;
       rect { "clip"; }
       rect { "remote_fader";
          desc { hid;
-            color: 0 0 0 0;
+            color_class: "/dim/normal/hover";
+            color: 255 255 255 0; // no cc
          }
-         desc { "vis";
-            color: 0 0 0 192;
+         desc { "vis"; inherit;
+            color: 255 255 255 255; // no cc
             link.base: "elm,state,remote";
          }
          program { signal: "mouse,down,1"; source: "remote_fader";
@@ -15,9 +16,8 @@ group { "elm/layout/colorclass/base"; program_source: "elm"; nobroadcast;
       }
       rect { "list_bg";
          desc {
-            color: 64 64 64 255;
-            rel1.to: "elm.swallow.list";
-            rel2.to: "elm.swallow.list";
+            color_class: "/bg/normal/colorclass";
+            rel.to: "elm.swallow.list";
          }
       }
       swallow { "elm.swallow.list";
@@ -30,30 +30,30 @@ group { "elm/layout/colorclass/base"; program_source: "elm"; nobroadcast;
       }
       rect { "fader";
          desc { hid;
-            color: 0 0 0 0;
+            color_class: "/dim/normal/hover";
+            color: 255 255 255 0; // no cc
          }
-         desc { "vis";
-            color: 0 0 0 192;
+         desc { "vis"; inherit; vis;
+            color: 255 255 255 255; // no cc
          }
-         desc { "vis_remote";
-            color: 0 0 0 0;
+         desc { "vis_remote"; inherit; vis;
+            color: 255 255 255 0; // no cc
          }
          program { signal: "mouse,down,1"; source: "fader";
             action: SIGNAL_EMIT "elm,colorclass,deactivate" "elm";
          }
       }
       rect { "bg";
+         scale;
          desc { hid;
-            rel1.to: "colors";
-            rel1.offset: -2 -2;
-            rel2.to: "colors";
-            color: 0 0 0 0;
+            rel1.offset: 40 40;
+            rel2.offset: -41 -41;
+            color: 255 255 255 0; // no cc
+            color_class: "/bg/normal/colorclass";
+            offscale;
          }
-         desc { "vis";
-            rel1.to: "colors";
-            rel1.offset: -2 -2;
-            rel2.to_x: "colors";
-            color: 0 0 0 225;
+         desc { "vis"; inherit;  vis;
+            color: 255 255 255 255; // no cc
          }
       }
       rect { "colorclip"; clip: "clip";
@@ -64,48 +64,53 @@ group { "elm/layout/colorclass/base"; program_source: "elm"; nobroadcast;
       }
       alias: "elm.swallow.colors" "colors:colors";
       group { "colors"; source: "colorclass/colors"; clip: "colorclip";
+         scale;
          desc { hid; align: 0 0;
-            rel1.relative: 1.1 0.1;
-            rel2.relative: 1.9 0;
+            offscale;
+            rel.to: "bg";
+            rel1.offset: 4 4;
+            rel2.offset: -5 -5;
+            rel2.relative: 1.0 0.0;
             rel2.to_y: "elm.swallow.reset";
             fixed: 1 1;
          }
-         desc { "vis"; align: 0 0;
-            rel1.relative: 0.1 0.1;
-            rel2.relative: 0.9 0;
-            rel2.to_y: "elm.swallow.reset";
+         desc { "vis"; inherit; vis;
             fixed: 1 1;
          }
       }
       swallow { "elm.swallow.reset"; clip: "clip";
+         scale;
          desc { hid; min: 40 24; max: 40 24;
-            align: 0.5 1;
-            rel1.relative: 1.0 0.0;
-            rel2.relative: 2.0 1.0;
+            rel.to: "bg";
+            align: 0.5 1.0;
             fixed: 1 1;
+            rel1.relative: 0.0 1.0;
+            rel1.offset: 4 -5;
+            rel2.offset: -5 -5;
+            min: 80 20;
+            offscale;
          }
          desc { "vis"; inherit: "default"; vis;
-            rel1.relative: 0.0 0.0;
-            rel2.relative: 1.0 1.0;
-         }         
+         }
       }
       rect { "text_bg";
          desc { hid;
-            color: 64 64 64 255;
-            fixed: 1 1;
+            color_class: "/bg/normal/colorclass/text";
             rel1.relative: 0.5 0.5;
             rel2.relative: 0.5 0.5;
+            color: 255 255 255 0; // no cc
          }
-         desc { "vis";
-            color: 64 64 64 255;
-            rel1.to: "elm.swallow.list";
-            rel2.to: "elm.swallow.list";
+         desc { "vis"; inherit; vis;
+            rel.to: "elm.swallow.list";
+            rel1.relative: 0.0 0.0;
+            rel2.relative: 1.0 1.0;
+            color: 255 255 255 255; // no cc
          }
       }
       text { "elm.text";
          scale;
          desc { hid;
-            color: FN_COL_DEFAULT_BASIC;
+            color_class: "/fg/normal/colorclass/text";
             rel1.relative: 0.1 0.1;
             rel2.relative: 0.9 0.9;
             text { font: FN; size: 10;
@@ -164,20 +169,18 @@ group { "colorclass/colors"; program_source: "elm"; nobroadcast;
    parts {
       rect { "glow"; nomouse;
          desc {
+            rel.to: "color1";
             rel1.offset: -7 -7;
-            rel1.to: "color1";
             rel2.offset: 8 8;
-            rel2.to: "color1";
             rel2.relative: 1 1;
             fixed: 1 1;
+            color: 0 0 0 0; // no cc
          }
          desc { "color2"; inherit: "default";
-            rel1.to: "color2";
-            rel2.to: "color2";
+            rel.to: "color2";
          }
          desc { "color3"; inherit: "default";
-            rel1.to: "color3";
-            rel2.to: "color3";
+            rel.to: "color3";
          }
       }
       group { "color1"; source: "colorclass/color1";
@@ -274,22 +277,25 @@ group { "colorclass/colors"; program_source: "elm"; nobroadcast;
 group { "colorclass/color1"; nomouse; nobroadcast;
    parts {
       rect { "event"; mouse;
-         desc { color: 0 0 0 0; fixed: 1 1; }
+         desc {
+            color: 0 0 0 0; // no cc
+            fixed: 1 1;
+         }
       }
       rect { "clip"; }
       rect { "bg"; clip: "clip";
          desc {
-            rel1.to: "color";
-            rel2.to: "color";
-            color: 48 48 48 255;
+            rel.to: "color";
+            color_class: "/bg/normal/colorclass/color";
             fixed: 1 1;
          }
       }
       rect { "color"; clip: "clip";
-         desc { align: 0 0;
+         scale;
+         desc { align: 0 0.5;
             min: 40 20;
             max: 40 20;
-            color: 255 255 255 255;
+            color: 255 255 255 255; // no cc
             color_class: "elm_colorclass_color1";
             fixed: 1 1;
          }
@@ -297,13 +303,14 @@ group { "colorclass/color1"; nomouse; nobroadcast;
       text { "text"; clip: "clip";
          scale: 1;
          desc { align: 0 0.5;
-            rel1.offset: 2 2;
+            rel1.offset: 4 4;
             rel1.to_x: "color";
             rel1.relative: 1.0 0.0;
-            rel2.offset: -3 -1;
-            rel2.relative: 0 1;
+            rel2.offset: -5 -5;
+            rel2.relative: 1.0 1.0;
             fixed: 1 1;
-            color: FN_COL_DEFAULT_BASIC;
+            color_class: "/fg/normal/colorclass/color/text";
+            offscale;
             text { font: FN; size: 10;
               min: 1 1;
               ellipsis: -1;