Seperated brand styles over themes.

assets/css/like.css

+.vote-like {
+  background-color: #e6e6e6;
+}
+
+.vote-like a[title="Like"]:not(.voted-like) .icon-gray:hover {
+  stroke: #d9534f;
+  fill: transparent;
+}
+
+.vote-like a[title="Like"].voted-like .icon-gray {
+  fill: #d9534f;
+  stroke: #d9534f;
+}

components/03-molecules/like/like.scss

+@import "settings";
+
+.vote-like {
+  background-color: $gray-lighter;
+
+  a[title="Like"] {
+
+    &:not(.voted-like) .icon-gray:hover {
+      stroke: $brand-danger;
+      fill: transparent;
+    }
+
+    &.voted-like .icon-gray {
+      fill: $brand-danger;
+      stroke: $brand-danger;
+    }
+
+  }
+
+}

socialblue.info.yml

@@ -10,7 +10,7 @@ version: '1.0'
 
 libraries:
   - socialblue/brand
-  
+
 libraries-extend:
   socialbase/base:
     - socialblue/base
@@ -37,6 +37,8 @@ libraries-extend:
     - socialblue/form-elements
   socialbase/form--input-groups:
     - socialblue/form--input-groups
+  socialbase/like:
+    - socialblue/like
   # attach the datepicker stylesheet to all date fields
   core/drupal.date:
     - socialblue/form--datepicker

socialblue.libraries.yml

@@ -8,7 +8,7 @@ brand:
   css:
     brand:
       assets/css/brand.css: {}
-      
+
 ## 2. The SMACSS category Component — discrete, reusable UI elements
 
 ### 2.1 Atoms
@@ -92,6 +92,11 @@ form--timepicker:
     theme:
       assets/css/timepicker.css: {}
 
+like:
+  css:
+    theme:
+      assets/css/like.css: {}
+
 nav-book:
   css:
     theme: