Removing magic numbers in model, and using css custom properties

src/components/app.pcss

@@ -4,7 +4,7 @@
 }
 
 .app {
-  background-color: #f2f2f2;
+  background-color: var(--light-grey);
   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 #d9d9d9;
+  border: 1px solid var(--grey);
   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 #d9d9d9;
+    border-top: 8px solid var(--grey);
     content: '';
     height: 0;
     left: 50%;
@@ -38,7 +38,7 @@
 
   &::after {
     border-top-color: white;
-    box-shadow: inset 0 0 0 1px #d9d9d9;
+    box-shadow: inset 0 0 0 1px var(--grey);
     top: calc(100% - 1px);
     z-index: 22;
   }
@@ -57,7 +57,7 @@
     overflow: auto;
 
     .expression {
-      border-bottom: 1px solid #d9d9d9;
+      border-bottom: 1px solid var(--grey);
       display: flex;
       flex: 0 0 auto;
       font-size: 1.5em;
@@ -100,7 +100,7 @@
     }
 
     input {
-      border: 1px solid #d9d9d9;
+      border: 1px solid var(--grey);
       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 #d9d9d9;
+    border: 1px solid var(--grey);
     border-radius: 0.4em;
     display: flex;
     flex-direction: column;

src/components/field.pcss

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

src/components/filterbox.pcss

@@ -58,7 +58,7 @@
 
   .search {
     background: none;
-    border: 1px solid #d9d9d9;
+    border: 1px solid var(--grey);
     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 #d9d9d9;
-    border-right: 1px solid #d9d9d9;
-    border-top: 1px solid #d9d9d9;
+    border-bottom: 1px solid var(--grey);
+    border-right: 1px solid var(--grey);
+    border-top: 1px solid var(--grey);
     box-sizing: border-box;
     color: #4d4d4d;
     cursor: pointer;
@@ -22,29 +22,29 @@
     user-select: none;
 
     &:hover {
-      background-color: #f2f2f2;
+      background-color:  var(--light-grey);
     }
 
     &:focus {
       outline: none;
     }
 
     &:active {
-      background-color: #f2f2f2;
+      background-color: var(--light-grey);
     }
 
     &.active {
       color: #398ab5;
     }
 
     &:first-child {
-      border-left: 1px solid #d9d9d9;
+      border-left: 1px solid var(--grey);
     }
   }
 
   .ReactVirtualized__Table__row {
-    border-left: 1px solid #d9d9d9;
-    border-right: 1px solid #d9d9d9;
+    border-left: 1px solid var(--grey);
+    border-right: 1px solid var(--grey);
     box-sizing: border-box;
     outline: none;
   }
@@ -71,8 +71,8 @@
 
   .ReactVirtualized__Table__rowColumn {
     background-color: white;
-    border-bottom: 1px solid #d9d9d9;
-    border-right: 1px solid #d9d9d9;
+    border-bottom: 1px solid var(--grey);
+    border-right: 1px solid var(--grey);
     box-sizing: border-box;
     height: 3rem;
     margin: 0;

src/components/model.jsx

@@ -13,7 +13,6 @@ import atplay from '../logic/atplay';
 import demoApp from '../demo-app';
 
 import { getExtraInfoForField, getAssosicationTooltip, getTableTooltip } from './tooltip';
-
 import './model.pcss';
 import './tooltip.pcss';
 
@@ -164,16 +163,13 @@ export default function Model({ app, appLayout, isLocalStorage }) {
     };
 
     const key = `${app.id}/tables/${tableName}`;
-    const minTableWidth = 29 * 8;
+    const styles = getComputedStyle(document.documentElement);
+    const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    const padding = +styles.getPropertyValue('--padding').replace('em', '');
+    const minTableFieldWidth = +styles.getPropertyValue('--table-field-min-size').replace('em', '');
+    const minTableWidth = (minTableFieldWidth + padding * 2) * fontSize;
     const savedTableWidth = (isLocalStorage && localStorage.getItem(key));
     const tableSize = savedTableWidth ? { width: `${savedTableWidth}px` } : 'auto';
-    const handleStyle = {
-      right: {
-        zIndex: 3,
-        width: '3.5em',
-      },
-    };
-
     return (
       <Resizable
         key={tableName}
@@ -191,7 +187,7 @@ export default function Model({ app, appLayout, isLocalStorage }) {
         }}
         onResizeStart={e => e.stopPropagation()}
         onResizeStop={(e, dir, ref) => saveTableWidth(ref, tableName)}
-        handleStyles={handleStyle}
+        handleClasses={{ right: 'resize-handle' }}
       >
         <div>
           <div

src/components/model.pcss

@@ -1,6 +1,6 @@
 .model {
-  --table-background: #f2f2f2;
-  --grid-background: #f2f2f2;
+  --table-background: var(--light-grey);
+  --grid-background: var(--light-grey);
   --even-column-background: #f6f6f6;
   --odd-column-background: #e8e8e8;
   --association-border: #999;
@@ -26,7 +26,7 @@
     font-weight: bold;
     justify-content: center;
     min-height: 11rem;
-    padding: 3.5rem;
+    padding: var(--padding);
     text-align: center;
     word-break: break-word;
 
@@ -83,7 +83,7 @@
   .association-to-right-b {
     box-sizing: border-box;
     height: 0.5em;
-    width: 3.5em;
+    width: var(--padding);
   }
 
   .association-to-right-c {
@@ -141,7 +141,7 @@
     box-sizing: border-box;
     height: 0.5em;
     transform: translateX(-2.5em);
-    width: 3.5em;
+    width: var(--padding);
   }
 
   .association-to-left-c {
@@ -166,10 +166,10 @@
 
   .betweener .lineyinner {
     bottom: 3em;
-    left: -3.5em;
+    left: var(--padding-negative);
     position: absolute;
-    right: -3.5em;
-    top: 3.5em;
+    right: var(--padding-negative);
+    top: var(--padding);
   }
 
   .betweener.insideTable {
@@ -191,7 +191,7 @@
 
     .column {
       box-sizing: border-box;
-      padding: 3.5em;
+      padding: var(--padding);
       padding-top: 0;
     }
 
@@ -257,4 +257,9 @@
   .notTableAtPlay .insideTable {
     background-color: var(--table-background);
   }
+
+  .resize-handle {
+    z-index: 3;
+    width: var(--padding) !important;
+  }
 }

src/components/selections.pcss

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

src/components/table-field.pcss

@@ -1,14 +1,14 @@
 .table-field {
   background: #fff;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--grey);
   border-radius: 0.4em;
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   font-size: 1rem;
   height: 100%;
-  min-width: 22em;
+  min-width: var(--table-field-min-size);
   padding: 1em;
   position: relative;
 

src/components/topbar.pcss

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

src/index.pcss

@@ -1,3 +1,11 @@
+:root {
+  --padding: 3.5em;
+  --padding-negative: -3.5em;
+  --table-field-min-size: 22em;
+  --light-grey: #f2f2f2;
+  --grey: #d9d9d9;
+}
+
 /* imported from https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600 */
 
 /* cyrillic-ext */