Added field for selection of category, added container for tags

src/components/tags/TagsColorContainer.svelte

@@ -0,0 +1,62 @@
+<script>
+    /** @type {string} */
+    export let targetCategory = '';
+</script>
+
+<div class="tag-color-container tag-color-container--{targetCategory || 'default'}">
+    <slot></slot>
+</div>
+
+<style lang="scss">
+    @use '../../styles/colors';
+
+    .tag-color-container:is(.tag-color-container--rating) :global(.tag) {
+        background-color: colors.$tag-rating-background;
+        color: colors.$tag-rating-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--spoiler) :global(.tag) {
+        background-color: colors.$tag-spoiler-background;
+        color: colors.$tag-spoiler-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--origin) :global(.tag) {
+        background-color: colors.$tag-origin-background;
+        color: colors.$tag-origin-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--oc) :global(.tag) {
+        background-color: colors.$tag-oc-background;
+        color: colors.$tag-oc-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--error) :global(.tag) {
+        background-color: colors.$tag-error-background;
+        color: colors.$tag-error-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--character) :global(.tag) {
+        background-color: colors.$tag-character-background;
+        color: colors.$tag-character-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--content-official) :global(.tag) {
+        background-color: colors.$tag-content-official-background;
+        color: colors.$tag-content-official-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--content-fanmade) :global(.tag) {
+        background-color: colors.$tag-content-fanmade-background;
+        color: colors.$tag-content-fanmade-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--species) :global(.tag) {
+        background-color: colors.$tag-species-background;
+        color: colors.$tag-species-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--body-type) :global(.tag) {
+        background-color: colors.$tag-body-type-background;
+        color: colors.$tag-body-type-text;
+    }
+</style>

src/components/ui/forms/TagCategorySelectField.svelte

@@ -0,0 +1,80 @@
+<script>
+    import SelectField from "$components/ui/forms/SelectField.svelte";
+    import { categories } from "$lib/booru/tag-categories.js";
+
+    /** @type {string} */
+    export let value = '';
+
+    /** @type {Record<string, string>} */
+    let tagCategoriesOptions = {
+        '': 'Default'
+    };
+
+    tagCategoriesOptions = categories.reduce((options, category) => {
+        options[category] = category
+                .replace('-', ' ')
+                .replace(/(?<=\s|^)\w/g, (matchedCharacter) => matchedCharacter.toUpperCase());
+
+        return options;
+    }, tagCategoriesOptions);
+</script>
+
+<SelectField bind:value={value} options={tagCategoriesOptions} name="tag_color"/>
+
+<style lang="scss">
+    @use '../../../styles/colors';
+
+    :global(select[name=tag_color]) {
+        :global(option) {
+            &:is([value=rating]) {
+                background-color: colors.$tag-rating-background;
+                color: colors.$tag-rating-text;
+            }
+
+            &:is([value=spoiler]) {
+                background-color: colors.$tag-spoiler-background;
+                color: colors.$tag-spoiler-text;
+            }
+
+            &:is([value=origin]) {
+                background-color: colors.$tag-origin-background;
+                color: colors.$tag-origin-text;
+            }
+
+            &:is([value=oc]) {
+                background-color: colors.$tag-oc-background;
+                color: colors.$tag-oc-text;
+            }
+
+            &:is([value=error]) {
+                background-color: colors.$tag-error-background;
+                color: colors.$tag-error-text;
+            }
+
+            &:is([value=character]) {
+                background-color: colors.$tag-character-background;
+                color: colors.$tag-character-text;
+            }
+
+            &:is([value=content-official]) {
+                background-color: colors.$tag-content-official-background;
+                color: colors.$tag-content-official-text;
+            }
+
+            &:is([value=content-fanmade]) {
+                background-color: colors.$tag-content-fanmade-background;
+                color: colors.$tag-content-fanmade-text;
+            }
+
+            &:is([value=species]) {
+                background-color: colors.$tag-species-background;
+                color: colors.$tag-species-text;
+            }
+
+            &:is([value=body-type]) {
+                background-color: colors.$tag-body-type-background;
+                color: colors.$tag-body-type-text;
+            }
+        }
+    }
+</style>

src/lib/booru/tag-categories.js

@@ -0,0 +1,12 @@
+export const categories = [
+  'rating',
+  'spoiler',
+  'origin',
+  'oc',
+  'error',
+  'character',
+  'content-official',
+  'content-fanmade',
+  'species',
+  'body-type',
+];