Bpk-tokens NPM

bpk-tokens

Design tokens for colours, spacing, font, etc.

Installation

npm install bpk-tokens --save-dev

Usage

Sass:

@import '~bpk-tokens/tokens/base.default.scss';

.my-selector {
  padding: $bpk-spacing-base;
}

JavaScript (ES6 module):

For React Native:

// Individual tokens
import { spacingBase } from 'bpk-tokens/tokens/base.react.native';

console.log(spacingBase);

// Whole token categories
import { colors } from 'bpk-tokens/tokens/base.react.native';

console.log(colors.colorSkyGrayTint01);

// All tokens
import * as tokens from 'bpk-tokens/tokens/base.react.native';

console.log(tokens);

For web:

// Individual tokens
import { spacingBase } from 'bpk-tokens/tokens/base.es6';

console.log(spacingBase);

// Whole token categories
import { colors } from 'bpk-tokens/tokens/base.es6';

console.log(colors.colorSkyGrayTint01);

// All tokens
import * as tokens from 'bpk-tokens/tokens/base.es6';

console.log(tokens);

JavaScript (CommonJS):

// Individual tokens
import { spacingBase } from 'bpk-tokens/tokens/base.common';

console.log(spacingBase);

// All tokens
import * as tokens from 'bpk-tokens/tokens/base.common';

console.log(tokens);

Transparency

It is possible to add opacity to Backpack color tokens as follows:

import { colorSkyBlue } from 'bpk-tokens/tokens/base.react.native';
import { setOpacity } from 'bpk-tokens';

const transparentBlue500 = setOpacity(colorSkyBlue, 0.7);

console.log(transparentBlue500);

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

12.5.0-alpha.a7d78aab

8 years ago

12.5.0

8 years ago

12.4.1

8 years ago

12.4.0-alpha.27779d2b

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

12.0.0-alpha.b0be287c

8 years ago

12.0.0

8 years ago

11.1.0

8 years ago

11.0.0

8 years ago

10.0.1-alpha.273912ea

8 years ago

10.0.1

8 years ago

10.0.0-alpha.ed23c676

8 years ago

10.0.0-alpha.37a2b7c3

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago