From 03ebbea46aed722f6999c7cda6834452b9edfe88 Mon Sep 17 00:00:00 2001 From: AxiosLeo <13862149+AxiosLeo@users.noreply.github.com> Date: Thu, 12 Feb 2026 22:22:53 +0800 Subject: [PATCH] fix(menu): update hover color variable to use the correct reference (#7544) * fix(menu): update hover color variable to use the correct reference Medium Severity In the horizontal .is-light menu section, --menu-item-hover-color is set to hsl(var(--menu-item-color)), but --menu-item-color is already defined as hsl(var(--accent-foreground)). This results in hsl(hsl(...)) at computed-value time, which is invalid CSS. The non-horizontal .is-light block correctly uses var(--menu-item-color) without the extra hsl() wrapper. * fix(menu): simplify hover styles by removing redundant nested hover rules Low Severity The SCSS &:not(.is-active):hover { &:hover { ... } } compiles to a :hover:hover pseudo-class chain, which is functionally identical to a single :hover. The inner &:hover nesting is redundant and adds unnecessary complexity compared to placing styles directly inside the &:not(.is-active):hover block. --- .../ui-kit/menu-ui/src/components/menu.vue | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/packages/@core/ui-kit/menu-ui/src/components/menu.vue index 4d3ed617..d7894a17 100644 --- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue +++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue @@ -536,7 +536,7 @@ $namespace: vben; --menu-background-color: hsl(var(--menu)); --menu-item-color: hsl(var(--accent-foreground)); --menu-item-background-color: var(--menu-background-color); - --menu-item-hover-color: hsl(var(--menu-item-color)); + --menu-item-hover-color: var(--menu-item-color); --menu-item-hover-background-color: hsl(var(--accent)); --menu-item-active-color: hsl(var(--primary)); --menu-item-active-background-color: hsl(var(--primary) / 15%); @@ -871,16 +871,14 @@ $namespace: vben; } &:not(.is-active):hover { - &:hover { - //color: var(--menu-submenu-hover-color); - text-decoration: none; - cursor: pointer; - background: var(--menu-submenu-hover-background-color) !important; + //color: var(--menu-submenu-hover-color); + text-decoration: none; + cursor: pointer; + background: var(--menu-submenu-hover-background-color) !important; - // svg { - // fill: var(--menu-submenu-hover-color); - // } - } + // svg { + // fill: var(--menu-submenu-hover-color); + // } } }