{"id":13774498,"url":"https://github.com/opentable/design-tokens","last_synced_at":"2025-04-05T12:02:35.335Z","repository":{"id":23213395,"uuid":"98441172","full_name":"opentable/design-tokens","owner":"opentable","description":"A place where OpenTable engineers and designers openly work together","archived":false,"fork":false,"pushed_at":"2024-02-19T07:31:48.000Z","size":21157,"stargazers_count":79,"open_issues_count":9,"forks_count":75,"subscribers_count":41,"default_branch":"master","last_synced_at":"2024-05-19T05:04:18.514Z","etag":null,"topics":["design","design-systems","design-tokens"],"latest_commit_sha":null,"homepage":"https://opentable.github.io/design-tokens/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/opentable.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-26T15:58:12.000Z","updated_at":"2024-06-19T00:26:35.930Z","dependencies_parsed_at":"2024-01-06T22:29:59.850Z","dependency_job_id":"704fda45-bd41-4ca5-a123-24d9ca20f192","html_url":"https://github.com/opentable/design-tokens","commit_stats":{"total_commits":519,"total_committers":56,"mean_commits":9.267857142857142,"dds":0.8574181117533719,"last_synced_commit":"a83fb80f6016bb4a614d74a173e2f304e2853d35"},"previous_names":[],"tags_count":139,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opentable%2Fdesign-tokens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opentable%2Fdesign-tokens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opentable%2Fdesign-tokens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opentable%2Fdesign-tokens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opentable","download_url":"https://codeload.github.com/opentable/design-tokens/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247018498,"owners_count":20870011,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design","design-systems","design-tokens"],"created_at":"2024-08-03T17:01:27.306Z","updated_at":"2025-04-05T12:02:35.318Z","avatar_url":"https://github.com/opentable.png","language":"JavaScript","funding_links":[],"categories":["GitHub Repositories"],"sub_categories":[],"readme":"# design-tokens\n\nDesign 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.\n\n---\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n**Table of Contents** _generated with [DocToc](https://github.com/thlorenz/doctoc)_\n\n* [Project structure](#project-structure)\n  * [OTKit](#otkit)\n  * [OTTheme](#ottheme)\n* [Usage](#usage)\n  * [Install the token](#install-the-token)\n  * [Use the token](#use-the-token)\n    * [Example: using different formats](#example-using-different-formats)\n    * [Example: set your base font size](#example-set-your-base-font-size)\n  * [Pixel to Rem conversion](#pixel-to-rem-conversion)\n* [Development](#development)\n  * [Preview and debug](#preview-and-debug)\n  * [Publish](#publish)\n* [Contribution](#contribution)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Project structure\n\nA token is a set of design attributes bundled together around a common theme.\n\nWe have two sets of design tokens available to consume.\n\n### OTKit\n\nStandard design tokens. Use them if you are following the new design guidelines.\n\n| Token                                                         | Available Formats                 | Version                                                                                                                   |\n| ------------------------------------------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |\n| [`otkit-borders`](/OTKit/otkit-borders)                       | `scss, cssmodules.css, common.js` | [![npm version](https://badge.fury.io/js/otkit-borders.svg)](http://badge.fury.io/js/otkit-borders)                       |\n| [`otkit-breakpoints`](/OTKit/otkit-breakpoints)               | `scss, cssmodules.css, common.js` | [![npm version](https://badge.fury.io/js/otkit-breakpoints.svg)](http://badge.fury.io/js/otkit-breakpoints)               |\n| [`otkit-colors`](/OTKit/otkit-colors)                         | `scss, cssmodules.css, common.js` | [![npm version](https://badge.fury.io/js/otkit-colors.svg)](http://badge.fury.io/js/otkit-colors)                         |\n| [`otkit-grids`](/OTKit/otkit-grids)                           | `scss, cssmodules.css, common.js` | [![npm version](https://badge.fury.io/js/otkit-grids.svg)](http://badge.fury.io/js/otkit-grids)                           |\n| [`otkit-icons`](/OTKit/otkit-icons)                           | `scss, cssmodules.css, common.js`  | [![npm version](https://badge.fury.io/js/otkit-icons.svg)](http://badge.fury.io/js/otkit-icons)                           |\n| [`otkit-shadows`](/OTKit/otkit-shadows)                       | `scss, cssmodules.css, common.js` | [![npm version](https://badge.fury.io/js/otkit-shadows.svg)](http://badge.fury.io/js/otkit-shadows)                       |\n| [`otkit-spacing`](/OTKit/otkit-spacing)                       | `scss, cssmodules.css, common.js` | [![npm version](https://badge.fury.io/js/otkit-spacing.svg)](http://badge.fury.io/js/otkit-spacing)                       |\n| [`otkit-typography` (DEPRECATED)](/OTKit/otkit-typography)    | `scss, cssmodules.css, common.js` | [![npm version](https://badge.fury.io/js/otkit-typography.svg)](http://badge.fury.io/js/otkit-typography)                 |\n| [`otkit-typography-desktop`](/OTKit/otkit-typography-desktop) | `scss, cssmodules.css, common.js` | [![npm version](https://badge.fury.io/js/otkit-typography-desktop.svg)](http://badge.fury.io/js/otkit-typography-desktop) |\n\n### OTTheme\n\nLegacy design tokens. Use them if you need the classic look and feel of [OpenTable Theme](https://github.com/opentable/opentable-theme).\n\n| Token                                         | Available Formats                 | Version                                                                                                 |\n| --------------------------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------- |\n| [`ottheme-colors`](/OTTheme/ottheme-colors)   | `scss, cssmodules.css, common.js` | [![npm version](https://badge.fury.io/js/ottheme-colors.svg)](http://badge.fury.io/js/ottheme-colors)   |\n| [`ottheme-spacing`](/OTTheme/ottheme-spacing) | `scss, cssmodules.css, common.js` | [![npm version](https://badge.fury.io/js/ottheme-spacing.svg)](http://badge.fury.io/js/ottheme-spacing) |\n\n## Usage\n\n### Install the token\n\n```bash\n$ npm install --save-dev \u003ctoken-name\u003e\n```\n\n---\n\n### Use the token\n\nA Token exposes multiple available formats (listed above). **The format needs to be explicitly referenced upon requiring/importing the token:**\n\n```\nrequire('\u003ctoken-name\u003e/token.\u003cformat\u003e')\n```\n\n#### Example: using different formats\n\n```\n// cssmodules example:\n@value color-primary from 'otkit-colors/token.cssmodules.css';\n\n// common.js require/import examples:\nconst color = require('otkit-colors/token.common.js');\nimport color from 'otkit-colors/token.common.js';\n\n// scss example:\n@import '../node_modules/ottheme-colors/token.scss';\n```\n\n#### Example: set your base font size\n\n```css\n@value font-size-base from 'otkit-typography/token.cssmodules.css';\n\nhtml {\n  font-size: font-size-base;\n}\n```\n\n---\n\n### `otkit-icons` token usages\n\nThe `otkit-icons` token offers two different sets of icons:\n\n* Standard icons with defined colors\n* Themeable icons using `currentColor`\n\nThey are available for SCSS, CSS Modules and CommonJS\n\n*Note: The themeable icons are only available in version `9.0.1` and above*\n\n#### Standard icons\n\nThis is the standard icons with predefined color for `fill` and `stroke`.\n\n```javascript\nimport { icTicket } from 'otkit-icons/token.common'\n\n/*\n\u003csvg ...\u003e\n  \u003cg id=\"icon/ic_ticket\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"\u003e\n    \u003cpath d=\"M12.7133596,8.1066091 ...\" id=\"ic_ticket\" fill=\"#2D333F\"\u003e\u003c/path\u003e\n  \u003c/g\u003e\n\u003c/svg\u003e/*\n```\n\n#### Themeable icons\n\nThis is the themeable icons where the icons colors will be inherited from the parent element/component. The `fill` and `stroke`\nhave `currentColor` as their values.\n\n```javascript\nimport { icTicket } from 'otkit-icons/token.theme.common'\n\n/*\n\u003csvg ...\u003e\n  \u003cg id=\"icon/ic_ticket\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"\u003e\n    \u003cpath d=\"M12.7133596,8.1066091 ...\" id=\"ic_ticket\" fill=\"currentColor\"\u003e\u003c/path\u003e\n  \u003c/g\u003e\n\u003c/svg\u003e\n*/\n\n```\n\n---\n\n### Pixel to Rem conversion\n\nAll 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.\n\n```\nnpm install --save-dev postcss-pxtorem\n```\n\nThen add it to your [postcss](https://github.com/postcss/postcss) processors with the following recommended configuration:\n\n```javascript\nimport pxtorem from 'postcss-pxtorem';\nimport { fontSizeBase } from 'otkit-typography/token.cssmodules.css';\n\nconst processors = [\n  pxtorem({\n    // fontSizeBase = '16px'.  Need to convert to 16.\n    rootValue: parseInt(fontSizeBase, 10),\n    selectorBlackList: [/^html$/],\n    replace: true\n  })\n];\n```\n\nNote that depending on how you use `postcss`, your processors array may be in a JSON configuration file instead.\n\nIf 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.\n\n## Development\n\n### Preview and debug\n\nExecuting `npm run build` will generate the token values in each token's folder, such as `token.scss` or other available formats you specified.\n\nWhen you publish a token (more on that below), this step is executed as part of the publishing.\n\nIf you are using a token in your project, you can execute `npm link '\u003ctoken-name\u003e'` in `node_modules` folder to test the token values before publishing.\n\n---\n\n### Contribution\n\nPlease refer to the [contributing doc](/CONTRIBUTING.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopentable%2Fdesign-tokens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopentable%2Fdesign-tokens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopentable%2Fdesign-tokens/lists"}