Colors

Name

@happeouikit/colors

Latest

1.0.5

License

MIT

Installation

yarn add @happeouikit/colors

Links

Dependencies (2)

```
@happeouikit/theme@^1.9.0
```
```
polished@^2.3.1
```

New Colors (DS3) - use CSS variables and theme provider!

From 2024 onwards, we should only be using CSS variables for colors (e.g. var(--color-active-primary), or on rare occasions, colors from useTheme. These are defined and exported in @happeouikit/theme.

Additionally, many colors should be semantic - e.g. --color-surface rather than --color-white100 - which will allow us to support more themes, like Dark Mode, in the future.

navy800

var(--color-navy800)

active-primary

var(--color-active-primary)

success-primary

var(--color-success-primary)

warn

var(--color-warning-primary)

alert-primary

var(--color-alert-primary)

violet800

var(--color-violet800)

Please don't import anything from this package anymore!

We will gradually remove references to most of its contents by replacing them with CSS vars.

We may keep using darken, lighten, and toBgColor for a while longer, but remember that most of the time you could be replacing colors with direct CSS vars, or semantic ones - e.g. darken(active, 0.2) should become "var(--color-active-darken20)".

Primary Colors

Each primary color is exported by it's name, so use that rather than the HEX code.

navy

#1A5D8D

active

#009DFF

success

#29C47F

warn

#FABD24

alert

#EC4B2F

violet

#5E2590

Happeo Brand

brand

#29C4A9

brandLight

#00E5BD

Grayscale

Grayscale is used primarily. When grayscale texts are used on top of an image or colorful background, choose Black and it’s opacities below

gray01

#2A3443

gray02

#343E49

gray03

#434F59

gray04

#5A6872

gray05

#8997A1

gray06

#BAC6D0

gray07

#D4DBE1

gray08

#E8ECF2

gray09

#F7F9FB

gray10

#FBFCFD

Black & white

black

#000000

black70

rgba(0,0,0,0.7)

black50

rgba(0,0,0,0.5)

black30

rgba(0,0,0,0.3)

white

#FFFFFF

white70

rgba(255,255,255,0.7)

Lighten & Darken

For darkening and lightening there is functions ready.

darken(violet, 0.8)

color-mix(in srgb, #5E2590, black 80%)

lighten(navy, 0.8)

color-mix(in srgb, #1A5D8D, white 80%)

Below in the list there is examples of all the primary colors shaded.

darken80(navy)
#1A5D8D

darken80(active)
#009DFF

darken80(success)
#29C47F

darken80(warn)
#FABD24

darken80(alert)
#EC4B2F

darken80(violet)
#5E2590

darken60(navy)
#1A5D8D

darken60(active)
#009DFF

darken60(success)
#29C47F

darken60(warn)
#FABD24

darken60(alert)
#EC4B2F

darken60(violet)
#5E2590

darken40(navy)
#1A5D8D

darken40(active)
#009DFF

darken40(success)
#29C47F

darken40(warn)
#FABD24

darken40(alert)
#EC4B2F

darken40(violet)
#5E2590

darken20(navy)
#1A5D8D

darken20(active)
#009DFF

darken20(success)
#29C47F

darken20(warn)
#FABD24

darken20(alert)
#EC4B2F

darken20(violet)
#5E2590

default(navy)
#1A5D8D

default(active)
#009DFF

default(success)
#29C47F

default(warn)
#FABD24

default(alert)
#EC4B2F

default(violet)
#5E2590

lighten20(navy)
#1A5D8D

lighten20(active)
#009DFF

lighten20(success)
#29C47F

lighten20(warn)
#FABD24

lighten20(alert)
#EC4B2F

lighten20(violet)
#5E2590

lighten40(navy)
#1A5D8D

lighten40(active)
#009DFF

lighten40(success)
#29C47F

lighten40(warn)
#FABD24

lighten40(alert)
#EC4B2F

lighten40(violet)
#5E2590

lighten60(navy)
#1A5D8D

lighten60(active)
#009DFF

lighten60(success)
#29C47F

lighten60(warn)
#FABD24

lighten60(alert)
#EC4B2F

lighten60(violet)
#5E2590

lighten80(navy)
#1A5D8D

lighten80(active)
#009DFF

lighten80(success)
#29C47F

lighten80(warn)
#FABD24

lighten80(alert)
#EC4B2F

lighten80(violet)
#5E2590

lighten90(navy)
#1A5D8D

lighten90(active)
#009DFF

lighten90(success)
#29C47F

lighten90(warn)
#FABD24

lighten90(alert)
#EC4B2F

lighten90(violet)
#5E2590