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