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

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

import { spacing, typography } from '@govuk-react/lib';
import { HEADING_SIZES, SPACING_POINTS, TYPOGRAPHY_SCALE } from '@govuk-react/constants';

const StyledLegend = styled('legend')(
  spacing.withWhiteSpace(),
  typography.font({ size: 19 }),
  typography.textColour,
  {
    boxSizing: 'border-box',
    display: 'table',
    maxWidth: '100%',
    marginBottom: SPACING_POINTS[2],
    padding: 0,
    // Disabling this as per https://github.com/alphagov/govuk-frontend/issues/1239
    // overflow: 'hidden',
    whiteSpace: 'normal',
  },
  ({ size }) => {
    const actualSize = Number.isNaN(Number(size)) ? HEADING_SIZES[size] : size;

    if (size !== undefined && !actualSize) {
      throw Error(`Unknown size ${size} used for legend.`);
    }

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';

import Link from './atoms/link';

// Constants for chevron sourced from govuk-frontend
const CHEVRON_SIZE = 7;
const CHEVRON_BORDER_WIDTH = 1;
const CHEVRON_BORDER_COLOUR = SECONDARY_TEXT_COLOUR;
const CHEVRON_ALTITUDE_CALCULATED = 5.655;

const BreadcrumbsContainer = styled('div')(
  typography.font({ size: 16 }),
  typography.textColour,
  {
    // margins here are not responsive, hence why they're not specified using withWhiteSpace
    marginTop: SPACING_POINTS[3],
    marginBottom: SPACING_POINTS[2],
  },
  spacing.withWhiteSpace(),
);

const BreadcrumbsList = styled('ol')({
  margin: 0,
  padding: 0,
  listStyleType: 'none',
  display: 'block',
});

const BreadcrumbsListItem = styled('li')({

import PropTypes from 'prop-types';
import {
  HEADING_SIZES,
  LEVEL_SIZE,
  LEVEL_TAG,
  MEDIA_QUERIES,
  TYPOGRAPHY_SCALE,
} from '@govuk-react/constants';
import { spacing, typography } from '@govuk-react/lib';

// use `size` only with string for XLARGE, SMALL etc and number for px size
// so if `size` is a string, we find a numeric size based off `HEADING_SIZES`
// but if `size` is a number we just send through that number

const StyledHeading = styled('h1')(
  typography.textColour,
  ({ size }) => {
    const actualSize = Number.isNaN(Number(size)) ? HEADING_SIZES[size] : size;

    if (!actualSize) {
      throw Error(`Unknown size ${size} used for heading.`);
    }

    return Object.assign(
      {},
      typography.font({ size: actualSize, weight: 'bold' }),
    );
  },
  {
    display: 'block',
    marginTop: 0,
  },

LEVEL_TAG,
  MEDIA_QUERIES,
  TYPOGRAPHY_SCALE,
} from '@govuk-react/constants';
import { spacing, typography } from '@govuk-react/lib';
import { deprecate } from '@govuk-react/hoc';

// use `size` only with string for XLARGE, SMALL etc and number for px size
// so if `size` is a string, we find a numeric size based off `HEADING_SIZES`
// but if `size` is a number we just send through that number

const StyledHeader = styled(({
  level, children, size, ...props
}) =>
  createElement(LEVEL_TAG[level], props, children))(
  typography.textColour,
  ({ level, size = LEVEL_SIZE[level] }) => {
    const actualSize = Number.isNaN(Number(size)) ? HEADING_SIZES[size] : size;

    if (!actualSize) {
      throw Error(`Unknown size ${size} used for header.`);
    }

    return Object.assign(
      {},
      typography.font({ size: actualSize, weight: 'bold' }),
    );
  },
  {
    display: 'block',
    marginTop: 0,
  },

import { SPACING_POINTS } from '@govuk-react/constants';
import { spacing, typography } from '@govuk-react/lib';

import { deprecate } from '@govuk-react/hoc';

import Link from './atoms/link';

// Constants for chevron sourced from govuk-frontend
const CHEVRON_SIZE = 7;
const CHEVRON_BORDER_WIDTH = 1;
const CHEVRON_BORDER_COLOUR = SECONDARY_TEXT_COLOUR;
const CHEVRON_ALTITUDE_CALCULATED = 5.655;

const BreadcrumbContainer = styled('div')(
  typography.font({ size: 16 }),
  typography.textColour,
  {
    // margins here are not responsive, hence why they're not specified using withWhiteSpace
    marginTop: SPACING_POINTS[3],
    marginBottom: SPACING_POINTS[2],
  },
  spacing.withWhiteSpace(),
);

const BreadcrumbList = styled('ol')({
  margin: 0,
  padding: 0,
  listStyleType: 'none',
  display: 'block',
});

const BreadcrumbListItem = styled('li')({

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
 *
 * Simple

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': {
    color: LINK_HOVER_COLOUR,

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

import { BORDER_WIDTH_WIDE, SPACING_POINTS } from '@govuk-react/constants';
import { spacing, typography } from '@govuk-react/lib';
import { BORDER_COLOUR } from 'govuk-colours';

const InsetText = styled('div')(
  typography.font({ size: 19 }),
  typography.textColour,
  {
    padding: SPACING_POINTS[3],
  },
  spacing.withWhiteSpace({ margin: { size: 6, direction: ['top', 'bottom'] } }),
  {
    clear: 'both',
    borderLeft: `${BORDER_WIDTH_WIDE} solid ${BORDER_COLOUR}`,

    ':first-child': {
      marginTop: 0,
    },

    ':only-child,:last-child': {
      marginBottom: 0,
    },
  }

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { MEDIA_QUERIES, SPACING_POINTS } from '@govuk-react/constants';
import { spacing, typography } from '@govuk-react/lib';
import ListItem from '@govuk-react/list-item';

function translateType(type) {
  return { bullet: 'disc', number: 'decimal' }[type] || type;
}

const OrderedList = styled('ol')(
  typography.font({ size: 19 }),
  typography.textColour,
  {
    marginTop: 0,

    '& &': {
      marginTop: SPACING_POINTS[2],
    },
  },
  spacing.withWhiteSpace({ margin: { size: 4, direction: 'bottom' } }),
  ({ listStyleType }) => {
    const type = translateType(listStyleType);

    return [
      { listStyleType: type },
      type === 'none'
        ? {
            paddingLeft: 0,

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 {
 *   constructor() {