Standardizing Colors, changing global CSS variables

15 files changed, 64 insertions, 64 deletions

diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index f4736eb29..6d5dc9b18 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -1,4 +1,4 @@
-@import "../../views/globalCssVariables.scss";
+@import "../../views/global/globalCssVariables.scss";
 
 
 .lm_title {
@@ -110,7 +110,7 @@
     }
 
     .flexlayout__splitter {
-        background-color: black;
+        background-color: $dark-color;
     }
 
     .flexlayout__splitter:hover {
@@ -179,7 +179,7 @@
         position: absolute;
         box-sizing: border-box;
         background-color: #222;
-        color: black;
+        color: $dark-color;
     }
 
     .flexlayout__tab_button {
@@ -268,7 +268,7 @@
     }
 
     .flexlayout__tab_header_outer {
-        background-color: black;
+        background-color: $dark-color;
         position: absolute;
         left: 0;
         right: 0;
@@ -332,28 +332,28 @@
     }
 
     .flexlayout__border_top {
-        background-color: black;
+        background-color: $dark-color;
         border-bottom: 1px solid #ddd;
         box-sizing: border-box;
         overflow: hidden;
     }
 
     .flexlayout__border_bottom {
-        background-color: black;
+        background-color: $dark-color;
         border-top: 1px solid #333;
         box-sizing: border-box;
         overflow: hidden;
     }
 
     .flexlayout__border_left {
-        background-color: black;
+        background-color: $dark-color;
         border-right: 1px solid #333;
         box-sizing: border-box;
         overflow: hidden;
     }
 
     .flexlayout__border_right {
-        background-color: black;
+        background-color: $dark-color;
         border-left: 1px solid #333;
         box-sizing: border-box;
         overflow: hidden;
diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss
index ca72b98a5..632ce4417 100644
--- a/src/client/views/collections/CollectionLinearView.scss
+++ b/src/client/views/collections/CollectionLinearView.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
 @import "../_nodeModuleOverrides";
 
 .collectionLinearView-outer {
@@ -13,7 +13,7 @@
 
         >span {
             background: $dark-color;
-            color: $light-color;
+            color: $white;
             border-radius: 18px;
             margin-right: 6px;
             cursor: pointer;
@@ -64,7 +64,7 @@
             margin-top: "auto";
             margin-bottom: "auto";
             background: $dark-color;
-            color: $light-color;
+            color: $white;
             display: inline-block;
             border-radius: 18px;
             font-size: 12.5px;
@@ -82,7 +82,7 @@
         }
 
         label:hover {
-            background: $main-accent;
+            background: $medium-gray;
             transform: scale(1.15);
         }
 
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index dc5231a3a..328d7c081 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
 
 
 .collectionMenu-cont {
@@ -407,7 +407,7 @@
             }
 
             .switchToText {
-                color: $main-accent;
+                color: $medium-gray;
             }
 
             .switchToText:hover {
@@ -534,7 +534,7 @@
     .collectionSchemaViewChrome-togglerButton {
         width: 47px;
         height: 30px;
-        background-color: $light-color-secondary;
+        background-color: $light-gray;
         // position: absolute;
         transition: all 0.5s ease;
         // top: 3px;
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index 2e6186680..ee6d446f8 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -26,7 +26,7 @@ import { SnappingManager } from "../../util/SnappingManager";
 import { undoBatch } from "../../util/UndoManager";
 import '../DocumentDecorations.scss';
 import { EditableView } from "../EditableView";
-import { MAX_ROW_HEIGHT } from '../globalCssVariables.scss';
+import { MAX_ROW_HEIGHT } from '../global/globalCssVariables.scss';
 import { DocumentIconContainer } from "../nodes/DocumentIcon";
 import { OverlayView } from "../OverlayView";
 import "./CollectionSchemaView.scss";
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 2bdd280ec..d529f097e 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,8 +1,8 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
 
 .collectionSchemaView-container {
     border-width: $COLLECTION_BORDER_WIDTH;
-    border-color: $intermediate-color;
+    border-color: $medium-gray;
     border-style: solid;
     border-radius: $border-radius;
     box-sizing: border-box;
@@ -39,13 +39,13 @@
     }
 
     // .documentView-node:first-child {
-    //     background: $light-color;
+    //     background: $white;
     // }
 }
 
 .collectionSchemaView-searchContainer {
     border-width: $COLLECTION_BORDER_WIDTH;
-    border-color: $intermediate-color;
+    border-color: $medium-gray;
     border-style: solid;
     border-radius: $border-radius;
     box-sizing: border-box;
@@ -83,7 +83,7 @@
     }
 
     // .documentView-node:first-child {
-    //     background: $light-color;
+    //     background: $white;
     // }
 }
 
@@ -282,7 +282,7 @@ button.add-column {
     }
 
     label {
-        color: $main-accent;
+        color: $medium-gray;
         font-weight: normal;
         letter-spacing: 2px;
         text-transform: uppercase;
@@ -300,12 +300,12 @@ button.add-column {
         transition: background-color 0.2s;
 
         &:hover {
-            background-color: $light-color-secondary;
+            background-color: $light-gray;
         }
 
         &.active {
             font-weight: bold;
-            border: 2px solid $light-color-secondary;
+            border: 2px solid $light-gray;
         }
 
         svg {
@@ -321,7 +321,7 @@ button.add-column {
         background-color: white;
 
         input {
-            border: 2px solid $light-color-secondary;
+            border: 2px solid $light-gray;
             padding: 3px;
             height: 28px;
             font-weight: bold;
@@ -352,7 +352,7 @@ button.add-column {
                 }
 
                 &:hover {
-                    background-color: $light-color-secondary;
+                    background-color: $light-gray;
                 }
             }
         }
@@ -382,7 +382,7 @@ button.add-column {
     background-color: white;
 
     &.row-focused .rt-td {
-        background-color: #bfffc0; //$light-color-secondary;
+        background-color: #bfffc0; //$light-gray;
     }
 
     &.row-wrapped {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index b33c437a9..18926264d 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -16,7 +16,7 @@ import { SelectionManager } from "../../util/SelectionManager";
 import { SnappingManager } from "../../util/SnappingManager";
 import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
-import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../views/globalCssVariables.scss';
+import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../views/global/globalCssVariables.scss';
 import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
 import '../DocumentDecorations.scss';
@@ -147,43 +147,43 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
 
         const anyType = <div className={"columnMenu-option" + (type === ColumnType.Any ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Any)}>
             <FontAwesomeIcon icon={"align-justify"} size="sm" />
-                Any
-            </div>;
+            Any
+        </div>;
 
         const numType = <div className={"columnMenu-option" + (type === ColumnType.Number ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Number)}>
             <FontAwesomeIcon icon={"hashtag"} size="sm" />
-                Number
-            </div>;
+            Number
+        </div>;
 
         const textType = <div className={"columnMenu-option" + (type === ColumnType.String ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.String)}>
             <FontAwesomeIcon icon={"font"} size="sm" />
             Text
-            </div>;
+        </div>;
 
         const boolType = <div className={"columnMenu-option" + (type === ColumnType.Boolean ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Boolean)}>
             <FontAwesomeIcon icon={"check-square"} size="sm" />
             Checkbox
-            </div>;
+        </div>;
 
         const listType = <div className={"columnMenu-option" + (type === ColumnType.List ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.List)}>
             <FontAwesomeIcon icon={"list-ul"} size="sm" />
             List
-            </div>;
+        </div>;
 
         const docType = <div className={"columnMenu-option" + (type === ColumnType.Doc ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Doc)}>
             <FontAwesomeIcon icon={"file"} size="sm" />
             Document
-            </div>;
+        </div>;
 
         const imageType = <div className={"columnMenu-option" + (type === ColumnType.Image ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Image)}>
             <FontAwesomeIcon icon={"image"} size="sm" />
             Image
-            </div>;
+        </div>;
 
         const dateType = <div className={"columnMenu-option" + (type === ColumnType.Date ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Date)}>
             <FontAwesomeIcon icon={"calendar"} size="sm" />
-                Date
-                </div>;
+            Date
+        </div>;
 
 
         const allColumnTypes = <div className="columnMenu-types">
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 9f56a0c0e..f103d9581 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
 
 .collectionMasonryView {
     display: inline;
@@ -97,7 +97,7 @@
         width: 100%;
         font-family: $sans-serif;
         background: $dark-color;
-        color: $light-color;
+        color: $white;
     }
 
     .collectionStackingView-columnDragger {
@@ -128,7 +128,7 @@
         margin-left: 2px;
         margin-right: 2px;
         margin-top: 2px;
-        background: $main-accent;
+        background: $medium-gray;
         height: 5px;
 
         &.active {
@@ -180,11 +180,11 @@
     .collectionStackingView-sectionHeader {
         text-align: center;
         margin: auto;
-        background: $main-accent;
+        background: $medium-gray;
         // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong
 
         .editableView-input {
-            color: black;
+            color: $dark-color;
         }
 
         .editableView-input:hover,
@@ -205,7 +205,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            color: black;
+            color: $dark-color;
 
             .editableView-container-editing-oneLine,
             .editableView-container-editing {
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 72ab51784..ec461ab94 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
 
 .collectionTreeView-dropTarget {
     border-width: $COLLECTION_BORDER_WIDTH;
@@ -12,7 +12,7 @@
     top: 0;
     padding-left: 10px;
     padding-right: 10px;
-    background: $light-color-secondary;
+    background: $light-gray;
     font-size: 13px;
     overflow: auto;
     user-select: none;
@@ -40,7 +40,7 @@
     }
 
     .delete-button {
-        color: $intermediate-color;
+        color: $medium-gray;
         // float: right;
         margin-left: 15px;
         // margin-top: 3px;
@@ -71,7 +71,7 @@
 .collectionTreeView-subtitle {
     font-style: italic;
     font-size: 8pt;
-    color: $intermediate-color;
+    color: $medium-gray;
 }
 
 .docContainer {
diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss
index a5aef86de..5db489c0a 100644
--- a/src/client/views/collections/CollectionView.scss
+++ b/src/client/views/collections/CollectionView.scss
@@ -1,8 +1,8 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
 
 .collectionView {
     border-width: 0;
-    border-color: $light-color-secondary;
+    border-color: $light-gray;
     border-style: solid;
     border-radius: 0 0 $border-radius $border-radius;
     box-sizing: border-box;
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index 0c69ee030..84560cf26 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -21,7 +21,7 @@ import { DocumentType } from "../../documents/DocumentTypes";
 import { CompileScript, Transformer, ts } from "../../util/Scripting";
 import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
-import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../views/globalCssVariables.scss';
+import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../views/global/globalCssVariables.scss';
 import { ContextMenu } from "../ContextMenu";
 import '../DocumentDecorations.scss';
 import { DocumentView } from "../nodes/DocumentView";
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 3f6fc8b0c..1ebc5873e 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
 
 .treeView-label {
     max-height: 1.5em;
@@ -14,7 +14,7 @@
     .bullet-outline {
         position: relative;
         width: $TREE_BULLET_WIDTH;
-        color: $intermediate-color;
+        color: $medium-gray;
         transform: scale(0.5);
         display: inline-flex;
         align-items: center;
@@ -45,7 +45,7 @@
     .bullet {
         position: relative;
         width: $TREE_BULLET_WIDTH;
-        color: $intermediate-color;
+        color: $medium-gray;
         margin-top: 3px;
         transform: scale(1.3, 1.3);
         border: #80808030 1px solid;
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 2e98fb508..4f9a966f2 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -20,7 +20,7 @@ import { SnappingManager } from '../../util/SnappingManager';
 import { Transform } from '../../util/Transform';
 import { undoBatch, UndoManager } from '../../util/UndoManager';
 import { EditableView } from "../EditableView";
-import { TREE_BULLET_WIDTH } from '../globalCssVariables.scss';
+import { TREE_BULLET_WIDTH } from '../global/globalCssVariables.scss';
 import { DocumentView, DocumentViewProps, StyleProviderFunc, DocumentViewInternal } from '../nodes/DocumentView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss
index c5b8fc5e8..5fa01b102 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss
@@ -1,4 +1,4 @@
-@import "globalCssVariables";
+@import "global/globalCssVariables";
 
 .collectionFreeFormRemoteCursors-cont {
     
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index eb0538c41..79e063f7f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -1,4 +1,4 @@
-@import "../../globalCssVariables";
+@import "../../global/globalCssVariables";
 
 .collectionfreeformview-none {
     position: inherit;
@@ -226,7 +226,7 @@
     //   linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px);
     // background-size: 30px 30px;
     // }
-    border: 0px solid $light-color-secondary;
+    border: 0px solid $light-gray;
     border-radius: inherit;
     box-sizing: border-box;
     position: absolute;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index accb80c5a..a4e310e6c 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -28,7 +28,7 @@ import { SelectionManager } from "../../../util/SelectionManager";
 import { SnappingManager } from "../../../util/SnappingManager";
 import { Transform } from "../../../util/Transform";
 import { undoBatch } from "../../../util/UndoManager";
-import { COLLECTION_BORDER_WIDTH } from "../../../views/globalCssVariables.scss";
+import { COLLECTION_BORDER_WIDTH } from "../../../views/global/globalCssVariables.scss";
 import { Timeline } from "../../animationtimeline/Timeline";
 import { ContextMenu } from "../../ContextMenu";
 import { DocumentDecorations } from "../../DocumentDecorations";
@@ -834,10 +834,10 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                 map(doc => ({ ...this.childDataProvider(doc, ""), ...this.childSizeProvider(doc, "") }));
             if (measuredDocs.length) {
                 const ranges = measuredDocs.reduce(({ xrange, yrange }, { x, y, width, height }) =>  // computes range of content
-                    ({
-                        xrange: { min: Math.min(xrange.min, x), max: Math.max(xrange.max, x + width) },
-                        yrange: { min: Math.min(yrange.min, y), max: Math.max(yrange.max, y + height) }
-                    })
+                ({
+                    xrange: { min: Math.min(xrange.min, x), max: Math.max(xrange.max, x + width) },
+                    yrange: { min: Math.min(yrange.min, y), max: Math.max(yrange.max, y + height) }
+                })
                     , {
                         xrange: { min: Number.MAX_VALUE, max: -Number.MAX_VALUE },
                         yrange: { min: Number.MAX_VALUE, max: -Number.MAX_VALUE }