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

import { borderWidths, radii } from '../global/borders';
import { space } from '../global/space';

const cardColors = {
  border: systemPalette.defaultBorder,
  background: systemPalette.defaultLightBackground,
  headerBasicBackground: systemPalette.defaultLightBackground,
  headerInfoBackground: systemPalette.infoHeaderBackground,
  headerGreyBackground: systemPalette.primaryHeaderBackground,
  headerPrimaryBackground: systemPalette.primary,
  headerDefaultText: systemPalette.text,
  headerInfoText: systemPalette.text,
  headerLightText: systemPalette.lightText,
  contentText: systemPalette.bodyText,
  contentBorder: systemPalette.defaultBorder,
  contentTextExtra: systemPalette.subduedText,
};

const cardBorderWidths = {
  default: `${borderWidths.base}px`,
};

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

const cardSpace = {
  headerMediumPadding: `${space.medium}px`,
  headerSmallPadding: `${space.small}px`,
  headerMargin: `-${borderWidths.base}px -${borderWidths.base}px 0`,
  contentMediumPadding: `${space.medium}px`,
  contentSmallPadding: `${space.small}px`,
  imgMargin: `-${borderWidths.base}px -${borderWidths.base}px 0`,
};

const cardFontWeights = {
  header: fontWeights.regular,
  content: fontWeights.regular,
};

const cardFontSizes = {
  header: `${fontSizes.large}px`,
  content: `${fontSizes.medium}px`,
  contentExtra: `${fontSizes.small}px`,
};

const cardLineHeights = {
  header: `${lineHeights.large}px`,
  content: `${lineHeights.medium}px`,
  contentExtra: `${lineHeights.small}px`,
};

export {
  cardColors,
  cardBorderWidths,
  cardRadii,
  cardSpace,
  cardFontWeights,
  cardFontSizes,
  cardLineHeights,
};