$themes: (
        dark: (
                colors:(
                        "red": #E88080,
                        "yellow": #F2C97D,
                        "green": #63E2B7,
                        "blue": #70C0E8,
                        "purple": #c78cdc,
                        "orange": #ffa96c,
                        "lime": #96e79a,
                        "aqua": #8beef1,
                        "black": #000000,
                        "white": #FFFFFF,
                        "gray": #A7A6A7,
                )
        ),
        light: (
                colors:(
                        "red": #E88080,
                        "yellow": #F2C97D,
                        "green": #63E2B7,
                        "blue": #70C0E8,
                        "purple": #c78cdc,
                        "orange": #ffa96c,
                        "lime": #96e79a,
                        "aqua": #8beef1,
                        "black": #000000,
                        "white": #FFFFFF,
                        "gray": #A7A6A7,
                )
        )
);

$dark-colors: map-get(map-get($themes, 'dark'), 'colors');
$light-colors: map-get(map-get($themes, 'light'), 'colors');

// ALL COLORS
$colors-all: ();
@each $key, $color in $dark-colors {
    $colors-all: map-merge($colors-all, ('dark-'+$key: $color));
}
@each $key, $color in $light-colors {
  $colors-all: map-merge($colors-all, ($key: $color));
}

// TRANSPARENT COLORS
$colors-transparent: ();
@each $key, $color in $dark-colors {
  @for $i from 0 through 10 {
    $num: 10-$i;
    $percent: calc($num / 10);
    $colors-transparent: map-merge($colors-transparent, ('dark-'+$key+'-'+($i*10): transparentize($color, $percent)));
  }
}
@each $key, $color in $light-colors {
  @for $i from 0 through 10 {
    $num: 10-$i;
    $percent: calc($num / 10);
    $colors-transparent: map-merge($colors-transparent, ($key+'-'+($i*10): transparentize($color, $percent)));
  }
}

// LIGHT COLORS

$colors-light: ();
@each $key, $color in $dark-colors {
  @for $i from 0 through 10 {
    $num: $i;
    $percent: calc($num * 5);
    $colors-light: map-merge($colors-light, ('dark-'+$key+'-'+($i*10): lighten($color, $percent)));
  }
}
@each $key, $color in $light-colors {
  @for $i from 0 through 10 {
    $num: $i;
    $percent: calc($num * 5);
    $colors-light: map-merge($colors-light, ($key+'-'+($i*10): lighten($color, $percent)));
  }
}

// DARK COLORS

$colors-dark: ();
@each $key, $color in $dark-colors {
  @for $i from 0 through 10 {
    $num: 10-$i;
    $percent: calc($num * 5);
    $colors-dark: map-merge($colors-dark, ('dark-'+$key+'-'+($i*10): darken($color, $percent)));
  }
}
@each $key, $color in $light-colors {
  @for $i from 0 through 10 {
    $num: 10-$i;
    $percent: calc($num * 5);
    $colors-dark: map-merge($colors-dark, ($key+'-'+($i*10): darken($color, $percent)));
  }
}