hover colors and color transition

resources/frontend_client/app/card/partials/_card_favorite.html

 <a href="#" class="animate-pop" ng-click="toggleFavorite()">
-    <mb-icon name="star" width="18px" height="18px" ng-class="{'text-grey-1' : !favorite, 'text-gold': favorite }"></mb-icon>
+    <mb-icon
+        name="star"
+        width="18px"
+        height="18px"
+        class="text-grey-1"
+        ng-class="{ 'text-grey-1 text-gold-hover' : !favorite,
+                    'text-gold text-grey-1-hover': favorite,
+                    'transition-color': true
+                    }"
+    >
+    </mb-icon>
 </a>

resources/frontend_client/app/css/core/colors.css

@@ -25,14 +25,16 @@
 }
 
 /* brand */
-.text-brand {
-  color: var(--brand-color);
+.text-brand,
+.text-brand-hover:hover {
+    color: var(--brand-color);
 }
 
 .bg-brand {
   background-color: var(--brand-color);
 }
 
+
 /* success */
 
 .text-success {
@@ -62,7 +64,8 @@
 }
 
 /* favorite */
-.text-gold {
+.text-gold,
+.text-gold-hover:hover {
     color: var(--gold-color);
 }
 
@@ -72,10 +75,17 @@
 
 /* grey */
 
-.text-grey-1 { color: color(var(--base-grey) shade(10%)) }
-.text-grey-2 { color: color(var(--base-grey) shade(20%)) }
-.text-grey-3 { color: color(var(--base-grey) shade(30%)) }
-.text-grey-4 { color: color(var(--base-grey) shade(40%)) }
+.text-grey-1,
+.text-grey-1-hover:hover { color: color(var(--base-grey) shade(10%)) }
+
+.text-grey-2,
+.text-grey-2-hover:hover { color: color(var(--base-grey) shade(20%)) }
+
+.text-grey-3,
+.text-grey-3-hover:hover { color: color(var(--base-grey) shade(30%)) }
+
+.text-grey-4,
+.text-grey-4-hover:hover { color: color(var(--base-grey) shade(40%)) }
 
 .bg-grey-1 { background-color: color(var(--base-grey) shade(10%)) }
 .bg-grey-2 { background-color: color(var(--base-grey) shade(20%)) }

resources/frontend_client/app/css/core/transitions.css

+.transition-color {
+    transition: color .3s linear;
+}