npm package: @livechat/chat-widget-design-tokens
Description: This package includes the basic design tokens that the LiveChat team uses to build a chat widget.
Latest version: 1.0.19

# Chat Widget Design Tokens

This package includes the basic design tokens that the LiveChat team uses to build a chat widget.

If you're building a chat widget integration, we recommend using this when styling your components. In that way, your design will stay in sync with widget design.

The package includes:

- Color tokens
- Color palette
- Spaces
- Typography
- Font sizes
- Box shadows
- Border radiuses
- Transitions

## Installation

---

Using npm:

```bash
npm install @livechat/chat-widget-design-tokens
```

or using yarn:

```bash
yarn add @livechat/chat-widget-design-tokens
```

## Importing

---

```js
import { colors, spaces } from '@livechat/chat-widget-design-tokens'
```

## Accessing

---

```html
<div style={{ padding: spaces.space6 }} />
```

## colors

Value for particular token is changing depend on the mode Light|Dark

| Token name                | ☀️ Light Mode                                                     | 🌚 Dark Mode                                                      |
| :------------------------ | :---------------------------------------------------------------- | :---------------------------------------------------------------- |
| border                    | ![](https://via.placeholder.com/14/757575/?text=+) grayscale[500] | ![](https://via.placeholder.com/14/6E6E6E/?text=+) grayscale[600] |
| divider                   | ![](https://via.placeholder.com/14/E3E3E3/?text=+) grayscale[100] | ![](https://via.placeholder.com/14/6E6E6E?text=+) grayscale[600]  |
| error                     | ![](https://via.placeholder.com/14/D93311/?text=+) red[500]       | ![](https://via.placeholder.com/14/FF7C6B/?text=+) red[100]       |
| errorContrast             | ![](https://via.placeholder.com/14/FFFFFF/?text=+) grayscale[0]   | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] |
| subtleFeedback            | ![](https://via.placeholder.com/14/FFFAE5/?text=+) yellow[50]     | ![](https://via.placeholder.com/14/3A352C/?text=+) yellow[800]    |
| subtleFeedbackContrast    | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] | ![](https://via.placeholder.com/14/F7C56E/?text=+) yellow[100]    |
| caution                   | ![](https://via.placeholder.com/14/FFD000/?text=+) yellow[500]    | ![](https://via.placeholder.com/14/F7C56E/?text=+) yellow[100]    |
| cautionContrast           | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] |
| success                   | ![](https://via.placeholder.com/14/268750/?text=+) green[500]     | ![](https://via.placeholder.com/14/77Cf9D/?text=+) green[100]     |
| successContrast           | ![](https://via.placeholder.com/14/FFFFFF/?text=+) grayscale[0]   | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] |
| primaryTextColor          | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] | ![](https://via.placeholder.com/14/FFFFFF/?text=+) grayscale[0]   |
| secondaryTextColor        | ![](https://via.placeholder.com/14/6E6E6E/?text=+) grayscale[550] | ![](https://via.placeholder.com/14/B3B3B3/?text=+) grayscale[400] |
| tertiaryTextColor         | ![](https://via.placeholder.com/14/B3B3B3/?text=+) grayscale[400] | ![](https://via.placeholder.com/14/6E6E6E/?text=+) grayscale[600] |
| surface                   | ![](https://via.placeholder.com/14/FFFFFF/?text=+) grayscale[0]   | ![](https://via.placeholder.com/14/252525/?text=+) grayscale[800] |
| surfaceVariant            | ![](https://via.placeholder.com/14/F0F0F0/?text=+) grayscale[25]  | ![](https://via.placeholder.com/14/2E2E2E/?text=+) grayscale[700] |
| surfaceInteractive        | ![](https://via.placeholder.com/14/F8F8F8/?text=+) grayscale[50]  | ![](https://via.placeholder.com/14/2E2E2E/?text=+) grayscale[700] |
| surfaceInteractivePressed | ![](https://via.placeholder.com/14/6E6E6E/?text=+) grayscale[600] | ![](https://via.placeholder.com/14/B3B3B3/?text=+) grayscale[400] |
| surfaceDecorative         | ![](https://via.placeholder.com/14/E3E3E3/?text=+) grayscale[100] | ![](https://via.placeholder.com/14/2E2E2E/?text=+) grayscale[700] |
| hintSurface               | ![](https://via.placeholder.com/14/252525/?text=+) grayscale[800] | ![](https://via.placeholder.com/14/6E6E6E/?text=+) grayscale[550] |
| floatSurface              | ![](https://via.placeholder.com/14/FFFFFF/?text=+) grayscale[0]   | ![](https://via.placeholder.com/14/2E2E2E/?text=+) grayscale[700] |
| pressedElement            | ![](https://via.placeholder.com/14/D5D5D5/?text=+) grayscale[200] | ![](https://via.placeholder.com/14/6E6E6E/?text=+) grayscale[600] |
| notification              | ![](https://via.placeholder.com/14/E30D34/?text=+) ruby[500]      | ![](https://via.placeholder.com/14/FA6681/?text=+) ruby[100]      |
| notificationContrast      | ![](https://via.placeholder.com/14/FFFFFF/?text=+) grayscale[0]   | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] |
| widgetBackground          | ![](https://via.placeholder.com/14/F8F8F8/?text=+) grayscale[50]  | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] |
| disabled                  | ![](https://via.placeholder.com/14/E3E3E3/?text=+) grayscale[100] | ![](https://via.placeholder.com/14/2E2E2E/?text=+) grayscale[700] |
| disabledContrast          | ![](https://via.placeholder.com/14/6E6E6E/?text=+) grayscale[600] | ![](https://via.placeholder.com/14/757575/?text=+) grayscale[500] |
| formIconcolor             | ![](https://via.placeholder.com/14/F8F8F8/?text=+) grayscale[50]  | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] |

## typography

![N|Solid](https://cdn.livechat-static.com/api/file/lc/img/chat-widget-design-tokens/typography.svg)

## spaces

![N|Solid](https://cdn.livechat-static.com/api/file/lc/img/chat-widget-design-tokens/spaces.svg)

## fontSizes

![N|Solid](https://cdn.livechat-static.com/api/file/lc/img/chat-widget-design-tokens/fontsizes.svg)

## borderRadiuses

![N|Solid](https://cdn.livechat-static.com/api/file/lc/img/chat-widget-design-tokens/radiuses.svg)

## boxShadows

![N|Solid](https://cdn.livechat-static.com/api/file/lc/img/chat-widget-design-tokens/boxShadows.svg)

## transitions

![N|Solid](https://cdn.livechat-static.com/api/file/lc/img/chat-widget-design-tokens/transitions.gif)