feat(ui)!: user-created tag colors (#801)

* feat: custom tag colors

* ui: minor ui polish

* ui: add confirmation for deleting colors

* ui: match tag_color_preview focused style

* ui: reduce spacing between color swatch groups

* ui!: change default behavior of secondary color

The secondary color now acts as only the text color by default, with the new `color_border` bool serving to optionally restore the previous text + colored border behavior.

* ui: adjust focused tag/color button styles

* fix: avoid namespace collision

* fix: make reserved namespace check case-insensitive

* ui: add namespace description + prompt

* fix: don't reset tag color if none are chosen

* refactor(ui): use form layout for build_color

* fix(ui): dynamically scale field title widget

* feat(ui): add additional tag shade colors

Add "burgundy", "dark-teal", and "dark_lavender" tag colors.

* fix: don't check for self in collision checks

* fix: update tag references on color update

* fix(ui): stop fields widgets expanding indefinitely

Author: CyanVoxel

tagstudio/resources/translations/en.json

@@ -2,6 +2,19 @@
     "app.git": "Git Commit",
     "app.pre_release": "Pre-Release",
     "app.title": "{base_title} - Library '{library_dir}'",
+    "color_manager.title": "Manage Tag Colors",
+    "color.color_border": "Use Secondary Color for Border",
+    "color.confirm_delete": "Are you sure you want to delete the color \"{color_name}\"?",
+    "color.delete": "Delete Tag",
+    "color.import_pack": "Import Color Pack",
+    "color.name": "Name",
+    "color.namespace.delete.prompt": "Are you sure you want to delete this color namespace? This will delete ALL colors in the namespace along with it!",
+    "color.namespace.delete.title": "Delete Color Namespace",
+    "color.new": "New Color",
+    "color.placeholder": "Color",
+    "color.primary_required": "Primary Color (Required)",
+    "color.primary": "Primary Color",
+    "color.secondary": "Secondary Color",
     "color.title.no_color": "No Color",
     "drop_import.description": "The following files match file paths that already exist in the library",
     "drop_import.duplicates_choice.plural": "The following {count} files match file paths that already exist in the library.",
@@ -11,6 +24,7 @@
     "drop_import.progress.label.singular": "Importing New Files...\n1 File imported.{suffix}",
     "drop_import.progress.window_title": "Import Files",
     "drop_import.title": "Conflicting File(s)",
+    "edit.color_manager": "Manage Tag Colors",
     "edit.tag_manager": "Manage Tags",
     "entries.duplicate.merge.label": "Merging Duplicate Entries...",
     "entries.duplicate.merge": "Merge Duplicate Entries",
@@ -96,6 +110,7 @@
     "generic.recent_libraries": "Recent Libraries",
     "generic.rename_alt": "&Rename",
     "generic.rename": "Rename",
+    "generic.reset": "Reset",
     "generic.save": "Save",
     "generic.skip_alt": "&Skip",
     "generic.skip": "Skip",
@@ -143,6 +158,10 @@
     "json_migration.title.old_lib": "<h2>v9.4 Library</h2>",
     "json_migration.title": "Save Format Migration: \"{path}\"",
     "landing.open_create_library": "Open/Create Library {shortcut}",
+    "library_object.name_required": "Name (Required)",
+    "library_object.name": "Name",
+    "library_object.slug_required": "ID Slug (Required)",
+    "library_object.slug": "ID Slug",
     "library.field.add": "Add Field",
     "library.field.confirm_remove": "Are you sure you want to remove this \"{name}\" field?",
     "library.field.mixed_data": "Mixed Data",
@@ -175,8 +194,8 @@
     "menu.file.save_backup": "&Save Library Backup",
     "menu.file.save_library": "Save Library",
     "menu.file": "&File",
-    "menu.help": "&Help",
     "menu.help.about": "About",
+    "menu.help": "&Help",
     "menu.macros.folders_to_tags": "Folders to Tags",
     "menu.macros": "&Macros",
     "menu.select": "Select",
@@ -185,6 +204,11 @@
     "menu.tools": "&Tools",
     "menu.view": "&View",
     "menu.window": "Window",
+    "namespace.create.description_color": "Tag colors use namespaces as color palette groups. All custom colors must be under a namespace group first.",
+    "namespace.create.description": "Namespaces are used by TagStudio to separate groups of items such as tags and colors in a way that makes them easy to export and share. Namespaces starting with \"tagstudio\" are reserved by TagStudio for internal use.",
+    "namespace.create.title": "Create Namespace",
+    "namespace.new.button": "New Namespace",
+    "namespace.new.prompt": "Create a New Namespace to Start Adding Custom Colors!",
     "preview.no_selection": "No Items Selected",
     "select.add_tag_to_selected": "Add Tag to Selected",
     "select.all": "Select All",
@@ -228,6 +252,7 @@
     "tag.create": "Create Tag",
     "tag.disambiguation.tooltip": "Use this tag for disambiguation",
     "tag.edit": "Edit Tag",
+    "tag.is_category": "Is Category",
     "tag.name": "Name",
     "tag.new": "New Tag",
     "tag.parent_tags.add": "Add Parent Tag(s)",

tagstudio/src/core/constants.py

@@ -25,3 +25,5 @@
 TAG_META = 2
 RESERVED_TAG_START = 0
 RESERVED_TAG_END = 999
+
+RESERVED_NAMESPACE_PREFIX = "tagstudio"

tagstudio/src/core/enums.py

@@ -71,4 +71,4 @@ class LibraryPrefs(DefaultEnum):
     IS_EXCLUDE_LIST = True
     EXTENSION_LIST: list[str] = [".json", ".xmp", ".aae"]
     PAGE_SIZE: int = 500
-    DB_VERSION: int = 7
+    DB_VERSION: int = 8

tagstudio/src/core/library/alchemy/default_color_groups.py

@@ -307,6 +307,12 @@ def pastels() -> list[TagColorGroup]:
 
 
 def shades() -> list[TagColorGroup]:
+    burgundy = TagColorGroup(
+        slug="burgundy",
+        namespace="tagstudio-shades",
+        name="Burgundy",
+        primary="#6E1C24",
+    )
     auburn = TagColorGroup(
         slug="auburn",
         namespace="tagstudio-shades",
@@ -319,19 +325,31 @@ def shades() -> list[TagColorGroup]:
         name="Olive",
         primary="#4C652E",
     )
+    dark_teal = TagColorGroup(
+        slug="dark-teal",
+        namespace="tagstudio-shades",
+        name="Dark Teal",
+        primary="#1F5E47",
+    )
     navy = TagColorGroup(
         slug="navy",
         namespace="tagstudio-shades",
         name="Navy",
         primary="#104B98",
     )
+    dark_lavender = TagColorGroup(
+        slug="dark_lavender",
+        namespace="tagstudio-shades",
+        name="Dark Lavender",
+        primary="#3D3B6C",
+    )
     berry = TagColorGroup(
         slug="berry",
         namespace="tagstudio-shades",
         name="Berry",
         primary="#9F2AA7",
     )
-    return [auburn, olive, navy, berry]
+    return [burgundy, auburn, olive, dark_teal, navy, dark_lavender, berry]
 
 
 def earth_tones() -> list[TagColorGroup]:
@@ -421,104 +439,119 @@ def neon() -> list[TagColorGroup]:
         name="Neon Red",
         primary="#180607",
         secondary="#E22C3C",
+        color_border=True,
     )
     neon_red_orange = TagColorGroup(
         slug="neon-red-orange",
         namespace="tagstudio-neon",
         name="Neon Red Orange",
         primary="#220905",
         secondary="#E83726",
+        color_border=True,
     )
     neon_orange = TagColorGroup(
         slug="neon-orange",
         namespace="tagstudio-neon",
         name="Neon Orange",
         primary="#1F0D05",
         secondary="#ED6022",
+        color_border=True,
     )
     neon_amber = TagColorGroup(
         slug="neon-amber",
         namespace="tagstudio-neon",
         name="Neon Amber",
         primary="#251507",
         secondary="#FA9A2C",
+        color_border=True,
     )
     neon_yellow = TagColorGroup(
         slug="neon-yellow",
         namespace="tagstudio-neon",
         name="Neon Yellow",
         primary="#2B1C0B",
         secondary="#FFD63D",
+        color_border=True,
     )
     neon_lime = TagColorGroup(
         slug="neon-lime",
         namespace="tagstudio-neon",
         name="Neon Lime",
         primary="#1B220C",
         secondary="#92E649",
+        color_border=True,
     )
     neon_green = TagColorGroup(
         slug="neon-green",
         namespace="tagstudio-neon",
         name="Neon Green",
         primary="#091610",
         secondary="#45D649",
+        color_border=True,
     )
     neon_teal = TagColorGroup(
         slug="neon-teal",
         namespace="tagstudio-neon",
         name="Neon Teal",
         primary="#09191D",
         secondary="#22D589",
+        color_border=True,
     )
     neon_cyan = TagColorGroup(
         slug="neon-cyan",
         namespace="tagstudio-neon",
         name="Neon Cyan",
         primary="#0B191C",
         secondary="#3DDBDB",
+        color_border=True,
     )
     neon_blue = TagColorGroup(
         slug="neon-blue",
         namespace="tagstudio-neon",
         name="Neon Blue",
         primary="#09101C",
         secondary="#3B87F0",
+        color_border=True,
     )
     neon_indigo = TagColorGroup(
         slug="neon-indigo",
         namespace="tagstudio-neon",
         name="Neon Indigo",
         primary="#150B24",
         secondary="#874FF5",
+        color_border=True,
     )
     neon_purple = TagColorGroup(
         slug="neon-purple",
         namespace="tagstudio-neon",
         name="Neon Purple",
         primary="#1E0B26",
         secondary="#BB4FF0",
+        color_border=True,
     )
     neon_magenta = TagColorGroup(
         slug="neon-magenta",
         namespace="tagstudio-neon",
         name="Neon Magenta",
         primary="#220A13",
         secondary="#F64680",
+        color_border=True,
     )
     neon_pink = TagColorGroup(
         slug="neon-pink",
         namespace="tagstudio-neon",
         name="Neon Pink",
         primary="#210E15",
         secondary="#FF62AF",
+        color_border=True,
     )
     neon_white = TagColorGroup(
         slug="neon-white",
         namespace="tagstudio-neon",
         name="Neon White",
         primary="#131315",
         secondary="#F2F1F8",
+        color_border=True,
     )
     return [
         neon_red,