partially fix deprecated Sass @import rules

frontend/src/components/GCodeBlock.vue

@@ -135,9 +135,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '@/sass/settings';
+  @use 'vuetify/settings' as vuetify;
+  @use 'sass:map';
 
-  $grey-lighten-4: map-get($grey, 'lighten-4');
+  /** Transitions - Based on Angular Material **/
+  $swift-ease-out-duration: .4s !default;
+  $swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
+  $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
+
+  $swift-ease-in-duration: .3s !default;
+  $swift-ease-in-timing-function: cubic-bezier(.55, 0, .55, .2) !default;
+  $swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
+
+  $swift-ease-in-out-duration: .5s !default;
+  $swift-ease-in-out-timing-function: cubic-bezier(.35, 0, .25, 1) !default;
+  $swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
 
   .code-block {
     overflow: hidden;
@@ -203,6 +215,7 @@ export default {
     padding: 16px;
     overflow: auto;
   }
+
   .copy-button {
     position: absolute;
     top: 12px;
@@ -211,6 +224,7 @@ export default {
     opacity: 0;
     transition: $swift-ease-out;
   }
+
   .copied {
     padding: 8px 16px;
     position: absolute;
@@ -221,27 +235,30 @@ export default {
     transform: translate3d(0, -48px, 0);
     transition: $swift-ease-in-out;
     color: #fff;
-    font-family: $font-roboto;
+    font-family: Roboto, sans-serif;
     font-size: 14px;
     line-height: 1em;
-    &.active {
-      transition: $swift-ease-out;
-      transform: translate3d(0, 0, 0);
-    }
-  }
 
-  .v-theme--light .code-block {
-    background-color: rgba(0, 0, 0, .02);
-  }
+   &.active {
+     transition : $swift-ease-out;
+     transform : translate3d(0,0,0);
+   }
+ }
 
-  .v-theme--dark .code-block {
-    background-color: rgba(0, 0, 0, .2);
+ .v-theme--light .code-block {
+   background-color : rgba(0,0,0,.02);
+ }
+
+ .v-theme--dark .code-block {
+   background-color : rgba(0,0,0,.2);
+
+   &:after {
+     color : rgba(#fff,.26) !important;
+   }
+
+   code.hljs {
+     color : map.get(vuetify.$grey, 'lighten-4') !important;
+   }
+ }
 
-    &:after {
-      color: rgba(#fff, .26) !important;
-    }
-    code.hljs {
-      color: $grey-lighten-4 !important;
-    }
-  }
 </style>

frontend/src/components/GMainToolbar.vue

@@ -402,7 +402,8 @@ function helpTarget (item) {
 </script>
 
 <style lang="scss" scoped>
-  @import 'vuetify/settings';
+  @use 'vuetify/settings' as vuetify;
+  @use 'sass:map';
 
   .link-icon {
     font-size: 100%;
@@ -420,7 +421,7 @@ function helpTarget (item) {
 
   .v-theme--light {
     &.v-app-bar {
-      background-color: map-get($grey, 'lighten-4');
+      background-color: map.get(vuetify.$grey, 'lighten-4');
     }
     .tabs-bar-background {
       background-color: white !important;

frontend/src/components/GVendorIcon.vue

@@ -133,11 +133,10 @@ const iconStyle = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-  @import 'vuetify/settings';
-
-  $grey-darken-2: map-get($grey, 'darken-2');
+  @use 'vuetify/settings' as vuetify;
+  @use 'sass:map';
 
   .v-theme--dark .icon-background {
-    background-color: $grey-darken-2
+    background-color: map.get(vuetify.$grey, 'darken-2');
   }
 </style>

frontend/src/components/ShootTickets/GTicketComment.vue

@@ -117,13 +117,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import 'vuetify/settings';
+  @use 'vuetify/settings' as vuetify;
+  @use 'sass:map';
 
-  $gh-code-background-color-light: map-get($grey, 'lighten-3');
-  $gh-code-background-color-dark: map-get($grey, 'darken-3');
+  $gh-code-background-color-light: map.get(vuetify.$grey, 'lighten-3');
+  $gh-code-background-color-dark: map.get(vuetify.$grey, 'darken-3');
 
-  $gh-code-color-light: map-get($grey, 'darken-4');
-  $gh-code-color-dark: map-get($grey, 'lighten-4');
+  $gh-code-color-light: map.get(vuetify.$grey, 'darken-4');
+  $gh-code-color-dark: map.get(vuetify.$grey, 'lighten-4');
 
   .comment {
     padding: 0;

frontend/src/components/editable/GEditableText.vue

@@ -262,7 +262,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import 'vuetify/settings';
+  @use 'vuetify/settings' as vuetify;
+  @use 'sass:map';
 
   .g-field {
     :deep(.v-input__details .v-messages) {
@@ -279,7 +280,7 @@ export default {
     }
   }
 
-  $green-base: map-get($green, 'base');
+  $green-base: map.get(vuetify.$green, 'base');
 
   .content {
     animation-duration: 900ms;

frontend/src/sass/main.scss

@@ -5,6 +5,8 @@
  */
 
 @forward 'vuetify/lib/styles/main.sass';
+@use 'sass:meta';
+@use 'sass:string';
 
 /** Gardener Styles */
 [data-v-app] {
@@ -165,7 +167,7 @@
   }
 }
 @mixin g-cm-highlighted-whitespace($whitespace-color) {
-  $whitespace-color-encoded: #{'%23' + str-slice(inspect($whitespace-color), 2)};
+  $whitespace-color-encoded: #{'%23' + string.slice(meta.inspect($whitespace-color), 2)};
   .g-cm-highlightedSpace {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6"><circle cx="3" cy="3" r="1" fill="#{$whitespace-color-encoded}" /></svg>');
     background-repeat: no-repeat;

frontend/src/sass/settings.scss

@@ -17,4 +17,3 @@
   $tooltip-background-color: rgba(var(--v-theme-surface-variant), 0.87),
 );
 
-@forward './variables.scss';