How to use the @times-components/styleguide.scales.medium function in @times-components/styleguide

test: () => {
      const output = renderComponent(
        
           {}}
            data={articleFixture({
              ...testFixture
            })}
            onAuthorPress={() => {}}
            onCommentGuidelinesPress={() => {}}
            onCommentsPress={() => {}}
            onLinkPress={() => {}}
            onRelatedArticlePress={() => {}}
            onTopicPress={() => {}}
            onTwitterLinkPress={() => {}}
            onVideoPress={() => {}}

export const renderArticle = (data, header = null) => (
  
     {}}
      data={data}
      header={header}
      onAuthorPress={() => {}}
      onCommentGuidelinesPress={() => {}}
      onCommentsPress={() => {}}
      onLinkPress={() => {}}
      onRelatedArticlePress={() => {}}
      onTopicPress={() => {}}
      onTwitterLinkPress={() => {}}
      onVideoPress={() => {}}

const renderArticle = (data, header = null) => (
  
    <article> {}}
      data={data}
      header={header}
      onAuthorPress={() =&gt; {}}
      onCommentGuidelinesPress={() =&gt; {}}
      onCommentsPress={() =&gt; {}}
      onLinkPress={() =&gt; {}}
      onRelatedArticlePress={() =&gt; {}}
      onTopicPress={() =&gt; {}}
      onTwitterLinkPress={() =&gt; {}}
      onVideoPress={() =&gt; {}}
    /&gt;</article>

const sharedStyles = (dropCapFont = "dropCap", scale = scales.medium) => {
  const { colours, fontFactory, spacing } = styleguide({ scale });
  const dropCapMargins = margins(dropCapFont, scale);
  const dropCapFontSize = fontSize(dropCapFont, scale);

  return {
    articleMainContentRow: {
      paddingLeft: spacing(2),
      paddingRight: spacing(2)
    },
    articleMainContentRowTablet: {
      alignSelf: "center",
      width: tabletWidth
    },
    articleTextElement: {
      ...fontFactory({
        font: "body",

component: () => (
         {}}
          delay={3000}
          message="Article link copied"
          scale={scales.medium}
        />
      ),
      name: "MessageBar",

import { scales } from "@times-components/styleguide";

export default {
  makeArticleUrl: ({ slug, shortIdentifier }) =>
    slug && shortIdentifier
      ? `https://www.thetimes.co.uk/article/${slug}-${shortIdentifier}`
      : "",
  makeTopicUrl: ({ slug }) => `/topic/${slug}`,
  theme: {
    scale: scales.medium
  },
  newskit: false,
  user: {
    isLoggedIn: false,
    isMetered: false,
    isMeteredExpired: false,
    isShared: false,
    registrationType: ""
  }
};

const selectScales = select => select("Scale", scales, scales.medium);
const selectSection = select => sections[select("Section", sections, "News")];

const renderParagraphWithScale = ({ select, boolean }, ast) => {
  const scale = select("Scale", scales, scales.medium);
  const section = select("Section", sections, "The Times Magazine");
  const theme = themeFactory(section, "magazinestandard");
  const enableDropcap = boolean && boolean("Enable DropCap", true);

  return (
    
      {renderTree(ast, {
        ...coreRenderers,
        dropCap(key, { value }) {
          return (
            enableDropcap && (

const selectScales = select => select("Scale", scales, scales.medium);
const selectSection = select =>

const selectScales = select => select("Scale", scales, scales.medium);
const selectSection = select =>