feat(button): add component tokens (#10358)

**Related Issue:** #7180 Blocked issues: #11210 ## Summary ### Calcite Button --calcite-button-background-color: Specifies the component's background color when appearance="solid" or appearance="outline-fill". --calcite-button-border-color: Specifies the component's border color when it has appearance="outline" or appearance="outline-fill". --calcite-button-corner-radius: Specifies the component's corner radius. --calcite-button-text-color: Specifies the component's text color.
Esri · Jan 21, 2025 · a7dc494 · a7dc494
1 parent 45f573f
commit a7dc494
Show file tree

Hide file tree

Showing 2 changed files with 315 additions and 208 deletions.
diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts
@@ -1,7 +1,7 @@
 // @ts-strict-ignore
 import { newE2EPage, E2EElement } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { accessible, defaults, disabled, hidden, HYDRATED_ATTR, labelable, t9n } from "../../tests/commonTests";
+import { accessible, defaults, disabled, hidden, HYDRATED_ATTR, labelable, t9n, themed } from "../../tests/commonTests";
 import { GlobalTestProps } from "../../tests/utils";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
@@ -713,4 +713,59 @@ describe("calcite-button", () => {
     expect(elementHost).toEqualAttribute("width", "full");
     expect(await elementAsButton.getComputedStyle()["width"]).toEqual(await elementHost.getComputedStyle()["width"]);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-button", {
+        "--calcite-button-background-color": {
+          shadowSelector: "button",
+          targetProp: "backgroundColor",
+        },
+        "--calcite-button-corner-radius": {
+          shadowSelector: "button",
+          targetProp: "borderRadius",
+        },
+        "--calcite-button-text-color": {
+          shadowSelector: "button",
+          targetProp: "color",
+        },
+        "--calcite-button-border-color": {
+          shadowSelector: "button",
+          targetProp: "borderColor",
+        },
+      });
+    });
+    describe("loading", () => {
+      themed(html`<calcite-button loading></calcite-button>`, {
+        "--calcite-button-background-color": {
+          shadowSelector: "button",
+          targetProp: "backgroundColor",
+        },
+        "--calcite-button-corner-radius": {
+          shadowSelector: "button",
+          targetProp: "borderRadius",
+        },
+        "--calcite-button-text-color": {
+          shadowSelector: "button",
+          targetProp: "color",
+        },
+        "--calcite-button-loader-color": {
+          shadowSelector: `.${CSS.loadingIn}`,
+          targetProp: "color",
+        },
+        "--calcite-button-border-color": {
+          shadowSelector: "button",
+          targetProp: "borderColor",
+        },
+      });
+    });
+    describe("outline", () => {
+      themed(html`<calcite-button appearance="outline"></calcite-button>`, {
+        "--calcite-button-border-color": {
+          shadowSelector: "button",
+          targetProp: "borderColor",
+        },
+      });
+    });
+  });
 });