fix: preventing duplicate style declarations in CSS

notes:
• the link styles we were using for the dev app and website typography pages was getting duplicated each time the link variables were being imported
• i moved the styles to their own file and imported them where they were needed
• because these styles are only used for the dev app demos and typography demo on the website, i did not consider this a breaking change
• i have verified the styles are no longer duplicated
• i have tested the changes locally on the website and dev-app
• i have also tested the changes against gemini in both light and dark themes

Tested in:
✔︎ Chrome

Fixes|Closes: #3540

Signed-off-by: Scott Mathis <smathis@vmware.com>

src/clr-angular/layout/nav/_links.clarity.scss

@@ -0,0 +1,26 @@
+// Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
+// This software is released under MIT license.
+// The full license information can be found in LICENSE in the root directory of this project.
+
+@include exports('links.clarity') {
+  // only imported for demos. gives a static view of links in various states.
+  a.link-normal:link {
+    color: $clr-link-color;
+    text-decoration: none;
+  }
+
+  a.link-hovered:link {
+    color: $clr-link-hover-color;
+    text-decoration: underline;
+  }
+
+  a.link-clicked:link {
+    color: $clr-link-active-color;
+    text-decoration: underline;
+  }
+
+  a.link-visited:link {
+    color: $clr-link-visited-color;
+    text-decoration: none;
+  }
+}

src/clr-angular/layout/nav/_variables.nav.scss

@@ -9,25 +9,3 @@ $clr-link-color: $clr-color-action-600 !default;
 $clr-link-hover-color: $clr-color-action-600 !default;
 $clr-link-visited-color: hsl(238, 41%, 53%) !default;
 $clr-custom-links-hover-color: $clr-color-neutral-200 !default;
-
-// These utility styles get used in demos.
-// To test theming they need to live here.
-a.link-normal:link {
-  color: $clr-link-color;
-  text-decoration: none;
-}
-
-a.link-hovered:link {
-  color: $clr-link-hover-color;
-  text-decoration: underline;
-}
-
-a.link-clicked:link {
-  color: $clr-link-active-color;
-  text-decoration: underline;
-}
-
-a.link-visited:link {
-  color: $clr-link-visited-color;
-  text-decoration: none;
-}

src/clr-angular/utils/_components.clarity.scss

@@ -87,6 +87,7 @@
 
 //Nav
 @import '../layout/nav/header.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+@import '../layout/nav/links.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity
 @import '../layout/nav/nav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
 @import '../layout/nav/subnav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
 @import '../layout/nav/sidenav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity