SDS Design Tokens

SDS Design Tokens is an experimental project to generate design-tokens to create UI components with some base specific design system

Getting Started

npm i sds-design-token --save

yarn add sds-design-token

Usage

Example with styled-components:

import styled from 'styled-components';
import {
  Animations,
  Borders,
  Colors,
  Spacings,
  Typography
} from 'sds-design-token';

export const Button = styled.button`
  background: ${Colors.colorPrimary};
  border: 0;
  border-radius: ${Borders.borderRadius};
  color: ${Colors.colorWhitePrimary};
  cursor: pointer;
  font-family: ${Typography.fontFamilyPrimary};
  font-size: ${Typography.fontSizeBase};
  padding: ${Spacings.spacingBase};
  transition: all ${Animations.durationSm} ${Animations.timingBase};

  &:hover {
    background: ${Colors.colorPrimaryLight};
  }
`;

Take a look at this working example at codesandbox.io

Properties

Colors

Typographies

Spacings

Borders

Opacities

Widths

MediaQueries ( breakpoints)

Animations