added a hideUI option to hide buttons. fixed a mess of runtime warnings mostly related to how scss files can be included in each other

93 files changed, 1909 insertions, 1931 deletions

diff --git a/packages/components/src/components/Button/Button.scss b/packages/components/src/components/Button/Button.scss
index a31923e6d..bbe2e2470 100644
--- a/packages/components/src/components/Button/Button.scss
+++ b/packages/components/src/components/Button/Button.scss
@@ -1,118 +1,118 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .button-container {
-  position: relative;
-  width: fit-content;
-  padding: $padding;
-  cursor: pointer;
-  overflow: hidden;
-  user-select: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-  font-family: $default-font;
-  border-radius: $standard-border-radius;
-  white-space: nowrap;
-  transition: 0.4s;
-  border: solid 1px;
-  border-color: transparent;
-  pointer-events: all;
-
-  &.icon {
-    padding: 0;
-    gap: 0;
-  }
-
-  .button-content {
+    position: relative;
+    width: fit-content;
+    padding: global.$padding;
+    cursor: pointer;
+    overflow: hidden;
+    user-select: none;
     display: flex;
     justify-content: center;
     align-items: center;
-    width: fit-content;
-    height: 100%;
-    z-index: 1;
     gap: 5px;
+    font-family: global.$default-font;
+    border-radius: global.$standard-border-radius;
+    white-space: nowrap;
+    transition: 0.4s;
+    border: solid 1px;
+    border-color: transparent;
+    pointer-events: all;
 
-    .icon {
-      display: flex;
-      justify-content: center;
-      align-items: center;
+    &.icon {
+        padding: 0;
+        gap: 0;
     }
-  }
-
-  .background {
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    left: 0;
-    top: 0;
-    position: absolute;
-    transition: 0.4s;
-  }
 
-  &.inactive {
-    &:hover {
-      .background {
-        filter: opacity(0) !important;
-      }
+    .button-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: fit-content;
+        height: 100%;
+        z-index: 1;
+        gap: 5px;
+
+        .icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
     }
-  }
 
-  &.primary {
     .background {
-      filter: opacity(0);
-
-      &.active {
-        filter: opacity(0.2) !important;
-      }
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        left: 0;
+        top: 0;
+        position: absolute;
+        transition: 0.4s;
     }
 
-    &:hover{
-      .background {
-        filter: opacity(0.2)
-      }
+    &.inactive {
+        &:hover {
+            .background {
+                filter: opacity(0) !important;
+            }
+        }
     }
-  }
 
-  &.secondary {
-    .background {
-      filter: opacity(0);
+    &.primary {
+        .background {
+            filter: opacity(0);
 
-      &.active {
-        filter: opacity(0.2) !important;
-      }
-    }
+            &.active {
+                filter: opacity(0.2) !important;
+            }
+        }
 
-    &:hover{
-      .background {
-        filter: opacity(0.2)
-      }
+        &:hover {
+            .background {
+                filter: opacity(0.2);
+            }
+        }
     }
-  }
 
-  &.tertiary {
-    &:hover{
-      box-shadow: $standard-shadow;
-    }
+    &.secondary {
+        .background {
+            filter: opacity(0);
 
-    .background {
-      filter: opacity(1) !important;
+            &.active {
+                filter: opacity(0.2) !important;
+            }
+        }
+
+        &:hover {
+            .background {
+                filter: opacity(0.2);
+            }
+        }
     }
 
-    &:hover{
-      .background {
-        filter: brightness(0.8);
-      }
+    &.tertiary {
+        &:hover {
+            box-shadow: global.$standard-shadow;
+        }
+
+        .background {
+            filter: opacity(1) !important;
+        }
+
+        &:hover {
+            .background {
+                filter: brightness(0.8);
+            }
+        }
     }
-  }
 
-  .label {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: $xsmall-fontSize;
-  }
+    .label {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: global.$xsmall-fontSize;
+    }
 }
diff --git a/packages/components/src/components/ColorPicker/ColorPicker.scss b/packages/components/src/components/ColorPicker/ColorPicker.scss
index e3ed32a45..32b912fe5 100644
--- a/packages/components/src/components/ColorPicker/ColorPicker.scss
+++ b/packages/components/src/components/ColorPicker/ColorPicker.scss
@@ -1,23 +1,23 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .colorPicker-container {
-  display: flex;
-  border-radius: $standard-border-radius;
-  width: fit-content;
-  height: fit-content;
-  position: relative;
-
-  .colorPicker-toggle {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    cursor: pointer;
-  }
-
-  .colorPicker-popup {
-    position: absolute;
-    top: calc(100% + 5px);
+    display: flex;
+    border-radius: global.$standard-border-radius;
     width: fit-content;
     height: fit-content;
-  }
+    position: relative;
+
+    .colorPicker-toggle {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        cursor: pointer;
+    }
+
+    .colorPicker-popup {
+        position: absolute;
+        top: calc(100% + 5px);
+        width: fit-content;
+        height: fit-content;
+    }
 }
diff --git a/packages/components/src/components/Dropdown/Dropdown.scss b/packages/components/src/components/Dropdown/Dropdown.scss
index 34ed84004..f9ea2711a 100644
--- a/packages/components/src/components/Dropdown/Dropdown.scss
+++ b/packages/components/src/components/Dropdown/Dropdown.scss
@@ -1,135 +1,136 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .dropdown {
-  margin-top: 10px;
+    margin-top: 10px;
 }
 
 .divider {
-  height: 1px;
-  width: 100%;
-  background: $medium-gray;
+    height: 1px;
+    width: 100%;
+    background: global.$medium-gray;
 }
 
 .dropdown-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-width: fit-content;
-  width: 100%;
-  border-radius: $standard-border-radius;
-  height: 100%;
-  position: relative;
-  transition: 0.4s;
-
-  .dropdown-list {
-    position: absolute;
-    top: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: fit-content;
     width: 100%;
-  }
-  .dropdown-toggle-mini,
-  .dropdown-toggle {
-    width: calc(100% - 2px);
-    display: grid;
-    grid-template-columns: calc(100% - 30px) 30px;
-    grid-template-areas: 'button end';
-    grid-template-rows: 1fr;
+    border-radius: global.$standard-border-radius;
+    height: 100%;
     position: relative;
-    align-items: center;
-    border: solid 1px;
-    border-color: transparent;
-    border-radius: $standard-border-radius;
-    overflow: hidden;
-
-    &.inactive {
-      filter: opacity(0.5);
-      pointer-events: none;
-      cursor: not-allowed;
-    }
+    transition: 0.4s;
 
-    .background {
-      width: 100%;
-      height: 100%;
-      z-index: 0;
-      position: absolute;
-      transition: 0.4s;
+    .dropdown-list {
+        position: absolute;
+        top: 100%;
+        width: 100%;
     }
+    .dropdown-toggle-mini,
+    .dropdown-toggle {
+        width: calc(100% - 2px);
+        display: grid;
+        grid-template-columns: calc(100% - 30px) 30px;
+        grid-template-areas: 'button end';
+        grid-template-rows: 1fr;
+        position: relative;
+        align-items: center;
+        border: solid 1px;
+        border-color: transparent;
+        border-radius: global.$standard-border-radius;
+        overflow: hidden;
 
-    &.inactive {
-      &:hover {
-        .background {
-          filter: opacity(0) !important;
+        &.inactive {
+            filter: opacity(0.5);
+            pointer-events: none;
+            cursor: not-allowed;
         }
-      }
-    }
-  
-    &.primary {
-      .background {
-        filter: opacity(0);
-  
-        &.active {
-          filter: opacity(0.2) !important;
-        }
-      }
-  
-      &:hover{
+
         .background {
-          filter: opacity(0.2)
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            position: absolute;
+            transition: 0.4s;
         }
-      }
-    }
-  
-    &.secondary {
-      .background {
-        filter: opacity(0);
-  
-        &.active {
-          filter: opacity(0.2) !important;
+
+        &.inactive {
+            &:hover {
+                .background {
+                    filter: opacity(0) !important;
+                }
+            }
         }
-      }
-  
-      &:hover{
-        .background {
-          filter: opacity(0.2)
+
+        &.primary {
+            .background {
+                filter: opacity(0);
+
+                &.active {
+                    filter: opacity(0.2) !important;
+                }
+            }
+
+            &:hover {
+                .background {
+                    filter: opacity(0.2);
+                }
+            }
         }
-      }
-    }
-  
-    &.tertiary {  
-      &:hover{
-        box-shadow: $standard-button-shadow;
-      }
-  
-      &:hover{
-        .background {
-          filter: brightness(0.8);
+
+        &.secondary {
+            .background {
+                filter: opacity(0);
+
+                &.active {
+                    filter: opacity(0.2) !important;
+                }
+            }
+
+            &:hover {
+                .background {
+                    filter: opacity(0.2);
+                }
+            }
         }
-      }
-    }
 
-    .toggle-button {
-      grid-area: button;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      min-width: 70px;
-      justify-self: center;
-    }
+        &.tertiary {
+            &:hover {
+                box-shadow: global.$standard-button-shadow;
+            }
 
-    .toggle-caret {
-      cursor: pointer;
-      grid-area: end;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      justify-self: center;
+            &:hover {
+                .background {
+                    filter: brightness(0.8);
+                }
+            }
+        }
+
+        .toggle-button {
+            grid-area: button;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            min-width: 70px;
+            justify-self: center;
+        }
+
+        .toggle-caret {
+            cursor: pointer;
+            grid-area: end;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            justify-self: center;
+        }
     }
-  }
-  .dropdown-toggle-mini {
-    .toggle-caret {
-      position: absolute;
-      top:0; left:0;
+    .dropdown-toggle-mini {
+        .toggle-caret {
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
     }
-  }
 }
diff --git a/packages/components/src/components/DropdownSearch/DropdownSearch.scss b/packages/components/src/components/DropdownSearch/DropdownSearch.scss
index e111c822b..d937df540 100644
--- a/packages/components/src/components/DropdownSearch/DropdownSearch.scss
+++ b/packages/components/src/components/DropdownSearch/DropdownSearch.scss
@@ -1,123 +1,122 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .dropdownsearch {
-  margin-top: 10px;
+    margin-top: 10px;
 }
 
 .divider {
-  height: 1px;
-  width: 100%;
-  background: $medium-gray;
+    height: 1px;
+    width: 100%;
+    background: global.$medium-gray;
 }
 
 .dropdownsearch-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-width: fit-content;
-  border-radius: $standard-border-radius;
-  height: 100%;
-  position: relative;
-  transition: 0.4s;
-
-  .dropdownsearch-list {
-    position: absolute;
-    top: 100%;
-    width: 100%;
-  }
-
-  .dropdownsearch-toggle {
-    width: 100%;
-    display: grid;
-    grid-template-columns: calc(100% - 30px) 30px;
-    grid-template-areas: 'button end';
-    grid-template-rows: 1fr;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: fit-content;
+    border-radius: global.$standard-border-radius;
+    height: 100%;
     position: relative;
-    align-items: center;
-    border: solid 1px;
-    border-color: transparent;
-    border-radius: $standard-border-radius;
-    overflow: hidden;
-
-    .toggle-background {
-      width: 100%;
-      height: 100%;
-      z-index: 0;
-      position: absolute;
-      transition: 0.4s;
-
-      &.active {
-        filter: opacity(0.2) !important;
-      }
+    transition: 0.4s;
+
+    .dropdownsearch-list {
+        position: absolute;
+        top: 100%;
+        width: 100%;
     }
 
-    &.primary {
-      color: $medium-blue;
-      .toggle-background {
-        background: $medium-blue;
-        filter: opacity(0);
-      }
-  
-      &:hover{
+    .dropdownsearch-toggle {
+        width: 100%;
+        display: grid;
+        grid-template-columns: calc(100% - 30px) 30px;
+        grid-template-areas: 'button end';
+        grid-template-rows: 1fr;
+        position: relative;
+        align-items: center;
+        border: solid 1px;
+        border-color: transparent;
+        border-radius: global.$standard-border-radius;
+        overflow: hidden;
+
         .toggle-background {
-          filter: opacity(0.2)
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            position: absolute;
+            transition: 0.4s;
+
+            &.active {
+                filter: opacity(0.2) !important;
+            }
         }
-      }
-  
-    }
-  
-    &.secondary {
-      .toggle-background {
-        background: $medium-blue;
-        filter: opacity(0);
-      }
-  
-      border: solid 1px $medium-blue;
-      color: $medium-blue;
-  
-      &:hover{
-        .toggle-background {
-          filter: opacity(0.2)
+
+        &.primary {
+            color: global.$medium-blue;
+            .toggle-background {
+                background: global.$medium-blue;
+                filter: opacity(0);
+            }
+
+            &:hover {
+                .toggle-background {
+                    filter: opacity(0.2);
+                }
+            }
         }
-      }
-    }
-  
-    &.tertiary {
-      color: white;
-  
-      .toggle-background {
-        background: $medium-blue;
-      }
-  
-      &:hover{
-        box-shadow: $standard-button-shadow;
-      }
-  
-      &:hover{
-        .toggle-background {
-          filter: brightness(0.8);
+
+        &.secondary {
+            .toggle-background {
+                background: global.$medium-blue;
+                filter: opacity(0);
+            }
+
+            border: solid 1px global.$medium-blue;
+            color: global.$medium-blue;
+
+            &:hover {
+                .toggle-background {
+                    filter: opacity(0.2);
+                }
+            }
         }
-      }
-    }
 
-    .toggle-button {
-      grid-area: button;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      min-width: 70px;
-      justify-self: center;
-    }
+        &.tertiary {
+            color: white;
+
+            .toggle-background {
+                background: global.$medium-blue;
+            }
 
-    .toggle-caret {
-      cursor: pointer;
-      grid-area: end;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      justify-self: center;
+            &:hover {
+                box-shadow: global.$standard-button-shadow;
+            }
+
+            &:hover {
+                .toggle-background {
+                    filter: brightness(0.8);
+                }
+            }
+        }
+
+        .toggle-button {
+            grid-area: button;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            min-width: 70px;
+            justify-self: center;
+        }
+
+        .toggle-caret {
+            cursor: pointer;
+            grid-area: end;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            justify-self: center;
+        }
     }
-  }
 }
diff --git a/packages/components/src/components/EditableText/EditableText.scss b/packages/components/src/components/EditableText/EditableText.scss
index 19e5af2cd..15965e97e 100644
--- a/packages/components/src/components/EditableText/EditableText.scss
+++ b/packages/components/src/components/EditableText/EditableText.scss
@@ -1,131 +1,129 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .editableText-container {
-  position: relative;
-  width: fit-content;
-  border: solid 1px;
-  border-color: transparent;
-  border-radius: $standard-border-radius;
-  font-family: $default-font;
-  overflow: hidden;
-  padding: $padding;
-
-  .password {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    right: 0;
-    top: 0;
-  }
-
-  .editableText-background {
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    position: absolute;
-    transition: 0.4s;
-    top: 0;
-    left: 0;
-  }
-
-  &.primary {
-
-    &:focus-within {
-      .editableText-background {
-        filter: opacity(0.2) !important;
-      }
+    position: relative;
+    width: fit-content;
+    border: solid 1px;
+    border-color: transparent;
+    border-radius: global.$standard-border-radius;
+    font-family: global.$default-font;
+    overflow: hidden;
+    padding: global.$padding;
+
+    .password {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        right: 0;
+        top: 0;
     }
 
     .editableText-background {
-      filter: opacity(0);
-
-      &.active {
-        filter: opacity(0.2) !important;
-      }
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        position: absolute;
+        transition: 0.4s;
+        top: 0;
+        left: 0;
     }
 
-    &:hover{
-      .editableText-background {
-        filter: opacity(0.2)
-      }
+    &.primary {
+        &:focus-within {
+            .editableText-background {
+                filter: opacity(0.2) !important;
+            }
+        }
+
+        .editableText-background {
+            filter: opacity(0);
+
+            &.active {
+                filter: opacity(0.2) !important;
+            }
+        }
+
+        &:hover {
+            .editableText-background {
+                filter: opacity(0.2);
+            }
+        }
     }
-  }
-
-  &.secondary {
-    &:focus-within {
-      .editableText-background {
-        filter: opacity(0.2) !important;
-      }
-    }
-
-    .editableText-background {
-      filter: opacity(0);
 
-      &.active {
-        filter: opacity(0.2) !important;
-      }
+    &.secondary {
+        &:focus-within {
+            .editableText-background {
+                filter: opacity(0.2) !important;
+            }
+        }
+
+        .editableText-background {
+            filter: opacity(0);
+
+            &.active {
+                filter: opacity(0.2) !important;
+            }
+        }
+
+        &:hover {
+            .editableText-background {
+                filter: opacity(0.2);
+            }
+        }
     }
 
-    &:hover{
-      .editableText-background {
-        filter: opacity(0.2)
-      }
-    }
-  }
+    &.tertiary {
+        &:hover {
+            box-shadow: global.$standard-shadow;
+        }
 
-  &.tertiary {
-    &:hover{
-      box-shadow: $standard-shadow;
+        &:hover {
+            .editableText-background {
+                filter: brightness(0.8);
+            }
+        }
     }
 
-    &:hover{
-      .editableText-background {
-        filter: brightness(0.8);
-      }
+    .editableText {
+        -webkit-appearance: none;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: inherit;
+        border: none;
+        outline: none;
+        margin: 0px !important;
+        padding: 0px !important;
+        box-shadow: none !important;
+        background: transparent;
+        color: inherit;
+        z-index: 1;
+
+        &.center {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
     }
-  }
 
-  .editableText {
-    -webkit-appearance: none;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: inherit;
-    border: none;
-    outline: none;
-    margin: 0px !important;
-    padding: 0px !important;
-    box-shadow: none !important;
-    background: transparent;
-    color: inherit;
-    z-index: 1;
-
-    &.center {
-      display: flex;
-      justify-content: center;
-      align-items: center;
+    .displayText {
+        cursor: text !important;
+        width: 100%;
+        height: 100%;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: flex;
+        align-items: center;
+        font-size: inherit;
+        color: inherit;
+        z-index: 1;
+
+        &.center {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
     }
-  }
-  
-  .displayText {
-    cursor: text !important;
-    width: 100%;
-    height: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    display: flex;
-    align-items: center;
-    font-size: inherit;
-    color: inherit;
-    z-index: 1;
-
-    &.center {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
 }
-
diff --git a/packages/components/src/components/FormInput/FormInput.scss b/packages/components/src/components/FormInput/FormInput.scss
index db04ff8cf..2554cbd01 100644
--- a/packages/components/src/components/FormInput/FormInput.scss
+++ b/packages/components/src/components/FormInput/FormInput.scss
@@ -1,69 +1,69 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .formInput-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: fit-content;
-  position: relative;
-  margin-top: 20px;
-
-  .formInput {
-    font-family: inherit;
+    display: flex;
+    flex-direction: column;
     width: 100%;
-    border: 0;
-    border-bottom: 2px solid black;
-    outline: 0;
-    font-size: 1rem;
-    color: black;
-    padding: 7px 0;
-    background: transparent;
-    transition: border-color 0.2s;
-
-    &::placeholder {
-      color: transparent;
-    }
+    height: fit-content;
+    position: relative;
+    margin-top: 20px;
 
-    &:focus {
-      ~ .formInput-label {
-        position: absolute;
-        transform: translate(0px, -13px);
-        display: block;
-        transition: 0.2s;
+    .formInput {
+        font-family: inherit;
+        width: 100%;
+        border: 0;
+        border-bottom: 2px solid black;
+        outline: 0;
         font-size: 1rem;
-        font-weight: 700;
-      }
-      padding-bottom: 6px;
-      font-weight: 700;
-      border-width: 3px;
-      border-image: linear-gradient(to right, black, white);
-      border-image-slice: 1;
+        color: black;
+        padding: 7px 0;
+        background: transparent;
+        transition: border-color 0.2s;
+
+        &::placeholder {
+            color: transparent;
+        }
+
+        &:focus {
+            ~ .formInput-label {
+                position: absolute;
+                transform: translate(0px, -13px);
+                display: block;
+                transition: 0.2s;
+                font-size: 1rem;
+                font-weight: 700;
+            }
+            padding-bottom: 6px;
+            font-weight: 700;
+            border-width: 3px;
+            border-image: linear-gradient(to right, black, white);
+            border-image-slice: 1;
+        }
+
+        &:valid {
+            ~ .formInput-label {
+                position: absolute;
+                transform: translate(0px, -13px);
+                display: block;
+                transition: 0.2s;
+                font-size: 1rem;
+            }
+        }
+
+        &:required,
+        &:invalid {
+            box-shadow: none;
+        }
     }
 
-    &:valid {
-      ~ .formInput-label {
+    .formInput-label {
         position: absolute;
-        transform: translate(0px, -13px);
+        top: 0;
+        transform: translate(0px, 8px);
         display: block;
         transition: 0.2s;
         font-size: 1rem;
-      }
+        color: gray;
+        pointer-events: none;
     }
-
-    &:required,
-    &:invalid {
-      box-shadow: none;
-    }
-  }
-
-  .formInput-label {
-    position: absolute;
-    top: 0;
-    transform: translate(0px, 8px);
-    display: block;
-    transition: 0.2s;
-    font-size: 1rem;
-    color: gray;
-    pointer-events: none;
-  }
 }
diff --git a/packages/components/src/components/Group/Group.scss b/packages/components/src/components/Group/Group.scss
index 885472a5d..7cd3dfd9e 100644
--- a/packages/components/src/components/Group/Group.scss
+++ b/packages/components/src/components/Group/Group.scss
@@ -1,16 +1,15 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .group-wrapper {
-  overflow: hidden;
+    overflow: hidden;
 
-  .group-container {
-    width: fit-content;
-    display: flex;
-    flex-flow: row wrap;
-    height: fit-content;
-    flex-flow: row;
-    justify-content: flex-start;
-    align-items: center;
-  }
+    .group-container {
+        width: fit-content;
+        display: flex;
+        flex-flow: row wrap;
+        height: fit-content;
+        flex-flow: row;
+        justify-content: flex-start;
+        align-items: center;
+    }
 }
-
diff --git a/packages/components/src/components/IconButton/IconButton.scss b/packages/components/src/components/IconButton/IconButton.scss
index 9a0b53c0f..f899dc50f 100644
--- a/packages/components/src/components/IconButton/IconButton.scss
+++ b/packages/components/src/components/IconButton/IconButton.scss
@@ -1,121 +1,119 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .iconButton-container {
-  position: relative;
-  cursor: pointer;
-  overflow: hidden;
-  user-select: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: $default-font;
-  border-radius: $standard-border-radius;
-  white-space: nowrap;
-  transition: 0.4s;
-  border: solid 1px;
-  border-color: transparent;
-  pointer-events: all;
-
-
-  .iconButton-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    z-index: 1;
-    font-family: Verdana, sans-serif;
-    font-weight: 500;
-  }
-
-  .icon {
-    z-index: 1;
+    position: relative;
+    cursor: pointer;
+    overflow: hidden;
+    user-select: none;
     display: flex;
     justify-content: center;
     align-items: center;
-  }
-
-  .background {
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    position: absolute;
+    font-family: global.$default-font;
+    border-radius: global.$standard-border-radius;
+    white-space: nowrap;
     transition: 0.4s;
-  }
+    border: solid 1px;
+    border-color: transparent;
+    pointer-events: all;
+
+    .iconButton-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        width: 100%;
+        z-index: 1;
+        font-family: Verdana, sans-serif;
+        font-weight: 500;
+    }
 
-  &.inactive {
-    .background {
-      filter: opacity(0) !important;
+    .icon {
+        z-index: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
-  }
 
-  &.primary {
     .background {
-      filter: opacity(0);
-
-      &.active {
-        filter: opacity(0.2) !important;
-      }
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        position: absolute;
+        transition: 0.4s;
     }
 
-    &:hover{
-      .background {
-        filter: opacity(0.2)
-      }
+    &.inactive {
+        .background {
+            filter: opacity(0) !important;
+        }
     }
 
-  }
+    &.primary {
+        .background {
+            filter: opacity(0);
 
-  &.secondary {
-    .background {
-      filter: opacity(0);
+            &.active {
+                filter: opacity(0.2) !important;
+            }
+        }
 
-      &.active {
-        filter: opacity(0.2) !important;
-      }
+        &:hover {
+            .background {
+                filter: opacity(0.2);
+            }
+        }
     }
 
-    &:hover{
-      .background {
-        filter: opacity(0.2)
-      }
-    }
-  }
+    &.secondary {
+        .background {
+            filter: opacity(0);
+
+            &.active {
+                filter: opacity(0.2) !important;
+            }
+        }
 
-  &.tertiary {
-    &:hover{
-      box-shadow: $standard-button-shadow;
+        &:hover {
+            .background {
+                filter: opacity(0.2);
+            }
+        }
     }
 
-    &:hover{
-      .background {
-        filter: brightness(0.8);
-      }
+    &.tertiary {
+        &:hover {
+            box-shadow: global.$standard-button-shadow;
+        }
+
+        &:hover {
+            .background {
+                filter: brightness(0.8);
+            }
+        }
     }
-  }
 
-  .color {
-    position: relative;
-    width: 70%;
-    height: 15%;
-    z-index: 3;
-    margin-top: 2px;
-    border-radius: 10px;
-    outline: solid 0.3px;
-    outline-offset: -0.3px;
-  }
+    .color {
+        position: relative;
+        width: 70%;
+        height: 15%;
+        z-index: 3;
+        margin-top: 2px;
+        border-radius: 10px;
+        outline: solid 0.3px;
+        outline-offset: -0.3px;
+    }
 
-  .iconButton-label {
-    position: relative;
-    z-index: 2;
-    max-width: 100%;
-    overflow: hidden;
-    white-space: normal;
-    display: flex;
-    text-align: center;
-    justify-content: center;
-    align-items: center;
-    font-size: $xsmall-fontSize;
-  }
+    .iconButton-label {
+        position: relative;
+        z-index: 2;
+        max-width: 100%;
+        overflow: hidden;
+        white-space: normal;
+        display: flex;
+        text-align: center;
+        justify-content: center;
+        align-items: center;
+        font-size: global.$xsmall-fontSize;
+    }
 }
diff --git a/packages/components/src/components/ListBox/ListBox.scss b/packages/components/src/components/ListBox/ListBox.scss
index dc449c943..dc2a44513 100644
--- a/packages/components/src/components/ListBox/ListBox.scss
+++ b/packages/components/src/components/ListBox/ListBox.scss
@@ -1,4 +1,4 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .listBox-container {
     position: relative;
@@ -13,4 +13,4 @@
     max-width: 300px;
     padding: 5px;
     gap: 2px;
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/components/ListItem/ListItem.scss b/packages/components/src/components/ListItem/ListItem.scss
index 736078360..8d46605d0 100644
--- a/packages/components/src/components/ListItem/ListItem.scss
+++ b/packages/components/src/components/ListItem/ListItem.scss
@@ -1,78 +1,78 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .listItem-container {
-  position: relative;
-  width: 100%;
-  border-radius: $standard-border-radius;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  flex-direction: column;
-  cursor: pointer;
-  font-family: Verdana, sans-serif;
-  overflow: hidden;
-  text-align: left;
-
-  .listItem-background {
-    position: absolute;
+    position: relative;
     width: 100%;
-    height: 100%;
-    background: $medium-blue;
-    filter: opacity(0);
-    transition: 0.4s;
-  }
-
-  .listItem-top {
+    border-radius: global.$standard-border-radius;
     display: flex;
-    height: 30px;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-    gap: 20px;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    cursor: pointer;
+    font-family: Verdana, sans-serif;
+    overflow: hidden;
+    text-align: left;
 
-    .content {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      padding: $padding;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-      gap: 5px;
-      font-weight: 500;
-
-      .text {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    .listItem-background {
+        position: absolute;
         width: 100%;
-      }
+        height: 100%;
+        background: global.$medium-blue;
+        filter: opacity(0);
+        transition: 0.4s;
     }
 
-    .shortcut {
-      grid-area: end;
-      padding: $padding;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: $xsmall-fontSize;
-      font-family: $default-font;
-    }
+    .listItem-top {
+        display: flex;
+        height: 30px;
+        width: 100%;
+        justify-content: space-between;
+        align-items: center;
+        gap: 20px;
 
-    .caret {
-      grid-area: end;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      justify-self: center;
+        .content {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            padding: global.$padding;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+            gap: 5px;
+            font-weight: 500;
+
+            .text {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 100%;
+            }
+        }
+
+        .shortcut {
+            grid-area: end;
+            padding: global.$padding;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: global.$xsmall-fontSize;
+            font-family: global.$default-font;
+        }
+
+        .caret {
+            grid-area: end;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            justify-self: center;
+        }
     }
-  }
 
-  .listItem-description {
-    font-size: $small-fontSize;
-    display: flex;
-    padding: 0px 5px 10px 5px;
-    justify-content: flex-start;
-    width: calc(100% - 10px);
-  }
+    .listItem-description {
+        font-size: global.$small-fontSize;
+        display: flex;
+        padding: 0px 5px 10px 5px;
+        justify-content: flex-start;
+        width: calc(100% - 10px);
+    }
 }
diff --git a/packages/components/src/components/Modal/Modal.scss b/packages/components/src/components/Modal/Modal.scss
index c0667ed26..a5698432d 100644
--- a/packages/components/src/components/Modal/Modal.scss
+++ b/packages/components/src/components/Modal/Modal.scss
@@ -1,46 +1,46 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .modal-container {
-  top: 0px;
-  left: 0px;
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 100;
-
-  .modal-popup {
-    position: relative;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
     display: flex;
-    flex-direction: column;
-    align-items: left;
-    z-index: 10;
-    width: 400px;
-    height: fit-content;
-    padding: 20px;
-    border-radius: $standard-border-radius;
-    font-weight: bold;
-    font-size: 1.5rem;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+
+    .modal-popup {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: left;
+        z-index: 10;
+        width: 400px;
+        height: fit-content;
+        padding: 20px;
+        border-radius: global.$standard-border-radius;
+        font-weight: bold;
+        font-size: 1.5rem;
 
-    .modal-closeButton {
-      top: -15px;
-      right: -15px;
-      position: absolute;
-      width: fit-content;
-      height: fit-content;
+        .modal-closeButton {
+            top: -15px;
+            right: -15px;
+            position: absolute;
+            width: fit-content;
+            height: fit-content;
+        }
     }
-  }
 }
 
 .modal-background {
-  z-index: 9;
-  position: absolute;
-  top: -10vh;
-  left: -10vw;
-  backdrop-filter: blur(15px);
-  width: 200vw;
-  height: 200vh;
-  background: $modal-background;
+    z-index: 9;
+    position: absolute;
+    top: -10vh;
+    left: -10vw;
+    backdrop-filter: blur(15px);
+    width: 200vw;
+    height: 200vh;
+    background: global.$modal-background;
 }
diff --git a/packages/components/src/components/MultiToggle/MultiToggle.scss b/packages/components/src/components/MultiToggle/MultiToggle.scss
index 2522549e9..854abdca0 100644
--- a/packages/components/src/components/MultiToggle/MultiToggle.scss
+++ b/packages/components/src/components/MultiToggle/MultiToggle.scss
@@ -1,5 +1 @@
-@import '../../global/globalCssVariables.scss';
-
-.multiToggle-container {
-    
-}
\ No newline at end of file
+@use '../../global/globalCssVariables.scss' as global;
diff --git a/packages/components/src/components/NumberDropdown/NumberDropdown.scss b/packages/components/src/components/NumberDropdown/NumberDropdown.scss
index 4ed5855d9..b3111623b 100644
--- a/packages/components/src/components/NumberDropdown/NumberDropdown.scss
+++ b/packages/components/src/components/NumberDropdown/NumberDropdown.scss
@@ -1,7 +1,4 @@
-@import '../../global/globalCssVariables.scss';
-
-.numberDropdown-container {
-}
+@use '../../global/globalCssVariables.scss' as global;
 
 .form-wrapper {
     .iconButton-label {
@@ -14,6 +11,6 @@
         text-align: center;
         justify-content: center;
         align-items: center;
-        font-size: $xsmall-fontSize !important;
+        font-size: global.$xsmall-fontSize !important;
     }
 }
diff --git a/packages/components/src/components/NumberInput/NumberInput.scss b/packages/components/src/components/NumberInput/NumberInput.scss
index 2a562d395..887d64857 100644
--- a/packages/components/src/components/NumberInput/NumberInput.scss
+++ b/packages/components/src/components/NumberInput/NumberInput.scss
@@ -1,5 +1,5 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .numberInput-container {
     width: 100%;
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/components/Popup/Popup.scss b/packages/components/src/components/Popup/Popup.scss
index 39dd2c947..3087293f1 100644
--- a/packages/components/src/components/Popup/Popup.scss
+++ b/packages/components/src/components/Popup/Popup.scss
@@ -1,30 +1,30 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .popup-wrapper {
-  width: fit-content;
-
-  &.fillWidth {
-    width: 100%;
-  }
-  
-  .trigger-container {
     width: fit-content;
-    height: fit-content;
 
     &.fillWidth {
-      width: 100%;
+        width: 100%;
+    }
+
+    .trigger-container {
+        width: fit-content;
+        height: fit-content;
+
+        &.fillWidth {
+            width: 100%;
+        }
     }
-  }
 }
 
 .popup-container {
-  display: flex;
-  height: fit-content;
-  min-width: fit-content;
-  width: fit-content;
-  position: relative;
-  border: solid 1px $black;
-  border-radius: $standard-border-radius;
-  overflow: hidden;
-  background: $white;
+    display: flex;
+    height: fit-content;
+    min-width: fit-content;
+    width: fit-content;
+    position: relative;
+    border: solid 1px global.$black;
+    border-radius: global.$standard-border-radius;
+    overflow: hidden;
+    background: global.$white;
 }
diff --git a/packages/components/src/components/Slider/Slider.scss b/packages/components/src/components/Slider/Slider.scss
index 9a9fc6172..a653f024f 100644
--- a/packages/components/src/components/Slider/Slider.scss
+++ b/packages/components/src/components/Slider/Slider.scss
@@ -1,168 +1,163 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .slider-container {
-  display: flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  min-width: 200px;
-  width: 100%;
-  height: 100%;
-  font-family: $default-font;
-
-  .selected-range {
-    width: 100%;
-    background: $medium-blue;
-  }
-
-  .range {
-    position: absolute;
-    background: $light-gray;
-  }
-
-  .box-minmax{
-    width: 100%;
     display: flex;
-    justify-content: space-between;
-    font-size: 20px;
-    color: $medium-blue;
-    position: absolute;
-    top: 110%;
-  }
-  .range-slider {
-    margin: 0px;
-    position: absolute;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    min-width: 200px;
     width: 100%;
     height: 100%;
-    top: 0px;
-    left: 0px;
-
-    .rs-label-container {
-      display: flex;
-      position: absolute;
-      justify-content: center;
-      align-items: center;
-      overflow: visible;
-      border-radius: $standard-border-radius;
-      z-index: 45;
-      pointer-events: none;
-
-      .rs-label {
-        display: flex;
-        font-size: smaller;
-        white-space: nowrap;
-        border-radius: 100%;
-        text-align: center;
-        text-wrap: wrap;
-        word-break: break-all;
-        justify-content: center;
-        align-items: center;
-        font-family: $default-font;
-        user-select: none;
-        pointer-events: none;
-        top: 0px;
-        width: fit-content;
-        border-radius: $standard-border-radius;
-        z-index: 40;
-      }
-
-    }
-  
-    .rs-range {
-      width: 100%;
-      position: relative;
-      background: transparent;
-      pointer-events: none;
-      -webkit-appearance: none;
-      margin: 0px;
-      z-index: 20;
-  
-      &:focus {
-        outline: none;
-      }
-  
-      &::-webkit-slider-runnable-track {
-          width: 100%;
-          background: none;
-          cursor: pointer;
-          box-shadow: none;
-          -webkit-appearance: none;
-          pointer-events: none;
-      }
-      &::-moz-range-track {
-          width: 100%;
-          cursor: pointer;
-          box-shadow: none;
-          -webkit-appearance: none;
-          pointer-events: none;
-      }
-    
-    &::-webkit-slider-thumb {
-          cursor: ew-resize;
-          -webkit-appearance: none;
-          pointer-events: auto;
-    }
-    &::-moz-range-thumb {
-          cursor: pointer;
-          -webkit-appearance: none;
-          pointer-events: auto;
-    }
-
-    &::-moz-focus-outer {
-      border: 0;
-    }
-
-    &.xsmall {
-    &::-webkit-slider-runnable-track {
-        height: $xsmall;
-      }
+    font-family: global.$default-font;
 
-      &::-webkit-slider-thumb {
-        height: $xsmall;
-        width: $xsmall;
-        border-radius: $xsmall;
-      }
+    .selected-range {
+        width: 100%;
+        background: global.$medium-blue;
     }
 
-    &.small {
-      &::-webkit-slider-runnable-track {
-        height: $small;
-      }
-
-      &::-webkit-slider-thumb {
-        height: $small;
-        width: $small;
-        border-radius: $small;
-      }
+    .range {
+        position: absolute;
+        background: global.$light-gray;
     }
 
-    &.medium {
-      &::-webkit-slider-runnable-track {
-        height: $medium;
-      }
-
-      &::-webkit-slider-thumb {
-        height: $medium;
-        width: $medium;
-        border-radius: $medium;
-      }
+    .box-minmax {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        font-size: 20px;
+        color: global.$medium-blue;
+        position: absolute;
+        top: 110%;
     }
-
-    &.large {
-      &::-webkit-slider-runnable-track {
-        height: $large;
-      }
-
-      &::-webkit-slider-thumb {
-        height: $large;
-        width: $large;
-        border-radius: $large;
-      }
+    .range-slider {
+        margin: 0px;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+
+        .rs-label-container {
+            display: flex;
+            position: absolute;
+            justify-content: center;
+            align-items: center;
+            overflow: visible;
+            border-radius: global.$standard-border-radius;
+            z-index: 45;
+            pointer-events: none;
+
+            .rs-label {
+                display: flex;
+                font-size: smaller;
+                white-space: nowrap;
+                border-radius: 100%;
+                text-align: center;
+                text-wrap: wrap;
+                word-break: break-all;
+                justify-content: center;
+                align-items: center;
+                font-family: global.$default-font;
+                user-select: none;
+                pointer-events: none;
+                top: 0px;
+                width: fit-content;
+                border-radius: global.$standard-border-radius;
+                z-index: 40;
+            }
+        }
+
+        .rs-range {
+            width: 100%;
+            position: relative;
+            background: transparent;
+            pointer-events: none;
+            -webkit-appearance: none;
+            margin: 0px;
+            z-index: 20;
+
+            &:focus {
+                outline: none;
+            }
+
+            &::-webkit-slider-runnable-track {
+                width: 100%;
+                background: none;
+                cursor: pointer;
+                box-shadow: none;
+                -webkit-appearance: none;
+                pointer-events: none;
+            }
+            &::-moz-range-track {
+                width: 100%;
+                cursor: pointer;
+                box-shadow: none;
+                -webkit-appearance: none;
+                pointer-events: none;
+            }
+
+            &::-webkit-slider-thumb {
+                cursor: ew-resize;
+                -webkit-appearance: none;
+                pointer-events: auto;
+            }
+            &::-moz-range-thumb {
+                cursor: pointer;
+                -webkit-appearance: none;
+                pointer-events: auto;
+            }
+
+            &::-moz-focus-outer {
+                border: 0;
+            }
+
+            &.xsmall {
+                &::-webkit-slider-runnable-track {
+                    height: global.$xsmall;
+                }
+
+                &::-webkit-slider-thumb {
+                    height: global.$xsmall;
+                    width: global.$xsmall;
+                    border-radius: global.$xsmall;
+                }
+            }
+
+            &.small {
+                &::-webkit-slider-runnable-track {
+                    height: global.$small;
+                }
+
+                &::-webkit-slider-thumb {
+                    height: global.$small;
+                    width: global.$small;
+                    border-radius: global.$small;
+                }
+            }
+
+            &.medium {
+                &::-webkit-slider-runnable-track {
+                    height: global.$medium;
+                }
+
+                &::-webkit-slider-thumb {
+                    height: global.$medium;
+                    width: global.$medium;
+                    border-radius: global.$medium;
+                }
+            }
+
+            &.large {
+                &::-webkit-slider-runnable-track {
+                    height: global.$large;
+                }
+
+                &::-webkit-slider-thumb {
+                    height: global.$large;
+                    width: global.$large;
+                    border-radius: global.$large;
+                }
+            }
+        }
     }
-  }
-  }
-  
 }
-
-
-
diff --git a/packages/components/src/components/Slider/Slider.tsx b/packages/components/src/components/Slider/Slider.tsx
index 3ca51efed..f6f53799c 100644
--- a/packages/components/src/components/Slider/Slider.tsx
+++ b/packages/components/src/components/Slider/Slider.tsx
@@ -1,178 +1,188 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { Colors, getFontSize, getHeight, IGlobalProps, Size , getFormLabelSize, isDark, INumberProps } from '../../global'
-import './Slider.scss'
+import React, { useState } from 'react';
+import { Colors, getFontSize, getHeight, Size, getFormLabelSize, isDark, INumberProps } from '../../global';
+import './Slider.scss';
 
 export interface ISliderProps extends INumberProps {
-  multithumb: boolean
-  autorangeMinVal?: number // minimimum value that min can have when autoranging
-  autorangeMinSize?: number // minimum difference between min and max when autoranging
-  autorange?: number        // automatically adjust min/max to be +/- autorange/2 around the current value when the thumb is 15% from the min/max, or when the multithumbs are within 20% of the range and the range is bigger than autorange
-  endNumber?: number
-  setEndNumber?: (newVal: number) => void
-  setFinalNumber?: (newVal: number) => void
-  setFinalEndNumber?: (newVal: number) => void
-  decimals?: number; 
-  step?: number
-  minDiff?: number
+    multithumb: boolean;
+    autorangeMinVal?: number; // minimimum value that min can have when autoranging
+    autorangeMinSize?: number; // minimum difference between min and max when autoranging
+    autorange?: number; // automatically adjust min/max to be +/- autorange/2 around the current value when the thumb is 15% from the min/max, or when the multithumbs are within 20% of the range and the range is bigger than autorange
+    endNumber?: number;
+    setEndNumber?: (newVal: number) => void;
+    setFinalNumber?: (newVal: number) => void;
+    setFinalEndNumber?: (newVal: number) => void;
+    decimals?: number;
+    step?: number;
+    minDiff?: number;
 }
 
-let lastVal = 0;  // bcz: WHY do I have to do this??  the pointerdown event locks in the value of 'valLoc' when it's created so need some other way to get the current value to that old handler...
+let lastVal = 0; // bcz: WHY do I have to do this??  the pointerdown event locks in the value of 'valLoc' when it's created so need some other way to get the current value to that old handler...
 let lastEndVal = 0;
 
 export const Slider = (props: ISliderProps) => {
-  const [width, setWidth] = useState<number>(100);
-  const [valLoc, setNumberLoc] = useState<number>(props.number??(props.min + (props.max-props.min)/2));
-  const [endNumberLoc, setEndNumberLoc] = useState<number>(props.endNumber??(props.min + 2*(props.max-props.min)/3));
-  const [min, setMin] = useState<number>(props.min);
-  const [max, setMax] = useState<number>(props.max);
-  const { 
-    formLabel, 
-    formLabelPlacement, 
-    multithumb, 
-    autorange,
-    autorangeMinVal,
-    autorangeMinSize,
-    decimals,
-    step = 1, 
-    number = valLoc, 
-    endNumber = endNumberLoc, 
-    minDiff = (max-min)/20, 
-    size = Size.SMALL, 
-    height, 
-    unit, 
-    onPointerDown, 
-    setNumber, 
-    setEndNumber,
-    setFinalNumber, 
-    setFinalEndNumber,
-    color = Colors.MEDIUM_BLUE,
-    fillWidth
-  } = props
+    const [width, setWidth] = useState<number>(100);
+    const [valLoc, setNumberLoc] = useState<number>(props.number ?? props.min + (props.max - props.min) / 2);
+    const [endNumberLoc, setEndNumberLoc] = useState<number>(props.endNumber ?? props.min + (2 * (props.max - props.min)) / 3);
+    const [min, setMin] = useState<number>(props.min);
+    const [max, setMax] = useState<number>(props.max);
+    const {
+        formLabel,
+        formLabelPlacement,
+        multithumb,
+        autorange,
+        autorangeMinVal,
+        autorangeMinSize,
+        decimals,
+        step = 1,
+        number = valLoc,
+        endNumber = endNumberLoc,
+        minDiff = (max - min) / 20,
+        size = Size.SMALL,
+        height,
+        unit,
+        onPointerDown,
+        setNumber,
+        setEndNumber,
+        setFinalNumber,
+        setFinalEndNumber,
+        color = Colors.MEDIUM_BLUE,
+        fillWidth,
+    } = props;
 
-  const toDecimal = (num:number) => decimals !== undefined ? Math.round(num*Math.pow(10,decimals))/Math.pow(10,decimals): num;
+    const toDecimal = (num: number) => (decimals !== undefined ? Math.round(num * Math.pow(10, decimals)) / Math.pow(10, decimals) : num);
 
-  const getLeftPos = (locVal: number) => {
-    const dragger = getHeight(height,size)
-    return (((locVal-min)/ (max-min)) * (width-dragger))
-  }
+    const getLeftPos = (locVal: number) => {
+        const dragger = getHeight(+(height || 0), size);
+        return ((locVal - min) / (max - min)) * (width - dragger);
+    };
 
-  const getValueLabel = (locVal: number): JSX.Element => {
-    return (<div className="rs-label-container" 
-            style={{
-              left: `${getLeftPos(locVal)}px`,
-              background: color,
-              color: isDark(color) ? Colors.LIGHT_GRAY : Colors.DARK_GRAY,
-              fontSize: getFontSize(size),
-              height: getHeight(height, size),
-              width: getHeight(height, size),
-              top: 0
-            }}
-            >
-            <span className="rs-label">
-              {toDecimal(locVal)}
-            </span>
-          </div>)
-  }
-  const checkAutorange = () => {
-    if (autorange) {
-      const minval = multithumb ? Math.min(lastVal, lastEndVal) : lastVal;
-      const maxval = multithumb ? Math.max(lastVal, lastEndVal) : lastVal;
-      const autosize = Math.max(autorangeMinSize??0,(autorange ?? (maxval-minval)))/2;
-      if ((Math.abs((minval - min)/(max-min)) < .15) || (Math.abs((max - maxval)/(max-min)) < .15) ||
-          (multithumb && maxval - minval < (max-min)/5 && autosize < max-min)
-       ) {
-        const newminval = autorangeMinVal !== undefined && minval-autosize < autorangeMinVal? autorangeMinVal : minval-autosize;
-        setMin(newminval)
-        setMax(newminval !== minval ? Math.max(maxval + autosize, newminval +autosize): maxval+autosize )
-      }
-    }
-  }
+    const getValueLabel = (locVal: number): JSX.Element => {
+        return (
+            <div
+                className="rs-label-container"
+                style={{
+                    left: `${getLeftPos(locVal)}px`,
+                    background: color,
+                    color: isDark(color) ? Colors.LIGHT_GRAY : Colors.DARK_GRAY,
+                    fontSize: getFontSize(size),
+                    height: getHeight(+(height || 0), size),
+                    width: getHeight(+(height || 0), size),
+                    top: 0,
+                }}>
+                <span className="rs-label">{toDecimal(locVal)}</span>
+            </div>
+        );
+    };
+    const checkAutorange = () => {
+        if (autorange) {
+            const minval = multithumb ? Math.min(lastVal, lastEndVal) : lastVal;
+            const maxval = multithumb ? Math.max(lastVal, lastEndVal) : lastVal;
+            const autosize = Math.max(autorangeMinSize ?? 0, autorange ?? maxval - minval) / 2;
+            if (Math.abs((minval - min) / (max - min)) < 0.15 || Math.abs((max - maxval) / (max - min)) < 0.15 || (multithumb && maxval - minval < (max - min) / 5 && autosize < max - min)) {
+                const newminval = autorangeMinVal !== undefined && minval - autosize < autorangeMinVal ? autorangeMinVal : minval - autosize;
+                setMin(newminval);
+                setMax(newminval !== minval ? Math.max(maxval + autosize, newminval + autosize) : maxval + autosize);
+            }
+        }
+    };
 
-  const valSlider = (which: string, val:number, onchange: (val:number) => void, setFinal: () => void) => {
-    const valPointerup = (e:PointerEvent) => {
-        document.removeEventListener('pointerup', valPointerup, true)
-        setFinal();
-        checkAutorange();
-    }
-    return (<div key={which} className={`range-slider ${size}`}>
-          {getValueLabel(val)}
-          <input
-            className={`rs-range ${size}`}
-            type="range"
-            color={color}
-            min={min}
-            max={max}
-            step={step}
-            value={val}
-            onPointerDown={e => document.addEventListener('pointerup', valPointerup, true)}
-            onChange={e => {
-              onchange(+e.target.value);
-              e.stopPropagation();
-            }}
-          />
-      </div>);
-  }
-  const onchange = (val:number) => {
-      if (autorangeMinVal && val < autorangeMinVal) val = autorangeMinVal;
-      setNumber?.(lastVal = Math.min(multithumb ? endNumber - (minDiff??0):Number.MAX_VALUE, val))
-      setNumberLoc(lastVal = Math.min(multithumb ? endNumber - (minDiff??0):Number.MAX_VALUE, val))
-  }
-  const onendchange = (val:number) => {
-    setEndNumber?.(lastEndVal = Math.max(number + (minDiff??0), val))
-    setEndNumberLoc(lastEndVal = Math.max(number + (minDiff??0), val))
-  }
-  const Slider:(JSX.Element|null)[] = [
-      !multithumb ? (null) : valSlider("end", endNumberLoc,onendchange, () => setFinalEndNumber?.(lastEndVal)),
-      valSlider("start", valLoc, onchange, () => setFinalNumber?.(lastVal))
-  ];
+    const valSlider = (which: string, val: number, onchange: (val: number) => void, setFinal: () => void) => {
+        const valPointerup = () => {
+            document.removeEventListener('pointerup', valPointerup, true);
+            setFinal();
+            checkAutorange();
+        };
+        return (
+            <div key={which} className={`range-slider ${size}`}>
+                {getValueLabel(val)}
+                <input
+                    className={`rs-range ${size}`}
+                    type="range"
+                    color={color}
+                    min={min}
+                    max={max}
+                    step={step}
+                    value={val}
+                    onPointerDown={() => document.addEventListener('pointerup', valPointerup, true)}
+                    onChange={e => {
+                        onchange(+e.target.value);
+                        e.stopPropagation();
+                    }}
+                />
+            </div>
+        );
+    };
+    const onchange = (val: number) => {
+        // eslint-disable-next-line no-param-reassign
+        if (autorangeMinVal && val < autorangeMinVal) val = autorangeMinVal;
+        setNumber?.((lastVal = Math.min(multithumb ? endNumber - (minDiff ?? 0) : Number.MAX_VALUE, val)));
+        setNumberLoc((lastVal = Math.min(multithumb ? endNumber - (minDiff ?? 0) : Number.MAX_VALUE, val)));
+    };
+    const onendchange = (val: number) => {
+        setEndNumber?.((lastEndVal = Math.max(number + (minDiff ?? 0), val)));
+        setEndNumberLoc((lastEndVal = Math.max(number + (minDiff ?? 0), val)));
+    };
+    const Slider: (JSX.Element | null)[] = [!multithumb ? null : valSlider('end', endNumberLoc, onendchange, () => setFinalEndNumber?.(lastEndVal)), valSlider('start', valLoc, onchange, () => setFinalNumber?.(lastVal))];
 
-  const slider: JSX.Element = (
-    <div className={`slider-wrapper`} 
-      onPointerEnter={e => {
-        lastVal = valLoc;
-        lastEndVal = endNumberLoc;
-      }}
-      style={{
-        padding: `5px 0px ${getHeight(height, size)}px 0px`,
-        width: fillWidth ? '100%' : 'fit-content'
-      }}>
-      <div className="slider-container" 
-            ref={r => {
-              r && new ResizeObserver(() => setWidth(+(r?.clientWidth??100))).observe(r);
-              setWidth(+(r?.clientWidth??100));
-            }} 
-            style={{height: getHeight(height, size)}}
-            onPointerDown={onPointerDown}
-      >
-          {Slider}
-          <div className="selected-range" style={{
-            height: getHeight(height, size) / 10,
-            background: multithumb ? Colors.LIGHT_GRAY : color
-
-          }}/>
-          <div className="range" style={{
-            height: getHeight(height, size) / 10,
-            width: getLeftPos(endNumber) - getLeftPos(number),
-            left: getLeftPos(number) + getHeight(height, size),
-            display: multithumb ? undefined: 'none',
-            background: color,
-          }}/>
-          <div className="box-minmax" style={{ fontSize: getFontSize(size), color }}>
-          <span>{toDecimal(min)}{unit}</span>
-          <span>{toDecimal(max)}{unit}</span>
+    const slider: JSX.Element = (
+        <div
+            className={`slider-wrapper`}
+            onPointerEnter={() => {
+                lastVal = valLoc;
+                lastEndVal = endNumberLoc;
+            }}
+            style={{
+                padding: `5px 0px ${getHeight(+(height || 0), size)}px 0px`,
+                width: fillWidth ? '100%' : 'fit-content',
+            }}>
+            <div
+                className="slider-container"
+                ref={r => {
+                    r && new ResizeObserver(() => setWidth(+(r?.clientWidth ?? 100))).observe(r);
+                    setWidth(+(r?.clientWidth ?? 100));
+                }}
+                style={{ height: getHeight(+(height || 0), size) }}
+                onPointerDown={onPointerDown}>
+                {Slider}
+                <div
+                    className="selected-range"
+                    style={{
+                        height: getHeight(+(height || 0), size) / 10,
+                        background: multithumb ? Colors.LIGHT_GRAY : color,
+                    }}
+                />
+                <div
+                    className="range"
+                    style={{
+                        height: getHeight(+(height || 0), size) / 10,
+                        width: getLeftPos(endNumber) - getLeftPos(number),
+                        left: getLeftPos(number) + getHeight(+(height || 0), size),
+                        display: multithumb ? undefined : 'none',
+                        background: color,
+                    }}
+                />
+                <div className="box-minmax" style={{ fontSize: getFontSize(size), color }}>
+                    <span>
+                        {toDecimal(min)}
+                        {unit}
+                    </span>
+                    <span>
+                        {toDecimal(max)}
+                        {unit}
+                    </span>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  )
-
-  return (
-    formLabel ? 
-    <div  className={`form-wrapper ${formLabelPlacement}`}>
-        <div className={'formLabel'} style={{fontSize: getFormLabelSize(size)}}>{formLabel}</div>
-        {slider}
-    </div>
-    :
-    slider
-)
-}
+    );
 
+    return formLabel ? (
+        <div className={`form-wrapper ${formLabelPlacement}`}>
+            <div className={'formLabel'} style={{ fontSize: getFormLabelSize(size) }}>
+                {formLabel}
+            </div>
+            {slider}
+        </div>
+    ) : (
+        slider
+    );
+};
diff --git a/packages/components/src/components/Template/Template.scss b/packages/components/src/components/Template/Template.scss
index c91147200..854abdca0 100644
--- a/packages/components/src/components/Template/Template.scss
+++ b/packages/components/src/components/Template/Template.scss
@@ -1,5 +1 @@
-@import '../../global/globalCssVariables.scss';
-
-.template-container {
-    
-}
\ No newline at end of file
+@use '../../global/globalCssVariables.scss' as global;
diff --git a/packages/components/src/components/Toggle/Toggle.scss b/packages/components/src/components/Toggle/Toggle.scss
index b2faa8d99..d65cb8e23 100644
--- a/packages/components/src/components/Toggle/Toggle.scss
+++ b/packages/components/src/components/Toggle/Toggle.scss
@@ -1,77 +1,77 @@
-@import '../../global/globalCssVariables.scss';
+@use '../../global/globalCssVariables.scss' as global;
 
 .toggle-label {
-  position: relative;
-  bottom: 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: $xsmall-fontSize;
+    position: relative;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: global.$xsmall-fontSize;
 }
 
 .toggle-container {
-  position: relative;
-  width: fit-content;
-  cursor: pointer;
-  overflow: hidden;
-  user-select: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-  font-family: $default-font;
-  font-size: $medium-fontSize;
-  border-radius: 100px;
-  white-space: nowrap;
-  transition: 0.4s ease;
-  border: solid 1px;
-  border-color: $medium-blue;
+    position: relative;
+    width: fit-content;
+    cursor: pointer;
+    overflow: hidden;
+    user-select: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    font-family: global.$default-font;
+    font-size: global.$medium-fontSize;
+    border-radius: 100px;
+    white-space: nowrap;
+    transition: 0.4s ease;
+    border: solid 1px;
+    border-color: global.$medium-blue;
 
-  &:hover {
-    .toggle-background {
-      filter: opacity(0.2);
+    &:hover {
+        .toggle-background {
+            filter: opacity(0.2);
+        }
     }
-  }
 
-  &.switch {
-    &:hover {
-      .toggle-background {
-        filter: opacity(0);
-      }
+    &.switch {
+        &:hover {
+            .toggle-background {
+                filter: opacity(0);
+            }
+        }
     }
-  }
 
-  .toggle-content {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    text-transform: uppercase;
-    font-family: Verdana, sans-serif;
-    font-weight: 500;
-    transition: 0.4s;
+    .toggle-content {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        text-transform: uppercase;
+        font-family: Verdana, sans-serif;
+        font-weight: 500;
+        transition: 0.4s;
 
-    .toggle-switch {
-      background: $medium-blue;
-      transition: 0.4s;
-      border-radius: 100px;
+        .toggle-switch {
+            background: global.$medium-blue;
+            transition: 0.4s;
+            border-radius: 100px;
+        }
     }
-  }
 
-  .toggle-background {
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    position: absolute;
-    background: $medium-blue;
-    transition: 0.4s ease;
-    filter: opacity(0);
+    .toggle-background {
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        position: absolute;
+        background: global.$medium-blue;
+        transition: 0.4s ease;
+        filter: opacity(0);
 
-    &.active {
-      filter: opacity(0.4) !important;
+        &.active {
+            filter: opacity(0.4) !important;
+        }
     }
-  }
 }
diff --git a/packages/components/src/global/globalCssVariables.scss b/packages/components/src/global/globalCssVariables.scss
index 1ac2ef45c..ebc44106d 100644
--- a/packages/components/src/global/globalCssVariables.scss
+++ b/packages/components/src/global/globalCssVariables.scss
@@ -75,8 +75,10 @@ $standard-border-radius: 5px;
 
 // shadow
 $standard-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
-$standard-button-shadow: rgb(0 0 0 / 20%) 0px 2px 4px -1px,
-  rgb(0 0 0 / 14%) 0px 4px 5px 0px, rgb(0 0 0 / 12%) 0px 1px 10px 0px;
+$standard-button-shadow:
+    rgb(0 0 0 / 20%) 0px 2px 4px -1px,
+    rgb(0 0 0 / 14%) 0px 4px 5px 0px,
+    rgb(0 0 0 / 12%) 0px 1px 10px 0px;
 
 $dashboardselector-height: 32px;
 $mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc
@@ -91,70 +93,68 @@ $LEFT_MENU_WIDTH: 60px;
 $TREE_BULLET_WIDTH: 20px;
 
 :export {
-  contextMenuZindex: $contextMenu-zindex;
-  SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH;
-  COLLECTION_BORDER_WIDTH: $COLLECTION_BORDER_WIDTH;
-  MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE;
-  MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT;
-  SEARCH_THUMBNAIL_SIZE: $search-thumnail-size;
-  ANTIMODEMENU_HEIGHT: $antimodemenu-height;
-  DASHBOARD_SELECTOR_HEIGHT: $dashboardselector-height;
-  DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM;
-  LEFT_MENU_WIDTH: $LEFT_MENU_WIDTH;
-  TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH;
+    contextMenuZindex: $contextMenu-zindex;
+    SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH;
+    COLLECTION_BORDER_WIDTH: $COLLECTION_BORDER_WIDTH;
+    MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE;
+    MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT;
+    SEARCH_THUMBNAIL_SIZE: $search-thumnail-size;
+    ANTIMODEMENU_HEIGHT: $antimodemenu-height;
+    DASHBOARD_SELECTOR_HEIGHT: $dashboardselector-height;
+    DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM;
+    LEFT_MENU_WIDTH: $LEFT_MENU_WIDTH;
+    TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH;
 }
 
 .form-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: 0px;
-  padding-bottom: 5px;
-
-
-  .formLabel {
     display: flex;
-    font-family: $default-font;
-    text-transform: uppercase;
-    opacity: 0.8;
-    min-width: 'fit-content'
-  }
-
-  &.left {
-    flex-direction: row;
-    align-items: center;
-    gap: 3px;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 0px;
+    padding-bottom: 5px;
 
     .formLabel {
-      text-align: left;
+        display: flex;
+        font-family: $default-font;
+        text-transform: uppercase;
+        opacity: 0.8;
+        min-width: 'fit-content';
     }
-  }
 
-  &.right {
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 3px;
+    &.left {
+        flex-direction: row;
+        align-items: center;
+        gap: 3px;
 
-    .formLabel {
-      text-align: right;
+        .formLabel {
+            text-align: left;
+        }
     }
-  }
 
-  &.top {
-    flex-direction: column;
-    gap: 1px;
-  }
+    &.right {
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 3px;
 
-  &.top-start {
-    flex-direction: column;
-    align-items: flex-start;
-  }
+        .formLabel {
+            text-align: right;
+        }
+    }
 
-  &.top-end {
-    flex-direction: column;
-    align-items: flex-end;
-  }
-}
+    &.top {
+        flex-direction: column;
+        gap: 1px;
+    }
 
+    &.top-start {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    &.top-end {
+        flex-direction: column;
+        align-items: flex-end;
+    }
+}
diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss
index 8679a0101..e7cbb4287 100644
--- a/src/client/util/CaptureManager.scss
+++ b/src/client/util/CaptureManager.scss
@@ -1,5 +1,3 @@
-@import '../views/global/globalCssVariables.module';
-
 .capture-interface {
     //background-color: whitesmoke !important;
     width: 450px;
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index d2d7cabd2..60acd5b21 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -445,7 +445,6 @@ pie title Minerals in my tap water
             { toolTip: "Tap or drag to create a view slide",      title: "View Slide", icon: "address-card",       dragFactory: doc.emptyViewSlide as Doc,   clickFactory: DocCast(doc.emptyViewSlide), openFactoryLocation: OpenWhere.overlay,funcs: { hidden: "IsNoviceMode()"}},
             { toolTip: "Tap or drag to create a data note",       title: "DataNote", icon: "window-maximize",      dragFactory: doc.emptyHeader as Doc,      clickFactory: DocCast(doc.emptyHeader),    openFactoryAsDelegate: true,           funcs: { hidden: "IsNoviceMode()"} },
             { toolTip: "Toggle a Calculator REPL",                title: "replviewer",  icon: "calculator",                                      clickFactory: '<ScriptingRepl />' as unknown as Doc, openFactoryLocation: OpenWhere.overlay}, // hack: clickFactory is not a Doc but will get interpreted as a custom UI by the openDoc() onClick script
-           // { toolTip: "Toggle an UndoStack",                     title: "undostacker", icon: "calculator",                                      clickFactory: "<UndoStack />" as any,        openFactoryLocation: OpenWhere.overlay},
           ].map(tuple => (
               { openFactoryLocation: OpenWhere.addRight, 
                 scripts: { onClick:     'openDoc(copyDragFactory(this.clickFactory,this.openFactoryAsDelegate), this.openFactoryLocation)', 
@@ -674,12 +673,13 @@ pie title Minerals in my tap water
                             CurrentUserUtils.createToolButton(opts), scripts, funcs);
         
         const btnDescs = [// setup reactions to change the highlights on the undo/redo buttons -- would be better to encode this in the undo/redo buttons, but the undo/redo stacks are not wired up that way yet
-            { scripts: { onClick: "undo()"}, opts: { title: "Undo",              icon: "undo-alt",               toolTip: "Undo ⌘Z" }},
-            { scripts: { onClick: "redo()"}, opts: { title: "Redo",              icon: "redo-alt",               toolTip: "Redo ⌘⇧Z" }},
-            { scripts: { },                  opts: { title: "undoStack",         layout: "<UndoStack>",          toolTip: "Undo/Redo Stack"}}, // note: layout fields are hacks -- they don't actually run through the JSX parser (yet)
-            { scripts: { },                  opts: { title: "linker",            layout: "<LinkingUI>",          toolTip: "link started"}},
-            { scripts: { },                  opts: { title: "currently playing", layout: "<CurrentlyPlayingUI>", toolTip: "currently playing media"}},
-            { scripts: { },                  opts: { title: "Branching",         layout: "<Branching>",          toolTip: "Branch, baby!"}}
+            { scripts: { onClick: "undo()"},  opts: { title: "Undo",              icon: "undo-alt",               toolTip: "Undo ⌘Z" }},
+            { scripts: { onClick: "redo()"},  opts: { title: "Redo",              icon: "redo-alt",               toolTip: "Redo ⌘⇧Z" }},
+            { scripts: { },                   opts: { title: "undoStack",         layout: "<UndoStack>",          toolTip: "Undo/Redo Stack"}}, // note: layout fields are hacks -- they don't actually run through the JSX parser (yet)
+            { scripts: { },                   opts: { title: "linker",            layout: "<LinkingUI>",          toolTip: "link started"}},
+            { scripts: { },                   opts: { title: "currently playing", layout: "<CurrentlyPlayingUI>", toolTip: "currently playing media"}},
+            { scripts: { onClick: "hideUI()"},opts: { title: "Toggle UI",         icon: "portrait",               toolTip: "Toggle visibility of UI buttons"}},
+            { scripts: { },                   opts: { title: "Branching",         layout: "<Branching>",          toolTip: "Branch, baby!"}}
         ];
         const btns = btnDescs.map(desc => dockBtn({_width: 30, _height: 30, defaultDoubleClick: 'ignore', undoIgnoreFields: new List<string>(['opacity']), _dragOnlyWithinContainer: true, ...desc.opts}, desc.scripts));
         const dockBtnsReqdOpts:DocumentOptions = {
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index dbfc48c63..f81f17589 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -1,5 +1,3 @@
-@import '../views/global/globalCssVariables.module';
-
 .settings-interface {
     //background-color: whitesmoke !important;
     width: 450px;
diff --git a/src/client/util/SnappingManager.ts b/src/client/util/SnappingManager.ts
index 9d8a41844..3bbc297b8 100644
--- a/src/client/util/SnappingManager.ts
+++ b/src/client/util/SnappingManager.ts
@@ -16,6 +16,7 @@ export class SnappingManager {
     @observable _shiftKey = false;
     @observable _ctrlKey = false;
     @observable _metaKey = false;
+    @observable _hideUI = false;
     @observable _showPresPaths = false;
     @observable _isLinkFollowing = false;
     @observable _isDragging: boolean = false;
@@ -53,6 +54,7 @@ export class SnappingManager {
     public static get ShiftKey()       { return this.Instance._shiftKey; } // prettier-ignore
     public static get CtrlKey()        { return this.Instance._ctrlKey; } // prettier-ignore
     public static get MetaKey()        { return this.Instance._metaKey; } // prettier-ignore
+    public static get HideUI()         { return this.Instance._hideUI; } // prettier-ignore
     public static get ShowPresPaths()  { return this.Instance._showPresPaths; } // prettier-ignore
     public static get IsLinkFollowing(){ return this.Instance._isLinkFollowing; } // prettier-ignore
     public static get IsDragging()     { return this.Instance._isDragging; } // prettier-ignore
@@ -73,6 +75,7 @@ export class SnappingManager {
     public static SetShiftKey       = (down: boolean) => runInAction(() => {this.Instance._shiftKey = down}); // prettier-ignore
     public static SetCtrlKey        = (down: boolean) => runInAction(() => {this.Instance._ctrlKey = down}); // prettier-ignore
     public static SetMetaKey        = (down: boolean) => runInAction(() => {this.Instance._metaKey = down}); // prettier-ignore
+    public static SetHideUI         = (vis: boolean) => runInAction(() => {this.Instance._hideUI = vis}); // prettier-ignore
     public static SetShowPresPaths  = (paths:boolean) => runInAction(() => {this.Instance._showPresPaths = paths}); // prettier-ignore
     public static SetIsLinkFollowing= (follow:boolean)=> runInAction(() => {this.Instance._isLinkFollowing = follow}); // prettier-ignore
     public static SetIsDragging     = (drag: boolean) => runInAction(() => {this.Instance._isDragging = drag}); // prettier-ignore
diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss
index fd343ac8e..806741c22 100644
--- a/src/client/util/reportManager/ReportManager.scss
+++ b/src/client/util/reportManager/ReportManager.scss
@@ -1,4 +1,4 @@
-@import '../../views/global/globalCssVariables.module';
+@use '../../views/global/globalCssVariables.module' as global;
 
 // header
 
@@ -97,7 +97,7 @@
     background: transparent;
 
     // &:hover {
-    //     // border-bottom-color: $text-gray;
+    //     // border-bottom-color: global.$text-gray;
     // }
     // &:focus {
     //     // border-bottom-color: #4476f7;
diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss
index 2ebf673fe..48fa86276 100644
--- a/src/client/views/AntimodeMenu.scss
+++ b/src/client/views/AntimodeMenu.scss
@@ -1,11 +1,11 @@
-@import './global/globalCssVariables.module';
+@use './global/globalCssVariables.module' as global;
 
 .antimodeMenu-cont {
     position: absolute;
     z-index: 10001;
-    height: $antimodemenu-height;
+    height: global.$antimodemenu-height;
     width: fit-content;
-    border-radius: $standard-border-radius;
+    border-radius: global.$standard-border-radius;
     overflow: hidden;
     // box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
     // border-radius: 0px 6px 6px 6px;
diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 88e147a03..d22c4d096 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -1,9 +1,9 @@
-@import 'global/globalCssVariables.module.scss';
+@use 'global/globalCssVariables.module.scss' as global;
 
 .contextMenu-cont {
     position: absolute;
     display: flex;
-    z-index: $contextMenu-zindex;
+    z-index: global.$contextMenu-zindex;
     box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%);
     flex-direction: column;
     background: whitesmoke;
@@ -109,7 +109,7 @@
 .contextMenu-item:hover {
     border-width: 0.11px;
     border-style: none;
-    border-color: $medium-gray; //  rgb(187, 186, 186);
+    border-color: global.$medium-gray; //  rgb(187, 186, 186);
     border-bottom-style: solid;
     border-top-style: solid;
 
@@ -139,7 +139,7 @@
     transition: all 0.1s;
     border-width: 0.11px;
     border-style: none;
-    border-color: $medium-gray; //  rgb(187, 186, 186);
+    border-color: global.$medium-gray; //  rgb(187, 186, 186);
     // padding: 10px 0px 10px 0px;
     white-space: nowrap;
     font-size: 13px;
@@ -184,7 +184,7 @@
     .top-bar {
         height: 20px;
         width: 100%;
-        display: flex; 
+        display: flex;
 
         .close-menu {
             margin-top: 0;
@@ -200,7 +200,7 @@
         }
     }
 
-    .bottom-box{
+    .bottom-box {
         display: flex;
         flex-direction: row;
         justify-content: center;
@@ -209,11 +209,11 @@
         height: 100%;
         width: 100%;
 
-        .width-selector{
+        .width-selector {
             width: 100px;
         }
 
-        .max-min-selector{
+        .max-min-selector {
             height: 15px;
             width: 30px;
         }
diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss
index 25feca7bf..daa711bc4 100644
--- a/src/client/views/DashboardView.scss
+++ b/src/client/views/DashboardView.scss
@@ -1,4 +1,4 @@
-@import './global/globalCssVariables.module';
+@use './global/globalCssVariables.module' as global;
 
 $dashboard-left-menu-width: 250px;
 $dashboard-view-padding: 20px;
@@ -61,9 +61,9 @@ $dashboard-container-width: 250px;
     font-size: 120px;
     font-weight: 100;
     text-align: center;
-    border: solid 2px $light-gray;
+    border: solid 2px global.$light-gray;
     cursor: pointer;
-    color: $light-gray;
+    color: global.$light-gray;
     display: flex;
     display: flex;
     justify-content: center;
@@ -71,8 +71,8 @@ $dashboard-container-width: 250px;
     position: relative;
 
     &:hover {
-        color: $light-blue;
-        border: solid 2px $light-blue;
+        color: global.$light-blue;
+        border: solid 2px global.$light-blue;
     }
 
     .background {
@@ -91,14 +91,14 @@ $dashboard-container-width: 250px;
     cursor: pointer;
     width: $dashboard-container-width;
     height: $dashboard-container-height;
-    outline: solid 2px $light-gray;
+    outline: solid 2px global.$light-gray;
     outline-offset: -2px;
     display: flex;
     flex-direction: column;
     overflow: hidden;
 
     &:hover {
-        outline: solid 2px $light-blue;
+        outline: solid 2px global.$light-blue;
     }
 
     .title {
@@ -144,7 +144,7 @@ $dashboard-container-width: 250px;
 }
 
 .new-dashboard {
-    color: $dark-gray;
+    color: global.$dark-gray;
     padding: 10px;
     display: flex;
     width: 100%;
diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss
index ede277aae..f19fecfa6 100644
--- a/src/client/views/DocumentButtonBar.scss
+++ b/src/client/views/DocumentButtonBar.scss
@@ -1,4 +1,4 @@
-@import 'global/globalCssVariables.module';
+@use 'global/globalCssVariables.module' as global;
 
 $linkGap: 3px;
 
@@ -7,13 +7,13 @@ $linkGap: 3px;
 }
 
 .documentButtonBar-linkButton-empty:hover {
-    background: $medium-gray;
+    background: global.$medium-gray;
     transform: scale(1.05);
     cursor: pointer;
 }
 
 .documentButtonBar-linkButton-nonempty:hover {
-    background: $medium-gray;
+    background: global.$medium-gray;
     transform: scale(1.05);
     cursor: pointer;
 }
@@ -32,7 +32,6 @@ $linkGap: 3px;
 
     .tags {
         width: 40px;
-
     }
 }
 .documentButtonBar-followTypes {
@@ -92,8 +91,8 @@ $linkGap: 3px;
     border-radius: 50%;
     opacity: 0.9;
     pointer-events: auto;
-    background-color: $dark-gray;
-    color: $white;
+    background-color: global.$dark-gray;
+    color: global.$white;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 75%;
@@ -104,7 +103,7 @@ $linkGap: 3px;
     align-items: center;
 
     &:hover {
-        background: $medium-gray;
+        background: global.$medium-gray;
         transform: scale(1.05);
         cursor: pointer;
     }
@@ -132,12 +131,12 @@ $linkGap: 3px;
     text-align: center;
     border-radius: 50%;
     pointer-events: auto;
-    background-color: $dark-gray;
+    background-color: global.$dark-gray;
     border: none;
     transition: 0.2s ease all;
 
     &:hover {
-        background-color: $medium-gray;
+        background-color: global.$medium-gray;
     }
 }
 
@@ -148,7 +147,7 @@ $linkGap: 3px;
     text-align: center;
     border-radius: 50%;
     pointer-events: auto;
-    background-color: $dark-gray;
+    background-color: global.$dark-gray;
     border: none;
     transition: 0.2s ease all;
     display: flex;
@@ -157,8 +156,8 @@ $linkGap: 3px;
     align-items: center;
 
     &:hover {
-        background-color: $black;
-        
+        background-color: global.$black;
+
         .documentButtonBar-pinTypes {
             display: flex;
         }
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 346df10d5..a5afb1305 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,4 +1,4 @@
-@import 'global/globalCssVariables.module';
+@use 'global/globalCssVariables.module' as global;
 
 $linkGap: 3px;
 $headerHeight: 20px;
@@ -195,14 +195,14 @@ $resizeHandler: 8px;
             .documentDecorations-titleSpan {
                 width: 100%;
                 border-radius: 8px;
-                background: $light-gray;
+                background: global.$contextMenu-zindex;
                 display: inline-block;
                 cursor: move;
             }
         }
 
         .documentDecorations-titleBackground {
-            background: $light-gray;
+            background: global.$light-gray;
             border-radius: 8px;
             width: 100%;
             height: 100%;
@@ -314,7 +314,7 @@ $resizeHandler: 8px;
     .documentDecorations-bottomResizer,
     .documentDecorations-rightResizer {
         pointer-events: auto;
-        background: $medium-gray-dim;
+        background: global.$medium-gray-dim;
         //opacity: 0.2;
         &:hover {
             opacity: 1;
@@ -344,7 +344,7 @@ $resizeHandler: 8px;
         border-radius: 100%;
         left: 7px;
         top: 7px;
-        background: $medium-gray;
+        background: global.$medium-gray;
         height: 10;
         width: 10;
         opacity: 0.5;
@@ -378,7 +378,7 @@ $resizeHandler: 8px;
         transform: translate(0px, -25%);
         padding-bottom: 100%;
         border-radius: 100%;
-        border: solid $medium-gray 10px;
+        border: solid global.$medium-gray 10px;
     }
 
     .documentDecorations-topLeftResizer,
@@ -497,13 +497,13 @@ $resizeHandler: 8px;
 }
 
 .linkButton-empty:hover {
-    background: $medium-gray;
+    background: global.$medium-gray;
     transform: scale(1.05);
     cursor: pointer;
 }
 
 .linkButton-nonempty:hover {
-    background: $medium-gray;
+    background: global.$medium-gray;
     transform: scale(1.05);
     cursor: pointer;
 }
@@ -520,7 +520,7 @@ $resizeHandler: 8px;
     align-items: center;
     gap: 5px;
     //top: 4px;
-    background: $light-gray;
+    background: global.$light-gray;
     opacity: 0.2;
     pointer-events: all;
     transition: opacity 1s;
@@ -542,8 +542,8 @@ $resizeHandler: 8px;
     text-align: center;
     border-radius: 50%;
     pointer-events: auto;
-    color: $dark-gray;
-    border: $dark-gray 1px solid;
+    color: global.$dark-gray;
+    border: global.$dark-gray 1px solid;
 }
 
 .linkButton-linker:hover {
@@ -558,8 +558,8 @@ $resizeHandler: 8px;
     border-radius: 50%;
     opacity: 0.9;
     pointer-events: auto;
-    background-color: $dark-gray;
-    color: $white;
+    background-color: global.$dark-gray;
+    color: global.$white;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 75%;
@@ -570,7 +570,7 @@ $resizeHandler: 8px;
     align-items: center;
 
     &:hover {
-        background: $medium-gray;
+        background: global.$medium-gray;
         transform: scale(1.05);
         cursor: pointer;
     }
@@ -600,13 +600,13 @@ $resizeHandler: 8px;
     border-radius: 50%;
     opacity: 0.9;
     font-size: 14;
-    background-color: $dark-gray;
-    color: $white;
+    background-color: global.$dark-gray;
+    color: global.$white;
     text-align: center;
     cursor: pointer;
 
     &:hover {
-        background: $medium-gray;
+        background: global.$medium-gray;
         transform: scale(1.05);
     }
 }
@@ -616,9 +616,9 @@ $resizeHandler: 8px;
     top: 25px;
     left: 0px;
     width: max-content;
-    font-family: $sans-serif;
+    font-family: global.$sans-serif;
     font-size: 12px;
-    background-color: $light-gray;
+    background-color: global.$light-gray;
     padding: 2px 12px;
     list-style: none;
 
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index e3df01bbb..0d3feb073 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -18,7 +18,7 @@ import { GestureOverlay } from './GestureOverlay';
 import './LightboxView.scss';
 import { ObservableReactComponent } from './ObservableReactComponent';
 import { OverlayView } from './OverlayView';
-import { DefaultStyleProvider, returnEmptyDocViewList, wavyBorderPath } from './StyleProvider';
+import { DefaultStyleProvider, returnEmptyDocViewList /* wavyBorderPath */ } from './StyleProvider';
 import { DocumentView } from './nodes/DocumentView';
 import { OpenWhere, OpenWhereMod } from './nodes/OpenWhere';
 import { StickerPalette } from './smartdraw/StickerPalette';
@@ -283,7 +283,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
                         top: this.topBorder,
                         width: this.lightboxWidth(),
                         height: this.lightboxHeight(),
-                        clipPath: `path('${Doc.UserDoc().renderStyle === 'comic' ? wavyBorderPath(this.lightboxWidth(), this.lightboxHeight()) : undefined}')`,
+                        // clipPath: `path('${Doc.UserDoc().renderStyle === 'comic' ? wavyBorderPath(this.lightboxWidth(), this.lightboxHeight()) : undefined}')`,
                         background: SnappingManager.userBackgroundColor,
                     }}>
                     <GestureOverlay isActive>
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 02916e48e..bea1de435 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -1,5 +1,5 @@
-@import 'global/globalCssVariables.module';
-@import 'nodeModuleOverrides';
+@use 'global/globalCssVariables.module' as global;
+//  bcz: fix @import 'nodeModuleOverrides';
 
 :root {
     --flyoutHandleWidth: 28px;
@@ -10,8 +10,8 @@ body {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    font-family: $sans-serif;
-    font-size: $body-text;
+    font-family: global.$sans-serif;
+    font-size: global.$body-text;
     margin: 0;
     position: absolute;
     top: 0;
@@ -54,7 +54,7 @@ button {
     background: black;
     outline: none;
     border: 0px;
-    color: $white;
+    color: global.$white;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 75%;
@@ -63,7 +63,7 @@ button {
 }
 
 button:hover {
-    background: $medium-gray;
+    background: global.$medium-gray;
     transform: scale(1.05);
     cursor: pointer;
 }
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index dda543470..3c1da88cc 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -87,10 +87,9 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' };
     await CurrentUserUtils.loadUserDocument(info);
     setTimeout(() => {
         // prevent zooming browser
-        document.getElementById('root')!.addEventListener('wheel', event => event.ctrlKey && event.preventDefault(), true);
+        document.getElementById('root')!.addEventListener('wheel', event => event.ctrlKey && event.preventDefault(), { capture: true, passive: true });
         const startload = (document as unknown as { startLoad: number }).startLoad; // see index.html in deploy/
         const loading = Date.now() - (startload ? Number(startload) : Date.now() - 3000);
-        console.log('Loading Time = ' + loading);
         const d = new Date();
         d.setTime(d.getTime() + 100 * 24 * 60 * 60 * 1000);
         const expires = 'expires=' + d.toUTCString();
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index e204759ab..2170e0c34 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -1,5 +1,5 @@
-@import 'global/globalCssVariables.module.scss';
-@import 'nodeModuleOverrides';
+@use 'global/globalCssVariables.module.scss' as global;
+//  bcz: fix @import 'nodeModuleOverrides';
 html {
     overscroll-behavior-x: none;
 }
@@ -68,10 +68,10 @@ body {
 }
 
 .mainView-container {
-    color: $dark-gray;
+    color: global.$dark-gray;
 
     .lm_goldenlayout {
-        background: $medium-gray;
+        background: global.$medium-gray;
     }
 }
 
@@ -93,7 +93,7 @@ body {
 .mainView-propertiesDragger-minified,
 .mainView-propertiesDragger {
     //background-color: rgb(140, 139, 139);
-    background-color: $light-gray;
+    background-color: global.$light-gray;
     height: 55px;
     width: 17px;
     position: absolute;
@@ -133,10 +133,10 @@ body {
         flex-direction: column;
         position: relative;
         height: 100%;
-        background: $medium-gray;
+        background: global.$medium-gray;
 
         .documentView-node-topmost {
-            background: $light-gray;
+            background: global.$light-gray;
         }
     }
 
@@ -153,12 +153,12 @@ body {
 }
 
 .mainView-libraryHandle {
-    background-color: $light-gray;
+    background-color: global.$light-gray;
 }
 
 .mainView-leftMenuPanel {
     min-width: var(--menuPanelWidth);
-    border-right: $standard-border;
+    border-right: global.$standard-border;
 
     .collectionStackingView {
         scrollbar-width: none;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 195b1c572..8b0354471 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -99,7 +99,7 @@ export class MainView extends ObservableReactComponent<object> {
     @observable private _sidebarContent: Doc = Doc.MyLeftSidebarPanel;
     @observable private _leftMenuFlyoutWidth: number = 0;
     @computed get _hideUI() {
-        return this.mainDoc && this.mainDoc._type_collection !== CollectionViewType.Docking;
+        return SnappingManager.HideUI || (this.mainDoc && this.mainDoc._type_collection !== CollectionViewType.Docking);
     }
 
     @computed private get dashboardTabHeight() {
@@ -712,7 +712,7 @@ export class MainView extends ObservableReactComponent<object> {
                     childFiltersByRanges={returnEmptyFilter}
                     searchFilterDocs={returnEmptyDoclist}
                     suppressSetHeight
-                    renderDepth={this._hideUI ? 0 : -1}
+                    renderDepth={-1}
                 />
             </>
         );
@@ -1168,6 +1168,10 @@ ScriptingGlobals.add(function selectMainMenu(doc: Doc) {
     MainView.Instance.selectMenu(doc);
 });
 // eslint-disable-next-line prefer-arrow-callback
+ScriptingGlobals.add(function hideUI() {
+    SnappingManager.SetHideUI(!SnappingManager.HideUI);
+});
+// eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function createNewPresentation() {
     return MainView.Instance.createNewPresentation();
 }, 'creates a new presentation when called');
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index b8c73b6d3..6c2cda346 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -1,4 +1,4 @@
-@import 'global/globalCssVariables.module.scss';
+@use 'global/globalCssVariables.module.scss' as global;
 
 $linkGap: 3px;
 
@@ -7,13 +7,13 @@ $linkGap: 3px;
 }
 
 .propertiesButtons-linkButton-empty:hover {
-    background: $medium-gray;
+    background: global.$medium-gray;
     transform: scale(1.05);
     cursor: pointer;
 }
 
 .propertiesButtons-linkButton-nonempty:hover {
-    background: $medium-gray;
+    background: global.$medium-gray;
     transform: scale(1.05);
     cursor: pointer;
 }
@@ -46,19 +46,19 @@ $linkGap: 3px;
     // margin-left: 4px;
 
     &:hover {
-        background: $medium-gray;
+        background: global.$medium-gray;
         transform: scale(1.05);
         cursor: pointer;
     }
 }
 .propertiesButtons-linkButton-empty.toggle-on {
-    background-color: $medium-blue;
-    color: $white;
+    background-color: global.$medium-blue;
+    color: global.$white;
     width: 100%;
 }
 .propertiesButtons-linkButton-empty.toggle-hover {
-    background-color: $light-blue;
-    color: $black;
+    background-color: global.$light-blue;
+    color: global.$black;
     width: 100%;
 }
 .propertiesButtons-linkButton-empty.toggle-off {
@@ -88,7 +88,7 @@ $linkGap: 3px;
     cursor: pointer;
     text-align: center;
     margin-top: 5px;
-    border: 0.5px solid $medium-gray;
+    border: 0.5px solid global.$medium-gray;
     background-color: rgb(230, 230, 230);
     border-radius: 5px;
     padding: 4px;
@@ -111,7 +111,7 @@ $linkGap: 3px;
 
     .list-item {
         cursor: pointer;
-        color: $black;
+        color: global.$black;
         width: 100%;
         height: 25px;
         font-weight: 400;
diff --git a/src/client/views/PropertiesSection.scss b/src/client/views/PropertiesSection.scss
index d32da1bf1..f7138dd50 100644
--- a/src/client/views/PropertiesSection.scss
+++ b/src/client/views/PropertiesSection.scss
@@ -1,5 +1,3 @@
-@import './global/globalCssVariables.module.scss';
-
 .propertiesView-section {
     .propertiesView-content {
         padding: 10px;
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 7866e67e7..280de4893 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -1,4 +1,4 @@
-@import './global/globalCssVariables.module.scss';
+@use './global/globalCssVariables.module.scss' as global;
 
 .propertiesView-presentationTrails-title {
     display: flex;
@@ -28,7 +28,7 @@
     font-family: 'Roboto';
     font-size: 12px;
     cursor: auto;
-    border-left: $standard-border;
+    border-left: global.$standard-border;
 
     .slider-text {
         font-size: 8px;
@@ -567,7 +567,7 @@
     height: fit-content;
 
     &:hover {
-        border: 0.75px solid $medium-blue;
+        border: 0.75px solid global.$medium-blue;
     }
 }
 
diff --git a/src/client/views/TemplateMenu.scss b/src/client/views/TemplateMenu.scss
index 36a9ce6d0..8879fc20d 100644
--- a/src/client/views/TemplateMenu.scss
+++ b/src/client/views/TemplateMenu.scss
@@ -1,4 +1,4 @@
-@import 'global/globalCssVariables.module.scss';
+@use 'global/globalCssVariables.module.scss' as global;
 .templating-menu {
     position: absolute;
     pointer-events: auto;
@@ -24,15 +24,15 @@
     cursor: pointer;
 
     &:hover {
-        background: $medium-gray;
+        background: global.$medium-gray;
         transform: scale(1.05);
     }
 }
 
 .template-list {
-    font-family: $sans-serif;
+    font-family: global.$sans-serif;
     font-size: 12px;
-    background-color: $light-gray;
+    background-color: global.$light-gray;
     padding: 2px 12px;
     list-style: none;
     position: relative;
diff --git a/src/client/views/animationtimeline/Region.scss b/src/client/views/animationtimeline/Region.scss
index b390ae34e..df82febea 100644
--- a/src/client/views/animationtimeline/Region.scss
+++ b/src/client/views/animationtimeline/Region.scss
@@ -1,4 +1,4 @@
-@import './../global/globalCssVariables.module.scss';
+@use './../global/globalCssVariables.module.scss' as global;
 
 $timelineColor: #9acedf;
 $timelineDark: #77a1aa;
@@ -14,11 +14,11 @@ $timelineDark: #77a1aa;
         height: 200px;
         top: 50%;
         position: relative;
-        background-color: $white;
+        background-color: global.$white;
 
         .menutable {
             tr:nth-child(odd) {
-                background-color: $light-gray;
+                background-color: global.$light-gray;
             }
         }
     }
@@ -70,7 +70,7 @@ $timelineDark: #77a1aa;
         height: 100%;
         position: absolute;
         pointer-events: none;
-        background: linear-gradient(to left, $timelineColor 10%, $white);
+        background: linear-gradient(to left, $timelineColor 10%, global.$white);
     }
 
     .fadeRight {
@@ -78,7 +78,7 @@ $timelineDark: #77a1aa;
         height: 100%;
         position: absolute;
         pointer-events: none;
-        background: linear-gradient(to right, $timelineColor 10%, $white);
+        background: linear-gradient(to right, $timelineColor 10%, global.$white);
     }
 
     .divider {
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 35ba0fa7f..e1d3b190c 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -1,4 +1,4 @@
-@import './../global/globalCssVariables.module.scss';
+@use './../global/globalCssVariables.module.scss' as global;
 
 $timelineColor: #9acedf;
 $timelineDark: #77a1aa;
@@ -159,7 +159,7 @@ $timelineDark: #77a1aa;
     width: 100%;
     height: 300px;
     position: absolute;
-    background-color: $light-gray;
+    background-color: global.$light-gray;
     border-bottom: 2px solid $timelineDark;
     transition: transform 500ms ease;
 
@@ -247,7 +247,7 @@ $timelineDark: #77a1aa;
             top: 0px;
             width: 100px;
             height: 30%;
-            border: 1px solid $dark-gray;
+            border: 1px solid global.$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 de2042f17..5398a4a97 100644
--- a/src/client/views/animationtimeline/TimelineMenu.scss
+++ b/src/client/views/animationtimeline/TimelineMenu.scss
@@ -1,9 +1,9 @@
-@import './../global/globalCssVariables.module.scss';
+@use './../global/globalCssVariables.module.scss' as global;
 
 .timeline-menu-container {
     position: absolute;
     display: flex;
-    box-shadow: $medium-gray 0.2vw 0.2vw 0.4vw;
+    box-shadow: global.$medium-gray 0.2vw 0.2vw 0.4vw;
     flex-direction: column;
     background: whitesmoke;
     z-index: 10000;
@@ -14,7 +14,7 @@
     border: solid #bbbbbbbb 1px;
 
     .timeline-menu-input {
-        font: $sans-serif;
+        font: global.$sans-serif;
         font-size: 13px;
         width: 100%;
         text-transform: uppercase;
@@ -33,11 +33,11 @@
         border-top-left-radius: 15px;
         border-top-right-radius: 15px;
         text-transform: uppercase;
-        background: $dark-gray;
+        background: global.$dark-gray;
         letter-spacing: 2px;
 
         .timeline-menu-header-desc {
-            font: $sans-serif;
+            font: global.$sans-serif;
             font-size: 13px;
             text-align: center;
             color: whitesmoke;
@@ -72,15 +72,15 @@
     .timeline-menu-item:hover {
         border-width: 0.11px;
         border-style: none;
-        border-color: $medium-gray;
+        border-color: global.$medium-gray;
         border-bottom-style: solid;
         border-top-style: solid;
-        background: $medium-blue;
+        background: global.$medium-blue;
     }
 
     .timeline-menu-desc {
         padding-left: 10px;
-        font: $sans-serif;
+        font: global.$sans-serif;
         font-size: 13px;
     }
 }
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index 2878232e6..8336f2b2f 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -1,4 +1,4 @@
-@import './../global/globalCssVariables.module.scss';
+@use './../global/globalCssVariables.module.scss' as global;
 
 $timelineColor: #9acedf;
 $timelineDark: #77a1aa;
diff --git a/src/client/views/animationtimeline/Track.scss b/src/client/views/animationtimeline/Track.scss
index f56b2fe5f..7f5e8b8f3 100644
--- a/src/client/views/animationtimeline/Track.scss
+++ b/src/client/views/animationtimeline/Track.scss
@@ -1,12 +1,12 @@
-@import './../global/globalCssVariables.module.scss';
+@use './../global/globalCssVariables.module.scss' as global;
 
 .track-container {
     .track {
         .inner {
             top: 0px;
             width: calc(100%);
-            background-color: $white;
-            border: 1px solid $dark-gray;
+            background-color: global.$white;
+            border: 1px solid global.$dark-gray;
             position: relative;
             z-index: 100;
         }
diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss
index 79c53db08..06dd4627f 100644
--- a/src/client/views/collections/CollectionCardDeckView.scss
+++ b/src/client/views/collections/CollectionCardDeckView.scss
@@ -1,5 +1,3 @@
-@import '../global/globalCssVariables.module.scss';
-
 .collectionCardView-outer {
     height: 100%;
     width: 100%;
diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss
index 42e112906..13e6b54c2 100644
--- a/src/client/views/collections/CollectionCarousel3DView.scss
+++ b/src/client/views/collections/CollectionCarousel3DView.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 .collectionCarousel3DView-outer {
     height: 100%;
     position: relative;
@@ -10,8 +10,8 @@
 .carousel-wrapper {
     display: flex;
     position: absolute;
-    top: $CAROUSEL3D_TOP * 1%;
-    height: ($CAROUSEL3D_SIDE_SCALE * 100) * 1%;
+    top: global.$CAROUSEL3D_TOP * 1%;
+    height: (global.$CAROUSEL3D_SIDE_SCALE * 100) * 1%;
     align-items: center;
     transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 
@@ -24,7 +24,7 @@
         pointer-events: none;
         opacity: 0.5;
         z-index: 1;
-        transform: scale($CAROUSEL3D_SIDE_SCALE);
+        transform: scale(global.$CAROUSEL3D_SIDE_SCALE);
         user-select: none;
     }
 
@@ -32,7 +32,7 @@
         pointer-events: unset;
         opacity: 1;
         z-index: 2;
-        transform: scale($CAROUSEL3D_CENTER_SCALE);
+        transform: scale(global.$CAROUSEL3D_CENTER_SCALE);
     }
 }
 
@@ -80,7 +80,7 @@
 .carousel3DView-back {
     top: 0;
     background: transparent;
-    width: calc((1 - #{$CAROUSEL3D_CENTER_SCALE} * 0.33) / 2 * 100%);
+    width: calc((1 - #{global.$CAROUSEL3D_CENTER_SCALE} * 0.33) / 2 * 100%);
     height: 100%;
 }
 
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index a747ef45f..7c19d39da 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .lm_root {
     position: relative;
@@ -285,7 +285,7 @@
     background: transparent;
     border: solid 0px transparent;
     cursor: grab;
-    color: $black;
+    color: global.$black;
 }
 .collectiondockingview-container .lm_splitter {
     opacity: 0.2;
@@ -378,7 +378,7 @@ ul.lm_tabs::before {
     z-index: 1;
     text-align: center;
     font-size: 18;
-    color: $dark-gray;
+    color: global.$dark-gray;
 
     img {
         position: relative;
@@ -491,7 +491,7 @@ ul.lm_tabs::before {
     }
 
     .lm_content {
-        background: $white;
+        background: global.$white;
     }
 
     .lm_controls {
@@ -557,7 +557,7 @@ ul.lm_tabs::before {
     }
 
     .flexlayout__splitter {
-        background-color: $dark-gray;
+        background-color: global.$dark-gray;
     }
 
     .flexlayout__splitter:hover {
@@ -626,7 +626,7 @@ ul.lm_tabs::before {
         position: absolute;
         box-sizing: border-box;
         background-color: #222;
-        color: $dark-gray;
+        color: global.$dark-gray;
     }
 
     .flexlayout__tab_button {
@@ -709,7 +709,7 @@ ul.lm_tabs::before {
     }
 
     .flexlayout__tab_header_outer {
-        background-color: $dark-gray;
+        background-color: global.$dark-gray;
         position: absolute;
         left: 0;
         right: 0;
@@ -769,28 +769,28 @@ ul.lm_tabs::before {
     }
 
     .flexlayout__border_top {
-        background-color: $dark-gray;
+        background-color: global.$dark-gray;
         border-bottom: 1px solid #ddd;
         box-sizing: border-box;
         overflow: hidden;
     }
 
     .flexlayout__border_bottom {
-        background-color: $dark-gray;
+        background-color: global.$dark-gray;
         border-top: 1px solid #333;
         box-sizing: border-box;
         overflow: hidden;
     }
 
     .flexlayout__border_left {
-        background-color: $dark-gray;
+        background-color: global.$dark-gray;
         border-right: 1px solid #333;
         box-sizing: border-box;
         overflow: hidden;
     }
 
     .flexlayout__border_right {
-        background-color: $dark-gray;
+        background-color: global.$dark-gray;
         border-left: 1px solid #333;
         box-sizing: border-box;
         overflow: hidden;
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index 45d9394ed..11fce720c 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -1,13 +1,13 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .collectionMenu-container {
     display: flex;
     position: relative;
     align-content: center;
     justify-content: space-between;
-    background-color: $dark-gray;
+    background-color: global.$dark-gray;
     height: 40px;
-    border-bottom: $standard-border;
+    border-bottom: global.$standard-border;
     padding: 0 10px;
     align-items: center;
     overflow-x: auto;
diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss
index 95fda7b0a..0d24a56b5 100644
--- a/src/client/views/collections/CollectionNoteTakingView.scss
+++ b/src/client/views/collections/CollectionNoteTakingView.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .collectionNoteTakingView-DocumentButtons {
     opacity: 0;
@@ -58,7 +58,7 @@
 .documentButtonMenu {
     position: relative;
     height: fit-content;
-    border-bottom: $standard-border;
+    border-bottom: global.$standard-border;
     display: flex;
     justify-content: center;
     flex-direction: column;
@@ -70,11 +70,11 @@
         width: 90%;
         margin: 5px;
         font-size: 11px;
-        background-color: $light-blue;
-        color: $medium-blue;
+        background-color: global.$light-blue;
+        color: global.$medium-blue;
         padding: 10px;
         border-radius: 10px;
-        border: solid 2px $medium-blue;
+        border: solid 2px global.$medium-blue;
     }
 }
 
@@ -146,9 +146,9 @@
         padding: 10px;
         height: 2vw;
         width: 100%;
-        font-family: $sans-serif;
-        background: $dark-gray;
-        color: $white;
+        font-family: global.$sans-serif;
+        background: global.$dark-gray;
+        color: global.$white;
     }
 
     .collectionNoteTakingView-columnDragger {
@@ -206,7 +206,7 @@
         margin-left: 2px;
         margin-right: 2px;
         margin-top: 2px;
-        background: $medium-gray;
+        background: global.$medium-gray;
         height: 5px;
 
         &.active {
@@ -258,7 +258,7 @@
         text-align: center;
         margin: auto;
         margin-bottom: 10px;
-        background: $medium-gray;
+        background: global.$medium-gray;
         // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong
 
         .editableView-input:hover,
@@ -279,7 +279,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            color: $dark-gray;
+            color: global.$dark-gray;
 
             .editableView-container-editing-oneLine,
             .editableView-container-editing {
diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index 0ced3f9e3..d05c0ffde 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .collectionStackedTimeline-timelineContainer {
     height: 100%;
@@ -6,7 +6,7 @@
     overflow-x: auto;
     overflow-y: hidden;
     border: none;
-    background-color: $white;
+    background-color: global.$white;
     border-width: 0 2px 0 2px;
 
     &:hover {
@@ -28,7 +28,7 @@
 
 .collectionStackedTimeline {
     position: absolute;
-    background: $off-white;
+    background: global.$off-white;
     z-index: 1000;
     height: 100%;
     overflow: hidden;
@@ -36,7 +36,7 @@
     .collectionStackedTimeline-trim-shade {
         position: absolute;
         height: 100%;
-        background-color: $dark-gray;
+        background-color: global.$dark-gray;
         opacity: 0.3;
         top: 0;
     }
@@ -45,7 +45,7 @@
         height: 100%;
         position: absolute;
         box-sizing: border-box;
-        border: 2px solid $medium-blue;
+        border: 2px solid global.$medium-blue;
         display: flex;
         justify-content: space-between;
         max-width: 100%;
@@ -53,7 +53,7 @@
         left: 0;
 
         .collectionStackedTimeline-trim-handle {
-            background-color: $medium-blue;
+            background-color: global.$medium-blue;
             height: 100%;
             width: 5px;
             cursor: ew-resize;
@@ -65,12 +65,12 @@
         width: 10px;
         top: 2.5%;
         height: 95%;
-        background: $light-blue;
+        background: global.$light-blue;
         border-radius: 3px;
         opacity: 0.3;
         z-index: 500;
         border-style: solid;
-        border-color: $medium-blue;
+        border-color: global.$medium-blue;
         border-width: 1px;
     }
 
@@ -84,12 +84,12 @@
     }
 
     .collectionStackedTimeline-current {
-        background-color: $pink;
+        background-color: global.$pink;
     }
 
     .collectionStackedTimeline-hover {
         display: none;
-        background-color: $medium-blue;
+        background-color: global.$medium-blue;
     }
 
     .collectionStackedTimeline-marker-timeline {
@@ -97,14 +97,14 @@
         top: 2.5%;
         height: 95%;
         border-radius: 4px;
-        //background: $light-gray;
+        //background: global.$light-gray;
         &:hover {
             opacity: 1;
         }
 
         .collectionStackedTimeline-left-resizer,
         .collectionStackedTimeline-resizer {
-            background: $dark-gray;
+            background: global.$dark-gray;
             position: absolute;
             top: 0;
             height: 100%;
@@ -141,7 +141,7 @@
 
     .hoverTime {
         position: absolute;
-        color: $dark-gray;
+        color: global.$dark-gray;
         transform: translate(0, -100%);
 
         font-weight: bold;
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 6400a0a8e..5237bdffb 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .collectionMasonryView {
     display: inline;
@@ -18,7 +18,7 @@
 .documentButtonMenu {
     position: relative;
     height: fit-content;
-    border-bottom: $standard-border;
+    border-bottom: global.$standard-border;
     display: flex;
     justify-content: center;
     flex-direction: column;
@@ -30,10 +30,10 @@
         width: 90%;
         margin: 5px;
         font-size: 11px;
-        color: $medium-blue;
+        color: global.$medium-blue;
         padding: 10px;
         border-radius: 5px;
-        border: solid 0.5px $medium-blue;
+        border: solid 0.5px global.$medium-blue;
     }
 }
 
@@ -115,9 +115,9 @@
         padding: 10px;
         height: 2vw;
         width: 100%;
-        font-family: $sans-serif;
-        background: $dark-gray;
-        color: $white;
+        font-family: global.$sans-serif;
+        background: global.$dark-gray;
+        color: global.$white;
     }
 
     .collectionStackingView-columnDragger {
@@ -149,7 +149,7 @@
 
     .collectionStackingView-collapseBar {
         margin-top: 2px;
-        background: $medium-gray;
+        background: global.$medium-gray;
         height: 5px;
         width: 100%;
         display: none;
@@ -207,11 +207,11 @@
         text-align: center;
         margin: auto;
         margin-bottom: 10px;
-        background: $medium-gray;
+        background: global.$medium-gray;
         // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong
 
         .editableView-input {
-            color: $dark-gray;
+            color: global.$dark-gray;
         }
 
         .editableView-input:hover,
@@ -232,7 +232,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            color: $dark-gray;
+            color: global.$dark-gray;
 
             .editableView-container-editing-oneLine,
             .editableView-container-editing {
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index bbbef78b4..2a03ea708 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .collectionTreeView-container {
     transform-origin: top left;
@@ -12,7 +12,7 @@
     width: 100%;
     position: relative;
     top: 0;
-    // background: $light-gray;
+    // background: global.$light-gray;
     font-size: 13px;
     overflow: auto;
     user-select: none;
@@ -21,7 +21,7 @@
 
     ul {
         list-style: none;
-        padding-left: $TREE_BULLET_WIDTH;
+        padding-left: global.$TREE_BULLET_WIDTH;
         margin-bottom: 1px; // otherwise vertical scrollbars may pop up for no apparent reason....
         > .contentFittingDocumentView {
             width: unset;
@@ -47,7 +47,7 @@
     }
 
     .delete-button {
-        color: $medium-gray;
+        color: global.$medium-gray;
         // float: right;
         margin-left: 15px;
         // margin-top: 3px;
@@ -90,7 +90,7 @@
 .collectionTreeView-subtitle {
     font-style: italic;
     font-size: 8pt;
-    color: $medium-gray;
+    color: global.$medium-gray;
 }
 
 .docContainer {
diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss
index de53a2c62..06c324bd0 100644
--- a/src/client/views/collections/CollectionView.scss
+++ b/src/client/views/collections/CollectionView.scss
@@ -1,10 +1,10 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .collectionView {
     border-width: 0;
-    border-color: $light-gray;
+    border-color: global.$light-gray;
     border-style: solid;
-    border-radius: 0 0 $border-radius $border-radius;
+    border-radius: 0 0 global.$border-radius global.$border-radius;
     box-sizing: border-box;
     border-radius: inherit;
     width: 100%;
diff --git a/src/client/views/collections/TabDocView.scss b/src/client/views/collections/TabDocView.scss
index dd4c0b881..397e35ca9 100644
--- a/src/client/views/collections/TabDocView.scss
+++ b/src/client/views/collections/TabDocView.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .tabDocView-content {
     height: 100%;
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 2ab1a5ac1..78794d112 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .treeView-label {
     max-height: 1.5em;
@@ -14,7 +14,7 @@
     .bullet-outline {
         position: relative;
         width: fit-content;
-        color: $medium-gray;
+        color: global.$medium-gray;
         transform: scale(0.5);
         display: inline-flex;
         align-items: center;
@@ -66,7 +66,7 @@
         min-height: 20px;
         min-width: 15px;
         margin-right: 3px;
-        color: $medium-gray;
+        color: global.$medium-gray;
         border: #80808030 1px solid;
         border-radius: 5px;
         z-index: 1;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 46bd37f6d..cce0ff684 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -1,4 +1,4 @@
-@import '../../global/globalCssVariables.module.scss';
+@use '../../global/globalCssVariables.module.scss' as global;
 
 .collectionfreeformview-none {
     position: inherit;
@@ -32,9 +32,9 @@
 .collectionfreeformview-mask-empty,
 .collectionfreeformview-mask {
     z-index: 5000;
-    width: $INK_MASK_SIZE;
-    height: $INK_MASK_SIZE;
-    transform: translate($INK_MASK_SIZE_HALF, $INK_MASK_SIZE_HALF);
+    width: global.$INK_MASK_SIZE;
+    height: global.$INK_MASK_SIZE;
+    transform: translate(global.$INK_MASK_SIZE_HALF, global.$INK_MASK_SIZE_HALF);
     pointer-events: none;
     position: absolute;
     background-color: transparent;
@@ -211,11 +211,11 @@
 
     //nested freeform views
     // .collectionfreeformview-container {
-    // background-image: linear-gradient(to right, $light-color-secondary 1px, transparent 1px),
-    //   linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px);
+    // background-image: linear-gradient(to right, global.$light-color-secondary 1px, transparent 1px),
+    //   linear-gradient(to bottom, global.$light-color-secondary 1px, transparent 1px);
     // background-size: 30px 30px;
     // }
-    border: 0px solid $light-gray;
+    border: 0px solid global.$light-gray;
     border-radius: inherit;
     box-sizing: border-box;
     position: absolute;
@@ -233,7 +233,7 @@
     box-sizing: border-box;
     width: 98%;
     height: 98%;
-    border-radius: $border-radius;
+    border-radius: global.$border-radius;
 }
 
 //this is an animation for the blinking cursor!
diff --git a/src/client/views/collections/collectionFreeForm/ImageLabelHandler.tsx b/src/client/views/collections/collectionFreeForm/ImageLabelHandler.tsx
index f050b9846..1a44e094d 100644
--- a/src/client/views/collections/collectionFreeForm/ImageLabelHandler.tsx
+++ b/src/client/views/collections/collectionFreeForm/ImageLabelHandler.tsx
@@ -9,7 +9,8 @@ import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
 import './ImageLabelHandler.scss';
 
 @observer
-export class ImageLabelHandler extends ObservableReactComponent<{}> {
+export class ImageLabelHandler extends ObservableReactComponent<object> {
+    // eslint-disable-next-line no-use-before-define
     static Instance: ImageLabelHandler;
 
     @observable _display: boolean = false;
@@ -19,11 +20,10 @@ export class ImageLabelHandler extends ObservableReactComponent<{}> {
     @observable _currentLabel: string = '';
     @observable _labelGroups: string[] = [];
 
-    constructor(props: any) {
+    constructor(props: object) {
         super(props);
         makeObservable(this);
         ImageLabelHandler.Instance = this;
-        console.log('Instantiated label handler!');
     }
 
     @action
@@ -41,8 +41,8 @@ export class ImageLabelHandler extends ObservableReactComponent<{}> {
     };
 
     @action
-    addLabel = (label: string) => {
-        label = label.toUpperCase().trim();
+    addLabel = (labelIn: string) => {
+        const label = labelIn.toUpperCase().trim();
         if (label.length > 0) {
             if (!this._labelGroups.includes(label)) {
                 this._labelGroups = [...this._labelGroups, label];
@@ -96,10 +96,10 @@ export class ImageLabelHandler extends ObservableReactComponent<{}> {
                     <div>
                         {this._labelGroups.map(group => {
                             return (
-                                <div>
+                                <div key={group}>
                                     <p>{group}</p>
                                     <IconButton
-                                        tooltip={'Remove Label'}
+                                        tooltip="Remove Label"
                                         onPointerDown={() => {
                                             this.removeLabel(group);
                                         }}
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.scss b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
index b8ceec139..0dfaed38a 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.scss
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
@@ -1,12 +1,12 @@
-@import '../../global/globalCssVariables.module.scss';
-@import '../../_nodeModuleOverrides';
+@use '../../global/globalCssVariables.module.scss' as global;
+// bcz fix   @import '../../_nodeModuleOverrides';
 
 .collectionLinearView {
     width: 100%;
 }
 .collectionLinearView-label {
     color: black;
-    background-color: $light-gray;
+    background-color: global.$light-gray;
     width: 100%;
 }
 .collectionLinearView-outer {
@@ -32,8 +32,8 @@
         }
 
         > span {
-            background: $dark-gray;
-            color: $white;
+            background: global.$dark-gray;
+            color: global.$white;
             border-radius: 18px;
             margin-right: 6px;
             cursor: pointer;
@@ -44,7 +44,7 @@
         }
 
         .bottomPopup-background {
-            background: $medium-blue;
+            background: global.$medium-blue;
             display: flex;
             border-radius: 10px;
             height: 35;
@@ -55,7 +55,7 @@
         }
 
         .bottomPopup-text {
-            color: $white;
+            color: global.$white;
             display: inline;
             white-space: nowrap;
             padding-left: 8px;
@@ -72,7 +72,7 @@
             padding-left: 8px;
             padding-right: 8px;
             vertical-align: middle;
-            background-color: $light-gray;
+            background-color: global.$light-gray;
             border-radius: 3px;
             color: black;
             margin-right: 5px;
@@ -86,7 +86,7 @@
             padding-left: 8px;
             padding-right: 8px;
             vertical-align: middle;
-            background-color: $close-red;
+            background-color: global.$close-red;
             border-radius: 3px;
             color: black;
         }
@@ -94,13 +94,13 @@
         > label {
             pointer-events: all;
             cursor: pointer;
-            background-color: $medium-blue;
+            background-color: global.$medium-blue;
             padding: 5;
             border-radius: 2px;
             height: 100%;
             min-width: 25;
             margin: 0;
-            color: $white;
+            color: global.$white;
             display: flex;
             font-weight: 100;
             transition: transform 0.2s;
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 817ceac97..0bf78f57c 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -1,4 +1,4 @@
-@import '../../global/globalCssVariables.module.scss';
+@use '../../global/globalCssVariables.module.scss' as global;
 
 .collectionSchemaView {
     cursor: default;
@@ -7,7 +7,7 @@
     flex-direction: row;
 
     .schema-table {
-        background-color: $white;
+        background-color: global.$white;
         cursor: grab;
         width: 100%;
 
@@ -49,10 +49,10 @@
 
 .schema-column-menu,
 .schema-filter-menu {
-    background: $light-gray;
+    background: global.$light-gray;
     position: absolute;
-    border: 1px solid $medium-gray;
-    border-bottom: 2px solid $medium-gray;
+    border: 1px solid global.$medium-gray;
+    border-bottom: 2px solid global.$medium-gray;
     max-height: 201px;
     display: flex;
     overflow: hidden;
@@ -66,7 +66,7 @@
         width: 100%;
 
         &:hover {
-            background-color: $medium-gray;
+            background-color: global.$medium-gray;
         }
         .schema-search-result-type {
             font-family: 'Courier New', Courier, monospace;
@@ -74,8 +74,8 @@
 
         .schema-search-result-type,
         .schema-search-result-desc {
-            color: $dark-gray;
-            font-size: $body-text;
+            color: global.$dark-gray;
+            font-size: global.$body-text;
         }
         .schema-search-result-desc {
             font-style: italic;
@@ -120,9 +120,9 @@
     .schema-column-menu-button {
         cursor: pointer;
         padding: 2px 5px;
-        background: $medium-blue;
+        background: global.$medium-blue;
         border-radius: 9999px;
-        color: $white;
+        color: global.$white;
         width: fit-content;
         margin: 5px;
         align-self: center;
@@ -141,7 +141,7 @@
 }
 
 .schema-column-header {
-    background-color: $light-gray;
+    background-color: global.$light-gray;
     font-weight: bold;
     display: flex;
     flex-direction: row;
@@ -149,7 +149,7 @@
     align-items: center;
     padding: 0;
     z-index: 1;
-    border: 1px solid $medium-gray;
+    border: 1px solid global.$medium-gray;
 
     .schema-column-title {
         flex-grow: 2;
@@ -175,7 +175,7 @@
         cursor: ew-resize;
 
         &:hover {
-            background-color: $light-blue;
+            background-color: global.$light-blue;
         }
     }
 
@@ -188,7 +188,7 @@
         min-width: 5px;
         transform: translate(-3px, 0px);
         align-self: flex-start;
-        background-color: $medium-gray;
+        background-color: global.$medium-gray;
     }*/ // creates awkward thick gray borders between colheaders
 }
 
@@ -202,7 +202,7 @@
 }
 
 .schema-header-row {
-    background-color: $light-gray;
+    background-color: global.$light-gray;
     overflow: hidden;
 }
 
@@ -226,7 +226,7 @@
 
 .schema-table-cell,
 .row-menu {
-    border: 1px solid $medium-gray;
+    border: 1px solid global.$medium-gray;
     overflow-x: hidden;
     overflow-y: auto;
     display: inline-flex;
@@ -264,7 +264,7 @@
     .row-menu-infos {
         position: absolute;
         top: 3;
-        left: 3; 
+        left: 3;
         z-index: 1;
         display: flex;
         justify-content: flex-end;
@@ -278,7 +278,7 @@
 
 .schema-row-button,
 .schema-header-button {
-    color: $dark-gray;
+    color: global.$dark-gray;
     margin: 3px;
     cursor: pointer;
     display: flex;
@@ -294,7 +294,7 @@
     width: 17px;
     height: 17px;
     border-radius: 30%;
-    background-color: $dark-gray;
+    background-color: global.$dark-gray;
     color: white;
     margin: 3px;
     cursor: pointer;
@@ -311,5 +311,3 @@
     outline: none;
     height: 100%;
 }
-
-
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 636b6415c..ebf60b287 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .linkMenu {
     width: auto;
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 66ddd6eca..3cd60c87f 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -1,7 +1,7 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .linkMenu-item {
-    // border-top: 0.5px solid $medium-gray;
+    // border-top: 0.5px solid global.$medium-gray;
     position: relative;
     display: flex;
     border-top: 0.5px solid #cdcdcd;
@@ -120,7 +120,7 @@
         border-radius: 50%;
         pointer-events: auto;
         background-color: red;
-        color: $white;
+        color: global.$white;
         font-size: 65%;
         transition: transform 0.2s;
         text-align: center;
@@ -138,7 +138,7 @@
         }
 
         &:hover {
-            background: $medium-gray;
+            background: global.$medium-gray;
             cursor: pointer;
         }
     }
diff --git a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.scss b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.scss
index 74fbfbb2c..cb1e11780 100644
--- a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.scss
+++ b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.scss
@@ -1,15 +1,15 @@
-@import '../NewLightboxStyles.scss';
+@use '../NewLightboxStyles.scss' as newstyles;
 
 .newLightboxButtonMeny-container {
     width: 100vw;
     height: 100vh;
-  
+
     &.dark {
-      background: $black;
+        background: newstyles.$black;
     }
-  
+
     &.light,
     &.default {
-      background: $white;
+        background: newstyles.$white;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/newlightbox/ExploreView/ExploreView.scss b/src/client/views/newlightbox/ExploreView/ExploreView.scss
index 5a8ab2f87..2c264c514 100644
--- a/src/client/views/newlightbox/ExploreView/ExploreView.scss
+++ b/src/client/views/newlightbox/ExploreView/ExploreView.scss
@@ -1,4 +1,4 @@
-@import '../NewLightboxStyles.scss';
+@use '../NewLightboxStyles.scss' as newstyles;
 
 .exploreView-container {
     width: 100%;
@@ -6,39 +6,39 @@
     border-radius: 20px;
     position: relative;
     // transform: scale(1);
-    background: $gray-l1;
-    border-top: $standard-border;
-    border-color: $gray-l2;
+    background: newstyles.$gray-l1;
+    border-top: newstyles.$standard-border;
+    border-color: newstyles.$gray-l2;
     border-radius: 0px 0px 20px 20px;
     transform-origin: 50% 50%;
     overflow: hidden;
 
     &.dark {
-      background: $black;
+        background: newstyles.$black;
     }
-  
+
     &.light,
     &.default {
-      background: $gray-l1;
+        background: newstyles.$gray-l1;
     }
 
     .exploreView-doc {
-      width: 60px;
-      height: 80px;
-      position: absolute;
-      background: $blue-l2;
-      // opacity: 0.8;
-      transform-origin: 50% 50%;
-      transform: translate(-50%, -50%) scale(1);
-      cursor: pointer;
-      transition: 0.2s ease;
-      overflow: hidden;
-      font-size: 9px;
-      padding: 10px;
-      border-radius: 5px;
+        width: 60px;
+        height: 80px;
+        position: absolute;
+        background: newstyles.$blue-l2;
+        // opacity: 0.8;
+        transform-origin: 50% 50%;
+        transform: translate(-50%, -50%) scale(1);
+        cursor: pointer;
+        transition: 0.2s ease;
+        overflow: hidden;
+        font-size: 9px;
+        padding: 10px;
+        border-radius: 5px;
 
-      &:hover {
-        transform: translate(calc(-50% * 1.125), calc(-50% * 1.125)) scale(1.5);
-      }
+        &:hover {
+            transform: translate(calc(-50% * 1.125), calc(-50% * 1.125)) scale(1.5);
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/newlightbox/Header/LightboxHeader.scss b/src/client/views/newlightbox/Header/LightboxHeader.scss
index a9e60ea98..5b316890d 100644
--- a/src/client/views/newlightbox/Header/LightboxHeader.scss
+++ b/src/client/views/newlightbox/Header/LightboxHeader.scss
@@ -1,9 +1,9 @@
-@import '../NewLightboxStyles.scss';
+@use '../NewLightboxStyles.scss' as newstyles;
 
 .newLightboxHeader-container {
     width: 100%;
     height: 100%;
-    background: $gray-l1;
+    background: newstyles.$gray-l1;
     border-radius: 20px 20px 0px 0px;
     padding: 20px;
     display: grid;
@@ -29,13 +29,13 @@
         grid-row: 2;
         .type {
             padding: 2px 7px !important;
-            background: $gray-l2;
+            background: newstyles.$gray-l2;
         }
     }
 
     .lb-label {
-        color: $gray-l3;
-        font-weight: $h1-weight;
+        color: newstyles.$gray-l3;
+        font-weight: newstyles.$h1-weight;
     }
 
     .lb-button {
@@ -47,25 +47,25 @@
         justify-content: space-evenly;
         align-items: center;
         transition: 0.2s ease;
-        gap: 5px; 
-        font-size: $body-size;
+        gap: 5px;
+        font-size: newstyles.$body-size;
         height: fit-content;
 
         &:hover {
-            background: $gray-l2;
+            background: newstyles.$gray-l2;
         }
 
         &.true {
-            background: $blue-l1;
+            background: newstyles.$blue-l1;
         }
     }
-    
+
     &.dark {
-      background: $black;
+        background: newstyles.$black;
     }
-  
+
     &.light,
     &.default {
-      background: $white;
+        background: newstyles.$white;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/newlightbox/RecommendationList/RecommendationList.scss b/src/client/views/newlightbox/RecommendationList/RecommendationList.scss
index 40dd47e47..99c935e0c 100644
--- a/src/client/views/newlightbox/RecommendationList/RecommendationList.scss
+++ b/src/client/views/newlightbox/RecommendationList/RecommendationList.scss
@@ -1,4 +1,4 @@
-@import '../NewLightboxStyles.scss';
+@use '../NewLightboxStyles.scss' as newstyles;
 
 .recommendationlist-container {
     height: calc(100% - 40px);
@@ -7,111 +7,110 @@
     overflow-y: scroll;
 
     .recommendations {
-      height: fit-content;
-      padding: 20px;
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-      background: $gray-l1;
-      border-radius: 0px 0px 20px 20px;
+        height: fit-content;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        background: newstyles.$gray-l1;
+        border-radius: 0px 0px 20px 20px;
     }
 
     .header {
-      top: 0px;
-      position: sticky;
-      background: $gray-l1;
-      border-bottom: $standard-border;
-      border-color: $gray-l2;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
-      border-radius: 20px 20px 0px 0px;
-      padding: 20px;
-      z-index: 2;
-      gap: 10px;
-      color: $text-color-lm;
-
-      .lb-label {
-        color: $gray-l3;
-        font-weight: $h1-weight;
-        font-size: $body-size;
-      }
-
-      .lb-caret {
+        top: 0px;
+        position: sticky;
+        background: newstyles.$gray-l1;
+        border-bottom: newstyles.$standard-border;
+        border-color: newstyles.$gray-l2;
         display: flex;
-        flex-direction: row;
-        justify-content: flex-end;
-        align-items: center;
-        gap: 5px;
-        cursor: pointer;
-        width: 100%;
-        user-select: none;
-        font-size: $body-size;
-      }
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        border-radius: 20px 20px 0px 0px;
+        padding: 20px;
+        z-index: 2;
+        gap: 10px;
+        color: newstyles.$text-color-lm;
 
-      .more {
-        width: 100%;
-      }
+        .lb-label {
+            color: newstyles.$gray-l3;
+            font-weight: newstyles.$h1-weight;
+            font-size: newstyles.$body-size;
+        }
 
-      &.dark {
-        color: $text-color-dm;
-      }
+        .lb-caret {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            align-items: center;
+            gap: 5px;
+            cursor: pointer;
+            width: 100%;
+            user-select: none;
+            font-size: newstyles.$body-size;
+        }
 
-      .title {
-        height: 30px;
-        min-height: 30px;
-        font-size: $h1-size;
-        font-weight: $h1-weight;
-        text-align: left;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-      }
+        .more {
+            width: 100%;
+        }
 
-      .keywords {
-        display: flex;
-        flex-flow: row wrap;
-        gap: 5px;
+        &.dark {
+            color: newstyles.$text-color-dm;
+        }
 
-        .keyword-input {
-          padding: 3px 7px;
-          background: $gray-l2;
-          outline: none;
-          border: none;
-          height: 21.5px;
-          color: $text-color-lm;
+        .title {
+            height: 30px;
+            min-height: 30px;
+            font-size: newstyles.$h1-size;
+            font-weight: newstyles.$h1-weight;
+            text-align: left;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
         }
 
-        .keyword {
-          padding: 3px 7px;
-          width: fit-content;
-          background: $gray-l2;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          flex-direction: row;
-          gap: 10px;
-          font-size: $body-size;
-          font-weight: $body-weight;
+        .keywords {
+            display: flex;
+            flex-flow: row wrap;
+            gap: 5px;
 
-          &.loading {
-            animation: skeleton-loading-l2 1s linear infinite alternate;
-            min-width: 70px;
-            height: 21.5px;
-          }
-        }
+            .keyword-input {
+                padding: 3px 7px;
+                background: newstyles.$gray-l2;
+                outline: none;
+                border: none;
+                height: 21.5px;
+                color: newstyles.$text-color-lm;
+            }
+
+            .keyword {
+                padding: 3px 7px;
+                width: fit-content;
+                background: newstyles.$gray-l2;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: row;
+                gap: 10px;
+                font-size: newstyles.$body-size;
+                font-weight: newstyles.$body-weight;
 
-      }
+                &.loading {
+                    animation: skeleton-loading-l2 1s linear infinite alternate;
+                    min-width: 70px;
+                    height: 21.5px;
+                }
+            }
+        }
     }
-  
+
     &.dark {
-      background: $black;
+        background: newstyles.$black;
     }
-  
+
     &.light,
     &.default {
-      background: $gray-l1;
+        background: newstyles.$gray-l1;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/newlightbox/components/EditableText/EditableText.scss b/src/client/views/newlightbox/components/EditableText/EditableText.scss
index 7828538ab..8007e8d43 100644
--- a/src/client/views/newlightbox/components/EditableText/EditableText.scss
+++ b/src/client/views/newlightbox/components/EditableText/EditableText.scss
@@ -1,34 +1,34 @@
-@import '../../NewLightboxStyles.scss';
+@use '../../NewLightboxStyles.scss' as newstyles;
 
 .lb-editableText,
 .lb-displayText {
     padding: 4px 7px !important;
-    border: $standard-border !important;
-    border-color: $gray-l2 !important;
+    border: newstyles.$standard-border !important;
+    border-color: newstyles.$gray-l2 !important;
 }
 
 .lb-editableText {
-  -webkit-appearance: none;
-  overflow: hidden;
-  font-size: inherit;
-  border: none;
-  outline: none;
-  width: 100%;
-  margin: 0px;
-  padding: 0px;
-  box-shadow: none !important;
-  background: none;
-
-  &:focus {
+    -webkit-appearance: none;
+    overflow: hidden;
+    font-size: inherit;
+    border: none;
     outline: none;
-    background-color: $blue-l1;
-  }
+    width: 100%;
+    margin: 0px;
+    padding: 0px;
+    box-shadow: none !important;
+    background: none;
+
+    &:focus {
+        outline: none;
+        background-color: newstyles.$blue-l1;
+    }
 }
 
 .lb-displayText {
-  cursor: text !important;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  font-size: inherit;
-}
\ No newline at end of file
+    cursor: text !important;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    font-size: inherit;
+}
diff --git a/src/client/views/newlightbox/components/Recommendation/Recommendation.scss b/src/client/views/newlightbox/components/Recommendation/Recommendation.scss
index c86c63ba0..cf6b5ccb1 100644
--- a/src/client/views/newlightbox/components/Recommendation/Recommendation.scss
+++ b/src/client/views/newlightbox/components/Recommendation/Recommendation.scss
@@ -1,4 +1,4 @@
-@import '../../NewLightboxStyles.scss';
+@use '../../NewLightboxStyles.scss' as newstyles;
 
 .recommendation-container {
     width: 100%;
@@ -8,22 +8,22 @@
     display: grid;
     grid-template-columns: 0% 100%;
     grid-template-rows: auto auto auto auto auto;
-    gap: 5px 0px;   
+    gap: 5px 0px;
     padding: 10px;
     cursor: pointer;
     transition: 0.2s ease;
-    border: $standard-border;
-    border-color: $gray-l2;
+    border: newstyles.$standard-border;
+    border-color: newstyles.$gray-l2;
     background: white;
 
     &:hover {
-    //   background: white !important;
-      transform: scale(1.02);
-      z-index: 0;
+        //   background: white !important;
+        transform: scale(1.02);
+        z-index: 0;
 
-      .title {
-        text-decoration: underline;
-      }
+        .title {
+            text-decoration: underline;
+        }
     }
 
     &.previewUrl {
@@ -39,18 +39,18 @@
         grid-template-rows: auto auto auto auto auto;
         gap: 5px 10px;
 
-      .image-container,
-      .title,
-      .info,
-      .source,
-      .explainer,
-      .hide-rec {
-        animation: skeleton-loading-l3 1s linear infinite alternate;
-      }
+        .image-container,
+        .title,
+        .info,
+        .source,
+        .explainer,
+        .hide-rec {
+            animation: skeleton-loading-l3 1s linear infinite alternate;
+        }
 
-      .title {
-        border-radius: 20px;
-      }
+        .title {
+            border-radius: 20px;
+        }
     }
 
     .distance-container,
@@ -64,62 +64,62 @@
     }
 
     .image-container {
-      grid-row: 2/5;
-      grid-column: 1;
-      border-radius: 20px;
-      overflow: hidden;
+        grid-row: 2/5;
+        grid-column: 1;
+        border-radius: 20px;
+        overflow: hidden;
 
-      .image {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
+        .image {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
     }
 
     .title {
-      grid-row: 1;
-      grid-column: 1/3;
-      border-radius: 20px;
-      font-size: $h2-size;
-      font-weight: $h2-weight;
-      overflow: hidden;
-      border-radius: 0px;
-      min-height: 30px;
+        grid-row: 1;
+        grid-column: 1/3;
+        border-radius: 20px;
+        font-size: newstyles.$h2-size;
+        font-weight: newstyles.$h2-weight;
+        overflow: hidden;
+        border-radius: 0px;
+        min-height: 30px;
     }
 
     .info {
-      grid-row: 2;
-      grid-column: 2;
-      border-radius: 20px;
-      display: flex;
-      flex-direction: row;
-      gap: 5px;
-      font-size: $body-size;
+        grid-row: 2;
+        grid-column: 2;
+        border-radius: 20px;
+        display: flex;
+        flex-direction: row;
+        gap: 5px;
+        font-size: newstyles.$body-size;
 
         .lb-type {
             padding: 2px 7px !important;
-            background: $gray-l2;
+            background: newstyles.$gray-l2;
         }
     }
 
     .lb-label {
-        color: $gray-l3;
-        font-weight: $h1-weight;
-        font-size: $body-size;
+        color: newstyles.$gray-l3;
+        font-weight: newstyles.$h1-weight;
+        font-size: newstyles.$body-size;
     }
 
     .source {
         grid-row: 3;
         grid-column: 2;
         border-radius: 20px;
-        font-size: $body-size;
+        font-size: newstyles.$body-size;
         display: flex;
         justify-content: flex-start;
         align-items: center;
 
         .lb-source {
             padding: 2px 7px !important;
-            background: $gray-l2;
+            background: newstyles.$gray-l2;
             border-radius: 10px;
             white-space: nowrap;
             max-width: 130px;
@@ -134,7 +134,7 @@
         border-radius: 20px;
         font-size: 10px;
         width: 100%;
-        background: $blue-l1;
+        background: newstyles.$blue-l1;
         border-radius: 0;
         padding: 10px;
 
@@ -145,7 +145,7 @@
             gap: 3px;
             .concept {
                 padding: 2px 7px !important;
-                background: $gray-l2;
+                background: newstyles.$gray-l2;
             }
         }
     }
@@ -154,7 +154,7 @@
         grid-row: 5;
         grid-column: 2;
         border-radius: 20px;
-        font-size: $body-size;
+        font-size: newstyles.$body-size;
         display: flex;
         align-items: center;
         margin-top: 5px;
@@ -162,15 +162,15 @@
         justify-content: flex-end;
         text-transform: underline;
     }
-  
+
     &.dark {
-      background: $black;
-      border-color: $white;
+        background: newstyles.$black;
+        border-color: newstyles.$white;
     }
-  
+
     &.light,
     &.default {
-      background: $white;
-      border-color: $white;
+        background: newstyles.$white;
+        border-color: newstyles.$white;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss b/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss
index e541e3f3c..bbc730144 100644
--- a/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss
+++ b/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss
@@ -1,82 +1,81 @@
-@import '../../NewLightboxStyles.scss';
+@use '../../NewLightboxStyles.scss' as newstyles;
 
 .skeletonDoc-container {
-  display: flex;
-  flex-direction: column;
-  height: calc(100% - 40px);
-  margin: 20px;
-  gap: 20px;
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 40px);
+    margin: 20px;
+    gap: 20px;
 
-  .header {
-    width: calc(100% - 20px);
-    height: 80px;
-    background: $gray-l2;
-    animation: skeleton-loading-l2 1s linear infinite alternate; 
-    display: grid;
-    grid-template-rows: 60% 40%;
-    padding: 10px;
-    grid-template-columns: auto auto auto auto;
-    border-radius: 20px;
+    .header {
+        width: calc(100% - 20px);
+        height: 80px;
+        background: newstyles.$gray-l2;
+        animation: skeleton-loading-l2 1s linear infinite alternate;
+        display: grid;
+        grid-template-rows: 60% 40%;
+        padding: 10px;
+        grid-template-columns: auto auto auto auto;
+        border-radius: 20px;
 
-    .title {
-      grid-row: 1;
-      grid-column: 1 / 5;
-      display: flex;
-      width: fit-content;
-      height: 100%;
-      min-width: 500px;
-      font-size: $title-size;
-      animation: skeleton-loading-l3 1s linear infinite alternate;
-      border-radius: 20px;
-    }
+        .title {
+            grid-row: 1;
+            grid-column: 1 / 5;
+            display: flex;
+            width: fit-content;
+            height: 100%;
+            min-width: 500px;
+            font-size: newstyles.$title-size;
+            animation: skeleton-loading-l3 1s linear infinite alternate;
+            border-radius: 20px;
+        }
 
-    .type {
-      display: flex;
-      padding: 3px 7px;
-      width: fit-content;
-      height: fit-content;
-      margin-top: 8px;
-      min-height: 15px;
-      min-width: 60px;
-      grid-row: 2;
-      grid-column: 1;
-      animation: skeleton-loading-l3 1s linear infinite alternate;
-      border-radius: 20px;
-    }
+        .type {
+            display: flex;
+            padding: 3px 7px;
+            width: fit-content;
+            height: fit-content;
+            margin-top: 8px;
+            min-height: 15px;
+            min-width: 60px;
+            grid-row: 2;
+            grid-column: 1;
+            animation: skeleton-loading-l3 1s linear infinite alternate;
+            border-radius: 20px;
+        }
 
-    .buttons-container {
-      grid-row: 1 / 3;
-      grid-column: 5;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      gap: 10px;
+        .buttons-container {
+            grid-row: 1 / 3;
+            grid-column: 5;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            gap: 10px;
 
-      .button {
-        width: 50px;
-        height: 50px;
-        border-radius: 100%;
-        animation: skeleton-loading-l3 1s linear infinite alternate;
-      }
+            .button {
+                width: 50px;
+                height: 50px;
+                border-radius: 100%;
+                animation: skeleton-loading-l3 1s linear infinite alternate;
+            }
+        }
     }
 
-  }
-
-  .content {
-    width: 100%;
-    flex: 1;
-    -webkit-flex: 1; /* Chrome */
-    background: $gray-l2;
-    animation: skeleton-loading-l2 1s linear infinite alternate;
-    border-radius: 20px;
-  }
+    .content {
+        width: 100%;
+        flex: 1;
+        -webkit-flex: 1; /* Chrome */
+        background: newstyles.$gray-l2;
+        animation: skeleton-loading-l2 1s linear infinite alternate;
+        border-radius: 20px;
+    }
 
     // &.dark {
-    //   background: $black;
+    //   background: newstyles.$black;
     // }
-  
+
     // &.light,
     // &.default {
-    //   background: $white;
+    //   background: newstyles.$white;
     // }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/newlightbox/components/Template/Template.scss b/src/client/views/newlightbox/components/Template/Template.scss
index 5b72ddaf9..c2fb9fba4 100644
--- a/src/client/views/newlightbox/components/Template/Template.scss
+++ b/src/client/views/newlightbox/components/Template/Template.scss
@@ -1,15 +1,15 @@
-@import '../../NewLightboxStyles.scss';
+@use '../../NewLightboxStyles.scss' as newstyles;
 
 .template-container {
     width: 100vw;
     height: 100vh;
-  
+
     &.dark {
-      background: $black;
+        background: newstyles.$black;
     }
-  
+
     &.light,
     &.default {
-      background: $white;
+        background: newstyles.$white;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 4337401e3..933a383ea 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .audiobox-container {
     width: 100%;
@@ -19,30 +19,30 @@
 
     .audiobox-dictation {
         width: 40px;
-        background: $medium-gray;
-        color: $dark-gray;
+        background: global.$medium-gray;
+        color: global.$dark-gray;
         display: flex;
         justify-content: center;
         align-items: center;
 
         &:hover {
-            color: $black;
+            color: global.$black;
         }
     }
 
     .audiobox-start-record {
-        color: $white;
-        background: $dark-gray;
+        color: global.$white;
+        background: global.$dark-gray;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: $body-text;
+        font-size: global.$body-text;
         width: 100%;
         height: 100%;
         gap: 5px;
 
         &:hover {
-            background: $black;
+            background: global.$black;
         }
     }
 
@@ -54,11 +54,11 @@
         gap: 5px;
         width: 100%;
         height: 100%;
-        background: $dark-gray;
+        background: global.$dark-gray;
         color: white;
 
         .record-timecode {
-            font-size: $large-header;
+            font-size: global.$large-header;
         }
 
         .record-button {
@@ -66,7 +66,7 @@
             width: 30px;
             height: 30px;
             border-radius: 50%;
-            background: $dark-gray;
+            background: global.$dark-gray;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -76,7 +76,7 @@
             }
 
             &:hover {
-                background: $black;
+                background: global.$black;
             }
         }
     }
@@ -87,10 +87,10 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: $dark-gray;
+    background: global.$dark-gray;
     width: 100%;
     height: 100%;
-    color: $white;
+    color: global.$white;
 
     .audiobox-button {
         margin: 2.5px;
@@ -98,7 +98,7 @@
         width: 25px;
         height: 25px;
         border-radius: 50%;
-        background: $dark-gray;
+        background: global.$dark-gray;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -108,7 +108,7 @@
         }
 
         &:hover {
-            background: $black;
+            background: global.$black;
         }
     }
 
@@ -132,7 +132,7 @@
         height: 6px;
         cursor: pointer;
         box-shadow: 0;
-        background: $light-gray;
+        background: global.$light-gray;
         border-radius: 3px;
     }
 
@@ -142,7 +142,7 @@
         height: 10px;
         width: 10px;
         border-radius: 10px;
-        background: $medium-blue;
+        background: global.$medium-blue;
         cursor: pointer;
         -webkit-appearance: none;
         margin-top: -2px;
@@ -180,12 +180,12 @@
     .audiobox-playback {
         width: 100%;
         height: 100%;
-        background: $white;
+        background: global.$white;
 
         .audiobox-timeline {
             height: calc(100% - 50px);
             width: 100%;
-            background: $white;
+            background: global.$white;
             position: absolute;
         }
 
@@ -203,7 +203,7 @@
         width: 100%;
         height: 20px;
         padding: 3px;
-        font-size: $small-text;
+        font-size: global.$small-text;
 
         .bottom-controls-middle {
             display: flex;
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index 0eb27b65b..ff1fa343d 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -1,4 +1,4 @@
-@import '../../../global/globalCssVariables.module.scss';
+@use '../../../global/globalCssVariables.module.scss' as global;
 .chart-container {
     display: flex;
     flex-direction: column;
@@ -108,7 +108,7 @@
             }
         }
         tr td {
-            height: $DATA_VIZ_TABLE_ROW_HEIGHT !important; // bcz: hack.  you can't set a <tr> height directly, but you can set the height of all of it's <td>s.  So this is the height of a tableBox row.
+            height: global.$DATA_VIZ_TABLE_ROW_HEIGHT !important; // bcz: hack.  you can't set a <tr> height directly, but you can set the height of all of it's <td>s.  So this is the height of a tableBox row.
             padding: 0 !important;
             vertical-align: middle !important;
         }
@@ -135,7 +135,7 @@
 }
 
 .tableBox-filterPopup {
-    background: $light-gray;
+    background: global.$light-gray;
     position: absolute;
     min-width: 235px;
     top: 60px;
@@ -152,7 +152,7 @@
         .tableBox-filterPopup-selectColumn-each {
             margin-left: 25px;
             border-radius: 3px;
-            background: $light-gray;
+            background: global.$light-gray;
         }
     }
     .tableBox-filterPopup-setValue {
@@ -162,7 +162,7 @@
         .tableBox-filterPopup-setValue-each {
             margin-right: 5px;
             border-radius: 3px;
-            background: $light-gray;
+            background: global.$light-gray;
         }
         .tableBox-filterPopup-setValue-input {
             margin: 5px;
diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss
index b32b27e65..e1b83dc59 100644
--- a/src/client/views/nodes/DocumentLinksButton.scss
+++ b/src/client/views/nodes/DocumentLinksButton.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .documentLinksButton-wrapper {
     transform-origin: top left;
@@ -29,7 +29,7 @@
     pointer-events: auto;
     display: flex;
     align-items: center;
-    background-color: $light-blue;
+    background-color: global.$light-blue;
     color: black;
 }
 .documentLinksButton,
@@ -59,30 +59,30 @@
     }
 }
 .documentLinksButton {
-    background-color: $dark-gray;
-    color: $white;
+    background-color: global.$dark-gray;
+    color: global.$white;
     font-weight: bold;
     font-size: 100%;
     font-family: 'Roboto';
     transition: 0.2s ease all;
 
     &:hover {
-        background-color: $black;
+        background-color: global.$black;
     }
 }
 .documentLinksButton.startLink {
-    background-color: $medium-blue;
+    background-color: global.$medium-blue;
     width: 75%;
     height: 75%;
-    color: $white;
+    color: global.$white;
     font-weight: bold;
     font-size: 100%;
     transition: 0.2s ease all;
 }
 
 .documentLinksButton-endLink {
-    border: $medium-blue 2px dashed;
-    color: $medium-blue;
+    border: global.$medium-blue 2px dashed;
+    color: global.$medium-blue;
     background-color: none !important;
     font-size: 100%;
     transition: 0.2s ease all;
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 7e5507586..294af4d96 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .documentView-effectsWrapper {
     border-radius: inherit;
@@ -28,7 +28,7 @@
     // overflow: hidden; // need this so that title will be clipped when borderRadius is set
     //  transition: outline 0.3s linear;
 
-    // background: $white; //overflow: hidden;
+    // background: global.$white; //overflow: hidden;
     transform-origin: center;
 
     &.minimized {
@@ -180,7 +180,7 @@
 
         .documentView-titleWrapper,
         .documentView-titleWrapper-hover {
-            color: $black;
+            color: global.$black;
             transform-origin: top left;
             top: 0;
             width: 100%;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 441d6053f..b40ead03a 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -778,7 +778,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                         style={{
                             width: `${100 / this.uiBtnScaling}%`, //
                             transform: `scale(${this.uiBtnScaling})`,
-                            bottom: this.maxWidgetSize,
+                            bottom: Number.isNaN(this.maxWidgetSize) ? undefined : this.maxWidgetSize,
                         }}>
                         {this._props.DocumentView?.() ? <TagsView Views={[this._props.DocumentView?.()]} /> : null}
                     </div>
diff --git a/src/client/views/nodes/EquationBox.scss b/src/client/views/nodes/EquationBox.scss
index 55e0f5184..bcbb44e68 100644
--- a/src/client/views/nodes/EquationBox.scss
+++ b/src/client/views/nodes/EquationBox.scss
@@ -1,5 +1,3 @@
-@import '../global/globalCssVariables.module.scss';
-
 .equationBox-cont {
     transform-origin: center;
     width: fit-content;
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.scss b/src/client/views/nodes/FontIconBox/FontIconBox.scss
index 2405889cf..186d24e92 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.scss
@@ -1,4 +1,4 @@
-@import '../../global/globalCssVariables.module.scss';
+@use '../../global/globalCssVariables.module.scss' as global;
 
 // bcz: something's messed up with the IconButton css.  this mostly fixes the fit-all button, the color buttons, the undo +/- expander and the dropdown doc type list (eg 'text')
 .iconButton-container {
@@ -23,7 +23,7 @@
     justify-content: center;
     align-items: center;
     font-size: 80%;
-    border-radius: $standard-border-radius;
+    border-radius: global.$standard-border-radius;
     transition: 0.15s;
 
     .menuButton-wrap {
@@ -34,7 +34,7 @@
     }
 
     .fontIconBox-label {
-        color: $white;
+        color: global.$white;
         bottom: -1;
         position: absolute;
         text-align: center;
@@ -124,17 +124,17 @@
                 width: 21px;
                 left: 2px;
                 bottom: 2px;
-                background-color: $white;
+                background-color: global.$white;
                 -webkit-transition: 0.4s;
                 transition: 0.4s;
             }
 
             input:checked + .slider {
-                background-color: $medium-blue;
+                background-color: global.$medium-blue;
             }
 
             input:focus + .slider {
-                box-shadow: 0 0 1px $medium-blue;
+                box-shadow: 0 0 1px global.$medium-blue;
             }
 
             input:checked + .slider:before {
@@ -145,11 +145,11 @@
 
             /* Rounded sliders */
             .slider.round {
-                border-radius: $standard-border-radius;
+                border-radius: global.$standard-border-radius;
             }
 
             .slider.round:before {
-                border-radius: $standard-border-radius;
+                border-radius: global.$standard-border-radius;
             }
         }
 
@@ -259,12 +259,12 @@
             height: fit-content;
             top: 100%;
             z-index: 21;
-            background-color: $white;
+            background-color: global.$white;
             box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
             padding: 1px;
 
             .list-item {
-                color: $black;
+                color: global.$black;
                 width: 100%;
                 height: 25px;
                 font-weight: 400;
@@ -285,7 +285,7 @@
         background: transparent;
 
         &.slider {
-            color: $white;
+            color: global.$white;
             cursor: pointer;
             flex-direction: column;
             background: transparent;
@@ -302,7 +302,7 @@
                 z-index: 21;
                 background-color: #e3e3e3;
                 box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
-                border-radius: $standard-border-radius;
+                border-radius: global.$standard-border-radius;
 
                 .menu-slider {
                     height: 10px;
@@ -340,7 +340,7 @@
                     border: none;
                     text-align: right;
                     width: 100%;
-                    color: $white;
+                    color: global.$white;
                     height: 100%;
                     text-align: center;
                 }
@@ -354,7 +354,7 @@
         &.list {
             width: 100%;
             justify-content: space-around;
-            border: $standard-border;
+            border: global.$standard-border;
 
             .menuButton-dropdownList {
                 position: absolute;
@@ -365,12 +365,12 @@
                 overflow-y: scroll;
                 top: 100%;
                 z-index: 21;
-                background-color: $white;
+                background-color: global.$white;
                 box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
                 padding: 1px;
 
                 .list-item {
-                    color: $black;
+                    color: global.$black;
                     width: 100%;
                     height: 25px;
                     font-weight: 400;
@@ -394,7 +394,7 @@
         padding-left: 10px;
         justify-content: flex-start;
         color: black;
-        background-color: $light-gray;
+        background-color: global.$light-gray;
         padding: 5px;
         padding-left: 10px;
         width: 100%;
@@ -417,7 +417,7 @@
             top: 100%;
             background-color: #e3e3e3;
             box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
-            border-radius: $standard-border-radius;
+            border-radius: global.$standard-border-radius;
         }
     }
 
diff --git a/src/client/views/nodes/IconTagBox.scss b/src/client/views/nodes/IconTagBox.scss
index c79d662f4..202b0c701 100644
--- a/src/client/views/nodes/IconTagBox.scss
+++ b/src/client/views/nodes/IconTagBox.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .card-button-container {
     display: flex;
@@ -18,7 +18,7 @@
         margin: auto;
         padding: 0;
         border-radius: 50%;
-        background-color: $dark-gray;
+        background-color: global.$dark-gray;
         background-color: transparent;
     }
 }
diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss
index a44f614b2..441fceba4 100644
--- a/src/client/views/nodes/KeyValueBox.scss
+++ b/src/client/views/nodes/KeyValueBox.scss
@@ -1,11 +1,11 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 .keyValueBox-cont {
     overflow-y: scroll;
     width: 100%;
     height: 100%;
-    background-color: $white;
-    border: 1px solid $medium-gray;
-    border-radius: $border-radius;
+    background-color: global.$white;
+    border: 1px solid global.$medium-gray;
+    border-radius: global.$border-radius;
     box-sizing: border-box;
     display: inline-block;
     cursor: default;
@@ -56,8 +56,8 @@ $header-height: 30px;
     width: 100%;
     position: relative;
     display: inline-block;
-    background: $medium-gray;
-    color: $white;
+    background: global.$medium-gray;
+    color: global.$white;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 12px;
@@ -66,7 +66,7 @@ $header-height: 30px;
     th {
         font-weight: normal;
         &:first-child {
-            border-right: 1px solid $white;
+            border-right: 1px solid global.$white;
         }
     }
 }
@@ -76,9 +76,9 @@ $header-height: 30px;
     display: flex;
     width: 100%;
     height: $header-height;
-    background: $white;
+    background: global.$white;
     .formattedTextBox-cont {
-        background: $white;
+        background: global.$white;
     }
 }
 .keyValueBox-cont {
@@ -116,8 +116,8 @@ $header-height: 30px;
     display: flex;
     width: 100%;
     height: 30px;
-    background: $light-gray;
+    background: global.$light-gray;
     .formattedTextBox-cont {
-        background: $light-gray;
+        background: global.$light-gray;
     }
 }
diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss
index 46ea9c18e..913ab641c 100644
--- a/src/client/views/nodes/KeyValuePair.scss
+++ b/src/client/views/nodes/KeyValuePair.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .keyValuePair-td-key {
     display: inline-block;
diff --git a/src/client/views/nodes/LinkDescriptionPopup.scss b/src/client/views/nodes/LinkDescriptionPopup.scss
index 104301656..b44b69af5 100644
--- a/src/client/views/nodes/LinkDescriptionPopup.scss
+++ b/src/client/views/nodes/LinkDescriptionPopup.scss
@@ -1,12 +1,12 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .linkDescriptionPopup {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    border: 2px solid $medium-blue;
-    background-color: $white;
+    border: 2px solid global.$medium-blue;
+    background-color: global.$white;
     width: auto;
     position: absolute;
 
@@ -35,7 +35,7 @@
             white-space: nowrap;
             padding: 5px;
             vertical-align: middle;
-            background-color: $close-red;
+            background-color: global.$close-red;
             border-radius: 3px;
             color: black;
         }
@@ -46,7 +46,7 @@
             white-space: nowrap;
             padding: 5px;
             vertical-align: middle;
-            background-color: $light-blue;
+            background-color: global.$light-blue;
             border-radius: 3px;
             color: black;
         }
diff --git a/src/client/views/nodes/MapBox/AnimationUtility.ts b/src/client/views/nodes/MapBox/AnimationUtility.ts
index f4bae66bb..3eac50f1f 100644
--- a/src/client/views/nodes/MapBox/AnimationUtility.ts
+++ b/src/client/views/nodes/MapBox/AnimationUtility.ts
@@ -65,7 +65,7 @@ export class AnimationUtility {
         const coords: mapboxgl.LngLatLike = [this.previousLngLat.lng, this.previousLngLat.lat];
         // console.log('MAP REF: ', this.MAP_REF)
         // console.log("current elevation: ", this.MAP_REF?.queryTerrainElevation(coords));
-        let altitude = this.MAP_REF ? this.MAP_REF.queryTerrainElevation(coords) ?? 0 : 0;
+        let altitude = this.MAP_REF ? (this.MAP_REF.queryTerrainElevation(coords) ?? 0) : 0;
         if (altitude === 0) {
             altitude += 50;
         }
@@ -178,7 +178,7 @@ export class AnimationUtility {
 
         this.ROUTE_COORDINATES = routeCoordinates;
         this.PATH = turf.lineString(routeCoordinates);
-        this.PATH_DISTANCE = turf.lineDistance(this.PATH);
+        this.PATH_DISTANCE = turf.length(this.PATH);
         this.terrainDisplayed = terrainDisplayed;
 
         const bearing = this.calculateBearing(
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index 25b4587a5..fdd8a29d7 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -1,4 +1,6 @@
-@import '../../global/globalCssVariables.module.scss';
+@use 'sass:color';
+@use '../../global/globalCssVariables.module.scss' as global;
+
 .mapBox {
     width: 100%;
     height: 100%;
@@ -25,14 +27,6 @@
         gap: 5px;
         align-items: center;
         width: calc(100% - 40px);
-
-        // .editableText-container {
-        //     width: 100%;
-        //     font-size: 16px !important;
-        // }
-        // input {
-        //     width: 100%;
-        // }
     }
 
     .mapbox-settings-panel {
@@ -83,7 +77,7 @@
             width: 100%;
             padding: 10px;
             &:hover {
-                background-color: lighten(rgb(187, 187, 187), 10%);
+                background-color: color.adjust(rgb(187, 187, 187), $lightness: 10%);
             }
         }
     }
@@ -167,7 +161,7 @@
         pointer-events: all;
         z-index: 1; // so it appears on top of the document's title, if shown
 
-        box-shadow: $standard-box-shadow;
+        box-shadow: global.$standard-box-shadow;
         transition: 0.2s;
 
         &:hover {
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index f6908d5fd..f2160feb7 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .pdfBox,
 .pdfBox-interactive {
@@ -22,11 +22,11 @@
 
         // glr: This should really be the same component as text and PDFs
         .pdfBox-sidebarBtn {
-            background: $black;
+            background: global.$black;
             height: 25px;
             width: 25px;
             right: 5px;
-            color: $white;
+            color: global.$white;
             display: flex;
             position: absolute;
             align-items: center;
@@ -35,7 +35,7 @@
             pointer-events: all;
             z-index: 1; // so it appears on top of the document's title, if shown
 
-            box-shadow: $standard-box-shadow;
+            box-shadow: global.$standard-box-shadow;
             transition: 0.2s;
 
             &:hover {
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index 460155446..b5405f0fb 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .mini-viewer {
     cursor: grab;
@@ -22,7 +22,7 @@
         height: 100%;
         border-radius: inherit;
         opacity: 0.99; // hack!  overcomes some kind of Chrome weirdness where buttons (e.g., snapshot) disappear at some point as the video is resized larger
-        background: $dark-gray;
+        background: global.$dark-gray;
     }
 
     .inkingCanvas-paths-markers {
@@ -93,7 +93,7 @@
     align-items: center;
     justify-content: center;
     display: flex;
-    background-color: $dark-gray;
+    background-color: global.$dark-gray;
     color: white;
     border-radius: 100px;
     height: 40px;
@@ -128,13 +128,13 @@
         width: 25px;
         height: 25px;
         border-radius: 50%;
-        background: $dark-gray;
+        background: global.$dark-gray;
         display: flex;
         align-items: center;
         justify-content: center;
 
         &:hover {
-            background: $black;
+            background: global.$black;
         }
 
         svg {
@@ -157,7 +157,7 @@
     cursor: pointer;
 
     &:hover {
-        background-color: $medium-gray;
+        background-color: global.$medium-gray;
     }
 }
 
@@ -198,7 +198,7 @@ input[type='range']::-webkit-slider-runnable-track {
     height: 10px;
     cursor: pointer;
     box-shadow: 0;
-    background: $light-gray;
+    background: global.$light-gray;
     border-radius: 10px;
 }
 
@@ -208,7 +208,7 @@ input[type='range']::-webkit-slider-thumb {
     height: 12px;
     width: 12px;
     border-radius: 10px;
-    background: $medium-blue;
+    background: global.$medium-blue;
     cursor: pointer;
     -webkit-appearance: none;
     margin-top: -1px;
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index a1686adaf..05d5babf9 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .webBox {
     height: 100%;
@@ -120,7 +120,7 @@
         pointer-events: all;
         z-index: 1; // so it appears on top of the document's title, if shown
 
-        box-shadow: $standard-box-shadow;
+        box-shadow: global.$standard-box-shadow;
         transition: 0.2s;
 
         &:hover {
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
index 9cf760a12..3d27fa887 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
 
 $primary-color: #3f51b5;
@@ -68,7 +69,7 @@ $transition: all 0.2s ease-in-out;
             &:focus {
                 outline: none;
                 border-color: $primary-color;
-                box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
+                box-shadow: 0 0 0 2px color.adjust($primary-color, $alpha: -0.8);
             }
 
             &:disabled {
@@ -92,11 +93,11 @@ $transition: all 0.2s ease-in-out;
             transition: $transition;
 
             &:hover {
-                background-color: darken($primary-color, 10%);
+                background-color: color.adjust($primary-color, $lightness: -10%);
             }
 
             &:disabled {
-                background-color: lighten($primary-color, 20%);
+                background-color: color.adjust($primary-color, $lightness: 20%);
                 cursor: not-allowed;
             }
 
@@ -178,7 +179,7 @@ $transition: all 0.2s ease-in-out;
         margin-bottom: 16px;
 
         &:hover {
-            background-color: rgba($primary-color, 0.1);
+            background-color: color.adjust($primary-color, $alpha: -0.9);
         }
     }
 
@@ -220,7 +221,7 @@ $transition: all 0.2s ease-in-out;
             transition: $transition;
 
             &:hover {
-                background-color: rgba($primary-color, 0.2);
+                background-color: color.adjust($primary-color, $alpha: -0.8);
                 color: #fff;
             }
         }
diff --git a/src/client/views/nodes/formattedText/DashFieldView.scss b/src/client/views/nodes/formattedText/DashFieldView.scss
index d79df4272..78bbb520e 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.scss
+++ b/src/client/views/nodes/formattedText/DashFieldView.scss
@@ -1,4 +1,4 @@
-@import '../../global/globalCssVariables.module.scss';
+@use '../../global/globalCssVariables.module.scss' as global;
 
 .dashFieldView-active,
 .dashFieldView {
@@ -64,5 +64,5 @@
 }
 
 .ProseMirror-selectedNode {
-    outline: solid 1px $light-blue !important;
+    outline: solid 1px global.$light-blue !important;
 }
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 84859b94d..f9de4ab5a 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -1,4 +1,4 @@
-@import '../../global/globalCssVariables.module.scss';
+@use '../../global/globalCssVariables.module.scss' as global;
 
 .ProseMirror {
     width: 100%;
@@ -22,7 +22,7 @@
 
     &.h-left * {
         display: flex;
-        justify-content: flex-start; 
+        justify-content: flex-start;
     }
 
     &.h-right * {
@@ -32,7 +32,7 @@
 
     &.template * {
         ::-webkit-scrollbar-track {
-            background: none; 
+            background: none;
         }
     }
 
@@ -64,7 +64,7 @@ audiotag:hover {
     background: inherit;
     padding: 0;
     border-width: 0px;
-    border-color: $medium-gray;
+    border-color: global.$medium-gray;
     box-sizing: border-box;
     background-color: inherit;
     border-style: solid;
@@ -79,7 +79,6 @@ audiotag:hover {
     transform-origin: left top;
     top: 0;
     left: 0;
-    
 }
 
 .formattedTextBox-cont {
@@ -88,7 +87,7 @@ audiotag:hover {
     padding: 0;
     border-width: 0px;
     border-radius: inherit;
-    border-color: $medium-gray;
+    border-color: global.$medium-gray;
     box-sizing: border-box;
     background-color: inherit;
     border-style: solid;
@@ -147,13 +146,13 @@ audiotag:hover {
     font-size: 11px;
     border-radius: 3px;
     color: white;
-    background: $medium-gray;
+    background: global.$medium-gray;
     border-radius: 5px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: grabbing;
-    box-shadow: $standard-box-shadow;
+    box-shadow: global.$standard-box-shadow;
     // transition: 0.2s;
     opacity: 0.3;
     &:hover {
@@ -646,7 +645,7 @@ footnote::before {
 }
 
 @media only screen and (max-width: 1000px) {
-    @import '../../global/globalCssVariables.module.scss';
+    // @import '../../global/globalCssVariables.module.scss';
 
     .ProseMirror {
         width: 100%;
@@ -664,7 +663,7 @@ footnote::before {
         padding: 0;
         border-width: 0px;
         border-radius: inherit;
-        border-color: $medium-gray;
+        border-color: global.$medium-gray;
         box-sizing: border-box;
         background-color: inherit;
         border-style: solid;
@@ -1074,4 +1073,3 @@ footnote::before {
         }
     }
 }
-
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.scss b/src/client/views/nodes/formattedText/RichTextMenu.scss
index d6ed5ebee..fcc816447 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.scss
+++ b/src/client/views/nodes/formattedText/RichTextMenu.scss
@@ -1,4 +1,4 @@
-@import '../../global/globalCssVariables.module.scss';
+@use '../../global/globalCssVariables.module.scss' as global;
 
 .button-dropdown-wrapper {
     position: relative;
@@ -25,7 +25,7 @@
         top: 35px;
         left: 0;
         background-color: #323232;
-        color: $light-gray;
+        color: global.$light-gray;
         border: 1px solid #4d4d4d;
         border-radius: 0 6px 6px 6px;
         box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
diff --git a/src/client/views/nodes/imageEditor/ImageEditor.tsx b/src/client/views/nodes/imageEditor/ImageEditor.tsx
index 3c0ab3da5..657e689bb 100644
--- a/src/client/views/nodes/imageEditor/ImageEditor.tsx
+++ b/src/client/views/nodes/imageEditor/ImageEditor.tsx
@@ -610,7 +610,9 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
                             <Slider
                                 sx={{
                                     '& input[type="range"]': {
-                                        WebkitAppearance: 'slider-vertical',
+                                        writingMode: 'vertical-lr',
+                                        direction: 'rtl',
+                                        // WebkitAppearance: 'slider-vertical',
                                     },
                                 }}
                                 orientation="vertical"
@@ -626,7 +628,9 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
                             <Slider
                                 sx={{
                                     '& input[type="range"]': {
-                                        WebkitAppearance: 'slider-vertical',
+                                        writingMode: 'vertical-lr',
+                                        direction: 'rtl',
+                                        // WebkitAppearance: 'slider-vertical',
                                     },
                                 }}
                                 orientation="vertical"
diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss
index e34e1b380..e24b47bd1 100644
--- a/src/client/views/nodes/trails/PresBox.scss
+++ b/src/client/views/nodes/trails/PresBox.scss
@@ -1,4 +1,4 @@
-@import '../../global/globalCssVariables.module.scss';
+@use '../../global/globalCssVariables.module.scss' as global;
 
 .presBox-gpt-chat {
     padding: 16px;
@@ -203,8 +203,8 @@
         align-items: center;
         height: 30px;
         width: 100%;
-        color: $white;
-        background-color: $dark-gray;
+        color: global.$white;
+        background-color: global.$dark-gray;
 
         .toolbar-button {
             cursor: pointer;
@@ -218,7 +218,7 @@
         }
 
         .toolbar-button.active {
-            color: $light-blue;
+            color: global.$light-blue;
             background-color: white;
             border-radius: 100%;
         }
@@ -266,7 +266,7 @@
     }
 
     .toolbar-divider {
-        border-left: solid $medium-gray 0.5px;
+        border-left: solid global.$medium-gray 0.5px;
         height: 20px;
     }
 }
@@ -274,13 +274,13 @@
 .dropdown {
     font-size: 10;
     margin-left: 5px;
-    color: $medium-gray;
+    color: global.$medium-gray;
     transition: 0.5s ease;
 }
 
 .dropdown.active {
     transform: rotate(180deg);
-    color: $light-blue;
+    color: global.$light-blue;
     opacity: 0.7;
 }
 
@@ -340,7 +340,7 @@
 
     .ribbon-colorBox {
         cursor: pointer;
-        border: solid 1px $black;
+        border: solid 1px global.$black;
         display: flex;
         margin-left: 5px;
         margin-top: 5px;
@@ -387,7 +387,7 @@
         }
 
         .ribbon-propertyUpDownItem:hover {
-            background: $medium-gray;
+            background: global.$medium-gray;
             transform: scale(1.05);
         }
     }
@@ -413,7 +413,7 @@
     @media screen and (-webkit-min-device-pixel-ratio: 0) {
         .multiThumb-slider {
             display: grid;
-            background-color: $white;
+            background-color: global.$white;
             height: 10px;
             border-radius: 10px;
             overflow: hidden;
@@ -431,8 +431,8 @@
                 -webkit-appearance: none;
                 height: 10px;
                 cursor: ew-resize;
-                background: $medium-blue;
-                box-shadow: -100vw 0 0 100vw $white;
+                background: global.$medium-blue;
+                box-shadow: -100vw 0 0 100vw global.$white;
             }
 
             .toolbar-slider.end::-webkit-slider-thumb {
@@ -441,8 +441,8 @@
                 -webkit-appearance: none;
                 height: 10px;
                 cursor: ew-resize;
-                background: $medium-blue;
-                box-shadow: -100vw 0 0 100vw $light-blue;
+                background: global.$medium-blue;
+                box-shadow: -100vw 0 0 100vw global.$light-blue;
             }
         }
 
@@ -456,7 +456,7 @@
             height: 10px;
             border-radius: 10px;
             -webkit-appearance: none;
-            background-color: $white;
+            background-color: global.$white;
         }
 
         .toolbar-slider:focus {
@@ -476,8 +476,8 @@
             -webkit-appearance: none;
             height: 10px;
             cursor: ew-resize;
-            background: $medium-blue;
-            box-shadow: -100vw 0 0 100vw $light-blue;
+            background: global.$medium-blue;
+            box-shadow: -100vw 0 0 100vw global.$light-blue;
         }
 
         .presBox-checkbox {
@@ -493,7 +493,7 @@
             width: 15px;
             min-width: 15px;
             cursor: pointer;
-            background: $white;
+            background: global.$white;
         }
 
         .presBox-checkbox:focus {
@@ -501,11 +501,11 @@
         }
 
         .presBox-checkbox:hover {
-            background: $light-gray;
+            background: global.$light-gray;
         }
 
         .presBox-checkbox:checked {
-            background: $light-blue;
+            background: global.$light-blue;
         }
     }
 
@@ -554,9 +554,9 @@
         text-align: center;
         font-size: 16;
         width: 90%;
-        color: $black;
+        color: global.$black;
         transform: translate(5%, 0px);
-        border-bottom: solid 2px $medium-gray;
+        border-bottom: solid 2px global.$medium-gray;
     }
 
     .ribbon-textInput {
@@ -568,8 +568,8 @@
         justify-self: left;
         margin-top: 5px;
         padding-left: 10px;
-        background-color: $white;
-        border: solid 1px $black;
+        background-color: global.$white;
+        border: solid 1px global.$black;
         min-width: 80px;
         max-width: 200px;
         width: 100%;
@@ -590,7 +590,7 @@
     }
 
     .ribbon-frameSelector {
-        border: $black solid 1px;
+        border: global.$black solid 1px;
         width: 60px;
         height: 20px;
         margin-top: 5px;
@@ -607,12 +607,12 @@
             cursor: pointer;
             position: relative;
             height: 100%;
-            background: $white;
+            background: global.$white;
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;
-            color: $black;
+            color: global.$black;
         }
 
         .numKeyframe {
@@ -620,7 +620,7 @@
             font-size: 10;
             font-weight: 600;
             position: relative;
-            color: $black;
+            color: global.$black;
             display: flex;
             width: 100%;
             height: 100%;
@@ -662,7 +662,7 @@
             padding-left: 10;
             padding-right: 10;
             border-radius: 10px;
-            background-color: $medium-gray;
+            background-color: global.$medium-gray;
         }
 
         .ribbon-final-button:hover {
@@ -681,13 +681,13 @@
             align-items: center;
             margin-bottom: 5px;
             height: 25px;
-            color: $light-gray;
+            color: global.$light-gray;
             width: 100%;
             max-width: 120;
             padding-left: 10;
             padding-right: 10;
             border-radius: 10px;
-            background-color: $black;
+            background-color: global.$black;
         }
 
         .ribbon-final-button-hidden:hover {
@@ -698,15 +698,15 @@
         .ribbon-frameList {
             width: calc(100% - 5px);
             height: 50px;
-            background-color: $white;
-            border: 1px solid $medium-gray;
+            background-color: global.$white;
+            border: 1px solid global.$medium-gray;
             grid-template-rows: max-content;
 
             .frameList-header {
                 display: grid;
                 width: 100%;
                 height: 20px;
-                background-color: $medium-gray;
+                background-color: global.$medium-gray;
 
                 .frameList-headerButtons {
                     display: flex;
@@ -761,7 +761,7 @@
         font-size: 10.5;
         font-weight: 300;
         height: 20;
-        background-color: $medium-gray;
+        background-color: global.$medium-gray;
         color: white;
         display: flex;
         margin-top: 5px;
@@ -780,8 +780,8 @@
         transition: all 0.4s;
         font-weight: 400;
         opacity: 1;
-        color: $white;
-        background-color: $black;
+        color: global.$white;
+        background-color: global.$black;
     }
 
     .ribbon-toggle {
@@ -789,9 +789,9 @@
         font-size: 10.5;
         font-weight: 200;
         height: 20;
-        background-color: $white;
+        background-color: global.$white;
         display: inline-flex;
-        color: $black;
+        color: global.$black;
         border-radius: 5px;
         width: max-content;
         justify-content: center;
@@ -831,13 +831,13 @@
         position: relative;
         font-size: 13;
         padding-bottom: 10px;
-        border-bottom: solid 1px $dark-gray;
+        border-bottom: solid 1px global.$dark-gray;
 
         .presBox-dropdown:hover {
-            border: solid 1px $medium-blue;
+            border: solid 1px global.$medium-blue;
 
             .presBox-dropdownIcon {
-                color: $medium-blue;
+                color: global.$medium-blue;
             }
         }
 
@@ -846,12 +846,12 @@
             display: grid;
             grid-template-columns: auto 20%;
             position: relative;
-            border: solid 1px $black;
-            background-color: $light-gray;
+            border: solid 1px global.$black;
+            background-color: global.$light-gray;
             border-radius: 5px;
             font-size: 10;
             height: 25;
-            color: $black;
+            color: global.$black;
             padding-left: 5px;
             align-items: center;
             margin-top: 5px;
@@ -917,7 +917,7 @@
     height: 100px;
     padding-top: 5px;
     padding-bottom: 5px;
-    border: solid 1px $black;
+    border: solid 1px global.$black;
     // overflow: auto;
 
     ::-webkit-scrollbar {
@@ -967,7 +967,7 @@
     cursor: pointer;
     position: relative;
     text-align: center;
-    border-left: solid 1px $medium-gray;
+    border-left: solid 1px global.$medium-gray;
     width: 20%;
     height: 100%;
     display: flex;
@@ -998,7 +998,7 @@
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8);
     z-index: 200;
     background-color: white;
-    color: $black;
+    color: global.$black;
     position: absolute;
     overflow: hidden;
 }
@@ -1014,12 +1014,12 @@
     align-items: center;
     justify-content: center;
     transform: translate(0px, -1px);
-    background-color: $white;
+    background-color: global.$white;
     width: 40px;
     height: 15px;
     align-self: center;
     justify-self: center;
-    border: solid 1px $black;
+    border: solid 1px global.$black;
     border-top: 0px;
     border-bottom-right-radius: 7px;
     border-bottom-left-radius: 7px;
@@ -1028,15 +1028,15 @@
 .layout-container {
     padding: 5px;
     display: grid;
-    background-color: $white;
+    background-color: global.$white;
     grid-template-columns: repeat(auto-fit, minmax(90px, 100px));
     width: 100%;
-    border: solid 1px $black;
+    border: solid 1px global.$black;
     min-width: 100px;
     overflow: hidden;
 
     .layout:hover {
-        border: solid 2px $medium-blue;
+        border: solid 2px global.$medium-blue;
     }
 
     .layout {
@@ -1051,7 +1051,7 @@
         width: 90px;
         overflow: hidden;
         background-color: white;
-        border: solid $medium-gray 1px;
+        border: solid global.$medium-gray 1px;
         display: grid;
         grid-template-rows: auto;
         align-items: center;
@@ -1066,7 +1066,7 @@
             height: 13;
             font-size: 12;
             display: flex;
-            background-color: $white;
+            background-color: global.$white;
         }
 
         .subtitle {
@@ -1079,7 +1079,7 @@
             height: 13;
             font-size: 9;
             display: flex;
-            background-color: $white;
+            background-color: global.$white;
         }
 
         .content {
@@ -1092,7 +1092,7 @@
             height: 13;
             font-size: 10;
             display: flex;
-            background-color: $white;
+            background-color: global.$white;
             height: 33;
             text-align: left;
             font-size: 8px;
@@ -1103,7 +1103,7 @@
 .presBox-buttons {
     position: relative;
     width: 100%;
-    background: $medium-gray;
+    background: global.$medium-gray;
     min-height: 35px;
     padding-top: 5px;
     padding-bottom: 5px;
@@ -1137,8 +1137,8 @@
     }
 
     select {
-        background: $dark-gray;
-        color: $white;
+        background: global.$dark-gray;
+        color: global.$white;
     }
 
     .presBox-button {
@@ -1152,8 +1152,8 @@
         text-align: center;
         letter-spacing: normal;
         width: inherit;
-        background: $dark-gray;
-        color: $white;
+        background: global.$dark-gray;
+        color: global.$white;
     }
 
     .presBox-button.active {
@@ -1161,7 +1161,7 @@
     }
 
     .presBox-button.active:hover {
-        background-color: $medium-blue;
+        background-color: global.$medium-blue;
     }
 
     .presBox-button.edit {
@@ -1238,8 +1238,8 @@
             font-size: 100;
             display: flex;
             align-items: center;
-            background: $dark-gray;
-            color: $white;
+            background: global.$dark-gray;
+            color: global.$white;
         }
 
         .presBox-viewPicker {
@@ -1273,7 +1273,7 @@
     left: 0;
     opacity: 0.5;
     transition: all 0.4s;
-    color: $white;
+    color: global.$white;
     width: 100%;
     height: 100%;
 }
@@ -1283,8 +1283,8 @@
 }
 
 .presPanelOverlay {
-    background-color: $dark-gray;
-    color: $white;
+    background-color: global.$dark-gray;
+    color: global.$white;
     border-radius: 5px;
     grid-template-rows: 100%;
     height: 100%;
@@ -1316,7 +1316,7 @@
     .presPanel-divider {
         width: 0.5px;
         height: 80%;
-        border-right: solid 1px $medium-gray;
+        border-right: solid 1px global.$medium-gray;
     }
 
     .presPanel-button-frame {
@@ -1348,12 +1348,12 @@
     }
 
     .presPanel-button:hover {
-        background-color: $medium-gray;
+        background-color: global.$medium-gray;
         transform: scale(1.2);
     }
 
     .presPanel-button-text:hover {
-        background-color: $medium-gray;
+        background-color: global.$medium-gray;
     }
 }
 
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 94e64b952..030d56f0c 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .searchBox-container {
     width: 100%;
@@ -22,7 +22,7 @@
         top: 0px;
         position: sticky;
         overflow-y: scroll;
-        border-bottom: $standard-border;
+        border-bottom: global.$standard-border;
 
         .searchBox-type {
             display: block;
@@ -48,20 +48,20 @@
 
     .section-header {
         .section-title {
-            font-size: $body-text;
+            font-size: global.$body-text;
             font-weight: 600;
         }
 
         .section-subtitle {
             display: flex;
-            color: $light-gray;
+            color: global.$light-gray;
         }
 
         padding: 5px 10px;
         display: flex;
         flex-direction: column;
         gap: 3px;
-        background: $medium-blue;
+        background: global.$medium-blue;
         color: white;
     }
 
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index 20245104e..35a3da312 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -1,4 +1,5 @@
-@import '../global/globalCssVariables.module.scss';
+@use 'sass:color';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .topbar-container {
     flex-direction: column;
@@ -6,13 +7,13 @@
     line-height: 1;
     overflow-y: auto;
     overflow-x: visible;
-    background: $dark-gray;
+    background: global.$dark-gray;
     overflow: visible;
     z-index: 1000;
     align-items: center;
-    height: $topbar-height;
-    background-color: $dark-gray;
-    border-bottom: $standard-border;
+    height: global.$topbar-height;
+    background-color: global.$dark-gray;
+    border-bottom: global.$standard-border;
     padding: 0px 10px;
     cursor: default;
     display: flex;
@@ -34,7 +35,7 @@
     }
 
     .topbar-button-text {
-        color: $white;
+        color: global.$white;
         padding: 10px;
         size: 15;
 
@@ -54,16 +55,16 @@
         align-self: center;
         padding: 5px;
         transition: linear 0.2s;
-        color: $white;
+        color: global.$white;
 
         &:hover {
-            background-color: darken($color: $light-gray, $amount: 20);
+            background-color: color.adjust(global.$light-gray, $lightness: -20%);
             font-weight: 500;
         }
     }
 
     .topbar-title {
-        color: $white;
+        color: global.$white;
         font-size: 17;
         font-weight: 500;
     }
@@ -119,7 +120,7 @@
         }
 
         .topBar-icon:hover {
-            background-color: $close-red;
+            background-color: global.$close-red;
         }
 
         .topbar-lozenge-user,
@@ -180,7 +181,7 @@
         &.topbar-input {
             margin: 5px;
             border-radius: 20px;
-            border: $dark-gray;
+            border: global.$dark-gray;
             display: block;
             width: 130px;
             -webkit-transition: width 0.4s;
@@ -212,8 +213,8 @@
         }
 
         &.topbar-close {
-            color: $white;
-            max-height: $topbar-height;
+            color: global.$white;
+            max-height: global.$topbar-height;
         }
     }
 }
@@ -229,7 +230,7 @@
 
     .no-result {
         width: 500px;
-        background: $light-gray;
+        background: global.$light-gray;
         padding: 10px;
         height: 50px;
         text-transform: uppercase;