@ekstra-bladet/eb-colors
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0 • Public • Published

    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 git@github.com:EkstraBladetUdvikling/eb-colors.git
    cd eb-colors
    npm build

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

    git clone git@github.com:EkstraBladetUdvikling/eb-colors.git
    cd eb-colors
    npm run build-vscode-snippets
    npm run example

    License

    Apache-2 © Ekstra Bladet

    Keywords

    none

    Install

    npm i @ekstra-bladet/eb-colors

    DownloadsWeekly Downloads

    1

    Version

    3.0.0

    License

    Apache-2.0

    Unpacked Size

    58.6 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar