119 lines
4.5 KiB
JavaScript
119 lines
4.5 KiB
JavaScript
|
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
|
||
|
|
};
|
||
|
|
}
|
||
|
|
export const self = vars => {
|
||
|
|
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'));
|
||
|
|
};
|
||
|
|
const menuLight = createTheme({
|
||
|
|
name: 'Menu',
|
||
|
|
common: commonLight,
|
||
|
|
peers: {
|
||
|
|
Tooltip: tooltipLight,
|
||
|
|
Dropdown: dropdownLight
|
||
|
|
},
|
||
|
|
self
|
||
|
|
});
|
||
|
|
export default menuLight;
|