let colorInfo = {
  text: "#000000",
  textInverse: "#FFFFFF",
  textPlaceholder: "#EEEEEE",
  textAlert: "#FF0000",
  textGray: "#B0B0B0",
  textDisabled: "#AAAAAA",

  border: "#B2B2B2",

  modalShadow: "#000000",
  modalBackground: "#FFFFFF",

  inputBackground: "#FFFFFF",

  buttonBackground: "#3498DB",
  buttonBackgroundHover: "#3CB0FD",
  buttonBackgroundActive: "#1A72AC",
  buttonDisabledBackground: "#E0E0E0",

  headerBorder: "#B2B2B2",
  headerButtonBackground: "#FAFAFA",
  headerButtonBackgroundHover: "#DADADA",
  headerButtonBackgroundActive: "#AAAAAA",

  checkboxUnchecked: "#A0A0A0",
  checkboxUncheckedHover: "#808080",
  checkmark: "#FFFFFF",

  listBackground: "#FFFFFF",
  listBackgroundActive: "#E7E5E5",

  dropdownBackground: "#FFFFFF",
}

Object.assign(colorInfo, {
  panelButtonBackground: colorInfo.headerButtonBackground,
  panelButtonBackgroundHover: colorInfo.headerButtonBackgroundHover,
  panelButtonBackgroundActive: colorInfo.headerButtonBackgroundActive,
  panelDisabledButtonBackground: colorInfo.buttonDisabledBackground,

  listBackgroundHover: colorInfo.headerButtonBackgroundHover,
  listBorder: colorInfo.headerBorder,

  dropdownBorder: colorInfo.headerBorder,
  dropdownBackground: colorInfo.listBackground,
  dropdownBackgroundActive: colorInfo.listBackgroundActive,
  dropdownBackgroundHover: colorInfo.headerButtonBackgroundHover,
})

const sizeInfo = {
  imageDefaultMargin: 5,
  iconDefaultMargin: 10,

  headerHeight: 40,
  headerBorderWidth: 1,
  headerPaddingLeft: 10,
  headerTextOffset: 2,
  headerButtonMargin: 8,

  footerTextMargin: "5px 0px 5px 10px",

  buttonHeight: 40,
  buttonPadding: "0 15px 0 15px",
  buttonWidth: 125,
  buttonWideWidth: 225,

  checkboxSize: 25,
  checkmarkBorder: "0 3px 3px 0",

  panelButton: 200,
  panelButtonIcon: 170,
  panelButtonIconMargin: 0,
  panelButtonIconOffset: -10,
  panelButtonBorderRadius: 25,
  panelButtonBorderWidth: 2,
  panelButtonTextOffset: 120,
  panelButtonSpacing: 30,

  formBoxRadius: 5,
  formColumnSpacing: 20,
  formRowSpacing: 20,
  formBoundIcon: 30,
  formBoundIconMargin: 0,

  formButtonIcon: 24,
  formButtonIconMargin: 0,
  formButtonIconBorderRadius: 4,
  formButtonIconPadding: 3,

  listBorderWidth: 1,
  listTopBottomGap: 10,
  listIcon: 25,
  listIconMargin: "5px 10px 5px 10px",

  dropdownIconSize: 20,
  dropdownItems: 6,
  dropdownBorderWidth: 1,
  dropdownIcon: 25,
  dropdownIconMargin: "5px 10px 5px 10px",

  modalWidth: 450,
  modalShadowWidth: 25,
  modalMessageIcon: 150,

  profileWidth: "65vw",

  inputPadding: 5,
  inputBorderRadius: 5,

  loaderSize: 20,
  loaderSpacing: 5,

  loginLogoWidth: 250,
}

const fontInfo = {
  family: "Hind, sans-serif", // https://fonts.google.com/specimen/Hind?selection.family=Hind
  size: {
    small: "10pt",
    medium: "12pt",
    large: "14pt",
    huge: "26pt",
    header: "18pt",
    footer: "8pt",
  },
  color: {
    normal: colorInfo.text,
    inverse: colorInfo.textInverse,
    alert: colorInfo.textAlert,
    dimmed: colorInfo.textGray,
  },
}

export { colorInfo, sizeInfo, fontInfo }