How to use the @times-components/styleguide.globalSpacingStyles.tabletHeadline function in @times-components/styleguide

import {
  fonts,
  spacing,
  editionBreakpoints,
  globalSpacingStyles
} from "@times-components/styleguide";

const mediumBreakpointStyles = {
  container: {
    flex: 1,
    flexDirection: "row",
    paddingHorizontal: spacing(2),
    paddingVertical: spacing(3)
  },
  headline: {
    ...globalSpacingStyles.tabletHeadline,
    fontFamily: fonts.headline,
    fontSize: 30,
    lineHeight: 30
  },
  imageContainer: {
    flex: 0.44
  },
  summaryContainer: {
    flex: 0.56,
    paddingRight: spacing(4)
  },
  summary: {
    ...globalSpacingStyles.tabletTeaser
  }
};

import {
  spacing,
  fonts,
  globalSpacingStyles
} from "@times-components/styleguide";

const mediumBreakpointStyles = {
  container: {
    flex: 1,
    flexDirection: "row",
    marginHorizontal: spacing(4),
    paddingHorizontal: spacing(2),
    paddingVertical: spacing(3)
  },
  headline: {
    ...globalSpacingStyles.tabletHeadline,
    fontFamily: fonts.headline,
    fontSize: 30,
    lineHeight: 30
  },
  summaryContainer: {
    flex: 1,
    paddingRight: spacing(4)
  },
  imageContainer: {
    flex: 1
  },
  summary: {
    ...globalSpacingStyles.tabletTeaser
  }
};

export default breakpoint => ({
  container: {
    flex: 1,
    paddingVertical: spacing(3),
    paddingHorizontal: spacing(2)
  },
  headline: {
    ...globalSpacingStyles.tabletHeadline,
    fontFamily: fonts.headline,
    fontSize: fontSizeResolver[breakpoint],
    lineHeight: fontSizeResolver[breakpoint]
  },
  imageContainer: {
    marginBottom: spacing(2),
    width: "100%"
  },
  summary: {
    ...globalSpacingStyles.tabletTeaser
  }
});

export default breakpoint => ({
  container: {
    paddingHorizontal: spacing(2),
    paddingTop: spacing(2),
    paddingBottom: spacing(4)
  },
  headline: {
    ...globalSpacingStyles.tabletHeadline,
    fontFamily: fonts.headline,
    fontSize: fontSizeResolver[breakpoint],
    lineHeight: fontSizeResolver[breakpoint]
  },
  summary: {
    ...globalSpacingStyles.tabletTeaser
  }
});

const styles = breakpoint => ({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: spacing(2),
    paddingRight: keylinePadding[breakpoint]
  },
  headline: {
    ...globalSpacingStyles.tabletHeadline,
    color: colours.functional.brandColour,
    fontFamily: fonts.headline,
    fontSize: headlineFontSizeResolver[breakpoint],
    lineHeight: headlineFontSizeResolver[breakpoint],
    textAlign: "center",
    paddingBottom: spacing(2),
    paddingTop: spacing(1)
  },
  imageContainer: {
    overflow: "hidden",
    width: 97,
    marginBottom: spacing(1)
  },
  strapline: {
    color: colours.functional.secondary,
    fontFamily: fonts.bodyRegular,

import {
  fonts,
  spacing,
  globalSpacingStyles
} from "@times-components/styleguide";

const styles = {
  container: {
    flex: 1,
    paddingVertical: spacing(3),
    paddingHorizontal: spacing(2)
  },
  headline: {
    ...globalSpacingStyles.tabletHeadline,
    fontFamily: fonts.headline,
    fontSize: 20,
    lineHeight: 20
  },
  summary: {
    ...globalSpacingStyles.tabletTeaser
  }
};

export default styles;

},
  customStarPosition: {
    position: "relative",
    bottom: spacing(2),
    marginBottom: spacing(-3)
  }
};

const mediumBreakpointStyles = {
  container: {
    ...defaultStyles.container,
    paddingHorizontal: spacing(2),
    paddingVertical: spacing(3)
  },
  headline: {
    ...globalSpacingStyles.tabletHeadline,
    fontFamily: fonts.headline,
    fontSize: 20,
    lineHeight: 20
  },
  imageContainer: {
    overflow: "hidden",
    width: 97
  }
};

const wideBreakpointStyles = {
  ...mediumBreakpointStyles,
  container: {
    ...defaultStyles.container,
    paddingHorizontal: spacing(2),
    paddingVertical: spacing(2)

export default breakpoint => ({
  container: {
    flex: 1,
    flexDirection: "row",
    paddingHorizontal: spacing(2),
    paddingVertical: spacing(3)
  },
  headline: {
    ...globalSpacingStyles.tabletHeadline,
    fontFamily: fonts.headline,
    fontSize: fontSizeResolver[breakpoint],
    lineHeight: fontSizeResolver[breakpoint]
  },
  summaryContainer: {
    flex: 1,
    width: "41%",
    paddingRight: spacing(4)
  },
  imageContainer: {
    width: "59%"
  },
  summary: {
    ...globalSpacingStyles.tabletTeaser
  }
});

export default breakpoint => ({
  container: {
    flex: 1,
    paddingVertical: spacing(3),
    paddingHorizontal: spacing(2)
  },
  headline: {
    ...globalSpacingStyles.tabletHeadline,
    fontFamily: fonts.headline,
    fontSize: fontSizeResolver[breakpoint],
    lineHeight: fontSizeResolver[breakpoint]
  },
  summary: {
    ...globalSpacingStyles.tabletTeaser
  }
});

import {
  fonts,
  spacing,
  editionBreakpoints,
  globalSpacingStyles
} from "@times-components/styleguide";

const sharedStyles = {
  container: {
    flex: 1
  },
  headline: {
    ...globalSpacingStyles.tabletHeadline,
    fontFamily: fonts.headline
  }
};

const smallBreakpointStyles = {
  container: {
    ...sharedStyles.container,
    padding: spacing(2),
    paddingBottom: spacing(4)
  },
  headline: {
    ...sharedStyles.headline,
    fontSize: 25,
    lineHeight: 25,
    marginBottom: spacing(1)
  },