From 98e1e1cfabeec4941798fbd8004fdb50439a9b4d Mon Sep 17 00:00:00 2001
From: Charissa Miller <48832936+clemiller@users.noreply.github.com>
Date: Mon, 29 Dec 2025 12:16:42 -0500
Subject: [PATCH 1/7] fix dist path

---
 .github/workflows/github-pages.yml | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/github-pages.yml b/.github/workflows/github-pages.yml
index 140f50fd..627870cd 100644
--- a/.github/workflows/github-pages.yml
+++ b/.github/workflows/github-pages.yml
@@ -29,7 +29,7 @@ jobs:
         run: npm ci
 
       - name: Build Navigator
-        run: npm run build -- --configuration production,googleAnalytics --aot=false --build-optimizer=false --base-href=https://mitre-attack.github.io/attack-navigator/
+        run: npm run build -- --configuration production,googleAnalytics --aot=false --base-href=https://mitre-attack.github.io/attack-navigator/
 
       - name: Download and extract Navigator v2
         uses: robinraju/release-downloader@v1.10
@@ -40,7 +40,7 @@ jobs:
           extract: true
 
       - name: Move v2 to output directory
-        run: mv ../v2/ dist/
+        run: mv ../v2/ dist/browser/
 
       - name: Download and extract Navigator v3
         uses: robinraju/release-downloader@v1.10
@@ -51,14 +51,14 @@ jobs:
           extract: true
 
       - name: Move v3 to output directory
-        run: mv ../v3/ dist/
+        run: mv ../v3/ dist/browser/
 
       - name: Copy redirects
-        run: cp -r ./redirects/* ./dist/
+        run: cp -r ./redirects/* ./dist/browser/
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         if: ${{ github.ref == 'refs/heads/master' }}
         with:
           deploy_key: ${{ secrets.DEPLOY_KEY }}
-          publish_dir: ./nav-app/dist
+          publish_dir: ./nav-app/dist/browser

From 0b2e66bffe0ba7f0716bf0c57d59938b3001d9dd Mon Sep 17 00:00:00 2001
From: Charissa Miller <48832936+clemiller@users.noreply.github.com>
Date: Mon, 29 Dec 2025 12:17:38 -0500
Subject: [PATCH 2/7] update dockerfile for angular v19

---
 Dockerfile | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index a5ee2132..b1236917 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,27 +1,29 @@
-# Build stage
+FROM node:22 AS build
 
-FROM node:18
-
-ENV NODE_OPTIONS=--openssl-legacy-provider
-
-# install node packages - cache for faster future builds
 WORKDIR /src/nav-app
-COPY ./nav-app/package*.json ./
 
-# install packages and build 
-RUN npm install
+# install dependencies (cache)
+COPY ./nav-app/package.json ./
+COPY ./nav-app/package-lock.json ./
+RUN npm ci
 
-# copy over needed files
+# copy source and build
 COPY ./nav-app/ ./
+RUN npm run build -- --configuration production
 
-# copy layers directory
+# copy layers directory and documentation
 WORKDIR /src
 COPY layers/ ./layers/
-
-# copy markdown files from root
 COPY *.md ./
 
-WORKDIR /src/nav-app
-EXPOSE 4200
+FROM nginx:alpine AS runtime
+
+# copy application bundles
+COPY --from=build /src/nav-app/dist/browser/ /usr/share/nginx/html/
+COPY --from=build /src/layers/ /usr/share/nginx/html/layers/
+COPY --from=build /src/*.md /usr/share/nginx/html/
+
+EXPOSE 80
 
-CMD npm start
+# run nginx in foreground
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file

From 0283c49b705d3ac450a6fbc27309d399bdac1ef2 Mon Sep 17 00:00:00 2001
From: Charissa Miller <48832936+clemiller@users.noreply.github.com>
Date: Tue, 30 Dec 2025 12:54:05 -0500
Subject: [PATCH 3/7] add Dockerfile.dev for local dev

---
 Dockerfile     |  2 +-
 Dockerfile.dev | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 Dockerfile.dev

diff --git a/Dockerfile b/Dockerfile
index b1236917..43aea412 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -11,7 +11,7 @@ RUN npm ci
 COPY ./nav-app/ ./
 RUN npm run build -- --configuration production
 
-# copy layers directory and documentation
+# copy layers directory and in-app documentation
 WORKDIR /src
 COPY layers/ ./layers/
 COPY *.md ./
diff --git a/Dockerfile.dev b/Dockerfile.dev
new file mode 100644
index 00000000..aa80567c
--- /dev/null
+++ b/Dockerfile.dev
@@ -0,0 +1,20 @@
+FROM node:22 AS dev
+
+WORKDIR /src/nav-app
+
+# install dependencies (cache)
+COPY ./nav-app/package.json ./
+COPY ./nav-app/package-lock.json ./
+RUN npm install
+
+# copy source and build
+COPY ./nav-app/ ./
+
+# copy layers directory and in-app documentation
+WORKDIR /src
+COPY layers/ ./layers/
+COPY *.md ./
+
+EXPOSE 4200
+
+CMD ["npm", "start"]
\ No newline at end of file

From b2b7789467c809d6513eb3ebe5fcb306ece830e5 Mon Sep 17 00:00:00 2001
From: Charissa Miller <48832936+clemiller@users.noreply.github.com>
Date: Tue, 30 Dec 2025 13:30:50 -0500
Subject: [PATCH 4/7] update install and run documentation

---
 README.md | 82 +++++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 59 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index 02ee9dc5..27ab2a93 100755
--- a/README.md
+++ b/README.md
@@ -44,30 +44,73 @@ Use our [GitHub Issue Tracker](https://github.com/mitre-attack/attack-navigator/
 
 ## Install and Run
 
-### First time
+### Initial Setup
 
-1. Navigate to the **nav-app** directory
-2. Run `npm install`
+1. Navigate to the **nav-app** directory:
 
-### Serve application on local machine
+```bash
+cd nav-app/
+```
+
+2. Install dependencies:
 
-1. Run `ng serve` within the **nav-app** directory
-2. Navigate to `localhost:4200` in browser
+```bash
+npm install
+```
 
-### Compile for use elsewhere
+### Development
 
-1. Run `ng build` within the **nav-app** directory
-2. Copy files from `nav-app/dist/` directory
+#### Local
 
-_Note: `ng build --configuration production` does not currently work for ATT&CK Navigator without additional flags. To build the production environment instead use `ng build --configuration production --aot=false --build-optimizer=false`._
+Start the Angular development server:
 
-### Running the Navigator offline
+```bash
+ng serve
+```
 
-1. Install the Navigator as per instructions above.
-2. Follow instructions under [loading content from local files](#Loading-content-from-local-files) to configure the Navigator to populate the matrix without an internet connection. The latest MITRE ATT&CK data files can be found here:
-	- [Enterprise ATT&CK](https://github.com/mitre-attack/attack-stix-data/raw/master/enterprise-attack/enterprise-attack.json).
-	- [Mobile ATT&CK](https://github.com/mitre-attack/attack-stix-data/raw/master/mobile-attack/mobile-attack.json).
-	- [ICS ATT&CK](https://github.com/mitre-attack/attack-stix-data/raw/master/ics-attack/ics-attack.json).
+Open <http://localhost:4200> in your browser.
+
+#### Using Docker
+
+Build and run the development Docker container:
+
+```bash
+docker build -f Dockerfile.dev -t nav-app-dev .
+docker run -p 4200:4200 nav-app-dev
+```
+
+Open <http://localhost:4200> in your browser.
+
+### Deployment
+
+#### Building for Deployment
+
+Compile the application:
+
+```bash
+ng build --configuration production
+```
+
+The output files will be located in `nav-app/dist/browser/`.
+
+#### Serve Using Docker
+
+Build and run a Docker container:
+
+```bash
+docker build -t nav-app-prod .
+docker run -p 8080:80 nav-app-prod
+```
+
+Open <http://localhost:8080> in your browser.
+
+### Running Offline
+
+Install or build the Navigator using one of the options above. Then, configure it to load content from local files (see [Loading Content from Local Files](#loading-content-from-local-files)). The latest MITRE ATT&CK data files can be found here:
+
+* [Enterprise ATT&CK](https://github.com/mitre-attack/attack-stix-data/raw/master/enterprise-attack/enterprise-attack.json)
+* [Mobile ATT&CK](https://github.com/mitre-attack/attack-stix-data/raw/master/mobile-attack/mobile-attack.json)
+* [ICS ATT&CK](https://github.com/mitre-attack/attack-stix-data/raw/master/ics-attack/ics-attack.json)
 
 ## Documentation
 
@@ -218,13 +261,6 @@ Navigator can be populated using files that consist of bundles of STIX objects,
 },
 ```
 
-## Running the Docker File
-
-1. Navigate to the directory where you checked out the git repository
-2. Run `docker build -t yourcustomname .`
-3. Run `docker run -p 4200:4200 yourcustomname`
-4. Navigate to `localhost:4200` in browser
-
 ## Loading Default Layers Upon Initialization
 
 The Navigator can be configured so as to load a set of layers upon initialization. These layers can be from the web and/or from local files.

From aacafdef846c1b9ce55770a8560dc81ecc7308c2 Mon Sep 17 00:00:00 2001
From: Charissa Miller <48832936+clemiller@users.noreply.github.com>
Date: Tue, 30 Dec 2025 13:42:08 -0500
Subject: [PATCH 5/7] update Dockerfile.dev

---
 Dockerfile.dev | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/Dockerfile.dev b/Dockerfile.dev
index aa80567c..b2a3703a 100644
--- a/Dockerfile.dev
+++ b/Dockerfile.dev
@@ -7,7 +7,7 @@ COPY ./nav-app/package.json ./
 COPY ./nav-app/package-lock.json ./
 RUN npm install
 
-# copy source and build
+# copy source
 COPY ./nav-app/ ./
 
 # copy layers directory and in-app documentation
@@ -15,6 +15,7 @@ WORKDIR /src
 COPY layers/ ./layers/
 COPY *.md ./
 
+WORKDIR /src/nav-app
 EXPOSE 4200
 
 CMD ["npm", "start"]
\ No newline at end of file

From 4c8f41d4ea7ea5ab70f2e513ad72ad876cf26941 Mon Sep 17 00:00:00 2001
From: Charissa Miller <48832936+clemiller@users.noreply.github.com>
Date: Tue, 30 Dec 2025 14:56:01 -0500
Subject: [PATCH 6/7] address deprecated sass fns and mixed declarations

---
 nav-app/src/app/app.component.scss            |  8 +--
 .../app/datatable/data-table.component.scss   |  6 ++-
 .../layer-settings.component.scss             |  6 ++-
 .../layer-upgrade.component.scss              |  6 ++-
 .../app/list-input/list-input.component.scss  |  4 +-
 .../matrix-flat/matrix-flat.component.scss    |  6 ++-
 .../matrix-mini/matrix-mini.component.scss    | 10 ----
 .../matrix-side/matrix-side.component.scss    | 17 ++----
 .../contextmenu/contextmenu.component.scss    |  4 +-
 nav-app/src/app/tabs/tabs.component.scss      | 54 ++++++++++---------
 nav-app/src/colors.scss                       |  6 ++-
 nav-app/src/styles.scss                       | 39 +++++++-------
 12 files changed, 83 insertions(+), 83 deletions(-)

diff --git a/nav-app/src/app/app.component.scss b/nav-app/src/app/app.component.scss
index d5f5c8d1..b0ea9551 100755
--- a/nav-app/src/app/app.component.scss
+++ b/nav-app/src/app/app.component.scss
@@ -1,12 +1,14 @@
+@use 'sass:color';
+
 @import '../colors.scss';
 
 .app-container {
-    @include adaptive-color('background-color', color(body), color(dark-1));
     height: 100vh;
+    @include adaptive-color('background-color', color(body), color(dark-1));
 }
 
 .nav-app {
-    @include adaptive-color('background-color', color(light), darken(color(dark), 8%));
+    @include adaptive-color('background-color', color(light), color.scale(color(dark), $lightness: -8%));
 
     tabs {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -14,7 +16,6 @@
     }
 
     .version-footer {
-        @include adaptive-color('color', on-color(light), on-color(dark-2));
         font-size: 7pt;
         border: none;
         background-color: transparent;
@@ -24,6 +25,7 @@
         display: block;
         position: fixed;
         bottom: 16px;
+        @include adaptive-color('color', on-color(light), on-color(dark-2));
         &:hover {
             text-decoration: underline;
             cursor: pointer;
diff --git a/nav-app/src/app/datatable/data-table.component.scss b/nav-app/src/app/datatable/data-table.component.scss
index 0f9818b2..f097d043 100755
--- a/nav-app/src/app/datatable/data-table.component.scss
+++ b/nav-app/src/app/datatable/data-table.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @import '../../colors.scss';
 @import '../../styles.scss';
 
@@ -15,7 +17,7 @@ $cellSize: 15px;
 
 // content of each tab
 .matrices {
-    @include adaptive-color-dark-only('background-color', lighten(color(dark-1), 3%));
+    @include adaptive-color-dark-only('background-color', color.scale(color(dark-1), $lightness: 3%));
     @include adaptive-color-dark-only('color', on-color(dark));
     @include adaptive-color-dark-only('border', none);
     overflow-x: scroll;
@@ -81,7 +83,7 @@ $cellSize: 15px;
             display: block;
             height: $cellSize;
             font-size: 10pt;
-            color: darken(white, 50%);
+            color: color.scale(white, $lightness: -50%);
         }
     }
 }
diff --git a/nav-app/src/app/layer-settings/layer-settings.component.scss b/nav-app/src/app/layer-settings/layer-settings.component.scss
index 5e43b197..08657a23 100644
--- a/nav-app/src/app/layer-settings/layer-settings.component.scss
+++ b/nav-app/src/app/layer-settings/layer-settings.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @import '../../colors.scss';
 .layer-settings {
     .sidebar-content {
@@ -52,10 +54,10 @@
         &.mat-form-field-disabled {
             .mat-mdc-floating-label,
             .mdc-text-field__input {
-                @include adaptive-color-dark-only('color', darken(on-color(dark-1), 25%));
+                @include adaptive-color-dark-only('color', color.scale(on-color(dark-1), $lightness: -25%));
             }
             .mdc-line-ripple::before {
-                @include adaptive-color-dark-only('border-bottom-color', darken(on-color(dark-1), 25%));
+                @include adaptive-color-dark-only('border-bottom-color', color.scale(on-color(dark-1), $lightness: -25%));
             }
         }
         .mat-mdc-form-field-hint {
diff --git a/nav-app/src/app/layer-upgrade/layer-upgrade.component.scss b/nav-app/src/app/layer-upgrade/layer-upgrade.component.scss
index c8ee08e7..702c7871 100644
--- a/nav-app/src/app/layer-upgrade/layer-upgrade.component.scss
+++ b/nav-app/src/app/layer-upgrade/layer-upgrade.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @import '../../colors.scss';
 
 .title {
@@ -30,7 +32,7 @@ h4 {
     cursor: pointer;
     box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
     &:hover {
-        background-color: darken(color(panel-dark), 5%);
+        background-color: color.scale(color(panel-dark), $lightness: -5%);
     }
 }
 
@@ -97,7 +99,7 @@ tr td {
         font-size: 16px;
     }
     &:disabled {
-        @include adaptive-color('background-color', lighten(color(panel-dark), 5%), color(dark-2));
+        @include adaptive-color('background-color', color.scale(color(panel-dark), $lightness: 5%), color(dark-2));
         cursor: unset;
     }
 }
diff --git a/nav-app/src/app/list-input/list-input.component.scss b/nav-app/src/app/list-input/list-input.component.scss
index 98db8bd3..2b451db5 100644
--- a/nav-app/src/app/list-input/list-input.component.scss
+++ b/nav-app/src/app/list-input/list-input.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @import '../../colors.scss';
 
 .list-container,
@@ -66,7 +68,7 @@
     &.divider {
         .line,
         .icon {
-            @include adaptive-color('background-color', darken(color(panel-dark), 40%), lighten(color(dark-4), 40%));
+            @include adaptive-color('background-color', color.scale(color(panel-dark), $lightness: -40%), color.scale(color(dark-4), $lightness: 40%));
         }
     }
     &:hover .line,
diff --git a/nav-app/src/app/matrix/matrix-flat/matrix-flat.component.scss b/nav-app/src/app/matrix/matrix-flat/matrix-flat.component.scss
index 7f64e2d7..911f4a5b 100644
--- a/nav-app/src/app/matrix/matrix-flat/matrix-flat.component.scss
+++ b/nav-app/src/app/matrix/matrix-flat/matrix-flat.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @import '../matrix-common.scss';
 .matrix.flat {
     .tactic {
@@ -20,7 +22,7 @@
             position: sticky;
             top: 0.05px;
             z-index: 9999;
-            @include adaptive-color-dark-only('background-color', lighten(color(dark-1), 3%));
+            @include adaptive-color-dark-only('background-color', color.scale(color(dark-1), $lightness: 3%));
             @include adaptive-color-light-only('background-color', white);
         }
 
@@ -35,7 +37,7 @@
             position: sticky;
             top: 32px;
             z-index: 9999;
-            @include adaptive-color-dark-only('background-color', lighten(color(dark-1), 3%));
+            @include adaptive-color-dark-only('background-color', color.scale(color(dark-1), $lightness: 3%));
             @include adaptive-color-light-only('background-color', white);
         }
 
diff --git a/nav-app/src/app/matrix/matrix-mini/matrix-mini.component.scss b/nav-app/src/app/matrix/matrix-mini/matrix-mini.component.scss
index f11bd8d2..2252d555 100644
--- a/nav-app/src/app/matrix/matrix-mini/matrix-mini.component.scss
+++ b/nav-app/src/app/matrix/matrix-mini/matrix-mini.component.scss
@@ -13,9 +13,6 @@
     .tactic.body {
         padding-top: 5px;
         vertical-align: top;
-        // display: flex;
-        // flex-wrap: wrap;
-        // justify-content: space-between;
 
         .cell-container {
             margin-right: math.div($sizeunit, 6);
@@ -23,15 +20,8 @@
             &:not(.supertechnique-group) {
                 display: inline-block;
             }
-            // margin: 0 2px 0 2px;
             &.supertechnique-group {
-                // background: color(panel-light);
-                // border-top: 1px solid darken(color(panel-light), 5%);
-                // border-bottom: 1px solid darken(color(panel-light), 5%);
-                // padding-top: 3px;
-                // transform: translateX(-3px);
                 box-shadow: 0 0 0 1px on-color-deemphasis(body) inset;
-                // padding: 3px 0 0 3px;
                 padding-top: 1px + math.div($sizeunit, 2);
                 padding-left: 1px + math.div($sizeunit, 2);
                 padding-bottom: math.div($sizeunit, 3);
diff --git a/nav-app/src/app/matrix/matrix-side/matrix-side.component.scss b/nav-app/src/app/matrix/matrix-side/matrix-side.component.scss
index 7ffdc89b..2c961515 100644
--- a/nav-app/src/app/matrix/matrix-side/matrix-side.component.scss
+++ b/nav-app/src/app/matrix/matrix-side/matrix-side.component.scss
@@ -1,11 +1,6 @@
+@use 'sass:color';
 @import '../matrix-common.scss';
 .matrix.side {
-    // thead {
-    // //     background-color: color(matrix-header);
-    // //     color: on-color(matrix-header);
-    //     @include adaptive-color-dark-only("background-color", lighten(color(dark-1), 3%));
-    // }
-    // white-space: nowrap;
     .tactic {
         padding: 2px;
         width: 1%;
@@ -18,7 +13,6 @@
         &.name {
             cursor: pointer;
             font-weight: bold;
-            // height: (($sizeunit + 2) * 3);
             vertical-align: bottom;
             @media print {
                 font-size: $sizeunit_print - 4px;
@@ -26,7 +20,7 @@
             position: sticky;
             top: 0.05px;
             z-index: 9999;
-            @include adaptive-color-dark-only('background-color', lighten(color(dark-1), 3%));
+            @include adaptive-color-dark-only('background-color', color.scale(color(dark-1), $lightness: 3%));
             @include adaptive-color-light-only('background-color', white);
         }
         &.count {
@@ -42,7 +36,7 @@
             position: sticky;
             top: 35px;
             z-index: 9999;
-            @include adaptive-color-dark-only('background-color', lighten(color(dark-1), 3%));
+            @include adaptive-color-dark-only('background-color', color.scale(color(dark-1), $lightness: 3%));
             @include adaptive-color-light-only('background-color', white);
         }
         .techniques-table {
@@ -66,10 +60,7 @@
             td {
                 padding: 0;
                 vertical-align: top;
-
                 &.technique {
-                    // outline: 1px solid on-color-deemphasis(body);
-                    // outline-offset: -1px;
                     @include adaptive-color('box-shadow', 0 0 0 1px on-color-deemphasis(body) inset, 0 0 0 1px color(dark-3) inset);
                 }
             }
@@ -123,7 +114,7 @@
             pointer-events: none;
         }
         &.expanded .angle {
-            @include adaptive-color('background', color(body), lighten(color(dark-1), 3%));
+            @include adaptive-color('background', color(body), color.scale(color(dark-1), $lightness: 3%));
             height: 12px;
             display: block;
             position: absolute;
diff --git a/nav-app/src/app/matrix/technique-cell/contextmenu/contextmenu.component.scss b/nav-app/src/app/matrix/technique-cell/contextmenu/contextmenu.component.scss
index 919a3e48..a0cc44ec 100644
--- a/nav-app/src/app/matrix/technique-cell/contextmenu/contextmenu.component.scss
+++ b/nav-app/src/app/matrix/technique-cell/contextmenu/contextmenu.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @import '../cell-popover.scss';
 @import '../../../../colors.scss';
 .contextmenu {
@@ -33,7 +35,7 @@
             .contextMenu-button {
                 cursor: pointer;
                 &:hover {
-                    @include adaptive-color('background', color(cell-highlight-color), darken(color(cell-highlight-dark-color), 10%));
+                    @include adaptive-color('background', color(cell-highlight-color), color.scale(color(cell-highlight-dark-color), $lightness: -10%));
                 }
             }
         }
diff --git a/nav-app/src/app/tabs/tabs.component.scss b/nav-app/src/app/tabs/tabs.component.scss
index b24eb65c..1bf6b837 100755
--- a/nav-app/src/app/tabs/tabs.component.scss
+++ b/nav-app/src/app/tabs/tabs.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @import '../../colors.scss';
 
 .header-wrapper {
@@ -37,11 +39,11 @@
 .tabs {
     .tab-title {
         // non-datatable tab names
-        @include adaptive-color('color', black, white);
         font-size: 14px;
         text-decoration: none;
         display: flex;
         justify-content: space-around;
+        @include adaptive-color('color', black, white);
 
         &:hover,
         &:focus {
@@ -59,19 +61,19 @@
 
         // tab number for layer operations
         .tab-enumerator {
-            @include adaptive-color-dark-only('color', color(dark-1));
             position: absolute;
             top: 4px;
             right: -4px;
             padding: 2px 4px;
             background: rgb(255, 255, 0);
             border-radius: 5px;
+            @include adaptive-color-dark-only('color', color(dark-1));
         }
 
         &.active {
-            @include adaptive-color('background-color', color(panel-dark), lighten(color(dark), 1%));
-            @include adaptive-color('color', color(tab-text-color), color(panel-dark));
             cursor: default;
+            @include adaptive-color('background-color', color(panel-dark), color.scale(color(dark), $lightness: 1%));
+            @include adaptive-color('color', color(tab-text-color), color(panel-dark));
         }
     }
 
@@ -81,8 +83,8 @@
             color: gray;
         }
         &:hover {
-            @include adaptive-color('background-color', #f1f1f1, color(dark-2));
             border-color: #ddd #ddd #f1f1f1 #ddd;
+            @include adaptive-color('background-color', #f1f1f1, color(dark-2));
             .mat-icon {
                 // override mat icon color on hover
                 @include adaptive-color('color', black, white);
@@ -101,9 +103,6 @@
 }
 
 .new-tab {
-    @include adaptive-color('background-color', color(light), color(dark-1));
-    @include adaptive-color('color', on-color(light), on-color(dark));
-    @include adaptive-color('border-color', color(panel-dark), color(dark-1));
     border-width: 1px;
     border-style: solid;
     height: 90%;
@@ -112,6 +111,9 @@
     box-sizing: border-box;
     position: absolute;
     padding: 5% 20%;
+    @include adaptive-color('background-color', color(light), color(dark-1));
+    @include adaptive-color('color', on-color(light), on-color(dark));
+    @include adaptive-color('border-color', color(panel-dark), color(dark-1));
 
     .description {
         display: flex;
@@ -136,10 +138,10 @@
 }
 
 .tab-enumerator-highlight {
-    @include adaptive-color-dark-only('color', color(dark-1));
     padding: 2px 4px;
     background: rgb(255, 255, 0);
     border-radius: 5px;
+    @include adaptive-color-dark-only('color', color(dark-1));
 }
 
 .hide-select .mat-mdc-select-value {
@@ -202,11 +204,11 @@
         .layerOpTable td.disabled {
             .mat-mdc-floating-label,
             .mat-mdc-select-arrow {
-                @include adaptive-color-dark-only('color', darken(on-color(dark-1), 25%));
+                @include adaptive-color-dark-only('color', color.scale(on-color(dark-1), $lightness: -25%));
             }
         }
         &.mat-form-field-disabled .mdc-line-ripple::before {
-            @include adaptive-color-dark-only('border-bottom-color', darken(on-color(dark-1), 25%));
+            @include adaptive-color-dark-only('border-bottom-color', color.scale(on-color(dark-1), $lightness: -25%));
         }
         &:not(.mat-form-field-disabled) .mdc-line-ripple::before {
             @include adaptive-color-dark-only('border-bottom-color', on-color(dark-3));
@@ -225,7 +227,7 @@
         &:disabled {
             @include adaptive-color-dark-only('background-color', color(dark-1));
             @include adaptive-color-dark-only('border', color(dark-2) 2px solid);
-            @include adaptive-color-dark-only('color', darken(on-color(dark-1), 50%));
+            @include adaptive-color-dark-only('color', color.scale(on-color(dark-1), $lightness: -50%));
         }
     }
 
@@ -241,14 +243,14 @@
 
 .headers-align .mat-expansion-panel-header-title,
 .headers-align .mat-expansion-panel-header-description {
-    @include adaptive-color('color', on-color(light), darken(on-color(dark), 10%));
     flex-basis: 0;
+    @include adaptive-color('color', on-color(light), color.scale(on-color(dark), $lightness: -10%));
 }
 
 .headers-align .mat-expansion-panel-header-description {
-    @include adaptive-color-dark-only('color', darken(on-color(dark), 15%));
     justify-content: space-between;
     align-items: center;
+    @include adaptive-color-dark-only('color', color.scale(on-color(dark), $lightness: -15%));
 }
 
 input[type='file'] {
@@ -314,34 +316,30 @@ input[type='file'] {
         }
 
         &:hover svg {
-            @include adaptive-color-dark-only('fill', on-color(dark));
             fill: #505050;
+            @include adaptive-color-dark-only('fill', on-color(dark));
         }
     }
 
     .help-dropdown-open {
+        border-radius: 50% 50% 0 0;
+        border: solid color(panel-dark) 1px;
+        border-bottom: solid 1px white;
+        background: white;
         @include adaptive-color-dark-only('background', color(dark-3));
         @include adaptive-color-dark-only('border', solid color(dark-2) 1px);
         @include adaptive-color-dark-only('box-shadow', 1px 2px color(dark-2));
         @include adaptive-color-dark-only('z-index', 1);
         @include adaptive-color-dark-only('border-bottom', color(dark-3));
         @include adaptive-color-dark-only('color', color(dark-link));
-        border-radius: 50% 50% 0 0;
-        border: solid color(panel-dark) 1px;
-        border-bottom: solid 1px white;
-        background: white;
 
         svg {
-            @include adaptive-color-dark-only('fill', on-color(dark));
             fill: #505050;
+            @include adaptive-color-dark-only('fill', on-color(dark));
         }
     }
 
     .dropdown-container {
-        @include adaptive-color-dark-only('background', color(dark-3));
-        @include adaptive-color-dark-only('border-color', color(dark-3));
-        @include adaptive-color-dark-only('box-shadow', 2px 1px 1px color(dark-2));
-        @include adaptive-color-dark-only('color', color(dark-link));
         position: absolute;
         right: 16px;
         display: flex;
@@ -356,13 +354,17 @@ input[type='file'] {
         padding: 10px;
         top: 40px;
         z-index: 9;
+        @include adaptive-color-dark-only('background', color(dark-3));
+        @include adaptive-color-dark-only('border-color', color(dark-3));
+        @include adaptive-color-dark-only('box-shadow', 2px 1px 1px color(dark-2));
+        @include adaptive-color-dark-only('color', color(dark-link));
 
         button {
-            @include adaptive-color-dark-only('color', on-color(dark));
             border: none;
             background-color: transparent;
             text-align: right;
             padding-bottom: 5px;
+            @include adaptive-color-dark-only('color', on-color(dark));
             &:hover {
                 text-decoration: underline;
                 cursor: pointer;
@@ -463,7 +465,7 @@ input[type='file'] {
 .feature-row {
     margin-bottom: 4px;
     &:hover {
-        @include adaptive-color('background-color', darken(white, 5%), color(dark-3));
+        @include adaptive-color('background-color', color.scale(white, $lightness: -5%), color(dark-3));
     }
     .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background {
         background-color: color(primary) !important;
diff --git a/nav-app/src/colors.scss b/nav-app/src/colors.scss
index a9d7073a..e7de7d53 100755
--- a/nav-app/src/colors.scss
+++ b/nav-app/src/colors.scss
@@ -1,5 +1,7 @@
+@use 'sass:color';
+
 $column-hover-color: rgb(235, 235, 235);
-$disabled-color: darken($column-hover-color, 20%);
+$disabled-color: color.scale($column-hover-color, $lightness: -20%);
 
 // ATT&CK Brand colors
 $attack-colors: (
@@ -89,7 +91,7 @@ $colors: (
         color: #ddd,
     ),
     panel-light: (
-        color: lighten(#ddd, 8%),
+        color: color.scale(#ddd, $lightness: 8%),
     ),
     tab-text-color: (
         color: #555,
diff --git a/nav-app/src/styles.scss b/nav-app/src/styles.scss
index e87f55a5..041fccd2 100755
--- a/nav-app/src/styles.scss
+++ b/nav-app/src/styles.scss
@@ -1,7 +1,8 @@
-/* You can add global styles to this file, and also import other style files */
+@use 'sass:color';
+
 @import '@angular/material/prebuilt-themes/indigo-pink.css';
-@import '@fontsource/roboto';
-@import '@fontsource/roboto-mono';
+@import '@fontsource/roboto/400.css';
+@import '@fontsource/roboto-mono/400.css';
 @import 'colors.scss';
 
 @media print {
@@ -110,12 +111,12 @@ body {
         }
 
         code {
-            @include adaptive-color-dark-only('background-color', color(dark-1));
-            @include adaptive-color-dark-only('border-color', color(panel-dark) !important);
-            @include adaptive-color-dark-only('color', on-color(dark) !important);
             color: black;
             padding: 1px 2px;
             word-break: break-word;
+            @include adaptive-color-dark-only('background-color', color(dark-1));
+            @include adaptive-color-dark-only('border-color', color(panel-dark) !important);
+            @include adaptive-color-dark-only('color', on-color(dark) !important);
         }
     }
 
@@ -153,10 +154,9 @@ body {
 
 // panel with controls
 .controlsContainer {
-    @include adaptive-color('background-color', color(panel-dark), color(dark-2));
-
     text-align: right;
     display: block;
+    @include adaptive-color('background-color', color(panel-dark), color(dark-2));
     @media print {
         display: none;
     }
@@ -176,14 +176,12 @@ body {
         list-style: none;
         display: inline-block;
         // &:not(:last-child){
-        border-left: 1px solid darken(color(panel-dark), 8%);
+        border-left: 1px solid color.scale(color(panel-dark), $lightness: -8%);
         padding: 0 5px 0 5px;
         position: relative;
 
         // label for a section of controls, e.g layer controls or technique controls
         .section-label {
-            @include adaptive-color('background-color', color(panel-dark), color(dark-2));
-            @include adaptive-color('color', color(tab-text-color), on-color(dark));
             font-size: 8pt;
             top: -12px;
             position: absolute;
@@ -194,6 +192,8 @@ body {
             user-select: none;
             white-space: nowrap;
             z-index: 1;
+            @include adaptive-color('background-color', color(panel-dark), color(dark-2));
+            @include adaptive-color('color', color(tab-text-color), on-color(dark));
         }
 
         .control-row-item {
@@ -216,7 +216,7 @@ body {
                 cursor: pointer;
 
                 &:hover {
-                    @include adaptive-color('background-color', darken(color(panel-dark), 5%), color(dark-4));
+                    @include adaptive-color('background-color', color.scale(color(panel-dark), $lightness: -5%), color(dark-4));
                 }
 
                 &.dropdown::after {
@@ -233,6 +233,10 @@ body {
 
             // dropdown controls container
             .dropdown-container {
+                position: absolute;
+                z-index: 100; //draw on top of other controls
+                width: max-content;
+
                 @include adaptive-color('background-color', white, color(dark-2));
                 @include adaptive-color('border', 1px solid black, 1px solid color(dark-4));
                 @include adaptive-color('box-shadow', 0px 10px 5px rgba(0, 0, 0, 0.5), 0px 10px 5px color(dark-2));
@@ -241,9 +245,6 @@ body {
                     right: 0;
                 }
 
-                position: absolute;
-                z-index: 100; //draw on top of other controls
-                width: max-content;
 
                 &.inputfield {
                     width: 150px;
@@ -319,8 +320,8 @@ body {
     position: relative;
 
     &.disabled {
-        @include adaptive-color('color', rgba(0, 0, 0, 0.46), color(dark-disabled));
         cursor: default;
+        @include adaptive-color('color', rgba(0, 0, 0, 0.46), color(dark-disabled));
     }
 }
 
@@ -343,11 +344,11 @@ body {
 }
 
 .checkbox-custom:checked:disabled + .checkbox-custom-label:before {
-    @include adaptive-color('background', desaturate(color(cell-highlight-color), 100%), desaturate(color(cell-highlight-dark-color), 100%));
+    @include adaptive-color('background', color.scale(color(cell-highlight-color), $saturation: -100%), color.scale(color(cell-highlight-dark-color), $saturation: -100%));
     @include adaptive-color(
         'box-shadow',
-        inset 0px 0px 0px 1px desaturate(color(cell-highlight-color), 100%),
-        inset 0px 0px 0px 1px desaturate(color(cell-highlight-dark-color), 100%)
+        inset 0px 0px 0px 1px color.scale(color(cell-highlight-color), $saturation: -100%),
+        inset 0px 0px 0px 1px color.scale(color(cell-highlight-dark-color), $saturation: -100%)
     );
 }
 

From 4b2dfd803abaa3c6de21137cb52ed7aa0042f949 Mon Sep 17 00:00:00 2001
From: Charissa Miller <48832936+clemiller@users.noreply.github.com>
Date: Tue, 30 Dec 2025 14:58:55 -0500
Subject: [PATCH 7/7] Revert "address deprecated sass fns and mixed
 declarations"

This reverts commit 4c8f41d4ea7ea5ab70f2e513ad72ad876cf26941.
---
 nav-app/src/app/app.component.scss            |  8 ++-
 .../app/datatable/data-table.component.scss   |  6 +--
 .../layer-settings.component.scss             |  6 +--
 .../layer-upgrade.component.scss              |  6 +--
 .../app/list-input/list-input.component.scss  |  4 +-
 .../matrix-flat/matrix-flat.component.scss    |  6 +--
 .../matrix-mini/matrix-mini.component.scss    | 10 ++++
 .../matrix-side/matrix-side.component.scss    | 17 ++++--
 .../contextmenu/contextmenu.component.scss    |  4 +-
 nav-app/src/app/tabs/tabs.component.scss      | 54 +++++++++----------
 nav-app/src/colors.scss                       |  6 +--
 nav-app/src/styles.scss                       | 39 +++++++-------
 12 files changed, 83 insertions(+), 83 deletions(-)

diff --git a/nav-app/src/app/app.component.scss b/nav-app/src/app/app.component.scss
index b0ea9551..d5f5c8d1 100755
--- a/nav-app/src/app/app.component.scss
+++ b/nav-app/src/app/app.component.scss
@@ -1,14 +1,12 @@
-@use 'sass:color';
-
 @import '../colors.scss';
 
 .app-container {
-    height: 100vh;
     @include adaptive-color('background-color', color(body), color(dark-1));
+    height: 100vh;
 }
 
 .nav-app {
-    @include adaptive-color('background-color', color(light), color.scale(color(dark), $lightness: -8%));
+    @include adaptive-color('background-color', color(light), darken(color(dark), 8%));
 
     tabs {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -16,6 +14,7 @@
     }
 
     .version-footer {
+        @include adaptive-color('color', on-color(light), on-color(dark-2));
         font-size: 7pt;
         border: none;
         background-color: transparent;
@@ -25,7 +24,6 @@
         display: block;
         position: fixed;
         bottom: 16px;
-        @include adaptive-color('color', on-color(light), on-color(dark-2));
         &:hover {
             text-decoration: underline;
             cursor: pointer;
diff --git a/nav-app/src/app/datatable/data-table.component.scss b/nav-app/src/app/datatable/data-table.component.scss
index f097d043..0f9818b2 100755
--- a/nav-app/src/app/datatable/data-table.component.scss
+++ b/nav-app/src/app/datatable/data-table.component.scss
@@ -1,5 +1,3 @@
-@use 'sass:color';
-
 @import '../../colors.scss';
 @import '../../styles.scss';
 
@@ -17,7 +15,7 @@ $cellSize: 15px;
 
 // content of each tab
 .matrices {
-    @include adaptive-color-dark-only('background-color', color.scale(color(dark-1), $lightness: 3%));
+    @include adaptive-color-dark-only('background-color', lighten(color(dark-1), 3%));
     @include adaptive-color-dark-only('color', on-color(dark));
     @include adaptive-color-dark-only('border', none);
     overflow-x: scroll;
@@ -83,7 +81,7 @@ $cellSize: 15px;
             display: block;
             height: $cellSize;
             font-size: 10pt;
-            color: color.scale(white, $lightness: -50%);
+            color: darken(white, 50%);
         }
     }
 }
diff --git a/nav-app/src/app/layer-settings/layer-settings.component.scss b/nav-app/src/app/layer-settings/layer-settings.component.scss
index 08657a23..5e43b197 100644
--- a/nav-app/src/app/layer-settings/layer-settings.component.scss
+++ b/nav-app/src/app/layer-settings/layer-settings.component.scss
@@ -1,5 +1,3 @@
-@use 'sass:color';
-
 @import '../../colors.scss';
 .layer-settings {
     .sidebar-content {
@@ -54,10 +52,10 @@
         &.mat-form-field-disabled {
             .mat-mdc-floating-label,
             .mdc-text-field__input {
-                @include adaptive-color-dark-only('color', color.scale(on-color(dark-1), $lightness: -25%));
+                @include adaptive-color-dark-only('color', darken(on-color(dark-1), 25%));
             }
             .mdc-line-ripple::before {
-                @include adaptive-color-dark-only('border-bottom-color', color.scale(on-color(dark-1), $lightness: -25%));
+                @include adaptive-color-dark-only('border-bottom-color', darken(on-color(dark-1), 25%));
             }
         }
         .mat-mdc-form-field-hint {
diff --git a/nav-app/src/app/layer-upgrade/layer-upgrade.component.scss b/nav-app/src/app/layer-upgrade/layer-upgrade.component.scss
index 702c7871..c8ee08e7 100644
--- a/nav-app/src/app/layer-upgrade/layer-upgrade.component.scss
+++ b/nav-app/src/app/layer-upgrade/layer-upgrade.component.scss
@@ -1,5 +1,3 @@
-@use 'sass:color';
-
 @import '../../colors.scss';
 
 .title {
@@ -32,7 +30,7 @@ h4 {
     cursor: pointer;
     box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
     &:hover {
-        background-color: color.scale(color(panel-dark), $lightness: -5%);
+        background-color: darken(color(panel-dark), 5%);
     }
 }
 
@@ -99,7 +97,7 @@ tr td {
         font-size: 16px;
     }
     &:disabled {
-        @include adaptive-color('background-color', color.scale(color(panel-dark), $lightness: 5%), color(dark-2));
+        @include adaptive-color('background-color', lighten(color(panel-dark), 5%), color(dark-2));
         cursor: unset;
     }
 }
diff --git a/nav-app/src/app/list-input/list-input.component.scss b/nav-app/src/app/list-input/list-input.component.scss
index 2b451db5..98db8bd3 100644
--- a/nav-app/src/app/list-input/list-input.component.scss
+++ b/nav-app/src/app/list-input/list-input.component.scss
@@ -1,5 +1,3 @@
-@use 'sass:color';
-
 @import '../../colors.scss';
 
 .list-container,
@@ -68,7 +66,7 @@
     &.divider {
         .line,
         .icon {
-            @include adaptive-color('background-color', color.scale(color(panel-dark), $lightness: -40%), color.scale(color(dark-4), $lightness: 40%));
+            @include adaptive-color('background-color', darken(color(panel-dark), 40%), lighten(color(dark-4), 40%));
         }
     }
     &:hover .line,
diff --git a/nav-app/src/app/matrix/matrix-flat/matrix-flat.component.scss b/nav-app/src/app/matrix/matrix-flat/matrix-flat.component.scss
index 911f4a5b..7f64e2d7 100644
--- a/nav-app/src/app/matrix/matrix-flat/matrix-flat.component.scss
+++ b/nav-app/src/app/matrix/matrix-flat/matrix-flat.component.scss
@@ -1,5 +1,3 @@
-@use 'sass:color';
-
 @import '../matrix-common.scss';
 .matrix.flat {
     .tactic {
@@ -22,7 +20,7 @@
             position: sticky;
             top: 0.05px;
             z-index: 9999;
-            @include adaptive-color-dark-only('background-color', color.scale(color(dark-1), $lightness: 3%));
+            @include adaptive-color-dark-only('background-color', lighten(color(dark-1), 3%));
             @include adaptive-color-light-only('background-color', white);
         }
 
@@ -37,7 +35,7 @@
             position: sticky;
             top: 32px;
             z-index: 9999;
-            @include adaptive-color-dark-only('background-color', color.scale(color(dark-1), $lightness: 3%));
+            @include adaptive-color-dark-only('background-color', lighten(color(dark-1), 3%));
             @include adaptive-color-light-only('background-color', white);
         }
 
diff --git a/nav-app/src/app/matrix/matrix-mini/matrix-mini.component.scss b/nav-app/src/app/matrix/matrix-mini/matrix-mini.component.scss
index 2252d555..f11bd8d2 100644
--- a/nav-app/src/app/matrix/matrix-mini/matrix-mini.component.scss
+++ b/nav-app/src/app/matrix/matrix-mini/matrix-mini.component.scss
@@ -13,6 +13,9 @@
     .tactic.body {
         padding-top: 5px;
         vertical-align: top;
+        // display: flex;
+        // flex-wrap: wrap;
+        // justify-content: space-between;
 
         .cell-container {
             margin-right: math.div($sizeunit, 6);
@@ -20,8 +23,15 @@
             &:not(.supertechnique-group) {
                 display: inline-block;
             }
+            // margin: 0 2px 0 2px;
             &.supertechnique-group {
+                // background: color(panel-light);
+                // border-top: 1px solid darken(color(panel-light), 5%);
+                // border-bottom: 1px solid darken(color(panel-light), 5%);
+                // padding-top: 3px;
+                // transform: translateX(-3px);
                 box-shadow: 0 0 0 1px on-color-deemphasis(body) inset;
+                // padding: 3px 0 0 3px;
                 padding-top: 1px + math.div($sizeunit, 2);
                 padding-left: 1px + math.div($sizeunit, 2);
                 padding-bottom: math.div($sizeunit, 3);
diff --git a/nav-app/src/app/matrix/matrix-side/matrix-side.component.scss b/nav-app/src/app/matrix/matrix-side/matrix-side.component.scss
index 2c961515..7ffdc89b 100644
--- a/nav-app/src/app/matrix/matrix-side/matrix-side.component.scss
+++ b/nav-app/src/app/matrix/matrix-side/matrix-side.component.scss
@@ -1,6 +1,11 @@
-@use 'sass:color';
 @import '../matrix-common.scss';
 .matrix.side {
+    // thead {
+    // //     background-color: color(matrix-header);
+    // //     color: on-color(matrix-header);
+    //     @include adaptive-color-dark-only("background-color", lighten(color(dark-1), 3%));
+    // }
+    // white-space: nowrap;
     .tactic {
         padding: 2px;
         width: 1%;
@@ -13,6 +18,7 @@
         &.name {
             cursor: pointer;
             font-weight: bold;
+            // height: (($sizeunit + 2) * 3);
             vertical-align: bottom;
             @media print {
                 font-size: $sizeunit_print - 4px;
@@ -20,7 +26,7 @@
             position: sticky;
             top: 0.05px;
             z-index: 9999;
-            @include adaptive-color-dark-only('background-color', color.scale(color(dark-1), $lightness: 3%));
+            @include adaptive-color-dark-only('background-color', lighten(color(dark-1), 3%));
             @include adaptive-color-light-only('background-color', white);
         }
         &.count {
@@ -36,7 +42,7 @@
             position: sticky;
             top: 35px;
             z-index: 9999;
-            @include adaptive-color-dark-only('background-color', color.scale(color(dark-1), $lightness: 3%));
+            @include adaptive-color-dark-only('background-color', lighten(color(dark-1), 3%));
             @include adaptive-color-light-only('background-color', white);
         }
         .techniques-table {
@@ -60,7 +66,10 @@
             td {
                 padding: 0;
                 vertical-align: top;
+
                 &.technique {
+                    // outline: 1px solid on-color-deemphasis(body);
+                    // outline-offset: -1px;
                     @include adaptive-color('box-shadow', 0 0 0 1px on-color-deemphasis(body) inset, 0 0 0 1px color(dark-3) inset);
                 }
             }
@@ -114,7 +123,7 @@
             pointer-events: none;
         }
         &.expanded .angle {
-            @include adaptive-color('background', color(body), color.scale(color(dark-1), $lightness: 3%));
+            @include adaptive-color('background', color(body), lighten(color(dark-1), 3%));
             height: 12px;
             display: block;
             position: absolute;
diff --git a/nav-app/src/app/matrix/technique-cell/contextmenu/contextmenu.component.scss b/nav-app/src/app/matrix/technique-cell/contextmenu/contextmenu.component.scss
index a0cc44ec..919a3e48 100644
--- a/nav-app/src/app/matrix/technique-cell/contextmenu/contextmenu.component.scss
+++ b/nav-app/src/app/matrix/technique-cell/contextmenu/contextmenu.component.scss
@@ -1,5 +1,3 @@
-@use 'sass:color';
-
 @import '../cell-popover.scss';
 @import '../../../../colors.scss';
 .contextmenu {
@@ -35,7 +33,7 @@
             .contextMenu-button {
                 cursor: pointer;
                 &:hover {
-                    @include adaptive-color('background', color(cell-highlight-color), color.scale(color(cell-highlight-dark-color), $lightness: -10%));
+                    @include adaptive-color('background', color(cell-highlight-color), darken(color(cell-highlight-dark-color), 10%));
                 }
             }
         }
diff --git a/nav-app/src/app/tabs/tabs.component.scss b/nav-app/src/app/tabs/tabs.component.scss
index 1bf6b837..b24eb65c 100755
--- a/nav-app/src/app/tabs/tabs.component.scss
+++ b/nav-app/src/app/tabs/tabs.component.scss
@@ -1,5 +1,3 @@
-@use 'sass:color';
-
 @import '../../colors.scss';
 
 .header-wrapper {
@@ -39,11 +37,11 @@
 .tabs {
     .tab-title {
         // non-datatable tab names
+        @include adaptive-color('color', black, white);
         font-size: 14px;
         text-decoration: none;
         display: flex;
         justify-content: space-around;
-        @include adaptive-color('color', black, white);
 
         &:hover,
         &:focus {
@@ -61,19 +59,19 @@
 
         // tab number for layer operations
         .tab-enumerator {
+            @include adaptive-color-dark-only('color', color(dark-1));
             position: absolute;
             top: 4px;
             right: -4px;
             padding: 2px 4px;
             background: rgb(255, 255, 0);
             border-radius: 5px;
-            @include adaptive-color-dark-only('color', color(dark-1));
         }
 
         &.active {
-            cursor: default;
-            @include adaptive-color('background-color', color(panel-dark), color.scale(color(dark), $lightness: 1%));
+            @include adaptive-color('background-color', color(panel-dark), lighten(color(dark), 1%));
             @include adaptive-color('color', color(tab-text-color), color(panel-dark));
+            cursor: default;
         }
     }
 
@@ -83,8 +81,8 @@
             color: gray;
         }
         &:hover {
-            border-color: #ddd #ddd #f1f1f1 #ddd;
             @include adaptive-color('background-color', #f1f1f1, color(dark-2));
+            border-color: #ddd #ddd #f1f1f1 #ddd;
             .mat-icon {
                 // override mat icon color on hover
                 @include adaptive-color('color', black, white);
@@ -103,6 +101,9 @@
 }
 
 .new-tab {
+    @include adaptive-color('background-color', color(light), color(dark-1));
+    @include adaptive-color('color', on-color(light), on-color(dark));
+    @include adaptive-color('border-color', color(panel-dark), color(dark-1));
     border-width: 1px;
     border-style: solid;
     height: 90%;
@@ -111,9 +112,6 @@
     box-sizing: border-box;
     position: absolute;
     padding: 5% 20%;
-    @include adaptive-color('background-color', color(light), color(dark-1));
-    @include adaptive-color('color', on-color(light), on-color(dark));
-    @include adaptive-color('border-color', color(panel-dark), color(dark-1));
 
     .description {
         display: flex;
@@ -138,10 +136,10 @@
 }
 
 .tab-enumerator-highlight {
+    @include adaptive-color-dark-only('color', color(dark-1));
     padding: 2px 4px;
     background: rgb(255, 255, 0);
     border-radius: 5px;
-    @include adaptive-color-dark-only('color', color(dark-1));
 }
 
 .hide-select .mat-mdc-select-value {
@@ -204,11 +202,11 @@
         .layerOpTable td.disabled {
             .mat-mdc-floating-label,
             .mat-mdc-select-arrow {
-                @include adaptive-color-dark-only('color', color.scale(on-color(dark-1), $lightness: -25%));
+                @include adaptive-color-dark-only('color', darken(on-color(dark-1), 25%));
             }
         }
         &.mat-form-field-disabled .mdc-line-ripple::before {
-            @include adaptive-color-dark-only('border-bottom-color', color.scale(on-color(dark-1), $lightness: -25%));
+            @include adaptive-color-dark-only('border-bottom-color', darken(on-color(dark-1), 25%));
         }
         &:not(.mat-form-field-disabled) .mdc-line-ripple::before {
             @include adaptive-color-dark-only('border-bottom-color', on-color(dark-3));
@@ -227,7 +225,7 @@
         &:disabled {
             @include adaptive-color-dark-only('background-color', color(dark-1));
             @include adaptive-color-dark-only('border', color(dark-2) 2px solid);
-            @include adaptive-color-dark-only('color', color.scale(on-color(dark-1), $lightness: -50%));
+            @include adaptive-color-dark-only('color', darken(on-color(dark-1), 50%));
         }
     }
 
@@ -243,14 +241,14 @@
 
 .headers-align .mat-expansion-panel-header-title,
 .headers-align .mat-expansion-panel-header-description {
+    @include adaptive-color('color', on-color(light), darken(on-color(dark), 10%));
     flex-basis: 0;
-    @include adaptive-color('color', on-color(light), color.scale(on-color(dark), $lightness: -10%));
 }
 
 .headers-align .mat-expansion-panel-header-description {
+    @include adaptive-color-dark-only('color', darken(on-color(dark), 15%));
     justify-content: space-between;
     align-items: center;
-    @include adaptive-color-dark-only('color', color.scale(on-color(dark), $lightness: -15%));
 }
 
 input[type='file'] {
@@ -316,30 +314,34 @@ input[type='file'] {
         }
 
         &:hover svg {
-            fill: #505050;
             @include adaptive-color-dark-only('fill', on-color(dark));
+            fill: #505050;
         }
     }
 
     .help-dropdown-open {
-        border-radius: 50% 50% 0 0;
-        border: solid color(panel-dark) 1px;
-        border-bottom: solid 1px white;
-        background: white;
         @include adaptive-color-dark-only('background', color(dark-3));
         @include adaptive-color-dark-only('border', solid color(dark-2) 1px);
         @include adaptive-color-dark-only('box-shadow', 1px 2px color(dark-2));
         @include adaptive-color-dark-only('z-index', 1);
         @include adaptive-color-dark-only('border-bottom', color(dark-3));
         @include adaptive-color-dark-only('color', color(dark-link));
+        border-radius: 50% 50% 0 0;
+        border: solid color(panel-dark) 1px;
+        border-bottom: solid 1px white;
+        background: white;
 
         svg {
-            fill: #505050;
             @include adaptive-color-dark-only('fill', on-color(dark));
+            fill: #505050;
         }
     }
 
     .dropdown-container {
+        @include adaptive-color-dark-only('background', color(dark-3));
+        @include adaptive-color-dark-only('border-color', color(dark-3));
+        @include adaptive-color-dark-only('box-shadow', 2px 1px 1px color(dark-2));
+        @include adaptive-color-dark-only('color', color(dark-link));
         position: absolute;
         right: 16px;
         display: flex;
@@ -354,17 +356,13 @@ input[type='file'] {
         padding: 10px;
         top: 40px;
         z-index: 9;
-        @include adaptive-color-dark-only('background', color(dark-3));
-        @include adaptive-color-dark-only('border-color', color(dark-3));
-        @include adaptive-color-dark-only('box-shadow', 2px 1px 1px color(dark-2));
-        @include adaptive-color-dark-only('color', color(dark-link));
 
         button {
+            @include adaptive-color-dark-only('color', on-color(dark));
             border: none;
             background-color: transparent;
             text-align: right;
             padding-bottom: 5px;
-            @include adaptive-color-dark-only('color', on-color(dark));
             &:hover {
                 text-decoration: underline;
                 cursor: pointer;
@@ -465,7 +463,7 @@ input[type='file'] {
 .feature-row {
     margin-bottom: 4px;
     &:hover {
-        @include adaptive-color('background-color', color.scale(white, $lightness: -5%), color(dark-3));
+        @include adaptive-color('background-color', darken(white, 5%), color(dark-3));
     }
     .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background {
         background-color: color(primary) !important;
diff --git a/nav-app/src/colors.scss b/nav-app/src/colors.scss
index e7de7d53..a9d7073a 100755
--- a/nav-app/src/colors.scss
+++ b/nav-app/src/colors.scss
@@ -1,7 +1,5 @@
-@use 'sass:color';
-
 $column-hover-color: rgb(235, 235, 235);
-$disabled-color: color.scale($column-hover-color, $lightness: -20%);
+$disabled-color: darken($column-hover-color, 20%);
 
 // ATT&CK Brand colors
 $attack-colors: (
@@ -91,7 +89,7 @@ $colors: (
         color: #ddd,
     ),
     panel-light: (
-        color: color.scale(#ddd, $lightness: 8%),
+        color: lighten(#ddd, 8%),
     ),
     tab-text-color: (
         color: #555,
diff --git a/nav-app/src/styles.scss b/nav-app/src/styles.scss
index 041fccd2..e87f55a5 100755
--- a/nav-app/src/styles.scss
+++ b/nav-app/src/styles.scss
@@ -1,8 +1,7 @@
-@use 'sass:color';
-
+/* You can add global styles to this file, and also import other style files */
 @import '@angular/material/prebuilt-themes/indigo-pink.css';
-@import '@fontsource/roboto/400.css';
-@import '@fontsource/roboto-mono/400.css';
+@import '@fontsource/roboto';
+@import '@fontsource/roboto-mono';
 @import 'colors.scss';
 
 @media print {
@@ -111,12 +110,12 @@ body {
         }
 
         code {
-            color: black;
-            padding: 1px 2px;
-            word-break: break-word;
             @include adaptive-color-dark-only('background-color', color(dark-1));
             @include adaptive-color-dark-only('border-color', color(panel-dark) !important);
             @include adaptive-color-dark-only('color', on-color(dark) !important);
+            color: black;
+            padding: 1px 2px;
+            word-break: break-word;
         }
     }
 
@@ -154,9 +153,10 @@ body {
 
 // panel with controls
 .controlsContainer {
+    @include adaptive-color('background-color', color(panel-dark), color(dark-2));
+
     text-align: right;
     display: block;
-    @include adaptive-color('background-color', color(panel-dark), color(dark-2));
     @media print {
         display: none;
     }
@@ -176,12 +176,14 @@ body {
         list-style: none;
         display: inline-block;
         // &:not(:last-child){
-        border-left: 1px solid color.scale(color(panel-dark), $lightness: -8%);
+        border-left: 1px solid darken(color(panel-dark), 8%);
         padding: 0 5px 0 5px;
         position: relative;
 
         // label for a section of controls, e.g layer controls or technique controls
         .section-label {
+            @include adaptive-color('background-color', color(panel-dark), color(dark-2));
+            @include adaptive-color('color', color(tab-text-color), on-color(dark));
             font-size: 8pt;
             top: -12px;
             position: absolute;
@@ -192,8 +194,6 @@ body {
             user-select: none;
             white-space: nowrap;
             z-index: 1;
-            @include adaptive-color('background-color', color(panel-dark), color(dark-2));
-            @include adaptive-color('color', color(tab-text-color), on-color(dark));
         }
 
         .control-row-item {
@@ -216,7 +216,7 @@ body {
                 cursor: pointer;
 
                 &:hover {
-                    @include adaptive-color('background-color', color.scale(color(panel-dark), $lightness: -5%), color(dark-4));
+                    @include adaptive-color('background-color', darken(color(panel-dark), 5%), color(dark-4));
                 }
 
                 &.dropdown::after {
@@ -233,10 +233,6 @@ body {
 
             // dropdown controls container
             .dropdown-container {
-                position: absolute;
-                z-index: 100; //draw on top of other controls
-                width: max-content;
-
                 @include adaptive-color('background-color', white, color(dark-2));
                 @include adaptive-color('border', 1px solid black, 1px solid color(dark-4));
                 @include adaptive-color('box-shadow', 0px 10px 5px rgba(0, 0, 0, 0.5), 0px 10px 5px color(dark-2));
@@ -245,6 +241,9 @@ body {
                     right: 0;
                 }
 
+                position: absolute;
+                z-index: 100; //draw on top of other controls
+                width: max-content;
 
                 &.inputfield {
                     width: 150px;
@@ -320,8 +319,8 @@ body {
     position: relative;
 
     &.disabled {
-        cursor: default;
         @include adaptive-color('color', rgba(0, 0, 0, 0.46), color(dark-disabled));
+        cursor: default;
     }
 }
 
@@ -344,11 +343,11 @@ body {
 }
 
 .checkbox-custom:checked:disabled + .checkbox-custom-label:before {
-    @include adaptive-color('background', color.scale(color(cell-highlight-color), $saturation: -100%), color.scale(color(cell-highlight-dark-color), $saturation: -100%));
+    @include adaptive-color('background', desaturate(color(cell-highlight-color), 100%), desaturate(color(cell-highlight-dark-color), 100%));
     @include adaptive-color(
         'box-shadow',
-        inset 0px 0px 0px 1px color.scale(color(cell-highlight-color), $saturation: -100%),
-        inset 0px 0px 0px 1px color.scale(color(cell-highlight-dark-color), $saturation: -100%)
+        inset 0px 0px 0px 1px desaturate(color(cell-highlight-color), 100%),
+        inset 0px 0px 0px 1px desaturate(color(cell-highlight-dark-color), 100%)
     );
 }