chore: link light mode

Adds light mode support to Link component, using color defined in design for
containers#7149.

Fixes containers#7215.

Signed-off-by: Tim deBoer <git@tdeboer.ca>

packages/main/src/plugin/color-registry.ts

@@ -231,6 +231,7 @@ export class ColorRegistry {
     this.initInvertContent();
     this.initCardContent();
     this.initInputBox();
+    this.initLink();
   }
 
   protected initGlobalNav(): void {
@@ -543,4 +544,18 @@ export class ColorRegistry {
       light: colorPalette.gray[500],
     });
   }
+
+  // links
+  protected initLink(): void {
+    const sNav = 'link';
+
+    this.registerColor(`${sNav}`, {
+      dark: colorPalette.purple[400],
+      light: colorPalette.purple[700],
+    });
+    this.registerColor(`${sNav}-bg`, {
+      dark: colorPalette.white,
+      light: colorPalette.black,
+    });
+  }
 }

packages/renderer/src/lib/ui/Link.spec.ts

@@ -1,5 +1,5 @@
 /**********************************************************************
- * Copyright (C) 2023 Red Hat, Inc.
+ * Copyright (C) 2023, 2024 Red Hat, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -42,8 +42,8 @@ test('Check link styling', async () => {
   // check for one element of the styling
   const link = screen.getByRole('link');
   expect(link).toBeInTheDocument();
-  expect(link).toHaveClass('text-purple-400');
-  expect(link).toHaveClass('hover:bg-white');
+  expect(link).toHaveClass('text-[var(--pd-link)]');
+  expect(link).toHaveClass('hover:bg-[var(--pd-link-bg)]');
   expect(link).toHaveClass('hover:bg-opacity-10');
   expect(link).toHaveClass('cursor-pointer');
 });

packages/renderer/src/lib/ui/Link.svelte

@@ -36,7 +36,7 @@ function click(): void {
 <!-- svelte-ignore a11y-no-redundant-roles -->
 <!-- svelte-ignore a11y-interactive-supports-focus -->
 <a
-  class="text-purple-400 hover:bg-white hover:bg-opacity-10 transition-all rounded-[4px] p-0.5 no-underline cursor-pointer {$$props.class ||
+  class="text-[var(--pd-link)] hover:bg-[var(--pd-link-bg)] hover:bg-opacity-10 transition-all rounded-[4px] p-0.5 no-underline cursor-pointer {$$props.class ||
     ''}"
   on:click="{() => click()}"
   role="link"