From eb904337c07cd593a3d3ad99e46f0849638152af Mon Sep 17 00:00:00 2001
From: Brian Dubois <bdubois@google.com>
Date: Fri, 17 Sep 2021 16:20:00 -0400
Subject: [PATCH] Style link colors in both dark and light modes in polymer
 plugins.

---
 .../components/tf_dashboard_common/dashboard-style.ts     | 8 ++++++++
 .../components/tf_dashboard_common/tensorboard-color.ts   | 4 ++++
 .../graph/tf_graph_dashboard/tf-graph-dashboard.ts        | 8 ++++++++
 .../plugins/hparams/tf_hparams_main/tf-hparams-main.ts    | 8 ++++++++
 4 files changed, 28 insertions(+)

diff --git a/tensorboard/components/tf_dashboard_common/dashboard-style.ts b/tensorboard/components/tf_dashboard_common/dashboard-style.ts
index ecd7768a13..0274513c3f 100644
--- a/tensorboard/components/tf_dashboard_common/dashboard-style.ts
+++ b/tensorboard/components/tf_dashboard_common/dashboard-style.ts
@@ -113,5 +113,13 @@ registerStyleDomModule({
         font-size: 15px;
         margin-top: 5px;
       }
+
+      a {
+        color: var(--tb-link);
+      }
+
+      a:visited {
+        color: var(--tb-link-visited);
+      }
   `,
 });
diff --git a/tensorboard/components/tf_dashboard_common/tensorboard-color.ts b/tensorboard/components/tf_dashboard_common/tensorboard-color.ts
index 3db7e4ac26..60dbb0a434 100644
--- a/tensorboard/components/tf_dashboard_common/tensorboard-color.ts
+++ b/tensorboard/components/tf_dashboard_common/tensorboard-color.ts
@@ -31,6 +31,8 @@ style.textContent = `
     --primary-background-color: #fff;
     --secondary-background-color: #e9e9e9;
     --tb-layout-background-color: #f5f5f5;
+    --tb-link: #1976d2; /* material blue 700. */
+    --tb-link-visited: #7b1fa2; /* material purple 700. */
   }
 
   :root .dark-mode {
@@ -44,6 +46,8 @@ style.textContent = `
     --primary-background-color: #303030;  /* material grey A400. */
     --secondary-background-color: #3a3a3a;
     --tb-layout-background-color: #3a3a3a;
+    --tb-link: #42a5f5; /* material blue 400. */
+    --tb-link-visited: #ba68c8; /* material purple 300. */
     /* Overrides paper-material */
     --shadow-elevation-2dp_-_box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 0.14),
       0 1px 5px 0 rgba(255, 255, 255, 0.12),
diff --git a/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.ts b/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.ts
index e304896a2e..8f933e0883 100644
--- a/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.ts
+++ b/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.ts
@@ -202,6 +202,14 @@ class TfGraphDashboard extends LegacyElementMixin(PolymerElement) {
       .center:not(.no-graph) .no-data-message {
         display: none;
       }
+
+      a {
+        color: var(--tb-link);
+      }
+
+      a:visited {
+        color: var(--tb-link-visited);
+      }
     </style>
   `;
   /**
diff --git a/tensorboard/plugins/hparams/tf_hparams_main/tf-hparams-main.ts b/tensorboard/plugins/hparams/tf_hparams_main/tf-hparams-main.ts
index 3d9de3a22b..a5d79ae36e 100644
--- a/tensorboard/plugins/hparams/tf_hparams_main/tf-hparams-main.ts
+++ b/tensorboard/plugins/hparams/tf_hparams_main/tf-hparams-main.ts
@@ -138,6 +138,14 @@ class TfHparamsMain extends LegacyElementMixin(PolymerElement) {
         max-width: 540px;
         margin: 80px auto 0 auto;
       }
+
+      a {
+        color: var(--tb-link);
+      }
+
+      a:visited {
+        color: var(--tb-link-visited);
+      }
     </style>
   `;
   // An object for making HParams API requests to the backend.