Make LESS variables of colours

resources/day8/re_frame/trace/main.less

@@ -1,3 +1,9 @@
+@light-purple: #616cdb;
+@light-blue: lightblue;
+@light-gray: #efeef1;
+@text-color: #222;
+@text-color-muted: #aaa;
+
 #--re-frame-trace-- {
 
   all: initial;
@@ -24,7 +30,7 @@
      ========================================================================== */
 
   a, a:visited {
-    color: #333;
+    color: @text-color;
     border-bottom: 1px #333 dotted;
   }
   a:hover, a:focus {
@@ -214,7 +220,7 @@
   font-family: 'courier new', monospace;
 
   tbody {
-    color: #aaa;
+    color: @text-color-muted;
   }
   tr:hover {
     transition: all 0.1s ease-out;
@@ -258,7 +264,7 @@
   }
   .tab.active {
     background: transparent;
-    border-bottom: 3px solid lightblue;
+    border-bottom: 3px solid @light-blue;
     border-radius: 0;
     padding-bottom: 1px;
   }
@@ -270,7 +276,7 @@
   }
   .filter-items li {
     color: #333;
-    background: #efefef;
+    background: @light-gray;
     display: inline-block;
     font-size: 0.9em;
     margin:  5px;
@@ -278,7 +284,7 @@
   .filter-items {
     li {
       .filter-item-string {
-        color: #616cdb;
+        color: @light-purple;
       }
     }
 
@@ -304,8 +310,8 @@
     appearance: menulist;
   }
   .nav {
-    background: #efeef1;
-    color: #222;
+    background: @light-gray;
+    color: @text-color;
   }
   .panel-content-top {
     flex: 1;