Skip to content
5.4.1

Theme

Theme is central to how our whole design system functions. It is the single most important component in our design system. Our theme component is a Styled Components ThemeProvider that specifies nib fonts, colors, breakpoints, spacing sizes and more. Each app using Mesh components should have a single high-level theme wrapping the rendered output.

Components must be wrapped by this Theme

Our components rely on being rendered inside this Theme component, otherwise they will render with incorrect styling, no responsive styling or worse, break completely.

Installation

bash
npm install @nib-components/theme

Usage

jsx
import Theme, {nib} from '@nib-components/theme';
const App = () => (
<Theme theme={nib} mode={{form: 'white'}} loadIconFont>
{children}
</Theme>
);

Interactive demo

jsx

Requirements for use

There are two requirements which prevent problems with individual components rendering incorrectly:

  1. You should always include the Theme component once, at the root of your app.
  2. Never should an nib components be rendered outside of the Theme component.

Props

PropTypeDefaultDescription
theme (required)objectThe brand theme to use. Must be one of [nib, navigator, gu, iman].
modeobject{form: 'light'}The value of mode.form will override the theme.mode.form value in the theme passed down to all styled components via the ThemeProvider. Must have shape: {form: oneOf(['light', 'white'])}.
loadIconFontbooleantrueIf you are still using @nib-components/icon then you will need to load the icon font.

Selectors

Our components look to our theme for a lot of their styling information. Navigating the theme tree structure to find the value that you need can be tiresome. It also requires you to know the structure of the theme.

Selectors offer a shorthand to pull values from the theme. Below is a comparison between the two methods. As you can see, the selector pattern simplifies the process significantly. These selectors are mapped to every section of the theme and their values can differ based on the theme brand.

Navigating the theme structure:

jsx
const Heading = styled.h1`
font-family: ${props => props.theme.headings.h1.fontFamily};
font-size: ${props => props.theme.headings.h1.fontSize};
color: ${props => props.theme.colors.shades.darkest};
`;

Using theme selectors:

jsx
import {h1FontFamily, h1FontSize, colorDarkest} from '@nib-components/theme';
const Heading = styled.h1`
font-family: ${h1FontFamily};
font-size: ${h1FontSize};
color: ${colorDarkest};
`;

Using selectors

These selectors are used by our desisgn system components and should also be used for in-app styling.

Selectors should be used over the chained navigation of the theme to find the value you desire for simplicity, code readability and to protect against breakage if the theme's structure changes.

Available selectors

The most useful selectors are those that provide the colors used by the theme. These color selectors are:

Brand:

  • base: colorBrandBase
  • light: colorBrandLight
  • dark: colorBrandDark

Accent:

  • accent: colorAccent

Shades:

  • black: colorBlack
  • darkest: colorDarkest
  • darker: colorDarker
  • dark: colorDark
  • light: colorLight
  • lighter: colorLighter
  • lightest: colorLightest
  • white: colorWhite

Product:

  • hospital: colorHospital
  • extras: colorExtras
  • combined: colorCombined
  • hightlightBg: colorHighlightBg
  • hightlightText: colorHighlightText

Icon:

  • fill: colorIconFill
  • accent: colorIconAccentFill

For the full list of selectors provided by the theme, see the selectors documentation.

Whitelabelling

Pulling styling information from the theme helps us to keep our pages consistent and provides us the added benefit of being able to swap out different themes to support multiple brands.

Currently, we have themes to support the following brands:

  • nib (nib)
  • Navigator (navigator)
  • GU Health (gu)
  • IMAN (iman)

Colors

Each whitelabelled theme has a set of colors that are suitable for key uses across each brand. Pulling color directly from the theme ensures that it will work across all brands, as the colors housed within the theme are more limited but referred to by universal names.

nib colors

Brand Base

Brand Light

Brand Dark

Accent

Black

Darkest

Darker

Dark

Light

Lighter

Lightest

White