$all-colors: map-merge(map-merge($color-palette, $gray-palette), $system-palette);
@function color-selector($color-name, $suffix) {
  $val: ();
  $selectors: (p, h1, h2, h3, h4, h5, h6, li, label, strong, em, i, b, a);
  @each $selector in $selectors {
    $val: append($val, unquote('#{$selector}.has-#{$color-name}-#{$suffix}'), comma);
  }

  @return $val;
}

:root {
  --font-color: $font-color;

  @each $color-name, $hex in $all-colors {
    --#{$color-name}-color: #{$hex};
    @if map-has-key($color-palette, $color-name) {
      --#{$color-name}-light-color: #{map-get($light-color-palette, $color-name)};
      --#{$color-name}-dark-color: #{map-get($dark-color-palette, $color-name)};
    }
  }
}

@each $color-name, $hex in $all-colors {
  // the only element that have specific color over the `body` element, is
  // the headers - so is needed to override they color when background changes
  $headers: h1, h2, h3, h4, h5, h6;

  .has-#{$color-name}-background-color {
    background-color: $hex;

    &, #{$headers} {
      color: contrast-color($hex);
    }
  }

  @if map-has-key($color-palette, $color-name) {
    .has-#{$color-name}-light-background-color {
      background-color: map-get($light-color-palette, $color-name);
      &, #{$headers} {
        color: contrast-color(map-get($light-color-palette, $color-name));
      }
    }

    .has-#{$color-name}-dark-background-color {
      background-color: map-get($dark-color-palette, $color-name);
      &, #{$headers} {
        color: contrast-color(map-get($dark-color-palette, $color-name));
      }
    }
  }
}
a, a:active {
  color: $link-color;
}

a:visited {
 color: $link-color-visited;
}

a:hover {
 color: $link-color-hover;
 transition: color .3s;
}

aside li a, aside li a:active, aside li a:visited {
  color: $font-color;
}

@each $color-name, $hex in $all-colors {
  #{color-selector($color-name, 'color')} {
    color: $hex;
  }

  @if map-has-key($color-palette, $color-name) {
    #{color-selector($color-name, 'light-color')} {
      color: map-get($light-color-palette, $color-name);
    }

    #{color-selector($color-name, 'dark-color')} {
      color: map-get($dark-color-palette, $color-name);
    }
  }
}