# @skyscanner/bpk-foundations-web

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

Latest version **24.9.0** (published 2026-10-06) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @skyscanner/bpk-foundations-web
pnpm add @skyscanner/bpk-foundations-web
yarn add @skyscanner/bpk-foundations-web
bun add @skyscanner/bpk-foundations-web
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 24.9.0 |
| Published | 2026-10-06 |
| First published | 2021-06-07 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 293.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Backpack Design System |
| Maintainers | ojcurt, gert-jan.vercauteren, skyscanner-koalasquad |

## Links

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

## Dependencies (2)

- [color](https://npm.io/package/color.md) ^5.0.0
- [@skyscanner/bpk-foundations-common](https://npm.io/package/@skyscanner/bpk-foundations-common.md) ^24.9.0

## Recent versions

- 24.9.0 (latest) — 2026-10-06
- 24.8.1 — 2026-09-03
- 24.8.0 — 2026-08-24
- 24.7.0 — 2026-07-31
- 24.6.1 — 2026-07-24
- 24.6.0 — 2026-05-09
- 24.5.0 — 2026-04-30
- 24.4.1 — 2026-04-14
- 24.4.0 — 2026-03-31
- 24.3.0 — 2026-03-13
- 24.2.0 — 2026-03-09
- 24.1.0 — 2026-01-12
- 24.0.0 — 2025-12-19
- 23.0.0 — 2025-10-27
- 22.4.0 — 2025-10-09
- … 115 more at https://npm.io/package/@skyscanner/bpk-foundations-web/versions

## README

# @skyscanner/bpk-foundations-web

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

## Installation

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

## Usage

### Sass:

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

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

### JavaScript (ES6 module):

For web:

```js
// Individual tokens
import { colorSkyGrayTint01 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';

console.log(colorSkyGrayTint01);

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

```js
// Individual tokens
import { colorSkyGrayTint01 } from '@skyscanner/bpk-foundations-web/tokens/base.common';

console.log(colorSkyGrayTint01);

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

```js
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);
```

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