Skip to content

Design tokens for Protocol, Mozilla’s design system.

License

Notifications You must be signed in to change notification settings

mozilla/protocol-tokens

Repository files navigation

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 5.0.5

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

Publishing

To publish to the npmjs registry you'll need access to the mozilla-protocol org on npmjs.com. First run gulp to compile the package locally. You can check your local dist folder to verify it has the up-to-date tokens. Then run npm publish.

Contributing

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.

About

Design tokens for Protocol, Mozilla’s design system.

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published