/
Theming

*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *

Theming

Owned by Nick Harris
Last updated: Sept 07, 2022
3 min read

This section is a work in progress.

 

Explain what mode is here

 

Each Component in the Chameleon Design System uses global and component level tokens to control many aspects of the component’s style and layout. This allows each component to be easily branded, or styled.

There are 3 ways to style your components:

  • Using global tokens

  • Using component tokens

  • Extending a component’s style with custom CSS

Using global tokens

Global tokens represent your design or brand choices. Global tokens fall into 8 categories:

Font

 

 

All tokens in the Chameleon Design System have a default value. These values make up the default thme.

In order to define the global theme of your site, you must create a file with the tokens that you want to override.

For example my-new-global-tokens.css:

body { /* setup brand tokens here */ --cds-default-ui-action: green; --cds-default-ui-action-hover: darkgreen; }

Using components tokens

Component tokens handle the styling choices for specific component. Most component in the Chameleon Design System will have component specific tokens.

Designed to override tokens only for a specific component type within entire site. For example the global action color should be green, but for all buttons on the site it should be red. Variables and their values can be found in the Component –> Tokens section, e.q.: button tokens.

For example button-specific-tokens.css:

body { /* setup component tokens here */ --cds-button-color-background-primary: red; --cds-button-color-background-primary-hover: darkred; }

 

Using context

Component context

Responsible to change individual instances of a component’s style to reflect brand or campaign design goals.

Example use cases:

  • Schiff Vitamins is a multi-brand site which has pages for Neuriva and Mucinex. The Mucinex content needs to reflect the Mucinex brand; the Neuriva pages need to reflect the Neuriva brand

  • Finish wants to apply a specific colour palette for each product range. So a teaser for “Eco” has different token values to a teaser for “Quantum Ultimate”

  • Dettol Germany offers both a German version and an English version. Because German has longer words, they want to reduce the heading sizes on the German language but not on the English language.

Let's consider Eco case.

Place "eco" tokens in separate file eco-product.tokens.css:

/* setup particular context styles */ .eco-product { --cds-button-color-background-primary: green; --cds-button-color-background-primary-hover: darkgreen; --section-background: lightgreen; }Copy

Wrap block into Section/PageBlock with appropriate mode, add context className. my-eco-product.jsx:

 

Page context

Responsible for the entire page specific theme. Designed to override styles only for a particular component. For example all buttons within entire site should have red color, but particular button should have orange color.

For example my-page-styles.css:

my-page.jsx:

NOTE: Use className to extend styles. Use mode to extend backgrounds only.