How to use the @project-r/styleguide.fontStyles.sansSerifRegular21 function in @project-r/styleguide

import withT from '../../lib/withT'

import { GENERAL_FEEDBACK_DISCUSSION_ID } from '../../lib/constants'

import {
  CommentTeaser,
  Loader,
  fontStyles,
  linkRule
} from '@project-r/styleguide'

import CommentLink from '../Discussion/CommentLink'

const styles = {
  button: css({
    ...fontStyles.sansSerifRegular21,
    outline: 'none',
    WebkitAppearance: 'none',
    background: 'transparent',
    border: 'none',
    cursor: 'pointer',
    padding: 0,
    margin: '0 auto 0',
    display: 'block'
  })
}

const LatestComments = ({ t, data, fetchMore }) => {
  return (

container: css({
    paddingTop: 0,
    paddingBottom: 120
  }),
  results: css({
    paddingTop: 5
  }),
  countLoaded: css({
    borderTop: `1px solid ${colors.text}`,
    display: 'flex',
    justifyContent: 'space-between',
    padding: '15px 0',
    textAlign: 'left',
    ...fontStyles.sansSerifRegular16,
    [mediaQueries.mUp]: {
      ...fontStyles.sansSerifRegular21
    }
  }),
  button: css({
    outline: 'none',
    WebkitAppearance: 'none',
    background: 'transparent',
    border: 'none',
    cursor: 'pointer',
    padding: 0
  })
}

const ResultsList = ({ nodes }) => {
  const nodeType = nodes[0].entity.__typename

  return (

marginBottom: 20,
    paddingTop: 10,
    [mediaQueries.mUp]: {
      paddingTop: 20
    },
    display: 'flex',
    justifyContent: 'space-between',
    [mediaQueries.mUp]: {
      fontSize: 28,
      lineHeight: '42px'
    }
  }),
  sectionCompact: css({
    ...fontStyles.sansSerifRegular16,
    [mediaQueries.mUp]: {
      ...fontStyles.sansSerifRegular21
    }
  }),
  sectionsBlock: css({
    marginTop: 0,
    marginBottom: 15,
    display: 'inline-block',
    maxWidth: 190,
    [mediaQueries.mUp]: {
      maxWidth: 230
    }
  }),
  section: css({
    padding: '0 10px',
    [mediaQueries.mUp]: {
      padding: '0 25px'
    },

width: 280,
      paddingTop: SPACE * 2
    }
  }),
  whiteOnBlack: css({
    textRendering: 'optimizeLegibility',
    WebkitFontSmoothing: 'antialiased',
    '& ::selection': {
      color: '#000',
      backgroundColor: '#fff'
    }
  }),
  message: css({
    color: '#fff',
    textAlign: 'center',
    ...fontStyles.sansSerifRegular21,
    padding: 10,
    marginTop: 40,
    '& a': {
      color: '#fff',
      textDecorationSkip: 'ink'
    }
  })
}

export default withRouter(({ router }) => {
  const meta = {
    title: 'Republik',
    description: 'Bald wieder verfügbar.',
    image: `${CDN_FRONTEND_BASE_URL}/static/social-media/logo.png`,
    url: `${PUBLIC_BASE_URL}${router.pathname}`
  }

backgroundColor: '#fff',
    color: colors.text
  }),
  unpublished: css({
    color: colors.negative.lightText
  }),
  title: css({
    ...fontStyles.serifTitle26,
    [mediaQueries.mUp]: {
      ...fontStyles.serifTitle38
    }
  }),
  date: css({
    ...fontStyles.sansSerifRegular15,
    [mediaQueries.mUp]: {
      ...fontStyles.sansSerifRegular21
    }
  })
}

const Title = ({ children }) =&gt; <h2>{children}</h2>

const LinkContent = ({ episode, index, t }) =&gt; {
  const label = episode &amp;&amp; episode.label
  const publishDate = episode &amp;&amp; episode.publishDate
  return (
    
      
        {label || t('article/series/episode', { count: romanize(index + 1) })}
      
      <title>{episode.title}</title>
      {!!publishDate &amp;&amp; (

const styles = {
  form: css({
    borderTop: '1px solid white'
  }),
  textArea: css({
    width: '100%',
    minWidth: '100%',
    maxWidth: '100%',
    minHeight: '60px',
    padding: 0,
    background: 'transparent',
    border: 'none',
    outline: 'none',
    boxSizing: 'border-box',
    ...fontStyles.sansSerifRegular21,
    color: colors.text
  }),
  textAreaEmpty: css({
    color: colors.lightText,
    '::-webkit-input-placeholder': {
      color: colors.lightText
    }
  }),
  maxLength: css({
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'flex-end',
    marginBottom: '-10px',
    padding: '0 12px'
  }),
  remaining: css({

import React, { Component } from 'react'

import { css } from 'glamor'
import {
  fontStyles,
  mediaQueries,
  Editorial,
  colors
} from '@project-r/styleguide'

const styles = {
  p: css({
    ...fontStyles.sansSerifRegular16,
    [mediaQueries.mUp]: {
      ...fontStyles.sansSerifRegular21
    },
    color: colors.negative.text,
    margin: 0
  })
}

export const P = ({ children, ...props }) => (
  <p>
    {children}
  </p>
)

export const A = ({ children, ...props }) =&gt; (
  
    {children}

}
  }),
  logoContainer: css({
    textAlign: 'center',
    paddingTop: 25,
    width: 200,
    marginLeft: 'auto',
    marginRight: 'auto',
    [mediaQueries.mUp]: {
      width: 280,
      paddingTop: SPACE * 2
    }
  }),
  message: css({
    textAlign: 'center',
    ...fontStyles.sansSerifRegular21,
    padding: 10,
    marginTop: 40,
    '& a': {
      color: colors.color,
      textDecoration: 'underline',
      textDecorationSkip: 'ink'
    }
  })
}

export default withRouter(({ router }) => {
  const meta = {
    title: 'Republik',
    description: CURTAIN_MESSAGE,
    image: `${CDN_FRONTEND_BASE_URL}/static/social-media/logo.png`,
    ...parseJSONObject(CURTAIN_META),

'&:hover': {
          background: colors.secondaryBg,
          margin: '0 -15px',
          padding: '10px 15px',
          width: 'calc(100% + 30px)'
        },
        '&:hover + &': {
          borderColor: 'transparent'
        },
        '& + &:hover': {
          borderColor: 'transparent'
        }
      },
      ...fontStyles.sansSerifRegular18,
      [mediaQueries.mUp]: {
        ...fontStyles.sansSerifRegular21
      }
    })
  )
}

const ActiveDiscussionItem = ({
  discussion,
  onClick,
  label,
  selected,
  path
}) => (

const PMedium = props => (
  <div>
    {props.children}
  </div>
)