19.6.0 • Published 1 month ago

@skyscanner/bpk-foundations-web v19.6.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
1 month ago

@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);
19.0.0

8 months ago

19.4.1

3 months ago

19.4.2

2 months ago

19.3.0

4 months ago

19.2.0

6 months ago

19.6.0

1 month ago

19.1.0

6 months ago

19.5.0

2 months ago

18.1.0

1 year ago

18.0.0

1 year ago

17.14.0

1 year ago

17.13.0

1 year ago

17.12.0

1 year ago

17.11.0

1 year ago

17.10.0

1 year ago

17.9.0

1 year ago

17.8.1

1 year ago

17.8.0

2 years ago

17.7.0

2 years ago

17.3.0

2 years ago

17.5.0

2 years ago

17.1.0

2 years ago

17.5.2

2 years ago

17.5.1

2 years ago

17.5.3

2 years ago

17.2.0

2 years ago

17.4.0

2 years ago

17.0.0

2 years ago

17.6.0

2 years ago

16.1.0

2 years ago

16.0.0

2 years ago

15.3.0

2 years ago

15.1.0

2 years ago

15.2.0

2 years ago

15.0.0

2 years ago

14.0.1

2 years ago

14.0.0

2 years ago

13.5.0

3 years ago

13.1.1

3 years ago

13.3.0

3 years ago

13.1.0

3 years ago

13.6.0

3 years ago

13.4.0

3 years ago

13.2.0

3 years ago

13.2.1

3 years ago

12.0.3

3 years ago

12.0.0

3 years ago

12.0.1

3 years ago

12.0.2

3 years ago

11.0.0

3 years ago

11.0.1

3 years ago

13.0.0

3 years ago

12.1.2

3 years ago

12.1.3

3 years ago

12.1.4

3 years ago

12.1.0

3 years ago

12.1.1

3 years ago

9.6.0

3 years ago

9.4.0

3 years ago

9.2.1

3 years ago

10.0.0

3 years ago

10.2.0

3 years ago

10.4.0

3 years ago

9.1.0

3 years ago

9.5.1

3 years ago

9.5.0

3 years ago

9.3.0

3 years ago

10.3.0

3 years ago

10.3.1

3 years ago

9.2.0

3 years ago

9.0.0

3 years ago

8.5.0

3 years ago

8.4.0

3 years ago

8.5.1

3 years ago

8.1.0

3 years ago

8.3.0

3 years ago

8.2.1

3 years ago

8.2.0

3 years ago

8.1.1

3 years ago

7.0.0

3 years ago

8.0.0

3 years ago

6.1.0

3 years ago

6.2.0

3 years ago

6.1.1

3 years ago

6.0.0

3 years ago

5.3.0

3 years ago

5.2.0

3 years ago

5.1.1

3 years ago

5.1.0

3 years ago

5.0.1

3 years ago

5.0.0

3 years ago

4.4.0

3 years ago

4.3.3

3 years ago

4.3.2

4 years ago

4.3.1

4 years ago

4.1.0

4 years ago

4.3.0

4 years ago

4.2.0

4 years ago

4.1.1

4 years ago

4.0.0

4 years ago

3.0.0

4 years ago

2.1.1

4 years ago

2.1.0

4 years ago

2.0.0

4 years ago

1.2.1

4 years ago

1.2.0

4 years ago

1.1.0

4 years ago

1.0.0

4 years ago