From a0bf9bceb29672631e716c514dedd4affe06fbb0 Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Tue, 19 May 2026 11:17:05 +0200 Subject: [PATCH 1/6] feat: add new color variables and group styles to toolbar CSS; update createMenuItem to accept groupKey --- src/view/frontend/web/css/toolbar.css | 33 ++++++++++++++++++++++++-- src/view/frontend/web/js/toolbar/ui.js | 6 +++-- 2 files changed, 35 insertions(+), 4 deletions(-) diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css index d5323d5..e7e8b16 100644 --- a/src/view/frontend/web/css/toolbar.css +++ b/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,13 +336,14 @@ font-size: 11px; line-height: 1.3; user-select: text; - cursor: text; + cursor: default; } .mageforge-toolbar-menu-desc.mageforge-active { color: var(--mageforge-color-orange); font-size: 12px; user-select: text; + cursor: default; } .mageforge-toolbar-menu-label-row { @@ -417,7 +422,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="wcag"] .mageforge-toolbar-menu-icon { + color: var(--mageforge-group-color-wcag); +} + +.mageforge-toolbar-menu-item[data-group="html-quality"] .mageforge-toolbar-menu-icon { + color: var(--mageforge-group-color-html-quality); +} + +.mageforge-toolbar-menu-item[data-group="performance"] .mageforge-toolbar-menu-icon { + color: var(--mageforge-group-color-performance); } .mageforge-toolbar-menu-group-chevron { diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js index 23e50e8..26b42ae 100644 --- a/src/view/frontend/web/js/toolbar/ui.js +++ b/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 )); }); @@ -282,11 +283,12 @@ export const uiMethods = { * @param {Function} callback * @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.group = groupKey; item.setAttribute('aria-pressed', 'false'); const iconEl = document.createElement('span'); From 04d81798f6704b14956b4408f165f17437893c77 Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Tue, 19 May 2026 11:23:43 +0200 Subject: [PATCH 2/6] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- src/view/frontend/web/css/toolbar.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css index e7e8b16..9cca5db 100644 --- a/src/view/frontend/web/css/toolbar.css +++ b/src/view/frontend/web/css/toolbar.css @@ -343,7 +343,6 @@ color: var(--mageforge-color-orange); font-size: 12px; user-select: text; - cursor: default; } .mageforge-toolbar-menu-label-row { From e3133aeea97abcedaac0ddf88b8aaa1c97735e16 Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Tue, 19 May 2026 11:24:26 +0200 Subject: [PATCH 3/6] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- src/view/frontend/web/js/toolbar/ui.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js index 26b42ae..733ccfc 100644 --- a/src/view/frontend/web/js/toolbar/ui.js +++ b/src/view/frontend/web/js/toolbar/ui.js @@ -281,6 +281,7 @@ 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, groupKey = null) { From 8dcf91a3eca614f765e3dc4f39a1be5f4faf8112 Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Tue, 19 May 2026 11:43:19 +0200 Subject: [PATCH 4/6] fix: scope purple variable and increase hover specificity for group labels --- src/view/frontend/web/css/toolbar.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css index 9cca5db..4c1e3c0 100644 --- a/src/view/frontend/web/css/toolbar.css +++ b/src/view/frontend/web/css/toolbar.css @@ -22,9 +22,9 @@ --mageforge-color-slate-400: #94a3b8; --mageforge-color-orange: #fb923c; --mageforge-color-pink: #C850C0; - --mageforge-color-purple: #a855f7; + --mageforge-toolbar-purple: #a855f7; --mageforge-color-amber: #edb04d; - --mageforge-group-color-wcag: var(--mageforge-color-purple); + --mageforge-group-color-wcag: var(--mageforge-toolbar-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); @@ -409,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); } From 09b927dfde391ed10a493b3ec8329b73585a48ee Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Tue, 19 May 2026 15:59:37 +0200 Subject: [PATCH 5/6] fix: simplify warning display logic in CompatibilityChecker --- src/Service/Hyva/CompatibilityChecker.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Service/Hyva/CompatibilityChecker.php b/src/Service/Hyva/CompatibilityChecker.php index d513639..55f979f 100644 --- a/src/Service/Hyva/CompatibilityChecker.php +++ b/src/Service/Hyva/CompatibilityChecker.php @@ -203,7 +203,7 @@ private function getStatusDisplay(array $moduleData): string return '✓ Compatible'; } - if ($moduleData['compatible'] && $moduleData['hasWarnings']) { + if ($moduleData['compatible']) { return '⚠ Warnings'; } From 9df52ea1a634dc5265d10619d9b6836dd7b2b9e5 Mon Sep 17 00:00:00 2001 From: Mathias Elle Date: Tue, 26 May 2026 09:40:19 +0200 Subject: [PATCH 6/6] fix: rename purple color variable and update groupKey data attribute in toolbar --- src/view/frontend/web/css/toolbar.css | 10 +++++----- src/view/frontend/web/js/toolbar/ui.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/view/frontend/web/css/toolbar.css b/src/view/frontend/web/css/toolbar.css index 4c1e3c0..ede922a 100644 --- a/src/view/frontend/web/css/toolbar.css +++ b/src/view/frontend/web/css/toolbar.css @@ -22,9 +22,9 @@ --mageforge-color-slate-400: #94a3b8; --mageforge-color-orange: #fb923c; --mageforge-color-pink: #C850C0; - --mageforge-toolbar-purple: #a855f7; + --mageforge-color-purple: #a855f7; --mageforge-color-amber: #edb04d; - --mageforge-group-color-wcag: var(--mageforge-toolbar-purple); + --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); @@ -436,15 +436,15 @@ color: var(--mageforge-group-color-performance); } -.mageforge-toolbar-menu-item[data-group="wcag"] .mageforge-toolbar-menu-icon { +.mageforge-toolbar-menu-item[data-group-key="wcag"] .mageforge-toolbar-menu-icon { color: var(--mageforge-group-color-wcag); } -.mageforge-toolbar-menu-item[data-group="html-quality"] .mageforge-toolbar-menu-icon { +.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="performance"] .mageforge-toolbar-menu-icon { +.mageforge-toolbar-menu-item[data-group-key="performance"] .mageforge-toolbar-menu-icon { color: var(--mageforge-group-color-performance); } diff --git a/src/view/frontend/web/js/toolbar/ui.js b/src/view/frontend/web/js/toolbar/ui.js index 733ccfc..157bae9 100644 --- a/src/view/frontend/web/js/toolbar/ui.js +++ b/src/view/frontend/web/js/toolbar/ui.js @@ -289,7 +289,7 @@ export const uiMethods = { item.type = 'button'; item.className = 'mageforge-toolbar-menu-item'; item.dataset.auditKey = key; - if (groupKey) item.dataset.group = groupKey; + if (groupKey) item.dataset.groupKey = groupKey; item.setAttribute('aria-pressed', 'false'); const iconEl = document.createElement('span');