feat(chip): add component tokens

packages/calcite-components/src/components/chip-group/chip-group.scss

@@ -1,3 +1,12 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-chip-group-items-space: Specifies spacing between items in the component.
+ *
+ */
+
 :host {
   display: flex;
 }
@@ -6,19 +15,23 @@
   display: flex;
   inline-size: 100%;
   flex-wrap: wrap;
-  gap: theme("spacing.2");
+  gap: var(--calcite-chip-group-items-space, var(--calcite-internal-chip-group-items-space, theme("spacing.2")));
 }
 
 ::slotted(calcite-chip) {
   flex: none;
 }
 
 :host([scale="s"]) .container {
-  gap: theme("spacing.1");
+  --calcite-internal-chip-group-items-space: theme("spacing.1");
+}
+
+:host([scale="m"]) .container {
+  --calcite-internal-chip-group-items-space: theme("spacing.2");
 }
 
 :host([scale="l"]) .container {
-  gap: theme("spacing.3");
+  --calcite-internal-chip-group-items-space: theme("spacing.3");
 }
 
 @include disabled();

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", () => {
@@ -238,4 +239,32 @@ 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("outline", () => {
+      themed(html`<calcite-chip appearance="outline" kind="neutral">Layers</calcite-chip>`, {
+        "--calcite-chip-border-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderColor",
+        },
+      });
+    });
+  });
 });