https://github.com/FirefoxUX/design-tokens

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

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/FirefoxUX/design-tokens
• Owner: FirefoxUX
• License: mpl-2.0
• Created: 2017-07-17T13:29:20.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-01-10T16:58:00.000Z (almost 6 years ago)
• Last Synced: 2024-04-15T00:13:12.035Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 206 KB
• Stars: 102
• Watchers: 16
• Forks: 22
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• Awesome-Design-Tokens - Firefox Photon

README

        
# 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](http://json.org/). For example this is a color token:

```json

{

  "blue": {

    "50": "#0a84ff"

  }

}

```

And this is its conversion into a CSS variable:

```css

:root {

  --blue-50: #0a84ff;

}

```

## Themes

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

## Contribute

Setup the environment with [git](https://git-scm.com/) and [node](https://nodejs.org/en/) already installed. Then:

```

$ git clone https://github.com/firefoxux/design-tokens/

$ cd /path/to/folder

$ npm install

```

You can either [submit an issue](https://github.com/firefoxux/design-tokens/issues/new) or submit a pull request of changed code yourself.