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

@@ -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;
 }

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;

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';