$ds-all-colors: map-merge(map-merge($ds-color-palette, $ds-system-palette), $ds-gray-palette);
@each $ds-color-name, $ds-hex in $ds-all-colors {
  .#{$ds-color-name}-text {
    color: $ds-hex;
  }
}

@each $ds-color-name, $ds-hex in $ds-color-palette {
  .#{$ds-color-name}-background {
    background-color: $ds-hex;
  }

  .light-#{$ds-color-name}-background {
    background-color: almost-white($ds-hex);
  }
}

@each $ds-color-name, $ds-hex in $ds-gray-palette {
  .#{$ds-color-name}-background {
    background-color: $ds-hex;
  }
}

@each $ds-color-name, $ds-hex in $ds-system-palette {
  .#{$ds-color-name}-background {
    background-color: $ds-hex;
  }
}

a, a:active {
  color: $ds-link-color;
  transition: color .3s;
}

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

a:hover {
 color: $ds-link-color-hover;
}
