Commit 159c45c8 authored by Nicolas Lenz's avatar Nicolas Lenz

Finalize step to SCSS syntax

parent 01e680c8
@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
@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;
}
// 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%),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment