diff --git a/data/elementary/themes/colorclasses.edc b/data/elementary/themes/colorclasses.edc
index 7a0d33ccca..5b486dd6a4 100644
--- a/data/elementary/themes/colorclasses.edc
+++ b/data/elementary/themes/colorclasses.edc
@@ -1,112 +1,140 @@
 color_classes {
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/bg";
-      color:  64  64  64 255; description: "Base background"; }
+      color:  64  64  64 255; }
    color_class { name: "/bg-alt";
-      color:  56  56  56 255; description: "Base background alternate"; }
+      color:  56  56  56 255; }
    color_class { name: "/bg-dark";
-      color:  32  32  32 255; description: "Base background dark"; }
+      color:  32  32  32 255; }
    color_class { name: "/bg-dark-alt";
-      color:  28  28  28 255; description: "Base background dark alternate"; }
+      color:  28  28  28 255; }
    color_class { name: "/bg-light";
-      color: 192 192 192 255; description: "Base background light"; }
+      color: 192 192 192 255; }
    color_class { name: "/bg-light-alt";
-      color: 184 184 184 255; description: "Base background light alternate"; }
+      color: 184 184 184 255; }
    color_class { name: "/bg/selected";
-      color:  51 153 255 255; description: "Base background - selected"; }
+      color:  51 153 255 255; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/fg";
-      color: 160 160 160 255; description: "Base foreground"; }
+      color: 160 160 160 255; }
    color_class { name: "/fg/disabled";
-      color:  80  80  80 255; description: "Base foreground - disabled"; }
+      color:  80  80  80 255; }
    color_class { name: "/fg/pressed";
-      color: 255 255 255 255; description: "Base foreground - pressed"; }
+      color: 255 255 255 255; }
    color_class { name: "/fg/selected";
-      color: 255 255 255 255; description: "Base foreground - selected"; }
+      color: 255 255 255 255; }
    color_class { name: "/fg/selected-pressed";
-      color: 220 220 220 255; description: "Base foreground - selected pressed"; }
+      color: 220 220 220 255; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/shadow";
-      color:   0   0   0 128; description: "Base shadow"; }
+      color:   0   0   0 128; }
    color_class { name: "/shadow/pressed";
-      color:   0   0   0 255; description: "Base shadow - pressed"; }
+      color:   0   0   0 255; }
    color_class { name: "/shadow/disabled";
-      color:   0   0   0  64; description: "Base shadow - disabled"; }
+      color:   0   0   0  64; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/dim";
-      color:   0   0   0 200; description: "Base dimming area"; }
+      color:   0   0   0 200; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/bg/normal/access";
-      color: 255 153  51  64; description: "Access background"; }
+      color: 255 153  51  64; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/bg/normal/titlebar";
-      color:  64  64  64 255; description: "Titlebar background"; }
+      color:  64  64  64 255; }
    color_class { name: "/bg/selected/titlebar";
-      color:  32  32  32 255; description: "Titlebar background - selected"; }
+      color:  32  32  32 255; }
    color_class { name: "/bg/normal/border";
-      color:  64  64  64 255; description: "Border background"; }
+      color:  64  64  64 255; }
    color_class { name: "/bg/selected/border";
-      color:  64  64  64 255; description: "Border background - selected"; }
+      color:  64  64  64 255; }
    color_class { name: "/bg/normal/win-blocker";
-      color:  64  64  64 255; description: "Window blocker"; }
+      color:  64  64  64 255; }
    color_class { name: "/bg/selected/win-blocker";
-      color:  64  64  64 255; description: "Window blocker - selected"; }
+      color:  64  64  64 255; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/bg/normal/entry";
-      color:  48  48  48 255; description: "Entry background"; }
+      color:  48  48  48 255; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/fg/normal/text-heading";
-      color: 255 255 255 255; description: "Heading text foreground"; }
+      color: 255 255 255 255; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/fg/normal/text-heading-sub";
-      color: 255 255 255 255; description: "Sub-Heading text foreground"; }
+      color: 255 255 255 255; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/fg/normal/text-hilight";
-      color: 255 255 255 255; description: "Hilight text foreground"; }
+      color: 255 255 255 255; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/fg/normal/text-overlay";
-      color: 160 160 160 255; description: "Overlay text foreground"; }
+      color: 160 160 160 255; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/fg/normal/text-subtle";
-      color:   0   0   0  64; description: "Overlay text foreground"; }
+      color:   0   0   0  64; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/bg/normal/button";
-      color:  96  96  96 255; description: "Button background"; }
+      color:  96  96  96 255; }
    color_class { name: "/bg/pressed/button";
-      color:  80  80  80 255; description: "Button background - pressed"; }
+      color:  80  80  80 255; }
    color_class { name: "/bg/disabled/button";
-      color:  64  64  64 255; description: "Button background - disabled"; }
+      color:  64  64  64 255; }
    color_class { name: "/fg/normal/button";
-      color: 192 192 192 255; description: "Button foreground"; }
+      color: 192 192 192 255; }
    color_class { name: "/fg/pressed/button";
-      color: 255 255 255 255; description: "Button foreground - pressed"; }
+      color: 255 255 255 255; }
    color_class { name: "/fg/disabled/button";
-      color:  97  96  96 255; description: "Button foreground - disabled"; }
+      color:  97  96  96 255; }
    color_class { name: "/bg/normal/button-overlay";
-      color:   0   0   0 160; description: "Button (overlay) background"; }
+      color:   0   0   0 160; }
    color_class { name: "/bg/pressed/button-overlay";
-      color:   0   0   0 200; description: "Button (overlay) background - pressed"; }
+      color:   0   0   0 200; }
    color_class { name: "/bg/disabled/button-overlay";
-      color:   0   0   0  80; description: "Button (overlay) background - disabled"; }
+      color:   0   0   0  80; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/bg/normal/menu/item";
-      color:  32  32  32   0; description: "Menu item background"; }
+      color:  32  32  32   0; }
    color_class { name: "/bg/selected/menu/item";
-      color:  32  32  32 255; description: "Menu item background - selected"; }
+      color:  32  32  32 255; }
    color_class { name: "/fg/normal/menu/item";
-      color: 160 160 160 255; description: "Menu item foreground"; }
+      color: 160 160 160 255; }
    color_class { name: "/fg/selected/menu/item";
-      color: 255 255 255 255; description: "Menu item foreground - selected"; }
+      color: 255 255 255 255; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/bg-alt/normal/list/group";
-      color:  32  32  32 255; description: "List group background"; }
+      color:  32  32  32 255; }
    color_class { name: "/fg-alt/normal/list/group";
-      color: 255 255 255 255; description: "List group foreground"; }
+      color: 255 255 255 255; }
 ///////////////////////////////////////////////////////////////////////////////
    color_class { name: "/bg/normal/frame/title";
-      color:  80  80  80 255; description: "Frame title background"; }
+      color:  80  80  80 255; }
    color_class { name: "/fg/normal/frame/title";
-      color: 255 255 255 255; description: "Frame title foreground"; }
+      color: 255 255 255 255; }
+///////////////////////////////////////////////////////////////////////////////
+   color_class { name: "/bg/normal/actionslider/base";
+      color:   0   0   0  64; }
+   color_class { name: "/bg/disabled/actionslider/base";
+      color:   0   0   0  32; }
+   color_class { name: "/fg/normal/actionslider";
+      color: 160 160 160 255; }
+   color_class { name: "/fg/disabled/actionslider";
+      color:  96  96  96 255; }
+   color_class { name: "/bg/normal/actionslider/button";
+      color:  96  96  96 255; }
+   color_class { name: "/bg/disabled/actionslider/button";
+      color:  72  72  72 255; }
+   color_class { name: "/bg/pressed/actionslider/button";
+      color:  51 153 255 255; }
+   color_class { name: "/fg/normal/actionslider/button";
+      color: 192 192 192 255; }
+   color_class { name: "/fg/disabled/actionslider/button";
+      color:  96  96  96 255; }
+   color_class { name: "/fg/pressed/actionslider/button";
+      color: 255 255 255 255; }
+   color_class { name: "/bg/normal/actionslider/bar";
+      color:  51 153 255 255; }
+///////////////////////////////////////////////////////////////////////////////
+   color_class { name: "/fg/normal/bubble/text";
+      color: 255 255 255 255; }
+   color_class { name: "/fg/normal/bubble/info";
+      color: 160 160 160 255; }
 
 
 
diff --git a/data/elementary/themes/edc/elm/actionslider.edc b/data/elementary/themes/edc/elm/actionslider.edc
index 655e09a46a..837d8e754f 100644
--- a/data/elementary/themes/edc/elm/actionslider.edc
+++ b/data/elementary/themes/edc/elm/actionslider.edc
@@ -4,11 +4,11 @@ group { name: "elm/actionslider/base/default";
          scale: 1;
          description { state: "default" 0.0;
             min: 120 20;
-            color: 0 0 0 64;
+            color_class: "/bg/normal/actionslider/base";
          }
          description { state: "disabled" 0.0;
             inherit: "default" 0.0;
-            color: 0 0 0 0;
+            color_class: "/bg/disabled/actionslider/base";
          }
       }
       part { name: "icon_dragable_area"; type: SPACER;
@@ -19,7 +19,7 @@ group { name: "elm/actionslider/base/default";
       part { name: "elm.text.left"; type: TEXT;
          scale: 1;
          description { state: "default" 0.0;
-            color: 160 160 160 255;
+            color_class: "/fg/normal/actionslider/left";
             rel1.offset: 4 4;
             rel2.offset: -5 -5;
             text { font: FN; size: 10;
@@ -32,13 +32,13 @@ group { name: "elm/actionslider/base/default";
          }
          description { state: "disabled" 0.0;
             inherit: "default" 0.0;
-            color: 96 96 96 255;
+            color_class: "/fg/disabled/actionslider/left";
          }
       }
       part { name: "elm.text.center"; type: TEXT;
          scale: 1;
          description { state: "default" 0.0;
-            color: 160 160 160 255;
+            color_class: "/fg/normal/actionslider/center";
             rel1.offset: 4 4;
             rel2.offset: -5 -5;
             text { font: FN; size: 10;
@@ -51,13 +51,13 @@ group { name: "elm/actionslider/base/default";
          }
          description { state: "disabled" 0.0;
             inherit: "default" 0.0;
-            color: 96 96 96 255;
+            color_class: "/fg/disabled/actionslider/center";
          }
       }
       part { name: "elm.text.right"; type: TEXT;
          scale: 1;
          description { state: "default" 0.0;
-            color: 160 160 160 255;
+            color_class: "/fg/normal/actionslider/right";
             rel1.offset: 4 4;
             rel2.offset: -5 -5;
             text { font: FN; size: 10;
@@ -70,7 +70,7 @@ group { name: "elm/actionslider/base/default";
          }
          description { state: "disabled" 0.0;
             inherit: "default" 0.0;
-            color: 96 96 96 255;
+            color_class: "/fg/disabled/actionslider/right";
          }
       }
       part { name: "elm.drag_button_base"; type: SWALLOW; mouse_events: 0;
@@ -95,7 +95,7 @@ group { name: "elm/actionslider/base/default";
          scale: 1;
          description { state: "default" 0.0;
             min: 40 20;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
             rel1.to_x: "elm.drag_button_base";
             rel1.to_y: "icon_dragable_area";
             rel2.to_x: "elm.drag_button_base";
@@ -108,15 +108,15 @@ group { name: "elm/actionslider/base/default";
       part { name: "drag_button"; type: RECT; mouse_events: 0;
          description { state: "default" 0.0;
             rel.to: "elm.drag_button";
-            color: 96 96 96 255;
+            color_class: "/bg/normal/actionslider/button";
          }
          description { state: "disabled" 0.0;
             inherit: "default" 0.0;
-            color: 72 72 72 255;
+            color_class: "/bg/disabled/actionslider/button";
          }
          description { state: "clicked" 0.0;
             inherit: "default" 0.0;
-            color: 51 153 255 255;
+            color_class: "/bg/pressed/actionslider/button";
          }
       }
       part { name: "elm.text.indicator"; type: TEXT; mouse_events: 0;
@@ -125,7 +125,7 @@ group { name: "elm/actionslider/base/default";
             rel.to: "drag_button";
             rel1.offset: 4 4;
             rel2.offset: -5 -5;
-            color: 192 192 192 255;
+            color_class: "/fg/normal/actionslider/button";
             text {
                font: FN; size: 10;
                align: 0.5 0.5;
@@ -135,16 +135,16 @@ group { name: "elm/actionslider/base/default";
          }
          description { state: "disabled" 0.0;
             inherit: "default" 0.0;
-            color: 96 96 96 255;
+            color_class: "/fg/disabled/actionslider/button";
          }
          description { state: "clicked" 0.0;
             inherit: "default" 0.0;
-            color: 255 255 255 255;
+            color_class: "/fg/pressed/actionslider/button";
          }
       }
       part { name: "disabler"; type: RECT;
          description { state: "default" 0.0;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
             visible: 0;
          }
          description { state: "disabled" 0.0;
@@ -213,7 +213,7 @@ group { name: "elm/actionslider/base/bar";
       part { name: "bar"; type: RECT; mouse_events: 0;
          insert_before: "elm.drag_button_base";
          description { state: "default" 0.0;
-            color: 51 153 255 128;
+            color_class: "/bg/normal/actionslider/bar";
             rel1.to: "bg";
             rel2 {
                relative: 0.0 1.0;
diff --git a/data/elementary/themes/edc/elm/border.edc b/data/elementary/themes/edc/elm/border.edc
index 0850a33516..f4b0f51e54 100644
--- a/data/elementary/themes/edc/elm/border.edc
+++ b/data/elementary/themes/edc/elm/border.edc
@@ -413,7 +413,7 @@ group { name: "elm/border/base/default";
             rel2.to: "top_clip";
             align: 0.0 0.5;
             aspect: 1.0 1.0; aspect_preference: VERTICAL;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
       }
       rect {  "elm.event.titlebar";
@@ -425,7 +425,7 @@ group { name: "elm/border/base/default";
             rel2.offset: 0 -1;
             rel2.to_x: "elm.event.minimize";
             rel2.to_y: "top_clip";
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
       }
       rect {  "elm.event.close";
@@ -435,7 +435,7 @@ group { name: "elm/border/base/default";
             rel2.relative: 1.0 1.0;
             align: 1.0 0.5;
             aspect: 1.0 1.0; aspect_preference: VERTICAL;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
       }
       rect {  "elm.event.maximize";
@@ -449,7 +449,7 @@ group { name: "elm/border/base/default";
             rel2.to_y: "top_clip";
             align: 1.0 0.5;
             aspect: 1.0 1.0; aspect_preference: VERTICAL;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
       }
       rect {  "elm.event.minimize";
@@ -463,7 +463,7 @@ group { name: "elm/border/base/default";
             rel2.to_x: "elm.event.maximize";
             align: 1.0 0.5;
             aspect: 1.0 1.0; aspect_preference: VERTICAL;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
       }
       rect { "top_resize_clip";
@@ -485,7 +485,7 @@ group { name: "elm/border/base/default";
             rel2.offset: 31 3;
             min: 40 6;
             align: 1.0 1.0;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
             fixed: 1 1;
          }
          desc { "hidden"; inherit: "default"; hid; }
@@ -500,7 +500,7 @@ group { name: "elm/border/base/default";
             rel2.relative: 0.0 1.0;
             min: 0 6;
             align: 0.5 1.0;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
             fixed: 1 1;
          }
          desc { "hidden"; inherit: "default"; hid; }
@@ -516,7 +516,7 @@ group { name: "elm/border/base/default";
             rel2.offset: -1 3;
             min: 40 6;
             align: 0.0 1.0;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
             fixed: 1 1;
          }
          desc { "hidden"; inherit: "default"; hid; }
@@ -568,7 +568,7 @@ group { name: "elm/border/base/default";
             rel2.offset: 31 -1;
             min: 40 10;
             align: 0.0 0.5;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
             fixed: 1 1;
             offscale;
          }
@@ -584,7 +584,7 @@ group { name: "elm/border/base/default";
             rel2.relative: 0.0 1.0;
             min: 0 10;
             align: 0.5 0.5;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
             fixed: 1 1;
             offscale;
          }
@@ -599,7 +599,7 @@ group { name: "elm/border/base/default";
             rel1.offset: -32 0;
             min: 40 10;
             align: 0.0 0.5;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
             fixed: 1 1;
             offscale;
          }
@@ -608,12 +608,12 @@ group { name: "elm/border/base/default";
       rect { "indicator_bg";
          clip: "bg_clip";
          desc { "default";
-            color: 148 23 45 255;
+            color: 148 23 45 255; // never see this...
             rel.to: "elm.swallow.indicator";
          }
          desc { "bg_transparent";
             inherit: "default";
-            color: 0 0 0 0;
+            color: 0 0 0 0; // never see this...
          }
       }
       swallow { "elm.swallow.indicator";
diff --git a/data/elementary/themes/edc/elm/bubble.edc b/data/elementary/themes/edc/elm/bubble.edc
index b7aa5c4c47..61a9c0d0ef 100644
--- a/data/elementary/themes/edc/elm/bubble.edc
+++ b/data/elementary/themes/edc/elm/bubble.edc
@@ -5,7 +5,7 @@ group { name: "elm/bubble/top_left/default";
    parts {
       part { name: "event"; type: RECT;
          description { state: "default" 0.0;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
       }
       part { name: "elm.swallow.icon"; type: SWALLOW;
@@ -43,7 +43,7 @@ group { name: "elm/bubble/top_left/default";
                relative: 0.0 0.0;
                offset: -5 4;
             }
-            color: 255 255 255 255;
+            color_class: "/fg/normal/bubble/text";
             offscale;
             text { font: FNBD; size: 10;
                min: 0 1;
@@ -62,7 +62,7 @@ group { name: "elm/bubble/top_left/default";
             rel1.offset: -5 4;
             rel2.relative: 1.0 0.0;
             rel2.offset: -5 4;
-            color: 160 160 160 255;
+            color_class: "/fg/normal/bubble/info";
             offscale;
             text { font: FNBD; size: 10;
                min: 1 1;
@@ -76,7 +76,7 @@ group { name: "elm/bubble/top_left/default";
       part { name: "base"; mouse_events:  0;
          scale: 1;
          description { state: "default" 0.0;
-            color: 48 48 48 255;
+            color_class: "/bg/normal/bubble";
             rel1 {
                to_y: "elm.swallow.icon";
                relative: 0.0 1.0;
@@ -98,9 +98,8 @@ group { name: "elm/bubble/top_left/default";
       part { name: "elm.swallow.content"; type: SWALLOW;
          scale: 1;
          description { state: "default" 0.0;
-            rel1.to: "base";
+            rel.to: "base";
             rel1.offset: 5 9;
-            rel2.to: "base";
             rel2.offset: -6 -7;
             offscale;
          }
@@ -132,7 +131,7 @@ group { name: "elm/bubble/top_right/default";
    parts {
       part { name: "event"; type: RECT;
          description { state: "default" 0.0;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
       }
       part { name: "elm.swallow.icon"; type: SWALLOW;
@@ -168,7 +167,7 @@ group { name: "elm/bubble/top_right/default";
                relative: 0.0 0.0;
                offset: -5 4;
             }
-            color: 255 255 255 255;
+            color_class: "/fg/normal/bubble/text";
             offscale;
             text { font: FNBD; size: 10;
                min: 0 1;
@@ -188,7 +187,7 @@ group { name: "elm/bubble/top_right/default";
             rel2.to_x: "elm.swallow.icon";
             rel2.relative: 0.0 0.0;
             rel2.offset: -5 4;
-            color: 160 160 160 255;
+            color_class: "/fg/normal/bubble/info";
             offscale;
             text { font: FNBD; size: 10;
                min: 1 1;
@@ -202,7 +201,7 @@ group { name: "elm/bubble/top_right/default";
       part { name: "base"; mouse_events:  0;
          scale: 1;
          description { state: "default" 0.0;
-            color: 48 48 48 255;
+            color_class: "/bg/normal/bubble";
             rel1 {
                to_y: "elm.swallow.icon";
                relative: 0.0 1.0;
@@ -224,9 +223,8 @@ group { name: "elm/bubble/top_right/default";
       part { name: "elm.swallow.content"; type: SWALLOW;
          scale: 1;
          description { state: "default" 0.0;
-            rel1.to: "base";
+            rel.to: "base";
             rel1.offset: 5 9;
-            rel2.to: "base";
             rel2.offset: -6 -7;
             offscale;
          }
@@ -258,7 +256,7 @@ group { name: "elm/bubble/bottom_left/default";
    parts {
       part { name: "event"; type: RECT;
          description { state: "default" 0.0;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
       }
       part { name: "elm.swallow.icon"; type: SWALLOW;
@@ -297,7 +295,8 @@ group { name: "elm/bubble/bottom_left/default";
                relative: 0.0 1.0;
                offset: -5 -5;
             }
-            color: 255 255 255 255;
+            offscale;
+            color_class: "/fg/normal/bubble/text";
             text { font: FNBD; size: 10;
                min: 0 1;
                max: 0 1;
@@ -315,7 +314,8 @@ group { name: "elm/bubble/bottom_left/default";
             rel1.offset: -5 -5;
             rel2.relative: 1.0 1.0;
             rel2.offset: -5 -5;
-            color: 160 160 160 255;
+            offscale;
+            color_class: "/fg/normal/bubble/info";
             text { font: FNBD; size: 10;
                min: 1 1;
                ellipsis: -1;
@@ -326,8 +326,9 @@ group { name: "elm/bubble/bottom_left/default";
          }
       }
       part { name: "base"; mouse_events:  0;
+         scale: 1;
          description { state: "default" 0.0;
-            color: 48 48 48 255;
+            color_class: "/bg/normal/bubble";
             rel1.offset: 4 4;
             rel2 {
                to_y: "elm.swallow.icon";
@@ -338,6 +339,7 @@ group { name: "elm/bubble/bottom_left/default";
             image.border: 24 0 0 13;
             image.middle: SOLID;
             fill.smooth: 0;
+            offscale;
          }
          description { state: "rtl" 0.0;
             inherit: "default" 0.0;
@@ -348,9 +350,8 @@ group { name: "elm/bubble/bottom_left/default";
       part { name: "elm.swallow.content";
          type: SWALLOW;
          description { state: "default" 0.0;
-            rel1.to: "base";
+            rel.to: "base";
             rel1.offset: 5 4;
-            rel2.to: "base";
             rel2.offset: -6 -12;
          }
       }
@@ -381,7 +382,7 @@ group { name: "elm/bubble/bottom_right/default";
    parts {
       part { name: "event"; type: RECT;
          description { state: "default" 0.0;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
       }
       part { name: "elm.swallow.icon"; type: SWALLOW;
@@ -421,7 +422,7 @@ group { name: "elm/bubble/bottom_right/default";
                relative: 0.0 1.0;
                offset: -5 -5;
             }
-            color: 255 255 255 255;
+            color_class: "/fg/normal/bubble/text";
             offscale;
             text { font: FNBD; size: 10;
                min: 0 1;
@@ -442,7 +443,7 @@ group { name: "elm/bubble/bottom_right/default";
             rel2.relative: 0.0 1.0;
             rel2.offset: -5 -5;
             offscale;
-            color: 160 160 160 255;
+            color_class: "/fg/normal/bubble/info";
             text { font: FNBD; size: 10;
                min: 1 1;
                ellipsis: -1;
@@ -453,8 +454,9 @@ group { name: "elm/bubble/bottom_right/default";
          }
       }
       part { name: "base"; mouse_events:  0;
+         scale: 1;
          description { state: "default" 0.0;
-            color: 48 48 48 255;
+            color_class: "/bg/normal/bubble";
             rel1.offset: 4 4;
             rel2 {
                to_y: "elm.swallow.icon";
@@ -465,6 +467,7 @@ group { name: "elm/bubble/bottom_right/default";
             image.border: 0 24 0 13;
             image.middle: SOLID;
             fill.smooth: 0;
+            offscale;
          }
          description { state: "rtl" 0.0;
             inherit: "default" 0.0;
@@ -475,9 +478,8 @@ group { name: "elm/bubble/bottom_right/default";
       part { name: "elm.swallow.content";
          type: SWALLOW;
          description { state: "default" 0.0;
-            rel1.to: "base";
+            rel.to: "base";
             rel1.offset: 5 4;
-            rel2.to: "base";
             rel2.offset: -6 -12;
          }
       }