36.2.3 • Published 3 years ago
bpk-tokens-css v36.2.3
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);
36.2.3
3 years ago
36.2.2
3 years ago
36.2.1
3 years ago
36.1.2
3 years ago
36.2.0
3 years ago
36.1.1
3 years ago
36.1.0
3 years ago
36.0.4
3 years ago
36.0.3
3 years ago
36.0.2
3 years ago
36.0.1
4 years ago
36.0.0
4 years ago
35.0.2
4 years ago
35.0.0
4 years ago
34.2.0
4 years ago
34.1.0
4 years ago
34.0.0
4 years ago
33.0.1
4 years ago
32.1.0
4 years ago
32.0.5
4 years ago