How to use the @govuk-react/lib.typography.font function in @govuk-react/lib

import {
  BORDER_WIDTH_FORM_ELEMENT,
  FOCUS_WIDTH,
  FOCUS_WIDTH_RAW,
  MEDIA_QUERIES,
  SPACING_POINTS,
} from '@govuk-react/constants';

const radioSize = SPACING_POINTS[7];
const labelPaddingLeftRight = SPACING_POINTS[3];
// When the default focus width is used on a curved edge it looks visually smaller.
// So for the circular radios we bump the default to make it look visually consistent.
const RADIOS_FOCUS_WIDTH = `${FOCUS_WIDTH_RAW + 1}px`;

const Label = styled('label')(
  typography.font({ size: 19 }),
  {
    display: 'block',
    position: 'relative',
    minHeight: radioSize,
    padding: `0 0 0 ${radioSize}px`,
    clear: 'left',
  },
  ({ inline }) =>
    inline && {
      [MEDIA_QUERIES.LARGESCREEN]: {
        float: 'left',
        clear: 'none',
        marginRight: SPACING_POINTS[4],
      },
    },
  spacing.withWhiteSpace({ marginBottom: 2 })

import Navigation from './atoms/navigation';
import Link from './atoms/link';
import SectionBreak from './atoms/section-break';
import MetaCustom from './atoms/meta-custom';

import MetaContainer from './molecules/meta-container';
import MetaLinks from './molecules/meta-links';
import NavigationLinks from './molecules/navigation-links';

const FooterContainer = styled('footer')(
  {
    borderTop: `1px solid ${FOOTER_BORDER_TOP}`,
    background: `${FOOTER_BACKGROUND}`,
    color: `${FOOTER_TEXT}`,
  },
  typography.font({ size: 16 }),
  spacing.withWhiteSpace({ padding: [{ size: 7, direction: 'top' }, { size: 5, direction: 'bottom' }] })
);

/**
 *
 * ### Usage
 *
 * Simple
 * ```jsx
 * <footer>
 * ```
 *
 * Footer with Copyright information
 * ```jsx
 * // Import self hosted copyright image
 * import crest from './govuk-crest.png';</footer>

// https://github.com/alphagov/govuk-frontend/tree/master/src/components/

import styled from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
import { SECONDARY_TEXT_COLOUR } from 'govuk-colours';
import { SPACING_POINTS } from '@govuk-react/constants';
import { spacing, typography } from '@govuk-react/lib';

const StyledHint = styled('span')(
  typography.font({ size: 19 }),
  {
    display: 'block',
    // NB non-responsive marginBottom here
    marginBottom: SPACING_POINTS[3],
    color: `${SECONDARY_TEXT_COLOUR}`,
  },
  spacing.withWhiteSpace()
);

// NB govuk-frontend has styling adjustments for when hint-text is placed next to some other
// components - we have not tried to replicate that here

/**
 *
 * ### Usage
 *

import styled from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
import { spacing, typography } from '@govuk-react/lib';

// TODO should `LabelText` and `Label` be consolidated?
// TODO add support for differing font sizes, as per govuk-frontend - see:
// https://github.com/alphagov/govuk-frontend/blob/master/src/components/label/_label.scss

const StyledLabelText = styled('span')(
  typography.font({ size: 19 }),
  typography.textColour,
  {
    display: 'block',
    clear: 'none',
    paddingBottom: '2px',
  },
  ({ error }) => ({
    fontWeight: error ? 700 : undefined,
  }),
  spacing.withWhiteSpace({ marginBottom: 0 })
);

/**
 *
 * ### Usage
 *

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

import { shape, spacing, typography } from '@govuk-react/lib';
import { stripUnit } from 'polished';

import { BLACK, FOCUS_COLOUR, LINK_COLOUR, LINK_HOVER_COLOUR, BORDER_COLOUR } from 'govuk-colours';
import { BORDER_WIDTH, FOCUS_WIDTH, SPACING_POINTS } from '@govuk-react/constants';

const CUSTOM_FOCUS_WIDTH = `${stripUnit(FOCUS_WIDTH) + 1}px`;

const StyledDetails = styled('details')(
  typography.font({ size: 19 }),
  typography.textColour,
  spacing.withWhiteSpace({ marginBottom: 6 }),
  {
    display: 'block',
  },
);

const StyledSummary = styled('summary')({
  display: 'inline-block',
  position: 'relative',
  marginBottom: SPACING_POINTS[1],
  paddingLeft: stripUnit(SPACING_POINTS[4]) + stripUnit(BORDER_WIDTH),
  color: LINK_COLOUR,
  cursor: 'pointer',

  ':hover': {

marginLeft: spacingSimple5,
  ':before': {
    content: "'\\2014  '",
    marginLeft: -spacingSimple5,
    paddingRight: spacingSimple1,
  },
  [MEDIA_QUERIES.TABLET]: {
    marginLeft: 0,
    ':before': {
      content: 'none',
    },
  },
});

const StyledHyperLink = styled('a')(
  typography.font({ size: 19 }),
  link.common(),
  link.styleDefault,
  {
    display: 'inline-block',
    paddingTop: spacingSimple2,
    paddingBottom: spacingSimple2,
  },
  ({ selected }) => ({
    color: selected && BLACK,
    textDecoration: selected ? 'none' : undefined,
    [MEDIA_QUERIES.TABLET]: {
      marginRight: spacingSimple1,
      float: 'left',
      textAlign: 'center',
      textDecoration: 'none',
      color: BLACK,

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { spacing, typography } from '@govuk-react/lib';

import List from './atoms/list';
import Panel from './atoms/panel';
import Tab from './atoms/tab';
import Title from './atoms/title';

const TabsContainer = styled('div')(
  typography.font({ size: 19 }),
  typography.textColour,
  spacing.responsiveMargin({ size: 1, direction: 'top' }),
  spacing.responsiveMargin({ size: 6, direction: 'bottom' }),
  spacing.withWhiteSpace(),
);

/**
 *
 * ### Import
 * ```js
 * import Tabs from '@govuk-react/tabs';
 * ```
 *
 * ##### Simple Example
 * ```js
 * class App extends Component {

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import HintText from '@govuk-react/hint-text';
import { FOCUS_COLOUR } from 'govuk-colours';
import { BORDER_WIDTH, BORDER_WIDTH_FORM_ELEMENT, FOCUS_WIDTH, SPACING_POINTS } from '@govuk-react/constants';
import { spacing, typography } from '@govuk-react/lib';

const checkboxSize = SPACING_POINTS[7];
const labelPaddingLeftRight = SPACING_POINTS[3];

const StyledCheckbox = styled('label')(
  typography.font({ size: 19 }),
  {
    display: 'block',
    position: 'relative',
    minHeight: checkboxSize,
    padding: `0 0 0 ${checkboxSize}px`,
    clear: 'left',
  },
  spacing.withWhiteSpace({ marginBottom: 2 })
);

const StyledInput = styled('input')(
  {
    position: 'absolute',
    zIndex: 1,
    top: 0,
    left: 0,

alignItems: 'center',
    boxSizing: 'border-box',
    display: 'flex',
    width: '100%',
  },
  spacing.withWhiteSpace({ marginBottom: 0 })
);

const IconImportantWrapper = styled('div')({
  flex: 'none',
  height: 35,
  marginRight: SPACING_POINTS[3],
  width: 35,
});

const WarningTextWrapper = styled('strong')(typography.font({ size: 19, weight: 'bold' }));

/**
 *
 * ### Usage
 *
 * Simple
 * ```jsx
 * Example
 * ```
 *
 * ### References:
 * - https://govuk-elements.herokuapp.com/typography/#typography-warning-text
 * - https://github.com/alphagov/govuk-frontend/tree/master/src/components/warning-text
 *
 */
const WarningText = ({ children, ...props }) => (

  ({ supportingText }) => typography.font({ size: supportingText ? 16 : 19 }),
  spacing.withWhiteSpace({ marginBottom: 4 })