{"_id":"@optimizely/design-tokens","_rev":"3874301","name":"@optimizely/design-tokens","description":"Re-usable design tokens to be used within Optimizely themes.","dist-tags":{"devel":"0.1.1-devel.4","latest":"0.1.0"},"maintainers":[{"name":"optimizely-eng","email":""}],"time":{"modified":"2025-09-01T00:57:10.000Z","created":"2021-04-15T12:16:35.304Z","0.1.1-devel.4":"2023-10-04T16:10:09.265Z","0.1.0":"2022-10-03T17:56:17.426Z","0.0.9":"2022-01-24T08:15:41.996Z","0.0.8":"2021-12-14T08:11:09.378Z","0.0.7":"2021-09-16T15:18:42.346Z","0.0.6":"2021-09-07T08:37:46.345Z","0.0.5":"2021-08-03T08:41:56.866Z","0.0.4":"2021-07-07T16:54:33.601Z","0.0.3":"2021-06-11T09:55:01.413Z","0.0.2":"2021-05-07T12:20:39.145Z","0.0.1":"2021-04-15T12:16:35.304Z"},"users":{},"versions":{"0.1.1-devel.4":{"name":"@optimizely/design-tokens","private":false,"version":"0.1.1-devel.4","description":"Re-usable design tokens to be used within Optimizely themes.","license":"Apache-2.0","scripts":{"build":"node src/create-tokens","eslint":"eslint --ext js,jsx,ts,tsx .","release":"standard-version"},"devDependencies":{"standard-version":"^9.2.0","style-dictionary":"^3.0.0"},"readmeFilename":"README.md","gitHead":"3ac76b32082cee31880aec2c9f7ce2f980f38332","_id":"@optimizely/design-tokens@0.1.1-devel.4","_nodeVersion":"18.16.1","_npmVersion":"9.5.1","dist":{"shasum":"d27695455742ba0b289d5a1c01691cd49412ae3d","size":991350,"noattachment":false,"key":"/@optimizely/design-tokens/-/@optimizely/design-tokens-0.1.1-devel.4.tgz","tarball":"http://registry.cnpm.dingdandao.com/@optimizely/design-tokens/download/@optimizely/design-tokens-0.1.1-devel.4.tgz"},"_npmUser":{"name":"optimizely-eng","email":"engineering-npm@optimizely.com"},"directories":{},"maintainers":[{"name":"optimizely-eng","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-tokens_0.1.1-devel.4_1696435808948_0.5546979188809953"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-10-04T16:10:09.265Z","publish_time":1696435809265,"_source_registry_name":"default","_cnpm_publish_time":1696435809265},"0.1.0":{"name":"@optimizely/design-tokens","private":false,"version":"0.1.0","description":"Re-usable design tokens to be used within Optimizely themes.","license":"Apache-2.0","scripts":{"build":"node src/create-tokens","eslint":"eslint --ext js,jsx,ts,tsx .","release":"standard-version"},"devDependencies":{"standard-version":"^9.2.0","style-dictionary":"^3.0.0"},"_id":"@optimizely/design-tokens@0.1.0","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"shasum":"2feb0180618421221a3ff41fa92d042e464cbee2","size":992109,"noattachment":false,"key":"/@optimizely/design-tokens/-/@optimizely/design-tokens-0.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@optimizely/design-tokens/download/@optimizely/design-tokens-0.1.0.tgz"},"_npmUser":{"name":"optimizely-eng","email":"engineering-npm@optimizely.com"},"directories":{},"maintainers":[{"name":"optimizely-eng","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-tokens_0.1.0_1664819777162_0.2738959019273872"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2022-10-03T17:56:27.244Z","publish_time":1664819777426,"_cnpm_publish_time":1664819777426},"0.0.9":{"name":"@optimizely/design-tokens","private":false,"version":"0.0.9","description":"Re-usable design tokens to be used within Optimizely themes.","license":"Apache-2.0","scripts":{"build":"node src/create-tokens","eslint":"eslint --ext js,jsx,ts,tsx .","release":"standard-version"},"devDependencies":{"standard-version":"^9.2.0","style-dictionary":"^3.0.0"},"_id":"@optimizely/design-tokens@0.0.9","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"shasum":"2878f485c9e9d83dffc68605ebc365ec88000026","size":991012,"noattachment":false,"key":"/@optimizely/design-tokens/-/@optimizely/design-tokens-0.0.9.tgz","tarball":"http://registry.cnpm.dingdandao.com/@optimizely/design-tokens/download/@optimizely/design-tokens-0.0.9.tgz"},"_npmUser":{"name":"optimizely-eng","email":"engineering-npm@optimizely.com"},"directories":{},"maintainers":[{"name":"optimizely-eng","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-tokens_0.0.9_1643012141747_0.6671567388604274"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2022-01-24T08:15:54.195Z","publish_time":1643012141996,"_cnpm_publish_time":1643012141996},"0.0.8":{"name":"@optimizely/design-tokens","private":false,"version":"0.0.8","description":"Re-usable design tokens to be used within Optimizely themes.","license":"Apache-2.0","scripts":{"build":"node src/create-tokens","eslint":"eslint --ext js,jsx,ts,tsx .","release":"standard-version"},"devDependencies":{"standard-version":"^9.2.0","style-dictionary":"^3.0.0"},"_id":"@optimizely/design-tokens@0.0.8","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"shasum":"c4cca408978bee5b4aacae7df78e4446dd89979a","size":550399,"noattachment":false,"key":"/@optimizely/design-tokens/-/@optimizely/design-tokens-0.0.8.tgz","tarball":"http://registry.cnpm.dingdandao.com/@optimizely/design-tokens/download/@optimizely/design-tokens-0.0.8.tgz"},"_npmUser":{"name":"optimizely-eng","email":"engineering-npm@optimizely.com"},"directories":{},"maintainers":[{"name":"optimizely-eng","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-tokens_0.0.8_1639469469190_0.16558117502080383"},"_hasShrinkwrap":false,"publish_time":1639469469378,"_cnpm_publish_time":1639469469378,"_cnpmcore_publish_time":"2021-12-17T00:39:47.949Z"},"0.0.7":{"name":"@optimizely/design-tokens","private":false,"version":"0.0.7","description":"Re-usable design tokens to be used within Optimizely themes.","license":"Apache-2.0","scripts":{"build":"node src/create-tokens","eslint":"eslint --ext js,jsx,ts,tsx .","release":"standard-version"},"devDependencies":{"standard-version":"^9.2.0","style-dictionary":"^3.0.0"},"_id":"@optimizely/design-tokens@0.0.7","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"shasum":"93bf2e42758e495cf17567e42d9e9b96aa57db49","size":548448,"noattachment":false,"key":"/@optimizely/design-tokens/-/@optimizely/design-tokens-0.0.7.tgz","tarball":"http://registry.cnpm.dingdandao.com/@optimizely/design-tokens/download/@optimizely/design-tokens-0.0.7.tgz"},"_npmUser":{"name":"optimizely-eng","email":"engineering-npm@optimizely.com"},"directories":{},"maintainers":[{"name":"optimizely-eng","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-tokens_0.0.7_1631805522107_0.2211184840044509"},"_hasShrinkwrap":false,"publish_time":1631805522346,"_cnpm_publish_time":1631805522346,"_cnpmcore_publish_time":"2021-12-17T00:39:49.717Z"},"0.0.6":{"name":"@optimizely/design-tokens","private":false,"version":"0.0.6","description":"Re-usable design tokens to be used within Optimizely themes.","license":"Apache-2.0","scripts":{"build":"node src/create-tokens","eslint":"eslint --ext js,jsx,ts,tsx .","release":"standard-version"},"devDependencies":{"standard-version":"^9.2.0","style-dictionary":"^3.0.0"},"_id":"@optimizely/design-tokens@0.0.6","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"shasum":"29db8c6780e022c09cac455942e7fa5b0dd0a5ee","size":548025,"noattachment":false,"key":"/@optimizely/design-tokens/-/@optimizely/design-tokens-0.0.6.tgz","tarball":"http://registry.cnpm.dingdandao.com/@optimizely/design-tokens/download/@optimizely/design-tokens-0.0.6.tgz"},"_npmUser":{"name":"optimizely-eng","email":"engineering-npm@optimizely.com"},"directories":{},"maintainers":[{"name":"optimizely-eng","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-tokens_0.0.6_1631003866107_0.19294009161187464"},"_hasShrinkwrap":false,"publish_time":1631003866345,"_cnpm_publish_time":1631003866345,"_cnpmcore_publish_time":"2021-12-17T00:39:51.074Z"},"0.0.5":{"name":"@optimizely/design-tokens","private":false,"version":"0.0.5","description":"Re-usable design tokens to be used within Optimizely themes.","license":"Apache-2.0","scripts":{"build":"node src/create-tokens","eslint":"eslint --ext js,jsx,ts,tsx .","release":"standard-version"},"devDependencies":{"standard-version":"^9.2.0","style-dictionary":"^2.10.3"},"_id":"@optimizely/design-tokens@0.0.5","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"shasum":"782ae6f5c0379591ac6aacef58a524e1007fe1b2","size":547909,"noattachment":false,"key":"/@optimizely/design-tokens/-/@optimizely/design-tokens-0.0.5.tgz","tarball":"http://registry.cnpm.dingdandao.com/@optimizely/design-tokens/download/@optimizely/design-tokens-0.0.5.tgz"},"_npmUser":{"name":"optimizely-eng","email":"engineering-npm@optimizely.com"},"directories":{},"maintainers":[{"name":"optimizely-eng","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-tokens_0.0.5_1627980116691_0.02891831102796827"},"_hasShrinkwrap":false,"publish_time":1627980116866,"_cnpm_publish_time":1627980116866,"_cnpmcore_publish_time":"2021-12-17T00:39:52.360Z"},"0.0.4":{"name":"@optimizely/design-tokens","private":false,"version":"0.0.4","description":"Re-usable design tokens to be used within Optimizely themes.","license":"Apache-2.0","scripts":{"build":"node src/create-tokens","eslint":"eslint --ext js,jsx,ts,tsx .","release":"standard-version"},"devDependencies":{"standard-version":"^9.2.0","style-dictionary":"^2.10.3"},"_id":"@optimizely/design-tokens@0.0.4","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"shasum":"b11f10fba69e3c94f3b73470ce08d16c7964b9d3","size":531510,"noattachment":false,"key":"/@optimizely/design-tokens/-/@optimizely/design-tokens-0.0.4.tgz","tarball":"http://registry.cnpm.dingdandao.com/@optimizely/design-tokens/download/@optimizely/design-tokens-0.0.4.tgz"},"_npmUser":{"name":"optimizely-eng","email":"engineering-npm@optimizely.com"},"directories":{},"maintainers":[{"name":"optimizely-eng","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-tokens_0.0.4_1625676873412_0.09987862323952812"},"_hasShrinkwrap":false,"publish_time":1625676873601,"_cnpm_publish_time":1625676873601,"_cnpmcore_publish_time":"2021-12-17T00:39:53.949Z"},"0.0.3":{"name":"@optimizely/design-tokens","private":false,"version":"0.0.3","description":"Re-usable design tokens to be used within Optimizely themes.","license":"Apache-2.0","scripts":{"build":"node src/create-tokens","eslint":"eslint --ext js,jsx,ts,tsx .","release":"standard-version"},"devDependencies":{"standard-version":"^9.2.0","style-dictionary":"^2.10.3"},"_id":"@optimizely/design-tokens@0.0.3","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"shasum":"ff4645ce5975f1e3977957bb5c4758669f856fbe","size":531031,"noattachment":false,"key":"/@optimizely/design-tokens/-/@optimizely/design-tokens-0.0.3.tgz","tarball":"http://registry.cnpm.dingdandao.com/@optimizely/design-tokens/download/@optimizely/design-tokens-0.0.3.tgz"},"_npmUser":{"name":"optimizely-eng","email":"engineering-npm@optimizely.com"},"directories":{},"maintainers":[{"name":"optimizely-eng","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-tokens_0.0.3_1623405301188_0.2529734121628189"},"_hasShrinkwrap":false,"publish_time":1623405301413,"_cnpm_publish_time":1623405301413,"_cnpmcore_publish_time":"2021-12-17T00:39:55.439Z"},"0.0.2":{"name":"@optimizely/design-tokens","private":false,"version":"0.0.2","description":"Re-usable design tokens to be used within Optimizely themes.","license":"Apache-2.0","scripts":{"build":"node src/create-tokens","release":"standard-version"},"devDependencies":{"prettier":"^2.2.1","standard-version":"^9.2.0","style-dictionary":"^2.10.3"},"_id":"@optimizely/design-tokens@0.0.2","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"shasum":"394643d078c01716ed8ed46ed009b4341990f0f8","size":530835,"noattachment":false,"key":"/@optimizely/design-tokens/-/@optimizely/design-tokens-0.0.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/@optimizely/design-tokens/download/@optimizely/design-tokens-0.0.2.tgz"},"_npmUser":{"name":"optimizely-eng","email":"engineering-npm@optimizely.com"},"directories":{},"maintainers":[{"name":"optimizely-eng","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-tokens_0.0.2_1620390038903_0.6450511105072354"},"_hasShrinkwrap":false,"publish_time":1620390039145,"_cnpm_publish_time":1620390039145,"_cnpmcore_publish_time":"2021-12-17T00:39:57.539Z"},"0.0.1":{"name":"@optimizely/design-tokens","private":false,"version":"0.0.1","description":"Re-usable design tokens to be used within Optimizely themes.","license":"Apache-2.0","scripts":{"build":"node src/create-tokens"},"devDependencies":{"prettier":"^2.2.1","style-dictionary":"^2.10.3"},"_id":"@optimizely/design-tokens@0.0.1","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"shasum":"a7ee6dbc3565e6e9d407a14b54b365134906e46e","size":10365,"noattachment":false,"key":"/@optimizely/design-tokens/-/@optimizely/design-tokens-0.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@optimizely/design-tokens/download/@optimizely/design-tokens-0.0.1.tgz"},"_npmUser":{"name":"optimizely-eng","email":"engineering-npm@optimizely.com"},"directories":{},"maintainers":[{"name":"optimizely-eng","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-tokens_0.0.1_1618488995157_0.03559801353900838"},"_hasShrinkwrap":false,"publish_time":1618488995304,"_cnpm_publish_time":1618488995304,"_cnpmcore_publish_time":"2021-12-17T00:39:57.733Z"}},"readme":"<h1 align=\"center\">Axiom Design Tokens Library</h1>\n\n<div align=\"center\">\n\nRe-usable design tokens to be used within Optimizely themes.\n\n[![npm version](https://badge.fury.io/js/%40optimizely%2Fdesign-tokens.svg)](https://www.npmjs.com/package/@optimizely/design-tokens)\n[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)\n\n</div>\n\n## Links\n\n- [Style Guide](https://design.optimizely.com/style-guidelines)\n- [Design Token Documentation](https://design.optimizely.com/style-guidelines/design-tokens)\n\n## Installation\n\n```bash\nnpm install @optimizely/design-tokens\n```\n\n```bash\nyarn add @optimizely/design-tokens\n```\n\nFor usage, see examples:\n\n- [SASS](#sass)\n- [LESS](#less)\n- [CSS variables](#css)\n- [Javascript](#javascript)\n\n## Tokens\n\nTokens can be accessed from the package using the following url pattern:\n\n```@optimizely/design-tokens/dist/<format>/<token-package>```\n\nCurrently supported formats:\n- sass\n- less\n- css\n- js\n- json\n\nToken packages currently available:\n\n- colors (all)\n- typography (all)\n- typography-map (scss, less)\n\n## Fonts\n\nAxiom design system uses Inter. The font can be found locally in the fonts folder:\n\n```@optimizely/design-tokens/dist/fonts/fonts.css```\n\n\nTo include it with webpack, add the following rule:\n\n```javascript\n{\n    test: /\\.(woff|woff2)$/,\n    use: {\n        loader: \"file-loader\",\n        options: {\n            context: path.resolve(__dirname, \"../node_modules/@optimizely/design-tokens/dist/fonts\")\n        }\n    }\n}\n```\n\nWhen using Inter for numbers, it's recommended to make them monospaced. Inter supports this by setting the font feature setting to `tnum`: \n\n```css\n{\n    ...\n    font-feature-settings: \"tnum\";\n}\n```\n\n## Brand Assets\n\nSome brand assets are included in the design tokens package in order to simplify distribution. These can be found in the `@optimizely/design-tokens/dist/brand-assets` folder.\n\nTo enable svg and png import with webpack, add the following rule:\n\n```javascript\n{\n    test: /\\.(svg|png)$/,\n    use: {\n        loader: \"file-loader\",\n        options: {\n            context: path.resolve(__dirname, \"../node_modules/@optimizely/design-tokens/dist/brand-assets\")\n        }\n    }\n}\n```\n\n## Examples\n### SASS\nTo use color tokens via sass:\n```scss\n@use \"@optimizely/design-tokens/dist/scss/colors\" as axiom-colors;\n\n$your-primary-color: axiom-colors.$brand-primary-color;\n\n```\n\n> We strongly recommend using the [new module system](https://sass-lang.com/documentation/at-rules/use) whenever it's possible to avoid style conflicts and unexpected behavior.\n\nTo include the fonts via sass:\n\n```scss\n@import \"@optimizely/design-tokens/dist/fonts/fonts.css\";\n\n```\nMake sure it's included in a root file so it's available everywhere.\n\n#### SASS with webpack\n\n1. Install sass-loader, sass. `npm install sass-loader sass --save-dev`\n2. Add a new rule to `webpack.config.js` for .scss files\n\n```javascript\n{\n    test: /\\.s[ac]ss$/i,\n    use: [\n        // Creates `style` nodes from JS strings\n        \"style-loader\",\n        // Translates CSS into CommonJS\n        \"css-loader\",\n        // Compiles Sass to CSS\n        \"sass-loader\",\n    ],\n},\n```\n\nFor more information see: https://webpack.js.org/loaders/sass-loader/\n\n### LESS\nTo use color tokens via less:\n```less\n@import \"@optimizely/design-tokens/dist/less/colors\";\n\n@your-primary-color: @axiom-brand-primary-color;\n\n```\n\nTo include the font via less:\n```less\n@import (css) \"@optimizely/design-tokens/dist/fonts/fonts\";\n\n```\n\n#### LESS with webpack\n\nSee: https://webpack.js.org/loaders/less-loader/\n\n#### LESS with gulp\n\n1. Install gulp-less. `npm install --save-dev gulp-less`\n2. Add a new task to `gulpfile.js` for .less files, or change an existing task.\n\n```javascript\ntask(\"build-less\", () => {\n    return src([\"**/*.less\"]).pipe(\n        less({\n            paths: [path.join(__dirname, \"node_modules\")],\n        })\n    );\n});\n```\n\n### CSS\nTo use color tokens via css variables in a stylesheet:\n```css\n@import \"node_modules/@optimizely/design-tokens/dist/css/colors.css\";\n\n:root {\n    --your-primary-color: var(--axiom-brand-primary-color);\n}\n\n/* Or use directly */\n\n.some-class {\n    background-color: var(--axiom-brand-primary-color);\n}\n\n```\n\nTo include the font:\n```css\n@import \"node_modules/@optimizely/design-tokens/dist/fonts/fonts.css\";\n\n```\n\nIn html:\n\n```html\n<!DOCTYPE html>\n<html>\n    <head>\n        ...\n        <link rel=\"stylesheet\" href=\"node_modules/@optimizely/design-tokens/dist/fonts/fonts.css\">\n        <link rel=\"stylesheet\" href=\"node_modules/@optimizely/design-tokens/dist/css/colors.css\">\n    </head>\n    <style>\n        :root {\n            --your-primary-color: var(--axiom-brand-primary-color);\n        }\n\n        /* Or use directly */\n\n        .some-class {\n            background-color: var(--axiom-brand-primary-color);\n        }\n    </style>\n        ...\n        ...\n</html>\n\n```\n\n> Make sure the axiom design token css file is included last so any other css variable can be correctly overriden.\n\n### Javascript\nTo use color tokens via ES6 JavaScript or inside a React component:\n```jsx\nimport * as axiomColors from '@optimizely/design-tokens/dist/js/colors';\n\nconst primaryStyle = {\n    backgroundColor: axiomColors.brandPrimaryColor\n};\n\nconst StyledButton = <button style={primaryStyle}>Press me</button>\n\n```\n\n> The javascript provided in the module is by default ES6. If older javascript support is needed, we recommend transpiling the module using webpack or similar tool. Example using webpack can be found here: https://webpack.js.org/loaders/babel-loader/\n\n\n\n","_attachments":{},"license":"Apache-2.0"}