A design token is an abstraction of a visual property such as color, font, width, animation, etc. These raw values are language application agnostic and once transformed and formatted can be used on any platform.
For example in CSS, design tokens are used as variables, though there will be conversions made for iOS and Android.
A design token file is written in JSON. For example this is a color token:
{
"blue": {
"50": "#0a84ff"
}
}And this is its conversion into a CSS variable:
:root {
--blue-50: #0a84ff;
}Combine multiple tokens to customize frameworks and other dimensions. For Photon themes, see https://github.com/firefoxux/photon-themes.
Setup the environment with git and node already installed. Then:
$ git clone https://github.com/firefoxux/design-tokens/
$ cd /path/to/folder
$ npm install
You can either submit an issue or submit a pull request of changed code yourself.