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:

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

or using yarn:

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

Importing

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

Accessing

<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 | grayscale[500] | grayscale[600] | | divider | grayscale[100] | grayscale[600] | | error | red[500] | red[100] | | errorContrast | grayscale[0] | grayscale[900] | | subtleFeedback | yellow[50] | yellow[800] | | subtleFeedbackContrast | grayscale[900] | yellow[100] | | caution | yellow[500] | yellow[100] | | cautionContrast | grayscale[900] | grayscale[900] | | success | green[500] | green[100] | | successContrast | grayscale[0] | grayscale[900] | | primaryTextColor | grayscale[900] | grayscale[0] | | secondaryTextColor | grayscale[550] | grayscale[400] | | tertiaryTextColor | grayscale[400] | grayscale[600] | | surface | grayscale[0] | grayscale[800] | | surfaceVariant | grayscale[25] | grayscale[700] | | surfaceInteractive | grayscale[50] | grayscale[700] | | surfaceInteractivePressed | grayscale[600] | grayscale[400] | | surfaceDecorative | grayscale[100] | grayscale[700] | | hintSurface | grayscale[800] | grayscale[550] | | floatSurface | grayscale[0] | grayscale[700] | | pressedElement | grayscale[200] | grayscale[600] | | notification | ruby[500] | ruby[100] | | notificationContrast | grayscale[0] | grayscale[900] | | widgetBackground | grayscale[50] | grayscale[900] | | disabled | grayscale[100] | grayscale[700] | | disabledContrast | grayscale[600] | grayscale[500] | | formIconcolor | grayscale[50] | grayscale[900] |

typography

spaces

fontSizes

borderRadiuses

boxShadows

transitions