...
Link to tokens
...
How to use tokens
...
What are tokens
...
Note |
---|
This section is a work in progress. |
Info |
---|
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:
Panel | ||
---|---|---|
| ||
Font |
Panel | ||
---|---|---|
| ||
Color |
Panel | ||
---|---|---|
| ||
Motion |
Panel | ||
---|---|---|
| ||
Opacity |
Panel | ||
---|---|---|
| ||
Shape |
Panel | ||
---|---|---|
| ||
Size |
Panel | ||
---|---|---|
| ||
Space |
Panel | ||
---|---|---|
| ||
Elevation |
Info |
---|
Add link to tokens section in Storybook. |
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
:
Code Block |
---|
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
:
Code Block |
---|
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
:
Code Block |
---|
/* 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
:
Code Block |
---|
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
:
Code Block |
---|
/* setup particular page styles */
.my-page-button {
background: orange;
}
.my-page-button:hover {
background: darkorange;
}Copy |
my-page.jsx
:
Code Block |
---|
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. Usemode
to extend backgrounds only.