refactor(app): prevent sass deprecation warnings

kukhariev · Nov 18, 2024 · 6205b05 · 6205b05
1 parent 4c75ac3
commit 6205b05
Showing 1 changed file with 9 additions and 8 deletions.
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,3 +1,4 @@
+@use 'sass:color';
 /* You can add global styles to this file, and also import other style files */
 $primary-color: rgb(200, 200, 200);
 $background-color: rgb(36, 36, 36);
@@ -6,7 +7,7 @@ $nav-header-background-color: rgb(36, 36, 36);
 $sidebar-primary-color: rgb(200, 200, 200);
 $sidebar-background-color: rgb(36, 36, 36);
 
-$border: 1px solid transparentize($primary-color, 0.7);
+$border: 1px solid color.adjust($primary-color, $alpha: -0.7);
 $border-drop: 1px dashed $primary-color;
 $header-height: 2.5rem;
 
@@ -72,7 +73,7 @@ header {
 
   span > a {
     display: block;
-    color: transparentize($nav-header-primary-color, 0.7);
+    color: color.adjust($nav-header-primary-color, $alpha: -0.7);
     font-size: 2rem;
     text-decoration: none;
   }
@@ -136,11 +137,11 @@ header {
   }
 
   a:hover {
-    background-color: lighten($sidebar-background-color, 5%);
+    background-color: color.adjust($sidebar-background-color, $lightness: 5%);
   }
 
   span {
-    color: transparentize($sidebar-primary-color, 0.7);
+    color: color.adjust($sidebar-primary-color, $alpha: -0.7);
     display: block;
     cursor: default;
     padding: 2rem 3rem;
@@ -166,12 +167,12 @@ header {
 }
 
 .uploadx-drop-active {
-  background-color: lighten($background-color, 10%);
+  background-color: color.adjust($background-color, $lightness: 10%);
   border: $border-drop !important;
 }
 
 button {
-  background-color: lighten($background-color, 8%);
+  background-color: color.adjust($background-color, $lightness: 8%);
   border: $border;
   border-radius: 5px;
   color: $primary-color;
@@ -188,7 +189,7 @@ button {
   width: 6rem;
 
   &:hover {
-    background-color: lighten($background-color, 15%);
+    background-color: color.adjust($background-color, $lightness: 15%);
   }
 }
 
@@ -221,7 +222,7 @@ input[type='file'] {
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
-  background-color: lighten($background-color, 8%);
+  background-color: color.adjust($background-color, $lightness: 8%);
   border-radius: 0 0 5px 5px;
 
   span {