Page Comparison

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:

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:

import './brand-A-specific-tokens.css';
import './eco-product.tokens.css';

import React from 'react';
import { Section } from '@design-system/section';
import { Button } from '@design-system/button';

export const MyAwesomeComponent = () => (
  <Section mode="default-alt" className="eco-product">
    ...
    <Button size="large" variant="primary">
      Click me ;)
    </Button>
    ...
  </Section>
);Copy

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:

/* setup particular page styles */
.my-page-button {
  background: orange;
}
.my-page-button:hover {
  background: darkorange;
}Copy

my-page.jsx:

import './brand-A-specific-tokens.css';
import './button-specific-tokens.css';
import './my-page-styles.css';

import React from 'react';
import { Button } from '@design-system/button';

export const MyAwesomeComponent = () => (
  <>
    ...
    <Button className="my-page-button" size="large" variant="primary">
      Click me ;)
    </Button>
    ...
  </>
);Copy

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