@ekstra-bladet/eb-colors
v4.0.6EB 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
Metadata
- Apache-2.0
- Whatever
- Ekstra Bladet
- released 1/3/2024