[Read Anything] Add link colors

In this CL, we color the links shown inside the Read Anything
side panel. The colors of unvisted and visited links will change
depending on which Read Anything color theme is chosen.

We decided to store the link colors in JS instead of the Read Anything
model since the colors are only needed on the JS side and not the C++
side.

Screenshots:
https://screenshot.googleplex.com/85Z3AKxR8b6LWsY
https://screenshot.googleplex.com/7LavMtm9hdfiC5U

Bug: 1266555
Change-Id: Ic73b9abe01bf541773c2d683d79bfc2890c42737
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4080322
Reviewed-by: Abigail Klein <abigailbklein@google.com>
Commit-Queue: Jocelyn Tran <jocelyntran@google.com>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1084478}

chrome/browser/resources/side_panel/read_anything/app.html

@@ -8,5 +8,11 @@
     line-height: var(--line-height);
     padding: 20px;
   }
+  a:link {
+    color: var(--link-color);
+  }
+  a:visited {
+    color: var(--visited-link-color);
+  }
 </style>
 <div id="container"></div>

chrome/browser/resources/side_panel/read_anything/app.ts

@@ -2,18 +2,34 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
 import '../strings.m.js';
 
-import {assert} from 'chrome://resources/js/assert_ts.js';
-import {skColorToRgba} from 'chrome://resources/js/color_utils.js';
 import {WebUiListenerMixin} from 'chrome://resources/cr_elements/web_ui_listener_mixin.js';
+import {assert} from 'chrome://resources/js/assert_ts.js';
+import {rgbToSkColor, skColorToRgba} from 'chrome://resources/js/color_utils.js';
 import {SkColor} from 'chrome://resources/mojo/skia/public/mojom/skcolor.mojom-webui.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {getTemplate} from './app.html.js';
 
 const ReadAnythingElementBase = WebUiListenerMixin(PolymerElement);
 
+interface LinkColor {
+  default: string;
+  visited: string;
+}
+const darkThemeBackgroundSkColor = rgbToSkColor(
+    getComputedStyle(document.body).getPropertyValue('--google-grey-900-rgb'));
+const defaultLinkColors: LinkColor = {
+  default: 'var(--google-blue-800)',
+  visited: 'var(--google-purple-900)',
+};
+const darkThemeLinkColors: LinkColor = {
+  default: 'var(--google-blue-300)',
+  visited: 'var(--google-purple-100)',
+};
+
 ////////////////////////////////////////////////////////////
 // Called by ReadAnythingPageHandler via callback router. //
 ////////////////////////////////////////////////////////////
@@ -144,11 +160,17 @@ export class ReadAnythingElement extends ReadAnythingElementBase {
     return validFontName ? validFontName.css : this.defaultFontName;
   }
 
+  private getLinkColor(backgroundSkColor: SkColor): LinkColor {
+    const isDark = backgroundSkColor.value === darkThemeBackgroundSkColor.value;
+    return isDark ? darkThemeLinkColors : defaultLinkColors;
+  }
+
   updateTheme() {
     const foregroundColor:
         SkColor = {value: chrome.readAnything.foregroundColor};
     const backgroundColor:
         SkColor = {value: chrome.readAnything.backgroundColor};
+    const linkColor = this.getLinkColor(backgroundColor);
 
     this.updateStyles({
       '--background-color': skColorToRgba(backgroundColor),
@@ -157,6 +179,8 @@ export class ReadAnythingElement extends ReadAnythingElementBase {
       '--foreground-color': skColorToRgba(foregroundColor),
       '--letter-spacing': chrome.readAnything.letterSpacing + 'em',
       '--line-height': chrome.readAnything.lineSpacing,
+      '--link-color': linkColor.default,
+      '--visited-link-color': linkColor.visited,
     });
   }
 }

ui/webui/resources/cr_elements/cr_shared_vars.css

@@ -24,8 +24,10 @@ html {
   --google-blue-500: rgb(var(--google-blue-500-rgb));
   --google-blue-600-rgb: 26, 115, 232;  /* #1a73e8 */
   --google-blue-600: rgb(var(--google-blue-600-rgb));
-  --google-blue-700-rgb: 25, 103, 210;  /* #1966d2 */
+  --google-blue-700-rgb: 25, 103, 210;  /* #1967d2 */
   --google-blue-700: rgb(var(--google-blue-700-rgb));
+  --google-blue-800-rgb: 24, 90, 188;  /* ##185abc */
+  --google-blue-800: rgb(var(--google-blue-800-rgb));
 
   --google-green-50-rgb: 230, 244, 234;  /* #e6f4ea */
   --google-green-50: rgb(var(--google-green-50-rgb));
@@ -69,6 +71,11 @@ html {
   /* --google-grey-900 + 4% white blended together. */
   --google-grey-900-white-4-percent: #292a2d;
 
+  --google-purple-100-rgb: 233, 210, 253;  /* #e9d2fd */
+  --google-purple-100: rgb(var(--google-purple-100-rgb));
+  --google-purple-900-rgb: 104, 29, 168;  /* #681da8 */
+  --google-purple-900: rgb(var(--google-purple-900-rgb));
+
   --google-red-300-rgb: 242, 139, 130;  /* #f28b82 */
   --google-red-300: rgb(var(--google-red-300-rgb));
   --google-red-500-rgb: 234, 67, 53;  /* #ea4335 */

ui/webui/resources/js/color_utils.ts

@@ -36,3 +36,18 @@ export function hexColorToSkColor(hexColor: string): SkColor {
   const b = parseInt(hexColor.substring(5, 7), 16);
   return {value: 0xff000000 + (r << 16) + (g << 8) + b};
 }
+
+/**
+ * Converts a string of the form "<red>, <green>, <blue>" to an SkColor
+ * object.
+ * @param rgb The rgb color string.
+ * @return The SkColor object,
+ */
+export function rgbToSkColor(rgb: string): SkColor {
+  const rgbValues = rgb.split(',');
+  const hex = rgbValues.map((bit) => {
+    bit = parseInt(bit).toString(16);
+    return (bit.length === 1) ? '0' + bit : bit;
+  });
+  return hexColorToSkColor('#' + hex.join(''));
+}