Applying theme and brand

Theming with brand colours is embedded deeply into Ripple, using design tokens. Global and component styles are built on a base level of tokens, that can be adjusted at a site level by modifying a few key properties.

Token naming

Ripple uses a naming scheme for tokens, and the CSS custom properties are derived with this pattern:

--rpl(-<module>)-<attribute>(-<level>)

Some example props:

--rpl-clr-primary
--rpl-clr-success-light
--rpl-type-size-5
--rpl-sp-3
--rpl-border-4

And a worked example:

.example-block {
  border-color: var(--rpl-clr-primary);
  border-style: solid;
  border-width: var(--rpl-border-4);
  colour: var(--rpl-clr-primary);
  padding: var(--rpl-sp-3);
}

Theme properties

The minimum set of required properties are listed below:

--rpl-clr-primary
--rpl-clr-footer-alt
--rpl-clr-link
--rpl-clr-type-primary-accessible
--rpl-clr-primary-alt
--rpl-clr-type-primary-alt-accessible
--rpl-clr-footer
--rpl-clr-type-footer-accessible
--rpl-clr-primary-alpha
--rpl-clr-accent
--rpl-clr-accent-alt
--rpl-clr-focus
--rpl-clr-gradient-horizontal
--rpl-clr-gradient-vertical

SDP

In SDP, the theme is managed in the back-end system via the Site Taxonomy. Site entries have a collection of key-value site theme values, and also site feature flag values to define site-specific settings, e.g.

Key
rpl-clr-primary
Value
#1c4f9c

Key
footerTheme
Value
neutral

Both these collections are exposed to the front-end through the Site API, and can immediately update production sites without requiring a code change or deployment.

Secondary logo

The secondary logo is also content managed, and can be set on the same Site Taxonomy page in the back-end under Logo.

app.config

Theme and feature flag properties may also be defined in the Nuxt app.config.ts for the site. This matches the naming used in the Site API (note the difference in -- for theme, since these are Javascript config props, not CSS custom props):

export default defineAppConfig({
  ripple: {
    featureFlags: {
      contentCollectionSearchConnector: 'elasticsearch'
    },
    theme: {
      'rpl-clr-primary': '#6B19A3',
      'rpl-clr-footer-alt': '#6B19A3',
      'rpl-clr-link': '#6B19A3',
      'rpl-clr-type-primary-accessible': '#6B19A3',
      'rpl-clr-primary-alt': '#3F006B',
      'rpl-clr-type-primary-alt-accessible': '#3F006B',
      'rpl-clr-footer': '#3F006B',
      'rpl-clr-type-footer-accessible': '#3F006B',
      'rpl-clr-primary-alpha': 'rgba(107, 25, 163, 0.5)',
      'rpl-clr-accent': '#6DDD97',
      'rpl-clr-accent-alt': '#EAFAF0',
      'rpl-clr-focus': '#9DEF65',
      'rpl-clr-gradient-horizontal': 'linear-gradient(90deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)',
      'rpl-clr-gradient-vertical': 'linear-gradient(180deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)'
    }
  }
})

Note in this example the same value is used in the first four properties (primary branding colour), then the next four (alternate branding colour). Even though they use the same value, these properties must all be defined. The system was set up this way to support accessible light-on-dark and dark-on-light theming options.

Propose a change to this page on GitHub.