Updating css props name to primary-color and primary-color-dark

src/components/app.pcss

@@ -4,7 +4,7 @@
 }
 
 .app {
-  background-color: var(--light-grey);
+  background-color: var(--primary-color);
   display: flex;
   flex-direction: column;
   height: 100vh;

src/components/cube-column-chooser.pcss

@@ -1,6 +1,6 @@
 .cube-column-chooser {
   background-color: white;
-  border: 1px solid var(--grey);
+  border: 1px solid var(--primary-color-dark);
   border-radius: 0.4em;
   box-shadow: 0 0 2em -0.5em #999;
   color: #4d4d4d;
@@ -25,7 +25,7 @@
   &::after {
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
-    border-top: 8px solid var(--grey);
+    border-top: 8px solid var(--primary-color-dark);
     content: '';
     height: 0;
     left: 50%;
@@ -38,7 +38,7 @@
 
   &::after {
     border-top-color: white;
-    box-shadow: inset 0 0 0 1px var(--grey);
+    box-shadow: inset 0 0 0 1px var(--primary-color-dark);
     top: calc(100% - 1px);
     z-index: 22;
   }
@@ -57,7 +57,7 @@
     overflow: auto;
 
     .expression {
-      border-bottom: 1px solid var(--grey);
+      border-bottom: 1px solid var(--primary-color-dark);
       display: flex;
       flex: 0 0 auto;
       font-size: 1.5em;
@@ -100,7 +100,7 @@
     }
 
     input {
-      border: 1px solid var(--grey);
+      border: 1px solid var(--primary-color-dark);
       color: #4d4d4d;
       font-size: 1.5rem;
       margin-left: 0.5em;

src/components/cubes.pcss

@@ -49,7 +49,7 @@
   .card {
     align-items: flex-end;
     background-color: white;
-    border: 1px solid var(--grey);
+    border: 1px solid var(--primary-color-dark);
     border-radius: 0.4em;
     display: flex;
     flex-direction: column;

src/components/field.pcss

@@ -44,7 +44,7 @@
   }
 
   .gwg {
-    background-color: var(--light-grey);
+    background-color: var(--primary-color);
     display: flex;
     flex: 0 0 auto;
     height: 0.5rem;
@@ -56,7 +56,7 @@
   }
 
   .gwg .grey {
-    background: var(--grey);
+    background: var(--primary-color-dark);
   }
 
   .bartext {

src/components/filterbox.pcss

@@ -58,7 +58,7 @@
 
   .search {
     background: none;
-    border: 1px solid var(--grey);
+    border: 1px solid var(--primary-color-dark);
     box-sizing: border-box;
     display: inline-block;
     font-size: 1.5em;

src/components/hypercube-table.pcss

@@ -9,9 +9,9 @@
 
   .ReactVirtualized__Table__headerColumn {
     background-color: #fafafa;
-    border-bottom: 1px solid var(--grey);
-    border-right: 1px solid var(--grey);
-    border-top: 1px solid var(--grey);
+    border-bottom: 1px solid var(--primary-color-dark);
+    border-right: 1px solid var(--primary-color-dark);
+    border-top: 1px solid var(--primary-color-dark);
     box-sizing: border-box;
     color: #4d4d4d;
     cursor: pointer;
@@ -22,29 +22,29 @@
     user-select: none;
 
     &:hover {
-      background-color: var(--light-grey);
+      background-color: var(--primary-color);
     }
 
     &:focus {
       outline: none;
     }
 
     &:active {
-      background-color: var(--light-grey);
+      background-color: var(--primary-color);
     }
 
     &.active {
       color: #398ab5;
     }
 
     &:first-child {
-      border-left: 1px solid var(--grey);
+      border-left: 1px solid var(--primary-color-dark);
     }
   }
 
   .ReactVirtualized__Table__row {
-    border-left: 1px solid var(--grey);
-    border-right: 1px solid var(--grey);
+    border-left: 1px solid var(--primary-color-dark);
+    border-right: 1px solid var(--primary-color-dark);
     box-sizing: border-box;
     outline: none;
   }
@@ -71,8 +71,8 @@
 
   .ReactVirtualized__Table__rowColumn {
     background-color: white;
-    border-bottom: 1px solid var(--grey);
-    border-right: 1px solid var(--grey);
+    border-bottom: 1px solid var(--primary-color-dark);
+    border-right: 1px solid var(--primary-color-dark);
     box-sizing: border-box;
     height: 3rem;
     margin: 0;

src/components/model.pcss

@@ -1,6 +1,6 @@
 .model {
-  --table-background: var(--light-grey);
-  --grid-background: var(--light-grey);
+  --table-background: var(--primary-color);
+  --grid-background: var(--primary-color);
   --even-column-background: #f6f6f6;
   --odd-column-background: #e8e8e8;
   --association-border: #999;

src/components/selections.pcss

@@ -1,5 +1,5 @@
 .selections {
-  border-left: 1px solid var(--grey);
+  border-left: 1px solid var(--primary-color-dark);
   display: flex;
   flex-grow: 2;
   flex-shrink: 0;

src/components/table-field.pcss

@@ -1,6 +1,6 @@
 .table-field {
   background: #fff;
-  border: 1px solid var(--grey);
+  border: 1px solid var(--primary-color-dark);
   border-radius: 0.4em;
   box-sizing: border-box;
   cursor: pointer;

src/components/topbar.pcss

@@ -3,7 +3,7 @@
   align-self: flex-start;
   animation: appear 1s ease-in;
   background: #fff;
-  border-bottom: 1px solid var(--grey);
+  border-bottom: 1px solid var(--primary-color-dark);
   display: flex;
   flex-shrink: 0;
   font-size: 1rem;

src/index.pcss

@@ -2,8 +2,8 @@
   --padding: 3.5em;
   --padding-negative: -3.5em;
   --table-field-min-size: 22em;
-  --light-grey: #f2f2f2;
-  --grey: #d9d9d9;
+  --primary-color: #f2f2f2;
+  --primary-color-dark: #d9d9d9;
 }
 
 /* imported from https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600 */