https://github.com/opentable/design-tokens
A place where OpenTable engineers and designers openly work together
https://github.com/opentable/design-tokens
design design-systems design-tokens
Last synced: 2 months ago
JSON representation
A place where OpenTable engineers and designers openly work together
- Host: GitHub
- URL: https://github.com/opentable/design-tokens
- Owner: opentable
- License: mit
- Created: 2017-07-26T15:58:12.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-02-19T07:31:48.000Z (over 1 year ago)
- Last Synced: 2024-05-19T05:04:18.514Z (about 1 year ago)
- Topics: design, design-systems, design-tokens
- Language: JavaScript
- Homepage: https://opentable.github.io/design-tokens/
- Size: 20.2 MB
- Stars: 79
- Watchers: 41
- Forks: 75
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-Design-Tokens - Open Table
README
# design-tokens
Design Tokens repository is the central location to store shared design attributes such as colors, fonts, widths, animations, etc. These attributes can then be transformed and formatted to meet the needs of different projects, teams and platforms.
---
**Table of Contents** _generated with [DocToc](https://github.com/thlorenz/doctoc)_
* [Project structure](#project-structure)
* [OTKit](#otkit)
* [OTTheme](#ottheme)
* [Usage](#usage)
* [Install the token](#install-the-token)
* [Use the token](#use-the-token)
* [Example: using different formats](#example-using-different-formats)
* [Example: set your base font size](#example-set-your-base-font-size)
* [Pixel to Rem conversion](#pixel-to-rem-conversion)
* [Development](#development)
* [Preview and debug](#preview-and-debug)
* [Publish](#publish)
* [Contribution](#contribution)
## Project structure
A token is a set of design attributes bundled together around a common theme.
We have two sets of design tokens available to consume.
### OTKit
Standard design tokens. Use them if you are following the new design guidelines.
| Token | Available Formats | Version |
| ------------------------------------------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| [`otkit-borders`](/OTKit/otkit-borders) | `scss, cssmodules.css, common.js` | [](http://badge.fury.io/js/otkit-borders) |
| [`otkit-breakpoints`](/OTKit/otkit-breakpoints) | `scss, cssmodules.css, common.js` | [](http://badge.fury.io/js/otkit-breakpoints) |
| [`otkit-colors`](/OTKit/otkit-colors) | `scss, cssmodules.css, common.js` | [](http://badge.fury.io/js/otkit-colors) |
| [`otkit-grids`](/OTKit/otkit-grids) | `scss, cssmodules.css, common.js` | [](http://badge.fury.io/js/otkit-grids) |
| [`otkit-icons`](/OTKit/otkit-icons) | `scss, cssmodules.css, common.js` | [](http://badge.fury.io/js/otkit-icons) |
| [`otkit-shadows`](/OTKit/otkit-shadows) | `scss, cssmodules.css, common.js` | [](http://badge.fury.io/js/otkit-shadows) |
| [`otkit-spacing`](/OTKit/otkit-spacing) | `scss, cssmodules.css, common.js` | [](http://badge.fury.io/js/otkit-spacing) |
| [`otkit-typography` (DEPRECATED)](/OTKit/otkit-typography) | `scss, cssmodules.css, common.js` | [](http://badge.fury.io/js/otkit-typography) |
| [`otkit-typography-desktop`](/OTKit/otkit-typography-desktop) | `scss, cssmodules.css, common.js` | [](http://badge.fury.io/js/otkit-typography-desktop) |
### OTTheme
Legacy design tokens. Use them if you need the classic look and feel of [OpenTable Theme](https://github.com/opentable/opentable-theme).
| Token | Available Formats | Version |
| --------------------------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------- |
| [`ottheme-colors`](/OTTheme/ottheme-colors) | `scss, cssmodules.css, common.js` | [](http://badge.fury.io/js/ottheme-colors) |
| [`ottheme-spacing`](/OTTheme/ottheme-spacing) | `scss, cssmodules.css, common.js` | [](http://badge.fury.io/js/ottheme-spacing) |
## Usage
### Install the token
```bash
$ npm install --save-dev
```
---
### Use the token
A Token exposes multiple available formats (listed above). **The format needs to be explicitly referenced upon requiring/importing the token:**
```
require('/token.')
```
#### Example: using different formats
```
// cssmodules example:
@value color-primary from 'otkit-colors/token.cssmodules.css';
// common.js require/import examples:
const color = require('otkit-colors/token.common.js');
import color from 'otkit-colors/token.common.js';
// scss example:
@import '../node_modules/ottheme-colors/token.scss';
```
#### Example: set your base font size
```css
@value font-size-base from 'otkit-typography/token.cssmodules.css';
html {
font-size: font-size-base;
}
```
---
### `otkit-icons` token usages
The `otkit-icons` token offers two different sets of icons:
* Standard icons with defined colors
* Themeable icons using `currentColor`
They are available for SCSS, CSS Modules and CommonJS
*Note: The themeable icons are only available in version `9.0.1` and above*
#### Standard icons
This is the standard icons with predefined color for `fill` and `stroke`.
```javascript
import { icTicket } from 'otkit-icons/token.common'
/*
/*
```
#### Themeable icons
This is the themeable icons where the icons colors will be inherited from the parent element/component. The `fill` and `stroke`
have `currentColor` as their values.
```javascript
import { icTicket } from 'otkit-icons/token.theme.common'
/*
*/
```
---
### Pixel to Rem conversion
All contributions to this project should be in pixels. For users of these tokens, you will have to install [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) to handle the pixel to rem conversion in your CSS files.
```
npm install --save-dev postcss-pxtorem
```
Then add it to your [postcss](https://github.com/postcss/postcss) processors with the following recommended configuration:
```javascript
import pxtorem from 'postcss-pxtorem';
import { fontSizeBase } from 'otkit-typography/token.cssmodules.css';
const processors = [
pxtorem({
// fontSizeBase = '16px'. Need to convert to 16.
rootValue: parseInt(fontSizeBase, 10),
selectorBlackList: [/^html$/],
replace: true
})
];
```
Note that depending on how you use `postcss`, your processors array may be in a JSON configuration file instead.
If you're not already using [postcss](https://github.com/postcss/postcss), you will either have to use it as an additional build step after you transform your CSS with your current tool or use it as a complete replacement for your current CSS transformation process.
## Development
### Preview and debug
Executing `npm run build` will generate the token values in each token's folder, such as `token.scss` or other available formats you specified.
When you publish a token (more on that below), this step is executed as part of the publishing.
If you are using a token in your project, you can execute `npm link ''` in `node_modules` folder to test the token values before publishing.
---
### Contribution
Please refer to the [contributing doc](/CONTRIBUTING.md)