Theming

Colour

Colour plays the primary (geddit?) role for applying a theme layer, or alternate brand skin to the component library. As mentioned in the docs for Colour, abstraction is key.

We'll take the Digital Institute London (LDN) skin as an example.

To create this, we've set up an alternate Sass file: main-ldn.scss. We set up the alternate colours we want to use, and then simply import components, because we've nicely built all our components with abstracted colour variables (hopefully).

We pick $primary, $secondary, and $tertiary colours, and the theme also uses an abstracted $neutral--primary and $neutral--light, to avoid using $slate directly from the main Staffs palette, which might not be suitable for sub-themes.

$primary:                     $blue--deep-ldn;
$secondary:                   $purple--deep-ldn;
$tertiary:                    $magenta--ldn;
$neutral--primary:            $granite--ldn;
$neutral--light:              $granite--light-ldn;

Key Themeable Components

There are a number of key themable components which have different colour variants to bring in more of a brand's palette, notably:

• Titles
• Cards
• Tiles (and Feature Tiles)
• Slabs

Each of these has a Sass map of colours, from which variants are created, as demonstrated in the docs for Colour.

Exceptions

Consider carefully the need for 'exceptions' or additional variants. Avoid where possible.

If a component doesn't work well with a sub-theme, the chances are, it's the main component that needs adapting to be more flexible, rather than an override or exception being made for the sub-theme.

For example, a key part of the LDN brand is use of the clipped corner from the logo. To introduce this, a 'clipped' button style was added to the main component library, to benefit all sub-themes.