@xandme-protocol/tokens NPM

Protocol Tokens

Design tokens for Protocol, Mozilla’s design system.

JavaScript · JSON · CSS · SCSS

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.

Using npm:

npm install @mozilla-protocol/tokens --save

Using yarn:

yarn add @mozilla-protocol/tokens

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 variables and map keys are formatted in kebab-case.

// Using variables
@import '~@mozilla-protocol/tokens/dist/index';

a {
  color: $color-black;
}

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);
}

We have a code of conduct, please follow it in all your interactions with the project.

Read the contributing guide to learn how to propose changes and understand our development process.

The protocol-tokens project is available under the MPL-2.0.

5 years ago

5 years ago