fix(pro:layout): dark theme overlay menu style error (#1771)

IDuxFE · Dec 11, 2023 · 98c6d98 · 98c6d98
1 parent c099b1a
commit 98c6d98
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 15 deletions.
diff --git a/packages/components/menu/style/mixins.less b/packages/components/menu/style/mixins.less
@@ -120,11 +120,5 @@
         border-bottom-color: transparent;
       }
     }
-
-    &-dark.@{menu-prefix}-inline,
-    &-dark.@{menu-prefix}-vertical,
-    &-dark.@{menu-prefix}-horizontal {
-      box-shadow: none;
-    }
   }
 }
diff --git a/packages/components/menu/theme/dark.ts b/packages/components/menu/theme/dark.ts
@@ -0,0 +1,38 @@
+/**
+ * @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 type { CertainThemeTokens, GlobalThemeTokens, ThemeTokenAlgorithms } from '@idux/components/theme'
+
+import { getDefaultThemeTokens } from './default'
+export function getDarkThemeTokens(
+  tokens: GlobalThemeTokens,
+  algorithms: ThemeTokenAlgorithms,
+): CertainThemeTokens<'menu'> {
+  const defaultTokens = getDefaultThemeTokens(tokens, algorithms)
+
+  return {
+    ...defaultTokens,
+
+    darkItemColor: defaultTokens.itemColor,
+    darkItemColorHover: defaultTokens.itemColorHover,
+    darkItemColorActive: defaultTokens.itemColorActive,
+    darkItemColorDisabled: defaultTokens.itemColorDisabled,
+    darkItemGroupColor: defaultTokens.itemGroupColor,
+    darkItemFontWeightActive: defaultTokens.darkItemFontWeightActive,
+
+    darkItemBg: defaultTokens.itemBg,
+    darkItemBgHover: defaultTokens.itemBgHover,
+    darkItemBgActive: defaultTokens.itemBgActive,
+    darkItemBgDisabled: defaultTokens.itemBgDisabled,
+    darkItemGroupBg: defaultTokens.itemGroupBg,
+
+    darkHorizontalItemColorHover: defaultTokens.horizontalItemColorHover,
+    darkHorizontalItemColorActive: defaultTokens.horizontalItemColorActive,
+    darkHorizontalItemBgHover: defaultTokens.horizontalItemBgHover,
+    darkHorizontalItemBgActive: defaultTokens.horizontalItemBgActive,
+  }
+}
diff --git a/packages/components/menu/theme/index.ts b/packages/components/menu/theme/index.ts
@@ -7,12 +7,11 @@
 
 import type { TokenGetter } from '@idux/components/theme'
 
+import { getDarkThemeTokens } from './dark'
 import { getDefaultThemeTokens } from './default'
 
 export const getThemeTokens: TokenGetter<'menu'> = (tokens, presetTheme, algorithms) => {
-  return presetTheme === 'default'
-    ? getDefaultThemeTokens(tokens, algorithms)
-    : getDefaultThemeTokens(tokens, algorithms)
+  return presetTheme === 'default' ? getDefaultThemeTokens(tokens, algorithms) : getDarkThemeTokens(tokens, algorithms)
 }
 
 export type { MenuThemeTokens } from './tokens'
diff --git a/packages/pro/layout/src/contents/Header.tsx b/packages/pro/layout/src/contents/Header.tsx
@@ -12,6 +12,7 @@ import { isObject } from 'lodash-es'
 import { callEmit } from '@idux/cdk/utils'
 import { IxLayoutHeader } from '@idux/components/layout'
 import { IxMenu, type MenuClickOptions, type MenuProps } from '@idux/components/menu'
+import { useThemeToken } from '@idux/pro/theme'
 
 import Logo from './Logo'
 import { proLayoutToken } from '../token'
@@ -21,6 +22,7 @@ export default defineComponent({
   name: 'IxProLayoutHeader',
   setup(_, { slots }) {
     const { props, mergedPrefixCls, setActiveKey, headerMenus, activeHeaderKey } = inject(proLayoutToken)!
+    const { hashId } = useThemeToken('proLayout')
 
     const theme = computed(() => {
       const { theme } = props
@@ -56,7 +58,7 @@ export default defineComponent({
       const prefixCls = `${mergedPrefixCls.value}-header`
 
       const innerMenuProps: MenuProps = {
-        overlayClassName: `${prefixCls}-menu-overlay`,
+        overlayClassName: `${prefixCls}-menu-overlay ${hashId.value}`,
         dataSource: headerMenus.value,
         selectedKeys: menuSelectedKeys.value,
         mode: 'horizontal',

diff --git a/packages/pro/layout/src/contents/Sider.tsx b/packages/pro/layout/src/contents/Sider.tsx
@@ -12,6 +12,7 @@ import { isObject } from 'lodash-es'
 import { type VKey, callEmit, useState } from '@idux/cdk/utils'
 import { IxLayoutSider, type LayoutSiderProps } from '@idux/components/layout'
 import { IxMenu, type MenuClickOptions, type MenuData, type MenuProps } from '@idux/components/menu'
+import { useThemeToken } from '@idux/pro/theme'
 
 import Logo from './Logo'
 import { proLayoutToken } from '../token'
@@ -22,6 +23,7 @@ export default defineComponent({
   setup(_, { slots }) {
     const { props, mergedPrefixCls, activeKey, setActiveKey, activePaths, siderMenus, collapsed, setCollapsed } =
       inject(proLayoutToken)!
+    const { hashId } = useThemeToken('proLayout')
 
     const { expandedKeys, setExpandedKeys } = useExpandedKeys(activePaths, siderMenus)
 
@@ -55,7 +57,7 @@ export default defineComponent({
       const siderProps = mergeProps(innerSiderProps, props.sider!) as LayoutSiderProps
 
       const innerMenuProps: MenuProps = {
-        overlayClassName: `${prefixCls}-menu-overlay`,
+        overlayClassName: `${prefixCls}-menu-overlay ${hashId.value}`,
         collapsed: siderProps.collapsed,
         dataSource: siderMenus.value,
         expandedKeys: expandedKeys.value,

diff --git a/packages/pro/layout/style/dark.less b/packages/pro/layout/style/dark.less
@@ -1,5 +1,5 @@
 .@{pro-layout-prefix} {
-  .darkMenuThemeStyle({
+  @tokens: {
     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);
@@ -17,7 +17,15 @@
     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);
-  });
+  };
+
+  .darkMenuThemeStyle(@tokens);
+  &-sider-menu-overlay {
+    .darkMenuThemeStyle(@tokens);
+  }
+  &-header-menu-overlay {
+    .darkMenuThemeStyle(@tokens);
+  }
 
   &-header-dark,
   &-sider-dark {

diff --git a/packages/pro/layout/style/light.less b/packages/pro/layout/style/light.less
@@ -1,5 +1,5 @@
 .@{pro-layout-prefix} {
-  .menuThemeStyle({
+  @tokens: {
     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);
@@ -16,7 +16,15 @@
     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);
-  });
+  };
+
+  .menuThemeStyle(@tokens);
+  &-sider-menu-overlay {
+    .menuThemeStyle(@tokens);
+  }
+  &-header-menu-overlay {
+    .menuThemeStyle(@tokens);
+  }
 
   background-color: var(--ix-pro-layout-content-bg-color);
   transition: background-color var(--ix-motion-duration-slow);