From a41d91b006ece54bf75c16dc806ab92994cd3e75 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Mon, 21 Oct 2024 13:48:49 -0700
Subject: [PATCH] chore: fix sass warnings

Sass has breaking changes with the migration to Dart.
https://sass-lang.com/documentation/breaking-changes/

 - use the migration scripting to fix up the color space changes
 - stop using @import and replace with @use
 - migrate the color variables to use namespaces because use is always
   namespaced
---
 src/App.vue                         |  12 +-
 src/components/BaseKey.vue          |  57 +-
 src/scss/colorways.scss             |   7 +-
 src/scss/colorways/_gmk.scss        | 879 ++++++++++++++++------------
 src/scss/colorways/_jtk.scss        |   7 +-
 src/scss/colorways/_keyreative.scss |  81 +--
 src/scss/colorways/_mt3.scss        | 527 ++++++++++-------
 src/scss/colorways/_sp.scss         | 348 ++++++-----
 src/scss/style.scss                 |   8 +-
 src/scss/themes.scss                |  56 +-
 10 files changed, 1128 insertions(+), 854 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1656be6f80..087ff368f9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -199,7 +199,8 @@ export default {
 };
 </script>
 <style lang="scss">
-@import '@/scss/style.scss';
+@use '@/scss/style.scss';
+
 #app {
   display: grid;
   grid-template: 1fr / minmax(1000px, 1300px);
@@ -208,6 +209,7 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
 }
+
 .embedded-tutorial {
   position: fixed;
   bottom: 20px;
@@ -250,19 +252,23 @@ export default {
   0% {
     transform: scale(1);
   }
+
   10%,
   20% {
     transform: scale(0.9) rotate(-8deg);
   }
+
   30%,
   50%,
   70% {
     transform: scale(1.3) rotate(8deg);
   }
+
   40%,
   60% {
     transform: scale(1.3) rotate(-8deg);
   }
+
   80%,
   100% {
     transform: scale(1) rotate(0);
@@ -274,19 +280,23 @@ export default {
 .faa-parent.animated-hover:hover > .faa-tada {
   animation: tada 2s linear infinite;
 }
+
 .faa-tada.animated.faa-fast,
 .faa-tada.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-tada.faa-fast {
   animation: tada 1s linear infinite;
 }
+
 .faa-tada.animated.faa-slow,
 .faa-tada.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-tada.faa-slow {
   animation: tada 3s linear infinite;
 }
+
 .faa-parent.animated-hover:hover > .faa-tada.faa-slow {
   animation: tada 3s linear infinite;
 }
+
 .faa-parent.animated-hover:hover > .faa-tada.faa-slow {
   animation: tada 3s linear infinite;
 }
diff --git a/src/components/BaseKey.vue b/src/components/BaseKey.vue
index 15c094e83d..caa018f166 100644
--- a/src/components/BaseKey.vue
+++ b/src/components/BaseKey.vue
@@ -1,26 +1,10 @@
 <template>
   <!-- prettier-ignore -->
-  <div
-    draggable
-    :id="myid"
-    class="key"
-    :class="myclasses"
-    :style="mystyles"
-    :title="myTitle"
-    @click="clicked"
-    @dragstart="dragstart"
-    @dragend="dragend"
-    @drop.stop="dropped"
-    @dragleave.prevent="dragleave"
-    @dragover.prevent="dragover"
-    @dragenter.prevent="dragenter"
-    >{{ displayName }}<font-awesome-icon v-if="icon" size="2x" :icon="icon" /><template
-      v-if="visible">
-        <div
-          v-if="visible"
-          class="remove"
-          @click.stop="remove"
-        >x</div>
+  <div draggable :id="myid" class="key" :class="myclasses" :style="mystyles" :title="myTitle" @click="clicked"
+    @dragstart="dragstart" @dragend="dragend" @drop.stop="dropped" @dragleave.prevent="dragleave"
+    @dragover.prevent="dragover" @dragenter.prevent="dragenter">{{ displayName }}<font-awesome-icon v-if="icon"
+      size="2x" :icon="icon" /><template v-if="visible">
+      <div v-if="visible" class="remove" @click.stop="remove">x</div>
     </template></div>
 </template>
 <script>
@@ -336,24 +320,20 @@ export default {
 };
 </script>
 <style lang="scss">
-@import '../scss/gmk-abs';
-@import '../scss/sp-abs';
-@import '../scss/sp-pbt';
-@import '../scss/mt3-pbt';
-@import '../scss/mt3-abs';
-@import '../scss/pantone';
-@import '../scss/qmk_colors';
-@import '../scss/colorways';
+@use '../scss/colorways';
 
 .key.overme {
   border-radius: 4px;
 }
+
 .key.swapme {
   transform: scale(0.8);
 }
+
 .key.smaller {
   font-size: var(--default-smaller-key-font-size);
 }
+
 .key {
   border-radius: 6px;
   font-family: 'Montserrat', sans-serif;
@@ -374,51 +354,67 @@ export default {
       (var(--default-key-y-spacing) - var(--default-key-height))
   );
 }
+
 .k125u {
   --unit-width: 1.25;
 }
+
 .k15u {
   --unit-width: 1.5;
 }
+
 .k175u {
   --unit-width: 1.75;
 }
+
 .k2u {
   --unit-width: 2;
 }
+
 .k225u {
   --unit-width: 2.25;
 }
+
 .k275u {
   --unit-width: 2.75;
 }
+
 .k3u {
   --unit-width: 3;
 }
+
 .k4u {
   --unit-width: 4;
 }
+
 .k6u {
   --unit-width: 6;
 }
+
 .k625u {
   --unit-width: 6.25;
 }
+
 .k7u {
   --unit-width: 7;
 }
+
 .k125uh {
   --unit-height: 1.25;
 }
+
 .k15uh {
   --unit-height: 1.5;
 }
+
 .k175uh {
   --unit-height: 1.75;
 }
+
 .k2uh {
   --unit-height: 2;
 }
+
 .kiso {
   width: calc(0.5 * var(--default-key-x-spacing) + var(--default-key-width));
   height: var(--default-key-height);
@@ -428,6 +424,7 @@ export default {
   box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 0px 2px inset,
     rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
 }
+
 .kiso::after {
   background: inherit;
   position: absolute;
@@ -442,6 +439,7 @@ export default {
   box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 0px 2px inset,
     rgba(0, 0, 0, 0.3) 0px 2px 0px 1px;
 }
+
 .kbae {
   width: calc(0.5 * var(--default-key-x-spacing) + var(--default-key-width));
   height: calc(1.1 * var(--default-key-height));
@@ -450,6 +448,7 @@ export default {
   box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 0px 2px inset,
     rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
 }
+
 .kbae::after {
   background: inherit;
   position: absolute;
diff --git a/src/scss/colorways.scss b/src/scss/colorways.scss
index 78d844a269..52d0bd40a1 100644
--- a/src/scss/colorways.scss
+++ b/src/scss/colorways.scss
@@ -1,2 +1,5 @@
-@import 'colorways/gmk', 'colorways/jtk', 'colorways/keyreative',
-  'colorways/mt3', 'colorways/sp';
+@use 'colorways/gmk';
+@use 'colorways/jtk';
+@use 'colorways/keyreative';
+@use 'colorways/mt3';
+@use 'colorways/sp';
diff --git a/src/scss/colorways/_gmk.scss b/src/scss/colorways/_gmk.scss
index f85e3cd57b..0f0e9a8083 100644
--- a/src/scss/colorways/_gmk.scss
+++ b/src/scss/colorways/_gmk.scss
@@ -1,3 +1,7 @@
+@use 'sass:color';
+@use '../gmk-abs';
+@use '../sp-abs';
+@use '../pantone';
 // GMK Keysets
 
 .gmk-8008-key {
@@ -7,9 +11,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten(#8d98a7, 8%);
-    color: darken(#313943, 9%);
-    border-color: mix(#8d98a7, #313943);
+    background: color.adjust(#8d98a7, $lightness: 8%);
+    color: color.adjust(#313943, $lightness: -9%);
+    border-color: color.mix(#8d98a7, #313943);
   }
 }
 
@@ -20,9 +24,12 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#313943, 4%);
-    color: lighten(#fe5487, 15%);
-    border-color: mix(darken(#313943, 4%), lighten(#fe5487, 15%));
+    background: color.adjust(#313943, $lightness: -4%);
+    color: color.adjust(#fe5487, $lightness: 15%);
+    border-color: color.mix(
+      color.adjust(#313943, $lightness: -4%),
+      color.adjust(#fe5487, $lightness: 15%)
+    );
   }
 }
 
@@ -32,39 +39,45 @@
 }
 
 .gmk-9009-key {
-  background: $color-gmk-abs-L9;
-  color: $color-gmk-abs-CR;
+  background: gmk-abs.$color-gmk-abs-L9;
+  color: gmk-abs.$color-gmk-abs-CR;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-gmk-abs-L9, 4%);
-    color: $color-gmk-abs-CR;
-    border-color: mix(lighten($color-gmk-abs-L9, 4%), $color-gmk-abs-CR);
+    background: color.adjust(gmk-abs.$color-gmk-abs-L9, $lightness: 4%);
+    color: gmk-abs.$color-gmk-abs-CR;
+    border-color: color.mix(
+      color.adjust(gmk-abs.$color-gmk-abs-L9, $lightness: 4%),
+      gmk-abs.$color-gmk-abs-CR
+    );
   }
 }
 
 .gmk-9009-mod {
-  background: $color-gmk-abs-U9;
-  color: $color-gmk-abs-CR;
+  background: gmk-abs.$color-gmk-abs-U9;
+  color: gmk-abs.$color-gmk-abs-CR;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-gmk-abs-U9, 4%);
-    color: $color-gmk-abs-CR;
-    border-color: mix(lighten($color-gmk-abs-U9, 4%), $color-gmk-abs-CR);
+    background: color.adjust(gmk-abs.$color-gmk-abs-U9, $lightness: 4%);
+    color: gmk-abs.$color-gmk-abs-CR;
+    border-color: color.mix(
+      color.adjust(gmk-abs.$color-gmk-abs-U9, $lightness: 4%),
+      gmk-abs.$color-gmk-abs-CR
+    );
   }
 }
 
 .gmk-9009-esc {
-  background: $color-gmk-abs-3C;
-  color: $color-gmk-abs-CR;
+  background: gmk-abs.$color-gmk-abs-3C;
+  color: gmk-abs.$color-gmk-abs-CR;
 }
 
 .gmk-9009-enter {
-  background: $color-gmk-abs-3B;
-  color: $color-gmk-abs-CR;
+  background: gmk-abs.$color-gmk-abs-3B;
+  color: gmk-abs.$color-gmk-abs-CR;
 }
 
 .gmk-alter-key {
@@ -74,9 +87,12 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#2b2c42, 4%);
-    color: lighten(#bb1e10, 22%);
-    border-color: mix(darken(#2b2c42, 4%), lighten(#bb1e10, 22%));
+    background: color.adjust(#2b2c42, $lightness: -4%);
+    color: color.adjust(#bb1e10, $lightness: 22%);
+    border-color: color.mix(
+      color.adjust(#2b2c42, $lightness: -4%),
+      color.adjust(#bb1e10, $lightness: 22%)
+    );
   }
 }
 .gmk-alter-mod {
@@ -86,22 +102,25 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#312f36, 4%);
-    color: lighten(#bb1e10, 23%);
-    border-color: mix(darken(#312f36, 4%), lighten(#bb1e10, 23%));
+    background: color.adjust(#312f36, $lightness: -4%);
+    color: color.adjust(#bb1e10, $lightness: 23%);
+    border-color: color.mix(
+      color.adjust(#312f36, $lightness: -4%),
+      color.adjust(#bb1e10, $lightness: 23%)
+    );
   }
 }
 
 .gmk-analog-dreams-key {
-  background: $color-gmk-abs-L9;
+  background: gmk-abs.$color-gmk-abs-L9;
   color: #ac4fc6;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-gmk-abs-L9, 8%);
-    color: darken(#ac4fc6, 8%);
-    border-color: mix($color-gmk-abs-L9, #ac4fc6);
+    background: color.adjust(gmk-abs.$color-gmk-abs-L9, $lightness: 8%);
+    color: color.adjust(#ac4fc6, $lightness: -8%);
+    border-color: color.mix(gmk-abs.$color-gmk-abs-L9, #ac4fc6);
   }
 }
 
@@ -112,9 +131,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten(#9de7d7, 8%);
-    color: darken(#ac4fc6, 8%);
-    border-color: mix(#9de7d7, #ac4fc6);
+    background: color.adjust(#9de7d7, $lightness: 8%);
+    color: color.adjust(#ac4fc6, $lightness: -8%);
+    border-color: color.mix(#9de7d7, #ac4fc6);
   }
 }
 
@@ -130,15 +149,18 @@
 
 .gmk-ascii-key,
 .gmk-ascii-mod {
-  background: $color-gmk-abs-2B;
-  color: $color-gmk-abs-2M;
+  background: gmk-abs.$color-gmk-abs-2B;
+  color: gmk-abs.$color-gmk-abs-2M;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-gmk-abs-2B, 6%);
-    color: lighten($color-gmk-abs-2M, 10%);
-    border-color: mix($color-gmk-abs-2B, $color-gmk-abs-2M);
+    background: color.adjust(gmk-abs.$color-gmk-abs-2B, $lightness: -6%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-2M, $lightness: 10%);
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-2B,
+      gmk-abs.$color-gmk-abs-2M
+    );
   }
 }
 
@@ -150,8 +172,8 @@
   .key-contents:empty,
   .key-contents::before {
     background: #fff3ef;
-    color: darken(#3e728f, 9%);
-    border-color: mix(#fff3ef, darken(#3e728f, 9%));
+    color: color.adjust(#3e728f, $lightness: -9%);
+    border-color: color.mix(#fff3ef, color.adjust(#3e728f, $lightness: -9%));
   }
 }
 .gmk-bento-mod {
@@ -161,9 +183,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#3e728f, 4%);
-    color: lighten(#fb7279, 20%);
-    border-color: mix(#3e728f, lighten(#fb7279, 20%));
+    background: color.adjust(#3e728f, $lightness: -4%);
+    color: color.adjust(#fb7279, $lightness: 20%);
+    border-color: color.mix(#3e728f, color.adjust(#fb7279, $lightness: 20%));
   }
 }
 .gmk-bento-accent {
@@ -173,55 +195,58 @@
 
 .gmk-bingsu-key {
   background: #946777;
-  color: $color-gmk-abs-CP;
+  color: gmk-abs.$color-gmk-abs-CP;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#946777, 4%);
-    color: lighten($color-gmk-abs-CP, 7%);
-    border-color: mix(#946777, lighten($color-gmk-abs-CP, 7%));
+    background: color.adjust(#946777, $lightness: -4%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-CP, $lightness: 7%);
+    border-color: color.mix(
+      #946777,
+      color.adjust(gmk-abs.$color-gmk-abs-CP, $lightness: 7%)
+    );
   }
 }
 .gmk-bingsu-mod {
   background: #533d45;
-  color: $color-gmk-abs-CP;
+  color: gmk-abs.$color-gmk-abs-CP;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#533d45, 4%);
-    color: $color-gmk-abs-CP;
-    border-color: mix(#533d45, $color-gmk-abs-CP);
+    background: color.adjust(#533d45, $lightness: -4%);
+    color: gmk-abs.$color-gmk-abs-CP;
+    border-color: color.mix(#533d45, gmk-abs.$color-gmk-abs-CP);
   }
 }
 .gmk-bingsu-accent {
-  background: $color-gmk-abs-CP;
+  background: gmk-abs.$color-gmk-abs-CP;
   color: #533d45;
 }
 
 .gmk-cafe-key {
-  background: $color-gmk-abs-L9;
+  background: gmk-abs.$color-gmk-abs-L9;
   color: #3d3635;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-gmk-abs-L9, 4%);
+    background: color.adjust(gmk-abs.$color-gmk-abs-L9, $lightness: 4%);
     color: #3d3635;
-    border-color: mix($color-gmk-abs-L9, #3d3635);
+    border-color: color.mix(gmk-abs.$color-gmk-abs-L9, #3d3635);
   }
 }
 .gmk-cafe-mod {
   background: #3d3635;
-  color: $color-gmk-abs-L9;
+  color: gmk-abs.$color-gmk-abs-L9;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#3d3635, 4%);
-    color: $color-gmk-abs-L9;
-    border-color: mix(#3d3635, $color-gmk-abs-L9);
+    background: color.adjust(#3d3635, $lightness: -4%);
+    color: gmk-abs.$color-gmk-abs-L9;
+    border-color: color.mix(#3d3635, gmk-abs.$color-gmk-abs-L9);
   }
 }
 .gmk-cafe-accent {
@@ -236,9 +261,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#2e3b51, 4%);
-    color: lighten(#22aabc, 6%);
-    border-color: mix(#2e3b51, lighten(#22aabc, 6%));
+    background: color.adjust(#2e3b51, $lightness: -4%);
+    color: color.adjust(#22aabc, $lightness: 6%);
+    border-color: color.mix(#2e3b51, color.adjust(#22aabc, $lightness: 6%));
   }
 }
 .gmk-calm-depths-mod {
@@ -248,39 +273,39 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#4a4f58, 4%);
-    color: lighten(#22aabc, 7%);
-    border-color: mix(#4a4f58, lighten(#22aabc, 7%));
+    background: color.adjust(#4a4f58, $lightness: -4%);
+    color: color.adjust(#22aabc, $lightness: 7%);
+    border-color: color.mix(#4a4f58, color.adjust(#22aabc, $lightness: 7%));
   }
 }
 
 .gmk-camping-key {
-  background: $color-sp-abs-WCK;
-  color: $color-sp-abs-VF;
+  background: sp-abs.$color-sp-abs-WCK;
+  color: sp-abs.$color-sp-abs-VF;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-sp-abs-WCK, 4%);
-    color: darken($color-sp-abs-VF, 6%);
-    border-color: mix($color-sp-abs-WCK, $color-sp-abs-VF);
+    background: color.adjust(sp-abs.$color-sp-abs-WCK, $lightness: 4%);
+    color: color.adjust(sp-abs.$color-sp-abs-VF, $lightness: -6%);
+    border-color: color.mix(sp-abs.$color-sp-abs-WCK, sp-abs.$color-sp-abs-VF);
   }
 }
 .gmk-camping-mod {
-  background: $color-sp-abs-VF;
-  color: $color-sp-abs-WCK;
+  background: sp-abs.$color-sp-abs-VF;
+  color: sp-abs.$color-sp-abs-WCK;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-sp-abs-VF, 4%);
-    color: lighten($color-sp-abs-WCK, 4%);
-    border-color: mix($color-sp-abs-VF, $color-sp-abs-WCK);
+    background: color.adjust(sp-abs.$color-sp-abs-VF, $lightness: -4%);
+    color: color.adjust(sp-abs.$color-sp-abs-WCK, $lightness: 4%);
+    border-color: color.mix(sp-abs.$color-sp-abs-VF, sp-abs.$color-sp-abs-WCK);
   }
 }
 .gmk-camping-accent {
-  background: $color-sp-abs-RBC;
-  color: $color-sp-abs-WCK;
+  background: sp-abs.$color-sp-abs-RBC;
+  color: sp-abs.$color-sp-abs-WCK;
 }
 
 .gmk-deku-key {
@@ -290,9 +315,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#298286, 4%);
-    color: lighten(#e5e1de, 4%);
-    border-color: mix(#298286, lighten(#e5e1de, 4%));
+    background: color.adjust(#298286, $lightness: -4%);
+    color: color.adjust(#e5e1de, $lightness: 4%);
+    border-color: color.mix(#298286, color.adjust(#e5e1de, $lightness: 4%));
   }
 }
 .gmk-deku-mod {
@@ -302,9 +327,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten(#e5e1de, 4%);
-    color: darken(#298286, 4%);
-    border-color: mix(#e5e1de, darken(#298286, 4%));
+    background: color.adjust(#e5e1de, $lightness: 4%);
+    color: color.adjust(#298286, $lightness: -4%);
+    border-color: color.mix(#e5e1de, color.adjust(#298286, $lightness: -4%));
   }
 }
 .gmk-deku-accent {
@@ -313,27 +338,33 @@
 }
 
 .gmk-dolch-key {
-  background: $color-gmk-abs-CC;
-  color: $color-gmk-abs-WS1;
+  background: gmk-abs.$color-gmk-abs-CC;
+  color: gmk-abs.$color-gmk-abs-WS1;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-gmk-abs-CC, 4%);
-    color: $color-gmk-abs-WS1;
-    border-color: mix($color-gmk-abs-CC, $color-gmk-abs-WS1);
+    background: color.adjust(gmk-abs.$color-gmk-abs-CC, $lightness: -4%);
+    color: gmk-abs.$color-gmk-abs-WS1;
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-CC,
+      gmk-abs.$color-gmk-abs-WS1
+    );
   }
 }
 .gmk-dolch-mod {
-  background: $color-gmk-abs-N9;
-  color: $color-gmk-abs-WS1;
+  background: gmk-abs.$color-gmk-abs-N9;
+  color: gmk-abs.$color-gmk-abs-WS1;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-gmk-abs-N9, 4%);
-    color: $color-gmk-abs-WS1;
-    border-color: mix($color-gmk-abs-N9, $color-gmk-abs-WS1);
+    background: color.adjust(gmk-abs.$color-gmk-abs-N9, $lightness: -4%);
+    color: gmk-abs.$color-gmk-abs-WS1;
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-N9,
+      gmk-abs.$color-gmk-abs-WS1
+    );
   }
 }
 .gmk-dolch-kb {
@@ -346,9 +377,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#44475a, 4%);
+    background: color.adjust(#44475a, $lightness: -4%);
     color: #f8f8f2;
-    border-color: mix(#44475a, #f8f8f2);
+    border-color: color.mix(#44475a, #f8f8f2);
   }
 }
 .gmk-dracula-mod {
@@ -358,9 +389,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#282a36, 4%);
+    background: color.adjust(#282a36, $lightness: -4%);
     color: #f8f8f2;
-    border-color: mix(#282a36, #f8f8f2);
+    border-color: color.mix(#282a36, #f8f8f2);
   }
 }
 .gmk-dracula-mod2 {
@@ -386,9 +417,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#282a36, 4%);
+    background: color.adjust(#282a36, $lightness: -4%);
     color: #50fa7b;
-    border-color: mix(#282a36, #50fa7b);
+    border-color: color.mix(#282a36, #50fa7b);
   }
 }
 .gmk-dracula-accent {
@@ -429,48 +460,57 @@
 
 .gmk-dualshot-key,
 .gmk-dualshot-mod {
-  background: darken($color-gmk-abs-2B, 5%);
-  color: darken($color-gmk-abs-N9, 12%);
+  background: color.adjust(gmk-abs.$color-gmk-abs-2B, $lightness: -5%);
+  color: color.adjust(gmk-abs.$color-gmk-abs-N9, $lightness: -12%);
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: $color-gmk-abs-2B;
-    color: darken($color-gmk-abs-N9, 18%);
-    border-color: mix($color-gmk-abs-2B, darken($color-gmk-abs-N9, 12%));
+    background: gmk-abs.$color-gmk-abs-2B;
+    color: color.adjust(gmk-abs.$color-gmk-abs-N9, $lightness: -18%);
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-2B,
+      color.adjust(gmk-abs.$color-gmk-abs-N9, $lightness: -12%)
+    );
   }
 }
 .gmk-dualshot-mod2 {
-  background: darken($color-gmk-abs-2B, 5%);
-  color: saturate(lighten($color-gmk-abs-RO2, 13%), 12%);
+  background: color.adjust(gmk-abs.$color-gmk-abs-2B, $lightness: -5%);
+  color: color.adjust(
+    color.adjust(gmk-abs.$color-gmk-abs-RO2, $lightness: 13%),
+    $saturation: 12%
+  );
 }
 .gmk-dualshot-mod3 {
-  background: darken($color-gmk-abs-2B, 5%);
-  color: lighten($color-gmk-abs-N6, 5%);
+  background: color.adjust(gmk-abs.$color-gmk-abs-2B, $lightness: -5%);
+  color: color.adjust(gmk-abs.$color-gmk-abs-N6, $lightness: 5%);
 }
 .gmk-dualshot-mod4 {
-  background: darken($color-gmk-abs-2B, 5%);
-  color: lighten($color-gmk-abs-TU2, 9%);
+  background: color.adjust(gmk-abs.$color-gmk-abs-2B, $lightness: -5%);
+  color: color.adjust(gmk-abs.$color-gmk-abs-TU2, $lightness: 9%);
 }
 .gmk-dualshot-mod5 {
-  background: darken($color-gmk-abs-2B, 5%);
-  color: lighten($color-gmk-abs-N5, 29%);
+  background: color.adjust(gmk-abs.$color-gmk-abs-2B, $lightness: -5%);
+  color: color.adjust(gmk-abs.$color-gmk-abs-N5, $lightness: 29%);
 }
 .gmk-dualshot-accent {
-  background: saturate(lighten($color-gmk-abs-RO2, 13%), 12%);
-  color: $color-gmk-abs-N9;
+  background: color.adjust(
+    color.adjust(gmk-abs.$color-gmk-abs-RO2, $lightness: 13%),
+    $saturation: 12%
+  );
+  color: gmk-abs.$color-gmk-abs-N9;
 }
 .gmk-dualshot-accent2 {
-  background: lighten($color-gmk-abs-N6, 5%);
-  color: $color-gmk-abs-N9;
+  background: color.adjust(gmk-abs.$color-gmk-abs-N6, $lightness: 5%);
+  color: gmk-abs.$color-gmk-abs-N9;
 }
 .gmk-dualshot-accent3 {
-  background: lighten($color-gmk-abs-TU2, 9%);
-  color: $color-gmk-abs-N9;
+  background: color.adjust(gmk-abs.$color-gmk-abs-TU2, $lightness: 9%);
+  color: gmk-abs.$color-gmk-abs-N9;
 }
 .gmk-dualshot-accent4 {
-  background: lighten($color-gmk-abs-N5, 29%);
-  color: $color-gmk-abs-N9;
+  background: color.adjust(gmk-abs.$color-gmk-abs-N5, $lightness: 29%);
+  color: gmk-abs.$color-gmk-abs-N9;
 }
 .gmk-dualshot-kb {
   // placeholder
@@ -478,44 +518,50 @@
 
 .gmk-fro-dot-yo-key,
 .gmk-fro-dot-yo-mod {
-  background: $color-gmk-abs-L9;
-  color: $color-gmk-abs-2B;
+  background: gmk-abs.$color-gmk-abs-L9;
+  color: gmk-abs.$color-gmk-abs-2B;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-gmk-abs-L9, 4%);
-    color: darken($color-gmk-abs-2B, 8%);
-    border-color: mix($color-gmk-abs-L9, darken($color-gmk-abs-N9, 7%));
+    background: color.adjust(gmk-abs.$color-gmk-abs-L9, $lightness: 4%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-2B, $lightness: -8%);
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-L9,
+      color.adjust(gmk-abs.$color-gmk-abs-N9, $lightness: -7%)
+    );
   }
 }
 .gmk-fro-dot-yo-rdp {
-  background: $color-gmk-abs-L9;
-  color: $color-pantone-2345C;
+  background: gmk-abs.$color-gmk-abs-L9;
+  color: pantone.$color-pantone-2345C;
 }
 .gmk-fro-dot-yo-grn {
-  background: $color-gmk-abs-L9;
-  color: $color-pantone-3395C;
+  background: gmk-abs.$color-gmk-abs-L9;
+  color: pantone.$color-pantone-3395C;
 }
 .gmk-fro-dot-yo-blu {
-  background: $color-gmk-abs-L9;
-  color: $color-pantone-312C;
+  background: gmk-abs.$color-gmk-abs-L9;
+  color: pantone.$color-pantone-312C;
 }
 .gmk-fro-dot-yo-ppl {
-  background: $color-gmk-abs-L9;
-  color: $color-pantone-2088C;
+  background: gmk-abs.$color-gmk-abs-L9;
+  color: pantone.$color-pantone-2088C;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-gmk-abs-L9, 4%);
-    color: darken($color-pantone-2088C, 6%);
-    border-color: mix($color-gmk-abs-L9, darken($color-pantone-2088C, 6%));
+    background: color.adjust(gmk-abs.$color-gmk-abs-L9, $lightness: 4%);
+    color: color.adjust(pantone.$color-pantone-2088C, $lightness: -6%);
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-L9,
+      color.adjust(pantone.$color-pantone-2088C, $lightness: -6%)
+    );
   }
 }
 .gmk-fro-dot-yo-ylw {
-  background: $color-gmk-abs-L9;
-  color: $color-gmk-abs-N6;
+  background: gmk-abs.$color-gmk-abs-L9;
+  color: gmk-abs.$color-gmk-abs-N6;
 }
 .gmk-fro-dot-yo-kb {
   // placeholder
@@ -528,9 +574,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten(#c7e6f5, 5%);
-    color: darken(#f54730, 26%);
-    border-color: mix(#c7e6f5, darken(#f54730, 26%));
+    background: color.adjust(#c7e6f5, $lightness: 5%);
+    color: color.adjust(#f54730, $lightness: -26%);
+    border-color: color.mix(#c7e6f5, color.adjust(#f54730, $lightness: -26%));
   }
 }
 .gmk-grand-prix-mod {
@@ -540,9 +586,12 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(rgb(54, 71, 92), 14%);
-    color: lighten(rgb(192, 208, 54), 14%);
-    border-color: mix(rgb(54, 71, 92), lighten(rgb(192, 208, 54), 14%));
+    background: color.adjust(rgb(54, 71, 92), $lightness: -14%);
+    color: color.adjust(rgb(192, 208, 54), $lightness: 14%);
+    border-color: color.mix(
+      rgb(54, 71, 92),
+      color.adjust(rgb(192, 208, 54), $lightness: 14%)
+    );
   }
 }
 .gmk-grand-prix-accent {
@@ -551,149 +600,164 @@
 }
 
 .gmk-hammerhead-dark-key {
-  background: $color-pantone-533C;
-  color: $color-pantone-3258C;
+  background: pantone.$color-pantone-533C;
+  color: pantone.$color-pantone-3258C;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-pantone-533C, 4%);
-    color: $color-pantone-3258C;
-    border-color: mix($color-pantone-533C, $color-pantone-3258C);
+    background: color.adjust(pantone.$color-pantone-533C, $lightness: -4%);
+    color: pantone.$color-pantone-3258C;
+    border-color: color.mix(
+      pantone.$color-pantone-533C,
+      pantone.$color-pantone-3258C
+    );
   }
 }
 .gmk-hammerhead-dark-mod {
-  background: $color-pantone-2378C;
-  color: $color-pantone-3258C;
+  background: pantone.$color-pantone-2378C;
+  color: pantone.$color-pantone-3258C;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-pantone-2378C, 4%);
-    color: lighten($color-pantone-3258C, 22.1%);
-    border-color: mix(
-      $color-pantone-2378C,
-      lighten($color-pantone-3258C, 22.1%)
+    background: color.adjust(pantone.$color-pantone-2378C, $lightness: -4%);
+    color: color.adjust(pantone.$color-pantone-3258C, $lightness: 22.1%);
+    border-color: color.mix(
+      pantone.$color-pantone-2378C,
+      color.adjust(pantone.$color-pantone-3258C, $lightness: 22.1%)
     );
   }
 }
 .gmk-hammerhead-dark-accent {
-  background: $color-pantone-3258C;
-  color: $color-pantone-2378C;
+  background: pantone.$color-pantone-3258C;
+  color: pantone.$color-pantone-2378C;
 }
 
 .gmk-hammerhead-light-key {
-  background: $color-pantone-536C;
-  color: $color-pantone-2378C;
+  background: pantone.$color-pantone-536C;
+  color: pantone.$color-pantone-2378C;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-pantone-536C, 4%);
-    color: darken($color-pantone-2378C, 11%);
-    border-color: mix($color-pantone-536C, darken($color-pantone-2378C, 11%));
+    background: color.adjust(pantone.$color-pantone-536C, $lightness: 4%);
+    color: color.adjust(pantone.$color-pantone-2378C, $lightness: -11%);
+    border-color: color.mix(
+      pantone.$color-pantone-536C,
+      color.adjust(pantone.$color-pantone-2378C, $lightness: -11%)
+    );
   }
 }
 .gmk-hammerhead-light-mod {
-  background: $color-pantone-2378C;
-  color: $color-pantone-3258C;
+  background: pantone.$color-pantone-2378C;
+  color: pantone.$color-pantone-3258C;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-pantone-2378C, 4%);
-    color: lighten($color-pantone-3258C, 22.1%);
-    border-color: mix(
-      $color-pantone-2378C,
-      lighten($color-pantone-3258C, 22.1%)
+    background: color.adjust(pantone.$color-pantone-2378C, $lightness: -4%);
+    color: color.adjust(pantone.$color-pantone-3258C, $lightness: 22.1%);
+    border-color: color.mix(
+      pantone.$color-pantone-2378C,
+      color.adjust(pantone.$color-pantone-3258C, $lightness: 22.1%)
     );
   }
 }
 .gmk-hammerhead-light-accent {
-  background: $color-pantone-3258C;
-  color: $color-pantone-2378C;
+  background: pantone.$color-pantone-3258C;
+  color: pantone.$color-pantone-2378C;
 }
 
 .gmk-handarbeit-plus-key,
 .gmk-handarbeit-plus-mod {
-  background: $color-gmk-abs-P3;
-  color: $color-gmk-abs-WS1;
+  background: gmk-abs.$color-gmk-abs-P3;
+  color: gmk-abs.$color-gmk-abs-WS1;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-gmk-abs-P3, 4%);
-    color: $color-gmk-abs-WS1;
-    border-color: mix($color-gmk-abs-P3, $color-gmk-abs-WS1);
+    background: color.adjust(gmk-abs.$color-gmk-abs-P3, $lightness: -4%);
+    color: gmk-abs.$color-gmk-abs-WS1;
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-P3,
+      gmk-abs.$color-gmk-abs-WS1
+    );
   }
 }
 .gmk-handarbeit-plus-accent {
-  background: $color-gmk-abs-V4;
-  color: $color-gmk-abs-WS1;
+  background: gmk-abs.$color-gmk-abs-V4;
+  color: gmk-abs.$color-gmk-abs-WS1;
 }
 .gmk-handarbeit-plus-accent2 {
-  background: $color-gmk-abs-3C;
-  color: $color-gmk-abs-WS1;
+  background: gmk-abs.$color-gmk-abs-3C;
+  color: gmk-abs.$color-gmk-abs-WS1;
 }
 .gmk-handarbeit-plus-accent3 {
-  background: $color-gmk-abs-N6;
-  color: $color-gmk-abs-WS1;
+  background: gmk-abs.$color-gmk-abs-N6;
+  color: gmk-abs.$color-gmk-abs-WS1;
 }
 .gmk-handarbeit-plus-accent4 {
-  background: $color-gmk-abs-N7;
-  color: $color-gmk-abs-WS1;
+  background: gmk-abs.$color-gmk-abs-N7;
+  color: gmk-abs.$color-gmk-abs-WS1;
 }
 .gmk-handarbeit-plus-accent5 {
-  background: $color-gmk-abs-AE;
-  color: $color-gmk-abs-WS1;
+  background: gmk-abs.$color-gmk-abs-AE;
+  color: gmk-abs.$color-gmk-abs-WS1;
 }
 .gmk-handarbeit-plus-accent6 {
-  background: $color-gmk-abs-DY;
-  color: $color-gmk-abs-WS1;
+  background: gmk-abs.$color-gmk-abs-DY;
+  color: gmk-abs.$color-gmk-abs-WS1;
 }
 .gmk-handarbeit-plus-accent7 {
-  background: $color-gmk-abs-V2;
-  color: $color-gmk-abs-WS1;
+  background: gmk-abs.$color-gmk-abs-V2;
+  color: gmk-abs.$color-gmk-abs-WS1;
 }
 .gmk-handarbeit-plus-accent8 {
-  background: $color-gmk-abs-3A;
-  color: $color-gmk-abs-WS1;
+  background: gmk-abs.$color-gmk-abs-3A;
+  color: gmk-abs.$color-gmk-abs-WS1;
 }
 .gmk-handarbeit-plus-accent9 {
-  background: $color-gmk-abs-TU1;
-  color: $color-gmk-abs-WS1;
+  background: gmk-abs.$color-gmk-abs-TU1;
+  color: gmk-abs.$color-gmk-abs-WS1;
 }
 .gmk-handarbeit-plus-kb {
   // placeholder
 }
 
 .gmk-hazakura-key {
-  background: $color-gmk-abs-WS1;
-  color: darken($color-pantone-2346C, 10%);
+  background: gmk-abs.$color-gmk-abs-WS1;
+  color: color.adjust(pantone.$color-pantone-2346C, $lightness: -10%);
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-gmk-abs-WS1, 4%);
-    color: darken($color-pantone-2346C, 33%);
-    border-color: mix($color-gmk-abs-WS1, darken($color-pantone-2346C, 4%));
+    background: color.adjust(gmk-abs.$color-gmk-abs-WS1, $lightness: 4%);
+    color: color.adjust(pantone.$color-pantone-2346C, $lightness: -33%);
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-WS1,
+      color.adjust(pantone.$color-pantone-2346C, $lightness: -4%)
+    );
   }
 }
 .gmk-hazakura-mod {
-  background: $color-pantone-182C;
-  color: darken($color-pantone-2346C, 10%);
+  background: pantone.$color-pantone-182C;
+  color: color.adjust(pantone.$color-pantone-2346C, $lightness: -10%);
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-pantone-182C, 4%);
-    color: darken($color-pantone-2346C, 30%);
-    border-color: mix($color-pantone-182C, darken($color-pantone-2346C, 30%));
+    background: color.adjust(pantone.$color-pantone-182C, $lightness: 4%);
+    color: color.adjust(pantone.$color-pantone-2346C, $lightness: -30%);
+    border-color: color.mix(
+      pantone.$color-pantone-182C,
+      color.adjust(pantone.$color-pantone-2346C, $lightness: -30%)
+    );
   }
 }
 .gmk-hazakura-accent {
-  background: $color-pantone-2346C;
-  color: lighten($color-pantone-182C, 10%);
+  background: pantone.$color-pantone-2346C;
+  color: color.adjust(pantone.$color-pantone-182C, $lightness: 10%);
 }
 
 .gmk-jamon-key {
@@ -703,9 +767,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#84172c, 4%);
+    background: color.adjust(#84172c, $lightness: -4%);
     color: #ece4d0;
-    border-color: mix(#84172c, #ece4d0);
+    border-color: color.mix(#84172c, #ece4d0);
   }
 }
 .gmk-jamon-mod {
@@ -715,84 +779,96 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#ac2c32, 4%);
-    color: lighten(#ece4d0, 9%);
-    border-color: mix(#ac2c32, lighten(#ece4d0, 9%));
+    background: color.adjust(#ac2c32, $lightness: -4%);
+    color: color.adjust(#ece4d0, $lightness: 9%);
+    border-color: color.mix(#ac2c32, color.adjust(#ece4d0, $lightness: 9%));
   }
 }
 .gmk-jamon-accent {
   background: #ece4d0;
   color: #313337;
   input {
-    background: lighten(#ece4d0, 40%);
+    background: color.adjust(#ece4d0, $lightness: 40%);
   }
 }
 .gmk-jamon-kb {
   // placeholder
-  background: $color-pantone-533C;
+  background: pantone.$color-pantone-533C;
 }
 
 .gmk-merlin-key {
-  background: $color-gmk-abs-CP;
-  color: $color-gmk-abs-TU1;
+  background: gmk-abs.$color-gmk-abs-CP;
+  color: gmk-abs.$color-gmk-abs-TU1;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-gmk-abs-CP, 4%);
-    color: darken($color-gmk-abs-TU1, 5%);
-    border-color: mix($color-gmk-abs-CP, darken($color-gmk-abs-TU1, 5%));
+    background: color.adjust(gmk-abs.$color-gmk-abs-CP, $lightness: 4%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-TU1, $lightness: -5%);
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-CP,
+      color.adjust(gmk-abs.$color-gmk-abs-TU1, $lightness: -5%)
+    );
   }
 }
 .gmk-merlin-mod {
-  background: $color-gmk-abs-TU1;
-  color: $color-gmk-abs-N6;
+  background: gmk-abs.$color-gmk-abs-TU1;
+  color: gmk-abs.$color-gmk-abs-N6;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-gmk-abs-TU1, 4%);
-    color: lighten($color-gmk-abs-N6, 24%);
-    border-color: mix($color-gmk-abs-TU1, $color-gmk-abs-N6);
+    background: color.adjust(gmk-abs.$color-gmk-abs-TU1, $lightness: -4%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-N6, $lightness: 24%);
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-TU1,
+      gmk-abs.$color-gmk-abs-N6
+    );
   }
 }
 .gmk-merlin-accent {
-  background: $color-gmk-abs-N6;
-  color: $color-gmk-abs-TU1;
+  background: gmk-abs.$color-gmk-abs-N6;
+  color: gmk-abs.$color-gmk-abs-TU1;
   input {
-    background: lighten($color-gmk-abs-N6, 40%);
+    background: color.adjust(gmk-abs.$color-gmk-abs-N6, $lightness: 40%);
   }
 }
 .gmk-merlin-kb {
 }
 
 .gmk-metaverse-key {
-  background: $color-gmk-abs-WS1;
-  color: $color-gmk-abs-CR;
+  background: gmk-abs.$color-gmk-abs-WS1;
+  color: gmk-abs.$color-gmk-abs-CR;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-gmk-abs-WS1, 4%);
-    color: $color-gmk-abs-CR;
-    border-color: mix($color-gmk-abs-WS1, $color-gmk-abs-CR);
+    background: color.adjust(gmk-abs.$color-gmk-abs-WS1, $lightness: 4%);
+    color: gmk-abs.$color-gmk-abs-CR;
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-WS1,
+      gmk-abs.$color-gmk-abs-CR
+    );
   }
 }
 .gmk-metaverse-mod {
-  background: $color-gmk-abs-CR;
-  color: $color-gmk-abs-WS1;
+  background: gmk-abs.$color-gmk-abs-CR;
+  color: gmk-abs.$color-gmk-abs-WS1;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-gmk-abs-CR, 4%);
-    color: $color-gmk-abs-WS1;
-    border-color: mix($color-gmk-abs-CR, $color-gmk-abs-WS1);
+    background: color.adjust(gmk-abs.$color-gmk-abs-CR, $lightness: -4%);
+    color: gmk-abs.$color-gmk-abs-WS1;
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-CR,
+      gmk-abs.$color-gmk-abs-WS1
+    );
   }
 }
 .gmk-metaverse-accent {
-  background: $color-gmk-abs-RO2;
-  color: $color-gmk-abs-WS1;
+  background: gmk-abs.$color-gmk-abs-RO2;
+  color: gmk-abs.$color-gmk-abs-WS1;
 }
 .gmk-metaverse-kb {
   // placeholder
@@ -800,43 +876,49 @@
 
 .gmk-metropolis-base-key,
 .gmk-metropolis-base-mod {
-  background: $color-pantone-5395C;
-  color: $color-pantone-333C;
+  background: pantone.$color-pantone-5395C;
+  color: pantone.$color-pantone-333C;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-pantone-5395C, 4%);
-    color: $color-pantone-333C;
-    border-color: mix($color-pantone-5395C, $color-pantone-333C);
+    background: color.adjust(pantone.$color-pantone-5395C, $lightness: -4%);
+    color: pantone.$color-pantone-333C;
+    border-color: color.mix(
+      pantone.$color-pantone-5395C,
+      pantone.$color-pantone-333C
+    );
   }
 }
 .gmk-metropolis-base-mod2 {
-  background: $color-pantone-5395C;
-  color: $color-pantone-142C;
+  background: pantone.$color-pantone-5395C;
+  color: pantone.$color-pantone-142C;
 }
 .gmk-metropolis-base-mod3 {
-  background: $color-pantone-5395C;
-  color: $color-pantone-179C;
+  background: pantone.$color-pantone-5395C;
+  color: pantone.$color-pantone-179C;
 }
 .gmk-metropolis-base-accent {
-  background: $color-pantone-142C;
-  color: $color-pantone-5395C;
+  background: pantone.$color-pantone-142C;
+  color: pantone.$color-pantone-5395C;
 }
 .gmk-metropolis-base-accent2 {
-  background: $color-pantone-333C;
-  color: $color-pantone-5395C;
+  background: pantone.$color-pantone-333C;
+  color: pantone.$color-pantone-5395C;
 }
 .gmk-metropolis-base-accent3 {
-  background: $color-pantone-179C;
-  color: $color-pantone-5395C;
+  background: pantone.$color-pantone-179C;
+  color: pantone.$color-pantone-5395C;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-pantone-179C, 4%);
-    color: $color-pantone-5395C;
-    border-color: mix($color-pantone-179C, $color-pantone-5395C);
+    background: color.adjust(pantone.$color-pantone-179C, $lightness: 4%);
+    color: pantone.$color-pantone-5395C;
+    border-color: color.mix(
+      pantone.$color-pantone-179C,
+      pantone.$color-pantone-5395C
+    );
   }
 }
 .gmk-metropolis-base-kb {
@@ -845,20 +927,23 @@
 
 .gmk-metropolis-midnight-key,
 .gmk-metropolis-midnight-mod {
-  background: $color-pantone-5395C;
-  color: $color-pantone-333C;
+  background: pantone.$color-pantone-5395C;
+  color: pantone.$color-pantone-333C;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-pantone-5395C, 4%);
-    color: $color-pantone-333C;
-    border-color: mix($color-pantone-5395C, $color-pantone-333C);
+    background: color.adjust(pantone.$color-pantone-5395C, $lightness: -4%);
+    color: pantone.$color-pantone-333C;
+    border-color: color.mix(
+      pantone.$color-pantone-5395C,
+      pantone.$color-pantone-333C
+    );
   }
 }
 .gmk-metropolis-midnight-accent {
-  background: $color-pantone-333C;
-  color: $color-pantone-5395C;
+  background: pantone.$color-pantone-333C;
+  color: pantone.$color-pantone-5395C;
 }
 .gmk-metropolis-midnight-kb {
   // placeholder
@@ -871,9 +956,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten(#c2d9e4, 4%);
-    color: darken(#444f58, 4%);
-    border-color: mix(#c2d9e4, #444f58);
+    background: color.adjust(#c2d9e4, $lightness: 4%);
+    color: color.adjust(#444f58, $lightness: -4%);
+    border-color: color.mix(#c2d9e4, #444f58);
   }
 }
 .gmk-mizu-mod {
@@ -883,9 +968,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#444f58, 4%);
+    background: color.adjust(#444f58, $lightness: -4%);
     color: #f7eee3;
-    border-color: mix(#444f58, #f7eee3);
+    border-color: color.mix(#444f58, #f7eee3);
   }
 }
 .gmk-mizu-accent {
@@ -894,103 +979,118 @@
 }
 
 .gmk-nautilus-key {
-  background: $color-pantone-534C;
-  color: $color-gmk-abs-TU2;
+  background: pantone.$color-pantone-534C;
+  color: gmk-abs.$color-gmk-abs-TU2;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-pantone-534C, 4%);
-    color: lighten($color-gmk-abs-TU2, 9%);
-    border-color: mix($color-pantone-534C, lighten($color-gmk-abs-TU2, 5%));
+    background: color.adjust(pantone.$color-pantone-534C, $lightness: -4%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-TU2, $lightness: 9%);
+    border-color: color.mix(
+      pantone.$color-pantone-534C,
+      color.adjust(gmk-abs.$color-gmk-abs-TU2, $lightness: 5%)
+    );
   }
 }
 .gmk-nautilus-mod {
-  background: $color-pantone-533C;
-  color: $color-gmk-abs-N6;
+  background: pantone.$color-pantone-533C;
+  color: gmk-abs.$color-gmk-abs-N6;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-pantone-533C, 4%);
-    color: $color-gmk-abs-N6;
-    border-color: mix($color-pantone-533C, $color-gmk-abs-N6);
+    background: color.adjust(pantone.$color-pantone-533C, $lightness: -4%);
+    color: gmk-abs.$color-gmk-abs-N6;
+    border-color: color.mix(
+      pantone.$color-pantone-533C,
+      gmk-abs.$color-gmk-abs-N6
+    );
   }
 }
 .gmk-nautilus-accent {
-  background: $color-gmk-abs-N6;
-  color: $color-pantone-533C;
+  background: gmk-abs.$color-gmk-abs-N6;
+  color: pantone.$color-pantone-533C;
   input {
-    background: lighten($color-gmk-abs-N6, 40%);
+    background: color.adjust(gmk-abs.$color-gmk-abs-N6, $lightness: 40%);
   }
 }
 .gmk-nautilus-kb {
   // placeholder
-  background: $color-pantone-533C;
+  background: pantone.$color-pantone-533C;
 }
 
 .gmk-nines-key,
 .gmk-nines-mod {
-  background: $color-gmk-abs-N9;
-  color: $color-gmk-abs-U9;
+  background: gmk-abs.$color-gmk-abs-N9;
+  color: gmk-abs.$color-gmk-abs-U9;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-gmk-abs-N9, 4%);
-    color: lighten($color-gmk-abs-U9, 10%);
-    border-color: mix($color-gmk-abs-N9, $color-gmk-abs-U9);
+    background: color.adjust(gmk-abs.$color-gmk-abs-N9, $lightness: -4%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-U9, $lightness: 10%);
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-N9,
+      gmk-abs.$color-gmk-abs-U9
+    );
   }
 }
 .gmk-nines-accent {
-  background: $color-gmk-abs-U9;
-  color: $color-gmk-abs-N9;
+  background: gmk-abs.$color-gmk-abs-U9;
+  color: gmk-abs.$color-gmk-abs-N9;
 }
 .gmk-nines-kb {
   // placeholder
 }
 
 .gmk-olivetti-key {
-  background: $color-gmk-abs-CP;
-  color: $color-gmk-abs-V4;
+  background: gmk-abs.$color-gmk-abs-CP;
+  color: gmk-abs.$color-gmk-abs-V4;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-gmk-abs-CP, 4%);
-    color: darken($color-gmk-abs-V4, 5%);
-    border-color: mix($color-gmk-abs-CP, darken($color-gmk-abs-V4, 5%));
+    background: color.adjust(gmk-abs.$color-gmk-abs-CP, $lightness: 4%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-V4, $lightness: -5%);
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-CP,
+      color.adjust(gmk-abs.$color-gmk-abs-V4, $lightness: -5%)
+    );
   }
 }
 .gmk-olivetti-mod {
-  background: $color-gmk-abs-U9;
-  color: $color-gmk-abs-V4;
+  background: gmk-abs.$color-gmk-abs-U9;
+  color: gmk-abs.$color-gmk-abs-V4;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-gmk-abs-U9, 4%);
-    color: darken($color-gmk-abs-V4, 18%);
-    border-color: mix($color-gmk-abs-U9, darken($color-gmk-abs-V4, 18%));
+    background: color.adjust(gmk-abs.$color-gmk-abs-U9, $lightness: 4%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-V4, $lightness: -18%);
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-U9,
+      color.adjust(gmk-abs.$color-gmk-abs-V4, $lightness: -18%)
+    );
   }
 }
 .gmk-olivetti-accent {
-  background: $color-gmk-abs-V4;
-  color: $color-gmk-abs-CP;
+  background: gmk-abs.$color-gmk-abs-V4;
+  color: gmk-abs.$color-gmk-abs-CP;
 }
 .gmk-olivetti-kb {
 }
 
 .gmk-olivia-key {
-  background: $color-gmk-abs-CP;
+  background: gmk-abs.$color-gmk-abs-CP;
   color: #363434;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-gmk-abs-CP, 4%);
+    background: color.adjust(gmk-abs.$color-gmk-abs-CP, $lightness: 4%);
     color: #363434;
-    border-color: mix($color-gmk-abs-CP, #363434);
+    border-color: color.mix(gmk-abs.$color-gmk-abs-CP, #363434);
   }
 }
 .gmk-olivia-mod {
@@ -1000,9 +1100,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#363434, 4%);
+    background: color.adjust(#363434, $lightness: -4%);
     color: #e8c4b8;
-    border-color: mix(#363434, #e8c4b8);
+    border-color: color.mix(#363434, #e8c4b8);
   }
 }
 .gmk-olivia-accent {
@@ -1020,9 +1120,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#2b2b2b, 4%);
+    background: color.adjust(#2b2b2b, $lightness: -4%);
     color: #f1beb0;
-    border-color: mix(#2b2b2b, #f1beb0);
+    border-color: color.mix(#2b2b2b, #f1beb0);
   }
 }
 .gmk-olivia-plus-plus-dark-accent {
@@ -1035,20 +1135,23 @@
 
 .gmk-phosphorous-key,
 .gmk-phosphorous-mod {
-  background: $color-pantone-11C;
-  color: $color-pantone-311C;
+  background: pantone.$color-pantone-11C;
+  color: pantone.$color-pantone-311C;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-pantone-11C, 4%);
-    color: lighten($color-pantone-311C, 4%);
-    border-color: mix($color-pantone-11C, $color-pantone-311C);
+    background: color.adjust(pantone.$color-pantone-11C, $lightness: -4%);
+    color: color.adjust(pantone.$color-pantone-311C, $lightness: 4%);
+    border-color: color.mix(
+      pantone.$color-pantone-11C,
+      pantone.$color-pantone-311C
+    );
   }
 }
 .gmk-phosphorous-accent {
-  background: $color-pantone-311C;
-  color: $color-pantone-11C;
+  background: pantone.$color-pantone-311C;
+  color: pantone.$color-pantone-11C;
 }
 .gmk-phosphorous-kb {
   // placeholder
@@ -1061,9 +1164,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten(#ded0af, 4%);
-    color: darken(#736b7c, 4%);
-    border-color: mix(#ded0af, darken(#736b7c, 4%));
+    background: color.adjust(#ded0af, $lightness: 4%);
+    color: color.adjust(#736b7c, $lightness: -4%);
+    border-color: color.mix(#ded0af, color.adjust(#736b7c, $lightness: -4%));
   }
 }
 .gmk-plum-mod {
@@ -1073,9 +1176,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#736b7c, 4%);
-    color: lighten(#ded0af, 8%);
-    border-color: mix(#736b7c, lighten(#ded0af, 8%));
+    background: color.adjust(#736b7c, $lightness: -4%);
+    color: color.adjust(#ded0af, $lightness: 8%);
+    border-color: color.mix(#736b7c, color.adjust(#ded0af, $lightness: 8%));
   }
 }
 .gmk-plum-accent {
@@ -1090,9 +1193,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten(#ece4d0, 4%);
+    background: color.adjust(#ece4d0, $lightness: 4%);
     color: #333732;
-    border-color: mix(#ece4d0, #333732);
+    border-color: color.mix(#ece4d0, #333732);
   }
 }
 .gmk-serika-mod {
@@ -1102,9 +1205,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten(#ffcd00, 4%);
+    background: color.adjust(#ffcd00, $lightness: 4%);
     color: #333732;
-    border-color: mix(#ffcd00, #333732);
+    border-color: color.mix(#ffcd00, #333732);
   }
 }
 .gmk-serika-accent {
@@ -1115,28 +1218,34 @@
 }
 
 .gmk-space-cadet-key {
-  background: $color-sp-abs-GD;
-  color: $color-gmk-abs-CP;
+  background: sp-abs.$color-sp-abs-GD;
+  color: gmk-abs.$color-gmk-abs-CP;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-sp-abs-GD, 4%);
-    color: lighten($color-gmk-abs-CP, 4%);
-    border-color: mix($color-sp-abs-GD, lighten($color-gmk-abs-CP, 4%));
+    background: color.adjust(sp-abs.$color-sp-abs-GD, $lightness: -4%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-CP, $lightness: 4%);
+    border-color: color.mix(
+      sp-abs.$color-sp-abs-GD,
+      color.adjust(gmk-abs.$color-gmk-abs-CP, $lightness: 4%)
+    );
   }
 }
 
 .gmk-space-cadet-mod {
-  background: $color-sp-abs-BFP;
-  color: $color-gmk-abs-CP;
+  background: sp-abs.$color-sp-abs-BFP;
+  color: gmk-abs.$color-gmk-abs-CP;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-sp-abs-BFP, 4%);
-    color: lighten($color-gmk-abs-CP, 4%);
-    border-color: mix($color-sp-abs-BFP, lighten($color-gmk-abs-CP, 4%));
+    background: color.adjust(sp-abs.$color-sp-abs-BFP, $lightness: -4%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-CP, $lightness: 4%);
+    border-color: color.mix(
+      sp-abs.$color-sp-abs-BFP,
+      color.adjust(gmk-abs.$color-gmk-abs-CP, $lightness: 4%)
+    );
   }
 }
 .gmk-space-cadet-kb {
@@ -1145,48 +1254,54 @@
 .gmk-striker-key,
 .gmk-striker-mod {
   background: #004d7c;
-  color: $color-gmk-abs-WS1;
+  color: gmk-abs.$color-gmk-abs-WS1;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#004d7c, 4%);
-    color: $color-gmk-abs-WS1;
-    border-color: mix(#004d7c, $color-gmk-abs-WS1);
+    background: color.adjust(#004d7c, $lightness: -4%);
+    color: gmk-abs.$color-gmk-abs-WS1;
+    border-color: color.mix(#004d7c, gmk-abs.$color-gmk-abs-WS1);
   }
 }
 .gmk-striker-accent {
   background: #002e51;
-  color: $color-gmk-abs-WS1;
+  color: gmk-abs.$color-gmk-abs-WS1;
 }
 
 .gmk-ta-royal-alpha-key {
-  background: $color-gmk-abs-3K;
-  color: $color-gmk-abs-N7;
+  background: gmk-abs.$color-gmk-abs-3K;
+  color: gmk-abs.$color-gmk-abs-N7;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-gmk-abs-3K, 4%);
-    color: darken($color-gmk-abs-N7, 10%);
-    border-color: mix($color-gmk-abs-3K, darken($color-gmk-abs-N7, 10%));
+    background: color.adjust(gmk-abs.$color-gmk-abs-3K, $lightness: 4%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-N7, $lightness: -10%);
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-3K,
+      color.adjust(gmk-abs.$color-gmk-abs-N7, $lightness: -10%)
+    );
   }
 }
 .gmk-ta-royal-alpha-mod {
-  background: $color-gmk-abs-AE;
-  color: $color-gmk-abs-CP;
+  background: gmk-abs.$color-gmk-abs-AE;
+  color: gmk-abs.$color-gmk-abs-CP;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-gmk-abs-AE, 4%);
-    color: lighten($color-gmk-abs-CP, 14%);
-    border-color: mix($color-gmk-abs-AE, lighten($color-gmk-abs-CP, 14%));
+    background: color.adjust(gmk-abs.$color-gmk-abs-AE, $lightness: -4%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-CP, $lightness: 14%);
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-AE,
+      color.adjust(gmk-abs.$color-gmk-abs-CP, $lightness: 14%)
+    );
   }
 }
 .gmk-ta-royal-alpha-accent {
-  background: $color-gmk-abs-N7;
-  color: $color-gmk-abs-CP;
+  background: gmk-abs.$color-gmk-abs-N7;
+  color: gmk-abs.$color-gmk-abs-CP;
 }
 .gmk-ta-royal-alpha-kb {
   // placeholder
@@ -1194,29 +1309,32 @@
 
 .gmk-terminal-key,
 .gmk-terminal-mod {
-  background: $color-gmk-abs-N9;
-  color: $color-gmk-abs-AE;
+  background: gmk-abs.$color-gmk-abs-N9;
+  color: gmk-abs.$color-gmk-abs-AE;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-gmk-abs-N9, 4%);
-    color: lighten($color-gmk-abs-AE, 20%);
-    border-color: mix($color-gmk-abs-N9, lighten($color-gmk-abs-AE, 20%));
+    background: color.adjust(gmk-abs.$color-gmk-abs-N9, $lightness: -4%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-AE, $lightness: 20%);
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-N9,
+      color.adjust(gmk-abs.$color-gmk-abs-AE, $lightness: 20%)
+    );
   }
 }
 .gmk-terminal-accent {
-  background: $color-gmk-abs-AE;
-  color: $color-gmk-abs-N9;
+  background: gmk-abs.$color-gmk-abs-AE;
+  color: gmk-abs.$color-gmk-abs-N9;
 }
 
 .gmk-vaporwave-key {
-  $color-vaporwave-lighter-pink: scale-color(
+  $color-vaporwave-lighter-pink: color.scale(
     #ff3eb5,
     $lightness: 60%,
     $saturation: -20%
   );
-  $color-vaporwave-lighter-lilac: scale-color(#9595d2, $lightness: 5%);
+  $color-vaporwave-lighter-lilac: color.scale(#9595d2, $lightness: 5%);
   background-color: $color-vaporwave-lighter-lilac;
   color: $color-vaporwave-lighter-pink;
   font-weight: bold;
@@ -1224,9 +1342,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-vaporwave-lighter-lilac, 4%);
-    color: lighten($color-vaporwave-lighter-pink, 8%);
-    border-color: mix(
+    background: color.adjust($color-vaporwave-lighter-lilac, $lightness: -4%);
+    color: color.adjust($color-vaporwave-lighter-pink, $lightness: 8%);
+    border-color: color.mix(
       $color-vaporwave-lighter-lilac,
       $color-vaporwave-lighter-pink
     );
@@ -1240,9 +1358,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#6244bb, 4%);
-    color: lighten(#00bce3, 12%);
-    border-color: mix(#6244bb, #00bce3);
+    background: color.adjust(#6244bb, $lightness: -4%);
+    color: color.adjust(#00bce3, $lightness: 12%);
+    border-color: color.mix(#6244bb, #00bce3);
   }
 }
 
@@ -1253,15 +1371,18 @@
 
 .gmk-wob-key,
 .gmk-wob-mod {
-  background: $color-gmk-abs-CR;
-  color: $color-gmk-abs-WS1;
+  background: gmk-abs.$color-gmk-abs-CR;
+  color: gmk-abs.$color-gmk-abs-WS1;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-gmk-abs-CR, 4%);
-    color: $color-gmk-abs-WS1;
-    border-color: mix($color-gmk-abs-CR, $color-gmk-abs-WS1);
+    background: color.adjust(gmk-abs.$color-gmk-abs-CR, $lightness: -4%);
+    color: gmk-abs.$color-gmk-abs-WS1;
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-CR,
+      gmk-abs.$color-gmk-abs-WS1
+    );
   }
 }
 .gmk-wob-kb {
@@ -1274,9 +1395,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten(#c7e6f5, 4%);
-    color: darken(#f54730, 26%);
-    border-color: mix(#c7e6f5, #f54730);
+    background: color.adjust(#c7e6f5, $lightness: 4%);
+    color: color.adjust(#f54730, $lightness: -26%);
+    border-color: color.mix(#c7e6f5, #f54730);
   }
 }
 .gmk-yuri-mod {
@@ -1286,9 +1407,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#2d394c, 4%);
-    color: lighten(#f54730, 22%);
-    border-color: mix(#2d394c, #f54730);
+    background: color.adjust(#2d394c, $lightness: -4%);
+    color: color.adjust(#f54730, $lightness: 22%);
+    border-color: color.mix(#2d394c, #f54730);
   }
 }
 .gmk-yuri-accent {
diff --git a/src/scss/colorways/_jtk.scss b/src/scss/colorways/_jtk.scss
index a0893ce891..a15b0a6390 100644
--- a/src/scss/colorways/_jtk.scss
+++ b/src/scss/colorways/_jtk.scss
@@ -1,3 +1,4 @@
+@use 'sass:color';
 // JTKeycaps
 
 .jtk-suited-assassin-key,
@@ -8,9 +9,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(#312c2b, 4%);
-    color: lighten(#a79373, 10%);
-    border-color: mix(#312c2b, #a79373);
+    background: color.adjust(#312c2b, $lightness: -4%);
+    color: color.adjust(#a79373, $lightness: 10%);
+    border-color: color.mix(#312c2b, #a79373);
   }
 }
 
diff --git a/src/scss/colorways/_keyreative.scss b/src/scss/colorways/_keyreative.scss
index a11deb4846..a170d1fdda 100644
--- a/src/scss/colorways/_keyreative.scss
+++ b/src/scss/colorways/_keyreative.scss
@@ -1,17 +1,20 @@
+@use 'sass:color';
 // Keyreative
+@use '../gmk-abs';
+@use '../pantone';
 
 .dsa-drifter-key {
   background: #e5e1e6;
   color: #222222;
   input {
-    background: lighten(#e5e1e6, 40%);
+    background: color.adjust(#e5e1e6, $lightness: 40%);
   }
 }
 .dsa-drifter-mod {
   background: #9b2242;
   color: #71dbd4;
   input {
-    background: lighten(#9b2242, 40%);
+    background: color.adjust(#9b2242, $lightness: 40%);
   }
 }
 .dsa-drifter-kb {
@@ -25,9 +28,9 @@
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken(white, 4%);
+    background: color.adjust(white, $lightness: -4%);
     color: #232d43;
-    border-color: mix(darken(white, 4%), #232d43);
+    border-color: color.mix(color.adjust(white, $lightness: -4%), #232d43);
   }
 }
 .dsa-milkshake-esc {
@@ -52,72 +55,84 @@
 }
 
 .kat-hyperfuse-key {
-  background: $color-gmk-abs-2M;
-  color: $color-gmk-abs-DY;
+  background: gmk-abs.$color-gmk-abs-2M;
+  color: gmk-abs.$color-gmk-abs-DY;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-gmk-abs-2M, 6%);
-    color: darken($color-gmk-abs-DY, 7%);
-    border-color: mix($color-gmk-abs-2M, $color-gmk-abs-DY);
+    background: color.adjust(gmk-abs.$color-gmk-abs-2M, $lightness: 6%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-DY, $lightness: -7%);
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-2M,
+      gmk-abs.$color-gmk-abs-DY
+    );
   }
 }
 .kat-hyperfuse-mod {
-  background: darken($color-gmk-abs-2B, 6%);
-  color: lighten($color-gmk-abs-TU2, 6%);
+  background: color.adjust(gmk-abs.$color-gmk-abs-2B, $lightness: -6%);
+  color: color.adjust(gmk-abs.$color-gmk-abs-TU2, $lightness: 6%);
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-gmk-abs-2B, 12%);
-    color: lighten($color-gmk-abs-TU2, 12%);
-    border-color: mix($color-gmk-abs-2B, $color-gmk-abs-TU2);
+    background: color.adjust(gmk-abs.$color-gmk-abs-2B, $lightness: -12%);
+    color: color.adjust(gmk-abs.$color-gmk-abs-TU2, $lightness: 12%);
+    border-color: color.mix(
+      gmk-abs.$color-gmk-abs-2B,
+      gmk-abs.$color-gmk-abs-TU2
+    );
   }
 }
 .kat-hyperfuse-accent {
-  background: $color-gmk-abs-TU2;
-  color: $color-gmk-abs-DY;
+  background: gmk-abs.$color-gmk-abs-TU2;
+  color: gmk-abs.$color-gmk-abs-DY;
   input {
-    background: lighten($color-gmk-abs-TU2, 40%);
+    background: color.adjust(gmk-abs.$color-gmk-abs-TU2, $lightness: 40%);
   }
 }
 .kat-hyperfuse-accent2 {
-  background: $color-gmk-abs-DY;
-  color: $color-gmk-abs-TU2;
+  background: gmk-abs.$color-gmk-abs-DY;
+  color: gmk-abs.$color-gmk-abs-TU2;
   input {
-    background: lighten($color-gmk-abs-DY, 40%);
+    background: color.adjust(gmk-abs.$color-gmk-abs-DY, $lightness: 40%);
   }
 }
 
 .kat-oasis-key {
-  background: $color-pantone-155C;
-  color: $color-pantone-7617C;
+  background: pantone.$color-pantone-155C;
+  color: pantone.$color-pantone-7617C;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-pantone-155C, 4%);
-    color: $color-pantone-7617C;
-    border-color: mix($color-pantone-155C, $color-pantone-7617C);
+    background: color.adjust(pantone.$color-pantone-155C, $lightness: 4%);
+    color: pantone.$color-pantone-7617C;
+    border-color: color.mix(
+      pantone.$color-pantone-155C,
+      pantone.$color-pantone-7617C
+    );
   }
 }
 .kat-oasis-mod {
-  background: $color-pantone-317C;
-  color: $color-pantone-7617C;
+  background: pantone.$color-pantone-317C;
+  color: pantone.$color-pantone-7617C;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-pantone-317C, 4%);
-    color: $color-pantone-7617C;
-    border-color: mix($color-pantone-317C, $color-pantone-7617C);
+    background: color.adjust(pantone.$color-pantone-317C, $lightness: 4%);
+    color: pantone.$color-pantone-7617C;
+    border-color: color.mix(
+      pantone.$color-pantone-317C,
+      pantone.$color-pantone-7617C
+    );
   }
 }
 .kat-oasis-accent {
-  background: $color-pantone-7617C;
-  color: $color-pantone-155C;
+  background: pantone.$color-pantone-7617C;
+  color: pantone.$color-pantone-155C;
   input {
-    background: lighten($color-pantone-7617C, 40%);
+    background: color.adjust(pantone.$color-pantone-7617C, $lightness: 40%);
   }
 }
diff --git a/src/scss/colorways/_mt3.scss b/src/scss/colorways/_mt3.scss
index 43a1c28138..4dde0fd9ab 100644
--- a/src/scss/colorways/_mt3.scss
+++ b/src/scss/colorways/_mt3.scss
@@ -1,3 +1,6 @@
+@use 'sass:color';
+@use '../mt3-abs';
+@use '../mt3-pbt';
 // MT3 Profile
 
 // MT3 3277
@@ -6,28 +9,31 @@
 }
 
 .mt3-3277-key {
-  background: $color-mt3-abs-3277-alpha;
-  color: $color-mt3-abs-3277-legend;
+  background: mt3-abs.$color-mt3-abs-3277-alpha;
+  color: mt3-abs.$color-mt3-abs-3277-legend;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-3277-alpha, 5%);
-    color: $color-mt3-abs-3277-legend;
-    border-color: $color-mt3-abs-3277-legend;
+    background: color.adjust(
+      mt3-abs.$color-mt3-abs-3277-alpha,
+      $lightness: -5%
+    );
+    color: mt3-abs.$color-mt3-abs-3277-legend;
+    border-color: mt3-abs.$color-mt3-abs-3277-legend;
   }
 }
 
 .mt3-3277-mod {
-  background: $color-mt3-abs-3277-mod;
-  color: $color-mt3-abs-3277-legend;
+  background: mt3-abs.$color-mt3-abs-3277-mod;
+  color: mt3-abs.$color-mt3-abs-3277-legend;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-3277-mod, 5%);
-    color: $color-mt3-abs-3277-legend;
-    border-color: $color-mt3-abs-3277-legend;
+    background: color.adjust(mt3-abs.$color-mt3-abs-3277-mod, $lightness: -5%);
+    color: mt3-abs.$color-mt3-abs-3277-legend;
+    border-color: mt3-abs.$color-mt3-abs-3277-legend;
   }
 }
 
@@ -36,28 +42,31 @@
 }
 
 .mt3-3277-ortho-key {
-  background: $color-mt3-abs-3277-alpha;
-  color: $color-mt3-abs-3277-legend;
+  background: mt3-abs.$color-mt3-abs-3277-alpha;
+  color: mt3-abs.$color-mt3-abs-3277-legend;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-3277-alpha, 5%);
-    color: $color-mt3-abs-3277-legend;
-    border-color: $color-mt3-abs-3277-legend;
+    background: color.adjust(
+      mt3-abs.$color-mt3-abs-3277-alpha,
+      $lightness: -5%
+    );
+    color: mt3-abs.$color-mt3-abs-3277-legend;
+    border-color: mt3-abs.$color-mt3-abs-3277-legend;
   }
 }
 
 .mt3-3277-ortho-mod {
-  background: $color-mt3-abs-3277-mod;
-  color: $color-mt3-abs-3277-legend;
+  background: mt3-abs.$color-mt3-abs-3277-mod;
+  color: mt3-abs.$color-mt3-abs-3277-legend;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-3277-mod, 5%);
-    color: $color-mt3-abs-3277-legend;
-    border-color: $color-mt3-abs-3277-legend;
+    background: color.adjust(mt3-abs.$color-mt3-abs-3277-mod, $lightness: -5%);
+    color: mt3-abs.$color-mt3-abs-3277-legend;
+    border-color: mt3-abs.$color-mt3-abs-3277-legend;
   }
 }
 
@@ -66,81 +75,93 @@
 }
 
 .mt3-3277-accent-red-key {
-  background: $color-mt3-abs-3277-alpha;
-  color: $color-mt3-abs-3277-legend;
+  background: mt3-abs.$color-mt3-abs-3277-alpha;
+  color: mt3-abs.$color-mt3-abs-3277-legend;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-3277-alpha, 5%);
-    color: $color-mt3-abs-3277-legend;
-    border-color: $color-mt3-abs-3277-legend;
+    background: color.adjust(
+      mt3-abs.$color-mt3-abs-3277-alpha,
+      $lightness: -5%
+    );
+    color: mt3-abs.$color-mt3-abs-3277-legend;
+    border-color: mt3-abs.$color-mt3-abs-3277-legend;
   }
 }
 
 .mt3-3277-accent-red-mod {
-  background: $color-mt3-abs-3277-mod;
-  color: $color-mt3-abs-3277-legend;
+  background: mt3-abs.$color-mt3-abs-3277-mod;
+  color: mt3-abs.$color-mt3-abs-3277-legend;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-3277-mod, 5%);
-    color: $color-mt3-abs-3277-legend;
-    border-color: $color-mt3-abs-3277-legend;
+    background: color.adjust(mt3-abs.$color-mt3-abs-3277-mod, $lightness: -5%);
+    color: mt3-abs.$color-mt3-abs-3277-legend;
+    border-color: mt3-abs.$color-mt3-abs-3277-legend;
   }
 }
 
 .mt3-3277-accent-red-accent-red {
-  background: $color-mt3-abs-3277-red;
-  color: $color-mt3-abs-3277-legend;
+  background: mt3-abs.$color-mt3-abs-3277-red;
+  color: mt3-abs.$color-mt3-abs-3277-legend;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-abs-3277-red, 5%);
-    color: $color-mt3-abs-3277-legend;
-    border-color: $color-mt3-abs-3277-legend;
+    background: color.adjust(mt3-abs.$color-mt3-abs-3277-red, $lightness: 5%);
+    color: mt3-abs.$color-mt3-abs-3277-legend;
+    border-color: mt3-abs.$color-mt3-abs-3277-legend;
   }
 }
 
 // mt3 /dev/tty base graysets
 .mt3-dev-tty-key {
-  background: $color-mt3-pbt-dev-tty-alpha;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-dev-tty-alpha;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-pbt-dev-tty-alpha, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-dev-tty-alpha,
+      $lightness: -5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 .mt3-dev-tty-mod {
-  background: $color-mt3-pbt-dev-tty-mod;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-dev-tty-mod;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-pbt-dev-tty-mod, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-dev-tty-mod,
+      $lightness: 5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 .mt3-dev-tty-accent {
-  background: $color-mt3-pbt-dev-tty-accent-red;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-dev-tty-accent-red;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-pbt-dev-tty-accent-red, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-dev-tty-accent-red,
+      $lightness: 5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
@@ -150,28 +171,34 @@
 
 // mt3 /dev/tty teal set
 .mt3-dev-tty-teal-key {
-  background: $color-mt3-pbt-dev-tty-alpha;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-dev-tty-alpha;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-pbt-dev-tty-alpha, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-dev-tty-alpha,
+      $lightness: -5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 .mt3-dev-tty-teal-mod {
-  background: $color-mt3-pbt-dev-tty-teal;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-dev-tty-teal;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-pbt-dev-tty-teal, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-dev-tty-teal,
+      $lightness: 5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
@@ -181,41 +208,50 @@
 
 // mt3 /dev/tty ortho graysets
 .mt3-dev-tty-ortho-key {
-  background: $color-mt3-pbt-dev-tty-alpha;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-dev-tty-alpha;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-pbt-dev-tty-alpha, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-dev-tty-alpha,
+      $lightness: -5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 .mt3-dev-tty-ortho-mod {
-  background: $color-mt3-pbt-dev-tty-mod;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-dev-tty-mod;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-pbt-dev-tty-mod, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-dev-tty-mod,
+      $lightness: 5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 .mt3-dev-tty-ortho-accent {
-  background: $color-mt3-pbt-dev-tty-accent-red;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-dev-tty-accent-red;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-pbt-dev-tty-accent-red, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-dev-tty-accent-red,
+      $lightness: 5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
@@ -229,28 +265,31 @@
 }
 
 .mt3-lotr-elvish-key {
-  background: $color-mt3-pbt-elvish-alpha;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-elvish-alpha;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-pbt-elvish-alpha, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-elvish-alpha,
+      $lightness: -5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 .mt3-lotr-elvish-mod {
-  background: $color-mt3-pbt-elvish-mod;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-elvish-mod;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-pbt-elvish-mod, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(mt3-pbt.$color-mt3-pbt-elvish-mod, $lightness: 5%);
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
@@ -259,41 +298,47 @@
 }
 
 .mt3-lotr-elvish-rivendell-key {
-  background: $color-mt3-pbt-elvish-alpha;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-elvish-alpha;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-pbt-elvish-alpha, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-elvish-alpha,
+      $lightness: -5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 .mt3-lotr-elvish-rivendell-mod {
-  background: $color-mt3-pbt-elvish-mod;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-elvish-mod;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-pbt-elvish-mod, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(mt3-pbt.$color-mt3-pbt-elvish-mod, $lightness: 5%);
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 .mt3-lotr-elvish-rivendell-accent {
-  background: $color-mt3-pbt-elvish-rivendell;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-elvish-rivendell;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-pbt-elvish-rivendell, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-elvish-rivendell,
+      $lightness: 5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
@@ -302,41 +347,47 @@
 }
 
 .mt3-lotr-elvish-evenstar-key {
-  background: $color-mt3-pbt-elvish-alpha;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-elvish-alpha;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-pbt-elvish-alpha, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-elvish-alpha,
+      $lightness: -5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 .mt3-lotr-elvish-evenstar-mod {
-  background: $color-mt3-pbt-elvish-mod;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-elvish-mod;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-pbt-elvish-mod, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(mt3-pbt.$color-mt3-pbt-elvish-mod, $lightness: 5%);
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 .mt3-lotr-elvish-evenstar-accent {
-  background: $color-mt3-pbt-elvish-evenstar;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-elvish-evenstar;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-pbt-elvish-evenstar, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-elvish-evenstar,
+      $lightness: 5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
@@ -345,28 +396,31 @@
 }
 
 .mt3-lotr-elvish-ortho-key {
-  background: $color-mt3-pbt-elvish-alpha;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-elvish-alpha;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-pbt-elvish-alpha, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-elvish-alpha,
+      $lightness: -5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 .mt3-lotr-elvish-ortho-mod {
-  background: $color-mt3-pbt-elvish-mod;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-elvish-mod;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-pbt-elvish-mod, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(mt3-pbt.$color-mt3-pbt-elvish-mod, $lightness: 5%);
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
@@ -375,28 +429,34 @@
 }
 
 .mt3-lotr-dwarvish-ortho-key {
-  background: $color-mt3-pbt-dwarvish-alpha;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-dwarvish-alpha;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-pbt-dwarvish-alpha, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-dwarvish-alpha,
+      $lightness: -5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 .mt3-lotr-dwarvish-ortho-mod {
-  background: $color-mt3-pbt-dwarvish-mod;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-dwarvish-mod;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-pbt-dwarvish-mod, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-dwarvish-mod,
+      $lightness: 5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
@@ -405,41 +465,50 @@
 }
 
 .mt3-lotr-dwarvish-durin-key {
-  background: $color-mt3-pbt-dwarvish-alpha;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-dwarvish-alpha;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-pbt-dwarvish-alpha, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-dwarvish-alpha,
+      $lightness: -5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 .mt3-lotr-dwarvish-durin-mod {
-  background: $color-mt3-pbt-dwarvish-mod;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-dwarvish-mod;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-pbt-dwarvish-mod, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-dwarvish-mod,
+      $lightness: 5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 .mt3-lotr-dwarvish-durin-accent {
-  background: $color-mt3-pbt-dwarvish-durin;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-dwarvish-durin;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-pbt-dwarvish-durin, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-dwarvish-durin,
+      $lightness: 5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
@@ -448,107 +517,119 @@
 }
 
 .mt3-lotr-dwarvish-key {
-  background: $color-mt3-pbt-dwarvish-alpha;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-dwarvish-alpha;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-pbt-dwarvish-alpha, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-dwarvish-alpha,
+      $lightness: -5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 .mt3-lotr-dwarvish-mod {
-  background: $color-mt3-pbt-dwarvish-mod;
-  color: $color-mt3-pbt-black;
+  background: mt3-pbt.$color-mt3-pbt-dwarvish-mod;
+  color: mt3-pbt.$color-mt3-pbt-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-mt3-pbt-dwarvish-mod, 5%);
-    color: $color-mt3-pbt-black;
-    border-color: $color-mt3-pbt-black;
+    background: color.adjust(
+      mt3-pbt.$color-mt3-pbt-dwarvish-mod,
+      $lightness: 5%
+    );
+    color: mt3-pbt.$color-mt3-pbt-black;
+    border-color: mt3-pbt.$color-mt3-pbt-black;
   }
 }
 
 // mt3 susuwatari base colourway
 .mt3-susuwatari-key {
-  background: $color-mt3-abs-susu-alpha;
-  color: $color-mt3-abs-white;
+  background: mt3-abs.$color-mt3-abs-susu-alpha;
+  color: mt3-abs.$color-mt3-abs-white;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-susu-alpha, 5%);
-    color: $color-mt3-abs-white;
-    border-color: $color-mt3-abs-white;
+    background: color.adjust(
+      mt3-abs.$color-mt3-abs-susu-alpha,
+      $lightness: -5%
+    );
+    color: mt3-abs.$color-mt3-abs-white;
+    border-color: mt3-abs.$color-mt3-abs-white;
   }
 }
 
 .mt3-susuwatari-mod-blue {
-  background: $color-mt3-abs-susu-mod;
-  color: $color-mt3-abs-susu-legend-blue;
+  background: mt3-abs.$color-mt3-abs-susu-mod;
+  color: mt3-abs.$color-mt3-abs-susu-legend-blue;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-susu-mod, 5%);
-    color: $color-mt3-abs-susu-legend-blue;
-    border-color: $color-mt3-abs-susu-legend-blue;
+    background: color.adjust(mt3-abs.$color-mt3-abs-susu-mod, $lightness: -5%);
+    color: mt3-abs.$color-mt3-abs-susu-legend-blue;
+    border-color: mt3-abs.$color-mt3-abs-susu-legend-blue;
   }
 }
 
 .mt3-susuwatari-mod {
-  background: $color-mt3-abs-susu-mod;
-  color: $color-mt3-abs-white;
+  background: mt3-abs.$color-mt3-abs-susu-mod;
+  color: mt3-abs.$color-mt3-abs-white;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-susu-mod, 5%);
-    color: $color-mt3-abs-white;
-    border-color: $color-mt3-abs-white;
+    background: color.adjust(mt3-abs.$color-mt3-abs-susu-mod, $lightness: -5%);
+    color: mt3-abs.$color-mt3-abs-white;
+    border-color: mt3-abs.$color-mt3-abs-white;
   }
 }
 
 .mt3-susuwatari-mod-green {
-  background: $color-mt3-abs-susu-mod;
-  color: $color-mt3-abs-susu-legend-green;
+  background: mt3-abs.$color-mt3-abs-susu-mod;
+  color: mt3-abs.$color-mt3-abs-susu-legend-green;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-susu-mod, 5%);
-    color: $color-mt3-abs-susu-legend-green;
-    border-color: $color-mt3-abs-susu-legend-green;
+    background: color.adjust(mt3-abs.$color-mt3-abs-susu-mod, $lightness: -5%);
+    color: mt3-abs.$color-mt3-abs-susu-legend-green;
+    border-color: mt3-abs.$color-mt3-abs-susu-legend-green;
   }
 }
 
 .mt3-susuwatari-accent {
-  background: $color-mt3-abs-susu-accent-red;
-  color: $color-mt3-abs-white;
+  background: mt3-abs.$color-mt3-abs-susu-accent-red;
+  color: mt3-abs.$color-mt3-abs-white;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-susu-accent-red, 5%);
-    color: $color-mt3-abs-white;
-    border-color: $color-mt3-abs-white;
+    background: color.adjust(
+      mt3-abs.$color-mt3-abs-susu-accent-red,
+      $lightness: -5%
+    );
+    color: mt3-abs.$color-mt3-abs-white;
+    border-color: mt3-abs.$color-mt3-abs-white;
   }
 }
 
 .mt3-susuwatari-accent-red {
-  background: $color-mt3-abs-susu-mod;
-  color: $color-mt3-abs-susu-legend-red;
+  background: mt3-abs.$color-mt3-abs-susu-mod;
+  color: mt3-abs.$color-mt3-abs-susu-legend-red;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-susu-mod, 5%);
-    color: $color-mt3-abs-susu-legend-red;
-    border-color: $color-mt3-abs-susu-legend-red;
+    background: color.adjust(mt3-abs.$color-mt3-abs-susu-mod, $lightness: -5%);
+    color: mt3-abs.$color-mt3-abs-susu-legend-red;
+    border-color: mt3-abs.$color-mt3-abs-susu-legend-red;
   }
 }
 
@@ -558,80 +639,86 @@
 
 // mt3 susuwatari ortho colourway
 .mt3-susuwatari-ortho-key {
-  background: $color-mt3-abs-susu-alpha;
-  color: $color-mt3-abs-white;
+  background: mt3-abs.$color-mt3-abs-susu-alpha;
+  color: mt3-abs.$color-mt3-abs-white;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-susu-alpha, 5%);
-    color: $color-mt3-abs-white;
-    border-color: $color-mt3-abs-white;
+    background: color.adjust(
+      mt3-abs.$color-mt3-abs-susu-alpha,
+      $lightness: -5%
+    );
+    color: mt3-abs.$color-mt3-abs-white;
+    border-color: mt3-abs.$color-mt3-abs-white;
   }
 }
 
 .mt3-susuwatari-ortho-mod-blue {
-  background: $color-mt3-abs-susu-mod;
-  color: $color-mt3-abs-susu-legend-blue;
+  background: mt3-abs.$color-mt3-abs-susu-mod;
+  color: mt3-abs.$color-mt3-abs-susu-legend-blue;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-susu-mod, 5%);
-    color: $color-mt3-abs-susu-legend-blue;
-    border-color: $color-mt3-abs-susu-legend-blue;
+    background: color.adjust(mt3-abs.$color-mt3-abs-susu-mod, $lightness: -5%);
+    color: mt3-abs.$color-mt3-abs-susu-legend-blue;
+    border-color: mt3-abs.$color-mt3-abs-susu-legend-blue;
   }
 }
 
 .mt3-susuwatari-ortho-mod {
-  background: $color-mt3-abs-susu-mod;
-  color: $color-mt3-abs-white;
+  background: mt3-abs.$color-mt3-abs-susu-mod;
+  color: mt3-abs.$color-mt3-abs-white;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-susu-mod, 5%);
-    color: $color-mt3-abs-white;
-    border-color: $color-mt3-abs-white;
+    background: color.adjust(mt3-abs.$color-mt3-abs-susu-mod, $lightness: -5%);
+    color: mt3-abs.$color-mt3-abs-white;
+    border-color: mt3-abs.$color-mt3-abs-white;
   }
 }
 
 .mt3-susuwatari-ortho-accent {
-  background: $color-mt3-abs-susu-accent-red;
-  color: $color-mt3-abs-white;
+  background: mt3-abs.$color-mt3-abs-susu-accent-red;
+  color: mt3-abs.$color-mt3-abs-white;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-susu-accent-red, 5%);
-    color: $color-mt3-abs-white;
-    border-color: $color-mt3-abs-white;
+    background: color.adjust(
+      mt3-abs.$color-mt3-abs-susu-accent-red,
+      $lightness: -5%
+    );
+    color: mt3-abs.$color-mt3-abs-white;
+    border-color: mt3-abs.$color-mt3-abs-white;
   }
 }
 
 .mt3-susuwatari-ortho-lwr {
-  background: $color-mt3-abs-susu-mod;
-  color: $color-mt3-abs-susu-legend-green;
+  background: mt3-abs.$color-mt3-abs-susu-mod;
+  color: mt3-abs.$color-mt3-abs-susu-legend-green;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-susu-mod, 5%);
-    color: $color-mt3-abs-susu-legend-green;
-    border-color: $color-mt3-abs-susu-legend-green;
+    background: color.adjust(mt3-abs.$color-mt3-abs-susu-mod, $lightness: -5%);
+    color: mt3-abs.$color-mt3-abs-susu-legend-green;
+    border-color: mt3-abs.$color-mt3-abs-susu-legend-green;
   }
 }
 
 .mt3-susuwatari-ortho-rse {
-  background: $color-mt3-abs-susu-mod;
-  color: $color-mt3-abs-susu-legend-red;
+  background: mt3-abs.$color-mt3-abs-susu-mod;
+  color: mt3-abs.$color-mt3-abs-susu-legend-red;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-mt3-abs-susu-mod, 5%);
-    color: $color-mt3-abs-susu-legend-red;
-    border-color: $color-mt3-abs-susu-legend-red;
+    background: color.adjust(mt3-abs.$color-mt3-abs-susu-mod, $lightness: -5%);
+    color: mt3-abs.$color-mt3-abs-susu-legend-red;
+    border-color: mt3-abs.$color-mt3-abs-susu-legend-red;
   }
 }
 
diff --git a/src/scss/colorways/_sp.scss b/src/scss/colorways/_sp.scss
index 9c11ed9bde..b876313d1f 100644
--- a/src/scss/colorways/_sp.scss
+++ b/src/scss/colorways/_sp.scss
@@ -1,3 +1,8 @@
+@use 'sass:color';
+@use '../sp-abs';
+@use '../sp-pbt';
+@use '../pantone';
+@use '../qmk_colors' as qmk-colors;
 // Signature Plastics keysets
 
 .dcs-midnight-kb {
@@ -5,34 +10,40 @@
 }
 
 .dcs-midnight-key {
-  background: $color-sp-abs-GB;
-  color: $color-sp-abs-VCO;
+  background: sp-abs.$color-sp-abs-GB;
+  color: sp-abs.$color-sp-abs-VCO;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: $color-sp-abs-GB;
-    color: lighten($color-sp-abs-VCO, 1%);
-    border-color: mix($color-sp-abs-GB, lighten($color-sp-abs-VCO, 1%));
+    background: sp-abs.$color-sp-abs-GB;
+    color: color.adjust(sp-abs.$color-sp-abs-VCO, $lightness: 1%);
+    border-color: color.mix(
+      sp-abs.$color-sp-abs-GB,
+      color.adjust(sp-abs.$color-sp-abs-VCO, $lightness: 1%)
+    );
   }
 }
 
 .dcs-midnight-mod {
-  background: $color-sp-abs-GEW;
-  color: $color-sp-abs-VCO;
+  background: sp-abs.$color-sp-abs-GEW;
+  color: sp-abs.$color-sp-abs-VCO;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: $color-sp-abs-GEW;
-    color: lighten($color-sp-abs-VCO, 14%);
-    border-color: mix($color-sp-abs-GEW, lighten($color-sp-abs-VCO, 14%));
+    background: sp-abs.$color-sp-abs-GEW;
+    color: color.adjust(sp-abs.$color-sp-abs-VCO, $lightness: 14%);
+    border-color: color.mix(
+      sp-abs.$color-sp-abs-GEW,
+      color.adjust(sp-abs.$color-sp-abs-VCO, $lightness: 14%)
+    );
   }
 }
 
 .dcs-midnight-accent {
-  background: $color-sp-abs-GEW;
-  color: $color-sp-abs-YCH;
+  background: sp-abs.$color-sp-abs-GEW;
+  color: sp-abs.$color-sp-abs-YCH;
 }
 
 .dcs-midnight-twilight-kb {
@@ -40,89 +51,98 @@
 }
 
 .dcs-midnight-twilight-key {
-  background: $color-sp-abs-GB;
-  color: $color-sp-abs-VCO;
+  background: sp-abs.$color-sp-abs-GB;
+  color: sp-abs.$color-sp-abs-VCO;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: $color-sp-abs-GB;
-    color: lighten($color-sp-abs-VCO, 1%);
-    border-color: mix($color-sp-abs-GB, lighten($color-sp-abs-VCO, 1%));
+    background: sp-abs.$color-sp-abs-GB;
+    color: color.adjust(sp-abs.$color-sp-abs-VCO, $lightness: 1%);
+    border-color: color.mix(
+      sp-abs.$color-sp-abs-GB,
+      color.adjust(sp-abs.$color-sp-abs-VCO, $lightness: 1%)
+    );
   }
 }
 
 .dcs-midnight-twilight-mod {
-  background: $color-sp-abs-VCO;
-  color: $qmk-black;
+  background: sp-abs.$color-sp-abs-VCO;
+  color: qmk-colors.$qmk-black;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: $color-sp-abs-VCO;
-    color: $qmk-black;
-    border-color: mix($color-sp-abs-VCO, $qmk-black);
+    background: sp-abs.$color-sp-abs-VCO;
+    color: qmk-colors.$qmk-black;
+    border-color: color.mix(sp-abs.$color-sp-abs-VCO, qmk-colors.$qmk-black);
   }
 }
 
 .dsa-galaxy-class-key {
-  background: $color-sp-pbt-BFE;
-  color: $color-sp-pbt-BLACK;
+  background: sp-pbt.$color-sp-pbt-BFE;
+  color: sp-pbt.$color-sp-pbt-BLACK;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-sp-pbt-BFE, 4%);
-    color: $color-sp-pbt-BLACK;
-    border-color: mix(lighten($color-sp-pbt-BFE, 4%), $color-sp-pbt-BLACK);
+    background: color.adjust(sp-pbt.$color-sp-pbt-BFE, $lightness: 4%);
+    color: sp-pbt.$color-sp-pbt-BLACK;
+    border-color: color.mix(
+      color.adjust(sp-pbt.$color-sp-pbt-BFE, $lightness: 4%),
+      sp-pbt.$color-sp-pbt-BLACK
+    );
   }
 }
 .dsa-galaxy-class-mod {
   // yellow
-  background: $color-pantone-141C;
-  color: $color-sp-pbt-BLACK;
+  background: pantone.$color-pantone-141C;
+  color: sp-pbt.$color-sp-pbt-BLACK;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-pantone-141C, 4%);
-    color: $color-sp-pbt-BLACK;
-    border-color: mix(lighten($color-pantone-141C, 4%), $color-sp-pbt-BLACK);
+    background: color.adjust(pantone.$color-pantone-141C, $lightness: 4%);
+    color: sp-pbt.$color-sp-pbt-BLACK;
+    border-color: color.mix(
+      color.adjust(pantone.$color-pantone-141C, $lightness: 4%),
+      sp-pbt.$color-sp-pbt-BLACK
+    );
   }
 }
 .dsa-galaxy-class-purple {
-  background: $color-sp-pbt-RCB;
-  color: $color-sp-pbt-BLACK;
+  background: sp-pbt.$color-sp-pbt-RCB;
+  color: sp-pbt.$color-sp-pbt-BLACK;
   input {
-    background: lighten($color-sp-pbt-RCB, 40%);
+    background: color.adjust(sp-pbt.$color-sp-pbt-RCB, $lightness: 40%);
   }
 }
 .dsa-galaxy-class-darker-blue {
-  background: $color-sp-pbt-BDJ;
-  color: $color-sp-pbt-BLACK;
+  background: sp-pbt.$color-sp-pbt-BDJ;
+  color: sp-pbt.$color-sp-pbt-BLACK;
   input {
-    background: lighten($color-sp-pbt-BDJ, 40%);
+    background: color.adjust(sp-pbt.$color-sp-pbt-BDJ, $lightness: 40%);
   }
 }
 .dsa-galaxy-class-pink {
-  background: $color-sp-pbt-RCA;
-  color: $color-sp-pbt-BLACK;
+  background: sp-pbt.$color-sp-pbt-RCA;
+  color: sp-pbt.$color-sp-pbt-BLACK;
   input {
-    background: lighten($color-sp-pbt-RCA, 40%);
+    background: color.adjust(sp-pbt.$color-sp-pbt-RCA, $lightness: 40%);
   }
 }
 .dsa-galaxy-class-light-blue {
-  background: $color-sp-pbt-BFE;
-  color: $color-sp-pbt-BLACK;
+  background: sp-pbt.$color-sp-pbt-BFE;
+  color: sp-pbt.$color-sp-pbt-BLACK;
   input {
-    background: lighten($color-sp-pbt-BFE, 40%);
+    background: color.adjust(sp-pbt.$color-sp-pbt-BFE, $lightness: 40%);
   }
 }
 .dsa-galaxy-class-gray {
-  background: $color-sp-pbt-GQT;
-  color: $color-sp-pbt-BLACK;
+  background: sp-pbt.$color-sp-pbt-GQT;
+  color: sp-pbt.$color-sp-pbt-BLACK;
   input {
-    background: lighten($color-sp-pbt-GQT, 40%);
+    background: color.adjust(sp-pbt.$color-sp-pbt-GQT, $lightness: 40%);
   }
 }
 .dsa-galaxy-class-kb {
@@ -130,261 +150,279 @@
 
 .sa-bliss-key,
 .sa-bliss-mod {
-  background: $color-sp-abs-GC;
-  color: $color-pantone-13-1406TCX;
+  background: sp-abs.$color-sp-abs-GC;
+  color: pantone.$color-pantone-13-1406TCX;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-sp-abs-GC, 4%);
-    color: lighten($color-pantone-13-1406TCX, 5%);
-    border-color: mix(
-      darken($color-sp-abs-GC, 4%),
-      lighten($color-pantone-13-1406TCX, 5%)
+    background: color.adjust(sp-abs.$color-sp-abs-GC, $lightness: -4%);
+    color: color.adjust(pantone.$color-pantone-13-1406TCX, $lightness: 5%);
+    border-color: color.mix(
+      color.adjust(sp-abs.$color-sp-abs-GC, $lightness: -4%),
+      color.adjust(pantone.$color-pantone-13-1406TCX, $lightness: 5%)
     );
   }
 }
 .sa-bliss-accent {
-  background: $color-pantone-13-1406TCX;
-  color: $color-sp-abs-GC;
+  background: pantone.$color-pantone-13-1406TCX;
+  color: sp-abs.$color-sp-abs-GC;
 }
 .sa-bliss-kb {
   // placeholder
 }
 
 .sa-carbon-key {
-  background: $color-sp-abs-WBO;
-  color: $color-sp-abs-GQM;
+  background: sp-abs.$color-sp-abs-WBO;
+  color: sp-abs.$color-sp-abs-GQM;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-sp-abs-WBO, 4%);
-    color: $color-sp-abs-GQM;
-    border-color: mix(lighten($color-sp-abs-WBO, 4%), $color-sp-abs-GQM);
+    background: color.adjust(sp-abs.$color-sp-abs-WBO, $lightness: 4%);
+    color: sp-abs.$color-sp-abs-GQM;
+    border-color: color.mix(
+      color.adjust(sp-abs.$color-sp-abs-WBO, $lightness: 4%),
+      sp-abs.$color-sp-abs-GQM
+    );
   }
 }
 .sa-carbon-mod {
-  background: $color-sp-abs-GQM;
-  color: $color-sp-abs-OBC;
+  background: sp-abs.$color-sp-abs-GQM;
+  color: sp-abs.$color-sp-abs-OBC;
   input,
   .key-contents {
-    background: darken($color-sp-abs-GQM, 4%);
-    color: lighten($color-sp-abs-OBC, 12%);
-    border-color: mix(
-      darken($color-sp-abs-GQM, 4%),
-      lighten($color-sp-abs-OBC, 12%)
+    background: color.adjust(sp-abs.$color-sp-abs-GQM, $lightness: -4%);
+    color: color.adjust(sp-abs.$color-sp-abs-OBC, $lightness: 12%);
+    border-color: color.mix(
+      color.adjust(sp-abs.$color-sp-abs-GQM, $lightness: -4%),
+      color.adjust(sp-abs.$color-sp-abs-OBC, $lightness: 12%)
     );
   }
 }
 .sa-carbon-accent {
-  background: $color-sp-abs-OBC;
-  color: $color-sp-abs-GQM;
+  background: sp-abs.$color-sp-abs-OBC;
+  color: sp-abs.$color-sp-abs-GQM;
 }
 
 .sa-danger-zone-key {
-  background: $color-sp-abs-BFU;
-  color: $color-sp-abs-YY;
+  background: sp-abs.$color-sp-abs-BFU;
+  color: sp-abs.$color-sp-abs-YY;
   input,
   .key-contents {
-    background: darken($color-sp-abs-BFU, 4%);
-    color: $color-sp-abs-YY;
-    border-color: mix(darken($color-sp-abs-BFU, 4%), $color-sp-abs-YY);
+    background: color.adjust(sp-abs.$color-sp-abs-BFU, $lightness: -4%);
+    color: sp-abs.$color-sp-abs-YY;
+    border-color: color.mix(
+      color.adjust(sp-abs.$color-sp-abs-BFU, $lightness: -4%),
+      sp-abs.$color-sp-abs-YY
+    );
   }
 }
 .sa-danger-zone-mod {
-  background: $color-sp-abs-GSM;
-  color: $color-sp-abs-YY;
+  background: sp-abs.$color-sp-abs-GSM;
+  color: sp-abs.$color-sp-abs-YY;
   input,
   .key-contents {
-    background: darken($color-sp-abs-GSM, 5%);
-    color: lighten($color-sp-abs-YY, 13%);
-    border-color: mix(
-      darken($color-sp-abs-GSM, 5%),
-      lighten($color-sp-abs-YY, 13%)
+    background: color.adjust(sp-abs.$color-sp-abs-GSM, $lightness: -5%);
+    color: color.adjust(sp-abs.$color-sp-abs-YY, $lightness: 13%);
+    border-color: color.mix(
+      color.adjust(sp-abs.$color-sp-abs-GSM, $lightness: -5%),
+      color.adjust(sp-abs.$color-sp-abs-YY, $lightness: 13%)
     );
   }
 }
 .sa-danger-zone-accent-yellow {
-  background: $color-sp-abs-YY;
-  color: $color-sp-abs-BFU;
+  background: sp-abs.$color-sp-abs-YY;
+  color: sp-abs.$color-sp-abs-BFU;
 }
 .sa-danger-zone-accent-red {
-  background: $color-sp-abs-RAS;
-  color: $color-sp-abs-YY;
+  background: sp-abs.$color-sp-abs-RAS;
+  color: sp-abs.$color-sp-abs-YY;
 }
 .sa-danger-zone-kb {
 }
 
 .sa-jukebox-key {
-  background: $color-sp-abs-TM;
-  color: $color-sp-abs-RN;
+  background: sp-abs.$color-sp-abs-TM;
+  color: sp-abs.$color-sp-abs-RN;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-sp-abs-TM, 6%);
-    color: darken($color-sp-abs-RN, 8%);
-    border-color: mix(
-      lighten($color-sp-abs-TM, 6%),
-      darken($color-sp-abs-RN, 8%)
+    background: color.adjust(sp-abs.$color-sp-abs-TM, $lightness: 6%);
+    color: color.adjust(sp-abs.$color-sp-abs-RN, $lightness: -8%);
+    border-color: color.mix(
+      color.adjust(sp-abs.$color-sp-abs-TM, $lightness: 6%),
+      color.adjust(sp-abs.$color-sp-abs-RN, $lightness: -8%)
     );
   }
 }
 .sa-jukebox-mod {
-  background: $color-sp-abs-VCO;
-  color: $color-sp-abs-RN;
+  background: sp-abs.$color-sp-abs-VCO;
+  color: sp-abs.$color-sp-abs-RN;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-sp-abs-VCO, 12%);
-    color: darken($color-sp-abs-RN, 10%);
-    border-color: mix(
-      lighten($color-sp-abs-VCO, 12%),
-      darken($color-sp-abs-RN, 10%)
+    background: color.adjust(sp-abs.$color-sp-abs-VCO, $lightness: 12%);
+    color: color.adjust(sp-abs.$color-sp-abs-RN, $lightness: -10%);
+    border-color: color.mix(
+      color.adjust(sp-abs.$color-sp-abs-VCO, $lightness: 12%),
+      color.adjust(sp-abs.$color-sp-abs-RN, $lightness: -10%)
     );
   }
 }
 .sa-jukebox-accent {
-  background: $color-sp-abs-RN;
-  color: $color-sp-abs-TM;
+  background: sp-abs.$color-sp-abs-RN;
+  color: sp-abs.$color-sp-abs-TM;
   input {
-    background: lighten($color-sp-abs-RN, 40%);
+    background: color.adjust(sp-abs.$color-sp-abs-RN, $lightness: 40%);
   }
 }
 .sa-jukebox-kb {
 }
 
 .sa-modern-selectric-key {
-  background: $color-sp-abs-NN;
-  color: $color-sp-abs-WFK;
+  background: sp-abs.$color-sp-abs-NN;
+  color: sp-abs.$color-sp-abs-WFK;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-sp-abs-NN, 4%);
-    color: $color-sp-abs-WFK;
-    border-color: mix(darken($color-sp-abs-NN, 4%), $color-sp-abs-WFK);
+    background: color.adjust(sp-abs.$color-sp-abs-NN, $lightness: -4%);
+    color: sp-abs.$color-sp-abs-WFK;
+    border-color: color.mix(
+      color.adjust(sp-abs.$color-sp-abs-NN, $lightness: -4%),
+      sp-abs.$color-sp-abs-WFK
+    );
   }
 }
 .sa-modern-selectric-mod {
-  background: $color-sp-abs-BDH;
-  color: $color-sp-abs-WFK;
+  background: sp-abs.$color-sp-abs-BDH;
+  color: sp-abs.$color-sp-abs-WFK;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-sp-abs-BDH, 4%);
-    color: $color-sp-abs-WFK;
-    border-color: mix(darken($color-sp-abs-BDH, 4%), $color-sp-abs-WFK);
+    background: color.adjust(sp-abs.$color-sp-abs-BDH, $lightness: -4%);
+    color: sp-abs.$color-sp-abs-WFK;
+    border-color: color.mix(
+      color.adjust(sp-abs.$color-sp-abs-BDH, $lightness: -4%),
+      sp-abs.$color-sp-abs-WFK
+    );
   }
 }
 .sa-modern-selectric-kb {
 }
 
 .sa-nantucket-selectric-key {
-  background: $color-sp-abs-WV;
-  color: $color-sp-abs-BBI;
+  background: sp-abs.$color-sp-abs-WV;
+  color: sp-abs.$color-sp-abs-BBI;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-sp-abs-WV, 4%);
-    color: $color-sp-abs-BBI;
-    border-color: mix(lighten($color-sp-abs-WV, 4%), $color-sp-abs-BBI);
+    background: color.adjust(sp-abs.$color-sp-abs-WV, $lightness: 4%);
+    color: sp-abs.$color-sp-abs-BBI;
+    border-color: color.mix(
+      color.adjust(sp-abs.$color-sp-abs-WV, $lightness: 4%),
+      sp-abs.$color-sp-abs-BBI
+    );
   }
 }
 .sa-nantucket-selectric-mod {
-  background: $color-sp-abs-BBI;
-  color: $color-sp-abs-YCF;
+  background: sp-abs.$color-sp-abs-BBI;
+  color: sp-abs.$color-sp-abs-YCF;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-sp-abs-BBI, 4%);
-    color: $color-sp-abs-YCF;
-    border-color: mix(darken($color-sp-abs-BBI, 4%), $color-sp-abs-YCF);
+    background: color.adjust(sp-abs.$color-sp-abs-BBI, $lightness: -4%);
+    color: sp-abs.$color-sp-abs-YCF;
+    border-color: color.mix(
+      color.adjust(sp-abs.$color-sp-abs-BBI, $lightness: -4%),
+      sp-abs.$color-sp-abs-YCF
+    );
   }
 }
 .sa-nantucket-selectric-kb {
 }
 
 .sa-oblivion-hagoromo-key {
-  background: $color-sp-abs-WFK;
-  color: $color-sp-abs-GD;
+  background: sp-abs.$color-sp-abs-WFK;
+  color: sp-abs.$color-sp-abs-GD;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: lighten($color-sp-abs-WFK, 4%);
-    color: darken($color-sp-abs-GD, 10%);
-    border-color: mix(
-      lighten($color-sp-abs-WFK, 4%),
-      darken($color-sp-abs-GD, 10%)
+    background: color.adjust(sp-abs.$color-sp-abs-WFK, $lightness: 4%);
+    color: color.adjust(sp-abs.$color-sp-abs-GD, $lightness: -10%);
+    border-color: color.mix(
+      color.adjust(sp-abs.$color-sp-abs-WFK, $lightness: 4%),
+      color.adjust(sp-abs.$color-sp-abs-GD, $lightness: -10%)
     );
   }
 }
 .sa-oblivion-hagoromo-mod {
-  background: $color-sp-abs-GQM;
-  color: $color-sp-abs-GAL;
+  background: sp-abs.$color-sp-abs-GQM;
+  color: sp-abs.$color-sp-abs-GAL;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-sp-abs-GQM, 4%);
-    color: lighten($color-sp-abs-GAL, 5%);
-    border-color: mix(
-      darken($color-sp-abs-GQM, 4%),
-      lighten($color-sp-abs-GAL, 5%)
+    background: color.adjust(sp-abs.$color-sp-abs-GQM, $lightness: -4%);
+    color: color.adjust(sp-abs.$color-sp-abs-GAL, $lightness: 5%);
+    border-color: color.mix(
+      color.adjust(sp-abs.$color-sp-abs-GQM, $lightness: -4%),
+      color.adjust(sp-abs.$color-sp-abs-GAL, $lightness: 5%)
     );
   }
 }
 .sa-oblivion-hagoromo-accent {
-  background: $color-sp-abs-RAS;
-  color: $color-sp-abs-GAL;
+  background: sp-abs.$color-sp-abs-RAS;
+  color: sp-abs.$color-sp-abs-GAL;
 }
 .sa-oblivion-hagoromo-kb {
 }
 
 .sa-vilebloom-key,
 .sa-vilebloom-mod {
-  background: $color-pantone-7699C;
-  color: $color-sp-abs-WFK;
+  background: pantone.$color-pantone-7699C;
+  color: sp-abs.$color-sp-abs-WFK;
   input,
   .key-contents,
   .key-contents:empty,
   .key-contents::before {
-    background: darken($color-pantone-7699C, 4%);
-    color: lighten($color-sp-abs-WFK, 8%);
-    border-color: mix(
-      darken($color-pantone-7699C, 4%),
-      lighten($color-sp-abs-WFK, 8%)
+    background: color.adjust(pantone.$color-pantone-7699C, $lightness: -4%);
+    color: color.adjust(sp-abs.$color-sp-abs-WFK, $lightness: 8%);
+    border-color: color.mix(
+      color.adjust(pantone.$color-pantone-7699C, $lightness: -4%),
+      color.adjust(sp-abs.$color-sp-abs-WFK, $lightness: 8%)
     );
   }
 }
 
 .sa-vilebloom-accent1 {
-  background: $color-pantone-474U;
-  color: $color-pantone-7699C;
+  background: pantone.$color-pantone-474U;
+  color: pantone.$color-pantone-7699C;
   input {
-    background: lighten($color-pantone-474U, 40%);
+    background: color.adjust(pantone.$color-pantone-474U, $lightness: 40%);
   }
 }
 
 .sa-vilebloom-accent2 {
-  background: $color-pantone-177C;
-  color: $color-sp-abs-WFK;
+  background: pantone.$color-pantone-177C;
+  color: sp-abs.$color-sp-abs-WFK;
   input {
-    background: lighten($color-pantone-177C, 40%);
+    background: color.adjust(pantone.$color-pantone-177C, $lightness: 40%);
   }
 }
 
 .sa-vilebloom-accent3 {
-  background: $color-pantone-2046U;
-  color: $color-sp-abs-WFK;
+  background: pantone.$color-pantone-2046U;
+  color: sp-abs.$color-sp-abs-WFK;
   input {
-    background: lighten($color-pantone-2046U, 40%);
+    background: color.adjust(pantone.$color-pantone-2046U, $lightness: 40%);
   }
 }
 
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 88ae3ccab2..cad2fb95cb 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -1,7 +1,7 @@
-@import '@/scss/qmk_colors';
-@import '@/scss/themes';
-@import '@/scss/status-bar';
-@import '@/scss/tooltip.scss';
+@use 'qmk_colors';
+@use 'themes';
+@use 'status-bar';
+@use 'tooltip.scss';
 
 /*
 TO REFACTOR: import of style.css
diff --git a/src/scss/themes.scss b/src/scss/themes.scss
index 8c716c4998..2c598cc74c 100644
--- a/src/scss/themes.scss
+++ b/src/scss/themes.scss
@@ -1,4 +1,4 @@
-@import './qmk_colors';
+@use 'qmk_colors';
 // default theme
 html {
   body {
@@ -28,7 +28,7 @@ html {
     }
     // @see https://sass-lang.com/documentation/breaking-changes/mixed-decls/
     & {
-      background-color: $qmk-white;
+      background-color: qmk_colors.$qmk-white;
       color: #333;
     }
     #app {
@@ -46,7 +46,7 @@ html {
     #favorite-colorway {
       color: grey;
       &.active {
-        color: $qmk-green;
+        color: qmk_colors.$qmk-green;
       }
     }
     .embedded-tutorial {
@@ -95,7 +95,7 @@ html {
       }
     }
     .tester-key {
-      background: $qmk-grey-light;
+      background: qmk_colors.$qmk-grey-light;
       cursor: default;
       &.active {
         background: green;
@@ -118,7 +118,7 @@ html {
     .letter-key-code,
     .letter-code,
     .letter-key {
-      background-color: $qmk-grey-light;
+      background-color: qmk_colors.$qmk-grey-light;
       border-color: rgba(0, 0, 0, 0.7);
     }
     .status-log {
@@ -357,8 +357,8 @@ html {
 // Dark theme
 html[data-theme='dark'] {
   body {
-    color: $qmk-white;
-    background-color: $qmk-dark-bg;
+    color: qmk_colors.$qmk-white;
+    background-color: qmk_colors.$qmk-dark-bg;
     h3 {
       color: #ddd;
     }
@@ -374,21 +374,21 @@ html[data-theme='dark'] {
     }
   }
   header h1 a {
-    color: $qmk-grey-light;
+    color: qmk_colors.$qmk-grey-light;
     &:hover {
-      color: $qmk-grey;
+      color: qmk_colors.$qmk-grey;
     }
   }
   #controller-top,
   #controller-bottom {
-    background-color: $qmk-grey-dark;
-    color: $qmk-grey-light;
+    background-color: qmk_colors.$qmk-grey-dark;
+    color: qmk_colors.$qmk-grey-light;
     border-color: #0e0e0e;
   }
   .tester-key {
     background: #0c0c0c;
     &.detected {
-      color: $qmk-black;
+      color: qmk_colors.$qmk-black;
     }
   }
   #toggle-terminal-label {
@@ -404,11 +404,11 @@ html[data-theme='dark'] {
     color: #f8f8f2;
   }
   #visual-keymap {
-    background: $qmk-grey-dark;
-    border-color: $qmk-grey-dark;
+    background: qmk_colors.$qmk-grey-dark;
+    border-color: qmk_colors.$qmk-grey-dark;
   }
   .info-title {
-    color: $qmk-grey-light;
+    color: qmk_colors.$qmk-grey-light;
   }
   .help {
     color: #1db6ff;
@@ -425,7 +425,7 @@ html[data-theme='dark'] {
     color: #ddd;
   }
   .tab-area {
-    background: $qmk-grey-dark;
+    background: qmk_colors.$qmk-grey-dark;
     border-color: #2f2f2f;
   }
   .keycode-container:after,
@@ -437,17 +437,17 @@ html[data-theme='dark'] {
   .letter-key-code,
   .letter-code,
   .letter-key {
-    background-color: $qmk-grey-dark;
-    color: $qmk-grey-light;
+    background-color: qmk_colors.$qmk-grey-dark;
+    color: qmk_colors.$qmk-grey-light;
   }
   #app {
-    color: $qmk-grey-light;
+    color: qmk_colors.$qmk-grey-light;
   }
   .tab {
     border-color: #2f2f2f;
     color: #555;
     &.active {
-      color: $qmk-grey-light;
+      color: qmk_colors.$qmk-grey-light;
       background-color: #464646;
     }
   }
@@ -458,7 +458,7 @@ html[data-theme='dark'] {
     border-color: #0e0e0e;
   }
   .layers {
-    background-color: $qmk-dark-bg;
+    background-color: qmk_colors.$qmk-dark-bg;
   }
   .key {
     &:empty {
@@ -469,14 +469,14 @@ html[data-theme='dark'] {
     }
   }
   .slideout-panel .slideout-wrapper .slideout {
-    background-color: $qmk-grey-dark;
-    color: $qmk-grey-light;
+    background-color: qmk_colors.$qmk-grey-dark;
+    color: qmk_colors.$qmk-grey-light;
     h2 {
-      color: $qmk-grey-light;
+      color: qmk_colors.$qmk-grey-light;
     }
   }
   .layer {
-    background: $qmk-grey-dark;
+    background: qmk_colors.$qmk-grey-dark;
     border-color: #5a5a5a;
     color: #0e0e0e;
     &:hover {
@@ -491,7 +491,7 @@ html[data-theme='dark'] {
       }
     }
     &.non-empty {
-      color: $qmk-grey-light;
+      color: qmk_colors.$qmk-grey-light;
       &:hover {
         color: #000;
       }
@@ -500,8 +500,8 @@ html[data-theme='dark'] {
 
   @media print {
     body {
-      background-color: $qmk-white;
-      color: $qmk-dark-bg;
+      background-color: qmk_colors.$qmk-white;
+      color: qmk_colors.$qmk-dark-bg;
       th {
         color: #444444;
       }