@kano/kbc-tokens
Design tokens for kano apps and components
Last updated 19 days ago by alicemarshall .
ISC · Original npm · Tarball · package.json
$ cnpm install @kano/kbc-tokens 
SYNC missed versions from official npm registry.

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

Current Tags

  • 1.0.3                                ...           latest (19 days ago)

33 Versions

  • 1.0.3                                ...           19 days ago
  • 1.0.2                                ...           a month ago
  • 1.0.1                                ...           2 months ago
  • 1.0.0                                ...           3 months ago
  • 4.25.2-alpha.0                                ...           4 months ago
  • 4.25.0-alpha.0                                ...           4 months ago
  • 4.23.1-alpha.0                                ...           4 months ago
  • 4.22.25-alpha.0                                ...           4 months ago
  • 4.22.22-alpha.0                                ...           4 months ago
  • 4.22.18-alpha.0                                ...           4 months ago
  • 4.22.17-alpha.0                                ...           4 months ago
  • 4.22.14-alpha.0                                ...           4 months ago
  • 4.22.11-alpha.0                                ...           4 months ago
  • 4.22.7-alpha.0                                ...           4 months ago
  • 4.22.5-alpha.0                                ...           5 months ago
  • 4.22.1-alpha.0                                ...           5 months ago
  • 4.20.4-alpha.0                                ...           5 months ago
  • 4.20.0-alpha.0                                ...           5 months ago
  • 4.19.3-alpha.0                                ...           5 months ago
  • 4.17.1-alpha.0                                ...           5 months ago
  • 4.16.4-alpha.0                                ...           5 months ago
  • 4.16.3-alpha.0                                ...           6 months ago
  • 4.14.12-alpha.0                                ...           6 months ago
  • 4.14.10-alpha.0                                ...           6 months ago
  • 4.14.3-alpha.0                                ...           6 months ago
  • 4.14.1-alpha.0                                ...           7 months ago
  • 4.13.0-alpha.0                                ...           7 months ago
  • 4.12.0-alpha.0                                ...           7 months ago
  • 4.11.5-alpha.0                                ...           7 months ago
  • 4.10.1-alpha.0                                ...           7 months ago
  • 4.9.2-alpha.0                                ...           7 months ago
  • 4.8.0-alpha.0                                ...           7 months ago
  • 4.6.0-alpha.0                                ...           7 months ago

Copyright 2014 - 2016 © taobao.org |