# bpk-tokens

> Backpack design tokens for colors, spacing, font, etc.

Latest version **36.2.3** (published 2021-06-30) · Apache-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install bpk-tokens
pnpm add bpk-tokens
yarn add bpk-tokens
bun add bpk-tokens
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 36.2.3 |
| Published | 2021-06-30 |
| First published | 2016-07-20 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 623.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 543 |
| Author | Backpack Design System |
| Maintainers | k0nserv, georgegillams, shaundon, ojcurt, mattface |

## Links

- npm: https://www.npmjs.com/package/bpk-tokens
- Repository: https://github.com/Skyscanner/backpack
- Homepage: https://github.com/Skyscanner/backpack#readme
- Issues: https://github.com/Skyscanner/backpack/issues
- npm.io page: https://npm.io/package/bpk-tokens

## Dependencies (1)

- [color](https://npm.io/package/color.md) ^3.1.3

## Recent versions

- 36.2.3 (latest) — 2021-06-30
- 32.0.5-css.0 (css) — 2020-05-26
- 28.0.1-alpha.2 (canary) — 2019-09-26
- 27.1.0-beta.5 (beta) — 2018-10-19
- 36.2.2 — 2021-06-02
- 36.2.1 — 2021-05-13
- 36.2.0 — 2021-04-29
- 36.1.2 — 2021-04-27
- 36.1.1 — 2021-01-21
- 36.1.0 — 2021-01-13
- 36.0.4 — 2021-01-08
- 36.0.3 — 2020-12-17
- 36.0.2 — 2020-12-11
- 36.0.1 — 2020-11-04
- 36.0.0 — 2020-10-27
- … 235 more at https://npm.io/package/bpk-tokens/versions

## README

# bpk-tokens

> Design tokens for colours, spacing, font, etc.

## Installation

```sh
npm install bpk-tokens --save-dev
```

## Usage

### Sass:

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

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

### JavaScript (ES6 module):

For React Native:

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

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

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

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

const transparentBlue500 = setOpacity(colorSkyBlue, 0.7);

console.log(transparentBlue500);
```

---
_Source: https://npm.io/package/bpk-tokens · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._