Update SCSS to module system (fixes #266)

Change-Id: I2387ef49dadaeac0f62620e0c803df12dad42cf8
diff --git a/dev/scss/main/view/tree.scss b/dev/scss/main/view/tree.scss
index c7e064b..7242116 100644
--- a/dev/scss/main/view/tree.scss
+++ b/dev/scss/main/view/tree.scss
@@ -1,65 +1,66 @@
 @charset "utf-8";
-@import "../../util";
+@use "../../util";
+@use "../../base/colors";
 
 /**
  * SVG tree
  */
 path.edge {
-  stroke:       $darker-orange;
+  stroke:       colors.$darker-orange;
   stroke-width: 2px;
   fill:         none;
 }
 
 g.arc.infocus > path.edge {
-  stroke: $dark-green;
+  stroke: colors.$dark-green;
 }
 
 marker#arr {
   overflow: visible;
   path {
-    stroke:       $darkest-orange;
-    fill:         $darkest-orange;
+    stroke:       colors.$darkest-orange;
+    fill:         colors.$darkest-orange;
     fill-opacity: 1;
     stroke-width: 2; 
   }
 }
 
 path.anchor {
-  stroke:         $darkest-orange;
+  stroke:         colors.$darkest-orange;
   stroke-width:   3;
   stroke-linecap: round;
   z-index:        20;
 }
 
 g.root rect.empty {
-  stroke:       $darker-orange;
-  fill:         $darker-orange;
+  stroke:       colors.$darker-orange;
+  fill:         colors.$darker-orange;
   stroke-width: 2px;
 }
 
 g.middle,
 g.label {
   rect {
-    stroke:       $darker-orange;
+    stroke:       colors.$darker-orange;
     stroke-width: 2px;
-    fill:         $middle-orange;
+    fill:         colors.$middle-orange;
   }
 }
 
 g.label.infocus rect {
-  stroke: $dark-green;
-  fill:   $lightest-green;
+  stroke: colors.$dark-green;
+  fill:   colors.$lightest-green;
 }
 
 g.middle.mark {
   rect {
-    fill: $darker-orange;
+    fill: colors.$darker-orange;
   }
   > text {
-    fill: $light-orange;
+    fill: colors.$light-orange;
 
     > tspan {
-      stroke: $light-orange;
+      stroke: colors.$light-orange;
     }
   }
 }