Design tokens for Protocol, Mozilla’s design system.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
gulp
tokens
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
LICENSE
README.md
gulpfile.js
package-lock.json
package.json
stylelint.config.js

README.md

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 2.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.