import { fontSizes, lineHeights, fontWeights } from '../global/typography';
import { space } from '../global/space';
import { systemPalette } from '../global/colors';

const menuColors = {
  background: systemPalette.defaultLightBackground,
  itemActiveBackground: systemPalette.defaultGreyBackground,
  item: systemPalette.text,
  itemDisabled: systemPalette.disabledText,
  itemDanger: systemPalette.danger,
};

const menuSpace = {
  itemPadding: `${space.xsmall}px ${space.medium}px`,
  iconMarginRight: `${space.small}px`,
  rightElementMarginLeft: `${space.xlarge}px`,
};

const menuFontSizes = {
  item: `${fontSizes.medium}px`,
  icon: `${fontSizes.small}px`,
};

const menuFontWeights = {
  item: fontWeights.regular,
  itemActive: fontWeights.semiBold,
};

const menuLineHeights = {
  item: `${lineHeights.medium}px`,
  icon: `${lineHeights.small}px`,
};

export {
  menuColors,
  menuSpace,
  menuFontSizes,
  menuFontWeights,
  menuLineHeights,
};