From 789b6ac30b94cce19550cb3854535d18e2f9be44 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 28 May 2024 18:52:21 -0700
Subject: [PATCH 1/3] test(modal): add token theming tests

---
 .../src/components/modal/modal.e2e.ts         | 82 ++++++++++++++++++-
 1 file changed, 79 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
index a57d1ba3939..998277be4aa 100644
--- a/packages/calcite-components/src/components/modal/modal.e2e.ts
+++ b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -1,7 +1,8 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { focusable, hidden, openClose, renders, slots, t9n } from "../../tests/commonTests";
+import { focusable, hidden, openClose, renders, slots, t9n, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { GlobalTestProps, isElementFocused, skipAnimations } from "../../tests/utils";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
 import { CSS, SLOTS } from "./resources";
 
 describe("calcite-modal", () => {
@@ -610,7 +611,7 @@ describe("calcite-modal", () => {
     });
     const scrimStyles = await page.evaluate(() => {
       const scrim = document.querySelector("calcite-modal").shadowRoot.querySelector(".scrim");
-      return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background");
+      return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background-color");
     });
     expect(scrimStyles.trim()).toEqual("rgba(0, 0, 0, 0.85)");
   });
@@ -632,7 +633,7 @@ describe("calcite-modal", () => {
     });
     const scrimStyles = await page.evaluate(() => {
       const scrim = document.querySelector("calcite-modal").shadowRoot.querySelector(".scrim");
-      return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background");
+      return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background-color");
     });
     expect(scrimStyles).toEqual(overrideStyle);
   });
@@ -657,3 +658,78 @@ describe("calcite-modal", () => {
     expect(closeIcon).not.toBe(null);
   });
 });
+
+describe("theme", () => {
+  const menuHTML = html`
+    <calcite-modal open>
+      <h3 slot="header">Slot for a header.</h3>
+      <div slot="content-top">Slot for a content-top.</div>
+      <div slot="content" style="height: 100px">
+        Lorem ipsum dolor sit amet, feugiat magna ut, posuere arcu. Curabitur varius erat ut suscipit convallis.
+      </div>
+      <div slot="content-bottom">Slot for a content-bottom.</div>
+      <calcite-button slot="primary" width="full">Button</calcite-button>
+    </calcite-modal>
+  `;
+  describe("default", () => {
+    const tokens: ComponentTestTokens = {
+      // "--calcite-modal-accent-color": {
+      //   targetProp: "--calcite-internal-modal-accent-color",
+      // },
+      "--calcite-modal-background-color": {
+        shadowSelector: `.${CSS.modal}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-modal-border-color": {
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "--calcite-internal-modal-border-color",
+      },
+      "--calcite-modal-close-button-background-color-hover": {
+        shadowSelector: `.${CSS.modal} .${CSS.close}`,
+        targetProp: "backgroundColor",
+        state: { hover: { attribute: "class", value: CSS.close } },
+      },
+      "--calcite-modal-close-button-background-color": {
+        shadowSelector: `.${CSS.modal} .${CSS.close}`,
+        targetProp: "backgroundColor",
+      },
+      // "--calcite-modal-close-button-icon-color": {
+      //   shadowSelector: `.${CSS.modal} .${CSS.close} calcite-icon`,
+      //   targetProp: "--calcite-icon-color",
+      // },
+      "--calcite-modal-content-background-color": {
+        shadowSelector: `.${CSS.modal} .${CSS.content}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-modal-content-padding": {
+        shadowSelector: `.${CSS.modal} .${CSS.content}`,
+        targetProp: "padding",
+      },
+      "--calcite-modal-content-space": {
+        shadowSelector: `.${CSS.modal} .${CSS.content}`,
+        targetProp: "padding",
+      },
+      "--calcite-modal-height": {
+        shadowSelector: `.${CSS.modal}`,
+        targetProp: "blockSize",
+      },
+      "--calcite-modal-shadow": {
+        shadowSelector: `.${CSS.modal}`,
+        targetProp: "boxShadow",
+      },
+      "--calcite-modal-text-color": {
+        shadowSelector: `.${CSS.modal}`,
+        targetProp: "color",
+      },
+      "--calcite-modal-width": {
+        shadowSelector: `.${CSS.modal}`,
+        targetProp: "inlineSize",
+      },
+      "--calcite-modal-scrim-background-color": {
+        shadowSelector: `.${CSS.scrim}`,
+        targetProp: "--calcite-scrim-background-color",
+      },
+    };
+    themed(async () => menuHTML, tokens);
+  });
+});

From 7129ea26976bc5091987e0a1d9122fb5d7f36e53 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 30 May 2024 11:24:19 -0700
Subject: [PATCH 2/3] accent color tests

---
 .../src/components/modal/modal.e2e.ts         | 69 ++++++++++++++++++-
 1 file changed, 67 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
index 998277be4aa..f7147e57dc0 100644
--- a/packages/calcite-components/src/components/modal/modal.e2e.ts
+++ b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -660,7 +660,7 @@ describe("calcite-modal", () => {
 });
 
 describe("theme", () => {
-  const menuHTML = html`
+  const modalHTML = html`
     <calcite-modal open>
       <h3 slot="header">Slot for a header.</h3>
       <div slot="content-top">Slot for a content-top.</div>
@@ -671,6 +671,31 @@ describe("theme", () => {
       <calcite-button slot="primary" width="full">Button</calcite-button>
     </calcite-modal>
   `;
+  const modalBrandHTML = html`
+    <calcite-modal kind="brand" open>
+      <h3 slot="header">Slot for a header.</h3>
+    </calcite-modal>
+  `;
+  const modalDangerHTML = html`
+    <calcite-modal kind="danger" open>
+      <h3 slot="header">Slot for a header.</h3>
+    </calcite-modal>
+  `;
+  const modalInfoHTML = html`
+    <calcite-modal kind="info" open>
+      <h3 slot="header">Slot for a header.</h3>
+    </calcite-modal>
+  `;
+  const modalSuccessHTML = html`
+    <calcite-modal kind="success" open>
+      <h3 slot="header">Slot for a header.</h3>
+    </calcite-modal>
+  `;
+  const modalWarningHTML = html`
+    <calcite-modal kind="warning" open>
+      <h3 slot="header">Slot for a header.</h3>
+    </calcite-modal>
+  `;
   describe("default", () => {
     const tokens: ComponentTestTokens = {
       // "--calcite-modal-accent-color": {
@@ -730,6 +755,46 @@ describe("theme", () => {
         targetProp: "--calcite-scrim-background-color",
       },
     };
-    themed(async () => menuHTML, tokens);
+    themed(async () => modalHTML, tokens);
+  });
+  describe("kindBrand", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-modal-accent-color": {
+        targetProp: "--calcite-internal-modal-accent-color",
+      },
+    };
+    themed(async () => modalBrandHTML, tokens);
+  });
+  describe("dangerBrand", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-modal-accent-color": {
+        targetProp: "--calcite-internal-modal-accent-color",
+      },
+    };
+    themed(async () => modalDangerHTML, tokens);
+  });
+  describe("infoBrand", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-modal-accent-color": {
+        targetProp: "--calcite-internal-modal-accent-color",
+      },
+    };
+    themed(async () => modalInfoHTML, tokens);
+  });
+  describe("successBrand", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-modal-accent-color": {
+        targetProp: "--calcite-internal-modal-accent-color",
+      },
+    };
+    themed(async () => modalSuccessHTML, tokens);
+  });
+  describe("warningBrand", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-modal-accent-color": {
+        targetProp: "--calcite-internal-modal-accent-color",
+      },
+    };
+    themed(async () => modalWarningHTML, tokens);
   });
 });

From 5f4045089015442295d16b9393c5fb1a3893a575 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 30 May 2024 11:54:28 -0700
Subject: [PATCH 3/3] cleanup

---
 .../calcite-components/src/components/modal/modal.e2e.ts   | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
index f7147e57dc0..452b5f38232 100644
--- a/packages/calcite-components/src/components/modal/modal.e2e.ts
+++ b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -698,9 +698,6 @@ describe("theme", () => {
   `;
   describe("default", () => {
     const tokens: ComponentTestTokens = {
-      // "--calcite-modal-accent-color": {
-      //   targetProp: "--calcite-internal-modal-accent-color",
-      // },
       "--calcite-modal-background-color": {
         shadowSelector: `.${CSS.modal}`,
         targetProp: "backgroundColor",
@@ -718,10 +715,6 @@ describe("theme", () => {
         shadowSelector: `.${CSS.modal} .${CSS.close}`,
         targetProp: "backgroundColor",
       },
-      // "--calcite-modal-close-button-icon-color": {
-      //   shadowSelector: `.${CSS.modal} .${CSS.close} calcite-icon`,
-      //   targetProp: "--calcite-icon-color",
-      // },
       "--calcite-modal-content-background-color": {
         shadowSelector: `.${CSS.modal} .${CSS.content}`,
         targetProp: "backgroundColor",