Nitrogen Peroxide Monoxide

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

    1.0.0 • 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

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    88.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • ziggykraus
    • andarist
    • konradk
    • walaszczykm
    • klarzynskik
    • bartoszgamza
    • jawinski