Updated all @use calls to use the $styles alias

src/components/layout/Footer.svelte

@@ -10,7 +10,7 @@
 </footer>
 
 <style lang="scss">
-    @use 'src/styles/colors';
+    @use '$styles/colors';
 
     footer {
         display: flex;

src/components/layout/Header.svelte

@@ -3,7 +3,7 @@
 </header>
 
 <style lang="scss">
-    @use "src/styles/colors";
+    @use "$styles/colors";
 
     header {
         background: colors.$header;

src/components/tags/TagsColorContainer.svelte

@@ -8,7 +8,7 @@
 </div>
 
 <style lang="scss">
-    @use '../../styles/colors';
+    @use '$styles/colors';
 
     .tag-color-container:is(.tag-color-container--rating) :global(.tag) {
         background-color: colors.$tag-rating-background;

src/components/ui/forms/TagCategorySelectField.svelte

@@ -22,7 +22,7 @@
 <SelectField bind:value={value} options={tagCategoriesOptions} name="tag_color"/>
 
 <style lang="scss">
-    @use '../../../styles/colors';
+    @use '$styles/colors';
 
     :global(select[name=tag_color]) {
         :global(option) {

src/components/ui/menu/Menu.svelte

@@ -3,7 +3,7 @@
 </nav>
 
 <style lang="scss">
-    @use 'src/styles/colors';
+    @use '$styles/colors';
 
     nav {
         display: flex;

src/components/ui/menu/MenuItem.svelte

@@ -23,7 +23,7 @@
 </svelte:element>
 
 <style lang="scss">
-    @use '../../../styles/colors';
+    @use '$styles/colors';
 
     .menu-item {
         display: flex;

src/routes/features/groups/import/+page.svelte

@@ -113,7 +113,7 @@
 {/if}
 
 <style lang="scss">
-    @use '../../../../styles/colors';
+    @use '$styles/colors';
 
     .error, .warning {
         padding: 5px 24px;

src/routes/features/maintenance/import/+page.svelte

@@ -113,7 +113,7 @@
 {/if}
 
 <style lang="scss">
-    @use '../../../../styles/colors';
+    @use '$styles/colors';
 
     .error, .warning {
         padding: 5px 24px;

src/styles/popup.scss

@@ -1,4 +1,4 @@
-@use './colors';
+@use 'colors';
 
 * {
   box-sizing: border-box;