Stylistic changes with highlight color

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/style_manager/view/PropertyView.js

@@ -55,8 +55,8 @@ module.exports = Backbone.View.extend({
     const pfx = this.pfx;
     const ppfx = this.ppfx;
     const config = this.config;
-    const updatedCls = `${ppfx}active-color`;
-    const computedCls = `${ppfx}warn-color`;
+    const updatedCls = `${ppfx}color-hl`;
+    const computedCls = `${ppfx}color-warn`;
     const labelEl = this.$el.find(`> .${pfx}label`);
     const clearStyle = this.getClearEl().style;
     labelEl.removeClass(`${updatedCls} ${computedCls}`);

src/styles/scss/main.scss

@@ -88,18 +88,35 @@ $fontV: 20;//random(1000)
   transform: $v;
 }
 
-$colorActive: #71b7f1;
+/* Color Helpers */
+$colorHighlight: #71b7f1;
 $colorWarn: #ffca6f;
 
-.#{$app-prefix}active {
-  &-color {
-    color: $colorActive;
+.#{$app-prefix}bg {
+  &-main {
+    background-color: $mainColor;
   }
 }
 
-.#{$app-prefix}warn {
-  &-color {
+.#{$app-prefix}color {
+  &-main {
+    color: $fontColor;
+    fill: $fontColor;
+  }
+
+  &-active {
+    color: $fontColorActive;
+    fill: $fontColorActive;
+  }
+
+  &-warn {
     color: $colorWarn;
+    fill: $colorWarn;
+  }
+
+  &-hl {
+    color: $colorHighlight;
+    fill: $colorHighlight;
   }
 }
 
@@ -158,20 +175,6 @@ $colorWarn: #ffca6f;
   pointer-events: none;
 }
 
-.#{$app-prefix}bg-main{
-  background-color: $mainColor;
-}
-
-.#{$app-prefix}color-main {
-  color: $fontColor;
-  fill: $fontColor;
-}
-
-.#{$app-prefix}color-active {
-  color: $fontColorActive;
-  fill: $fontColorActive;
-}
-
 .#{$app-prefix}bdrag {
   pointer-events: none !important;
   position: absolute !important;