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';