Skip to content
master
Switch branches/tags
Go to file
Code

README.md

Photon Design Tokens

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;
}

Themes

Combine multiple tokens to customize frameworks and other dimensions. For Photon themes, see https://github.com/firefoxux/photon-themes.

Contribute

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.

About

A place we used to store decisions we make. Check https://github.com/firefoxux/photon-colors for up-to-date stuff.

Resources

License

Releases

No releases published

Packages

No packages published