Protocol Tokens

Design tokens for Protocol, Mozilla’s design system.

JavaScript · JSON · CSS · SCSS

Information

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.