Merge pull request #77 from koloml/feature/updating-dependencies

Updated Svelte, Vite, SCSS and other internal tools, fixed related errors & warnings

package.json

@@ -10,17 +10,17 @@
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
     },
     "devDependencies": {
-        "@sveltejs/adapter-auto": "^3.0.0",
-        "@sveltejs/adapter-static": "^3.0.1",
-        "@sveltejs/kit": "^2.0.0",
-        "@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "@sveltejs/adapter-auto": "^4.0.0",
+        "@sveltejs/adapter-static": "^3.0.8",
+        "@sveltejs/kit": "^2.15.3",
+        "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@types/chrome": "^0.0.262",
-        "cheerio": "^1.0.0-rc.12",
-        "sass": "^1.71.0",
-        "svelte": "^4.2.19",
-        "svelte-check": "^3.6.0",
-        "typescript": "^5.0.0",
-        "vite": "^5.4.9"
+        "cheerio": "^1.0.0",
+        "sass": "^1.83.4",
+        "svelte": "^5.18.0",
+        "svelte-check": "^4.1.4",
+        "typescript": "^5.7.3",
+        "vite": "^6.0.7"
     },
     "type": "module",
     "dependencies": {

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,56 +22,56 @@
 <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) {
-            &:is([value=rating]) {
+            &:is(:global([value=rating])) {
                 background-color: colors.$tag-rating-background;
                 color: colors.$tag-rating-text;
             }
 
-            &:is([value=spoiler]) {
+            &:is(:global([value=spoiler])) {
                 background-color: colors.$tag-spoiler-background;
                 color: colors.$tag-spoiler-text;
             }
 
-            &:is([value=origin]) {
+            &:is(:global([value=origin])) {
                 background-color: colors.$tag-origin-background;
                 color: colors.$tag-origin-text;
             }
 
-            &:is([value=oc]) {
+            &:is(:global([value=oc])) {
                 background-color: colors.$tag-oc-background;
                 color: colors.$tag-oc-text;
             }
 
-            &:is([value=error]) {
+            &:is(:global([value=error])) {
                 background-color: colors.$tag-error-background;
                 color: colors.$tag-error-text;
             }
 
-            &:is([value=character]) {
+            &:is(:global([value=character])) {
                 background-color: colors.$tag-character-background;
                 color: colors.$tag-character-text;
             }
 
-            &:is([value=content-official]) {
+            &:is(:global([value=content-official])) {
                 background-color: colors.$tag-content-official-background;
                 color: colors.$tag-content-official-text;
             }
 
-            &:is([value=content-fanmade]) {
+            &:is(:global([value=content-fanmade])) {
                 background-color: colors.$tag-content-fanmade-background;
                 color: colors.$tag-content-fanmade-text;
             }
 
-            &:is([value=species]) {
+            &:is(:global([value=species])) {
                 background-color: colors.$tag-species-background;
                 color: colors.$tag-species-text;
             }
 
-            &:is([value=body-type]) {
+            &:is(:global([value=body-type])) {
                 background-color: colors.$tag-body-type-background;
                 color: colors.$tag-body-type-text;
             }

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/colors.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $background: #15121a;
 
 $text: #dadada;
@@ -26,25 +28,25 @@ $tag-count-background: #2d6236;
 $tag-text: #4aa158;
 
 $tag-rating-text: #418dd9;
-$tag-rating-background: darken($tag-rating-text, 35%);
+$tag-rating-background: color.adjust($tag-rating-text, $lightness: -35%);
 $tag-spoiler-text: #d49b39;
-$tag-spoiler-background: darken($tag-spoiler-text, 34%);
+$tag-spoiler-background: color.adjust($tag-spoiler-text, $lightness: -34%);
 $tag-origin-text: #6f66d6;
-$tag-origin-background: darken($tag-origin-text, 40%);
+$tag-origin-background: color.adjust($tag-origin-text, $lightness: -40%);
 $tag-oc-text: #b157b7;
-$tag-oc-background: darken($tag-oc-text, 33%);
+$tag-oc-background: color.adjust($tag-oc-text, $lightness: -33%);
 $tag-error-text: #d45460;
-$tag-error-background: desaturate(darken($tag-error-text, 38%), 6%);
+$tag-error-background: color.adjust($tag-error-text, $lightness: -38%, $saturation: -6%, $space: hsl);
 $tag-character-text: #4aaabf;
-$tag-character-background: darken($tag-character-text, 33%);
+$tag-character-background: color.adjust($tag-character-text, $lightness: -33%);
 $tag-content-official-text: #b9b541;
-$tag-content-official-background: desaturate(darken($tag-content-official-text, 29%),2%);
+$tag-content-official-background: color.adjust($tag-content-official-text, $lightness: -29%, $saturation: -2%, $space: hsl);
 $tag-content-fanmade-text: #cc8eb5;
-$tag-content-fanmade-background: darken($tag-content-fanmade-text, 40%);
+$tag-content-fanmade-background: color.adjust($tag-content-fanmade-text, $lightness: -40%);
 $tag-species-text: #b16b50;
-$tag-species-background: darken($tag-species-text, 35%);
+$tag-species-background: color.adjust($tag-species-text, $lightness: -35%);
 $tag-body-type-text: #b8b8b8;
-$tag-body-type-background: desaturate(darken($tag-body-type-text, 35%), 10%);
+$tag-body-type-background: color.adjust($tag-body-type-text, $lightness: -35%, $saturation: -10%, $space: hsl);
 
 $input-background: #26232d;
 $input-border: #5c5a61;

src/styles/injectable/base-styles.scss

@@ -0,0 +1,40 @@
+@use '../colors';
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+body {
+  width: 320px;
+
+  // Hacky class which is added by the JavaScript indicating that page was (probably) opened in the tab
+  &.is-in-tab {
+    width: 100%;
+    max-width: 640px;
+    margin: 0 auto;
+  }
+}
+
+html, body {
+  background-color: colors.$background;
+  color: colors.$text;
+  font-size: 16px;
+  font-family: verdana, arial, helvetica, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: colors.$link;
+  text-decoration: none;
+
+  &:hover, &:focus {
+    color: colors.$link-hover;
+  }
+}

src/styles/popup.scss

@@ -1,44 +1,5 @@
-@use './colors';
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  text-decoration: none;
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-}
-
-body {
-  width: 320px;
-
-  // Hacky class which is added by the JavaScript indicating that page was (probably) opened in the tab
-  &.is-in-tab {
-    width: 100%;
-    max-width: 640px;
-    margin: 0 auto;
-  }
-}
-
-html, body {
-  background-color: colors.$background;
-  color: colors.$text;
-  font-size: 16px;
-  font-family: verdana, arial, helvetica, sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-a {
-  color: colors.$link;
-  text-decoration: none;
-
-  &:hover, &:focus {
-    color: colors.$link-hover;
-  }
-}
-
-@import "injectable/input";
-@import "injectable/tag";
-@import "injectable/icons";
+@use 'colors';
+@use 'injectable/base-styles';
+@use 'injectable/input';
+@use 'injectable/tag';
+@use 'injectable/icons';