EB colors for SCSS and CSS

Usage no npm install needed!

<script type="module">
  import ebColors from 'https://cdn.skypack.dev/eb-colors';


EB Colors

EB colors for SCSS and CSS


npm install ebudvikling/eb-colors --save


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


To build the CSS variables version of eb-colors:

npm build


Apache-2 © Ekstra Bladet