119 lines
4.5 KiB
JavaScript
Raw Normal View History

2024-01-29 09:26:07 +08:00
import { changeColor } from 'seemly';
import { tooltipLight } from "../../tooltip/styles/index.mjs";
import { dropdownLight } from "../../dropdown/styles/index.mjs";
import { commonLight } from "../../_styles/common/index.mjs";
import { createTheme } from "../../_mixins/use-theme.mjs";
export function createPartialInvertedVars(color, activeItemColor, activeTextColor, groupTextColor) {
return {
itemColorHoverInverted: '#0000',
itemColorActiveInverted: activeItemColor,
itemColorActiveHoverInverted: activeItemColor,
itemColorActiveCollapsedInverted: activeItemColor,
itemTextColorInverted: color,
itemTextColorHoverInverted: activeTextColor,
itemTextColorChildActiveInverted: activeTextColor,
itemTextColorChildActiveHoverInverted: activeTextColor,
itemTextColorActiveInverted: activeTextColor,
itemTextColorActiveHoverInverted: activeTextColor,
itemTextColorHorizontalInverted: color,
itemTextColorHoverHorizontalInverted: activeTextColor,
itemTextColorChildActiveHorizontalInverted: activeTextColor,
itemTextColorChildActiveHoverHorizontalInverted: activeTextColor,
itemTextColorActiveHorizontalInverted: activeTextColor,
itemTextColorActiveHoverHorizontalInverted: activeTextColor,
itemIconColorInverted: color,
itemIconColorHoverInverted: activeTextColor,
itemIconColorActiveInverted: activeTextColor,
itemIconColorActiveHoverInverted: activeTextColor,
itemIconColorChildActiveInverted: activeTextColor,
itemIconColorChildActiveHoverInverted: activeTextColor,
itemIconColorCollapsedInverted: color,
itemIconColorHorizontalInverted: color,
itemIconColorHoverHorizontalInverted: activeTextColor,
itemIconColorActiveHorizontalInverted: activeTextColor,
itemIconColorActiveHoverHorizontalInverted: activeTextColor,
itemIconColorChildActiveHorizontalInverted: activeTextColor,
itemIconColorChildActiveHoverHorizontalInverted: activeTextColor,
arrowColorInverted: color,
arrowColorHoverInverted: activeTextColor,
arrowColorActiveInverted: activeTextColor,
arrowColorActiveHoverInverted: activeTextColor,
arrowColorChildActiveInverted: activeTextColor,
arrowColorChildActiveHoverInverted: activeTextColor,
groupTextColorInverted: groupTextColor
};
}
2024-08-02 18:19:39 +08:00
export function self(vars) {
2024-01-29 09:26:07 +08:00
const {
borderRadius,
textColor3,
primaryColor,
textColor2,
textColor1,
fontSize,
dividerColor,
hoverColor,
primaryColorHover
} = vars;
return Object.assign({
borderRadius,
color: '#0000',
groupTextColor: textColor3,
itemColorHover: hoverColor,
itemColorActive: changeColor(primaryColor, {
alpha: 0.1
}),
itemColorActiveHover: changeColor(primaryColor, {
alpha: 0.1
}),
itemColorActiveCollapsed: changeColor(primaryColor, {
alpha: 0.1
}),
itemTextColor: textColor2,
itemTextColorHover: textColor2,
itemTextColorActive: primaryColor,
itemTextColorActiveHover: primaryColor,
itemTextColorChildActive: primaryColor,
itemTextColorChildActiveHover: primaryColor,
itemTextColorHorizontal: textColor2,
itemTextColorHoverHorizontal: primaryColorHover,
itemTextColorActiveHorizontal: primaryColor,
itemTextColorActiveHoverHorizontal: primaryColor,
itemTextColorChildActiveHorizontal: primaryColor,
itemTextColorChildActiveHoverHorizontal: primaryColor,
itemIconColor: textColor1,
itemIconColorHover: textColor1,
itemIconColorActive: primaryColor,
itemIconColorActiveHover: primaryColor,
itemIconColorChildActive: primaryColor,
itemIconColorChildActiveHover: primaryColor,
itemIconColorCollapsed: textColor1,
itemIconColorHorizontal: textColor1,
itemIconColorHoverHorizontal: primaryColorHover,
itemIconColorActiveHorizontal: primaryColor,
itemIconColorActiveHoverHorizontal: primaryColor,
itemIconColorChildActiveHorizontal: primaryColor,
itemIconColorChildActiveHoverHorizontal: primaryColor,
itemHeight: '42px',
arrowColor: textColor2,
arrowColorHover: textColor2,
arrowColorActive: primaryColor,
arrowColorActiveHover: primaryColor,
arrowColorChildActive: primaryColor,
arrowColorChildActiveHover: primaryColor,
colorInverted: '#0000',
borderColorHorizontal: '#0000',
fontSize,
dividerColor
}, createPartialInvertedVars('#BBB', primaryColor, '#FFF', '#AAA'));
2024-08-02 18:19:39 +08:00
}
2024-01-29 09:26:07 +08:00
const menuLight = createTheme({
name: 'Menu',
common: commonLight,
peers: {
Tooltip: tooltipLight,
Dropdown: dropdownLight
},
self
});
export default menuLight;