From 7573703f670e63fdb0edacbd946aebc505c51322 Mon Sep 17 00:00:00 2001
From: petersutter <peter.sutter@sap.com>
Date: Fri, 15 Nov 2024 16:53:54 +0100
Subject: [PATCH] partially fix deprecated Sass @import rules

---
 frontend/src/components/GCodeBlock.vue        | 57 ++++++++++++-------
 frontend/src/components/GMainToolbar.vue      |  5 +-
 frontend/src/components/GVendorIcon.vue       |  7 +--
 .../ShootTickets/GTicketComment.vue           | 11 ++--
 .../src/components/editable/GEditableText.vue |  5 +-
 frontend/src/sass/main.scss                   |  4 +-
 frontend/src/sass/settings.scss               |  1 -
 frontend/src/sass/variables.scss              | 25 --------
 8 files changed, 55 insertions(+), 60 deletions(-)
 delete mode 100644 frontend/src/sass/variables.scss

diff --git a/frontend/src/components/GCodeBlock.vue b/frontend/src/components/GCodeBlock.vue
index 8eebb303e1..a856c7f5a4 100644
--- a/frontend/src/components/GCodeBlock.vue
+++ b/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>
diff --git a/frontend/src/components/GMainToolbar.vue b/frontend/src/components/GMainToolbar.vue
index f2b8ae8d30..889091ecf6 100644
--- a/frontend/src/components/GMainToolbar.vue
+++ b/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;
diff --git a/frontend/src/components/GVendorIcon.vue b/frontend/src/components/GVendorIcon.vue
index 9c0aedcac6..a41695b1df 100644
--- a/frontend/src/components/GVendorIcon.vue
+++ b/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>
diff --git a/frontend/src/components/ShootTickets/GTicketComment.vue b/frontend/src/components/ShootTickets/GTicketComment.vue
index 01ffee7cc9..114b127b4a 100644
--- a/frontend/src/components/ShootTickets/GTicketComment.vue
+++ b/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;
diff --git a/frontend/src/components/editable/GEditableText.vue b/frontend/src/components/editable/GEditableText.vue
index 766aa633bf..c2483d1af4 100644
--- a/frontend/src/components/editable/GEditableText.vue
+++ b/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;
diff --git a/frontend/src/sass/main.scss b/frontend/src/sass/main.scss
index ecb25c89a2..9b320ad58e 100644
--- a/frontend/src/sass/main.scss
+++ b/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;
diff --git a/frontend/src/sass/settings.scss b/frontend/src/sass/settings.scss
index 3bfa80ee4a..7f6df3158b 100644
--- a/frontend/src/sass/settings.scss
+++ b/frontend/src/sass/settings.scss
@@ -17,4 +17,3 @@
   $tooltip-background-color: rgba(var(--v-theme-surface-variant), 0.87),
 );
 
-@forward './variables.scss';
diff --git a/frontend/src/sass/variables.scss b/frontend/src/sass/variables.scss
deleted file mode 100644
index 580a3b81ec..0000000000
--- a/frontend/src/sass/variables.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- *  SPDX-FileCopyrightText: 2023 SAP SE or an SAP affiliate company and Gardener contributors
- *
- *  SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * Custom variables for our own styles.
- */
-
-/** 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;
-
-// Fonts
-$font-roboto: Roboto, sans-serif;