@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/colorsWhen 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.
| Name | Color |
|---|---|
default |
#2499ff
|
tinted |
#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.
| Name | Color |
|---|---|
blue |
PRIMARY_TONES.default
|
pink |
#f34190
|
green |
#34b384
|
purple |
#7c60c7
|
yellow |
#ffac30
|
brown |
#b96a36
|
brownTinted |
#ffecd4
|
GREY_TONES
Those are some greyscale tones that should be used throughout the applications to make the application feel more lifeful.
| Name | Color |
|---|---|
darkest |
#353748
|
dark |
#505261
|
mediumDark |
#64677c
|
medium |
#717683
|
mediumLight |
#cacbd5
|
light |
#f1f2f5
|
lightest |
#f7f8fa
|
FONT_TONES
| Name | Color |
|---|---|
default |
GREY_TONES.darkest
|
dark |
#999
|
light |
#ccc
|
ultraLight |
#eee
|
BACKGROUND_TONES
| Name | Color |
|---|---|
grey |
GREY_TONES.lightest
|
white |
#fff
|