Commit 159c45c8 authored by Nicolas Lenz's avatar Nicolas Lenz ❄️
Browse files

Finalize step to SCSS syntax

parent 01e680c8

src/style/_colors.sass

deleted100644 → 0
+0 −37
Original line number Diff line number Diff line 
@import palette



// Calc color by base color name and level.

@function get-color($name, $level)

    $color: map-get($palette, $name)

    $mix-color: if($level < 0, black, white)



    @for $i from 0 to $level

        $x: lightness($color)

        $percentage: map-get(map-get($mix-intervals, $name), $level)

        $percentage: if($percentage == null, 26%, $percentage)



        $color: mix($mix-color, $color, $percentage)



    @return $color



// Add foreground and background classes for all colors.

@each $color-name in map-keys($palette)

    @for $i from -5 through 5

        .bg-#{$color-name}-#{map-get($shade-names, $i)}

            background-color: get-color($color-name, $i)

        .colorbox.bg-#{$color-name}-#{map-get($shade-names, $i)}::after

            font-weight: normal

            content: " (#{get-color($color-name, $i)})"

        .fg-#{$color-name}-#{map-get($shade-names, $i)}

            color: get-color($color-name, $i)



// Add black and white.

.bg-black

    background-color: black

.fg-black

    color: black

.bg-white

    background-color: white

.fg-white

    color: white

src/style/_colors.scss

0 → 100644
+47 −0
Original line number Diff line number Diff line 
@import "palette";



// Calc color by base color name and level.

@function get-color($name, $level) {

    $color: map-get($palette, $name);

    $mix-color: if($level < 0, black, white);



    @for $i from 0 to $level {

        $x: lightness($color);

        $percentage: map-get(map-get($mix-intervals, $name), $level);

        $percentage: if($percentage == null, 26%, $percentage);



        $color: mix($mix-color, $color, $percentage);

    }



    @return $color;

}



// Add foreground and background classes for all colors.

@each $color-name in map-keys($palette) {

    @for $i from -5 through 5 {

        .bg-#{$color-name}-#{map-get($shade-names, $i)} {

            background-color: get-color($color-name, $i);

        }

        .colorbox.bg-#{$color-name}-#{map-get($shade-names, $i)}::after {

            font-weight: normal;

            content: " (#{get-color($color-name, $i)})";

        }

        .fg-#{$color-name}-#{map-get($shade-names, $i)} {

            color: get-color($color-name, $i);

        }

    }

}



// Add black and white.

.bg-black {

    background-color: black;

}

.fg-black {

    color: black;

}

.bg-white {

    background-color: white;

}

.fg-white {

    color: white;

}

src/style/_palette.scss

+0 −2
Original line number Diff line number Diff line 
// The palette maps are written in SCSS syntax as maps in SASS syntax currently doesn't support multiline, which makes maps really ugly.



$palette: (

    "primary":    hsl( 36,  97%,  48%),

    "accent":     hsl(351,  86%,  48%),