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

const notificationSpace = {
  iconMarginTop: `${space.xxsmall}px`,
  iconMarginRight: `${space.medium}px`,
  padding: `${space.medium}px`,
  titleMarginBottom: `${space.xsmall}px`,
};

const notificationFontSizes = {
  title: `${fontSizes.large}px`,
  content: `${fontSizes.medium}px`,
};

const notificationFontWeights = {
  title: fontWeights.semiBold,
  content: fontWeights.regular,
};

const notificationLineHeights = {
  title: `${lineHeights.large}px`,
  content: `${lineHeights.medium}px`,
  icon: `${lineHeights.large}px`,
};

const notificationRadii = {
  default: `${radii.medium}px`,
};

const notificationShadows = {
  default: shadows.default,
};

const notificationColors = {
  title: systemPalette.text,
  content: systemPalette.bodyText,
  bg: systemPalette.defaultLightBackground,
};

export {
  notificationSpace,
  notificationFontSizes,
  notificationFontWeights,
  notificationLineHeights,
  notificationRadii,
  notificationColors,
  notificationShadows,
};