How to use the @times-components/styleguide.fonts.supporting function in @times-components/styleguide

/* eslint-disable react/prop-types */

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

const styles = {
  color: colours.section.comment,
  fontFamily: fonts.supporting,
  fontSize: fontSizes.cardMetaMobile,
  letterSpacing: 0.6,
  lineHeight: 12
};

const authorsAST = require("./fixtures/authors.json");

const preventDefaultedAction = decorateAction =>
  decorateAction([
    ([e, ...args]) => {
      e.preventDefault();
      return ["[SyntheticEvent (storybook prevented default)]", ...args];
    }
  ]);

const ComponentWrapper = ({ children }) => (

/* eslint-disable react/prop-types */
import React from "react";
import { StyleSheet, Text } from "react-native";
import { colours, fonts, fontSizes } from "@times-components/styleguide";
import DatePublication from "./src/date-publication";

const styles = StyleSheet.create({
  text: {
    color: colours.functional.secondary,
    fontFamily: fonts.supporting,
    fontSize: fontSizes.cardMeta,
    lineHeight: 15
  }
});

const timezones = [
  "2017-07-01T04:32:00.000Z",
  "2017-01-01T04:32:00.000Z",
  "2017-07-01T14:32:00.000Z",
  "2017-01-01T14:32:00.000Z"
];

export default {
  children: [
    {
      component: ({ select }) => (

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

const smallBreakpointStyles = {
  bold: {
    color: colours.functional.brandColour,
    fontWeight: "bold"
  },
  byline: {
    color: colours.functional.secondary,
    fontFamily: fonts.supporting,
    fontSize: 12,
    marginTop: spacing(2)
  },
  container: {
    paddingBottom: spacing(2)
  },
  paragraph: {
    color: colours.functional.secondary,
    fontFamily: fonts.bodyRegular,
    fontSize: 14,
    lineHeight: 20
  },
  title: {
    color: colours.functional.brandColour,
    fontFamily: fonts.headline,
    fontSize: fontSizes.smallHeadline,

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

const styles = {
  title: {
    fontFamily: fonts.supporting,
    fontSize: fontSizes.cardMetaMobile,
    fontWeight: "400",
    letterSpacing: 1.2,
    marginBottom: 0
  }
};

export default styles;

lineHeight: 25
  },
  metaContainer: {
    ...sharedStyles.metaContainer,
    marginTop: spacing(1)
  },
  header: {
    ...sharedStyles.header,
    marginBottom: 0
  },
  label: {
    marginBottom: 0
  },
  bylineOpinion: {
    color: colours.section.comment,
    fontFamily: fonts.supporting,
    fontSize: fontSizes.cardMetaMobile,
    letterSpacing: 0.6,
    lineHeight: 12,
    textTransform: "uppercase",
    marginBottom: spacing(1)
  }
};

const styles = StyleSheet.create({
  ...nativeStyles
});

export default styles;

flex: 1,
    justifyContent: "center",
    left: 0,
    position: "absolute",
    top: 0
  },
  resetButton: {
    backgroundColor: colours.functional.action,
    borderRadius: 2,
    flexDirection: "row",
    paddingHorizontal: 16,
    paddingVertical: 12
  },
  resetText: {
    color: "white",
    fontFamily: fonts.supporting,
    fontSize: fontSizes.cardMeta,
    letterSpacing: 1,
    lineHeight: 15,
    paddingLeft: spacing(1),
    position: "relative",
    top: 3
  }
});

const VideoError = ({ poster, width, height, onReset }) => (

import { colours, fonts, fontSizes } from "@times-components/styleguide";
import withPageState from "./pagination-wrapper";
import { PreviousPageIcon, NextPageIcon } from "./pagination-icons";
import Results from "./results";
import PaginationBorder from "./pagination-border";
import PaginationContainer from "./pagination-container";

const styles = StyleSheet.create({
  absolute: {
    left: 0,
    position: "absolute",
    right: 0
  },
  arrow: {
    color: colours.functional.action,
    fontFamily: fonts.supporting,
    fontSize: fontSizes.meta
  }
});

const Pagination = ({
  count,
  generatePageLink,
  onNext,
  onPrev,
  page,
  pageSize,
  hideResults
}) => {
  const finalResult = Math.min(count, page * pageSize);
  const startResult = Math.min(finalResult, (page - 1) * pageSize + 1);
  const message = `Showing ${startResult} - ${finalResult} of ${count} results`;

import AuthorHeadLoading from "./author-head-loading";

const styles = StyleSheet.create({
  twitter: {
    paddingTop: 8,
    paddingBottom: 8,
    flexDirection: "row",
    ...Platform.select({
      android: {
        alignItems: "center"
      }
    })
  },
  twitterLink: {
    fontSize: fontSizes.tertiary,
    fontFamily: fonts.supporting,
    color: colours.functional.action,
    textDecorationLine: "none",
    paddingLeft: spacing(1)
  }
});

class AuthorHead extends Component {
  shouldComponentUpdate(nextProps) {
    return this.props.isLoading !== nextProps.isLoading;
  }

  render() {
    const {
      bio,
      isLoading,
      name,

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

const styles = {
  bylineOpinion: {
    color: colours.section.comment,
    fontFamily: fonts.supporting,
    fontSize: fontSizes.cardMetaMobile,
    letterSpacing: 0.6,
    lineHeight: 12,
    marginTop: spacing(3),
    textTransform: "uppercase"
  },
  container: {
    alignItems: "center",
    paddingTop: spacing(4),
    paddingBottom: spacing(2)
  },
  headline: {
    color: colours.functional.brandColour,
    fontFamily: fonts.headline,
    fontSize: fontSizes.tileLeadHeadline,
    lineHeight: 35,

textAlign: "center",
    marginBottom: spacing(3),
    opacity: 0.8,
    fontSize: fontSizes.meta,
    fontFamily: fonts.body
  },
  resetButton: {
    flexDirection: "row",
    backgroundColor: colours.functional.action,
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 2
  },
  resetText: {
    color: "white",
    fontFamily: fonts.supporting,
    fontSize: fontSizes.cardMeta,
    lineHeight: 15,
    position: "relative",
    top: 3,
    letterSpacing: 1,
    paddingLeft: spacing(1)
  }
});

const VideoError = ({ poster, width, height, onReset }) => (