# sds-design-token

> Design token for development UI

Latest version **0.9.1** (published 2019-03-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install sds-design-token
pnpm add sds-design-token
yarn add sds-design-token
bun add sds-design-token
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.1 |
| Published | 2019-03-20 |
| First published | 2019-02-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | everton denis |
| Maintainers | evertondenis |
| Keywords | design-token |

## Links

- npm: https://www.npmjs.com/package/sds-design-token
- Repository: https://github.com/evertondenis/sds-design-token
- Homepage: https://github.com/evertondenis/sds-design-token#readme
- Issues: https://github.com/evertondenis/sds-design-token/issues
- npm.io page: https://npm.io/package/sds-design-token

## Dependencies (1)

- [theo](https://npm.io/package/theo.md) ^8.1.1

## Recent versions

- 0.9.1 (latest) — 2019-03-20
- 0.9.0 — 2019-03-20
- 0.0.8 — 2019-02-26
- 0.0.7 — 2019-02-26
- 0.0.6 — 2019-02-26
- 0.0.5 — 2019-02-26
- 0.0.4 — 2019-02-26
- 0.0.3 — 2019-02-08
- 0.0.2 — 2019-02-08
- 0.0.1 — 2019-02-08

## README

# SDS Design Tokens

<!--[![npm version](https://img.shields.io/badge/npm-v0.0.8-green.svg)](https://www.npmjs.com/package/sds-design-token)--->

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

## Getting Started

```sh
npm i sds-design-token --save
```

```sh
yarn add sds-design-token
```

## Usage

** Example with styled-components:**

```jsx
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](https://codesandbox.io/s/y21k4l9729)

## Properties

### Colors

| Attributes            | Values                   |
| --------------------- | ------------------------ |
| colorWarning          | rgb(228, 126, 26)        |
| colorBackgroundLight  | rgb(245, 245, 245)       |
| colorWhiteSecondary   | rgba(255, 255, 255, 0.6) |
| colorBlack            | rgb(0, 0, 0)             |
| colorPrimary          | rgb(0, 91, 149)          |
| colorBlackPrimary     | rgba(0, 0, 0, 0.87)      |
| colorSuccess          | rgb(90, 153, 48)         |
| colorBackgroundMedium | rgb(238, 238, 238)       |
| colorBackgroundDark   | rgb(221, 221, 221)       |
| colorError            | rgb(176, 0, 32)          |
| colorPrimaryMedium    | rgb(8, 140, 202)         |
| colorSecondaryLight   | rgb(241, 241, 241)       |
| colorWhitePrimary     | rgb(255, 255, 255)       |
| colorSecondary        | rgb(71, 71, 71)          |
| colorBlackSecondary   | rgba(0, 0, 0, 0.6)       |
| colorSecondaryMedium  | rgb(102, 102, 102)       |
| colorPrimaryLight     | rgb(132, 214, 245)       |
| colorSuport           | rgb(8, 140, 202)         |

### Typographies

| Attributes          | Values                 |
| ------------------- | ---------------------- |
| fontFamilyPrimary   | Open Sans, sans-serif  |
| fontFamilySecondary | Montserrat, sans-serif |
| fontSizeBase        | 1rem                   |
| fontSizeSm          | 0.875rem               |
| fontSizeXs          | 0.75rem                |
| lineHeightBase      | 1.5rem                 |
| lineHeightSm        | 1.25rem                |
| lineHeightXs        | 1rem                   |

### Spacings

| Attributes  | Values  |
| ----------- | ------- |
| spacingBase | 1rem    |
| spacingXl   | 2rem    |
| spacingXxl  | 2.5rem  |
| spacingMd   | 0.75rem |
| spacingNone | 0rem    |
| spacingSm   | 0.5rem  |
| spacingXs   | .25rem  |
| spacingLg   | 1.5rem  |
| spacingXxs  | .125rem |

### Borders

| Attributes             | Values                    |
| ---------------------- | ------------------------- |
| borderSizeMd           | 2px                       |
| colorBorderWhiteMedium | rgba(255, 255, 255, 0.38) |
| borderRadius           | 4px                       |
| borderSizeSm           | 1px                       |
| borderSizeLg           | 3px                       |
| colorBorderWhiteLight  | rgba(255, 255, 255, 0.2)  |
| colorBorderMedium      | rgba(0, 0, 0, 0.24)       |
| colorBorderDark        | rgba(0, 0, 0, 0.6)        |
| colorBorderLight       | rgba(0, 0, 0, 0.12)       |

### Opacities

| Attributes                     | Values |
| ------------------------------ | ------ |
| opacityBackgroundLightHover    | 0.04   |
| opacityBackgroundLightSelected | 0.08   |
| opacityBackgroundLightActive   | 0.24   |
| opacityBackgroundDarkHover     | 0.12   |
| opacityBackgroundDarkSelected  | 0.16   |
| opacityBackgroundDarkActive    | 0.24   |
| opacityDisabled                | 0.4    |

### Widths

| Attributes           | Values   |
| -------------------- | -------- |
| containerMaxWidth    | 74.75rem |
| containerMWidth      | 49rem    |
| containerSWidth      | 35rem    |
| containerXsWidth     | 17.5rem  |
| containerMobileWidth | 20rem    |

### MediaQueries ( breakpoints)

| Attributes       | Values |
| ---------------- | ------ |
| mediaQuerySmall  | 36rem  |
| mediaQueryMedium | 48rem  |
| mediaQueryLarge  | 62rem  |

### Animations

| Attributes   | Values   |
| ------------ | -------- |
| durationXs   | 100ms    |
| durationSm   | 200ms    |
| durationBase | 250ms    |
| timingBase   | ease-out |

<!---
#

Before run build, you need to give to permission to \*.sh file:

```sh
chmod +x scripts/start.sh
```
--->

---
_Source: https://npm.io/package/sds-design-token · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._