How to use the @times-components/styleguide.fontSizes.headline function in @times-components/styleguide

import { Text, View } from "react-native";
import styled from "styled-components";
import {
  breakpoints,
  colours,
  fonts,
  fontSizes
} from "@times-components/styleguide";

export const HeadlineContainer = styled(Text)`
  font-size: ${fontSizes.headline}px;
  color: ${colours.functional.brandColour};
  margin-bottom: 8px;
  font-family: "${fonts.headline}";
  font-weight: 400;
  line-height: 30px;

  @media (min-width: ${breakpoints.medium}px) {
    font-size: ${fontSizes.articleHeadline}px;
    line-height: 45px;
  }
`;

export const LabelContainer = styled(View)`
  @media (min-width: ${breakpoints.wide}px) {
    margin-top: 0px;
  }

fonts,
  fontSizes
} from "@times-components/styleguide";

const PullQuoteContent = styled(Text)`
  color: ${colours.functional.primary};
  font-family: "${fonts.headlineRegular}";
  font-size: ${fontSizes.pageComponentHeadline}px;
  line-height: 30px;
  
  cite {
    font-style: normal;
  }

  @media (min-width: ${breakpoints.medium}px) {
    font-size: ${fontSizes.headline}px;
    line-height: 35px;
  }
`;

export default PullQuoteContent;

import { StyleSheet } from "react-native";
import { fontSizes, spacing } from "@times-components/styleguide";
import globalStyle from "../shared";
import sharedStyles from "./shared";

const appStyles = {
  ...sharedStyles,
  articleHeadLineText: {
    ...sharedStyles.articleHeadLineText,
    fontSize: fontSizes.headline,
    lineHeight: 33,
    marginBottom: spacing(1),
    marginTop: spacing(1)
  },
  articleLabelWrapper: {
    marginBottom: spacing(0),
    marginTop: spacing(2)
  },
  standFirst: {
    ...sharedStyles.standFirst,
    paddingBottom: spacing(2)
  },
  standFirstWithoutFlags: {
    paddingBottom: spacing(2)
  },
  metaContainer: {

import React from "react";
import { Text, StyleSheet } from "react-native";
import PropTypes from "prop-types";
import { colours, fonts, fontSizes } from "@times-components/styleguide";

const styles = StyleSheet.create({
  name: {
    fontFamily: fonts.headline,
    fontSize: fontSizes.headline,
    color: colours.functional.brandColour
  }
});

const AuthorName = ({ name }) => (
  
);

AuthorName.propTypes = {

import { StyleSheet } from "react-native";
import { fontSizes, spacing } from "@times-components/styleguide";
import globalStyle from "../shared";
import sharedStyles from "./shared";

const nativeStyles = {
  ...sharedStyles,
  articleHeadLineText: {
    ...sharedStyles.articleHeadLineText,
    fontSize: fontSizes.headline,
    fontWeight: "400",
    lineHeight: 33,
    marginBottom: spacing(2),
    marginTop: spacing(1)
  },
  articleLabelWrapper: {
    marginBottom: spacing(0),
    marginTop: spacing(2)
  },
  standFirst: {
    ...sharedStyles.standFirst,
    lineHeight: 28,
    marginTop: -2,
    paddingBottom: 12
  },
  standFirstWithoutFlags: {

base: () => `
    font-family: ${fonts.headline};
    font-size: ${fontSizes.headline}px;
    color: ${colours.functional.brandColour};
  `,
  mediumUp: () => `font-size: ${fontSizes.articleHeadline}px;`

import { StyleSheet } from "react-native";
import { fontSizes, spacing } from "@times-components/styleguide";
import globalStyle from "../shared";
import sharedStyles from "./shared";

const androidStyles = {
  ...sharedStyles,
  articleHeadLineText: {
    ...sharedStyles.articleHeadLineText,
    fontSize: fontSizes.headline,
    fontWeight: "400",
    lineHeight: 33,
    marginBottom: spacing(2),
    marginTop: spacing(1)
  },
  articleLabelWrapper: {
    marginBottom: spacing(0),
    marginTop: spacing(2)
  },
  standFirst: {
    ...sharedStyles.standFirst,
    lineHeight: 28,
    marginTop: -2,
    paddingBottom: 12
  },
  standFirstWithoutFlags: {