replace deprecated Sass @import rules with @use

assets/css/colors-auto-default-dark.scss

@@ -3,15 +3,15 @@
 
 //this mode is like colors-auto but if the device does not support @media prefers-color-scheme it will deafault to dark mode
 
-@import "colors";
+@use "colors" as c;
 
 :root {
-    @include colors;
-    @include dark-colors;
+    @include c.colors;
+    @include c.dark-colors;
   }
 
 @media print, (prefers-color-scheme: light) {//we would not like to apply dark mode if content is on printer as that would use a lot of ink
   :root {
-    @include light-colors;
+    @include c.light-colors;
   }
-}
+}

assets/css/colors-auto.scss

@@ -1,15 +1,15 @@
 ---
 ---
 
-@import "colors";
+@use "colors" as c;
 
 :root {
-    @include colors;
-    @include light-colors;
+    @include c.colors;
+    @include c.light-colors;
   }
 
 @media screen and (prefers-color-scheme: dark) {//we would not like to apply dark mode if content is on printer as that would use a lot of ink
   :root{
-    @include dark-colors;
+    @include c.dark-colors;
   }
-}
+}

assets/css/colors-dark.scss

@@ -1,15 +1,15 @@
 ---
 ---
 
-@import "colors";
+@use "colors" as c;
 
 :root {
-  @include colors;
-  @include dark-colors;
+  @include c.colors;
+  @include c.dark-colors;
 }
 
 @media print {
   :root {
-    @include light-colors;
+    @include c.light-colors;
   }
-}
+}

assets/css/colors-light.scss

@@ -1,9 +1,9 @@
 ---
 ---
 
-@import "colors";
+@use "colors" as c;
 
 :root {
-  @include colors;
-  @include light-colors;
-}
+  @include c.colors;
+  @include c.light-colors;
+}

assets/css/style-article.scss

@@ -4,7 +4,7 @@
 $section-width: 100%;
 $section-float: middle;
 
-@import "jekyll-theme-minimalist";
+@use "jekyll-theme-minimalist";
 
 .img-circle {
     -webkit-border-radius: 8px;

assets/css/style.scss

@@ -1,7 +1,7 @@
 ---
 ---
 
-@import "jekyll-theme-minimalist";
+@use "jekyll-theme-minimalist";
 
 .img-circle {
     -webkit-border-radius: 8px;