Add support for dark theme links. (#11344) (#11348)

ui_framework/components/_mixins.scss

@@ -4,6 +4,33 @@
   }
 }
 
+/**
+ * 1. Enforce pointer when there's no href.
+ */
+@mixin link {
+  color: $globalLinkColor;
+  text-decoration: none;
+  cursor: pointer; /* 1 */
+
+  &:visited,
+  &:active {
+    color: $globalLinkColor;
+  }
+
+  &:hover {
+    color: $globalLinkHoverColor;
+    text-decoration: underline;
+  }
+
+  @include darkTheme {
+    color: $globalLinkColor--darkTheme;
+
+    &:hover {
+      color: $globalLinkColor--darkTheme;
+    }
+  }
+}
+
 /**
  * 1. Links can't have a disabled attribute, so they can't support :disabled.
  */

ui_framework/components/link/_link.scss

@@ -1,18 +1,3 @@
-/**
- * 1. Enforce pointer when there's no href.
- */
 .kuiLink {
-  color: $globalLinkColor;
-  text-decoration: none;
-  cursor: pointer; /* 1 */
-
-  &:visited,
-  &:active {
-    color: $globalLinkColor;
-  }
-
-  &:hover {
-    color: $globalLinkHoverColor;
-    text-decoration: underline;
-  }
+  @include link;
 }

ui_framework/components/local_nav/_local_breadcrumbs.scss

@@ -26,23 +26,13 @@
   }
 }
 
+/**
+ * 1. Make it a bit darker to contrast with the gray background.
+ */
 .kuiLocalBreadcrumb__link {
+  @include link;
+  color: $localBreadcrumbLinkColor; /* 1 */
   font-size: $globalFontSize;
-  color: $localBreadcrumbLinkColor;
-  text-decoration: none;
-
-  &:hover {
-    color: $localBreadcrumbLinkColor;
-    text-decoration: underline;
-  }
-
-  @include darkTheme {
-    color: $globalLinkColor--darkTheme;
-
-    &:hover {
-      color: $globalLinkColor--darkTheme;
-    }
-  }
 }
 
 .kuiLocalBreadcrumb__emphasis {

ui_framework/dist/ui_framework.css

@@ -1,3 +1,6 @@
+/**
+ * 1. Enforce pointer when there's no href.
+ */
 /**
  * 1. Links can't have a disabled attribute, so they can't support :disabled.
  */
@@ -1142,9 +1145,6 @@ body {
   font-size: 14px;
   line-height: 1.5; }
 
-/**
- * 1. Enforce pointer when there's no href.
- */
 .kuiLink {
   color: #3CAED2;
   text-decoration: none;
@@ -1155,6 +1155,10 @@ body {
   .kuiLink:hover {
     color: #006E8A;
     text-decoration: underline; }
+  .theme-dark .kuiLink {
+    color: #b7e2ea; }
+    .theme-dark .kuiLink:hover {
+      color: #b7e2ea; }
 
 .kuiLoadingItems {
   padding: 30px;
@@ -1192,12 +1196,21 @@ body {
     .theme-dark .kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before {
       color: #a5a5a5; }
 
+/**
+ * 1. Make it a bit darker to contrast with the gray background.
+ */
 .kuiLocalBreadcrumb__link {
-  font-size: 14px;
+  color: #3CAED2;
+  text-decoration: none;
+  cursor: pointer;
+  /* 1 */
   color: #328caa;
-  text-decoration: none; }
+  /* 1 */
+  font-size: 14px; }
+  .kuiLocalBreadcrumb__link:visited, .kuiLocalBreadcrumb__link:active {
+    color: #3CAED2; }
   .kuiLocalBreadcrumb__link:hover {
-    color: #328caa;
+    color: #006E8A;
     text-decoration: underline; }
   .theme-dark .kuiLocalBreadcrumb__link {
     color: #b7e2ea; }

ui_framework/doc_site/src/views/link/link_example.js

@@ -21,6 +21,11 @@ export default props => (
       <GuideDemo
         html={linkHtml}
       />
+
+      <GuideDemo
+        html={linkHtml}
+        isDarkTheme={true}
+      />
     </GuideSection>
   </GuidePage>
 );