Skip to content
main
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

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.

About

Design tokens for Protocol, Mozilla’s design system.

Resources

License

Releases

No releases published

Packages

No packages published