const em = (num: number) => `${num}em`;
const px = (num: number) => `${num}px`; // TODO: pros and cons of using em and px

export const spacing = {
  large: em(1.5),
  big: em(1),
  medium: em(0.5),
  small: em(0.25),

  secondary: em(0.85)
};

export const variables = {
  padding: spacing.medium,
  margin: spacing.medium,
  radiusSquare: spacing.medium,
  radiusRound: spacing.big
};

const purple = "#592EA0";
export const colors = {
  lightPurple: "#9c81c6",
  purple,
  lightGray: "#f8f9fc",
  gray: "#eaeef6",
  darkGray: "#928fb0",
  teritary: "#a7adc7",
  white: "white",

  primary: purple
};

export const borders = {
  small: px(1),
  medium: px(2)
};

export const typings = {
  small: em(0.9),
  normal: em(1),
  big: em(1.1)
};