@skyscanner/bpk-foundations-web v17.11.0
@skyscanner/bpk-foundations-web
Design tokens for colours, spacing, font, etc.
Installation
npm install @skyscanner/bpk-foundations-web --save-dev
Usage
Sass:
@import '~@skyscanner/bpk-foundations-web/tokens/base.default.scss';
.my-selector {
padding: $bpk-spacing-base;
}
JavaScript (ES6 module):
For web:
// Individual tokens
import { spacingBase } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
console.log(spacingBase);
// Whole token categories
import { colors } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
console.log(colors.colorSkyGrayTint01);
// All tokens
import * as tokens from '@skyscanner/bpk-foundations-web/tokens/base.es6';
console.log(tokens);
JavaScript (CommonJS):
// Individual tokens
import { spacingBase } from '@skyscanner/bpk-foundations-web/tokens/base.common';
console.log(spacingBase);
// All tokens
import * as tokens from '@skyscanner/bpk-foundations-web/tokens/base.common';
console.log(tokens);
Transparency
It is possible to add opacity to Backpack color tokens as follows:
import { colorSkyBlue } from '@skyscanner/bpk-foundations-web/tokens/base.common';
import { setOpacity } from '@skyscanner/bpk-foundations-web';
const transparentBlue500 = setOpacity(colorSkyBlue, 0.7);
console.log(transparentBlue500);
11 days ago
13 days ago
2 months ago
3 months ago
4 months ago
5 months ago
7 months ago
6 months ago
8 months ago
6 months ago
6 months ago
6 months ago
8 months ago
7 months ago
9 months ago
5 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 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