Replace deprecated SASS functions lighten / darken

https://sass-lang.com/documentation/breaking-changes/color-functions/#single-channel-adjustment-functions

Author: Scriptim

src/App.vue

@@ -70,6 +70,7 @@ export default defineComponent({
 </script>
 
 <style lang="sass">
+@use "sass:color"
 @import "@/assets/sass/_variables.sass"
 
 body, main
@@ -143,11 +144,11 @@ h3
     opacity: 0.7
 
 a
-  color: darken($color-accent, 20%)
+  color: color.adjust($color-accent, $lightness: -20%)
 
 .dark
   a
-    color: lighten($color-accent, 5%)
+    color: color.adjust($color-accent, $lightness: 5%)
 
 br
   user-select: none

src/components/prompteditor/AddedPromptElement.vue

@@ -95,11 +95,12 @@ export default defineComponent({
 </script>
 
 <style lang="sass" scoped>
+@use "sass:color"
 @import "@/assets/sass/_variables.sass"
 
 .selected
   // darken the background color because the delete icon has the same color
-  background-color: darken($color-accent, 15%)
+  background-color: color.adjust($color-accent, $lightness: -15%)
 
 .parameter
   vertical-align: middle

src/components/properties/ElementProperties.vue

@@ -239,12 +239,12 @@ export default defineComponent({
 
 .properties-wrapper
   text-align: left
-  // lighten($color-background, 10%)
+  // color.adjust($color-background, $lightness: 10%)
   --popper-theme-background-color: #ffffff
   --popper-theme-background-color-hover: #ffffff
 
   &.dark
-    // lighten($color-foreground, 10%)
+    // color.adjust($color-foreground, $lightness: 10%)
     --popper-theme-background-color: #37414f
     --popper-theme-background-color-hover: #37414f
 

src/components/ui/ColorPicker.vue

@@ -84,17 +84,18 @@ export default defineComponent({
 </script>
 
 <style lang="sass" scoped>
+@use "sass:color"
 @import "@/assets/sass/_variables.sass"
 
 .color-picker
   text-align: center
   padding: 1em
-  background: lighten($color-background, 10%)
+  background: color.adjust($color-background, $lightness: 10%)
   box-shadow: 0 0 0.8em 0.2em rgba(0, 0, 0, 0.2)
   z-index: 2
 
   &.dark
-    background: lighten($color-foreground, 10%)
+    background: color.adjust($color-foreground, $lightness: 10%)
 
 .color-picker_color4
   margin-bottom: 0.4em