1.0.13 • Published 8 months ago
@livechat/chat-widget-design-tokens v1.0.13
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-tokensor using yarn:
yarn add @livechat/chat-widget-design-tokensImporting
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 | ||
| divider | ||
| error | ||
| errorContrast | ||
| subtleFeedback | ||
| subtleFeedbackContrast | ||
| caution | ||
| cautionContrast | ||
| success | ||
| successContrast | ||
| primaryTextColor | ||
| secondaryTextColor | ||
| tertiaryTextColor | ||
| surface | ||
| surfaceVariant | ||
| surfaceInteractive | ||
| surfaceInteractivePressed | ||
| surfaceDecorative | ||
| hintSurface | ||
| floatSurface | ||
| pressedElement | ||
| notification | ||
| notificationContrast | ||
| widgetBackground | ||
| disabled | ||
| disabledContrast | ||
| formIconcolor |
typography
spaces
fontSizes
borderRadiuses
boxShadows
transitions
