Starting Color consistency

26 files changed, 111 insertions, 104 deletions

diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss
index 8670b1747..2bac03af4 100644
--- a/src/client/views/AntimodeMenu.scss
+++ b/src/client/views/AntimodeMenu.scss
@@ -5,7 +5,7 @@
     position: absolute;
     z-index: 10001;
     height: $antimodemenu-height;
-    background: #323232;
+    background: $dark-gray;
     box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
     // border-radius: 0px 6px 6px 6px;
     z-index: 1001;
diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 2590e34c6..795529780 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -137,7 +137,7 @@
 
 .contextMenu-item:hover {
     transition: all 0.1s ease;
-    background: $lighter-alt-accent;
+    background: $light-blue;
 }
 
 .contextMenu-description {
diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss
index e816c52a3..2a0b494f5 100644
--- a/src/client/views/DocumentButtonBar.scss
+++ b/src/client/views/DocumentButtonBar.scss
@@ -25,7 +25,7 @@ $linkGap : 3px;
     border-radius: 50%;
     opacity: 0.9;
     pointer-events: auto;
-    background-color: $dark-color;
+    background-color: $dark-gray;
     color: $white;
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -64,7 +64,7 @@ $linkGap : 3px;
     text-align: center;
     border-radius: 50%;
     pointer-events: auto;
-    background-color: $dark-color;
+    background-color: $dark-gray;
     border: none;
     transition: 0.2s ease all;
 
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 47a8326bb..1715f35e7 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -286,8 +286,8 @@ $linkGap : 3px;
     text-align: center;
     border-radius: 50%;
     pointer-events: auto;
-    color: $dark-color;
-    border: $dark-color 1px solid;
+    color: $dark-gray;
+    border: $dark-gray 1px solid;
 }
 
 .linkButton-linker:hover {
@@ -302,7 +302,7 @@ $linkGap : 3px;
     border-radius: 50%;
     opacity: 0.9;
     pointer-events: auto;
-    background-color: $dark-color;
+    background-color: $dark-gray;
     color: $white;
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -343,7 +343,7 @@ $linkGap : 3px;
     border-radius: 50%;
     opacity: 0.9;
     font-size: 14;
-    background-color: $dark-color;
+    background-color: $dark-gray;
     color: $white;
     text-align: center;
     cursor: pointer;
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index d76458460..07ca0257c 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -56,50 +56,50 @@
     touch-action: none;
 
     .searchBox-container {
-        background: lightgray;
+        background: $light-gray;
     }
 }
 
 .mainView-container {
-    color: black;
+    color: $dark-gray;
 
     .lm_title {
-        background: #cacaca;
-        color: black;
+        background: $light-gray;
+        color: $dark-gray;
     }
 }
 
 .mainView-container-dark {
-    color: lightgray;
+    color: $light-gray;
 
     .lm_goldenlayout {
-        background: dimgray;
+        background: $medium-gray;
     }
 
     .lm_title {
-        background: black;
+        background: $dark-gray;
         color: unset;
     }
 
     .marquee {
-        border-color: white;
+        border-color: $white;
     }
 
     #search-input {
-        background: lightgray;
+        background: $light-gray;
     }
 
     .searchBox-container {
-        background: rgb(45, 45, 45);
+        background: $dark-gray;
     }
 
     .contextMenu-cont,
     .contextMenu-item {
-        background: dimGray;
+        background: $medium-gray;
     }
 
     .contextMenu-item:hover {
-        background: gray;
+        background: $medium-gray;
     }
 }
 
@@ -113,7 +113,7 @@
 
 .mainView-propertiesDragger {
     //background-color: rgb(140, 139, 139);
-    background-color: lightgrey;
+    background-color: $light-gray;
     height: 55px;
     width: 17px;
     position: absolute;
@@ -163,10 +163,10 @@
         flex-direction: column;
         position: relative;
         height: 100%;
-        background: dimgray;
+        background: $medium-gray;
 
         .documentView-node-topmost {
-            background: lightgrey;
+            background: $light-gray;
         }
     }
 
@@ -174,32 +174,32 @@
         right: 0;
         position: absolute;
         z-index: 2;
-        background-color: rgb(159, 159, 159);
+        background-color: $medium-gray;
         .editable-title {
-            background-color: lightgrey;
+            background-color: $light-gray;
         }
     }
 
 }
 .mainView-libraryHandle {
-    background-color: lightgrey;
+    background-color: $light-gray;
 }
 .mainView-innerContent-dark 
 {
     .propertiesView {
         background-color: #252525;
         input {
-            background-color: dimgrey;
+            background-color: $medium-gray;
         }
         .propertiesView-sharingTable 
         {
-            background-color: dimgrey;
+            background-color: $medium-gray;
         }
         .editable-title {
-            background-color: dimgrey;
+            background-color: $medium-gray;
         }
         .propertiesView-field {
-            background-color: dimgrey;
+            background-color: $medium-gray;
         }
     }
     .mainView-propertiesDragger,
@@ -209,17 +209,17 @@
 }
 .mainView-container-dark {
     .contextMenu-cont {
-        background: dimgrey;
-        color: white;
+        background: $medium-gray;
+        color: $white;
         input::placeholder {
-            color:white;
+            color:$white;
         }
     }
 }
 
 .mainView-menuPanel {
     min-width: var(--menuPanelWidth);
-    background-color: #121721;
+    background-color: $dark-gray;
 
     .collectionStackingView {
         scrollbar-width: none;
@@ -233,13 +233,13 @@
         padding: 7px;
         padding-left: 7px;
         width: 100%;
-        background: black;
+        background: $dark-gray;
 
         .mainView-menuPanel-button-wrap {
             width: 45px;
             /* padding: 5px; */
             touch-action: none;
-            background: black;
+            background: $dark-gray;
             transform-origin: top left;
             /* margin-bottom: 5px; */
             margin-top: 5px;
@@ -247,7 +247,7 @@
             border-radius: 8px;
 
             &:hover {
-                background: rgb(61, 61, 61);
+                background: $black;
                 cursor: pointer;
             }
         }
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index 4ef7763be..484522bc7 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -24,7 +24,7 @@ $linkGap : 3px;
     width: 29px;
     border-radius: 6px;
     pointer-events: auto;
-    background-color: $dark-color;
+    background-color: $dark-gray;
     color: #fcfbf7;
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -45,11 +45,11 @@ $linkGap : 3px;
 }
 .propertiesButtons-linkButton-empty.toggle-on {
     background-color: white;
-    color: $dark-color;
+    color: $dark-gray;
 }
 .propertiesButtons-linkButton-empty.toggle-hover {
     background-color: gray;
-    color: $dark-color;
+    color: $dark-gray;
 }
 .propertiesButtons-linkButton-empty.toggle-off {
     color: white;
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 9e61351c4..1bf47f6ac 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -1,4 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Colors } from './global/globalEnums';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
@@ -97,14 +98,14 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
         case StyleProp.Color:
             const docColor: Opt<string> = StrCast(doc?.[fieldKey + "color"], StrCast(doc?._color));
             if (docColor) return docColor;
-            const backColor = backgroundCol();// || (darkScheme() ? "black" : "white");
+            const backColor = backgroundCol();
             if (!backColor) return undefined;
             const nonAlphaColor = backColor.startsWith("#") ? (backColor as string).substring(0, 7) :
                 backColor.startsWith("rgba") ? backColor.replace(/,.[^,]*\)/, ")").replace("rgba", "rgb") : backColor
             const col = Color(nonAlphaColor).rgb();
             const colsum = (col.red() + col.green() + col.blue());
-            if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return "black";
-            return "white";
+            if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return Colors.DARK_GRAY;
+            return Colors.WHITE;
         case StyleProp.Hidden: return BoolCast(doc?._hidden);
         case StyleProp.BorderRounding: return StrCast(doc?.[fieldKey + "borderRounding"]);
         case StyleProp.TitleHeight: return 15;
@@ -114,30 +115,30 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
             doc?.type === DocumentType.RTF) && showTitle() && !StrCast(doc?.showTitle).includes(":hover") ? 15 : 0;
         case StyleProp.BackgroundColor: {
             let docColor: Opt<string> = StrCast(doc?.[fieldKey + "backgroundColor"], StrCast(doc?._backgroundColor, isCaption ? "rgba(0,0,0,0.4)" : ""));
-            if (MainView.Instance.LastButton === doc) return darkScheme() ? "dimgrey" : "lightgrey";
+            if (MainView.Instance.LastButton === doc) return darkScheme() ? Colors.MEDIUM_GRAY : Colors.LIGHT_GRAY;
             switch (doc?.type) {
                 case DocumentType.PRESELEMENT: docColor = docColor || (darkScheme() ? "" : ""); break;
-                case DocumentType.PRES: docColor = docColor || (darkScheme() ? "#3e3e3e" : "white"); break;
-                case DocumentType.FONTICON: docColor = docColor || "black"; break;
-                case DocumentType.RTF: docColor = docColor || (darkScheme() ? "#2d2d2d" : "#f1efeb"); break;
-                case DocumentType.FILTER: docColor = docColor || (darkScheme() ? "#2d2d2d" : "rgba(105, 105, 105, 0.432)"); break;
+                case DocumentType.PRES: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.WHITE); break;
+                case DocumentType.FONTICON: docColor = docColor || Colors.DARK_GRAY; break;
+                case DocumentType.RTF: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break;
+                case DocumentType.FILTER: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : "rgba(105, 105, 105, 0.432)"); break;
                 case DocumentType.INK: docColor = doc?.isInkMask ? "rgba(0,0,0,0.7)" : undefined; break;
                 case DocumentType.SLIDER: break;
                 case DocumentType.EQUATION: docColor = docColor || "transparent"; break;
                 case DocumentType.LABEL: docColor = docColor || (doc.annotationOn !== undefined ? "rgba(128, 128, 128, 0.18)" : undefined); break;
-                case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? "#2d2d2d" : "lightgray"); break;
-                case DocumentType.LINKANCHOR: docColor = isAnchor ? "lightblue" : "transparent"; break;
+                case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break;
+                case DocumentType.LINKANCHOR: docColor = isAnchor ? Colors.LIGHT_BLUE : "transparent"; break;
                 case DocumentType.LINK: docColor = docColor || "transparent"; break;
                 case DocumentType.IMG:
                 case DocumentType.WEB:
                 case DocumentType.PDF:
                 case DocumentType.SCREENSHOT:
-                case DocumentType.VID: docColor = docColor || (darkScheme() ? "#2d2d2d" : "lightgray"); break;
+                case DocumentType.VID: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break;
                 case DocumentType.COL:
                     if (StrCast(Doc.LayoutField(doc)).includes("SliderBox")) break;
-                    docColor = docColor ? docColor :
+                    docColor = docColor ? Colors.DARK_GRAY :
                         doc?._isGroup ? "#00000004" : // very faint highlight to show bounds of group
-                            (Doc.IsSystem(doc) ? (darkScheme() ? "rgb(62,62,62)" : "lightgrey") : // system docs (seen in treeView) get a grayish background
+                            (Doc.IsSystem(doc) ? (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY) : // system docs (seen in treeView) get a grayish background
                                 isBackground() ? "cyan" : // ?? is there a good default for a background collection
                                     doc.annotationOn ? "#00000015" : // faint interior for collections on PDFs, images, etc
                                         StrCast((props?.renderDepth || 0) > 0 ?
@@ -145,7 +146,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                                             Doc.UserDoc().activeCollectionBackground));
                     break;
                 //if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)";
-                default: docColor = docColor || (darkScheme() ? "black" : "white"); break;
+                default: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.WHITE); break;
             }
             if (docColor && (!doc || props?.layerProvider?.(doc) === false)) docColor = Color(docColor.toLowerCase()).fade(0.5).toString();
             return docColor;
@@ -159,7 +160,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                 case DocumentType.COL:
                     return StrCast(doc?.boxShadow,
                         isBackground() || doc?._isGroup || docProps?.LayoutTemplateString ? undefined : // groups have no drop shadow -- they're supposed to be "invisible".  LayoutString's imply collection is being rendered as something else (e.g., title of a Slide)
-                            `${darkScheme() ? "rgb(30, 32, 31) " : "#9c9396 "} ${StrCast(doc.boxShadow, "0.2vw 0.2vw 0.8vw")}`);
+                            `${darkScheme() ? Colors.DARK_GRAY : Colors.MEDIUM_GRAY} ${StrCast(doc.boxShadow, "0.2vw 0.2vw 0.8vw")}`);
 
                 case DocumentType.LABEL:
                     if (doc?.annotationOn !== undefined) return "black 2px 2px 1px";
diff --git a/src/client/views/_nodeModuleOverrides.scss b/src/client/views/_nodeModuleOverrides.scss
index b8a7db034..56346b68b 100644
--- a/src/client/views/_nodeModuleOverrides.scss
+++ b/src/client/views/_nodeModuleOverrides.scss
@@ -2,7 +2,7 @@
 
 // goldenlayout stuff
 div .lm_header {
-    background: $dark-color;
+    background: $dark-gray;
 }
 
 .lm_tab {
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index d82eb85bf..48422b789 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -251,7 +251,7 @@ $timelineDark: #77a1aa;
             top: 0px;
             width: 100px;
             height: 30%;
-            border: 1px solid $dark-color;
+            border: 1px solid $dark-gray;
             font-size: 12px;
             line-height: 11px;
             background-color: $timelineDark;
diff --git a/src/client/views/animationtimeline/TimelineMenu.scss b/src/client/views/animationtimeline/TimelineMenu.scss
index 935f04aba..43a89419e 100644
--- a/src/client/views/animationtimeline/TimelineMenu.scss
+++ b/src/client/views/animationtimeline/TimelineMenu.scss
@@ -39,7 +39,7 @@
         border-top-left-radius: 15px; 
         border-top-right-radius: 15px; 
         text-transform: uppercase; 
-        background: $dark-color; 
+        background: $dark-gray; 
         letter-spacing: 2px; 
 
         .timeline-menu-header-desc{
@@ -82,7 +82,7 @@
         border-color: $medium-gray;
         border-bottom-style: solid;
         border-top-style: solid;
-        background: $darker-alt-accent; 
+        background: $medium-blue; 
     }
 
     .timeline-menu-desc {
diff --git a/src/client/views/animationtimeline/Track.scss b/src/client/views/animationtimeline/Track.scss
index 6d6d1620f..f45e0556d 100644
--- a/src/client/views/animationtimeline/Track.scss
+++ b/src/client/views/animationtimeline/Track.scss
@@ -7,7 +7,7 @@
             top: 0px;
             width: calc(100%);
             background-color: $white;
-            border: 1px solid $dark-color;
+            border: 1px solid $dark-gray;
             position: relative;
             z-index: 100;
         }
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 6d5dc9b18..a054f0ae1 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -110,7 +110,7 @@
     }
 
     .flexlayout__splitter {
-        background-color: $dark-color;
+        background-color: $dark-gray;
     }
 
     .flexlayout__splitter:hover {
@@ -179,7 +179,7 @@
         position: absolute;
         box-sizing: border-box;
         background-color: #222;
-        color: $dark-color;
+        color: $dark-gray;
     }
 
     .flexlayout__tab_button {
@@ -268,7 +268,7 @@
     }
 
     .flexlayout__tab_header_outer {
-        background-color: $dark-color;
+        background-color: $dark-gray;
         position: absolute;
         left: 0;
         right: 0;
@@ -332,28 +332,28 @@
     }
 
     .flexlayout__border_top {
-        background-color: $dark-color;
+        background-color: $dark-gray;
         border-bottom: 1px solid #ddd;
         box-sizing: border-box;
         overflow: hidden;
     }
 
     .flexlayout__border_bottom {
-        background-color: $dark-color;
+        background-color: $dark-gray;
         border-top: 1px solid #333;
         box-sizing: border-box;
         overflow: hidden;
     }
 
     .flexlayout__border_left {
-        background-color: $dark-color;
+        background-color: $dark-gray;
         border-right: 1px solid #333;
         box-sizing: border-box;
         overflow: hidden;
     }
 
     .flexlayout__border_right {
-        background-color: $dark-color;
+        background-color: $dark-gray;
         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 632ce4417..ec8805907 100644
--- a/src/client/views/collections/CollectionLinearView.scss
+++ b/src/client/views/collections/CollectionLinearView.scss
@@ -12,7 +12,7 @@
         align-items: center;
 
         >span {
-            background: $dark-color;
+            background: $dark-gray;
             color: $white;
             border-radius: 18px;
             margin-right: 6px;
@@ -63,7 +63,7 @@
         >label {
             margin-top: "auto";
             margin-bottom: "auto";
-            background: $dark-color;
+            background: $dark-gray;
             color: $white;
             display: inline-block;
             border-radius: 18px;
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index 328d7c081..7e507d6b5 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -411,7 +411,7 @@
             }
 
             .switchToText:hover {
-                color: $dark-color;
+                color: $dark-gray;
             }
         }
 
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index f103d9581..4b123c8b6 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -96,7 +96,7 @@
         height: 2vw;
         width: 100%;
         font-family: $sans-serif;
-        background: $dark-color;
+        background: $dark-gray;
         color: $white;
     }
 
@@ -184,7 +184,7 @@
         // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong
 
         .editableView-input {
-            color: $dark-color;
+            color: $dark-gray;
         }
 
         .editableView-input:hover,
@@ -205,7 +205,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            color: $dark-color;
+            color: $dark-gray;
 
             .editableView-container-editing-oneLine,
             .editableView-container-editing {
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 30f8e0112..7aa8dfd56 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -480,7 +480,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         if (value && this.columnHeaders) {
             const schemaHdrField = new SchemaHeaderField(value);
             this.columnHeaders.push(schemaHdrField);
-            DocUtils.addFieldEnumerations(undefined, this.pivotField, [{ title: value, _backgroundColor: schemaHdrField.color }]);
+            DocUtils.addFieldEnumerations(undefined, this.pivotField, [{ title: value, _backgroundColor: "schemaHdrField.color" }]);
             return true;
         }
         return false;
diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index 218bdbf3c..bdae3b9b1 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -3,19 +3,21 @@
 $white: #ffffff;
 $light-gray:#dfdfdf;
 $medium-gray: #9F9F9F;
+$dark-gray: #323232;
+$black: #000000;
 
-$lighter-alt-accent: rgb(207, 220, 240);
-$darker-alt-accent: #b2cef8;
+$light-blue: #BDDDF5;
+$medium-blue: #4476F7;
+$pink: "#E0217D";
+$yellow: "#F5D747";
+
+$antimodemenu-height: 36px;
 
-$dark-color: #111111;
-$link-color: #add8e6;
-$antimodemenu-height: 35px;
 // fonts
 $sans-serif: "Noto Sans",
 sans-serif;
 // $sans-serif: "Roboto Slab", sans-serif;
-$serif: "Crimson Text",
-serif;
+
 // misc values
 $border-radius: 0.3em;
 //
@@ -31,7 +33,7 @@ $docDecorations-zindex: 998; // then doc decorations appear over everything else
 $remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right?
 $COLLECTION_BORDER_WIDTH: 0;
 $SCHEMA_DIVIDER_WIDTH: 4;
-$MINIMIZED_ICON_SIZE:25;
+$MINIMIZED_ICON_SIZE:24;
 $MAX_ROW_HEIGHT: 44px;
 $DFLT_IMAGE_NATIVE_DIM: 900px;
 $MENU_PANEL_WIDTH: 60px;
diff --git a/src/client/views/global/globalEnums.tsx b/src/client/views/global/globalEnums.tsx
index 9d182ee0f..80558e1c1 100644
--- a/src/client/views/global/globalEnums.tsx
+++ b/src/client/views/global/globalEnums.tsx
@@ -1,12 +1,13 @@
 export enum Colors {
-    DarkGray = "#111111",
-    MediumGray = "#9F9F9F",
-    LightGray = "#DFDFDF",
-    White = "#FFFFFF",
-    MediumBlue = "#4476F7",
-    LightBlue = "#BDDDF5",
-    Pink = "#E0217D",
-    Yellow = "#F5D747"
+    BLACK = "#000000",
+    DARK_GRAY = "#323232",
+    MEDIUM_GRAY = "#9F9F9F",
+    LIGHT_GRAY = "#DFDFDF",
+    WHITE = "#FFFFFF",
+    MEDIUM_BLUE = "#4476F7",
+    LIGHT_BLUE = "#BDDDF5",
+    PINK = "#E0217D",
+    YELLOW = "#F5D747"
 }
 
 export enum FontSizes {
diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index eee072ed5..839ebf894 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -272,7 +272,7 @@
 
 .linkEditor-typeButton {
     background-color: transparent;
-    color: $dark-color;
+    color: $dark-gray;
     height: 20px;
     padding: 0 3px;
     padding-bottom: 2px;
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index a07e540ae..4f9881565 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -143,7 +143,7 @@
         padding-right: 6px;
         border-radius: 50%;
         pointer-events: auto;
-        background-color: $dark-color;
+        background-color: $dark-gray;
         color: $white;
         font-size: 65%;
         transition: transform 0.2s;
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 33ac85a0e..718af2c16 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -1,5 +1,7 @@
+@import "../global/globalCssVariables";
+
 .fontIconBox-label {
-    color: white;
+    color: $white;
     margin-right: 4px;
     margin-top: 1px;
     position: relative;
@@ -22,8 +24,8 @@
         position: absolute;
         top: -10px;
         right: -10px;
-        color: white;
-        background: #f44b42;
+        color: $white;
+        background: $pink;
         font-weight: 300;
         border-radius: 100%;
         width: 25px;
@@ -37,7 +39,7 @@
 .menuButton-circle,
 .menuButton-round {
     border-radius: 100%;
-    background-color: black;
+    background-color: $dark-gray;
     padding: 0;
 
     .fontIconBox-label {
@@ -47,13 +49,14 @@
     }
 
     &:hover {
-        background-color: #aaaaa3;
+        background-color: $light-gray;
     }
 }
 
 .menuButton-square {
     padding-top: 3px;
     padding-bottom: 3px;
+    background-color: $dark-gray;
 
     .fontIconBox-label {
         border-radius: 0px;
diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss
index c46b3eb20..2a0085ade 100644
--- a/src/client/views/search/CheckBox.scss
+++ b/src/client/views/search/CheckBox.scss
@@ -13,7 +13,7 @@
         margin-top: 0px;
 
         .check-container:hover~.check-box {
-            background-color: $darker-alt-accent;
+            background-color: $medium-blue;
         }
 
         .check-container {
diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss
index d87b8bd5c..3cb08d756 100644
--- a/src/client/views/search/IconButton.scss
+++ b/src/client/views/search/IconButton.scss
@@ -43,7 +43,7 @@
 
     .type-icon:hover {
         transform: scale(1.1);
-        background-color: $darker-alt-accent;
+        background-color: $medium-blue;
         opacity: 1;
 
         +.filter-description {
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index 6fd91c9c1..2dd6b1b79 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -104,7 +104,7 @@ export class IconButton extends React.Component<IconButtonProps>{
     hoverStyle = {
         opacity: 1,
         backgroundColor: "rgb(128, 128, 128)"
-        //backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent
+        //backgroundColor: "rgb(178, 206, 248)" //$medium-blue
     };
 
     render() {
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 8d6bc86cb..6a2fe6f19 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -20,7 +20,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        background-color: $dark-color;
+        background-color: $dark-gray;
 
         .searchBox-lozenges {
             position: absolute;
@@ -86,7 +86,7 @@
             &.searchBox-input {
                 margin:5px;
                 border-radius:20px;
-                border:$dark-color;    
+                border:$dark-gray;    
                 display: block;
                 width: 130px;
                 -webkit-transition: width 0.4s;
diff --git a/src/client/views/search/SelectorContextMenu.scss b/src/client/views/search/SelectorContextMenu.scss
index 438b6a0c2..a114f679c 100644
--- a/src/client/views/search/SelectorContextMenu.scss
+++ b/src/client/views/search/SelectorContextMenu.scss
@@ -1,7 +1,7 @@
 @import "../global/globalCssVariables";
 
 .parents {
-    background: $lighter-alt-accent;
+    background: $light-blue;
     padding: 10px;
     // width: 300px;
 
@@ -10,7 +10,7 @@
     }
 
     .collection {
-        border-color: $darker-alt-accent;
+        border-color: $medium-blue;
         border-bottom-style: solid;
     }
 }
\ No newline at end of file