diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
index 08e11b696e2..5470d9ebfba 100644
--- a/packages/calcite-components/src/assets/styles/includes.scss
+++ b/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;
+    }
+  }
+}
diff --git a/packages/calcite-components/src/components/chip/chip.e2e.ts b/packages/calcite-components/src/components/chip/chip.e2e.ts
index b769e2c2382..5288e6183da 100644
--- a/packages/calcite-components/src/components/chip/chip.e2e.ts
+++ b/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",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index 0b6cd8689aa..1390e67fa25 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -1,319 +1,342 @@
-.container,
-.select-icon,
-.title {
-  padding-inline-start: var(--calcite-internal-chip-padding-start);
-  padding-inline-end: var(--calcite-internal-chip-padding-end);
-}
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-chip-background-color: Specifies the background color of the component.
+ * @prop --calcite-chip-border-color: Specifies the border color of the component.
+ * @prop --calcite-chip-corner-radius: Specifies the corner radius of the component.
+ * @prop --calcite-chip-text-color: Specifies the text color of the component.
+ * @prop --calcite-chip-icon-color: Specifies the icon color of the component.
+ * @prop --calcite-chip-close-icon-color: Specifies the icon color of the close element of the component.
+ * @prop --calcite-chip-select-icon-color: Specifies the icon color of the selection element of the component.
+ * @prop --calcite-chip-select-icon-color-pressed: Specifies the icon color of the selection element of the component when active.
+ *
+ */
 
-.select-icon:not(.select-icon--active) {
-  padding-inline: 0;
+:host {
+  @apply inline-flex
+    cursor-default;
+  border-radius: var(--calcite-chip-corner-radius, 9999px);
 }
 
-:host([scale="s"]) {
-  @apply text-n2 h-6;
-
-  --calcite-chip-spacing-s-internal: theme("spacing[1]");
-  --calcite-chip-spacing-l-internal: theme("spacing[2]");
+/* Host Prop Variant styles */
+:host([closed]) {
+  display: none;
+}
 
-  .close,
-  .select-icon--active {
-    @apply h-4 w-4;
+:host([appearance="outline"]),
+:host([appearance="outline-fill"]) {
+  .container {
+    color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
   }
 
-  .image-container {
-    @apply h-5 w-5;
+  &:host([kind="brand"]) .container {
+    border-color: var(--calcite-chip-border-color, var(--calcite-color-brand));
   }
 
-  .container.is-circle,
-  .container.is-circle.image--slotted {
-    @apply w-6 h-6;
-
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-px);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-px);
+  &:host([kind="inverse"]) .container {
+    border-color: var(--calcite-chip-border-color, var(--calcite-color-border-inverse));
   }
 
-  .multiple {
-    .select-icon {
-      --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-      --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
-    }
-
-    &.image--slotted {
-      .select-icon {
-        --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);
-      }
-
-      &.text--slotted {
-        --calcite-internal-chip-padding-start: var(--calcite-spacing-px);
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
-      }
-    }
+  &:host([kind="neutral"]) .container {
+    border-color: var(--calcite-chip-border-color, var(--calcite-color-border-1));
   }
 
+  .close {
+    color: var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)));
+  }
+}
+:host([appearance="outline"]) .container {
+  @apply bg-transparent;
+}
+:host([appearance="outline-fill"]) .container {
+  background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-1));
+}
+:host([appearance="solid"]) {
   .container {
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
+    border-color: transparent;
+  }
 
-    &.image--slotted {
-      --calcite-internal-chip-padding-start: var(--calcite-spacing-px);
-      --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
+  &:host([kind="brand"]),
+  &:host([kind="inverse"]) {
+    .container {
+      color: var(--calcite-chip-text-color, var(--calcite-color-text-inverse));
+    }
 
-      &.closable {
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
-      }
+    .close {
+      outline-color: var(--calcite-color-text-inverse);
     }
   }
 
-  .container:not(.is-circle):not(.multiple) {
-    &:not(.image-slotted) .select-icon.select-icon--active {
-      padding-inline-start: 0;
-      padding-inline-end: var(--calcite-spacing-xs);
+  &:host([kind="brand"]) {
+    .container {
+      background-color: var(--calcite-chip-background-color, var(--calcite-color-brand));
     }
+  }
 
-    &.image--slotted .select-icon.select-icon--active {
-      padding-inline-start: var(--calcite-spacing-base);
-      padding-inline-end: var(--calcite-spacing-sm);
+  &:host([kind="inverse"]) {
+    .container {
+      background-color: var(--calcite-chip-background-color, var(--calcite-color-inverse));
     }
   }
-}
 
-:host([scale="s"][closable]) .container {
-  --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-  --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
+  &:host([kind="neutral"]) .container {
+    background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-2));
+  }
 }
+:host([kind="neutral"]) .container {
+  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
 
-:host([scale="m"]) {
-  @apply text-n1 h-8;
-  --calcite-chip-spacing-s-internal: theme("spacing[1.5]");
-  --calcite-chip-spacing-l-internal: theme("spacing[2]");
-
-  .close,
-  .image-container,
-  .select-icon--active {
-    @apply h-6 w-6;
-
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
+  .close {
+    color: var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)));
   }
+}
 
-  .container.is-circle,
-  .container.is-circle.image--slotted {
-    @apply w-8 h-8;
-
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-px);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-px);
-  }
+:host([selected]) .select-icon {
+  opacity: 1;
+}
 
-  .multiple {
-    .select-icon {
-      --calcite-internal-chip-padding-start: var(--calcite-spacing-base);
-      --calcite-internal-chip-padding-end: var(--calcite-spacing-base);
+:host([scale="s"]) {
+  .container {
+    --calcite-internal-chip-block-size: 1.5rem /* 24px */;
+    --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;
+    --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;
+    --calcite-internal-chip-font-size: var(--calcite-font-size--2);
+    --calcite-internal-chip-icon-size: 1rem /* 16px */;
+    --calcite-internal-chip-icon-space: 0.25rem /* 4px */;
+    --calcite-internal-chip-image-size: 1.25rem /* 20px */;
+    --calcite-internal-chip-title-space: 0.25rem /* 4px */;
+    --calcite-internal-close-size: 1rem /* 16px */;
+
+    &:not(.closable) {
+      &.is-circle {
+        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
+        --calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);
+      }
     }
 
     &.image--slotted {
-      .select-icon {
-        --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);
+      &:has(.chip-icon),
+      &.text--slotted,
+      &.closable {
+        --calcite-internal-chip-image-space-x-end: 0.25rem /* 4px */;
+      }
+      &:not(.text--slotted, :has(.chip-icon)),
+      &:not(.selectable) {
+        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
+      }
+    }
+
+    &.selectable.single:not(.is-circle) {
+      &.image--slotted {
+        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
+      }
+      &.selected {
+        --calcite-internal-chip-select-space-x-end: 0.375rem /* 6px */;
+        --calcite-internal-chip-select-space-x-start: 0;
+
+        &.image--slotted {
+          --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
+          --calcite-internal-chip-select-space-x-start: 0.125rem /* 2px */;
+        }
       }
+    }
+
+    &.multiple:not(.is-circle) {
+      --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;
+      --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;
+      --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;
+
+      &.image--slotted {
+        --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
+        --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;
+        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
 
-      &.text--slotted {
-        --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);
+        &:not(.text--slotted) {
+          --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;
+        }
       }
     }
   }
+}
 
+:host([scale="m"]) {
   .container {
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);
+    --calcite-internal-chip-block-size: 2rem /* 32px */;
+    --calcite-internal-chip-container-space-x-end: 0.375rem /* 6px */;
+    --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;
+    --calcite-internal-chip-font-size: var(--calcite-font-size--1);
+    --calcite-internal-chip-icon-size: 1.5rem /* 24px */;
+    --calcite-internal-chip-icon-space: 0.375rem /* 6px */;
+    --calcite-internal-chip-image-size: 1.5rem /* 24px */;
+    --calcite-internal-chip-title-space: 0.375rem /* 6px */;
+    --calcite-internal-close-size: 1.5rem /* 24px */;
+
+    &:not(.closable) {
+      &.is-circle {
+        --calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);
+        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
+      }
+    }
 
     &.image--slotted {
-      --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-      --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);
+      &:not(.is-circle) {
+        --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;
+      }
 
+      &:has(.chip-icon),
+      &.text--slotted,
       &.closable {
-        --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
+        --calcite-internal-chip-image-space-x-end: 0.375rem /* 6px */;
       }
     }
-  }
 
-  .container:not(.is-circle):not(.multiple) {
-    &:not(.image-slotted) .select-icon.select-icon--active {
-      padding-inline-start: 0;
-      padding-inline-end: var(--calcite-spacing-px);
+    &.selectable.single:not(.is-circle) {
+      &.image--slotted {
+        --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;
+      }
+      &.selected {
+        --calcite-internal-chip-select-space-x-end: var(--calcite-spacing-px);
+        --calcite-internal-chip-select-space-x-start: 0;
+
+        &.image--slotted {
+          --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;
+          --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;
+        }
+      }
+    }
+
+    &.multiple:not(.is-circle) {
+      --calcite-internal-chip-select-space-x-end: 0.125rem /* 2px */;
+      --calcite-internal-chip-select-space-x-start: 0.125rem /* 2px */;
+
+      &.image--slotted {
+        --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
+        --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;
+      }
     }
 
-    &.image--slotted .select-icon.select-icon--active {
-      padding-inline-start: 0;
-      padding-inline-end: var(--calcite-spacing-sm);
+    &.closable:not(.is-circle) {
+      --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;
     }
   }
 }
 
-:host([scale="m"][closable]) .container {
-  --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
-  --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
-}
-
 :host([scale="l"]) {
-  @apply text-0 h-11;
-
-  --calcite-chip-spacing-s-internal: theme("spacing[2]");
-  --calcite-chip-spacing-l-internal: theme("spacing[3]");
-
-  .image-container,
-  .close,
-  .select-icon--active {
-    @apply h-8 w-8;
-
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
-  }
-
-  .container.is-circle,
-  .container.is-circle.image--slotted {
-    @apply w-11 h-11;
+  .container {
+    --calcite-internal-chip-block-size: 2.75rem /* 44px */;
+    --calcite-internal-chip-container-space-x-end: 0.5rem /* 8px */;
+    --calcite-internal-chip-container-space-x-start: 0.5rem /* 8px */;
+    --calcite-internal-chip-font-size: var(--calcite-font-size-0);
+    --calcite-internal-chip-icon-size: 2rem /* 32px */;
+    --calcite-internal-chip-icon-space: 0.5rem /* 8px */;
+    --calcite-internal-chip-image-size: 2rem /* 32px */;
+    --calcite-internal-chip-title-space: 0.5rem /* 8px */;
+    --calcite-internal-close-size: 2rem /* 32px */;
+
+    &:not(.closable) {
+      &.is-circle {
+        --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;
+        --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;
+      }
+    }
 
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
-  }
+    &.image--slotted {
+      &:not(.is-circle) {
+        --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;
+      }
 
-  .multiple {
-    .select-icon {
-      --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-      --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
+      &:has(.chip-icon),
+      &.text--slotted,
+      &.closable {
+        --calcite-internal-chip-image-space-x-end: 0.5rem /* 8px */;
+      }
     }
 
-    &.image--slotted {
-      .select-icon {
-        --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-md);
+    &.selectable.single:not(.is-circle) {
+      &.image--slotted {
+        --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;
+      }
+      &.selected {
+        --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;
+        --calcite-internal-chip-select-space-x-start: 0;
+
+        &.image--slotted {
+          --calcite-internal-chip-select-space-x-end: 0.375rem /* 6px */;
+          --calcite-internal-chip-select-space-x-start: 0.5rem /* 8px */;
+        }
       }
     }
-  }
 
-  .container {
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-sm);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);
+    &.multiple:not(.is-circle) {
+      --calcite-internal-chip-container-space-x-start: 0.5rem /* 8px */;
 
-    &.image--slotted {
-      --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
-      --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);
+      --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;
+      --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;
 
-      &.closable {
-        --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);
+      &.image--slotted {
+        --calcite-internal-chip-select-space-x-end: 0.75rem /* 12px */;
       }
     }
-  }
-
-  .container:not(.is-circle):not(.multiple) {
-    &:not(.image-slotted) .select-icon.select-icon--active {
-      padding-inline-start: 0;
-      padding-inline-end: var(--calcite-spacing-xxs);
-    }
 
-    &.image--slotted .select-icon.select-icon--active {
-      padding-inline-start: 0;
-      padding-inline-end: var(--calcite-spacing-md);
+    &.closable:not(.is-circle) {
+      --calcite-internal-chip-container-space-x-end: 0.375rem /* 6px */;
     }
   }
 }
 
-:host([scale="l"][closable]) .container {
-  --calcite-internal-chip-padding-start: var(--calcite-spacing-sm);
-  --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);
-}
-
-:host {
-  @apply inline-flex
-    cursor-default
-    rounded-full;
-}
-
+// Sub-element styles
 .container {
   @apply inline-flex
   h-full
   max-w-full
   items-center
-  rounded-full
   focus-base
   justify-center
-  border
-  border-solid
-  border-color-1
   box-border
   font-medium;
 
+  border-radius: var(--calcite-chip-corner-radius, 9999px);
+  border-width: var(--calcite-border-width-sm);
+  border-style: solid;
+  font-size: var(--calcite-internal-chip-font-size, var(--calcite-font-size));
+  padding-inline-start: var(--calcite-internal-chip-container-space-x-start);
+  padding-inline-end: var(--calcite-internal-chip-container-space-x-end);
+  block-size: var(--calcite-internal-chip-block-size, auto);
+  inline-size: var(--calcite-internal-chip-inline-size, auto);
+  min-inline-size: var(--calcite-internal-chip-block-size, auto);
+
+  &:hover .select-icon--active {
+    opacity: 1;
+  }
+
   &.selectable {
     @apply cursor-pointer;
   }
   &:not(.non-interactive):focus {
     @apply focus-outset;
   }
-}
-
-:host([scale="s"]) .container.selectable.single.image--slotted {
-  --calcite-internal-chip-padding-end: calc(theme("spacing[0.5]") / 2);
-}
-
-:host([scale="s"]) .container:not(.selected):not(.multiple).image--slotted {
-  --calcite-internal-chip-padding-start: calc(theme("spacing[0.5]") / 2);
-}
-
-.container.text--slotted .title {
-  @apply truncate;
-
-  --calcite-internal-chip-padding-start: var(--calcite-chip-spacing-s-internal);
-  --calcite-internal-chip-padding-end: var(--calcite-chip-spacing-s-internal);
-}
-
-.container:not(.text--slotted) .title {
-  display: none;
-}
-
-.container:not(.image--slotted) .image-container {
-  display: none;
-}
-
-.container:not(.is-circle) {
-  &.image--slotted .image-container {
-    margin-inline-end: var(--calcite-chip-spacing-s-internal);
-  }
 
-  &.image--slotted .image-container ~ .chip-icon {
-    margin-inline-start: var(--calcite-chip-spacing-s-internal);
+  &.text--slotted .title {
+    @apply truncate;
   }
 
-  &.selectable:not(.text--slotted) .chip-icon {
-    margin-inline-end: var(--calcite-chip-spacing-s-internal);
+  &:not(.text--slotted) .title,
+  &:not(.image--slotted) .image-container {
+    display: none;
   }
 
-  &:not(.selectable):not(.text--slotted) .chip-icon {
-    margin-inline-start: var(--calcite-chip-spacing-s-internal);
-  }
-
-  &:not(.text--slotted) .chip-icon {
-    margin-inline-end: var(--calcite-chip-spacing-s-internal);
-  }
-
-  &:not(.text-slotted).image--slotted .image-container {
-    margin-inline-end: var(--calcite-chip-spacing-s-internal);
-  }
-
-  &:not(.closable):not(.text--slotted).image--slotted.selectable .image-container {
-    margin-inline-end: 0;
-    ~ .chip-icon {
-      margin-inline-start: calc(var(--calcite-chip-spacing-s-internal) * 2);
+  &.is-circle {
+    .chip-icon,
+    .image-container {
+      padding: 0;
     }
   }
 }
 
-.chip-icon {
-  @apply relative my-0 inline-flex duration-150 ease-in-out;
-  margin-inline: var(--calcite-chip-spacing-s-internal);
+.title {
+  padding-inline: var(--calcite-internal-chip-title-space);
 }
 
 .image-container {
@@ -321,39 +344,16 @@
   align-items: center;
   justify-content: center;
   pointer-events: none;
+  block-size: var(--calcite-internal-chip-image-size, 1.5rem /* 24px */);
+  inline-size: var(--calcite-internal-chip-image-size, 1.5rem /* 24px */);
+  padding-inline-start: 0;
+  padding-inline-end: var(--calcite-internal-chip-image-space-x-end, 0);
 }
 
-.close {
-  @apply focus-base
-    transition-default
-    text-color-1
-    m-0
-    cursor-pointer
-    items-center
-    border-none
-    bg-transparent;
-  -webkit-appearance: none;
-  display: flex;
-  border-radius: 50%;
-  align-content: center;
-  justify-content: center;
-  --calcite-chip-transparent-hover: var(--calcite-color-transparent-hover);
-  --calcite-chip-transparent-press: var(--calcite-color-transparent-press);
-  --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-  --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
-  &:hover {
-    background-color: var(--calcite-chip-transparent-hover);
-  }
-  &:focus {
-    background-color: var(--calcite-chip-transparent-hover);
-    @apply focus-inset;
-  }
-  &:active {
-    background-color: var(--calcite-chip-transparent-press);
-  }
-  & calcite-icon {
-    color: inherit;
-  }
+.chip-icon {
+  @apply relative my-0 inline-flex duration-150 ease-in-out;
+  color: var(--calcite-chip-icon-color, var(--calcite-chip-text-color, var(--calcite-icon-color, currentColor)));
+  padding-inline: var(--calcite-internal-chip-icon-space, 0.375rem /* 6px */);
 }
 
 .select-icon {
@@ -362,109 +362,43 @@
   align-items: center;
   display: flex;
   inset-block-start: -1px;
-  position: relative;
+  position: absolute;
   visibility: hidden;
-  inline-size: 0;
+  inline-size: auto;
   opacity: 0;
   transition:
     opacity 0.15s ease-in-out,
     inline-size 0.15s ease-in-out;
+  color: var(--calcite-chip-select-icon-color, currentColor);
+
   &.select-icon--active {
+    position: relative;
     visibility: visible;
     opacity: 0.5;
+    color: var(--calcite-chip-select-icon-color-pressed, var(--calcite-chip-select-icon-color, currentColor));
   }
 }
 
-:host([selected]) .select-icon {
-  opacity: 1;
-}
-
-.container:hover .select-icon--active {
-  opacity: 1;
-}
-
 .multiple .select-icon {
   @apply flex justify-center items-center;
 }
 
-slot[name="image"]::slotted(*) {
-  @apply rounded-half flex h-full w-full overflow-hidden;
-}
-
-:host([kind="neutral"]) {
-  background-color: var(--calcite-color-foreground-2);
-  color: var(--calcite-color-text-1);
-  .container {
-    border-color: transparent;
-  }
-  .close {
-    color: var(--calcite-color-text-3);
-  }
-}
-
-:host([kind="inverse"]) {
-  background-color: var(--calcite-color-inverse);
-  @apply text-color-inverse;
-  .container {
-    border-color: transparent;
-  }
-  .close {
-    @apply text-color-inverse;
-  }
+.multiple .select-icon,
+.single .select-icon--active {
+  padding-inline-start: var(--calcite-internal-chip-select-space-x-start);
+  padding-inline-end: var(--calcite-internal-chip-select-space-x-end);
+  block-size: var(--calcite-internal-chip-icon-size, 1.5rem /* 24px */);
+  inline-size: var(--calcite-internal-chip-icon-size, 1.5rem /* 24px */);
 }
 
-:host([kind="brand"]) {
-  background-color: var(--calcite-color-brand);
-  color: var(--calcite-color-text-inverse);
-  .container {
-    border-color: transparent;
-  }
-  .close {
-    @apply text-color-inverse;
-  }
-}
-
-:host([appearance="outline-fill"]),
-:host([appearance="outline"]) {
-  @apply text-color-1 bg-foreground-1;
-  .close {
-    @apply text-color-3;
-  }
-}
-
-:host([appearance="outline-fill"]) {
-  @apply bg-foreground-1;
-}
-
-:host([appearance="outline"]) {
-  @apply bg-transparent;
-}
-
-:host([kind="neutral"][appearance="outline-fill"]) .container,
-:host([kind="neutral"][appearance="outline"]) .container {
-  border-color: var(--calcite-color-border-1);
-}
-
-:host([kind="inverse"][appearance="outline-fill"]) .container,
-:host([kind="inverse"][appearance="outline"]) .container {
-  border-color: var(--calcite-color-border-inverse);
-}
-
-:host([kind="brand"][appearance="outline-fill"]) .container,
-:host([kind="brand"][appearance="outline"]) .container {
-  border-color: var(--calcite-color-brand);
-}
-
-:host([kind="brand"][appearance="solid"]),
-:host([kind="inverse"][appearance="solid"]) {
-  button {
-    outline-color: var(--calcite-color-text-inverse);
-  }
+.close {
+  color: var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, currentColor));
 }
 
-:host([closed]) {
-  display: none;
+slot[name="image"]::slotted(*) {
+  @apply rounded-half flex h-full w-full overflow-hidden;
 }
 
+@include close-button();
 @include disabled();
 @include base-component();
diff --git a/packages/calcite-components/src/components/tile/tile.stories.ts b/packages/calcite-components/src/components/tile/tile.stories.ts
index a3847920380..d8561844c30 100644
--- a/packages/calcite-components/src/components/tile/tile.stories.ts
+++ b/packages/calcite-components/src/components/tile/tile.stories.ts
@@ -77,8 +77,8 @@ export const allVariants = (): string => html`
       border-top: 1px solid var(--calcite-color-border-2);
     }
     calcite-chip.new {
-      background-color: #d8efda;
-      color: #13631f;
+      --calcite-chip-background-color: #d8efda;
+      --calcite-chip-text-color: #13631f;
     }
   </style>
   <div class="parent">
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 9a43aee4033..f3e4c9d9165 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -10,12 +10,13 @@ import {
   actionPadTokens,
   actionGroupTokens,
 } from "./custom-theme/action";
-import { accordionItemTokens } from "./custom-theme/accordion-item";
 import { accordion, accordionTokens } from "./custom-theme/accordion";
+import { accordionItemTokens } from "./custom-theme/accordion-item";
 import { buttons } from "./custom-theme/button";
+import { calciteSwitch } from "./custom-theme/switch";
 import { card, cardThumbnail, cardTokens } from "./custom-theme/card";
 import { checkbox, checkboxTokens } 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 { handle, handleTokens } from "./custom-theme/handle";
@@ -29,7 +30,6 @@ import { pagination } from "./custom-theme/pagination";
 import { progress, progressTokens } from "./custom-theme/progress";
 import { segmentedControl } from "./custom-theme/segmented-control";
 import { slider } from "./custom-theme/slider";
-import { calciteSwitch } from "./custom-theme/switch";
 import { tabs } from "./custom-theme/tabs";
 
 const globalTokens = {
@@ -128,6 +128,7 @@ export default {
     ...actionPadTokens,
     ...actionGroupTokens,
     ...cardTokens,
+    ...chipTokens,
     ...checkboxTokens,
     ...handleTokens,
     ...progressTokens,
@@ -150,6 +151,7 @@ export const theming_TestOnly = (): string => {
       ...actionPadTokens,
       ...actionGroupTokens,
       ...cardTokens,
+      ...chipTokens,
       ...checkboxTokens,
       ...handleTokens,
       ...progressTokens,
diff --git a/packages/calcite-components/src/custom-theme/chips.ts b/packages/calcite-components/src/custom-theme/chips.ts
index d51857fc62e..441d045591e 100644
--- a/packages/calcite-components/src/custom-theme/chips.ts
+++ b/packages/calcite-components/src/custom-theme/chips.ts
@@ -1,12 +1,28 @@
 import { html } from "../../support/formatting";
 
+export const chipTokens = {
+  calciteChipBackgroundColor: "",
+  calciteChipBorderColor: "",
+  calciteChipCornerRadius: "",
+  calciteChipTextColor: "",
+  calciteChipIconColor: "",
+  calciteChipCloseIconColor: "",
+  calciteChipSelectIconColor: "",
+  calciteChipSelectIconColorPressed: "",
+};
+
 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>`;