EB Colors

Version: 2.2.0

EB colors for CSS (SCSS only available through repo)

Installation

npm install "@ekstra-bladet/eb-colors" --save

CSS Usage

All CSS classes (NPM module)

@import "node_modules/@ekstra-bladet/eb-colors/dist/eb-colors-classes.css";

<div class="bg--white color--red">
  White background <br/>
  Red color
</div>

HEX CSS variables

@import "node_modules/@ekstra-bladet/eb-colors/dist/eb-colors-css-vars.css";

.use-hex-color {
  background: var(--color--red);
  color: var(--fgcolor--red);
}

RGB CSS variables

@import "node_modules/@ekstra-bladet/eb-colors/dist/eb-colors-vars-rgb.css";

.use-rgb-color {
  background: rgb(var(--rgb-color--red));
}

SCSS Usage (Not availiable in NPM module)

Variables and maps:

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

Variables, maps and classes:

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

General colors:

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

All Section specific colors:

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

All colors

Found in src/colors

Full map of all colors $eb-colors-colors

| File names | Map names | | --- | --- | | _blue.scss | $eb-color-blue | | _green.scss | $eb-color-green | | _greyscale.scss | $eb-color-greyscale | | _orange.scss | $eb-color-orange | | _pastel.scss | $eb-color-pastel | | _red.scss | $eb-color-red | | _yellow.scss | $eb-color-yellow |

Main colors

Found in src/general

Full map of general colors $eb-colors-general

| File names | Map names | | --- | --- | | _main.scss | $eb-color-main | | _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 | | _flash.scss | $eb-color-flash | | _forbrug.scss | $eb-color-forbrug | | _leder.scss | $eb-color-leder | | _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 | | _underholdning.scss | $eb-color-underholdning |

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]': map-get($eb-colors-colors, 'key'),
);

Background (background-color: & color:)

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

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

.selector {
  @include .bg--[colorname];
}

foreground (color:)

Returns the main color

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

.selector {
  color: var(--color--[colorname]);
}

Mapping colors

Each of general colors $eb-colors-general (found in src/general) & section colors $eb-colors-sections (found in src/sections) are mapped from all colors $eb-colors-colors

$eb-color-[new-map-name]: (
  'sport' : map-get($eb-colors-colors, 'key'),
)

CSS classes

CSS classes are generated after the following pattern

.bg--[sectionname] {
    background-color: [main section color];
    color: [foreground section color];
}

.color--[sectionname] {
    color: [main section color];
}

/** Real world example */
.bg--eb {
    background-color: var(--color--eb);
    color: var(--fgcolor--eb);
}

.color--eb {
    color: var(--color--eb);
}

Working example

<div class="bg--eb">
    This will have the eb background color and the corresponding foreground color.
</div>

Color pallette

The colors and their names contained in eb-colors

Visual Studio Code Snippets

To use generated Visual Studio Code snippets for a project, make sure the Visual Studio Code configuration directory is present (%PROJECTROOT%/.vscode) and run following bash commands in project root:

curl -o .vscode/eb-colors-classes.code-snippets https://raw.githubusercontent.com/EkstraBladetUdvikling/eb-colors/master/snippets/eb-colors-classes.code-snippets
curl -o .vscode/eb-colors-css-vars.code-snippets https://raw.githubusercontent.com/EkstraBladetUdvikling/eb-colors/master/snippets/eb-colors-css-vars.code-snippets
curl -o .vscode/eb-colors-vars-rgb.code-snippets https://raw.githubusercontent.com/EkstraBladetUdvikling/eb-colors/master/snippets/eb-colors-vars-rgb.code-snippets

To enable snippets in .jsp files, add the following to user or workspace-settings:

"files.associations": {
        "*.jsp": "html"
    }

Development

To build the CSS variables version of eb-colors:

git clone [email protected]:EkstraBladetUdvikling/eb-colors.git
cd eb-colors
npm build

To build a new version of VS Code Snippets and Example:

git clone [email protected]:EkstraBladetUdvikling/eb-colors.git
cd eb-colors
npm run build-vscode-snippets
npm run example

License

Apache-2 © Ekstra Bladet