203 lines
6.7 KiB
JavaScript
203 lines
6.7 KiB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
import { genFocusOutline } from '../../style';
|
|
const accessibilityFocus = token => _extends({}, genFocusOutline(token));
|
|
const getThemeStyle = (token, themeSuffix) => {
|
|
const {
|
|
componentCls,
|
|
colorItemText,
|
|
colorItemTextSelected,
|
|
colorGroupTitle,
|
|
colorItemBg,
|
|
colorSubItemBg,
|
|
colorItemBgSelected,
|
|
colorActiveBarHeight,
|
|
colorActiveBarWidth,
|
|
colorActiveBarBorderSize,
|
|
motionDurationSlow,
|
|
motionEaseInOut,
|
|
motionEaseOut,
|
|
menuItemPaddingInline,
|
|
motionDurationMid,
|
|
colorItemTextHover,
|
|
lineType,
|
|
colorSplit,
|
|
// Disabled
|
|
colorItemTextDisabled,
|
|
// Danger
|
|
colorDangerItemText,
|
|
colorDangerItemTextHover,
|
|
colorDangerItemTextSelected,
|
|
colorDangerItemBgActive,
|
|
colorDangerItemBgSelected,
|
|
colorItemBgHover,
|
|
menuSubMenuBg,
|
|
// Horizontal
|
|
colorItemTextSelectedHorizontal,
|
|
colorItemBgSelectedHorizontal
|
|
} = token;
|
|
return {
|
|
[`${componentCls}-${themeSuffix}`]: {
|
|
color: colorItemText,
|
|
background: colorItemBg,
|
|
[`&${componentCls}-root:focus-visible`]: _extends({}, accessibilityFocus(token)),
|
|
// ======================== Item ========================
|
|
[`${componentCls}-item-group-title`]: {
|
|
color: colorGroupTitle
|
|
},
|
|
[`${componentCls}-submenu-selected`]: {
|
|
[`> ${componentCls}-submenu-title`]: {
|
|
color: colorItemTextSelected
|
|
}
|
|
},
|
|
// Disabled
|
|
[`${componentCls}-item-disabled, ${componentCls}-submenu-disabled`]: {
|
|
color: `${colorItemTextDisabled} !important`
|
|
},
|
|
// Hover
|
|
[`${componentCls}-item:hover, ${componentCls}-submenu-title:hover`]: {
|
|
[`&:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: {
|
|
color: colorItemTextHover
|
|
}
|
|
},
|
|
[`&:not(${componentCls}-horizontal)`]: {
|
|
[`${componentCls}-item:not(${componentCls}-item-selected)`]: {
|
|
'&:hover': {
|
|
backgroundColor: colorItemBgHover
|
|
},
|
|
'&:active': {
|
|
backgroundColor: colorItemBgSelected
|
|
}
|
|
},
|
|
[`${componentCls}-submenu-title`]: {
|
|
'&:hover': {
|
|
backgroundColor: colorItemBgHover
|
|
},
|
|
'&:active': {
|
|
backgroundColor: colorItemBgSelected
|
|
}
|
|
}
|
|
},
|
|
// Danger - only Item has
|
|
[`${componentCls}-item-danger`]: {
|
|
color: colorDangerItemText,
|
|
[`&${componentCls}-item:hover`]: {
|
|
[`&:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: {
|
|
color: colorDangerItemTextHover
|
|
}
|
|
},
|
|
[`&${componentCls}-item:active`]: {
|
|
background: colorDangerItemBgActive
|
|
}
|
|
},
|
|
[`${componentCls}-item a`]: {
|
|
'&, &:hover': {
|
|
color: 'inherit'
|
|
}
|
|
},
|
|
[`${componentCls}-item-selected`]: {
|
|
color: colorItemTextSelected,
|
|
// Danger
|
|
[`&${componentCls}-item-danger`]: {
|
|
color: colorDangerItemTextSelected
|
|
},
|
|
[`a, a:hover`]: {
|
|
color: 'inherit'
|
|
}
|
|
},
|
|
[`& ${componentCls}-item-selected`]: {
|
|
backgroundColor: colorItemBgSelected,
|
|
// Danger
|
|
[`&${componentCls}-item-danger`]: {
|
|
backgroundColor: colorDangerItemBgSelected
|
|
}
|
|
},
|
|
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
|
[`&:not(${componentCls}-item-disabled):focus-visible`]: _extends({}, accessibilityFocus(token))
|
|
},
|
|
[`&${componentCls}-submenu > ${componentCls}`]: {
|
|
backgroundColor: menuSubMenuBg
|
|
},
|
|
[`&${componentCls}-popup > ${componentCls}`]: {
|
|
backgroundColor: colorItemBg
|
|
},
|
|
// ====================== Horizontal ======================
|
|
[`&${componentCls}-horizontal`]: _extends(_extends({}, themeSuffix === 'dark' ? {
|
|
borderBottom: 0
|
|
} : {}), {
|
|
[`> ${componentCls}-item, > ${componentCls}-submenu`]: {
|
|
top: colorActiveBarBorderSize,
|
|
marginTop: -colorActiveBarBorderSize,
|
|
marginBottom: 0,
|
|
borderRadius: 0,
|
|
'&::after': {
|
|
position: 'absolute',
|
|
insetInline: menuItemPaddingInline,
|
|
bottom: 0,
|
|
borderBottom: `${colorActiveBarHeight}px solid transparent`,
|
|
transition: `border-color ${motionDurationSlow} ${motionEaseInOut}`,
|
|
content: '""'
|
|
},
|
|
[`&:hover, &-active, &-open`]: {
|
|
'&::after': {
|
|
borderBottomWidth: colorActiveBarHeight,
|
|
borderBottomColor: colorItemTextSelectedHorizontal
|
|
}
|
|
},
|
|
[`&-selected`]: {
|
|
color: colorItemTextSelectedHorizontal,
|
|
backgroundColor: colorItemBgSelectedHorizontal,
|
|
'&::after': {
|
|
borderBottomWidth: colorActiveBarHeight,
|
|
borderBottomColor: colorItemTextSelectedHorizontal
|
|
}
|
|
}
|
|
}
|
|
}),
|
|
// ================== Inline & Vertical ===================
|
|
//
|
|
[`&${componentCls}-root`]: {
|
|
[`&${componentCls}-inline, &${componentCls}-vertical`]: {
|
|
borderInlineEnd: `${colorActiveBarBorderSize}px ${lineType} ${colorSplit}`
|
|
}
|
|
},
|
|
// ======================== Inline ========================
|
|
[`&${componentCls}-inline`]: {
|
|
// Sub
|
|
[`${componentCls}-sub${componentCls}-inline`]: {
|
|
background: colorSubItemBg
|
|
},
|
|
// Item
|
|
[`${componentCls}-item, ${componentCls}-submenu-title`]: colorActiveBarBorderSize && colorActiveBarWidth ? {
|
|
width: `calc(100% + ${colorActiveBarBorderSize}px)`
|
|
} : {},
|
|
[`${componentCls}-item`]: {
|
|
position: 'relative',
|
|
'&::after': {
|
|
position: 'absolute',
|
|
insetBlock: 0,
|
|
insetInlineEnd: 0,
|
|
borderInlineEnd: `${colorActiveBarWidth}px solid ${colorItemTextSelected}`,
|
|
transform: 'scaleY(0.0001)',
|
|
opacity: 0,
|
|
transition: [`transform ${motionDurationMid} ${motionEaseOut}`, `opacity ${motionDurationMid} ${motionEaseOut}`].join(','),
|
|
content: '""'
|
|
},
|
|
// Danger
|
|
[`&${componentCls}-item-danger`]: {
|
|
'&::after': {
|
|
borderInlineEndColor: colorDangerItemTextSelected
|
|
}
|
|
}
|
|
},
|
|
[`${componentCls}-selected, ${componentCls}-item-selected`]: {
|
|
'&::after': {
|
|
transform: 'scaleY(1)',
|
|
opacity: 1,
|
|
transition: [`transform ${motionDurationMid} ${motionEaseInOut}`, `opacity ${motionDurationMid} ${motionEaseInOut}`].join(',')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
export default getThemeStyle; |