test(chip): add component tokens to stories

packages/calcite-components/src/custom-theme.stories.ts

@@ -14,7 +14,7 @@ import { accordion } from "./custom-theme/accordion";
 import { buttons } from "./custom-theme/button";
 import { card, cardTokens } from "./custom-theme/card";
 import { checkbox } from "./custom-theme/checkbox";
-import { chips } from "./custom-theme/chips";
+import { chips, chipTokens } from "./custom-theme/chips";
 import { datePicker } from "./custom-theme/date-picker";
 import { dropdown } from "./custom-theme/dropdown";
 import { icon } from "./custom-theme/icon";
@@ -118,6 +118,7 @@ export default {
     ...actionPadTokens,
     ...actionGroupTokens,
     ...cardTokens,
+    ...chipTokens,
   },
 };
 
@@ -134,6 +135,7 @@ export const theming_TestOnly = (): string => {
       ...actionPadTokens,
       ...actionGroupTokens,
       ...cardTokens,
+      ...chipTokens,
     },
     true,
   );

packages/calcite-components/src/custom-theme/chips.ts

@@ -1,12 +1,24 @@
 import { html } from "../../support/formatting";
 
+export const chipTokens = {
+  calciteChipBackgroundColor: "",
+  calciteChipBorderColor: "",
+  calciteChipCornerRadius: "",
+  calciteChipTextColor: "",
+};
+
 export const chips = html`<div>
     <calcite-chip>Neutral</calcite-chip>
     <calcite-chip kind="inverse">Inverse</calcite-chip>
     <calcite-chip kind="brand">Brand</calcite-chip>
   </div>
   <div>
-    <calcite-chip appearance="transparent">Neutral</calcite-chip>
-    <calcite-chip appearance="transparent" kind="inverse">Inverse</calcite-chip>
+    <calcite-chip appearance="outline-fill">Neutral</calcite-chip>
+    <calcite-chip appearance="outline-fill" kind="inverse">Inverse</calcite-chip>
     <calcite-chip appearance="outline-fill" kind="brand">Brand</calcite-chip>
+  </div>
+  <div>
+    <calcite-chip appearance="outline">Neutral</calcite-chip>
+    <calcite-chip appearance="outline" kind="inverse">Inverse</calcite-chip>
+    <calcite-chip appearance="outline" kind="brand">Brand</calcite-chip>
   </div>`;