// Set all base colors
$colors: (
red: #ff4136,
blue: #0074d9,
green: #2ecc40,
yellow: #ffdc00,
orange: #ff851b,
purple: #85144b,
gray: #aaaaaa,
black: #000000,
white: #ffffff
);
// Create shades of each color and return values as map
@function color-map($color, $values) {
$base: $values;
$b50: mix(white, $values, 50%);
$b01: mix(white, $values, 40%);
$b02: mix(white, $values, 30%);
$b03: mix(white, $values, 20%);
$b04: mix(white, $values, 10%);
// $b05 skipped - same as base
$b06: mix(black, $values, 10%);
$b07: mix(black, $values, 20%);
$b08: mix(black, $values, 30%);
$b09: mix(black, $values, 40%);
$color-shades: (
#{$color}#{50}: $b50,
#{$color}#{01}: $b01,
#{$color}#{02}: $b02,
#{$color}#{03}: $b03,
#{$color}#{04}: $b04,
#{$color}#{05}: $base,
#{$color}#{06}: $b06,
#{$color}#{07}: $b07,
#{$color}#{08}: $b08,
#{$color}#{09}: $b09
);
@return $color-shades;
}
// Set up master map for all colors
@function color-maps($colors) {
$color-map: ();
@each $color, $value in $colors {
$map: (color-map($color, $value));
$color-map: map-merge($color-map, $map);
}
@return $color-map;
}
// Initiate maps function to build maps
$color-map: color-maps($colors);
// Create mixin to better call colors from map
@function color($color, $shade) {
@return map-get($color-map, #{$color}#{$shade});
}
body {
background-color: color(yellow, 50);
color: white;
font-size: 7em;
text-align: center;
}
p {
top: 50%;
font-family: 'Calibri';
}