Nanometers Per Millisecond

    @kano/kbc-tokens

    2.0.6 • Public • Published

    kbc-tokens

    A set of Scss and JSON tokens for styling kano components and apps.

    Usage

    JS

    In JavaScript files, import all base tokens as an object:

    import * as KbcTokens from '@kano/kbc-tokens';

    Types

    There are also types made available which correspond to the variables in the Sass maps.

    All types available are:

    import { colorsType } from '@kano/kbc-tokens/lib/colors';
    import { allColorsType } from '@kano/kbc-tokens/lib/all-colours';
    import { themeColorsType } from '@kano/kbc-tokens/lib/theme-colors';
    import { spacersType } from '@kano/kbc-tokens/lib/spacers';
    import { containerMaxWidthsType } from '@kano/kbc-tokens/lib/container-max-widths';
    import { breakpointsType } from '@kano/kbc-tokens/lib/breakpoints';

    Sass

    In Sass, there are the main variables which can be imported from:

    @import '~@kano/kbc-tokens/lib/index.scss';

    Overwriting default variables

    Colour and typography variables from kbc-tokens are possible to be overwritten by the local application. To do this in your application, create local variables with the same variable name before importing variables from kbc-tokens:

    // App variables
    @import 'variables';
    // kbc-tokens variables
    @import '~@kano/kbc-tokens/lib/index.scss';

    Maps

    You can also import maps of variables:

    // import the $all-colours-map variable
    @import '~@kano/kbc-tokens/lib/all-colours.map.scss';

    The available maps are:

    // import the $colours-map variable
    @import '~@kano/kbc-tokens/lib/colours.map.scss';
    // import the $theme-colours-map variable
    @import '~@kano/kbc-tokens/lib/theme-colours.map.scss';
    // import the $all-colours-map variable
    @import '~@kano/kbc-tokens/lib/all-colours.map.scss';
    // import the $breakpoints-map variable
    @import '~@kano/kbc-tokens/lib/breakpoints.map.scss';
    // import the $container-max-widths-map variable
    @import '~@kano/kbc-tokens/lib/container-max-widths.map.scss';
    // import the $spacers-map variable
    @import '~@kano/kbc-tokens/lib/spacers.map.scss';

    Keywords

    none

    Install

    npm i @kano/kbc-tokens

    DownloadsWeekly Downloads

    947

    Version

    2.0.6

    License

    ISC

    Unpacked Size

    37.8 kB

    Total Files

    19

    Last publish

    Collaborators

    • petarsimonovic
    • aetheern
    • kimonsatan
    • sophioski
    • hediho
    • ellenw3lsh
    • melissakano
    • camuskano
    • jacobmorgan99
    • alexfiennes
    • kanocomputing
    • rpazdera
    • hicksatkano
    • holographicleah
    • tomkano
    • alexb-kano
    • jamie_old_plantain