fix(link): set interactions colors on icons inside links (#1554)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [X] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

Icons inside link are not colored once state is visited

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: CDE-2285

## What is the new behavior?

Icons are now using visited color token.

## Does this PR introduce a breaking change?

- [ ] Yes
- [X] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

projects/angular/src/layout/nav/_links.clarity.scss

@@ -8,14 +8,40 @@
 @use 'variables.nav' as nav-variables;
 
 @include mixins.exports('links.clarity') {
- a:link {
- /*
- * Due to the higher specificity of `a:link` over `.btn`, `.nav-link`, `.dropdown-item`, `.alert-action` and `badge`
- * it overrides the styles of both which is not required.
- * Also `.btn, .nav-link, .dropdown-item, .alert-action, .badge` doesn't need these styles, so we don't add them in these cases.
- */
- &:not(.btn, .nav-link, .dropdown-item, .alert-action, .badge) {
- @include mixins.generate-typography-token('LINK-13');
+ a {
+ &:link {
+ /*
+ * Due to the higher specificity of `a:link` over `.btn`, `.nav-link`, `.dropdown-item`, `.alert-action` and `badge`
+ * it overrides the styles of both which is not required.
+ * Also `.btn, .nav-link, .dropdown-item, .alert-action, .badge` doesn't need these styles, so we don't add them in these cases.
+ */
+ &:not(.btn, .nav-link, .dropdown-item, .alert-action, .badge) {
+ @include mixins.generate-typography-token('LINK-13');
+ }
+ }
+ &:active {
+ cds-icon,
+ clr-icon {
+ color: nav-variables.$clr-link-active-color;
+ }
+ }
+ &:hover {
+ cds-icon,
+ clr-icon {
+ color: nav-variables.$clr-link-hover-color;
+ }
+ }
+ &:visited {
+ cds-icon,
+ clr-icon {
+ color: nav-variables.$clr-link-visited-color;
+ }
+ &:hover {
+ cds-icon,
+ clr-icon {
+ color: nav-variables.$clr-link-visited-color-hover;
+ }
+ }
  }
  }