4.11.0 • Published 17 days ago
@skyscanner/bpk-foundations-react-native v4.11.0
@skyscanner/bpk-foundations-react-native
React Native design tokens for colours, spacing, font, etc.
Installation
npm install @skyscanner/bpk-foundations-react-native --save-dev
Usage
JavaScript (ES6 module):
For React Native:
// Individual tokens
import { spacingBase } from '@skyscanner/bpk-foundations-react-native/tokens/base.react.native';
console.log(spacingBase);
// Whole token categories
import { colors } from '@skyscanner/bpk-foundations-react-native/tokens/base.react.native';
console.log(colors.colorSkyGrayTint01);
// All tokens
import * as tokens from '@skyscanner/bpk-foundations-react-native/tokens/base.react.native';
console.log(tokens);
For web:
// Individual tokens
import { spacingBase } from '@skyscanner/bpk-foundations-react-native/tokens/base.es6';
console.log(spacingBase);
// Whole token categories
import { colors } from '@skyscanner/bpk-foundations-react-native/tokens/base.es6';
console.log(colors.colorSkyGrayTint01);
// All tokens
import * as tokens from '@skyscanner/bpk-foundations-react-native/tokens/base.es6';
console.log(tokens);
JavaScript (CommonJS):
// Individual tokens
import { spacingBase } from '@skyscanner/bpk-foundations-react-native/tokens/base.common';
console.log(spacingBase);
// All tokens
import * as tokens from '@skyscanner/bpk-foundations-react-native/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-react-native/tokens/base.react.native';
import { setOpacity } from '@skyscanner/bpk-foundations-react-native';
const transparentBlue500 = setOpacity(colorSkyBlue, 0.7);
console.log(transparentBlue500);
4.11.0
17 days ago
4.10.0
2 months ago
4.9.1
3 months ago
4.9.0
4 months ago
4.8.0
5 months ago
4.6.2
6 months ago
4.5.0
7 months ago
4.4.0
8 months ago
4.7.0
6 months ago
4.6.1
6 months ago
4.6.0
6 months ago
4.3.0
8 months ago
4.2.0
9 months ago
4.1.0
1 year ago
4.0.0
1 year ago
3.1.5
1 year ago
3.1.3
2 years ago
3.1.2
2 years ago
3.1.1
2 years ago
3.0.2
2 years ago
3.1.0
2 years ago
3.0.1
2 years ago
3.1.4
2 years ago
3.0.0
2 years ago
2.3.0
2 years ago
2.2.1
2 years ago
2.2.0
2 years ago
2.1.1
2 years ago
2.4.1
2 years ago
2.4.0
2 years ago
2.1.0
2 years ago
2.0.0
2 years ago
1.6.1
2 years ago
1.6.0
2 years ago
1.5.1
2 years ago
1.5.0
2 years ago
1.4.1
2 years ago
1.4.0
2 years ago
1.3.0
2 years ago
1.2.2
2 years ago
1.2.0
2 years ago
1.1.1
2 years ago
1.2.1
2 years ago
1.1.2
2 years ago
1.1.0
3 years ago
1.0.0
3 years ago