@elricb/sass-themer-color

sass-themer-color

Color scheme theory functions for sass

library

sass-themer-color/index.scss

demo

public/index.html

test

src/app/router/route/IndexComponent/index.scss

cd src/
npm install
npm run start

usage

theme mixins

name	mixin
SetTheme	@include setColorThemePallet($map)
SetLabels	@include setColorThemeLabels($map)
SetThemeItem	@include setColorThemePalletItem($mapkey, $background, $foreground)
SetLabelItem	@include setColorThemeLabelItem($labelname, $mapkey)

theme functions

name	function
GetForegroundColor	color-theme-fore($labelname)
GetBackgroundColor	color-theme-back($labelname)

scheme functions

$color - is any rgb/hsl/hex color code.
$fraction - is any decimal neg/pos that represents percent (-1 to 1). E.g. 0.5 = 50%.

name	function
Analogous	color-scheme-analogous($color, $fraction)
Monochromatic	color-scheme-monochromatic($color, $fraction)
Shades	color-scheme-shades($color, $fraction)
Triad	color-scheme-triad($color, $fraction)
Complementary	color-scheme-complementary($color, $fraction)
Compound	color-scheme-compound($color, $fraction)

additional functions

$color - the base color that will change based on the difference between
$color2 and $color3
$color2 - the current/default color to measure against $color3
$color3 - the changed foreground/background

name	function	description
Adaptive	color-scheme-adaptive($color, $color2, $color3)	will alter $color lightness based on the difference between $color2 and $color3 to maintain contrast

example

@import "~sass-themer-color/index.scss";

@include setColorThemePallet((
    1: (
        back: #805b58,
        fore: #e8c046
    ),
    2: (
        back: #E84E46,
        fore: #000
    ),
    3: (
        back: #FF0601,
        fore: #000
    ),
    4: (
        back: #E8AAAB,
        fore: #000
    ),
    5: (
        back: rgb(174, 5, 1),
        fore: #fff
    )
));

@include setColorThemeLabels((
    highlight: 1,
    menu: 1,
    input: 2,
    header: 3,
    footer: 3,
    body: 4,
    overlay: 5,
));

header {
    color: color-theme-fore(header);
    background-color: color-theme-back(header);
}

footer {
    color: color-theme-fore(footer);
    background-color: color-theme-back(footer);
}

.overlay {
    color: color-theme-fore(overlay);
    background-color: color-theme-back(overlay);

    .title {
        color: color-theme-analogous(color-theme-fore(overlay), 0.5);
        background-color: color-theme-analogous(color-theme-back(overlay), 0.5);
    }
}