From 391820fada4e85cb302f79473dfd6e9fb2978269 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] 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 d5f5c8d1d..b0ea9551e 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 0f9818b20..f097d0439 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 5e43b1972..08657a231 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 c8ee08e71..702c78711 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 98db8bd3c..2b451db52 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 7f64e2d7f..911f4a5bc 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 f11bd8d23..2252d5556 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 7ffdc89b5..2c9615153 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 919a3e48e..a0cc44ecb 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 b24eb65c0..1bf6b8377 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 a9d7073a1..e7de7d537 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 e87f55a59..041fccd2e 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%)
     );
 }