diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index c0d64add5..ceb1d8760 100644
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -19,6 +19,8 @@ jobs:
       - name: Check if version has been updated
         id: version-check
         uses: EndBug/version-check@v2
+        with:
+          diff-search: true
       - name: Publish new version
         if: steps.version-check.outputs.changed == 'true'
         run: |
diff --git a/package-lock.json b/package-lock.json
index 265cbf0fc..3e70fd2e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,7 +38,7 @@
         "react-imask": "^6.5.0-alpha.0",
         "react-plotly.js": "^2.5.1",
         "sass": "^1.80.6",
-        "sass-loader": "^13.2.0",
+        "sass-loader": "^16.0.3",
         "spark-md5": "^3.0.2",
         "typescript": "~5.5.4",
         "uglify-js": "3.9.2",
@@ -47,7 +47,7 @@
       },
       "devDependencies": {
         "@isrd-isi-edu/ermrest-data-utils": "^0.0.7",
-        "@playwright/test": "*",
+        "@playwright/test": "latest",
         "@typescript-eslint/eslint-plugin": "~7.18.0",
         "@typescript-eslint/parser": "~7.18.0",
         "chance": "x",
@@ -7620,13 +7620,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/klona": {
-      "version": "2.0.5",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.23",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
@@ -9361,28 +9354,28 @@
       }
     },
     "node_modules/sass-loader": {
-      "version": "13.2.0",
-      "license": "MIT",
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.3.tgz",
+      "integrity": "sha512-gosNorT1RCkuCMyihv6FBRR7BMV06oKRAs+l4UMp1mlcVg9rWN6KMmUj3igjQwmYys4mDP3etEYJgiHRbgHCHA==",
       "dependencies": {
-        "klona": "^2.0.4",
         "neo-async": "^2.6.2"
       },
       "engines": {
-        "node": ">= 14.15.0"
+        "node": ">= 18.12.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/webpack"
       },
       "peerDependencies": {
-        "fibers": ">= 3.1.0",
-        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "@rspack/core": "0.x || 1.x",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
         "sass": "^1.3.0",
         "sass-embedded": "*",
         "webpack": "^5.0.0"
       },
       "peerDependenciesMeta": {
-        "fibers": {
+        "@rspack/core": {
           "optional": true
         },
         "node-sass": {
@@ -9393,6 +9386,9 @@
         },
         "sass-embedded": {
           "optional": true
+        },
+        "webpack": {
+          "optional": true
         }
       }
     },
diff --git a/package.json b/package.json
index 11845a329..e7eaed0ae 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "react-imask": "^6.5.0-alpha.0",
     "react-plotly.js": "^2.5.1",
     "sass": "^1.80.6",
-    "sass-loader": "^13.2.0",
+    "sass-loader": "^16.0.3",
     "spark-md5": "^3.0.2",
     "typescript": "~5.5.4",
     "uglify-js": "3.9.2",
diff --git a/src/assets/scss/_alerts.scss b/src/assets/scss/_alerts.scss
index 9901c7cf8..6a86ae676 100644
--- a/src/assets/scss/_alerts.scss
+++ b/src/assets/scss/_alerts.scss
@@ -12,8 +12,8 @@
 
   // by default we're using red color for code blocks which can be misleading in a success alert
   .alert-success code {
-    color: map-get(variables.$color-map, 'code-block-success');
-    background-color: map-get(variables.$color-map, 'code-block-background-alt');
+    color: map.get(variables.$color-map, 'code-block-success');
+    background-color: map.get(variables.$color-map, 'code-block-background-alt');
   }
 }
 
diff --git a/src/assets/scss/_button-group.scss b/src/assets/scss/_button-group.scss
index 744f329b3..b409eeacf 100644
--- a/src/assets/scss/_button-group.scss
+++ b/src/assets/scss/_button-group.scss
@@ -19,7 +19,7 @@
     &:active,
     &:focus,
     &:hover {
-      z-index: map-get(variables.$z-index-map, 'button-active');
+      z-index: map.get(variables.$z-index-map, 'button-active');
     }
   }
 }
diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss
index 7434d5463..e142a0333 100644
--- a/src/assets/scss/_buttons.scss
+++ b/src/assets/scss/_buttons.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use 'sass:map';
 @use 'variables';
 @use 'helpers';
@@ -53,37 +54,37 @@
   &.chaise-btn.chaise-btn-secondary[disabled],
   &.chaise-btn.chaise-btn-primary.disabled,
   &.chaise-btn.chaise-btn-secondary.disabled {
-    color: map-get(variables.$color-map, 'disabled');
-    background-color: map-get(variables.$color-map, 'disabled-background');
-    border-color: map-get(variables.$color-map, 'disabled-background');
+    color: map.get(variables.$color-map, 'disabled');
+    background-color: map.get(variables.$color-map, 'disabled-background');
+    border-color: map.get(variables.$color-map, 'disabled-background');
   }
 
   &.chaise-btn-tertiary {
-    color: map-get(variables.$color-map, 'primary');
+    color: map.get(variables.$color-map, 'primary');
     border: none;
     background: transparent;
 
     &[disabled],
     &.disabled {
-      color: map-get(variables.$color-map, 'disabled');
+      color: map.get(variables.$color-map, 'disabled');
     }
 
     // the link color is more prominent than our button/control color,
     // we should use this class if we want to make the button to be as prominent as links
     &.chaise-btn-link:not([disabled]):not(.disabled) {
-      color: map-get(variables.$color-map, 'link');
+      color: map.get(variables.$color-map, 'link');
     }
   }
 
   &.chaise-btn-default {
-    color: map-get(variables.$color-map, 'black');
-    border-color: map-get(variables.$color-map, 'border');
+    color: map.get(variables.$color-map, 'black');
+    border-color: map.get(variables.$color-map, 'border');
   }
 
   &.chaise-btn-danger {
-    color: map-get(variables.$color-map, 'white');
-    background-color: map-get(variables.$color-map, 'danger');
-    border-color: darken(map-get(variables.$color-map, 'danger'), 10%);
+    color: map.get(variables.$color-map, 'white');
+    background-color: map.get(variables.$color-map, 'danger');
+    border-color: color.adjust(map.get(variables.$color-map, 'danger'), $lightness: -10%);
   }
 
   &.chaise-download-btn {
@@ -99,7 +100,7 @@
   // this is currently designed mostly for 
   &.chaise-btn-with-indicator:before {
     content: '';
-    background-color: map-get(variables.$color-map, 'primary');
+    background-color: map.get(variables.$color-map, 'primary');
     position: absolute;
     top: -1px;
     right: -1px;
diff --git a/src/assets/scss/_dropdown.scss b/src/assets/scss/_dropdown.scss
index a34814c6d..12b49a5ef 100644
--- a/src/assets/scss/_dropdown.scss
+++ b/src/assets/scss/_dropdown.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use 'sass:map';
 @use 'variables';
 @use 'helpers';
@@ -17,7 +18,7 @@
     padding: 3px 15px 3px 15px;
     cursor: default;
     font-size: variables.$font-size;
-    color: map-get(variables.$color-map, 'black');
+    color: map.get(variables.$color-map, 'black');
     font-weight: 600;
   }
 
@@ -44,7 +45,7 @@
     border-style: solid;
     border-width: 6px 0 6px 6px;
     /* was 5px 0 5px 5px */
-    border-left-color: map-get(variables.$color-map, 'navbar-dropdown-submenu-icon');
+    border-left-color: map.get(variables.$color-map, 'navbar-dropdown-submenu-icon');
     // to center
     margin: auto;
     margin-right: -15px;
@@ -55,7 +56,7 @@
 
   .dropdown-submenu:hover > a:after,
   .dropdown-submenu:hover > div > div > a:after {
-    border-left-color: map-get(variables.$color-map, 'navbar-dropdown-submenu');
+    border-left-color: map.get(variables.$color-map, 'navbar-dropdown-submenu');
   }
 
   .dropdown-submenu.pull-left {
@@ -133,7 +134,7 @@
     cursor: pointer;
     display: flex;
     justify-content: space-between;
-    color: map-get(variables.$color-map, 'black');
+    color: map.get(variables.$color-map, 'black');
     margin-bottom: 2px;
     padding: 3px 15px 3px 15px;
     line-height: 1.4;
@@ -147,8 +148,8 @@
 
     &:focus,
     &:hover {
-      color: lighten(map-get(variables.$color-map, 'black'), 10%);
-      background-color: darken(map-get(variables.$color-map, 'white'), 10%);
+      color: color.adjust(map.get(variables.$color-map, 'black'), $lightness: 10%);
+      background-color: color.adjust(map.get(variables.$color-map, 'white'), $lightness: -10%);
     }
   }
 
@@ -182,11 +183,11 @@
   .disable-link, .disabled {
     pointer-events: none !important;
     cursor: default !important;
-    color: map-get(variables.$color-map, 'disabled') !important;
+    color: map.get(variables.$color-map, 'disabled') !important;
 
     // the arrow icon
     &:after {
-      border-left-color: map-get(variables.$color-map, 'disabled') !important;
+      border-left-color: map.get(variables.$color-map, 'disabled') !important;
     }
   }
 }
diff --git a/src/assets/scss/_faceting.scss b/src/assets/scss/_faceting.scss
index 3b37793cf..bf6e473d5 100644
--- a/src/assets/scss/_faceting.scss
+++ b/src/assets/scss/_faceting.scss
@@ -42,7 +42,7 @@
     // each facet panel
     .facet-panel {
       border-radius: 0;
-      border: 1px solid map-get(variables.$color-map, 'border');
+      border: 1px solid map.get(variables.$color-map, 'border');
 
       // active style
       &.active,
@@ -80,8 +80,8 @@
         flex-direction: row-reverse;
         justify-content: flex-end;
 
-        background-color: map-get(variables.$color-map, 'table-header-background');
-        color: map-get(variables.$color-map, 'black');
+        background-color: map.get(variables.$color-map, 'table-header-background');
+        color: map.get(variables.$color-map, 'black');
 
         // Overriding accordian-button css to align right angle bracket icon to left
         &::after {
diff --git a/src/assets/scss/_input-switch.scss b/src/assets/scss/_input-switch.scss
index c3c89bc90..c50457718 100644
--- a/src/assets/scss/_input-switch.scss
+++ b/src/assets/scss/_input-switch.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 @use 'variables';
 
 
@@ -48,7 +49,7 @@
 
 .input-switch-longtext {
   .md-editor {
-    border: 1px solid map-get(variables.$color-map, 'border');
+    border: 1px solid map.get(variables.$color-map, 'border');
     border-radius: 4px;
 
     .md-header {
@@ -109,7 +110,7 @@
   }
 
   .hex-sign {
-    color: map-get(variables.$color-map, 'placeholder');
+    color: map.get(variables.$color-map, 'placeholder');
   }
 
   .chaise-color-picker-preview {
@@ -187,15 +188,15 @@
       left: 0;
       height: 100%;
       width: 100%;
-      z-index: map-get(variables.$z-index-map, 'recordedit-foreignkey-input-spinner-backdrop');
-      background: map-get(variables.$color-map, 'disabled-background');
+      z-index: map.get(variables.$z-index-map, 'recordedit-foreignkey-input-spinner-backdrop');
+      background: map.get(variables.$color-map, 'disabled-background');
       opacity: 0.55;
     }
 
     .spinner-border-sm {
       top: 8px;
       position: absolute;
-      z-index: map-get(variables.$z-index-map, 'recordedit-column-cell-spinner');
+      z-index: map.get(variables.$z-index-map, 'recordedit-column-cell-spinner');
     }
   }
 
@@ -223,7 +224,7 @@
     */
     >.chaise-input-group:not([aria-disabled="true"]),
     .dropdown-menu {
-      border: 2px solid map-get(variables.$color-map, 'primary');
+      border: 2px solid map.get(variables.$color-map, 'primary');
       border-radius: 6px;
     }
   }
@@ -275,7 +276,7 @@
           // bootstrap stylesheets have :hover defined before :disabled so disabled always takes precedence
           // redefine with the same hover color to override bootstrap order
           &:hover {
-            background-color: map-get(variables.$color-map, 'recordedit-dropdown-hover');
+            background-color: map.get(variables.$color-map, 'recordedit-dropdown-hover');
           }
         }
 
@@ -341,11 +342,11 @@
 
 .input-switch-error {
   &.input-switch-error-danger {
-    color: map-get(variables.$color-map, 'input-error-message-danger');
+    color: map.get(variables.$color-map, 'input-error-message-danger');
   }
 
   &.input-switch-error-warning {
-    color: map-get(variables.$color-map, 'input-error-message-warning');
+    color: map.get(variables.$color-map, 'input-error-message-warning');
   }
 }
 
diff --git a/src/assets/scss/_inputs.scss b/src/assets/scss/_inputs.scss
index 7bc048df9..91a57ec49 100644
--- a/src/assets/scss/_inputs.scss
+++ b/src/assets/scss/_inputs.scss
@@ -69,11 +69,11 @@
     // as our inputs.
     .chaise-btn {
       position: relative;
-      z-index: map-get(variables.$z-index-map, 'input-group-append-btn'); // should be above input even if input is focused
+      z-index: map.get(variables.$z-index-map, 'input-group-append-btn'); // should be above input even if input is focused
       @include helpers.border-left-radius(0);
 
       &:focus {
-        z-index: map-get(variables.$z-index-map, 'input-group-append-btn-focus');
+        z-index: map.get(variables.$z-index-map, 'input-group-append-btn-focus');
       }
     }
 
@@ -127,11 +127,11 @@
   padding: variables.$btn-padding-y variables.$btn-padding-x;
   margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
   font-size: 1rem;
-  color: map-get(variables.$color-map, 'black');
+  color: map.get(variables.$color-map, 'black');
   text-align: center;
   white-space: nowrap;
-  background-color: map-get(variables.$color-map, 'table-striped-background');
-  border: variables.$btn-border-width solid map-get(variables.$color-map, 'border');
+  background-color: map.get(variables.$color-map, 'table-striped-background');
+  border: variables.$btn-border-width solid map.get(variables.$color-map, 'border');
   @include helpers.border-radius(variables.$btn-border-radius);
 
   // dt meaning "datetime"
@@ -175,9 +175,9 @@
   height: variables.$btn-height;
   min-height: variables.$btn-height;
   padding: variables.$btn-padding-y variables.$btn-padding-x;
-  background-color: map-get(variables.$color-map, 'white');
+  background-color: map.get(variables.$color-map, 'white');
   background-clip: padding-box;
-  border: variables.$btn-border-width solid map-get(variables.$color-map, 'border');
+  border: variables.$btn-border-width solid map.get(variables.$color-map, 'border');
 
   @include helpers.border-radius(variables.$btn-border-radius);
 
@@ -214,7 +214,7 @@
   // Placeholder
   &::placeholder,
   input::placeholder {
-    color: map-get(variables.$color-map, 'placeholder');
+    color: map.get(variables.$color-map, 'placeholder');
     // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
     opacity: 1;
   }
@@ -229,9 +229,9 @@
   &[readonly],
   &[readonly][disabled],
   &.input-disabled {
-    background-color: map-get(variables.$color-map, 'disabled-background');
-    border-color: map-get(variables.$color-map, 'disabled-background');
-    color: map-get(variables.$color-map, 'disabled');
+    background-color: map.get(variables.$color-map, 'disabled-background');
+    border-color: map.get(variables.$color-map, 'disabled-background');
+    color: map.get(variables.$color-map, 'disabled');
     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
     opacity: 1;
     cursor: not-allowed;
@@ -247,7 +247,7 @@
     }
 
     .chaise-input-placeholder {
-      color: map-get(variables.$color-map, 'disabled');
+      color: map.get(variables.$color-map, 'disabled');
     }
   }
 
@@ -258,8 +258,8 @@
   // form-control:focus changes the z-index of the form control from 2 to 3.
   // use z index 5 so it isn't hidden when focused
   .chaise-input-control-feedback {
-    z-index: map-get(variables.$z-index-map, 'input-control-feedback');
-    color: map-get(variables.$color-map, 'black');
+    z-index: map.get(variables.$z-index-map, 'input-control-feedback');
+    color: map.get(variables.$color-map, 'black');
     position: absolute;
     right: 0;
     top: 5px;
@@ -276,7 +276,7 @@
   // NOTE: cannot be used for `input` tags or placeholders with HTML
   div[contenteditable='false']:empty:not(:focus):before {
     content: attr(data-placeholder); // required data-placeholder being present
-    color: map-get(variables.$color-map, 'placeholder');
+    color: map.get(variables.$color-map, 'placeholder');
   }
 
   // adds a grey placeholder into input fields (inputs) that are also editable
@@ -285,7 +285,7 @@
     position: absolute;
     top: variables.$btn-padding-y;
     left: variables.$btn-padding-x;
-    color: map-get(variables.$color-map, 'placeholder');
+    color: map.get(variables.$color-map, 'placeholder');
 
     // show ellipsis if there aren't enough space:
     width: calc(100% - 10px); // we have to account for the padding-left of .button-text
diff --git a/src/assets/scss/_markdown-container.scss b/src/assets/scss/_markdown-container.scss
index feb8add99..6b45fea6b 100644
--- a/src/assets/scss/_markdown-container.scss
+++ b/src/assets/scss/_markdown-container.scss
@@ -89,12 +89,12 @@
     height: 11px;
     width: 11px;
     border-radius: 3px;
-    border: 1px solid map-get(variables.$color-map, 'black');
+    border: 1px solid map.get(variables.$color-map, 'black');
   }
 
   .vocab {
-    color: map-get(variables.$color-map, 'vocab');
-    background-color: map-get(variables.$color-map, 'vocab-background');
+    color: map.get(variables.$color-map, 'vocab');
+    background-color: map.get(variables.$color-map, 'vocab-background');
     padding: 7px;
     border-radius: 10px;
     display: inline-block;
@@ -727,7 +727,7 @@
 
 .markdown-container:checked + .radio-label {
   position: relative;
-  z-index: map-get(variables.$z-index-map, 'markdown-container-radio-label');
+  z-index: map.get(variables.$z-index-map, 'markdown-container-radio-label');
   border-color: #0366d6;
 }
 
diff --git a/src/assets/scss/_modal.scss b/src/assets/scss/_modal.scss
index c33b5b9d8..03a5001db 100644
--- a/src/assets/scss/_modal.scss
+++ b/src/assets/scss/_modal.scss
@@ -357,12 +357,12 @@ div.modal-title {
 
         .entity-key-column .entity-key {
           border: none;
-          border-top: variables.$chaise-RE-border-width solid map-get(variables.$color-map, 'recordedit-border');
+          border-top: variables.$chaise-RE-border-width solid map.get(variables.$color-map, 'recordedit-border');
         }
 
         .recordedit-form .entity-value {
           border: none;
-          border-top: variables.$chaise-RE-border-width solid map-get(variables.$color-map, 'recordedit-border');
+          border-top: variables.$chaise-RE-border-width solid map.get(variables.$color-map, 'recordedit-border');
         }
       }
     }
@@ -380,58 +380,58 @@ div.modal-title {
 /*************** z-index for modal backdrops ***************/
 div.modal-backdrop {
   // override the default bootstrap value
-  z-index: map-get(variables.$z-index-map, 'modal-backdrop');
+  z-index: map.get(variables.$z-index-map, 'modal-backdrop');
 
   &.modal-error-backdrop {
-    z-index: map-get(variables.$z-index-map, 'modal-error-backdrop');
+    z-index: map.get(variables.$z-index-map, 'modal-error-backdrop');
   }
 
   &.export-progress-backdrop {
-    z-index: map-get(variables.$z-index-map, 'export-progress-backdrop');
+    z-index: map.get(variables.$z-index-map, 'export-progress-backdrop');
   }
 
   &.modal-login-instruction-backdrop {
-    z-index: map-get(variables.$z-index-map, 'modal-login-instruction-backdrop');
+    z-index: map.get(variables.$z-index-map, 'modal-login-instruction-backdrop');
   }
 
   // allows modal on modal (only two levels)
   ~ .modal-backdrop {
-    z-index: map-get(variables.$z-index-map, 'modal-backdrop-on-modal');
+    z-index: map.get(variables.$z-index-map, 'modal-backdrop-on-modal');
   }
 }
 
 /*************** z-index for modals ***************/
 div.modal {
   // override the default bootstrap value
-  z-index: map-get(variables.$z-index-map, 'modal');
+  z-index: map.get(variables.$z-index-map, 'modal');
 
   &.modal-error {
-    z-index: map-get(variables.$z-index-map, 'modal-error');
+    z-index: map.get(variables.$z-index-map, 'modal-error');
   }
 
   &.export-progress {
-    z-index: map-get(variables.$z-index-map, 'export-progress');
+    z-index: map.get(variables.$z-index-map, 'export-progress');
   }
 
   &.modal-login-instruction {
-    z-index: map-get(variables.$z-index-map, 'modal-login-instruction');
+    z-index: map.get(variables.$z-index-map, 'modal-login-instruction');
   }
 
   // make sure errors show up properly on top of search-popup
   &.search-popup {
     ~ .modal-error-backdrop,
     ~ .modal-login-instruction-backdrop {
-      z-index: map-get(variables.$z-index-map, 'modal-error-backdrop-on-search-popup');
+      z-index: map.get(variables.$z-index-map, 'modal-error-backdrop-on-search-popup');
     }
 
     ~ .modal-error,
     ~ .modal-login-instruction {
-      z-index: map-get(variables.$z-index-map, 'modal-error-on-search-popup');
+      z-index: map.get(variables.$z-index-map, 'modal-error-on-search-popup');
     }
   }
 
   // allows modal on modal (only two levels)
   ~ .modal {
-    z-index: map-get(variables.$z-index-map, 'modal-on-modal');
+    z-index: map.get(variables.$z-index-map, 'modal-on-modal');
   }
 }
diff --git a/src/assets/scss/_navbar.scss b/src/assets/scss/_navbar.scss
index 515d90d06..81c2122c1 100644
--- a/src/assets/scss/_navbar.scss
+++ b/src/assets/scss/_navbar.scss
@@ -14,36 +14,36 @@ body>.container {
 
 // navheader includes navbar as well as banners
 #navheader {
-  z-index: map-get(variables.$z-index-map, 'navbar');
+  z-index: map.get(variables.$z-index-map, 'navbar');
   position: relative; // for z-index to work, position must be non-static
 }
 
 .navbar-inverse {
-  background-color: map-get(variables.$color-map, 'navbar-inverse');
-  border-color: map-get(variables.$color-map, 'navbar-inverse');
+  background-color: map.get(variables.$color-map, 'navbar-inverse');
+  border-color: map.get(variables.$color-map, 'navbar-inverse');
 }
 
 .navbar-inverse .navbar-nav>div>a {
-  color: map-get(variables.$color-map, 'navbar-inverse-menu-link');
+  color: map.get(variables.$color-map, 'navbar-inverse-menu-link');
 }
 
 .navbar-inverse .navbar-nav>.show>a {
   // use #333 for this since navbar is #000 (even darker)
-  background-color: map-get(variables.$color-map, 'black');
+  background-color: map.get(variables.$color-map, 'black');
 }
 
 // matches links at top level and dropdowns at top level
 .navbar-inverse .navbar-nav>a:hover,
 .navbar-inverse .navbar-nav>div>a:hover {
-  background-color: map-get(variables.$color-map, 'navbar-dropdown-submenu-icon');
+  background-color: map.get(variables.$color-map, 'navbar-dropdown-submenu-icon');
 }
 
 .navbar-inverse .navbar-nav.navbar-right>div>a {
-  color: map-get(variables.$color-map, 'navbar-inverse-link');
+  color: map.get(variables.$color-map, 'navbar-inverse-link');
 }
 
 .navbar-inverse .navbar-brand {
-  color: map-get(variables.$color-map, 'navbar-inverse-link');
+  color: map.get(variables.$color-map, 'navbar-inverse-link');
   float: left;
   height: 50px;
   padding: 15px 15px;
@@ -54,7 +54,7 @@ body>.container {
 
 #live-btn {
   margin-right: 0px; // offset marging-right: -15px from navbar-right
-  color: map-get(variables.$color-map, 'navbar-inverse-link');
+  color: map.get(variables.$color-map, 'navbar-inverse-link');
   padding: 15px;
   text-decoration: none;
   &:hover {
@@ -71,7 +71,7 @@ body>.container {
 
 
 .navbar-inverse .navbar-nav.navbar-right>div>a:hover {
-  color: map-get(variables.$color-map, 'navbar-inverse-menu-link-hover');
+  color: map.get(variables.$color-map, 'navbar-inverse-menu-link-hover');
 }
 
 .navbar-inverse .navbar-collapse,
@@ -104,13 +104,13 @@ body>.container {
 
   .chaise-input-control-sm {
     width: 100px;
-    border-color: map-get(variables.$color-map, 'black');
+    border-color: map.get(variables.$color-map, 'black');
     border-radius: 4px 0px 0px 4px;
   }
 }
 
 #rid-search-input {
-  background-color: map-get(variables.$color-map, 'table-striped-background');
+  background-color: map.get(variables.$color-map, 'table-striped-background');
   overflow-x: auto;
 }
 
@@ -149,13 +149,13 @@ body>.container {
   display: block;
   padding: 15px 15px !important; // so the property overrides a more specific rule from bootstrap
   line-height: 20px;
-  color: map-get(variables.$color-map, 'navbar-inverse-menu-link');
+  color: map.get(variables.$color-map, 'navbar-inverse-menu-link');
 }
 
 .chaise-navbar-banner-container {
   margin-bottom: 0;
   padding: 10px 20px 10px 20px;
-  background-color: map-get(variables.$color-map, 'navbar-banner');
+  background-color: map.get(variables.$color-map, 'navbar-banner');
   text-align: center;
 
   // use the normal font instead of light and make it bigger
@@ -179,7 +179,7 @@ body>.container {
     font-size: 21px;
     font-weight: 700;
     line-height: 1;
-    color: map-get(variables.$color-map, 'black');
+    color: map.get(variables.$color-map, 'black');
     text-shadow: 0 1px 0 #fff;
     filter: alpha(opacity=20);
     opacity: .2;
@@ -230,7 +230,7 @@ nav.navbar {
   // Horizontal navbar
   @media (min-width: 768px) {
     .child-opened {
-      background-color: map-get(variables.$color-map, 'table-header-background');
+      background-color: map.get(variables.$color-map, 'table-header-background');
     }
 
     .navbar-header {
@@ -270,28 +270,28 @@ nav.navbar {
 
     .dropdown-menu>a,
     .dropdown-menu>div>a {
-      color: map-get(variables.$color-map, 'dropdown-menu-anchor');
+      color: map.get(variables.$color-map, 'dropdown-menu-anchor');
 
       &:focus,
       &:hover {
-        color: map-get(variables.$color-map, 'white');
+        color: map.get(variables.$color-map, 'white');
       }
     }
 
     // Menu Toggler css in smaller screens
     .navbar-toggler {
-      border: 1px solid map-get(variables.$color-map, 'white');
+      border: 1px solid map.get(variables.$color-map, 'white');
       padding: 8px;
       margin-right: 16px;
-      color: map-get(variables.$color-map, 'white');
+      color: map.get(variables.$color-map, 'white');
 
       &:hover {
-        background-color: map-get(variables.$color-map, 'black');
+        background-color: map.get(variables.$color-map, 'black');
       }
 
       &:focus {
         box-shadow: none;
-        background-color: map-get(variables.$color-map, 'black');
+        background-color: map.get(variables.$color-map, 'black');
       }
     }
   }
@@ -304,7 +304,7 @@ nav.navbar {
     }
 
     div.dropdown-submenu.show {
-      background-color: map-get(variables.$color-map, 'navbar-collapsed-submenu');
+      background-color: map.get(variables.$color-map, 'navbar-collapsed-submenu');
     }
   }
 }
diff --git a/src/assets/scss/_range-input.scss b/src/assets/scss/_range-input.scss
index 20a5eb730..d1e4cad90 100644
--- a/src/assets/scss/_range-input.scss
+++ b/src/assets/scss/_range-input.scss
@@ -57,5 +57,5 @@
 }
 
 .range-input-error {
-    color: map-get(variables.$color-map, 'danger');
+    color: map.get(variables.$color-map, 'danger');
 }
diff --git a/src/assets/scss/_range-picker.scss b/src/assets/scss/_range-picker.scss
index 2340cf483..f8c35053a 100644
--- a/src/assets/scss/_range-picker.scss
+++ b/src/assets/scss/_range-picker.scss
@@ -4,7 +4,7 @@
 // range picker directive
 .range-picker {
   hr {
-    color: map-get(variables.$color-map, 'border');
+    color: map.get(variables.$color-map, 'border');
     width: 1px;
   }
 
diff --git a/src/assets/scss/_record-main-section.scss b/src/assets/scss/_record-main-section.scss
index b94d168c4..7aac997df 100644
--- a/src/assets/scss/_record-main-section.scss
+++ b/src/assets/scss/_record-main-section.scss
@@ -20,17 +20,17 @@
 
       // reduce the spacing of table cells (overrides bootstrap default)
       > tbody > tr.row {
-        border-top: map-get(variables.$record-spacing-map, 'record-table-cell-border-width') solid map-get(variables.$color-map, 'border');
+        border-top: map.get(variables.$record-spacing-map, 'record-table-cell-border-width') solid map.get(variables.$color-map, 'border');
         margin: 0px;
 
         > td {
           border-top: 0;
-          padding: map-get(variables.$record-spacing-map, 'record-table-cell-padding');
+          padding: map.get(variables.$record-spacing-map, 'record-table-cell-padding');
 
           // make sure the inline related content are aligned with the related content
           // so Explore button in inine related, table in inline related, Explore
           // button in related, and table in related are all aligned.
-          padding-right: map-get(variables.$chaise-accordion-spacing-map, 'header-padding');
+          padding-right: map.get(variables.$chaise-accordion-spacing-map, 'header-padding');
 
           &.entity-value {
             overflow-wrap: break-word;
@@ -42,7 +42,7 @@
         // rest of headers
         &.hidden-header {
           > .entity-value {
-            padding-left: map-get(variables.$record-spacing-map, 'record-header-padding-left');
+            padding-left: map.get(variables.$record-spacing-map, 'record-header-padding-left');
           }
         }
 
@@ -50,27 +50,27 @@
           // row-focus will change the border top and bottom size,
           // so we should adjust that and account for the default border
           td {
-            $_row_focus_padding: map-get(variables.$record-spacing-map, 'record-table-cell-padding') - (map-get(variables.$record-spacing-map, 'row-focus-border-width') - map-get(variables.$record-spacing-map, 'record-table-cell-border-width'));
+            $_row_focus_padding: map.get(variables.$record-spacing-map, 'record-table-cell-padding') - (map.get(variables.$record-spacing-map, 'row-focus-border-width') - map.get(variables.$record-spacing-map, 'record-table-cell-border-width'));
             padding-top: $_row_focus_padding;
             padding-bottom: $_row_focus_padding;
 
             // if the size of row-focus is bigger than the current border width,
             // we should adjust the content of inline tables so the whole page doesn't shift
-            @if map-get(variables.$record-spacing-map, 'row-focus-border-width') > map-get(variables.$record-spacing-map, 'record-table-cell-border-width') {
+            @if map.get(variables.$record-spacing-map, 'row-focus-border-width') > map.get(variables.$record-spacing-map, 'record-table-cell-border-width') {
               .inline-table-display {
-                padding-bottom: map-get(variables.$record-spacing-map, 'row-focus-border-width');
+                padding-bottom: map.get(variables.$record-spacing-map, 'row-focus-border-width');
               }
             }
           }
 
           // when there are two of them, the bottom should use the default padding
           + tr.row-focus td {
-            padding-top:  map-get(variables.$record-spacing-map, 'record-table-cell-padding');
+            padding-top:  map.get(variables.$record-spacing-map, 'record-table-cell-padding');
           }
         }
 
         .entity-key {
-          padding-left: map-get(variables.$record-spacing-map, 'record-header-padding-left');
+          padding-left: map.get(variables.$record-spacing-map, 'record-header-padding-left');
           border-bottom-width: 0px;
           position: relative;
           padding-right: 15px;
@@ -88,7 +88,7 @@
     }
 
     .inline-tooltip {
-      color: map-get(variables.$color-map, 'column-inline-tooltip');
+      color: map.get(variables.$color-map, 'column-inline-tooltip');
       padding-bottom: 5px;
     }
   }
diff --git a/src/assets/scss/_record.scss b/src/assets/scss/_record.scss
index 07d56f299..3d7bb7e21 100644
--- a/src/assets/scss/_record.scss
+++ b/src/assets/scss/_record.scss
@@ -200,7 +200,7 @@
     /******Related Entities in record **************/
 
     .row-focus {
-      border: map-get(variables.$record-spacing-map, 'row-focus-border-width') solid map-get(variables.$color-map, 'primary') !important;
+      border: map.get(variables.$record-spacing-map, 'row-focus-border-width') solid map.get(variables.$color-map, 'primary') !important;
     }
 
     .chaise-table-header {
diff --git a/src/assets/scss/_recordedit.scss b/src/assets/scss/_recordedit.scss
index 534e189ea..936be492e 100644
--- a/src/assets/scss/_recordedit.scss
+++ b/src/assets/scss/_recordedit.scss
@@ -51,9 +51,9 @@
 
       .entity-key {
         width: variables.$chaise-caption-column-width;
-        border-left: variables.$chaise-RE-border-width solid map-get(variables.$color-map, 'recordedit-border');
-        border-right: variables.$chaise-RE-border-width solid map-get(variables.$color-map, 'recordedit-border');
-        border-bottom: variables.$chaise-RE-border-width solid map-get(variables.$color-map, 'recordedit-border');
+        border-left: variables.$chaise-RE-border-width solid map.get(variables.$color-map, 'recordedit-border');
+        border-right: variables.$chaise-RE-border-width solid map.get(variables.$color-map, 'recordedit-border');
+        border-bottom: variables.$chaise-RE-border-width solid map.get(variables.$color-map, 'recordedit-border');
         // margin-left: 10px;
         background: white;
         padding: 8px;
@@ -89,8 +89,8 @@
       position: relative;
       display: flex;
       flex-direction: column;
-      color: map-get(variables.$color-map, 'black');
-      background-color: map-get(variables.$color-map, 'white');
+      color: map.get(variables.$color-map, 'black');
+      background-color: map.get(variables.$color-map, 'white');
       min-width: 250px;
       overflow-x: auto;
 
@@ -119,7 +119,7 @@
         max-width: 100%;
 
         &.highlighted-row {
-          background-color: map-get(variables.$color-map, 'recordedit-highlighted-row');
+          background-color: map.get(variables.$color-map, 'recordedit-highlighted-row');
 
           // reset the changed height when the multi form input row is open
           .inputs-row {
@@ -161,8 +161,8 @@
         .inline-comment-row {
           flex-direction: column;
 
-          color: map-get(variables.$color-map, 'column-inline-tooltip');
-          border-right: variables.$chaise-RE-border-width solid map-get(variables.$color-map, 'recordedit-border');
+          color: map.get(variables.$color-map, 'column-inline-tooltip');
+          border-right: variables.$chaise-RE-border-width solid map.get(variables.$color-map, 'recordedit-border');
 
           padding: 8px 10px 0 8px;
 
@@ -180,7 +180,7 @@
           flex-direction: column;
           align-items: center;
 
-          z-index: map-get(variables.$z-index-map, 'multi-form-input-row');
+          z-index: map.get(variables.$z-index-map, 'multi-form-input-row');
 
           // Adding a div to align the content center always
           .center-align {
@@ -215,7 +215,7 @@
               }
               .multi-form-input-how-to {
                 cursor: default;
-                color: map-get(variables.$color-map, 'black');
+                color: map.get(variables.$color-map, 'black');
               }
 
               .multi-form-input-how-to:hover {
@@ -301,13 +301,13 @@
           top: 0;
           height: 100%;
           width: 100%;
-          z-index: map-get(variables.$z-index-map, 'recordedit-foreignkey-input-spinner-backdrop')
+          z-index: map.get(variables.$z-index-map, 'recordedit-foreignkey-input-spinner-backdrop')
         }
 
         .column-permission-warning {
           margin: 0;
           padding: 5px;
-          color: map-get(variables.$color-map, 'recordedit-column-permission-warning');
+          color: map.get(variables.$color-map, 'recordedit-column-permission-warning');
         }
       }
 
@@ -315,8 +315,8 @@
       .match-entity-value {
         word-wrap: break-word;
         min-width: 250px;
-        border-right: variables.$chaise-RE-border-width solid map-get(variables.$color-map, 'recordedit-border');
-        border-bottom: variables.$chaise-RE-border-width solid map-get(variables.$color-map, 'recordedit-border');
+        border-right: variables.$chaise-RE-border-width solid map.get(variables.$color-map, 'recordedit-border');
+        border-bottom: variables.$chaise-RE-border-width solid map.get(variables.$color-map, 'recordedit-border');
 
         // border-left: none;
         // border-top: none;
@@ -328,7 +328,7 @@
 
       // This is added to show the form is selected to apply the change
       .entity-active {
-        outline: 2px solid map-get(variables.$color-map, 'primary');
+        outline: 2px solid map.get(variables.$color-map, 'primary');
         outline-offset: -2px;
       }
 
@@ -336,15 +336,15 @@
       .column-cell {
         border-left: none;
         border-top: none;
-        border-right: variables.$chaise-RE-border-width solid map-get(variables.$color-map, 'recordedit-border');
-        border-bottom: variables.$chaise-RE-border-width solid map-get(variables.$color-map, 'recordedit-border');
+        border-right: variables.$chaise-RE-border-width solid map.get(variables.$color-map, 'recordedit-border');
+        border-bottom: variables.$chaise-RE-border-width solid map.get(variables.$color-map, 'recordedit-border');
         border-radius: 0;
         // height: 47px;
         min-height: 47px;
         padding: 8px 10px;
 
         .chaise-input-control.column-cell-input {
-          border: 1px solid map-get(variables.$color-map, 'border');
+          border: 1px solid map.get(variables.$color-map, 'border');
           border-radius: 4px;
           padding: 0 10px;
           display: flex;
@@ -360,8 +360,8 @@
     // in both entity-key-column and form
     .form-header {
       height: 47px;
-      border-top: variables.$chaise-RE-border-width solid map-get(variables.$color-map, 'recordedit-border');
-      color: map-get(variables.$color-map, 'disabled');
+      border-top: variables.$chaise-RE-border-width solid map.get(variables.$color-map, 'recordedit-border');
+      color: map.get(variables.$color-map, 'disabled');
 
       .form-header-buttons-container {
         float: right;
@@ -387,11 +387,11 @@
   .record-number {
     font-size: 14px;
     margin-left: 10px;
-    color: map-get(variables.$color-map, 'disabled');
+    color: map.get(variables.$color-map, 'disabled');
   }
 
   .chaise-input-control[readonly] {
-    background-color: map-get(variables.$color-map, 'white');
+    background-color: map.get(variables.$color-map, 'white');
     opacity: 1;
   }
 
diff --git a/src/assets/scss/_recordset-table.scss b/src/assets/scss/_recordset-table.scss
index 9c7a86047..9276a2a76 100644
--- a/src/assets/scss/_recordset-table.scss
+++ b/src/assets/scss/_recordset-table.scss
@@ -6,8 +6,8 @@
 }
 
 .chaise-table.table {
-  border-top: 1px solid map-get(variables.$color-map, 'table-border');
-  border-bottom: 1px solid map-get(variables.$color-map, 'table-border');
+  border-top: 1px solid map.get(variables.$color-map, 'table-border');
+  border-bottom: 1px solid map.get(variables.$color-map, 'table-border');
   margin: 0;
 
   // override the default bootstrap styles as we're going to apply our own styles below
@@ -23,7 +23,7 @@
 
     /* table hover */
     > tr:hover {
-      background-color: map-get(variables.$color-map, 'table-highlight-background') !important;
+      background-color: map.get(variables.$color-map, 'table-highlight-background') !important;
 
       .hover-show {
         visibility: visible;
@@ -32,18 +32,18 @@
 
     /* odd row hover for striped table */
     > tr:nth-child(odd):hover {
-      background-color: map-get(variables.$color-map, 'table-striped-highlight-background') !important;
+      background-color: map.get(variables.$color-map, 'table-striped-highlight-background') !important;
     }
   }
 
   tr {
-    border-left: 1px solid map-get(variables.$color-map, 'table-border');
+    border-left: 1px solid map.get(variables.$color-map, 'table-border');
     border-bottom: none;
   }
 
   .table-heading {
-    background-color: map-get(variables.$color-map, 'table-header-background');
-    color: map-get(variables.$color-map, 'black');
+    background-color: map.get(variables.$color-map, 'table-header-background');
+    color: map.get(variables.$color-map, 'black');
 
     .actions-header {
       width: 100px;
@@ -78,11 +78,11 @@
   }
 
   & > tbody > tr:nth-child(odd) {
-    background: map-get(variables.$color-map, 'table-striped-background');
+    background: map.get(variables.$color-map, 'table-striped-background');
   }
 
   > thead > tr > th {
-    border-bottom: 1px solid map-get(variables.$color-map, 'table-border');
+    border-bottom: 1px solid map.get(variables.$color-map, 'table-border');
     white-space: nowrap;
   }
 
@@ -94,7 +94,7 @@
   > tfoot > tr > td {
     border-top: none;
     border-bottom: none;
-    border-right: 1px solid map-get(variables.$color-map, 'table-border');
+    border-right: 1px solid map.get(variables.$color-map, 'table-border');
     word-wrap: break-word;
   }
 
@@ -105,7 +105,7 @@
 
   th {
     font-weight: 400;
-    border-top: 1px solid map-get(variables.$color-map, 'table-border');
+    border-top: 1px solid map.get(variables.$color-map, 'table-border');
     position: relative;
 
     &.actions-header {
@@ -136,7 +136,7 @@
 
         .spinner-border {
           // NOTE: we should not customize the width/height since it causes wobbling effect
-          color: map-get(variables.$color-map, 'table-header-spinner');
+          color: map.get(variables.$color-map, 'table-header-spinner');
           border-width: .16em;
         }
       }
@@ -193,7 +193,7 @@
         font-size: 1.6rem;
         // added here instead of to the button as padding-top to only affect these buttons/icons
         margin-top: 1px;
-        background-color: map-get(variables.$color-map, 'white') !important;
+        background-color: map.get(variables.$color-map, 'white') !important;
         border-radius: inherit;
       }
     }
@@ -227,11 +227,11 @@
 
     .disabled {
       cursor: not-allowed;
-      color: map-get(variables.$color-map, 'disabled');
+      color: map.get(variables.$color-map, 'disabled');
     }
 
     .delete-loader {
-      color: map-get(variables.$color-map, 'disabled');
+      color: map.get(variables.$color-map, 'disabled');
     }
   }
 
diff --git a/src/assets/scss/_recordset.scss b/src/assets/scss/_recordset.scss
index 22c8fa7a4..77efe15e7 100644
--- a/src/assets/scss/_recordset.scss
+++ b/src/assets/scss/_recordset.scss
@@ -57,11 +57,11 @@
             }
 
             .chaise-btn:focus {
-              background-color: map-get(variables.$color-map, 'white');
+              background-color: map.get(variables.$color-map, 'white');
             }
 
             .chaise-btn.chaise-btn-secondary {
-              border-color: map-get(variables.$color-map, 'border');
+              border-color: map.get(variables.$color-map, 'border');
               height: 25px;
               min-width: 25px;
               padding: 2px 5px;
@@ -104,12 +104,12 @@
             }
 
             span {
-              color: map-get(variables.$color-map, 'black');
+              color: map.get(variables.$color-map, 'black');
               cursor: default;
             }
 
             button span {
-              color: map-get(variables.$color-map, 'primary');
+              color: map.get(variables.$color-map, 'primary');
               cursor: pointer;
             }
           }
@@ -159,7 +159,7 @@
   }
 
   .modal-header-context {
-    color: map-get(variables.$color-map, 'modal-header-context');
+    color: map.get(variables.$color-map, 'modal-header-context');
 
     .modal-header-context-separator {
       padding: 0 0.3em;
diff --git a/src/assets/scss/_split-view.scss b/src/assets/scss/_split-view.scss
index 6e02780c2..2a346a911 100644
--- a/src/assets/scss/_split-view.scss
+++ b/src/assets/scss/_split-view.scss
@@ -7,11 +7,11 @@
   display: flex;
   align-items: center;
   top: 50%;
-  color: map-get(variables.$color-map, 'split-view-divider');
+  color: map.get(variables.$color-map, 'split-view-divider');
   left: 2px;
   margin-right: -20px;
   width: 20px;
-  z-index: map-get(variables.$z-index-map, 'split-view-divider');
+  z-index: map.get(variables.$z-index-map, 'split-view-divider');
 
   span {
     padding-left: 3px;
diff --git a/src/assets/scss/_table-header.scss b/src/assets/scss/_table-header.scss
index b1ac6b737..a67ef5310 100644
--- a/src/assets/scss/_table-header.scss
+++ b/src/assets/scss/_table-header.scss
@@ -50,7 +50,7 @@
   }
 
   .chaise-table-header-spinner {
-    color: map-get(variables.$color-map, 'spinner');
+    color: map.get(variables.$color-map, 'spinner');
     margin-left: 4px;
   }
 }
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 94b25a949..be9cb5f13 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -50,9 +50,17 @@ $h4-font-size: 1.25rem;
 
 /**
  * map syntax doesn't allow multiline, so we have to have them in separate files.
+ * NOTE: these lines used to use @import, but since it was deprecated I had to rewrite them with @use.
+ *       but that broke the way we're using our variables, so I had to rename them with the second lines.
  */
- @import 'maps/record-page-spacing';
- @import 'maps/chaise-accordion';
- @import 'maps/z-index-map';
- @import 'maps/color-map';
+@use 'maps/record-page-spacing';
+$record-spacing-map: record-page-spacing.$map;
 
+@use 'maps/chaise-accordion';
+$chaise-accordion-spacing-map: chaise-accordion.$map;
+
+@use 'maps/z-index-map';
+$z-index-map: z-index-map.$map;
+
+@use 'maps/color-map';
+$color-map: color-map.$map;
diff --git a/src/assets/scss/_viewer.scss b/src/assets/scss/_viewer.scss
index 13513a3f9..30e81dedd 100644
--- a/src/assets/scss/_viewer.scss
+++ b/src/assets/scss/_viewer.scss
@@ -71,7 +71,7 @@
       left: 0;
       height: 100%;
       width: 100%;
-      background-color: map-get(variables.$color-map, 'disabled-background');
+      background-color: map.get(variables.$color-map, 'disabled-background');
       opacity: 0.5;
       z-index: 9; // higher than form
     }
@@ -98,7 +98,7 @@
 
         .stroke-value {
           padding: 0 5px;
-          background: map-get(variables.$color-map, 'viewer-annotation-stroke-slider-value');
+          background: map.get(variables.$color-map, 'viewer-annotation-stroke-slider-value');
           border-radius: 3px;
           font-size: 12px;
         }
@@ -110,7 +110,7 @@
         width: 100%;
         height: 4px;
         margin-top: 5px;
-        background: map-get(variables.$color-map, 'viewer-annotation-stroke-slider-input');
+        background: map.get(variables.$color-map, 'viewer-annotation-stroke-slider-input');
         outline: none;
         opacity: 0.7;
         -webkit-transition: 0.2s;
@@ -127,14 +127,14 @@
           width: 10px;
           height: 10px;
           border-radius: 3px;
-          background: map-get(variables.$color-map, 'primary');
+          background: map.get(variables.$color-map, 'primary');
           cursor: pointer;
         }
 
         &::-moz-range-thumb {
           width: 10px;
           height: 10px;
-          background: map-get(variables.$color-map, 'primary');
+          background: map.get(variables.$color-map, 'primary');
           cursor: pointer;
         }
       }
@@ -151,7 +151,7 @@
           justify-content: center;
           text-align: center;
           width: 1px;
-          background: map-get(variables.$color-map, 'viewer-annotation-stroke-slider-tick');
+          background: map.get(variables.$color-map, 'viewer-annotation-stroke-slider-tick');
           height: 5px;
           line-height: 25px;
           font-size: 10px;
@@ -161,13 +161,13 @@
     }
 
     .annotation-form-container {
-      border: 1px solid map-get(variables.$color-map, 'border');
+      border: 1px solid map.get(variables.$color-map, 'border');
       border-radius: 3px;
-      background: map-get(variables.$color-map, 'viewer-annotation-form-background');
+      background: map.get(variables.$color-map, 'viewer-annotation-form-background');
       padding: 10px;
 
       .drawing-hint {
-        background: map-get(variables.$color-map, 'warning-background');
+        background: map.get(variables.$color-map, 'warning-background');
         width: 100%;
         padding: 5px;
         margin: 5px 0;
@@ -179,7 +179,7 @@
       }
 
       .viewer-annotation-form-row {
-        border-bottom: 1px solid map-get(variables.$color-map, 'border');
+        border-bottom: 1px solid map.get(variables.$color-map, 'border');
         padding: 10px 0;
 
         .viewer-annotation-form-row-header {
@@ -216,7 +216,7 @@
       }
 
       .no-annotation-message {
-        background: map-get(variables.$color-map, 'table-striped-background');
+        background: map.get(variables.$color-map, 'table-striped-background');
         padding: 8px 5px;
         min-height: 39px;
         text-align: center;
@@ -228,26 +228,26 @@
           padding: 8px 5px;
 
           &.highlighted {
-            background: map-get(variables.$color-map, 'primary-hover');
-            color: map-get(variables.$color-map, 'white');
+            background: map.get(variables.$color-map, 'primary-hover');
+            color: map.get(variables.$color-map, 'white');
             a,
             .chaise-btn {
-              color: map-get(variables.$color-map, 'white');
+              color: map.get(variables.$color-map, 'white');
             }
           }
 
           &:not(.highlighted) {
             &:hover {
-              background: map-get(variables.$color-map, 'table-highlight-background');
+              background: map.get(variables.$color-map, 'table-highlight-background');
             }
             .annotation-row-btn:hover {
-              color: map-get(variables.$color-map, 'primary-hover');
+              color: map.get(variables.$color-map, 'primary-hover');
             }
 
             &:nth-child(odd) {
-              background-color: map-get(variables.$color-map, 'table-striped-background');
+              background-color: map.get(variables.$color-map, 'table-striped-background');
               &:hover {
-                background: map-get(variables.$color-map, 'table-striped-highlight-background');
+                background: map.get(variables.$color-map, 'table-striped-highlight-background');
               }
             }
           }
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 30c3525a7..7d181ece8 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -3,13 +3,13 @@
 @use 'helpers';
 
 // globally used
-@import "chaise-icon";
-@import "markdown-container";
-@import "buttons";
-@import "button-group";
-@import "inputs";
-@import "dropdown";
-@import "modal";
+@use "chaise-icon";
+@use "markdown-container";
+@use "buttons";
+@use "button-group";
+@use "inputs";
+@use "dropdown";
+@use "modal";
 
 // if we want to hide the page and then show navbar and content together
 .wait-for-navbar {
@@ -43,8 +43,8 @@ html {
   height: 100%;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
     sans-serif;
-  background-color: map-get(variables.$color-map, 'white');
-  color: map-get(variables.$color-map, 'black');
+  background-color: map.get(variables.$color-map, 'white');
+  color: map.get(variables.$color-map, 'black');
   font-size: variables.$font-size;
   font-weight: 400;
   line-height: 1.428;
@@ -110,7 +110,7 @@ html {
   .h4-class small {
     font-weight: 400;
     line-height: 1;
-    color: map-get(variables.$color-map, 'header-small');
+    color: map.get(variables.$color-map, 'header-small');
     font-size: 65%;
   }
 
@@ -131,7 +131,7 @@ html {
   a,
   a:not([href]):not([class]) {
     cursor: pointer;
-    color: map-get(variables.$color-map, 'link');
+    color: map.get(variables.$color-map, 'link');
     text-decoration: none;
   }
   // the last selector is added to override bootstrap default behavior
@@ -145,8 +145,8 @@ html {
   code {
     padding: 2px 4px;
     font-size: 90%;
-    color: map-get(variables.$color-map, 'code-block');
-    background-color: map-get(variables.$color-map, 'code-block-background');
+    color: map.get(variables.$color-map, 'code-block');
+    background-color: map.get(variables.$color-map, 'code-block-background');
     border-radius: 4px;
   }
   // make sure the pre style is consistent with old bootstrap styles
@@ -156,11 +156,11 @@ html {
     margin: 0 0 10px;
     font-size: 13px;
     line-height: 1.42857143;
-    color: map-get(variables.$color-map, 'black');
+    color: map.get(variables.$color-map, 'black');
     word-break: break-all;
     word-wrap: break-word;
-    background-color: map-get(variables.$color-map, 'code-block-background-alt');
-    border: 1px solid map-get(variables.$color-map, 'border');
+    background-color: map.get(variables.$color-map, 'code-block-background-alt');
+    border: 1px solid map.get(variables.$color-map, 'border');
     border-radius: 4px;
   }
 
@@ -255,15 +255,15 @@ html {
   }
   .tooltip code,
   .tooltip-inner code {
-    background: map-get(variables.$color-map, 'code-block-background-in-tooltip');
-    color: map-get(variables.$color-map, 'white');
+    background: map.get(variables.$color-map, 'code-block-background-in-tooltip');
+    color: map.get(variables.$color-map, 'white');
     padding: 0.5px;
   }
 
   // disabled row and form
   .disabled-form,
   .disabled-row {
-    color: map-get(variables.$color-map, 'disabled') !important;
+    color: map.get(variables.$color-map, 'disabled') !important;
   }
 
   .disabled-form *,
@@ -273,7 +273,7 @@ html {
 
   .disabled-form a,
   .disabled-row a {
-    color: map-get(variables.$color-map, 'disabled') !important;
+    color: map.get(variables.$color-map, 'disabled') !important;
   }
 
   .disabled-form .remove-input-btn {
@@ -288,8 +288,8 @@ html {
   }
 
   .disabled-form .btn.btn-inverted[disabled]:hover {
-    background-color: map-get(variables.$color-map, 'white') !important;
-    border-color: map-get(variables.$color-map, 'border') !important;
+    background-color: map.get(variables.$color-map, 'white') !important;
+    border-color: map.get(variables.$color-map, 'border') !important;
   }
 
   .disabled-element {
@@ -302,13 +302,13 @@ html {
 
   // spinner
   .spinner-container:not(.bottom-left-spinner) {
-    background: map-get(variables.$color-map, 'white');
-    color: map-get(variables.$color-map, 'spinner');
+    background: map.get(variables.$color-map, 'white');
+    color: map.get(variables.$color-map, 'spinner');
     width: 130px;
     margin: 0 auto;
     text-align: center;
     padding: 14px 0;
-    border: 1px solid map-get(variables.$color-map, 'border');
+    border: 1px solid map.get(variables.$color-map, 'border');
     border-radius: 7px;
     &:not(.manual-position-spinner) {
       top: 50vh;
@@ -316,22 +316,22 @@ html {
       left: 50%;
       margin-top: -75px;
       margin-left: -75px;
-      z-index: map-get(variables.$z-index-map, 'spinner');
+      z-index: map.get(variables.$z-index-map, 'spinner');
     }
     .spinner-message {
-      color: map-get(variables.$color-map, 'black');
+      color: map.get(variables.$color-map, 'black');
       margin-top: 15px;
     }
   }
   .spinner-container.bottom-left-spinner {
     float: left;
     position: fixed;
-    z-index: map-get(variables.$z-index-map, 'spinner');
+    z-index: map.get(variables.$z-index-map, 'spinner');
     bottom: 0;
-    background: map-get(variables.$color-map, 'spinner-background');
+    background: map.get(variables.$color-map, 'spinner-background');
     margin: 5px;
     padding: 5px 20px;
-    border: solid map-get(variables.$color-map, 'spinner-border') 1.5px;
+    border: solid map.get(variables.$color-map, 'spinner-border') 1.5px;
     .spinner-message {
       display: inline-block;
       margin-left: 5px;
@@ -347,7 +347,7 @@ html {
     position: sticky;
     position: -webkit-sticky;
     top: min(50px, 50%);
-    z-index: map-get(variables.$z-index-map, 'spinner');
+    z-index: map.get(variables.$z-index-map, 'spinner');
     .spinner-container {
       height: variables.$main-spinner-height;
     }
@@ -373,7 +373,7 @@ html {
     margin: 0;
 
     .link-decoration {
-      color: map-get(variables.$color-map, 'link');
+      color: map.get(variables.$color-map, 'link');
     }
   }
 
@@ -411,7 +411,7 @@ html {
 
   // record and recordedit column headers
   .entity-key {
-    color: map-get(variables.$color-map, 'black');
+    color: map.get(variables.$color-map, 'black');
     font-weight: normal;
     font-size: 1rem;
     word-wrap: break-word;
@@ -420,7 +420,7 @@ html {
   // record and recordedit column values
   .entity-value {
     font-size: 1rem;
-    color: map-get(variables.$color-map, 'black');
+    color: map.get(variables.$color-map, 'black');
   }
 
   // show more/show less ellipsis
@@ -460,11 +460,11 @@ html {
 
     .footer-content {
       height: 30px;
-      background-color: map-get(variables.$color-map, 'footer-background');
+      background-color: map.get(variables.$color-map, 'footer-background');
       padding-right: 5px;
       padding-left: 5px;
       padding-top: 5px;
-      color: map-get(variables.$color-map, 'footer');
+      color: map.get(variables.$color-map, 'footer');
       font-size: 11px;
 
       li {
@@ -482,8 +482,8 @@ html {
       code {
         padding-left: 0;
         padding-right: 0;
-        color: map-get(variables.$color-map, 'black');
-        background-color: map-get(variables.$color-map, 'code-block-background-alt');
+        color: map.get(variables.$color-map, 'black');
+        background-color: map.get(variables.$color-map, 'code-block-background-alt');
       }
     }
   }
@@ -691,7 +691,7 @@ html {
 
   // copy to clipboard btn (used in share dialog)
   .chaise-copy-to-clipboard-btn {
-    color: map-get(variables.$color-map, 'primary');
+    color: map.get(variables.$color-map, 'primary');
     font-size: 65%;
     cursor: pointer;
   }
@@ -717,7 +717,7 @@ html {
       appearance: none;
 
       position: absolute;
-      z-index: map-get(variables.$z-index-map, 'checkbox-input');
+      z-index: map.get(variables.$z-index-map, 'checkbox-input');
       cursor: pointer;
       width: variables.$chaise-checkbox-width;
       height: variables.$chaise-checkbox-height;
@@ -729,15 +729,15 @@ html {
         // we have to attach the checkmark to the label otherwise firefox won't show it.
         & + label:before,
         &:checked + label:after {
-          color: map-get(variables.$color-map, 'disabled');
-          border-color: map-get(variables.$color-map, 'disabled');
+          color: map.get(variables.$color-map, 'disabled');
+          border-color: map.get(variables.$color-map, 'disabled');
         }
       }
 
       // we have to attach the checkmark to the label otherwise firefox won't show it.
       & + label:before,
       &:checked + label:after {
-        color: map-get(variables.$color-map, 'primary');
+        color: map.get(variables.$color-map, 'primary');
         -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
         -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
         transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
@@ -752,9 +752,9 @@ html {
         height: variables.$chaise-checkbox-height;
         left: 0;
         top: 0;
-        border: 1px solid map-get(variables.$color-map, 'primary');
+        border: 1px solid map.get(variables.$color-map, 'primary');
         border-radius: 3px;
-        background-color: map-get(variables.$color-map, 'white');
+        background-color: map.get(variables.$color-map, 'white');
       }
 
       &:indeterminate + label:after {
@@ -797,7 +797,7 @@ html {
     font-size: 18px;
 
     &.fa-solid.fa-star {
-      color: map-get(variables.$color-map, 'favorite');
+      color: map.get(variables.$color-map, 'favorite');
     }
 
     &.hover-show {
@@ -819,13 +819,13 @@ html {
 
   // changes the color of alert fa-triangle-exclamation (used for timeout error)
   .fa-triangle-exclamation {
-    color: map-get(variables.$color-map, 'warning') !important;
+    color: map.get(variables.$color-map, 'warning') !important;
     border: none;
   }
 
   // spinner
   .fa-circle-notch {
-    color: map-get(variables.$color-map, 'spinner');
+    color: map.get(variables.$color-map, 'spinner');
   }
 
   /* Rule for Chrome */
@@ -855,7 +855,7 @@ html {
     position: sticky;
     width: -moz-available;
     width: -webkit-fill-available;
-    z-index: map-get(variables.$z-index-map, 'top-horzontal-scroll-wrapper');
+    z-index: map.get(variables.$z-index-map, 'top-horzontal-scroll-wrapper');
     display: none;
   }
 
@@ -881,7 +881,7 @@ html {
         display: inline-block;
         cursor: pointer;
         padding-right: 3px;
-        color: map-get(variables.$color-map, 'black');
+        color: map.get(variables.$color-map, 'black');
         font-size: 1.3em;
         vertical-align: middle;
       }
@@ -917,8 +917,8 @@ html {
 
   // section accordion (used both in record and recordedit)
   .chaise-accordions {
-    $_space-between-accordions: map-get(variables.$chaise-accordion-spacing-map, 'space-between');
-    $_row-focus-border-width: map-get(variables.$chaise-accordion-spacing-map, 'row-focus-border-width');
+    $_space-between-accordions: map.get(variables.$chaise-accordion-spacing-map, 'space-between');
+    $_row-focus-border-width: map.get(variables.$chaise-accordion-spacing-map, 'row-focus-border-width');
 
     .panel-group {
       margin-bottom: 20px;
@@ -961,11 +961,11 @@ html {
         cursor: pointer;
         height: 44px;
         text-transform: inherit;
-        padding: map-get(variables.$chaise-accordion-spacing-map, 'header-padding');
-        color: map-get(variables.$color-map, 'white');
+        padding: map.get(variables.$chaise-accordion-spacing-map, 'header-padding');
+        color: map.get(variables.$color-map, 'white');
         border: none;
         border-radius: inherit;
-        background: map-get(variables.$color-map, 'section-background');
+        background: map.get(variables.$color-map, 'section-background');
         // Overriding accordian-button css to align right angle bracket icon to left
         flex-direction: row-reverse;
         justify-content: flex-end;
@@ -1028,9 +1028,9 @@ html {
 
       .accordion-body {
         // make sure content is alidned with header on the left
-        padding-left: map-get(variables.$chaise-accordion-spacing-map, 'body-padding-left');
+        padding-left: map.get(variables.$chaise-accordion-spacing-map, 'body-padding-left');
         // make sure content is aligned with header on the right.
-        padding-right: map-get(variables.$chaise-accordion-spacing-map, 'header-padding');
+        padding-right: map.get(variables.$chaise-accordion-spacing-map, 'header-padding');
         padding-top: 10px;
       }
 
@@ -1052,7 +1052,7 @@ html {
     width: 35px;
     cursor: pointer;
     overflow: hidden;
-    z-index: map-get(variables.$z-index-map, 'back-to-top-btn');
+    z-index: map.get(variables.$z-index-map, 'back-to-top-btn');
   }
 
   // an spinner with backdrop blocking the whole app content
@@ -1063,13 +1063,13 @@ html {
       left: 0;
       height: 100%;
       width: 100%;
-      z-index: map-get(variables.$z-index-map, 'app-blocking-spinner-backdrop');
+      z-index: map.get(variables.$z-index-map, 'app-blocking-spinner-backdrop');
       background: black;
       opacity: 0.5;
     }
     .spinner-container {
       top: 50% !important;
-      z-index: map-get(variables.$z-index-map, 'app-blocking-spinner') !important;
+      z-index: map.get(variables.$z-index-map, 'app-blocking-spinner') !important;
     }
   }
 
@@ -1098,7 +1098,7 @@ html {
 
     position: relative;
     display: block;
-    border: 1px solid map-get(variables.$color-map, 'border');
+    border: 1px solid map.get(variables.$color-map, 'border');
     text-align: center;
 
     /**
@@ -1195,5 +1195,5 @@ html {
 // change default bootstap variables
 :root {
   // interpolation (#{}) is needed here, more info: https://sass-lang.com/documentation/breaking-changes/css-vars/
-  --bs-body-color: #{map-get(variables.$color-map, 'black')};
+  --bs-body-color: #{map.get(variables.$color-map, 'black')};
 }
diff --git a/src/assets/scss/helpers.scss b/src/assets/scss/helpers.scss
index 264bd6b34..d79d03392 100644
--- a/src/assets/scss/helpers.scss
+++ b/src/assets/scss/helpers.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use 'sass:map';
 @use 'variables';
 
@@ -38,7 +39,7 @@
 }
 
 @mixin download-btn() {
-  color: map-get(variables.$color-map, 'primary');
+  color: map.get(variables.$color-map, 'primary');
   white-space: nowrap;
   // touch action
   -ms-touch-action: manipulation;
@@ -99,23 +100,23 @@
 }
 
 @mixin chaise-btn-primary() {
-  color: map-get(variables.$color-map, 'white');
-  background-color: map-get(variables.$color-map, 'primary');
-  border-color: map-get(variables.$color-map, 'black');
+  color: map.get(variables.$color-map, 'white');
+  background-color: map.get(variables.$color-map, 'primary');
+  border-color: map.get(variables.$color-map, 'black');
 
   &:focus {
-    background-color: darken(map-get(variables.$color-map, 'primary'), 10%);
+    background-color: color.adjust(map.get(variables.$color-map, 'primary'), $lightness: -10%);
     box-shadow: none;
   }
 }
 
 @mixin chaise-btn-secondary {
-  color: map-get(variables.$color-map, 'primary');
-  background-color: map-get(variables.$color-map, 'white');
-  border: 1px solid map-get(variables.$color-map, 'primary');
+  color: map.get(variables.$color-map, 'primary');
+  background-color: map.get(variables.$color-map, 'white');
+  border: 1px solid map.get(variables.$color-map, 'primary');
 
   &:focus {
-    background-color: darken(map-get(variables.$color-map, 'white'), 10%);
+    background-color: color.adjust(map.get(variables.$color-map, 'white'), $lightness: -10%);
     box-shadow: none;
   }
 }
diff --git a/src/assets/scss/maps/_chaise-accordion.scss b/src/assets/scss/maps/_chaise-accordion.scss
index 64d0e4829..d2cb57074 100644
--- a/src/assets/scss/maps/_chaise-accordion.scss
+++ b/src/assets/scss/maps/_chaise-accordion.scss
@@ -1,4 +1,4 @@
-$chaise-accordion-spacing-map: (
+$map: (
   'space-between': 5px,
   'row-focus-border-width': 2px,
   'body-padding-left': 40px,
diff --git a/src/assets/scss/maps/_color-map.scss b/src/assets/scss/maps/_color-map.scss
index cfcdd99dc..483afeb7f 100644
--- a/src/assets/scss/maps/_color-map.scss
+++ b/src/assets/scss/maps/_color-map.scss
@@ -1,4 +1,4 @@
-$color-map: (
+$map: (
   'black': #333,
   'border': #ccc,
   'code-block': #c7254e,
diff --git a/src/assets/scss/maps/_record-page-spacing.scss b/src/assets/scss/maps/_record-page-spacing.scss
index b0f71d3f1..405140ddd 100644
--- a/src/assets/scss/maps/_record-page-spacing.scss
+++ b/src/assets/scss/maps/_record-page-spacing.scss
@@ -1,4 +1,4 @@
-$record-spacing-map: (
+$map: (
   'record-table-cell-padding': 5px,
   'record-table-cell-border-width': 1px,
   'space-between-related-sections': 5px,
diff --git a/src/assets/scss/maps/_z-index-map.scss b/src/assets/scss/maps/_z-index-map.scss
index 4af51ac74..cac8baecd 100644
--- a/src/assets/scss/maps/_z-index-map.scss
+++ b/src/assets/scss/maps/_z-index-map.scss
@@ -1,5 +1,5 @@
 // z-index
-$z-index-map: (
+$map: (
   // make sure it's above the displayed checkbox, so we can click on it
   'checkbox-input': 1,
   'button-active': 1,
diff --git a/webpack/app.config.js b/webpack/app.config.js
index 806c6f9f4..6776a2aff 100644
--- a/webpack/app.config.js
+++ b/webpack/app.config.js
@@ -28,6 +28,8 @@ const webpack = require('webpack');
  *                if missing, we will use CHAISE_BASE_PATH.
  * - rootFolderLocation: the location of root folder. used to find the code (e.g. ../src)
  * - resolveAliases: the aliases that will be used in import statements.
+ * - extraWebpackProps: props that you want to directly pass to webpack. be mindful what you're passing as you might break the configuration
+ *                 by overriding the props that we already rely on. Currently only used for passing externals (https://webpack.js.org/configuration/externals/)
  *
  * @param {Object} appConfigs
  *  the app configurations
@@ -55,6 +57,10 @@ const getWebPackConfig = (appConfigs, mode, env, options) => {
     options.resolveAliases = {};
   }
 
+  if (!options.extraWebpackProps || typeof options.extraWebpackProps !== 'object') {
+    options.extraWebpackProps = {};
+  }
+
   const entries = {}, appHTMLPlugins = [];
 
   // define entries and add plugins based on appConfigs
@@ -256,16 +262,13 @@ const getWebPackConfig = (appConfigs, mode, env, options) => {
         },
       },
     },
-    externals: {
-      // treat plotly as an external dependency and don't compute it
-      'plotly.js-basic-dist-min': 'Plotly'
-    },
     performance: {
       assetFilter: (assetFilename) => {
         // ignore the fonts
         return !/\.(woff(2)?|eot|ttf|otf|svg|)$/.test(assetFilename);
       }
-    }
+    },
+    ...options.extraWebpackProps
   }
 }
 
diff --git a/webpack/main.config.js b/webpack/main.config.js
index 0e026969e..79c0c6b46 100644
--- a/webpack/main.config.js
+++ b/webpack/main.config.js
@@ -66,6 +66,14 @@ module.exports = (env) => {
       }
     ],
     mode,
-    env
+    env,
+    {
+      extraWebpackProps: {
+        externals: {
+          // treat plotly as an external dependency and don't compute it
+          'plotly.js-basic-dist-min': 'Plotly'
+        }
+      }
+    }
   );
 }