Protocol Tokens
Design tokens for Protocol, Mozilla’s design system.
JavaScript · JSON · CSS · SCSS
Information
| Package | @mozilla-protocol/tokens |
| Description | Design tokens for Protocol, Mozilla’s design system |
| Version | 4.0.0 |
Installation
Protocol design tokens are available as an npm package (@mozilla-protocol/tokens) on npm.
The recommended way to use and install design tokens may vary depending on your project; the most common are documented below.
JavaScript package installation
Using npm:
npm install @mozilla-protocol/tokens --save
Using yarn:
yarn add @mozilla-protocol/tokens
JavaScript
In JavaScript, design token names are formatted in lower camelCase.
const tokens = require('@mozilla-protocol/tokens/dist/index');
console.log(tokens.colorBlueLighter); // rgb(0, 0, 0)In JSON, design token names are formatted in kebab-case.
const tokens = require('@mozilla-protocol/tokens/dist/index.json');
console.log(tokens['color-black']); // rgb(0, 0, 0)Sass
Sass variables and map keys are formatted in kebab-case.
// Using variables
@import '~@mozilla-protocol/tokens/dist/index';
a {
color: $color-black;
}Sass, with CSS Custom Properties
Custom properties are formatted in kebab-case.
// Omit .css at the end of the file
@import '~@mozilla-protocol/tokens/dist/colors/colors.custom-properties';
a {
color: var(--color-black);
}Contributing
Code of conduct
We have a code of conduct, please follow it in all your interactions with the project.
Contributing guide
Read the contributing guide to learn how to propose changes and understand our development process.
License
The protocol-tokens project is available under the MPL-2.0.