[FEATURE] Update module icons for better theming support

All module icons have been redesigned to follow a unified style that uses
currentColor for fills and opacity for visual hierarchy. This allows the
icons to adapt to different color themes and provides consistent styling
across the module menu.

Author: benjaminkott

assets/scss/docs/_modulemenu.scss

@@ -49,21 +49,32 @@
     background-color: var(--modulemenu-bg);
     color: var(--modulemenu-color);
 }
+
+.modulemenu-preview[data-color="light"] {
+    --modulemenu-color: #212121;
+    --modulemenu-bg: #f8f9fa;
+    --icon-color-accent: #4083e1;
+}
+
 .modulemenu-preview[data-color="dark"] {
     --modulemenu-color: #ffffff;
     --modulemenu-bg: #343a40;
+    --icon-color-accent: #378aff;
 }
 .modulemenu-preview[data-color="accent1"] {
     --modulemenu-color: #ffffff;
     --modulemenu-bg: #271f47;
+    --icon-color-accent: #8161ff;
 }
 .modulemenu-preview[data-color="accent2"] {
     --modulemenu-color: #ffffff;
     --modulemenu-bg: #1f4736;
+    --icon-color-accent: #4ee3a5;
 }
 .modulemenu-preview[data-color="accent3"] {
     --modulemenu-color: #212121;
     --modulemenu-bg: #dee2ff;
+    --icon-color-accent: #515db4;
 }
 
 // Module menu action (the clickable item)

assets/scss/icons.scss

@@ -28,6 +28,7 @@ $icon-unify-modifier:   .86 !default;
 $icon-opacity-disabled: .5 !default;
 :root {
     --icon-color-primary: currentColor;
+    --icon-color-accent: #ff8700;
     --icon-size-small: #{$icon-size-small};
     --icon-size-medium: #{$icon-size-medium};
     --icon-size-large: #{$icon-size-large};
@@ -44,7 +45,7 @@ $icon-opacity-disabled: .5 !default;
     display: inline-flex;
     overflow: hidden;
     white-space: nowrap;
-    color: var(--icon-color-primary);
+    color: var(--icon-color-primary, currentColor);
     height: var(--icon-size, 1em);
     width: var(--icon-size, 1em);
     line-height: var(--icon-size, 1em);

dist/icons.css

@@ -4998,6 +4998,13 @@
       "sprite": "sprites/module.svg#module-dbint",
       "bidi": false
     },
+    "module-debug": {
+      "identifier": "module-debug",
+      "category": "module",
+      "svg": "svgs/module/module-debug.svg",
+      "sprite": "sprites/module.svg#module-debug",
+      "bidi": false
+    },
     "module-documentation": {
       "identifier": "module-documentation",
       "category": "module",
@@ -5096,6 +5103,13 @@
       "sprite": "sprites/module.svg#module-install",
       "bidi": false
     },
+    "module-integrations": {
+      "identifier": "module-integrations",
+      "category": "module",
+      "svg": "svgs/module/module-integrations.svg",
+      "sprite": "sprites/module.svg#module-integrations",
+      "bidi": false
+    },
     "module-lang": {
       "identifier": "module-lang",
       "category": "module",
@@ -5236,20 +5250,20 @@
       "sprite": "sprites/module.svg#module-tsconfig",
       "bidi": false
     },
+    "module-upgrade": {
+      "identifier": "module-upgrade",
+      "category": "module",
+      "svg": "svgs/module/module-upgrade.svg",
+      "sprite": "sprites/module.svg#module-upgrade",
+      "bidi": false
+    },
     "module-urls": {
       "identifier": "module-urls",
       "category": "module",
       "svg": "svgs/module/module-urls.svg",
       "sprite": "sprites/module.svg#module-urls",
       "bidi": false
     },
-    "module-version": {
-      "identifier": "module-version",
-      "category": "module",
-      "svg": "svgs/module/module-version.svg",
-      "sprite": "sprites/module.svg#module-version",
-      "bidi": false
-    },
     "module-viewpage": {
       "identifier": "module-viewpage",
       "category": "module",
@@ -5742,6 +5756,7 @@
     "information-application-context": "actions-window-cog",
     "apps-toolbar-menu-workspace": "actions-workspace",
     "empty-empty": "miscellaneous-placeholder",
+    "module-version": "module-generic",
     "module-templates": "module-template",
     "module-tstemplate": "module-tsconfig",
     "spinner-circle-light": "spinner-circle",

dist/icons.json

@@ -28,6 +28,7 @@ $icon-unify-modifier:   .86 !default;
 $icon-opacity-disabled: .5 !default;
 :root {
     --icon-color-primary: currentColor;
+    --icon-color-accent: #ff8700;
     --icon-size-small: #{$icon-size-small};
     --icon-size-medium: #{$icon-size-medium};
     --icon-size-large: #{$icon-size-large};
@@ -44,7 +45,7 @@ $icon-opacity-disabled: .5 !default;
     display: inline-flex;
     overflow: hidden;
     white-space: nowrap;
-    color: var(--icon-color-primary);
+    color: var(--icon-color-primary, currentColor);
     height: var(--icon-size, 1em);
     width: var(--icon-size, 1em);
     line-height: var(--icon-size, 1em);