open-index/open-npm huggingface dataset:
npm package: @skyscanner/bpk-android
Description: Android design tokens for colors, spacing, font, etc.
Author: Backpack Design System
Latest version: 1.0.0
Deprecated: This package is no longer the correct package due to confusion with naming, to use this package please install @skyscanner/bpk-foundations-android instead

# @skyscanner/bpk-android

> Android design tokens for colours, spacing, font, etc.

## Installation

```sh
npm install @skyscanner/bpk-android --save-dev
```

## Usage
npm package: @skyscanner/bpk-common
Description: Common Backpack design tokens for colors, spacing, font, etc.
Author: Backpack Design System
Latest version: 1.0.0

# @skyscanner/bpk-common

> Common design tokens for colours, spacing, font, etc.

## Installation

```sh
npm install @skyscanner/bpk-common --save-dev
```

## Usage
npm package: @skyscanner/bpk-foundations-react-native
Description: Common Backpack design tokens for colors, spacing, font, etc.
Author: Backpack Design System
Latest version: 4.13.0
Deprecated: Backpack React Native is no longer supported and maintained. Please seek alternative libraries and migrations

# @skyscanner/bpk-foundations-react-native

> React Native design tokens for colours, spacing, font, etc.

## Installation

```sh
npm install @skyscanner/bpk-foundations-react-native --save-dev
```

## Usage

### JavaScript (ES6 module):

For React Native:

```js
// 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:

```js
// 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):

```js
// 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:

```js
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);
```
npm package: @skyscanner/bpk-ios
Description: Common Backpack design tokens for colors, spacing, font, etc.
Author: Backpack Design System
Latest version: 1.0.0
Deprecated: This package has been renamed. Please use @skyscanner/bpk-foundations-ios

# @skyscanner/bpk-ios

> iOS design tokens for colours, spacing, font, etc.

## Installation

```sh
npm install @skyscanner/bpk-ios --save-dev
```

## Usage
npm package: @skyscanner/bpk-react-native
Description: Common Backpack design tokens for colors, spacing, font, etc.
Author: Backpack Design System
Latest version: 1.0.0
Deprecated: This package is no longer the correct package due to confusion with naming, to use this package please install @skyscanner/bpk-foundations-react-native instead

# @skyscanner/bpk-react-native

> React Native design tokens for colours, spacing, font, etc.

## Installation

```sh
npm install @skyscanner/bpk-react-native --save-dev
```

## Usage

### JavaScript (ES6 module):

For React Native:

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

console.log(spacingBase);

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

console.log(colors.colorSkyGrayTint01);

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

console.log(tokens);
```

For web:

```js
// Individual tokens
import { spacingBase } from '@skyscanner/bpk-react-native/tokens/base.es6';

console.log(spacingBase);

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

console.log(colors.colorSkyGrayTint01);

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

console.log(tokens);
```

### JavaScript (CommonJS):

```js
// Individual tokens
import { spacingBase } from '@skyscanner/bpk-react-native/tokens/base.common';

console.log(spacingBase);

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

console.log(tokens);
```

## Transparency

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

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

const transparentBlue500 = setOpacity(colorSkyBlue, 0.7);

console.log(transparentBlue500);
```
npm package: @skyscanner/bpk-svgs
Description: Backpack's library of SVG's.
Author: Backpack Design System
Latest version: 20.12.0

# bpk-svgs

[![Build Status](https://github.com/Skyscanner/bpk-svgs/workflows/Foundations%20CI/badge.svg)](https://github.com/Skyscanner/bpk-svgs/actions)

> Backpack's collection of SVGs.

## Installation

```sh
npm install @skyscanner/bpk-svgs --save-dev
```

## Usage

This package exposes Backpack SVGs in various formats:

- React components
  ```
  dist/js/icons/lg/*
  dist/js/icons/sm/*
  dist/js/spinners/*
  ```

- An icon font
  ```
  dist/font/BpkIcon.ttf
  ```

## Implementation 

`.svg` assets are stored within `./src` and various different formats are generated based upon this source. The generation tasks are defined within `gulpfile.mjs`. 

### JS

For web consumption, `.svg` files are transformed into individual react components. [svgr](https://react-svgr.com/) is used to power the transformation, optimisation and form of the resulting react component. The current `svgr` setup will create typescript components, in order to provide consumers with `.js` assets to consume within their react codebase, `typescript` is used to transpile from typescript to javascript. `.d.ts` files are nested alongside the original source to provide typescript types to consumers.


## Contributing

To contribute please see [contributing.md](CONTRIBUTING.md).