README

EB Colors

EB colors for SCSS and CSS

Installation

npm install ebudvikling/eb-colors --save

Usage

Variables and maps:

@import "node_modules/eb-colors/src/all.scss";

Variables, maps and classes:

@import "node_modules/eb-colors/src/all-with-classes.scss";

General colors:

@import "node_modules/eb-colors/src/general/all[-with-classes].scss";

All Section specific colors:

@import "node_modules/eb-colors/src/sections/all[-with-classes].scss";

All colors

Found in src

Full map of all eb-colors $eb-colors

Main colors

Found in src/general

Full map of section colors $eb-colors-general

File names	Map names
_main.scss	$eb-color-main
_greyscale.scss	$eb-color-greyscale
_socialmedia.scss	$eb-color-socialmedia

Section specific colors

Found in src/sections

Full map of section colors $eb-colors-sections

File names	Map names
_ekstra.scss	$eb-color-ekstra
_filmmagasinet.scss	$eb-color-filmmagasinet
_flash.scss	$eb-color-flash
_forbrug.scss	$eb-color-forbrug
_livescore.scss	$eb-color-livescore
_nationen.scss	$eb-color-nationen
_nyheder.scss	$eb-color-nyheder
_sex-samliv.scss	$eb-color-sex-samliv
_skolefodbold.scss	$eb-color-skolefodbold
_sport.scss	$eb-color-sport
_tv.scss	$eb-color-tv

Color functions

The following functions are include when using one of the three collection options (all, general or sections).

Without the included functions the colors can be accessed through map-deep-get

Example map structure

$eb-colors: (

    '[colorname]': (
        'main'          : #32a237,
        'foreground'    : #fff,
    ),
    // These only exist for certain colors(e.g. not found in greyscale)
    '[colorname]2': (
        'main'          : #2f7820,
        'foreground'    : #fff,
    )

);

Background (background-color: & color:)

Sets both background-color and color, to ensure correct usage

@import "node_modules/eb-colors/src/all";

.selector {
  @include eb-background('colorname');
}

foreground (color:)

Returns the main color

@import "node_modules/eb-colors/src/all";

.selector {
  color: eb-color-get('colorname');
}

Color pallette

The colors and their names contained in eb-colors

Development

To build the CSS variables version of eb-colors:

npm build

eb-colorsdeprecated

Usage no npm install needed!