neutron-tokens

Neutron tokens - UI tokens for kn_shop8online Design System

The tokens are consist of:

1. Color
2. Radius
3. Shadow
4. Typography

Install

Using npm:

npm i neutron-tokens

or using yarn:

yarn add neutron-tokens

Usage

Color

import { red1 } from 'neutron-tokens/build/colors';

...

.someclass {
  color: ${red1};
  background-color: ${red1};
}

red1 = '#FFF1F0';
red2 = '#FFCCC7';
red3 = '#FFA39E';
red4 = '#FF7875';
red5 = '#FF4D4F';
red6 = '#F5222D';
red7 = '#CF1322';
red8 = '#A8071A';
red9 = '#820014';
red10 = '#5C0011';

volcano1 = '#FFF2E8';
volcano2 = '#FFD8BF';
volcano3 = '#FFBB96';
volcano4 = '#FF9C6E';
volcano5 = '#FF7A45';
volcano6 = '#FA541C';
volcano7 = '#D4380D';
volcano8 = '#AD2102';
volcano9 = '#871400';
volcano10 = '#610B00';

orange1 = '#FFF7E6';
orange2 = '#FFE7BA';
orange3 = '#FFD591';
orange4 = '#FFC069';
orange5 = '#FFA940';
orange6 = '#FA8C16';
orange7 = '#D46B08';
orange8 = '#AD4E00';
orange9 = '#873800';
orange10 = '#612500';

gold1 = '#FFFBE6';
gold2 = '#FFF1B8';
gold3 = '#FFE58F';
gold4 = '#FFD666';
gold5 = '#FFC53D';
gold6 = '#FAAD14';
gold7 = '#D48806';
gold8 = '#AD6800';
gold9 = '#874D00';
gold10 = '#613400';

yellow1 = '#FEFFE6';
yellow2 = '#FFFFB8';
yellow3 = '#FFFB8F';
yellow4 = '#FFF566';
yellow5 = '#FFEC3D';
yellow6 = '#FADB14';
yellow7 = '#D4B106';
yellow8 = '#AD8B00';
yellow9 = '#876800';
yellow10 = '#614700';

lime1 = '#FCFFE6';
lime2 = '#F4FFB8';
lime3 = '#EAFF8F';
lime4 = '#D3F261';
lime5 = '#BAE637';
lime6 = '#A0D911';
lime7 = '#7CB305';
lime8 = '#5B8C00';
lime9 = '#3F6600';
lime10 = '#254000';

green1 = '#F6FFED';
green2 = '#D9F7BE';
green3 = '#B7EB8F';
green4 = '#95DE64';
green5 = '#73D13D';
green6 = '#52C41A';
green7 = '#389E0D';
green8 = '#237804';
green9 = '#135200';
green10 = '#092B00';

cyan1 = '#E6FFFB';
cyan2 = '#B5F5EC';
cyan3 = '#87E8DE';
cyan4 = '#5CDBD3';
cyan5 = '#36CFC9';
cyan6 = '#13C2C2';
cyan7 = '#08979C';
cyan8 = '#006D75';
cyan9 = '#00474F';
cyan10 = '#002329';

blue1 = '#E6F7FF';
blue2 = '#BAE7FF';
blue3 = '#91D5FF';
blue4 = '#69C0FF';
blue5 = '#40A9FF';
blue6 = '#1890FF';
blue7 = '#096DD9';
blue8 = '#0050B3';
blue9 = '#003A8C';
blue10 = '#002766';

purple1 = '#F9F0FF';
purple2 = '#EFDBFF';
purple3 = '#D3ADF7';
purple4 = '#B37FEB';
purple5 = '#9254DE';
purple6 = '#722ED1';
purple7 = '#531DAB';
purple8 = '#391085';
purple9 = '#22075E';
purple10 = '#120338';

magenta1 = '#FFF0F6';
magenta2 = '#FFD6E7';
magenta3 = '#FFADD2';
magenta4 = '#FF85C0';
magenta5 = '#F759AB';
magenta6 = '#EB2F96';
magenta7 = '#C41D7F';
magenta8 = '#9E1068';
magenta9 = '#780650';
magenta10 = '#520339';

neutral1 = '#FFFFFF';
neutral2 = '#FAFAFA';
neutral3 = '#F5F5F5';
neutral4 = '#E8E8E8';
neutral5 = '#D9D9D9';
neutral6 = '#BFBFBF';
neutral7 = '#8C8C8C';
neutral8 = '#595959';
neutral9 = '#262626';
neutral10 = '#000000';

Radius

import { radiusSmall } from 'neutron-tokens/build/radiuss';

...

.someclass {
  border-radius: ${radiusSmall};
}

All

radiusSmall = '8px';
radiusMedium = '16px';
radiusLarge = '15rem';
radiusCircle = '50%';

Shadow

import { shadowTop1 } from 'neutron-tokens/build/shadows';

...

.someclass {
  box-shadow: ${shadowTop1};
}

Top

shadowTop1 = '0px -1px 6px 0px rgba(49, 53, 59, 0.12)';
shadowTop2 = '0px -2px 16px 0px rgba(49, 53, 59, 0.12)';
shadowTop3 = '0px -6px 28px 0px rgba(49, 53, 59, 0.12)';

Middle

shadowMiddle1 = '0px 1px 6px 0px rgba(49, 53, 59, 0.12)';
shadowMiddle2 = '0px 0px 16px 0px rgba(49, 53, 59, 0.12)';
shadowMiddle3 = '0px 0px 48px 0px rgba(49, 53, 59, 0.12)';

Bottom

shadowBottom1 = '0px 2px 6px 0px rgba(49, 53, 59, 0.12)';
shadowBottom2 = '0px 6px 16px 0px rgba(49, 53, 59, 0.12)';
shadowBottom3 = '0px 10px 28px 0px rgba(49, 53, 59, 0.12)';

Typography

import { fontSize1 } from 'neutron-tokens/build/typographies';

...

.someclass {
  font-size: ${fontSize1};
}

Font Size

fontSize1 = '10px';
fontSize2 = '12px';
fontSize3 = '14px';
fontSize4 = '16px';
fontSize5 = '18px';
fontSize6 = '20px';
fontSize7 = '22px';
fontSize8 = '24px';
fontSize9 = '26px';
fontSize10 = '28px';
fontSize11 = '30px';
fontSize12 = '32px';
fontSize13 = '34px';
fontSize14 = '36px';
fontSize15 = '38px';
fontSize16 = '40px';
fontSize17 = '42px';
fontSize18 = '44px';
fontSize19 = '46px';
fontSize20 = '48px';
fontSize21 = '50px';
fontSize22 = '52px';
fontSize23 = '54px';
fontSize24 = '56px';
fontSize25 = '58px';
fontSize26 = '60px';
fontSize27 = '62px';
fontSize28 = '64px';

Font Weight

fontWeightLight = 400;
fontWeightRegular = 500;
fontWeightBold = 700;
fontWeightExtraBold = 800;

Line Height

lineHeight1 = '16px';
lineHeight2 = '18px';
lineHeight3 = '20px';
lineHeight4 = '22px';
lineHeight5 = '24px';
lineHeight6 = '26px';
lineHeight7 = '30px';
lineHeight8 = '34px';
lineHeight9 = '40px';
lineHeight10 = '44px';

Letter Spacing

letterSpacing1 = '0.1px';
letterSpacing2 = '0.2px';
letterSpacing3 = '0.3px';
letterSpacing4 = '0.4px';
letterSpacing5 = '0.5px';