@elvia/elvis-colors v4.4.1

Elvia colors

Available colors reflect the colors illustrated at https://design.elvia.io/brand/color#Overview.

All Color variables are named Elvia< Name > in CamelCase. Eg ElviaBlack, ElviaOrangeMango.

Usage SCSS

Recommended @Use

Insert at top of your scss file :

• @use '@elvia/elvis-colors';

If this does not work for you, you may need to specify:

• @use '@elvia/elvis-colors/dist/elviaColors.scss';

Example:

• border: 1px solid elviaColors.$ElviaBlack;

Alternative @Import

For making all variables accessible throughout your project you can use @Import. This function will be deprecated by sass in the future and we therefore recommend applying @use instead.

Add colors file from package to scss file like:

• @import '~@elvia/elvis-colors';

If this does not work for you, you may need to specify:

• @import '~@elvia/elvis-colors/dist/colors.scss';

Example:

• border: 1px solid $ElviaBlack;

Usage Typescript/Javascript

To use this package you can import the function getColor(). It takes the name of the requested color as input, and returns its hex value if it exists in the Elvia colors.

• import { getColor } from '@elvia/elvis-colors';
  const color = getColor('elvia-charge');

Likewise, the function getContrastText() is provided to get a contrast text color corresponding to the requested color.

Maintaining

The json and scss-files are generated from the colors object in the js file. When making changes, remember to run yarn build afterwards.