Skip to main content

Theming

Using CSS Custom Properties​

The design system uses CSS custom properties (also known as CSS variables) to make it easy to customise the appearance of components without needing to override styles directly. This approach helps ensure your customisations remain compatible with future updates to the design system.

Why use custom properties?​

  • Maintainability: Custom properties are designed to be stable and are less likely to change between releases.
  • Consistency: They provide a consistent way to theme components across different frameworks (Core, React, Rails).
  • Isolation: You can scope custom property changes to specific components or elements.

How to use​

You can override custom properties in your CSS by targeting the component or a parent element. For example, to change the primary button background colour:

/* Change the primary button background color */
.rpf-button {
  --rpf-button-background-color: #0057b8;
}
note

Currently we use a mix of setting the inital values of the component custom properties on :root, :host and .component-name. We aim to make this consistent to be able to set everything on :root, :host in the future.

Styling a Single Button​

To style a single button differently, add a custom class to your button and override the custom properties for that class:

/* Style a single button with a custom class */
.my-special-button {
  --rpf-button-background-color: #e83e8c;
  --rpf-button-text-color: #fff;
}
<button class="rpf-button my-special-button">Special Button</button>