Skip to content

TAIKAI design tokens provided by Figma and generated automagically.

Notifications You must be signed in to change notification settings

Ardandxb/design-tokens

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

What are design tokens?

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development. Salesforce, Lightning Design System

Install

npm install @taikai/taikai-design-tokens

Use

Import tokens that you need:

import {
  ColorBrandPrimary,
  SizeFontBase
} from '@taikai/taikai-design-tokens/build/web/taikai/tokens';

Use them where you need them:

Inline

<div style={{ color: ColorBrandPrimary }}>awesome div</div>

Styled-Components

const AwesomeComponent = styled.div`
  color: ${ColorBrandPrimary};

CSS

div {
  color: ${ColorBrandPrimary};
}

About

TAIKAI design tokens provided by Figma and generated automagically.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%