0.3.1 • Published 5 years ago

@quesk/colors v0.3.1

Weekly downloads
5
License
MIT
Repository
-
Last release
5 years ago

@quesk/colors

The colors package is used for having a convenient colors guide for the developers. Almost no other colors should be used in the products of Quesk.

Installation & Usage

Since this is a public package, you can install the package in your project using yarn or npm. Use one of the following two command to install the package:

$ yarn add @quesk/colors
$ npm install --save @quesk/colors

When you want to use the package, it's important to know, that there is no default export in this package. We are only exporting the variables/constants that are shown below this paragraph.

To use the package, please use the following import lines:

import { PRIMARY_TONES } from '@quesk/colors'

Color palettes

PRIMARY_TONES

The primary tones palette features the main color of Quesk, which is the infamous blue and a tinted variant of the color for tinted backgrounds.

NameColor
default#2499ff #2499ff
tinted#e3f2ff #e3f2ff

EXPLORATION_TONES

The exploration tones are here for coloring some categories or other stuff. Those are just colorful and blendable colors in all tones.

NameColor
blue#2499ff PRIMARY_TONES.default
pink#f34190 #f34190
green#34b384 #34b384
purple#7c60c7 #7c60c7
yellow#ffac30#ffac30
brown#b96a36 #b96a36
brownTinted#ffecd4 #ffecd4

GREY_TONES

Those are some greyscale tones that should be used throughout the applications to make the application feel more lifeful.

NameColor
darkest#353748 #353748
dark#505261 #505261
mediumDark#64677c #64677c
medium#717683 #717683
mediumLight#cacbd5 #cacbd5
light#f1f2f5 #f1f2f5
lightest#f7f8fa #f7f8fa

FONT_TONES

NameColor
default#2499ff GREY_TONES.darkest
dark#999 #999
light#ccc #ccc
ultraLight#eee #eee

BACKGROUND_TONES

NameColor
grey#f7f8fa GREY_TONES.lightest
white#fff #fff