@livechat/chat-widget-design-tokens NPM

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	grayscale500	grayscale600
divider	grayscale100	grayscale600
error	red500	red100
errorContrast	grayscale0	grayscale900
subtleFeedback	yellow50	yellow800
subtleFeedbackContrast	grayscale900	yellow100
caution	yellow500	yellow100
cautionContrast	grayscale900	grayscale900
success	green500	green100
successContrast	grayscale0	grayscale900
primaryTextColor	grayscale900	grayscale0
secondaryTextColor	grayscale550	grayscale400
tertiaryTextColor	grayscale400	grayscale600
surface	grayscale0	grayscale800
surfaceVariant	grayscale25	grayscale700
surfaceInteractive	grayscale50	grayscale700
surfaceInteractivePressed	grayscale600	grayscale400
surfaceDecorative	grayscale100	grayscale700
hintSurface	grayscale800	grayscale550
floatSurface	grayscale0	grayscale700
pressedElement	grayscale200	grayscale600
notification	ruby500	ruby100
notificationContrast	grayscale0	grayscale900
widgetBackground	grayscale50	grayscale900
disabled	grayscale100	grayscale700
disabledContrast	grayscale600	grayscale500
formIconcolor	grayscale50	grayscale900