feat: add new color group styles to toolbar (#188)

* feat: add new color variables and group styles to toolbar CSS; update createMenuItem to accept groupKey

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* fix: scope purple variable and increase hover specificity for group labels

* fix: simplify warning display logic in CompatibilityChecker

* fix: rename purple color variable and update groupKey data attribute in toolbar

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: dermatz

src/Service/Hyva/CompatibilityChecker.php

@@ -203,7 +203,7 @@ private function getStatusDisplay(array $moduleData): string
             return '<fg=green>✓ Compatible</>';
         }
 
-        if ($moduleData['compatible'] && $moduleData['hasWarnings']) {
+        if ($moduleData['compatible']) {
             return '<fg=yellow>⚠ Warnings</>';
         }
 

src/view/frontend/web/css/toolbar.css

@@ -22,7 +22,11 @@
     --mageforge-color-slate-400: #94a3b8;
     --mageforge-color-orange: #fb923c;
     --mageforge-color-pink: #C850C0;
+    --mageforge-color-purple: #a855f7;
     --mageforge-color-amber: #edb04d;
+    --mageforge-group-color-wcag: var(--mageforge-color-purple);
+    --mageforge-group-color-html-quality: var(--mageforge-color-blue);
+    --mageforge-group-color-performance: var(--mageforge-color-orange);
     --mageforge-color-amber-alpha-15: rgba(237, 176, 77, 0.15);
     --mageforge-color-amber-alpha-35: rgba(237, 176, 77, 0.35);
     --mageforge-bg-dark: rgba(15, 23, 42, 0.98);
@@ -332,7 +336,7 @@
     font-size: 11px;
     line-height: 1.3;
     user-select: text;
-    cursor: text;
+    cursor: default;
 }
 
 .mageforge-toolbar-menu-desc.mageforge-active {
@@ -405,7 +409,7 @@
     margin-bottom: 4px;
 }
 
-.mageforge-toolbar-menu-group-header:hover .mageforge-toolbar-menu-group-label,
+.mageforge-toolbar-menu-group .mageforge-toolbar-menu-group-header:hover .mageforge-toolbar-menu-group-label,
 .mageforge-toolbar-menu-group-header:hover .mageforge-toolbar-menu-group-chevron {
     color: var(--mageforge-color-white);
 }
@@ -417,7 +421,31 @@
     text-transform: uppercase;
     transition: color 0.15s ease;
     letter-spacing: 0.08em;
-    color: var(--mageforge-color-orange);
+    color: var(--mageforge-color-slate-400);
+}
+
+.mageforge-toolbar-menu-group[data-group-key="wcag"] .mageforge-toolbar-menu-group-label {
+    color: var(--mageforge-group-color-wcag);
+}
+
+.mageforge-toolbar-menu-group[data-group-key="html-quality"] .mageforge-toolbar-menu-group-label {
+    color: var(--mageforge-group-color-html-quality);
+}
+
+.mageforge-toolbar-menu-group[data-group-key="performance"] .mageforge-toolbar-menu-group-label {
+    color: var(--mageforge-group-color-performance);
+}
+
+.mageforge-toolbar-menu-item[data-group-key="wcag"] .mageforge-toolbar-menu-icon {
+    color: var(--mageforge-group-color-wcag);
+}
+
+.mageforge-toolbar-menu-item[data-group-key="html-quality"] .mageforge-toolbar-menu-icon {
+    color: var(--mageforge-group-color-html-quality);
+}
+
+.mageforge-toolbar-menu-item[data-group-key="performance"] .mageforge-toolbar-menu-icon {
+    color: var(--mageforge-group-color-performance);
 }
 
 .mageforge-toolbar-menu-group-chevron {

src/view/frontend/web/js/toolbar/ui.js

@@ -264,7 +264,8 @@ export const uiMethods = {
                 audit.icon,
                 audit.label,
                 audit.description,
-                () => this.runAudit(audit.key)
+                () => this.runAudit(audit.key),
+                key
             ));
         });
 
@@ -280,13 +281,15 @@ export const uiMethods = {
      * @param {string} label
      * @param {string} description
      * @param {Function} callback
+     * @param {?string} groupKey - Optional parent group key for the item
      * @return {HTMLButtonElement}
      */
-    createMenuItem(key, icon, label, description, callback) {
+    createMenuItem(key, icon, label, description, callback, groupKey = null) {
         const item = document.createElement('button');
         item.type = 'button';
         item.className = 'mageforge-toolbar-menu-item';
         item.dataset.auditKey = key;
+        if (groupKey) item.dataset.groupKey = groupKey;
         item.setAttribute('aria-pressed', 'false');
 
         const iconEl = document.createElement('span');