diff --git a/packages/calcite-components/src/components/link/link.e2e.ts b/packages/calcite-components/src/components/link/link.e2e.ts
index e3b13288974..32e664eabec 100644
--- a/packages/calcite-components/src/components/link/link.e2e.ts
+++ b/packages/calcite-components/src/components/link/link.e2e.ts
@@ -1,5 +1,7 @@
import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, disabled, hidden, renders } from "../../tests/commonTests";
+import { accessible, defaults, disabled, hidden, renders, themed } from "../../tests/commonTests";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { html } from "../../../support/formatting";
describe("calcite-link", () => {
describe("renders", () => {
@@ -320,4 +322,45 @@ describe("calcite-link", () => {
);
});
});
+
+ describe("theme", () => {
+ describe("default", () => {
+ const tokens: ComponentTestTokens = {
+ "--calcite-link-text-color": {
+ shadowSelector: "span",
+ targetProp: "color",
+ },
+
+ "--calcite-link-background-color": {
+ shadowSelector: "span",
+ targetProp: "backgroundColor",
+ },
+
+ "--calcite-link-icon-color": {
+ shadowSelector: "calcite-icon",
+ targetProp: "--calcite-icon-color",
+ },
+ };
+ themed(html` Themed link. `, tokens);
+ });
+ describe("external link", () => {
+ const tokens: ComponentTestTokens = {
+ "--calcite-link-text-color": {
+ shadowSelector: "a",
+ targetProp: "color",
+ },
+
+ "--calcite-link-background-color": {
+ shadowSelector: "a",
+ targetProp: "backgroundColor",
+ },
+ };
+ themed(
+ html` A link to Google with an icon`,
+ tokens,
+ );
+ });
+ });
});