@livechat/design-system-colors
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    @livechat/design-system-colors

    Colors package for apps using LiveChat Design System

    Getting started

    To install @livechat/design-system-colors in your project, you will need to run the following command using npm:

    npm install @livechat/design-system-colors --save

    Usage

    There are three ways to use LiveChat design colors palette:

    • use JavaScript implementation of colors
    import colors from '@livechat/design-system-colors'
    
    • import css/variables.css (css classes) or css/styles.css (css vars) to style UI elements
    • import scss/variables.scss or scss/styles.scss if you are using scss in your project

    JavaScript

    In your JavaScript files just import the library:

    import colors from '@livechat/design-system-colors'
    // or just selected colors
    import { blue900 } from '@livechat/design-system-colors'

    The library also provides JSON file with colors definitions

    import colors from '@livechat/design-system-colors/dist/design-system-colors.json'

    Scss

    You can import the variables file directly in your scss:

    @import '~@livechat/design-system-colors/dist/scss/variables';

    These color variables follow the naming convention: $lcds-<color>-<tone>. For example:

    color: $lcds-blue-900;

    There is also a file named styles.scss. This is a group of classes following the naming convention: .lcds-text-<color>-<tone> and .lcds-bg-<color>-<tone>. You can use those classes directly in your html/js files. Importing it is possible in several ways, ie. you can import it in your scss file (as above) or JavaScript file (e.g. styling React app with css-modules and scss).

    Css

    Almost idendital to Scss files you can import css variables directyly in your css file:

    @import '~@livechat/design-system-colors/dist/css/variables';

    These color variables follow the naming convention: --lcds-<color>-<tone>. For example:

    color: var(--lcds-blue-900);

    There is also a file named styles.css. This is a group of classes following the naming convention: .lcds-text-<color>-<tone> and .lcds-bg-<color>-<tone>.

    Install

    npm i @livechat/design-system-colors

    DownloadsWeekly Downloads

    46

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    67 kB

    Total Files

    15

    Last publish

    Collaborators

    • burbon22
    • marmatlc
    • mszpyruklc
    • joanna.sikora
    • kamilatokarska
    • mborowskalivechat
    • kajahd
    • grzgajda
    • bstopyra
    • m.teczynski
    • misterkuka
    • jakubpyzio
    • rkawka
    • bolchowka
    • lukiq
    • f.jaskolski
    • msypko
    • bamboo-livechat
    • olek_livechat
    • s.graczyk.livechat
    • michalpaszczakowski
    • andarist
    • konradk
    • k.zajac
    • dobrochna.przybylek
    • lkrolak
    • hstaniszewski
    • chatbot-com
    • jakubsikora
    • norbertprocak
    • walaszczykm
    • klarzynskik
    • ale-kacperczyk
    • sambor
    • macpankiewicz
    • mreszke
    • k-kozak
    • voyy
    • bbartek
    • mdebski
    • shwarcu
    • jfedyczak
    • paulinag
    • tomaszratajczyk
    • janowsiany
    • dzabrzenski
    • bartoszgamza
    • wouga
    • ttrzcinski
    • mzielonka
    • alithanar
    • msawickilc
    • jawinski
    • gh-actions-livechat
    • ewaryst
    • oliwiapolec
    • arturfracala
    • panr
    • vbezpalko