Removed all old SASS color variables.

assets/components/actors/actor.vue

@@ -401,8 +401,8 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: $highlight-extreme;
-    background: $profile;
+    color: var(--highlight-extreme);
+    background: var(--profile);
     padding: .75rem 1rem;
 }
 
@@ -435,8 +435,8 @@ export default {
 }
 
 .profile {
-    background: $profile;
-    color: $highlight-extreme;
+    background: var(--profile);
+    color: var(--highlight-extreme);
     width: 100%;
     max-height: 18rem;
     display: flex;
@@ -493,7 +493,7 @@ export default {
     overflow: hidden;
 
     &:not(:last-of-type) {
-        border-bottom: solid 1px $highlight-hint;
+        border-bottom: solid 1px var(--highlight-hint);
     }
 }
 
@@ -504,14 +504,14 @@ export default {
 }
 
 .bio-label {
-    color: $highlight;
+    color: var(--highlight);
     margin: 0 1rem 0 0;
     flex-shrink: 0;
     font-style: normal;
     font-weight: 400;
 
     .icon {
-        fill: $highlight;
+        fill: var(--highlight);
         margin: -.25rem .5rem 0 0;
     }
 }
@@ -545,7 +545,7 @@ export default {
 .age {
     font-weight: bold;
     padding: 0 0 0 .5rem;
-    border-left: solid 1px $highlight-weak;
+    border-left: solid 1px var(--highlight-weak);
     margin: 0 0 0 .5rem;
 }
 
@@ -561,12 +561,12 @@ export default {
 .height-imperial,
 .weight-imperial {
     padding: 0 0 0 .5rem;
-    border-left: solid 1px $highlight-weak;
+    border-left: solid 1px var(--highlight-weak);
     margin: 0 0 0 .5rem;
 }
 
 .enhanced.icon {
-    fill: $primary;
+    fill: var(--primary);
     padding: 0 .5rem;
 	transform: scaleX(-1);
 }
@@ -578,7 +578,7 @@ export default {
 }
 
 .scraped {
-    color: $highlight-weak;
+    color: var(--highlight-weak);
     font-size: .8rem;
 }
 
@@ -659,27 +659,27 @@ export default {
     cursor: pointer;
 
     .icon {
-        fill: $shadow;
+        fill: var(--shadow);
     }
 
     &:hover {
-        background: $shadow-hint;
+        background: var(--shadow-hint);
 
         .icon {
-            fill: $shadow-strong;
+            fill: var(--shadow-strong);
         }
     }
 }
 
 .expand-sidebar:hover {
-    background: $shadow-hint;
+    background: var(--shadow-hint);
 }
 
 .expand-header {
     display: none;
 
     &:hover {
-        background: $shadow-hint;
+        background: var(--shadow-hint);
     }
 }
 
@@ -689,17 +689,17 @@ export default {
     justify-content: center;
     align-items: center;
     padding: 0;
-    background: $profile;
+    background: var(--profile);
 
     .icon {
         width: 100%;
-        fill: $highlight;
+        fill: var(--highlight);
         padding: .5rem 0;
     }
 
     &:hover .icon {
-        background: $highlight-hint;
-        fill: $text-contrast;
+        background: var(--highlight-hint);
+        fill: var(--text-contrast);
     }
 }