Next Planet of Monkeys

    @skyscanner/bpk-foundations-web

    13.0.0 • Public • Published

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

    Keywords

    none

    Install

    npm i @skyscanner/bpk-foundations-web

    DownloadsWeekly Downloads

    2,809

    Version

    13.0.0

    License

    Apache-2.0

    Unpacked Size

    488 kB

    Total Files

    14

    Last publish

    Collaborators

    • gert-jan.vercauteren
    • frugoman
    • zgeor
    • anambl
    • marianeumayer-skyscanner
    • ojcurt