move colors to variables

Author: gwincr11

packages/nbdime/src/styles/variables.css

@@ -27,4 +27,10 @@
 
   --jp-merge-either-color1: #aee;
   --jp-merge-either-color2: #cff4f4;
-}
+  --jp-expand-outer-wrapper: rgb(221, 244, 255);
+  --jp-expand-color: rgb(87, 96, 106);
+  --jp-expand-a-color: rgba(84, 174, 255, 0.4)
+  --jp-expand-svg-color: rgb(87, 96, 106);
+  --jp-expand-a-hover-color: rgb(14, 94, 208);
+  --jp-expand-a-hover-svg-color: rgb(255, 255, 255);
+}

packages/webapp/src/app/diff.css

@@ -111,18 +111,25 @@
   height: 40px;
   width: 100%;
   display: inline-block;
-  background: rgb(221, 244, 255);
-  color: rgb(87, 96, 106);
+  background: var(--jp-expand-outer-wrapper);
+  color: var(--jp-expand-color);
   a {
+    cursor: pointer;
     height: 100%;
     display: block;
     width: 40px;
-    background-color: rgba(84, 174, 255, 0.4);
+    background-color: var(--jp-expand-a-color);
+    &:hover {
+      background-color: var(--jp-expand-a-hover-color);
+      svg {
+        fill: var(--jp-expand-svg-hover-color);
+      }
+    }
   }
   svg {
     height: 23px;
     width: 23px;
     margin: 8px;
-    fill: rgb(87, 96, 106);
+    fill: var(--jp-expand-svg-color);
   }
 }