@bcredi/design-tokens

The tokens used to build our components and our pages.

Overview

| Package | Version | | ------------------------- | ------- | | @bcredi/design-tokens | |

Usage

The available tokens are for:

• colors: Color pallete
• fonts: Custom fonts and typographic scale
• models: Box-model rules (z-index)
• screens: Grid definitions (viewports, gutters and containers)

To install it in your project, run:

npm i --save @bcredi/design-tokens
# or yarn add @bcredi/design-tokens

After installing it, you'll be able to use it in two different ways:

SCSS

To use it in your Sass stylesheets, import the source file using:

@import '[node_modules path]/@bcredi/design-tokens/dist/[token_file].scss';

PostCSS

To use it in your PostCSS pipe, follow the postcss-map plugin usage with the custom yml files in the options object:

const path = require('path');
const postcss = require('postcss');
const map = require('postcss-map');

const mapsDir = path.join(__dirname, 'node_modules/@bcredi/design-tokens/dist');

const opts = {
  basePath: 'css',
  maps: [`${mapsDir}/[token_file].yml`],
};

postcss()
  .use(map(opts))
  .process(YOUR_CSS_FILE.css)
  .then(result => {
    fs.writeFileSync('output.css', result.css);
  });

JavaScript

You can use the tokens as .js or as .json files:

CommonJS

To use the tokens with default CommonJS:

// js files
const tokenFile = require('@bcredi/design-tokens/dist/[token_file].js');

// json files
const tokenFile = require('@bcredi/design-tokens/dist/[token_file].json');

ES6 Modules

To use the tokens with ES6 Modules:

// js files
import tokens from '@bcredi/design-tokens/dist/[token_file].js';

// json files
import '@bcredi/design-tokens/dist/[token_file].json';

If you have an import resolver, ignore the [node_modules path]

Replace [token_file] with the names from the list above

What's included

• Color palette
• Font-families, font-weights and typographic scale definitions
• Screens sizes and grid breakpoints
• Z-index cascades scheme