From 5d26527800a3f7417f360b07cc5a33e599214f53 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 15 Nov 2024 14:00:09 -0800
Subject: [PATCH] feat(link): add component tokens (#10689)

**Related Issue:** #7180

## Summary

Add `link` component tokens.

`--calcite-link-text-color`: Specifies the component's text color.
---
 .../src/components/link/link.e2e.ts                | 14 +++++++++++++-
 .../src/components/link/link.scss                  | 12 ++++++++++--
 .../src/components/tile/tile.e2e.ts                |  4 ++++
 .../src/components/tile/tile.scss                  |  5 +++++
 .../calcite-components/src/custom-theme.stories.ts |  4 +++-
 .../calcite-components/src/custom-theme/link.ts    |  7 +++++++
 packages/calcite-components/src/demos/link.html    | 13 +++++++++++++
 7 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 packages/calcite-components/src/custom-theme/link.ts

diff --git a/packages/calcite-components/src/components/link/link.e2e.ts b/packages/calcite-components/src/components/link/link.e2e.ts
index af6ce9d0f0d..b3fa30bf706 100644
--- a/packages/calcite-components/src/components/link/link.e2e.ts
+++ b/packages/calcite-components/src/components/link/link.e2e.ts
@@ -1,6 +1,7 @@
 import { newE2EPage, E2EPage, E2EElement } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it, beforeEach } from "vitest";
-import { accessible, defaults, disabled, hidden, renders } from "../../tests/commonTests";
+import { accessible, defaults, disabled, hidden, renders, themed } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 
 describe("calcite-link", () => {
   describe("renders", () => {
@@ -321,4 +322,15 @@ describe("calcite-link", () => {
       );
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(html` <calcite-link href="#" icon-start="banana" icon-end="information">link</calcite-link> `, {
+        "--calcite-link-text-color": {
+          shadowSelector: "a",
+          targetProp: "color",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/link/link.scss b/packages/calcite-components/src/components/link/link.scss
index 6abf19beb89..2484e090a46 100644
--- a/packages/calcite-components/src/components/link/link.scss
+++ b/packages/calcite-components/src/components/link/link.scss
@@ -1,3 +1,11 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-link-text-color: Specifies the component's text color.
+ */
+
 :host {
   display: inline;
 }
@@ -56,13 +64,13 @@ calcite-icon {
 :host {
   span,
   a {
-    @apply text-color-link
-      transition-default
+    @apply transition-default
       relative
       inline
       border-none
       bg-transparent
       p-0;
+    color: var(--calcite-link-text-color, var(--calcite-color-text-link));
     line-height: inherit;
     white-space: initial;
     background-image: linear-gradient(currentColor, currentColor),
diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index e31ff31def4..59b57b8f009 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -504,6 +504,10 @@ describe("calcite-tile", () => {
               targetProp: "color",
               state: "hover",
             },
+            "--calcite-tile-link-text-color": {
+              shadowSelector: "calcite-link",
+              targetProp: "--calcite-link-text-color",
+            },
           },
         );
       });
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 2217e17787c..debe6f74c7d 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -11,6 +11,7 @@
  * @prop --calcite-tile-link-color: When `href` is present, specifies the component's link color.
  * @prop --calcite-tile-shadow: Specifies the shadow around the component.
  * @prop --calcite-tile-text-color: Specifies the component's `description` and `icon` text color, but not the `heading` text color.
+ * @prop --calcite-tile-link-text-color: Specifies the component's link text color.
  */
 
 :host {
@@ -19,6 +20,10 @@
   display: inline-block;
 }
 
+calcite-link {
+  --calcite-link-text-color: var(--calcite-tile-link-text-color);
+}
+
 .container {
   background-color: var(--calcite-tile-background-color, var(--calcite-color-foreground-1));
   block-size: var(--calcite-container-size-content-fluid);
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 6e53a5e581c..7dc7aab8ed6 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -26,6 +26,7 @@ import { input, inputTokens } from "./custom-theme/input";
 import { inputNumber } from "./custom-theme/input-number";
 import { inputText } from "./custom-theme/input-text";
 import { label, labelTokens } from "./custom-theme/label";
+import { link, linkTokens } from "./custom-theme/link";
 import { loader } from "./custom-theme/loader";
 import { notices } from "./custom-theme/notice";
 import { pagination } from "./custom-theme/pagination";
@@ -121,7 +122,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
         ${chips} ${pagination} ${slider}
       </div>
       <div class="demo-column">
-        ${datePicker} ${tabs} ${label} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail}
+        ${datePicker} ${tabs} ${label} ${link} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail}
         ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip}
       </div>
       ${alert} ${navigation}
@@ -144,6 +145,7 @@ const componentTokens = {
   ...checkboxTokens,
   ...handleTokens,
   ...labelTokens,
+  ...linkTokens,
   ...popoverTokens,
   ...progressTokens,
   ...inputTokens,
diff --git a/packages/calcite-components/src/custom-theme/link.ts b/packages/calcite-components/src/custom-theme/link.ts
new file mode 100644
index 00000000000..c2429951643
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/link.ts
@@ -0,0 +1,7 @@
+import { html } from "../../support/formatting";
+
+export const linkTokens = {
+  calciteLinkTextColor: "",
+};
+
+export const link = html` <calcite-link href="#" icon-start="banana" icon-end="information">link</calcite-link> `;
diff --git a/packages/calcite-components/src/demos/link.html b/packages/calcite-components/src/demos/link.html
index d66a0a298f8..e2b52362933 100644
--- a/packages/calcite-components/src/demos/link.html
+++ b/packages/calcite-components/src/demos/link.html
@@ -238,6 +238,19 @@
           eum fugiat quo voluptas nulla pariatur
         </div>
       </div>
+
+      <!-- themed -->
+      <div class="parent">
+        <div class="trigger-external-wrap-paragraph right-aligned-text">themed</div>
+        <style>
+          .link-themed {
+            --calcite-link-text-color: orange;
+          }
+        </style>
+        <div class="trigger-external-wrap-paragraph font-size-1">
+          <calcite-link class="link-themed" href="#" icon-start="banana" icon-end="information">link</calcite-link>
+        </div>
+      </div>
     </demo-dom-swapper>
   </body>
 </html>