From d17dbd47113fbaebd271440b9d49d9e3ad77ea23 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Wed, 29 May 2024 23:11:48 -0500
Subject: [PATCH 1/2] test(popover): add token theming tests

---
 .../src/components/popover/popover.e2e.ts     | 112 ++++++++++++++++++
 1 file changed, 112 insertions(+)

diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts
index f8887c601ec..789d61d1896 100644
--- a/packages/calcite-components/src/components/popover/popover.e2e.ts
+++ b/packages/calcite-components/src/components/popover/popover.e2e.ts
@@ -10,6 +10,7 @@ import {
   renders,
   t9n,
 } from "../../tests/commonTests";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
 import { CSS } from "./resources";
 
 describe("calcite-popover", () => {
@@ -699,4 +700,115 @@ describe("calcite-popover", () => {
       });
     });
   });
+
+  describe("theme", () => {
+    const popoverHTML = html`
+      <calcite-popover
+        heading="I'm a heading in the header using the 'heading' prop!"
+        label="right end popover"
+        reference-element="heading-title-content-cta"
+        placement="right-end"
+        id="popover-heading"
+        closable
+        style="width: 25vw"
+      >
+        <div style="padding: 0.5rem 1rem 0.75rem">
+          <p style="margin-top: 0">
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+            scrambled it to make a type specimen book.
+          </p>
+        </div>
+      </calcite-popover>
+    `;
+
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-popover-background-color": {
+          shadowSelector: `.calcite-floating-ui-anim`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-popover-border-color": {
+          shadowSelector: `.calcite-floating-ui-anim`,
+          targetProp: "borderColor",
+        },
+        "--calcite-popover-close-background-color": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-background-color",
+        },
+        "--calcite-popover-close-background-color-hover": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-background-color",
+          state: { hover: { attribute: "class", value: `button` } },
+        },
+        "--calcite-popover-close-background-color-active": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-background-color",
+          state: { press: { attribute: "class", value: `button` } },
+        },
+
+        "--calcite-popover-close-icon-color": {
+          shadowSelector: `.${CSS.closeButton}`,
+          targetProp: "color",
+        },
+        "--calcite-popover-close-icon-color-hover": {
+          shadowSelector: `.${CSS.closeButton}`,
+          targetProp: "color",
+          state: { hover: { attribute: "class", value: `${CSS.closeButton}` } },
+        },
+        "--calcite-popover-close-icon-color-active": {
+          shadowSelector: `.${CSS.closeButton}`,
+          targetProp: "color",
+          state: { press: { attribute: "class", value: `${CSS.closeButton}` } },
+        },
+        "--calcite-popover-close-text-color": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-text-color",
+        },
+        "--calcite-popover-close-text-color-hover": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-text-color",
+          state: { hover: { attribute: "class", value: `button` } },
+        },
+        "--calcite-popover-close-text-color-active": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-text-color",
+          state: { press: { attribute: "class", value: `button` } },
+        },
+        "--calcite-popover-corner-radius": [
+          {
+            shadowSelector: `.calcite-floating-ui-anim`,
+            targetProp: "borderRadius",
+          },
+          {
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "borderRadius",
+          },
+          {
+            shadowSelector: `.${CSS.closeButtonContainer}`,
+            targetProp: "borderStartEndRadius",
+          },
+          {
+            shadowSelector: `.${CSS.closeButtonContainer}`,
+            targetProp: "borderEndEndRadius",
+          },
+        ],
+        "--calcite-popover-shadow": {
+          shadowSelector: `.calcite-floating-ui-anim`,
+          targetProp: "boxShadow",
+        },
+        "--calcite-popover-text-color": [
+          {
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "color",
+          },
+          {
+            shadowSelector: `.${CSS.heading}`,
+            targetProp: "color",
+          },
+        ],
+      };
+      themed(popoverHTML, tokens);
+    });
+  });
 });

From 8d60e5eb82f0289d9e1d39e784d25a2207a87aad Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <amekala@esri.com>
Date: Thu, 30 May 2024 12:10:36 -0500
Subject: [PATCH 2/2] refactor

---
 .../calcite-components/src/components/popover/popover.e2e.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts
index 789d61d1896..d90088492fc 100644
--- a/packages/calcite-components/src/components/popover/popover.e2e.ts
+++ b/packages/calcite-components/src/components/popover/popover.e2e.ts
@@ -11,6 +11,7 @@ import {
   t9n,
 } from "../../tests/commonTests";
 import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
+import { FloatingCSS } from "../../utils/floating-ui";
 import { CSS } from "./resources";
 
 describe("calcite-popover", () => {
@@ -777,7 +778,7 @@ describe("calcite-popover", () => {
         },
         "--calcite-popover-corner-radius": [
           {
-            shadowSelector: `.calcite-floating-ui-anim`,
+            shadowSelector: `.${FloatingCSS.animation}`,
             targetProp: "borderRadius",
           },
           {
@@ -794,7 +795,7 @@ describe("calcite-popover", () => {
           },
         ],
         "--calcite-popover-shadow": {
-          shadowSelector: `.calcite-floating-ui-anim`,
+          shadowSelector: `.${FloatingCSS.animation}`,
           targetProp: "boxShadow",
         },
         "--calcite-popover-text-color": [