From f7bbf2072fdc1b84486882659a1e3c1515bd81f8 Mon Sep 17 00:00:00 2001
From: saller <weskerli@163.com>
Date: Mon, 11 Dec 2023 15:04:50 +0800
Subject: [PATCH] fix(pro:layout): style error when theme style not injected
 (#1769)

---
 packages/components/menu/style/dark.less      |  66 ---------
 packages/components/menu/style/index.less     |  42 +++++-
 packages/components/menu/style/light.less     |  59 --------
 packages/components/menu/style/mixins.less    | 130 ++++++++++++++++++
 packages/pro/layout/src/contents/Header.tsx   |   3 +-
 .../layout/src/contents/MenuThemeProvider.tsx |  67 ---------
 packages/pro/layout/src/contents/Sider.tsx    |   3 +-
 packages/pro/layout/style/dark.less           |  20 +++
 packages/pro/layout/style/index.less          |   1 +
 packages/pro/layout/style/light.less          |  19 +++
 10 files changed, 212 insertions(+), 198 deletions(-)
 delete mode 100644 packages/components/menu/style/dark.less
 delete mode 100644 packages/components/menu/style/light.less
 create mode 100644 packages/components/menu/style/mixins.less
 delete mode 100644 packages/pro/layout/src/contents/MenuThemeProvider.tsx

diff --git a/packages/components/menu/style/dark.less b/packages/components/menu/style/dark.less
deleted file mode 100644
index 0f2463a61..000000000
--- a/packages/components/menu/style/dark.less
+++ /dev/null
@@ -1,66 +0,0 @@
-.@{menu-prefix} {
-  &-dark {
-    color: var(--ix-menu-dark-item-color);
-    background: var(--ix-menu-dark-item-bg);
-
-    .@{menu-prefix}-item-group-label {
-      color: var(--ix-menu-dark-item-group-color);
-      background: var(--ix-menu-dark-item-group-bg);
-    }
-
-    .@{menu-prefix}-item:hover,
-    .@{menu-prefix}-sub-label:hover {
-      color: var(--ix-menu-dark-item-color-hover);
-    }
-
-    .@{menu-prefix}-item:hover,
-    .@{menu-prefix}-sub-label:hover,
-    &:not(.@{menu-prefix}-inline) .@{menu-prefix}-sub-expanded > .@{menu-prefix}-sub-label {
-      background: var(--ix-menu-dark-item-bg-hover);
-    }
-
-    .@{menu-prefix}-item.@{menu-prefix}-item-selected,
-    &.@{menu-prefix}-vertical.@{menu-prefix}-collapsed .@{menu-prefix}-sub-selected > .@{menu-prefix}-sub-label {
-      background: var(--ix-menu-dark-item-bg-active);
-    }
-
-    .@{menu-prefix}-item.@{menu-prefix}-item-selected,
-    .@{menu-prefix}-sub-selected > .@{menu-prefix}-sub-label {
-      color: var(--ix-menu-dark-item-color-active);
-      font-weight: var(--ix-menu-dark-item-font-weight-active);
-    }
-
-    & .@{menu-prefix}-item.@{menu-prefix}-item-disabled,
-    & .@{menu-prefix}-sub.@{menu-prefix}-sub-disabled > .@{menu-prefix}-sub-label {
-      color: var(--ix-menu-dark-item-color-disabled);
-      background: var(--ix-menu-dark-item-bg-disabled);
-    }
-  }
-
-  &-dark&-horizontal {
-    .@{menu-prefix}-item:hover,
-    .@{menu-prefix}-sub-label:hover {
-      color: var(--ix-menu-dark-horizontal-item-color-hover);
-      background: var(--ix-menu-dark-horizontal-item-bg-hover);
-    }
-
-    .@{menu-prefix}-item.@{menu-prefix}-item-selected,
-    .@{menu-prefix}-sub-selected > .@{menu-prefix}-sub-label,
-    .@{menu-prefix}-sub-expanded > .@{menu-prefix}-sub-label {
-      color: var(--ix-menu-dark-horizontal-item-color-active);
-      background: var(--ix-menu-dark-horizontal-item-bg-active);
-    }
-
-    .@{menu-prefix}-item.@{menu-prefix}-item-disabled,
-    .@{menu-prefix}-sub-disabled > .@{menu-prefix}-sub-label {
-      background-color: var(--ix-menu-dark-item-bg-disabled);
-      border-bottom-color: transparent;
-    }
-  }
-
-  &-dark&-inline,
-  &-dark&-vertical,
-  &-dark&-horizontal {
-    box-shadow: none;
-  }
-}
diff --git a/packages/components/menu/style/index.less b/packages/components/menu/style/index.less
index 86511694b..5b445733f 100644
--- a/packages/components/menu/style/index.less
+++ b/packages/components/menu/style/index.less
@@ -7,8 +7,7 @@
 @import './mode.less';
 @import './collapsed.less';
 @import './level.less';
-@import './light.less';
-@import './dark.less';
+@import './mixins.less';
 
 .@{menu-prefix} {
   box-sizing: border-box;
@@ -86,3 +85,42 @@
     }
   }
 }
+
+.menuThemeStyle({
+  itemColor: var(--ix-menu-item-color);
+  itemColorHover: var(--ix-menu-item-color-hover);
+  itemColorActive: var(--ix-menu-item-color-active);
+  itemColorDisabled: var(--ix-menu-item-color-disabled);
+  itemGroupColor: var(--ix-menu-item-group-color);
+
+  itemBg: var(--ix-menu-item-bg);
+  itemBgHover: var(--ix-menu-item-bg-hover);
+  itemBgActive: var(--ix-menu-item-bg-active);
+  itemBgDisabled: var(--ix-menu-item-bg-disabled);
+  itemGroupBg: var(--ix-menu-item-group-bg);
+
+  horizontalItemColorHover: var(--ix-menu-horizontal-item-color-hover);
+  horizontalItemColorActive: var(--ix-menu-horizontal-item-color-active);
+  horizontalItemBgHover: var(--ix-menu-horizontal-item-bg-hover);
+  horizontalItemBgActive: var(--ix-menu-horizontal-item-bg-active);
+});
+
+.darkMenuThemeStyle({
+  darkItemColor: var(--ix-menu-dark-item-color);
+  darkItemColorHover: var(--ix-menu-dark-item-color-hover);
+  darkItemColorActive: var(--ix-menu-dark-item-color-active);
+  darkItemColorDisabled: var(--ix-menu-dark-item-color-disabled);
+  darkItemGroupColor: var(--ix-menu-dark-item-group-color);
+  darkItemFontWeightActive: var(--ix-menu-dark-item-font-weight-active);
+
+  darkItemBg: var(--ix-menu-dark-item-bg);
+  darkItemBgHover: var(--ix-menu-dark-item-bg-hover);
+  darkItemBgActive: var(--ix-menu-dark-item-bg-active);
+  darkItemBgDisabled: var(--ix-menu-dark-item-bg-disabled);
+  darkItemGroupBg: var(--ix-menu-dark-item-group-bg);
+
+  darkHorizontalItemColorHover: var(--ix-menu-dark-horizontal-item-color-hover);
+  darkHorizontalItemColorActive: var(--ix-menu-dark-horizontal-item-color-active);
+  darkHorizontalItemBgHover: var(--ix-menu-dark-horizontal-item-bg-hover);
+  darkHorizontalItemBgActive: var(--ix-menu-dark-horizontal-item-bg-active);
+});
\ No newline at end of file
diff --git a/packages/components/menu/style/light.less b/packages/components/menu/style/light.less
deleted file mode 100644
index 2f8759bea..000000000
--- a/packages/components/menu/style/light.less
+++ /dev/null
@@ -1,59 +0,0 @@
-.@{menu-prefix} {
-  color: var(--ix-menu-item-color);
-  background: var(--ix-menu-item-bg);
-
-  &-item-group-label {
-    color: var(--ix-menu-item-group-color);
-    background: var(--ix-menu-item-group-bg);
-  }
-
-  &-item:hover,
-  &-sub-label:hover {
-    color: var(--ix-menu-item-color-hover);
-  }
-
-  &-item:hover,
-  &-sub-label:hover,
-  &:not(&-inline) &-sub-expanded > &-sub-label {
-    background: var(--ix-menu-item-bg-hover);
-  }
-
-  &-item&-item-selected,
-  &-vertical&-collapsed &-sub-selected > &-sub-label {
-    background: var(--ix-menu-item-bg-active);
-  }
-
-  &-item&-item-selected,
-  &-sub-selected > &-sub-label {
-    color: var(--ix-menu-item-color-active);
-  }
-
-  & &-item&-item-disabled,
-  & &-sub&-sub-disabled > &-sub-label {
-    color: var(--ix-menu-item-color-disabled);
-    background: var(--ix-menu-item-bg-disabled);
-  }
-
-  &-horizontal {
-    .@{menu-prefix}-item:hover,
-    .@{menu-prefix}-sub-label:hover {
-      color: var(--ix-menu-horizontal-item-color-hover);
-      background: var(--ix-menu-horizontal-item-bg-hover);
-      border-bottom-color: var(--ix-menu-item-color-active);
-    }
-
-    .@{menu-prefix}-item.@{menu-prefix}-item-selected,
-    .@{menu-prefix}-sub-selected > .@{menu-prefix}-sub-label,
-    .@{menu-prefix}-sub-expanded > .@{menu-prefix}-sub-label {
-      color: var(--ix-menu-horizontal-item-color-active);
-      background: var(--ix-menu-horizontal-item-bg-active);
-      border-bottom-color: var(--ix-menu-item-color-active);
-    }
-
-    .@{menu-prefix}-item.@{menu-prefix}-item-disabled,
-    .@{menu-prefix}-sub-disabled > .@{menu-prefix}-sub-label {
-      background: var(--ix-menu-item-bg-disabled);
-      border-bottom-color: transparent;
-    }
-  }
-}
diff --git a/packages/components/menu/style/mixins.less b/packages/components/menu/style/mixins.less
new file mode 100644
index 000000000..4b4c9e218
--- /dev/null
+++ b/packages/components/menu/style/mixins.less
@@ -0,0 +1,130 @@
+.menuThemeStyle(@tokens) {
+  .@{menu-prefix} {
+    color: @tokens[itemColor];
+    background: @tokens[itemBg];
+
+    &-item-group-label {
+      color: @tokens[itemGroupColor];
+      background: @tokens[itemGroupBg];
+    }
+
+    &-item:hover,
+    &-sub-label:hover {
+      color: @tokens[itemColorHover];
+    }
+
+    &-item:hover,
+    &-sub-label:hover,
+    &:not(&-inline) &-sub-expanded > &-sub-label {
+      background: @tokens[itemBgHover];
+    }
+
+    &-item.@{menu-prefix}-item-selected,
+    &-vertical.@{menu-prefix}-collapsed &-sub-selected > &-sub-label {
+      background: @tokens[itemBgActive];
+    }
+
+    &-item.@{menu-prefix}-item-selected,
+    &-sub-selected > &-sub-label {
+      color: @tokens[itemColorActive];
+    }
+
+    & &-item.@{menu-prefix}-item-disabled,
+    & &-sub.@{menu-prefix}-sub-disabled > &-sub-label {
+      color: @tokens[itemColorDisabled];
+      background: @tokens[itemBgDisabled];
+    }
+
+    &-horizontal {
+      .@{menu-prefix}-item:hover,
+      .@{menu-prefix}-sub-label:hover {
+        color: @tokens[horizontalItemColorHover];
+        background: @tokens[horizontalItemBgHover];
+        border-bottom-color: @tokens[itemColorActive];
+      }
+
+      .@{menu-prefix}-item.@{menu-prefix}-item-selected,
+      .@{menu-prefix}-sub-selected > .@{menu-prefix}-sub-label,
+      .@{menu-prefix}-sub-expanded > .@{menu-prefix}-sub-label {
+        color: @tokens[horizontalItemColorActive];
+        background: @tokens[horizontalItemBgActive];
+        border-bottom-color: @tokens[itemColorActive];
+      }
+
+      .@{menu-prefix}-item.@{menu-prefix}-item-disabled,
+      .@{menu-prefix}-sub-disabled > .@{menu-prefix}-sub-label {
+        background: @tokens[itemBgDisabled];
+        border-bottom-color: transparent;
+      }
+    }
+  }
+}
+
+.darkMenuThemeStyle(@tokens) {
+  .@{menu-prefix} {
+    &-dark {
+      color: @tokens[darkItemColor];
+      background: @tokens[darkItemBg];
+
+      .@{menu-prefix}-item-group-label {
+        color: @tokens[darkItemGroupColor];
+        background: @tokens[darkItemGroupBg];
+      }
+
+      .@{menu-prefix}-item:hover,
+      .@{menu-prefix}-sub-label:hover {
+        color: @tokens[darkItemColorHover];
+      }
+
+      .@{menu-prefix}-item:hover,
+      .@{menu-prefix}-sub-label:hover,
+      &:not(.@{menu-prefix}-inline) .@{menu-prefix}-sub-expanded > .@{menu-prefix}-sub-label {
+        background: @tokens[darkItemBgHover];
+      }
+
+      .@{menu-prefix}-item.@{menu-prefix}-item-selected,
+      &.@{menu-prefix}-vertical.@{menu-prefix}-collapsed .@{menu-prefix}-sub-selected > .@{menu-prefix}-sub-label {
+        background: @tokens[darkItemBgActive];
+      }
+
+      .@{menu-prefix}-item.@{menu-prefix}-item-selected,
+      .@{menu-prefix}-sub-selected > .@{menu-prefix}-sub-label {
+        color: @tokens[darkItemColorActive];
+        font-weight: @tokens[darkItemFontWeightActive];
+      }
+
+      & .@{menu-prefix}-item.@{menu-prefix}-item-disabled,
+      & .@{menu-prefix}-sub.@{menu-prefix}-sub-disabled > .@{menu-prefix}-sub-label {
+        color: @tokens[darkItemColorDisabled];
+        background: @tokens[darkItemBgDisabled];
+      }
+    }
+
+    &-dark.@{menu-prefix}-horizontal {
+      .@{menu-prefix}-item:hover,
+      .@{menu-prefix}-sub-label:hover {
+        color: @tokens[darkHorizontalItemColorHover];
+        background: @tokens[darkHorizontalItemBgHover];
+      }
+
+      .@{menu-prefix}-item.@{menu-prefix}-item-selected,
+      .@{menu-prefix}-sub-selected > .@{menu-prefix}-sub-label,
+      .@{menu-prefix}-sub-expanded > .@{menu-prefix}-sub-label {
+        color: @tokens[darkHorizontalItemColorActive];
+        background: @tokens[darkHorizontalItemBgActive];
+      }
+
+      .@{menu-prefix}-item.@{menu-prefix}-item-disabled,
+      .@{menu-prefix}-sub-disabled > .@{menu-prefix}-sub-label {
+        background-color: @tokens[darkItemBgDisabled];
+        border-bottom-color: transparent;
+      }
+    }
+
+    &-dark.@{menu-prefix}-inline,
+    &-dark.@{menu-prefix}-vertical,
+    &-dark.@{menu-prefix}-horizontal {
+      box-shadow: none;
+    }
+  }
+}
diff --git a/packages/pro/layout/src/contents/Header.tsx b/packages/pro/layout/src/contents/Header.tsx
index 153f5e69b..220593552 100644
--- a/packages/pro/layout/src/contents/Header.tsx
+++ b/packages/pro/layout/src/contents/Header.tsx
@@ -14,7 +14,6 @@ import { IxLayoutHeader } from '@idux/components/layout'
 import { IxMenu, type MenuClickOptions, type MenuProps } from '@idux/components/menu'
 
 import Logo from './Logo'
-import MenuThemeProvider from './MenuThemeProvider'
 import { proLayoutToken } from '../token'
 import { getDefaultPaths } from '../utils/menu'
 
@@ -75,7 +74,7 @@ export default defineComponent({
       return (
         <IxLayoutHeader class={classes.value}>
           {<Logo v-slots={slots} />}
-          <MenuThemeProvider class={`${prefixCls}-content`}>{contentNode}</MenuThemeProvider>
+          <div class={`${prefixCls}-content`}>{contentNode}</div>
           {slots.headerExtra && <div class={`${prefixCls}-extra`}>{slots.headerExtra()}</div>}
         </IxLayoutHeader>
       )
diff --git a/packages/pro/layout/src/contents/MenuThemeProvider.tsx b/packages/pro/layout/src/contents/MenuThemeProvider.tsx
deleted file mode 100644
index 029c8227d..000000000
--- a/packages/pro/layout/src/contents/MenuThemeProvider.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * @license
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
- */
-
-import { defineComponent } from 'vue'
-
-import { IxThemeProvider } from '@idux/components/theme'
-import { useThemeToken } from '@idux/pro/theme'
-
-export default defineComponent({
-  inheritAttrs: true,
-  setup(_, { slots }) {
-    const { themeTokens } = useThemeToken('proLayout')
-
-    return () => (
-      <IxThemeProvider
-        tag="div"
-        inherit="all"
-        tokens={{
-          components: {
-            menu: {
-              itemColor: themeTokens.value.menuItemColor,
-              itemColorHover: themeTokens.value.menuItemColorHover,
-              itemColorActive: themeTokens.value.menuItemColorActive,
-              itemColorDisabled: themeTokens.value.menuItemColorDisabled,
-              itemGroupColor: themeTokens.value.menuItemGroupColor,
-
-              itemBg: themeTokens.value.menuItemBg,
-              itemBgHover: themeTokens.value.menuItemBgHover,
-              itemBgDisabled: themeTokens.value.menuItemBgDisabled,
-              itemBgActive: themeTokens.value.menuItemBgActive,
-              itemGroupBg: themeTokens.value.menuItemGroupBg,
-
-              horizontalItemColorHover: themeTokens.value.menuHorizontalItemColorHover,
-              horizontalItemColorActive: themeTokens.value.menuHorizontalItemColorActive,
-              horizontalItemBgHover: themeTokens.value.menuHorizontalItemBgHover,
-              horizontalItemBgActive: themeTokens.value.menuHorizontalItemBgActive,
-
-              darkItemColor: themeTokens.value.darkMenuItemColor,
-              darkItemColorHover: themeTokens.value.darkMenuItemColorHover,
-              darkItemColorActive: themeTokens.value.darkMenuItemColorActive,
-              darkItemColorDisabled: themeTokens.value.darkMenuItemColorDisabled,
-              darkItemGroupColor: themeTokens.value.darkMenuItemGroupColor,
-              darkItemFontWeightActive: themeTokens.value.darkMenuItemFontWeightActive,
-
-              darkItemBg: themeTokens.value.darkMenuItemBg,
-              darkItemBgHover: themeTokens.value.darkMenuItemBgHover,
-              darkItemBgActive: themeTokens.value.darkMenuItemBgActive,
-              darkItemBgDisabled: themeTokens.value.darkMenuItemBgDisabled,
-              darkItemGroupBg: themeTokens.value.darkMenuItemGroupBg,
-
-              darkHorizontalItemColorHover: themeTokens.value.darkMenuHorizontalItemColorHover,
-              darkHorizontalItemColorActive: themeTokens.value.darkMenuHorizontalItemColorActive,
-              darkHorizontalItemBgHover: themeTokens.value.darkMenuHorizontalItemBgHover,
-              darkHorizontalItemBgActive: themeTokens.value.darkMenuHorizontalItemBgActive,
-            },
-          },
-        }}
-      >
-        {slots.default?.()}
-      </IxThemeProvider>
-    )
-  },
-})
diff --git a/packages/pro/layout/src/contents/Sider.tsx b/packages/pro/layout/src/contents/Sider.tsx
index a07fbed47..d741e02e2 100644
--- a/packages/pro/layout/src/contents/Sider.tsx
+++ b/packages/pro/layout/src/contents/Sider.tsx
@@ -14,7 +14,6 @@ import { IxLayoutSider, type LayoutSiderProps } from '@idux/components/layout'
 import { IxMenu, type MenuClickOptions, type MenuData, type MenuProps } from '@idux/components/menu'
 
 import Logo from './Logo'
-import MenuThemeProvider from './MenuThemeProvider'
 import { proLayoutToken } from '../token'
 import { getTargetPaths } from '../utils/menu'
 
@@ -75,7 +74,7 @@ export default defineComponent({
         <IxLayoutSider class={classes.value} {...siderProps}>
           {props.type === 'sider' && <Logo v-slots={slots} />}
           {slots.siderHeader && <div class={`${prefixCls}-header`}>{slots.siderHeader()}</div>}
-          <MenuThemeProvider class={`${prefixCls}-content`}>{contentNode}</MenuThemeProvider>
+          <div class={`${prefixCls}-content`}>{contentNode}</div>
           {slots.siderFooter && <div class={`${prefixCls}-footer`}>{slots.siderFooter()}</div>}
         </IxLayoutSider>
       )
diff --git a/packages/pro/layout/style/dark.less b/packages/pro/layout/style/dark.less
index c564b7236..7ac7168e8 100644
--- a/packages/pro/layout/style/dark.less
+++ b/packages/pro/layout/style/dark.less
@@ -1,4 +1,24 @@
 .@{pro-layout-prefix} {
+  .darkMenuThemeStyle({
+    darkItemColor: var(--ix-pro-layout-dark-menu-item-color);
+    darkItemColorHover: var(--ix-pro-layout-dark-menu-item-color-hover);
+    darkItemColorActive: var(--ix-pro-layout-dark-menu-item-color-active);
+    darkItemColorDisabled: var(--ix-pro-layout-dark-menu-item-color-disabled);
+    darkItemGroupColor: var(--ix-pro-layout-dark-menu-item-group-color);
+    darkItemFontWeightActive: var(--ix-pro-layout-dark-menu-item-font-weight-active);
+
+    darkItemBg: var(--ix-pro-layout-dark-menu-item-bg);
+    darkItemBgHover: var(--ix-pro-layout-dark-menu-item-bg-hover);
+    darkItemBgActive: var(--ix-pro-layout-dark-menu-item-bg-active);
+    darkItemBgDisabled: var(--ix-pro-layout-dark-menu-item-bg-disabled);
+    darkItemGroupBg: var(--ix-pro-layout-dark-menu-item-group-bg);
+
+    darkHorizontalItemColorHover: var(--ix-pro-layout-dark-menu-horizontal-item-color-hover);
+    darkHorizontalItemColorActive: var(--ix-pro-layout-dark-menu-horizontal-item-color-active);
+    darkHorizontalItemBgHover: var(--ix-pro-layout-dark-menu-horizontal-item-bg-hover);
+    darkHorizontalItemBgActive: var(--ix-pro-layout-dark-menu-horizontal-item-bg-active);
+  });
+
   &-header-dark,
   &-sider-dark {
     .@{pro-layout-prefix}-logo > a > h1 {
diff --git a/packages/pro/layout/style/index.less b/packages/pro/layout/style/index.less
index f812a7e68..a7fde10ca 100644
--- a/packages/pro/layout/style/index.less
+++ b/packages/pro/layout/style/index.less
@@ -1,5 +1,6 @@
 @import '../../style/variable/index.less';
 @import '../../../components/style/variable/index.less';
+@import '../../../components/menu/style/mixins.less';
 @import './header.less';
 @import './sider.less';
 @import './light.less';
diff --git a/packages/pro/layout/style/light.less b/packages/pro/layout/style/light.less
index a1188f230..94e2ae7f7 100644
--- a/packages/pro/layout/style/light.less
+++ b/packages/pro/layout/style/light.less
@@ -1,4 +1,23 @@
 .@{pro-layout-prefix} {
+  .menuThemeStyle({
+    itemColor: var(--ix-pro-layout-menu-item-color);
+    itemColorHover: var(--ix-pro-layout-menu-item-color-hover);
+    itemColorActive: var(--ix-pro-layout-menu-item-color-active);
+    itemColorDisabled: var(--ix-pro-layout-menu-item-color-disabled);
+    itemGroupColor: var(--ix-pro-layout-menu-item-group-color);
+  
+    itemBg: var(--ix-pro-layout-menu-item-bg);
+    itemBgHover: var(--ix-pro-layout-menu-item-bg-hover);
+    itemBgActive: var(--ix-pro-layout-menu-item-bg-active);
+    itemBgDisabled: var(--ix-pro-layout-menu-item-bg-disabled);
+    itemGroupBg: var(--ix-pro-layout-menu-item-group-bg);
+  
+    horizontalItemColorHover: var(--ix-pro-layout-menu-horizontal-item-color-hover);
+    horizontalItemColorActive: var(--ix-pro-layout-menu-horizontal-item-color-active);
+    horizontalItemBgHover: var(--ix-pro-layout-menu-horizontal-item-bg-hover);
+    horizontalItemBgActive: var(--ix-pro-layout-menu-horizontal-item-bg-active);
+  });
+
   background-color: var(--ix-pro-layout-content-bg-color);
   transition: background-color var(--ix-motion-duration-slow);