@livechat/chat-widget-design-tokens
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

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

N|Solid

spaces

N|Solid

fontSizes

N|Solid

borderRadiuses

N|Solid

boxShadows

N|Solid

transitions

N|Solid

Readme

Keywords

none

Package Sidebar

Install

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

Weekly Downloads

129

Version

1.0.5

License

MIT

Unpacked Size

101 kB

Total Files

16

Last publish

Collaborators

  • dgebara00
  • stanislaw-rakowski
  • ziggykraus
  • andarist
  • konradk
  • walaszczykm
  • klarzynskik
  • jawinski