Colors

All the colors used in the components in the UI Library.
All colors can be accessed as background-color, using the class name provided with each color.

Colors

Component status: WIP

Greyscale colors

Component status: WIP

.c--white

c--white

HSL: 0,0,100

.c--white-smoke

c--white-smoke

HSL: 0,0,96

.c--light-grey

c--light-grey

HSL: 0,0,91

.c--dark-grey

c--dark-grey

HSL: 0,0,58

.c--very-dark-grey

c--very-dark-grey

HSL: 0,0,16

.c--grey-transparent

c--grey-transparent

RGBA: 0, 0, 0, 0.1

<div style="height:100px;" class=""></div>

Se mere

Developer notes

SCSS syntax

If a color is used in a .scss file directy;
Change the “.c–” to “$color-“

E.g.

.c--white { /* predefined background-class */
    background-color: $color-white;
}

.my-own-class {
    color: $color-white;
}

/* ... */

.c--casper { /* predefined background-class */
    background-color: $color-casper;
}

.my-own-class {
    color: $color-casper;
}

Palette colors

Component status: WIP

.c--casper

c--casper

HEX: 9FBDC3

.c--botticelli

c--botticelli

HEX: 8FAAAE

.c--dull-orange

c--dull-orange

HEX: A3988B

.c--dark-green-cyan

c--dark-green-cyan

HEX: 517F70

.c--sisal

c--sisal

HEX: D3CBBA

<div style="height:100px;" class=""></div>

Se mere

Developer notes

SCSS syntax

If a color is used in a .scss file directy;
Change the “.c–” to “$color-“

E.g.

.c--white { /* predefined background-class */
    background-color: $color-white;
}

.my-own-class {
    color: $color-white;
}

/* ... */

.c--casper { /* predefined background-class */
    background-color: $color-casper;
}

.my-own-class {
    color: $color-casper;
}

Semantic shorthands

Defined semantic color shorthands for common element types.

Semantic shorthands

Component status: WIP

Defined semantic color shorthands for common element types.

.c--text

c--text

HSL: 0,0,16

.c--border

c--border

HSL: 0,0,91

.c--border-hover

c--border-hover

HSL: 0,0,58

.c--background-grey

c--background-grey

HSL: 0,0,96

.c--shadow

c--shadow

RGBA: 0, 0, 0, 0.1

.c--button

c--button

HEX: 9FBDC3

.c--button-focus

c--button-focus

HEX: 8FAAAE

.c--link

c--link

HEX: A3988B

<div style="height:100px;" class=""></div>

Se mere

Developer notes

SCSS syntax

If a color is used in a .scss file directy;
Change the “.c–” to “$color-“

E.g.

.c--white { /* predefined background-class */
    background-color: $color-white;
}

.my-own-class {
    color: $color-white;
}

/* ... */

.c--casper { /* predefined background-class */
    background-color: $color-casper;
}

.my-own-class {
    color: $color-casper;
}

Se mere

Developer notes

SCSS syntax

Se mere

Developer notes

SCSS syntax

Se mere

Developer notes

SCSS syntax

[title]