@mozilla-protocol/tokens

    5.0.5 • Public • Published

    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.

    Install

    npm i @mozilla-protocol/tokens

    DownloadsWeekly Downloads

    186

    Version

    5.0.5

    License

    MPL-2.0

    Unpacked Size

    194 kB

    Total Files

    71

    Last publish

    Collaborators

    • reemhamoui
    • maureenlholland
    • agibsonmoz
    • craigcook
    • stephaniehobsonmoz