Switch to more straight forward scss $var names

src/css/themes/blue/_colors.scss

@@ -1,4 +1,4 @@
-$gold-primary: #ECB200;
-$gold-secondary: lighten($gold-primary, 5%);
-$blue-primary: darken(#e4eff8, 35%);
-$white-primary: #FFF;
+$gold1: #ECB200;
+$gold2: lighten($gold1, 5%);
+$blue1: darken(#e4eff8, 35%);
+$white: #FFF;

src/css/themes/blue/_layout.scss

@@ -2,10 +2,10 @@
   @import "colors";
 
   .row.title {
-    color: $blue-primary;
+    color: $blue1;
   }
 
   .row.dropdown-row .react-select {
-    color: $gold-primary;
+    color: $gold1;
   }
 }

src/css/themes/blue/components/_Icon.scss

@@ -1,31 +1,31 @@
 
 .play.icon {
-  fill: $blue-primary;
-  stroke: darken($blue-primary, 40%);
+  fill: $blue1;
+  stroke: darken($blue1, 40%);
   stroke-width: 2px;
 }
 
 .pause.icon {
   background: unset;
   rect {
-    fill: $blue-primary;
-    stroke: darken($blue-primary, 40%);
+    fill: $blue1;
+    stroke: darken($blue1, 40%);
     stroke-width: 1px;
   }
 }
 
 .refresh.icon {
   background: unset;
-  fill: $blue-primary;
+  fill: $blue1;
 }
 
 .stalled.icon {
-  div { background: $gold-secondary; }
+  div { background: $gold2; }
 }
 
 .sound-on.icon, .sound-off.icon {
   polygon {
-    fill: $blue-primary;
+    fill: $blue1;
     stroke-width: 2;
   }
 }

src/css/themes/blue/components/_Select.scss

@@ -2,10 +2,10 @@
   @import "themes/blue/colors";
   .react-select.theme {
     .selected-option.blue .circle {
-      background: $blue-primary;
+      background: $blue1;
     }
     ul li.blue .circle {
-      background: $blue-primary;
+      background: $blue1;
     }
   }
 }

src/css/themes/blue/pages/_SurahIndex.scss

@@ -7,17 +7,17 @@
 
   ul.body.index li.surah a {
     &:active, &:link, &:visited {
-      color: $blue-primary;
+      color: $blue1;
     }
 
     div:first-child .id {
-      color: $gold-secondary;
+      color: $gold2;
     }
   }
 
   .row.surah.choose-random {
     &:active, &:link, &:visited {
-      color: $blue-primary;
+      color: $blue1;
       text-decoration: none;
     }
     &:hover {

src/css/themes/blue/pages/_SurahStream.scss

@@ -3,17 +3,17 @@
   @import "themes/blue/components/Icon";
 
   .row.details {
-    color: $gold-primary;
+    color: $gold1;
   }
 
   .row.footer .timer {
-    color: $blue-primary;
+    color: $blue1;
   }
 
   ul.body.stream {
     li.ayah {
       span.title span {
-        color: $gold-primary;
+        color: $gold1;
       }
       p { }
     }
@@ -26,7 +26,7 @@
   .row.dropdown-row {
     line-height: 30px;
     span.surah-name {
-      color: lighten($gold-primary, 25%);
+      color: lighten($gold1, 25%);
     }
   }
 }

src/css/themes/green/_colors.scss

@@ -1,2 +1,2 @@
-$green: #606850;
-$white-primary: #FFF;
+$green1: #606850;
+$white: #FFF;

src/css/themes/green/_layout.scss

@@ -2,11 +2,11 @@
   @import "colors";
 
   .row.title {
-    color: $green;
+    color: $green1;
   }
 
   .row.dropdown-row .react-select {
     background-color: transparent;
-    color: $green;
+    color: $green1;
   }
 }

src/css/themes/green/components/_Icon.scss

@@ -2,8 +2,8 @@
   .play.icon {
     background: unset;
     g path {
-      fill: $green;
-      stroke: $green;
+      fill: $green1;
+      stroke: $green1;
       stroke-width: 3px;
     }
   }
@@ -11,14 +11,14 @@
   .pause.icon {
     background: unset;
     g rect {
-      fill: $green;
-      stroke: $green;
+      fill: $green1;
+      stroke: $green1;
       stroke-width: 1px;
     }
   }
 
   .refresh.icon {
     background: unset;
-    fill: $green;
+    fill: $green1;
   }
 }

src/css/themes/green/components/_Select.scss

@@ -2,10 +2,10 @@
   @import "themes/green/colors";
   .react-select.theme {
     .selected-option.green .circle {
-      background: $green;
+      background: $green1;
     }
     ul li.green .circle {
-      background: $green;
+      background: $green1;
     }
   }
 }

src/css/themes/green/pages/_SurahIndex.scss

@@ -3,12 +3,12 @@
 
   ul.body.index a {
     &:active, &:link, &:visited {
-      color: $green;
+      color: $green1;
     }
 
     .surah.id {
-      background: $green;
-      color: $white-primary;
+      background: $green1;
+      color: $white;
       border-radius: 5px;
       padding: 3px;
     }
@@ -16,7 +16,7 @@
 
   .row.surah.choose-random {
     &:active, &:link, &:visited {
-      color: $green;
+      color: $green1;
       text-decoration: none;
     }
     &:hover {

src/css/themes/green/pages/_SurahStream.scss

@@ -3,31 +3,31 @@
   @import "themes/green/components/Icon";
 
   .row.details {
-    color: $green;
+    color: $green1;
   }
 
   ul.body.stream li.ayah {
     span.title span:first-child {
-      color: $green;
+      color: $green1;
     }
   }
 
   .timer {
-    color: $green;
+    color: $green1;
   }
 
   .row .shape.refresh {
     background: unset;
-    fill: $green;
+    fill: $green1;
   }
 
   .stalled.icon {
-    background: $green;
+    background: $green1;
   }
 
   .sound-on.icon, .svg.sound-off.icon {
     polygon {
-      fill: $green;
+      fill: $green1;
       stroke-width: 2;
     }
   }
@@ -38,7 +38,7 @@
 
   .row.dropdown-row {
     .surah-name {
-      color: lighten($green, 15%);
+      color: lighten($green1, 15%);
     }
   }