feat(chip): add component tokens (#10179)

**Related Issue:** #7180

## Summary

Adds tokens, e2e, and custom-theme chromatic tests. This ended up being
a larger refactor to clarify internal tokens.

### Chip Tokens

--calcite-chip-background-color: Specifies the background color of the
component.
--calcite-chip-border-color: Specifies the border color of the
component.
--calcite-chip-corner-radius: Specifies the corner radius of the
component.
--calcite-chip-text-color: Specifies the text color of the component.
--calcite-chip-icon-color: Specifies the icon color of the component.
--calcite-chip-close-icon-color: Specifies the icon color of the close
element of the component.
--calcite-chip-select-icon-color: Specifies the icon color of the
selection element of the component.
--calcite-chip-select-icon-color-pressed: Specifies the icon color of
the selection element of the component when active.

### Chip Group Tokens

--calcite-chip-group-items-space: Specifies spacing between items in the
component.

packages/calcite-components/src/assets/styles/includes.scss

@@ -152,3 +152,40 @@
     }
   }
 }
+
+@mixin close-button($size: "var(--calcite-internal-close-size, 1.5rem /* 24px */)", $padding: "0") {
+  .close {
+    @apply border-none
+      cursor-pointer
+      focus-base
+      items-center
+      m-0
+      rounded-half 
+      transition-default;
+
+    background-color: var(--calcite-close-background-color, var(--calcite-color-transparent));
+    -webkit-appearance: none;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    color: var(--calcite-close-icon-color, var(--calcite-color-text-1));
+    block-size: #{$size};
+    inline-size: #{$size};
+    padding: #{$padding};
+
+    &:hover,
+    &:focus {
+      background-color: var(--calcite-close-background-color-hover, var(--calcite-color-transparent-hover));
+    }
+    &:focus {
+      @apply focus-inset;
+    }
+    &:active {
+      background-color: var(--calcite-close-background-color-press, var(--calcite-color-transparent-press));
+    }
+
+    calcite-icon {
+      color: inherit;
+    }
+  }
+}

packages/calcite-components/src/components/chip/chip.e2e.ts

@@ -1,5 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests";
+import { accessible, disabled, focusable, hidden, renders, slots, t9n, themed } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
 describe("calcite-chip", () => {
@@ -151,21 +152,6 @@ describe("calcite-chip", () => {
     let chipCloseButtonFocusStyle;
     let chipCloseButtonHoverStyle;
 
-    it("should have defined CSS custom properties", async () => {
-      page = await newE2EPage({ html: chipSnippet });
-      const chipStyles = await page.evaluate(() => {
-        const chip = document.querySelector("calcite-chip");
-        chip.style.setProperty("--calcite-chip-transparent-hover", "rgba(3, 2, 20, 0.14)");
-        chip.style.setProperty("--calcite-chip-transparent-press", "rgba(4, 10, 4, 0.31");
-        return {
-          hoverFocus: window.getComputedStyle(chip).getPropertyValue("--calcite-chip-transparent-hover"),
-          active: window.getComputedStyle(chip).getPropertyValue("--calcite-chip-transparent-press"),
-        };
-      });
-      expect(chipStyles.hoverFocus).toEqual("rgba(3, 2, 20, 0.14)");
-      expect(chipStyles.active).toEqual("rgba(4, 10, 4, 0.31");
-    });
-
     describe("when mode attribute is not provided", () => {
       it("should render chip pseudo classes with default values tied to mode", async () => {
         page = await newE2EPage({ html: chipSnippet });
@@ -238,4 +224,69 @@ describe("calcite-chip", () => {
   describe("translation support", () => {
     t9n("calcite-chip");
   });
+
+  describe("themed", () => {
+    describe("default", () => {
+      themed(html`calcite-chip`, {
+        "--calcite-chip-background-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-chip-text-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "color",
+        },
+        "--calcite-chip-corner-radius": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderRadius",
+        },
+      });
+    });
+
+    describe("appearance='outline'", () => {
+      themed(html`<calcite-chip appearance="outline">Layers</calcite-chip>`, {
+        "--calcite-chip-border-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderColor",
+        },
+      });
+    });
+
+    describe("closable", () => {
+      themed(html`<calcite-chip closable>Layers</calcite-chip>`, {
+        "--calcite-chip-close-icon-color": {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("selectable", () => {
+      describe("default", () => {
+        themed(html`<calcite-chip selection-mode="single">Layers</calcite-chip>`, {
+          "--calcite-chip-select-icon-color": {
+            shadowSelector: `.${CSS.selectIcon}`,
+            targetProp: "color",
+          },
+        });
+      });
+      describe("selected", () => {
+        themed(html`<calcite-chip selection-mode="single" selected>Layers</calcite-chip>`, {
+          "--calcite-chip-select-icon-color-pressed": {
+            shadowSelector: `.${CSS.selectIcon}`,
+            targetProp: "color",
+          },
+        });
+      });
+    });
+
+    describe("icon", () => {
+      themed(html`<calcite-chip icon="layer">Layers</calcite-chip>`, {
+        "--calcite-chip-icon-color": {
+          shadowSelector: `.${CSS.chipIcon}`,
+          targetProp: "color",
+        },
+      });
+    });
+  });
 });