Design tokens
Design tokens store visual design attributes. They help us make our UI more consistent and we support custom themes.
We are preparing new specification of how we want theming work in Orbit. More soon.
We use tokens instead of static values like HEX codes for color or sizing units.
Installation
First thing you will need to do is install the package into your project.
Run npm to add the package to your project
npm install --save @kiwicom/orbit-design-tokensor do so with Yarn:
yarn add @kiwicom/orbit-design-tokensHow to use
Now that you have installed the latest version of the package, you will need to add an import directly into the file where you want to use the design tokens.
You will simply need to add this line of code to the top of the file:
import { defaultTokens } from '@kiwicom/orbit-design-tokens'Now you can use tokens by typing defaultTokens and just continue with the dot-notation by typing the appropriate token name you want to use f.e. defaultTokens.colorTextPrimary. More advanced text editors should suggest which tokens are available to you in the token object, so you can find tokens quicker than by typing the entire token name.
Formats
The main structure of the package is written in JavaScript for better usage in JavaScript projects. We are also able to generate a JSON file which will allow us to transform this type of file into different ones. It should be possible to transform JSON into SASS, LESS, Stylus, XML or others.
Naming conventions
Every design token in the package has a name suggested according to the Orbit naming conventions. These conventions should be systematic, and work according to the following template:
property_usage-type--state
More information about adding new tokens is described in How to add a new token
Full list of design tokens
Colors
Use these tokens for text or icon colors. Don’t use these for borders and background colors.
Font family
Background colors
Use these tokens for background colors only. Do not use these for border colors or text theme.palette.
Font size
Use these sizing tokens for font sizes.
Border radius
Use radius tokens to change the border-radius size (rounded corners).
Z Index
Use layers to show depth of page.