diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
index 1f34b2dff8a..383de896e84 100644
--- a/packages/calcite-components/src/assets/styles/includes.scss
+++ b/packages/calcite-components/src/assets/styles/includes.scss
@@ -106,50 +106,53 @@
   }
 }
 
-@mixin x-button() {
-  :host([scale="s"]) {
-    .x-button {
-      inline-size: theme("spacing.4");
-      block-size: theme("spacing.4");
-    }
-  }
-
-  :host([scale="m"]) {
-    .x-button {
-      inline-size: theme("spacing.6");
-      block-size: theme("spacing.6");
-    }
-  }
-
-  :host([scale="l"]) {
-    .x-button {
-      inline-size: theme("spacing.8");
-      block-size: theme("spacing.8");
-    }
-  }
-
+@mixin x-button(
+  $size: "var(--calcite-internal-close-size, 1.5rem)",
+  $padding: "0",
+  $color: "var(--calcite-close-icon-color, var(--calcite-color-text-1))",
+  $background-color: "var(--calcite-close-background-color, var(--calcite-color-transparent))",
+  $background-color-hover: "var(--calcite-close-background-color-hover, var(--calcite-color-transparent-hover))",
+  $background-color-press: "var(--calcite-close-background-color-press, var(--calcite-color-transparent-press))"
+) {
   .x-button {
-    @apply appearance-none bg-transparent border-2 content-center cursor-pointer flex focus-base items-center justify-center m-0 self-center text-color-3 transition-default;
-
-    border-radius: 50%;
-    border-color: transparent;
-    background-color: var(--calcite-color-foreground-2);
+    @apply transition-default;
+    border-style: none;
+    cursor: pointer;
+    outline-color: transparent;
+    align-items: center;
+    margin: 0;
+    background-color: #{$background-color};
+    -webkit-appearance: none;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    color: #{$color};
+    block-size: #{$size};
+    inline-size: #{$size};
+    min-block-size: #{$size};
+    min-inline-size: #{$size};
+    padding: #{$padding};
 
-    &:active,
-    &:hover {
-      @apply text-color-1;
-      background-color: var(--calcite-color-foreground-3);
+    &:hover,
+    &:focus {
+      background-color: #{$background-color-hover};
+    }
+    &:focus {
+      @apply focus-inset;
     }
 
     &:active {
-      @apply border-solid;
-      border-color: theme("borderColor.color-brand");
+      background-color: #{$background-color-press};
     }
 
-    & calcite-icon {
+    calcite-icon {
       color: inherit;
     }
   }
+
+  .x-button--round {
+    border-radius: 9999px;
+  }
 }
 
 @mixin close-button(
diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts
index e22d5988e87..12bef5d60a4 100644
--- a/packages/calcite-components/src/components/button/button.e2e.ts
+++ b/packages/calcite-components/src/components/button/button.e2e.ts
@@ -509,14 +509,11 @@ describe("calcite-button", () => {
         Layers
       </calcite-button>
     `;
-    let page;
-    let buttonEl;
-    let buttonHoverStyle;
 
     it("should have defined CSS custom properties", async () => {
-      page = await newE2EPage({ html: buttonSnippet });
+      const page = await newE2EPage({ html: buttonSnippet });
       const buttonStyles = await page.evaluate(() => {
-        buttonEl = document.querySelector("calcite-button");
+        const buttonEl = document.querySelector("calcite-button");
         buttonEl.style.setProperty("--calcite-color-transparent-hover", "rgba(34, 23, 200, 0.4)");
         buttonEl.style.setProperty("--calcite-color-transparent-press", "rgba(1, 20, 44, 0.1");
         return {
@@ -530,31 +527,31 @@ describe("calcite-button", () => {
 
     describe("when mode attribute is not provided", () => {
       it("should render button pseudo classes with default values tied to light mode", async () => {
-        page = await newE2EPage({ html: buttonSnippet });
-        buttonEl = await page.find("calcite-button >>> button");
+        const page = await newE2EPage({ html: buttonSnippet });
+        const buttonEl = await page.find("calcite-button >>> button");
         await buttonEl.hover();
         await page.waitForChanges();
-        buttonHoverStyle = await buttonEl.getComputedStyle();
+        const buttonHoverStyle = await buttonEl.getComputedStyle();
         expect(buttonHoverStyle.getPropertyValue("background-color")).toEqual("rgba(0, 0, 0, 0.04)");
       });
     });
 
     describe("when mode attribute is dark", () => {
       it("should render button pseudo classes with value tied to dark mode", async () => {
-        page = await newE2EPage({
+        const page = await newE2EPage({
           html: `<div class="calcite-mode-dark">${buttonSnippet}</div>`,
         });
-        buttonEl = await page.find("calcite-button >>> button");
+        const buttonEl = await page.find("calcite-button >>> button");
         await buttonEl.hover();
         await page.waitForChanges();
-        buttonHoverStyle = await buttonEl.getComputedStyle();
+        const buttonHoverStyle = await buttonEl.getComputedStyle();
         expect(buttonHoverStyle.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.04)");
       });
     });
 
     it("should allow the CSS custom property to be overridden", async () => {
       const overrideStyle = "rgba(255, 255, 0, 0.9)";
-      page = await newE2EPage({
+      const page = await newE2EPage({
         html: `
         <style>
           :root {
@@ -563,10 +560,10 @@ describe("calcite-button", () => {
         </style>
         <div>${buttonSnippet}</div>`,
       });
-      buttonEl = await page.find("calcite-button >>> button");
+      const buttonEl = await page.find("calcite-button >>> button");
       await buttonEl.hover();
       await page.waitForChanges();
-      buttonHoverStyle = await buttonEl.getComputedStyle();
+      const buttonHoverStyle = await buttonEl.getComputedStyle();
       expect(buttonHoverStyle.getPropertyValue("background-color")).toEqual(overrideStyle);
     });
   });
diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
index c101ad48115..de0a7697e3c 100644
--- a/packages/calcite-components/src/components/button/button.scss
+++ b/packages/calcite-components/src/components/button/button.scss
@@ -3,9 +3,10 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-button-background-color: Specifies the component's background color when appearance="solid" or appearance="outline-fill".
- * @prop --calcite-button-border-color: Specifies the component's border color when it has appearance="outline" or appearance="outline-fill".
+ * @prop --calcite-button-background-color: Specifies the component's background color.
+ * @prop --calcite-button-border-color: Specifies the component's border color.
  * @prop --calcite-button-corner-radius: Specifies the component's corner radius.
+ * @prop --calcite-button-icon-color: Specifies the component's `iconStart` and/or `iconEnd` color.
  * @prop --calcite-button-loader-color: Specifies the component's loader color.
  * @prop --calcite-button-shadow-color: Specifies the component's box-shadow color.
  * @prop --calcite-button-text-color: Specifies the component's text color.
@@ -20,7 +21,7 @@
   button {
     --calcite-internal-button-content-margin: theme("margin.2");
     --calcite-internal-button-padding-x: 7px;
-    --calcite-internal-button-padding-y-internal: 3px;
+    --calcite-internal-button-padding-y: 3px;
 
     @apply appearance-none
     border-none
@@ -43,13 +44,41 @@
       --calcite-button-background-color,
       var(--calcite-internal-button-background-color, var(--calcite-color-transparent))
     );
-    border-color: var(
+    border-block-start-color: var(
       --calcite-button-border-color,
-      var(--calcite-internal-button-border-color, var(--calcite-color-transparent))
+      var(
+        --calcite-internal-button-border-block-start-color,
+        var(--calcite-internal-button-border-color, var(--calcite-color-transparent))
+      )
     );
+    border-block-end-color: var(
+      --calcite-button-border-color,
+      var(
+        --calcite-internal-button-border-block-end-color,
+        var(--calcite-internal-button-border-color, var(--calcite-color-transparent))
+      )
+    );
+    border-inline-start-color: var(
+      --calcite-button-border-color,
+      var(
+        --calcite-internal-button-border-inline-start-color,
+        var(--calcite-internal-button-border-color, var(--calcite-color-transparent))
+      )
+    );
+    border-inline-end-color: var(
+      --calcite-button-border-color,
+      var(
+        --calcite-internal-button-border-inline-end-color,
+        var(--calcite-internal-button-border-color, var(--calcite-color-transparent))
+      )
+    );
+    border-style: solid;
+    border-width: var(--calcite-border-width-sm);
+    box-shadow: inset 0 0 0 0
+      var(--calcite-button-shadow-color, var(--calcite-internal-button-shadow-color, var(--calcite-color-transparent)));
     border-radius: var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, 0));
     color: var(--calcite-button-text-color, var(--calcite-internal-button-text-color, currentColor));
-    padding-block: var(--calcite-internal-button-padding-y-internal);
+    padding-block: var(--calcite-internal-button-padding-y);
     padding-inline: var(--calcite-internal-button-padding-x);
 
     // include transition from focus
@@ -72,7 +101,13 @@
     }
 
     calcite-loader {
-      color: var(--calcite-button-loader-color, var(--calcite-internal-button-loader-color, currentColor));
+      color: var(
+        --calcite-button-loader-color,
+        var(
+          --calcite-internal-button-loader-color,
+          var(--calcite-button-text-color, var(--calcite-internal-button-text-color))
+        )
+      );
     }
   }
 }
@@ -177,14 +212,6 @@
   }
 }
 
-.icon {
-  @apply relative
-    m-0
-    inline-flex
-    font-normal;
-  line-height: inherit;
-}
-
 @include disabled();
 
 @keyframes loader-in {
@@ -254,6 +281,7 @@
   a {
     --calcite-internal-button-text-color: var(--calcite-color-text-inverse);
     --calcite-internal-button-background-color: var(--calcite-color-brand);
+    --calcite-internal-button-loader-color: var(--calcite-color-text-inverse);
 
     &:hover {
       --calcite-internal-button-background-color: var(--calcite-color-brand-hover);
@@ -268,6 +296,7 @@
   a {
     --calcite-internal-button-text-color: var(--calcite-color-text-inverse);
     --calcite-internal-button-background-color: var(--calcite-color-status-danger);
+    --calcite-internal-button-loader-color: var(--calcite-color-text-inverse);
 
     &:hover {
       --calcite-internal-button-background-color: var(--calcite-color-status-danger-hover);
@@ -282,6 +311,7 @@
   a {
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
     --calcite-internal-button-background-color: var(--calcite-color-foreground-3);
+    --calcite-internal-button-loader-color: var(--calcite-color-text-1);
     &:hover {
       --calcite-internal-button-background-color: var(--calcite-color-foreground-2);
     }
@@ -295,6 +325,7 @@
   a {
     --calcite-internal-button-text-color: var(--calcite-color-text-inverse);
     --calcite-internal-button-background-color: var(--calcite-color-inverse);
+    --calcite-internal-button-loader-color: var(--calcite-color-text-inverse);
     &:hover {
       --calcite-internal-button-background-color: var(--calcite-color-inverse-hover);
     }
@@ -323,6 +354,7 @@
   a {
     --calcite-internal-button-border-color: var(--calcite-color-brand);
     --calcite-internal-button-text-color: theme("colors.brand");
+    --calcite-internal-button-loader-color: var(--calcite-color-brand);
 
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-brand-hover);
@@ -349,6 +381,7 @@
   a {
     --calcite-internal-button-border-color: var(--calcite-color-status-danger);
     --calcite-internal-button-text-color: theme("colors.danger");
+    --calcite-internal-button-loader-color: var(--calcite-color-status-danger);
 
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);
@@ -375,6 +408,7 @@
   a {
     --calcite-internal-button-border-color: theme("borderColor.color.1");
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
+    --calcite-internal-button-loader-color: var(--calcite-color-text-1);
 
     &:hover {
       --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
@@ -405,6 +439,7 @@
   a {
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
     --calcite-internal-button-border-color: var(--calcite-color-inverse);
+    --calcite-internal-button-loader-color: var(--calcite-color-text-1);
 
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-inverse-hover);
@@ -441,6 +476,7 @@
   a {
     --calcite-internal-button-border-color: var(--calcite-color-brand);
     --calcite-internal-button-text-color: theme("colors.brand");
+    --calcite-internal-button-loader-color: var(--calcite-color-brand);
 
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-brand-hover);
@@ -467,6 +503,7 @@
   a {
     --calcite-internal-button-border-color: var(--calcite-color-status-danger);
     --calcite-internal-button-text-color: theme("colors.danger");
+    --calcite-internal-button-loader-color: var(--calcite-color-status-danger);
 
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);
@@ -493,6 +530,7 @@
   a {
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
     --calcite-internal-button-border-color: theme("borderColor.color.1");
+    --calcite-internal-button-loader-color: var(--calcite-color-text-1);
 
     &:hover {
       --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
@@ -512,6 +550,7 @@
   a {
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
     --calcite-internal-button-border-color: var(--calcite-color-inverse);
+    --calcite-internal-button-loader-color: var(--calcite-color-text-1);
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-inverse-hover);
       --calcite-internal-button-shadow-color: var(--calcite-color-inverse-hover);
@@ -540,6 +579,20 @@
 }
 
 // transparent
+:host([appearance="transparent"]) {
+  button,
+  a {
+    --calcite-internal-button-background-color: var(--calcite-color-transparent);
+
+    &:hover,
+    &:focus {
+      --calcite-internal-button-background-color: var(--calcite-color-transparent-hover);
+    }
+    &:active {
+      --calcite-internal-button-background-color: var(--calcite-color-transparent-press);
+    }
+  }
+}
 :host([appearance="transparent"]:not(.enable-editing-button)) {
   button,
   a {
@@ -556,6 +609,7 @@
   button,
   a {
     --calcite-internal-button-text-color: theme("colors.brand");
+    --calcite-internal-button-loader-color: var(--calcite-color-brand);
     &:hover {
       --calcite-internal-button-text-color: theme("colors.brand-hover");
     }
@@ -575,6 +629,7 @@
   button,
   a {
     --calcite-internal-button-text-color: theme("colors.danger");
+    --calcite-internal-button-loader-color: var(--calcite-color-status-danger);
     &:hover {
       --calcite-internal-button-text-color: theme("colors.danger-hover");
     }
@@ -601,29 +656,14 @@
 :host([appearance="transparent"][kind="neutral"].cancel-editing-button) {
   button {
     --calcite-internal-button-text-color: var(--calcite-color-text-3);
-    @apply text-color-3
-      border-t-color-input
-      border-b-color-input
-      border-t
-      border-b;
-    border-block-style: solid;
-
-    &:not(.content--slotted) {
-      --calcite-internal-button-padding-y-internal: 0;
-    }
 
     &:hover {
       --calcite-internal-button-text-color: var(--calcite-color-text-1);
+      --calcite-internal-button-padding-y: 0;
     }
   }
 }
 
-:host([appearance="transparent"][kind="neutral"].enable-editing-button) {
-  button {
-    @apply bg-transparent;
-  }
-}
-
 :host(.confirm-changes-button),
 :host(.cancel-editing-button),
 :host(.enable-editing-button) {
@@ -656,7 +696,7 @@
 
 :host([scale="s"]) button,
 :host([scale="s"]) a {
-  --calcite-internal-button-padding-y-internal: 3px;
+  --calcite-internal-button-padding-y: 3px;
 }
 
 :host([scale="m"]) button.content--slotted,
@@ -667,7 +707,7 @@
 
 :host([scale="m"]) button,
 :host([scale="m"]) a {
-  --calcite-internal-button-padding-y-internal: 7px;
+  --calcite-internal-button-padding-y: 7px;
 }
 // accommodate for transparent buttons not having borders
 :host([scale="m"][appearance="transparent"]) button.content--slotted,
@@ -684,11 +724,11 @@
 :host([scale="l"]) {
   .button-padding {
     --calcite-internal-button-padding-x: theme("padding.4");
-    --calcite-internal-button-padding-y-internal: 11px;
+    --calcite-internal-button-padding-y: 11px;
   }
   //shrink the padding if an icon is present to preserve the height
   .button-padding--shrunk {
-    --calcite-internal-button-padding-y-internal: 9px;
+    --calcite-internal-button-padding-y: 9px;
   }
 }
 
@@ -696,7 +736,7 @@
 :host([scale="s"]) button:not(.content--slotted),
 :host([scale="s"]) a:not(.content--slotted) {
   --calcite-internal-button-padding-x: theme("padding[0.5]");
-  --calcite-internal-button-padding-y-internal: 3px;
+  --calcite-internal-button-padding-y: 3px;
   @apply text-0h w-6;
   min-block-size: theme("height.6");
 }
@@ -704,14 +744,14 @@
 :host([scale="m"]) button:not(.content--slotted),
 :host([scale="m"]) a:not(.content--slotted) {
   --calcite-internal-button-padding-x: theme("padding[0.5]");
-  --calcite-internal-button-padding-y-internal: 7px;
+  --calcite-internal-button-padding-y: 7px;
   @apply text-0h w-8;
   min-block-size: theme("height.8");
 }
 :host([scale="l"]) button:not(.content--slotted),
 :host([scale="l"]) a:not(.content--slotted) {
   --calcite-internal-button-padding-x: theme("padding[0.5]");
-  --calcite-internal-button-padding-y-internal: 9px;
+  --calcite-internal-button-padding-y: 9px;
   @apply text-0h w-11;
   min-block-size: theme("height.11");
 }
@@ -728,7 +768,7 @@
 // accommodate for transparent buttons not having borders
 :host([scale="l"][appearance="transparent"]) button:not(.content--slotted),
 :host([scale="l"][appearance="transparent"]) a:not(.content--slotted) {
-  --calcite-internal-button-padding-y-internal: theme("padding[2.5]");
+  --calcite-internal-button-padding-y: theme("padding[2.5]");
 }
 
 // generate fab scales (scenario: 2 icons, ie., should not be square)
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
index 9999490f114..f23c14aa9d5 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
+++ b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
@@ -134,7 +134,7 @@ describe("calcite-color-picker", () => {
 
     const buttons = await findAll(page, `calcite-color-picker >>> .${CSS.container} calcite-button`);
 
-    expect(buttons).toHaveLength(2);
+    expect(buttons).toHaveLength(4);
 
     for (const button of buttons) {
       expect(await button.getProperty("type")).toBe("button");
diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
index c47509a8c12..bda08cc4725 100644
--- a/packages/calcite-components/src/components/combobox/combobox.scss
+++ b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -16,15 +16,13 @@
   @apply relative block;
 }
 
-@include disabled();
-@include x-button();
-
 :host([scale="s"]) {
   @apply text-n2;
   --calcite-combobox-item-spacing-unit-l: theme("spacing.2");
   --calcite-combobox-item-spacing-unit-s: theme("spacing.1");
   --calcite-combobox-input-height: theme("spacing.4");
   --calcite-internal-combobox-input-margin-block: calc(theme("spacing.1") - theme("borderWidth.DEFAULT"));
+  --calcite-internal-close-size: 1rem;
 
   .x-button {
     margin-inline: theme("spacing.2");
@@ -37,6 +35,7 @@
   --calcite-combobox-item-spacing-unit-s: theme("spacing.2");
   --calcite-combobox-input-height: theme("spacing.4");
   --calcite-internal-combobox-input-margin-block: calc(theme("spacing.2") - theme("borderWidth.DEFAULT"));
+  --calcite-internal-close-size: 1.5rem;
 
   .x-button {
     margin-inline-end: theme("spacing.3");
@@ -49,12 +48,17 @@
   --calcite-combobox-item-spacing-unit-s: theme("spacing.3");
   --calcite-combobox-input-height: theme("spacing.6");
   --calcite-internal-combobox-input-margin-block: calc(theme("spacing[2.5]") - theme("borderWidth.DEFAULT"));
+  --calcite-internal-close-size: 2rem;
 
   .x-button {
     margin-inline-end: theme("spacing.4");
   }
 }
 
+.x-button {
+  align-self: center;
+}
+
 .wrapper {
   @apply focus-base flex border border-solid;
   padding-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 4);
@@ -232,6 +236,12 @@ calcite-chip {
   @apply block;
 }
 
+@include disabled();
+@include x-button(
+  $background-color: "var(--calcite-close-background-color, var(--calcite-color-foreground-2))",
+  $background-color-hover: "var(--calcite-close-background-color-hover, var(--calcite-color-foreground-3))",
+  $color: "var(--calcite-close-icon-color, var(--calcite-color-text-3))"
+);
 @include form-validation-message();
 @include hidden-form-input();
 @include base-component();
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index c51d8481561..1d5a7d085e9 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -100,6 +100,8 @@ export class Combobox
 
   // #region Private Properties
 
+  private closeButtonEl = createRef<HTMLButtonElement>();
+
   private allSelectedIndicatorChipEl: Chip["el"];
 
   private chipContainerEl: HTMLDivElement;
@@ -1778,6 +1780,7 @@ export class Combobox
               disabled={this.disabled}
               key="close-button"
               label={this.messages.clear}
+              ref={this.closeButtonEl}
               scale={this.scale}
             />
           ) : null}
diff --git a/packages/calcite-components/src/components/functional/XButton.tsx b/packages/calcite-components/src/components/functional/XButton.tsx
index db5a38f4e1c..72a7d99d188 100644
--- a/packages/calcite-components/src/components/functional/XButton.tsx
+++ b/packages/calcite-components/src/components/functional/XButton.tsx
@@ -3,24 +3,45 @@ import { h, LuminaJsx } from "@arcgis/lumina";
 import { Scale } from "../interfaces";
 import { getIconScale } from "../../utils/component";
 
-export interface XButtonProps extends LuminaJsx.CustomAttributes {
+export interface XButtonProps extends LuminaJsx.CustomAttributes<HTMLButtonElement> {
   disabled: boolean;
+  focusable?: boolean;
   label: string;
+  round?: boolean;
   scale: Scale;
+  title?: string;
   onClick?: LuminaJsx.DOMAttributes<HTMLElement>["onClick"];
 }
 
 export const CSS = {
   button: "x-button",
+  buttonRound: "x-button--round",
 };
 
-export const XButton = ({ disabled, key, label, scale }: XButtonProps): TemplateResult => (
+export const XButton = ({
+  disabled,
+  focusable,
+  key,
+  label,
+  onClick,
+  ref,
+  round = true,
+  scale,
+  title,
+}: XButtonProps): TemplateResult => (
   <button
     ariaLabel={label}
-    class={CSS.button}
+    class={{
+      [((scale) => `x-button--${scale}`)(scale)]: true,
+      [CSS.button]: true,
+      [CSS.buttonRound]: round,
+    }}
     disabled={disabled}
     key={key}
-    tabIndex={-1}
+    onClick={onClick}
+    ref={ref}
+    tabIndex={focusable ? 0 : -1}
+    title={title}
     type="button"
   >
     <calcite-icon icon="x" scale={getIconScale(scale)} />
diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.scss b/packages/calcite-components/src/components/inline-editable/inline-editable.scss
index 7b073771fbd..eec796c243b 100755
--- a/packages/calcite-components/src/components/inline-editable/inline-editable.scss
+++ b/packages/calcite-components/src/components/inline-editable/inline-editable.scss
@@ -59,6 +59,20 @@
   @apply flex;
 }
 
+.cancel-editing-button[appearance="transparent"][kind="neutral"] {
+  --calcite-internal-button-text-color: var(--calcite-color-text-3);
+  --calcite-internal-button-border-block-start-color: var(--calcite-color-border-input);
+  --calcite-internal-button-border-block-end-color: var(--calcite-color-border-input);
+
+  &:hover {
+    --calcite-internal-button-text-color: var(--calcite-color-text-1);
+  }
+}
+
+.enable-editing-button[appearance="transparent"][kind="neutral"] {
+  --calcite-internal-button-background-color: transparent;
+}
+
 calcite-button {
   --calcite-button-background-color: var(--calcite-inline-editable-button-background-color);
   --calcite-button-corner-radius: var(--calcite-inline-editable-button-corner-radius);
diff --git a/packages/calcite-components/src/components/tab-nav/resources.ts b/packages/calcite-components/src/components/tab-nav/resources.ts
index 010d3306dfa..ed182279f08 100644
--- a/packages/calcite-components/src/components/tab-nav/resources.ts
+++ b/packages/calcite-components/src/components/tab-nav/resources.ts
@@ -4,9 +4,9 @@ export const ICON = {
 } as const;
 
 export const CSS = {
-  container: "tab-nav",
-  containerHasEndTabTitleOverflow: "tab-nav--end-overflow",
-  containerHasStartTabTitleOverflow: "tab-nav--start-overflow",
+  container: "container",
+  containerHasEndTabTitleOverflow: "container--end-overflow",
+  containerHasStartTabTitleOverflow: "container--start-overflow",
   scrollButton: "scroll-button",
   scrollButtonContainer: "scroll-button-container",
   scrollBackwardContainerButton: "scroll-button-container--backward",
diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts
index d897313fdcc..c4260b6db6b 100644
--- a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts
+++ b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts
@@ -1,7 +1,7 @@
 // @ts-strict-ignore
 import { newE2EPage, E2EPage, E2EElement, EventSpy } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it, beforeEach } from "vitest";
-import { accessible, defaults, hidden, renders, t9n } from "../../tests/commonTests";
+import { accessible, defaults, hidden, renders, t9n, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { getElementRect } from "../../tests/utils";
 import { CSS } from "./resources";
@@ -272,4 +272,27 @@ describe("calcite-tab-nav", () => {
       await assertScrollButtonVisibility(true, false);
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(html`<calcite-tab-nav></calcite-tab-nav>`, {
+        "--calcite-tab-border-color": {
+          shadowSelector: `.${CSS.scrollBackwardContainerButton}::before`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-tab-text-color": {
+          shadowSelector: `.${CSS.scrollButton}`,
+          targetProp: "--calcite-button-text-color",
+        },
+      });
+    });
+
+    describe("bordered", () => {
+      themed(html`<calcite-tabs bordered></calcite-tabs>`, {
+        "--calcite-tab-background-color": {
+          targetProp: "backgroundColor",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.scss b/packages/calcite-components/src/components/tab-nav/tab-nav.scss
index a4e0748fb2c..738bb0820e3 100644
--- a/packages/calcite-components/src/components/tab-nav/tab-nav.scss
+++ b/packages/calcite-components/src/components/tab-nav/tab-nav.scss
@@ -1,3 +1,13 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-tab-background-color: When `calcite-tabs` is `bordered`, specifies the component's background color.
+ * @prop --calcite-tab-border-color: When `calcite-tabs` is `bordered`, specifies the component's border color.
+ * @prop --calcite-tab-text-color: Specifies the component's `iconStart, `iconEnd`, and text color.
+ */
+
 :host {
   --calcite-internal-tab-nav-gradient-start-side: left;
   --calcite-internal-tab-nav-gradient-end-side: right;
@@ -5,18 +15,30 @@
   @apply relative flex;
 }
 
+:host([bordered]) {
+  &:not([selected]) {
+    .container {
+      background-color: var(--calcite-tab-background-color, var(--calcite-color-foreground-1));
+    }
+  }
+
+  calcite-button {
+    --calcite-button-border-color: var(--calcite-tab-border-color, var(--calcite-color-border-1));
+  }
+}
+
 .scale-s {
-  --calcite-internal-tab-nav-scroller-button-width: #{$calcite-size-24};
+  --calcite-internal-tab-nav-button-width: #{$calcite-size-24};
   min-block-size: theme("spacing.6");
 }
 
 .scale-m {
-  --calcite-internal-tab-nav-scroller-button-width: #{$calcite-size-32};
+  --calcite-internal-tab-nav-button-width: #{$calcite-size-32};
   min-block-size: theme("spacing.8");
 }
 
 .scale-l {
-  --calcite-internal-tab-nav-scroller-button-width: #{$calcite-size-44};
+  --calcite-internal-tab-nav-button-width: #{$calcite-size-44};
   min-block-size: theme("spacing.11");
 }
 
@@ -27,52 +49,53 @@
 
 $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure the mask color stops overlap when both start and end are overflowing
 
-.tab-nav--start-overflow {
+.container--start-overflow {
   .tab-titles-slot-wrapper {
     mask-image: linear-gradient(
       to var(--calcite-internal-tab-nav-gradient-end-side),
       transparent,
-      transparent var(--calcite-internal-tab-nav-scroller-button-width),
-      white var(--calcite-internal-tab-nav-scroller-button-width),
+      transparent var(--calcite-internal-tab-nav-button-width),
+      white var(--calcite-internal-tab-nav-button-width),
       white $last-mask-color-stop-position
     );
   }
 }
 
-.tab-nav--end-overflow {
+.container--end-overflow {
   .tab-titles-slot-wrapper {
     mask-image: linear-gradient(
       to var(--calcite-internal-tab-nav-gradient-start-side),
       transparent,
-      transparent var(--calcite-internal-tab-nav-scroller-button-width),
-      white var(--calcite-internal-tab-nav-scroller-button-width),
+      transparent var(--calcite-internal-tab-nav-button-width),
+      white var(--calcite-internal-tab-nav-button-width),
       white $last-mask-color-stop-position
     );
   }
 }
 
-.tab-nav--start-overflow.tab-nav--end-overflow {
+.container--start-overflow.container--end-overflow {
   .tab-titles-slot-wrapper {
-    mask-image: linear-gradient(
+    mask-image:
+      linear-gradient(
         to var(--calcite-internal-tab-nav-gradient-end-side),
         transparent,
-        transparent var(--calcite-internal-tab-nav-scroller-button-width),
-        white var(--calcite-internal-tab-nav-scroller-button-width),
+        transparent var(--calcite-internal-tab-nav-button-width),
+        white var(--calcite-internal-tab-nav-button-width),
         white $last-mask-color-stop-position,
         transparent $last-mask-color-stop-position
       ),
       linear-gradient(
         to var(--calcite-internal-tab-nav-gradient-start-side),
         transparent,
-        transparent var(--calcite-internal-tab-nav-scroller-button-width),
-        white var(--calcite-internal-tab-nav-scroller-button-width),
+        transparent var(--calcite-internal-tab-nav-button-width),
+        white var(--calcite-internal-tab-nav-button-width),
         white $last-mask-color-stop-position,
         transparent $last-mask-color-stop-position
       );
   }
 }
 
-.tab-nav::-webkit-scrollbar {
+.container::-webkit-scrollbar {
   display: none;
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -114,7 +137,7 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
   }
 }
 
-.tab-nav,
+.container,
 .tab-titles-slot-wrapper {
   @apply flex
     w-full
@@ -127,15 +150,18 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
   @apply absolute bottom-0 top-0;
 
   calcite-button {
+    --calcite-button-text-color: var(--calcite-tab-text-color, var(--calcite-color-text-3));
+    --calcite-button-background-color: var(--calcite-color-transparent);
     --calcite-offset-invert-focus: 1;
-    --calcite-color-text-1: var(--calcite-color-text-3);
 
-    block-size: 100%;
+    block-size: var(--calcite-container-size-content-fluid);
+
+    &:hover &:focus {
+      --calcite-button-background-color: var(--calcite-color-transparent-hover);
+    }
 
-    &:hover {
-      --calcite-color-text-1: unset;
-      --calcite-color-foreground-1: var(--calcite-color-transparent-hover);
-      --calcite-color-foreground-3: var(--calcite-color-transparent);
+    &:active {
+      --calcite-button-background-color: var(--calcite-color-transparent-press);
     }
   }
 }
@@ -154,7 +180,8 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
   .scroll-button-container--backward,
   .scroll-button-container--forward {
     &::before {
-      background-color: var(--calcite-color-border-3);
+      background-color: var(--calcite-tab-border-color, var(--calcite-color-border-1));
+      opacity: $calcite-opacity-50;
       content: "";
       inline-size: var(--calcite-border-width-sm);
       inset-block-start: var(--calcite-border-width-md);
diff --git a/packages/calcite-components/src/components/tab-title/resources.ts b/packages/calcite-components/src/components/tab-title/resources.ts
index a2891547cb3..121e1b18c41 100644
--- a/packages/calcite-components/src/components/tab-title/resources.ts
+++ b/packages/calcite-components/src/components/tab-title/resources.ts
@@ -1,7 +1,6 @@
 import { Scale } from "../interfaces";
 
 export const CSS = {
-  closeButton: "close-button",
   container: "container",
   containerBottom: "container--bottom",
   content: "content",
@@ -13,7 +12,3 @@ export const CSS = {
   scale: (scale: Scale) => `scale-${scale}` as const,
   selectedIndicator: "selected-indicator",
 };
-
-export const ICONS = {
-  close: "x",
-} as const;
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts
index 7b75b3bfd90..5117e50944d 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts
+++ b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts
@@ -2,6 +2,7 @@ import { newE2EPage, E2EPage, E2EElement } from "@arcgis/lumina-compiler/puppete
 import { describe, expect, it, beforeEach } from "vitest";
 import { disabled, HYDRATED_ATTR, renders, hidden, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
+import { CSS as XButtonCSS } from "../functional/XButton";
 import { CSS } from "./resources";
 
 describe("calcite-tab-title", () => {
@@ -39,7 +40,7 @@ describe("calcite-tab-title", () => {
   `;
   const iconStartSelector = `calcite-tab-title >>> .${CSS.titleIcon}.${CSS.iconStart}`;
   const iconEndSelector = `calcite-tab-title >>> .${CSS.titleIcon}.${CSS.iconEnd}`;
-  const closeSelector = `calcite-tab-title >>> .${CSS.closeButton}`;
+  const closeSelector = `calcite-tab-title >>> .${XButtonCSS.button}`;
 
   describe("renders", () => {
     renders("calcite-tab-title", { display: "block" });
@@ -123,7 +124,7 @@ describe("calcite-tab-title", () => {
       `);
 
       let containerElOne = await page.find(`calcite-tab-title[id='one']`);
-      const closeOne = await page.find(`calcite-tab-title[id='one'] >>> .${CSS.closeButton}`);
+      const closeOne = await page.find(`calcite-tab-title[id='one'] >>> .${XButtonCSS.button}`);
       expect(containerElOne).toHaveAttribute(HYDRATED_ATTR);
 
       await closeOne.click();
@@ -132,7 +133,7 @@ describe("calcite-tab-title", () => {
       containerElOne = await page.find(`calcite-tab-title[id='one']>>> .${CSS.container}`);
       expect(await containerElOne.getProperty("hidden")).toBe(true);
 
-      const closeTwo = await page.find(`calcite-tab-title[id='two'] >>> .${CSS.closeButton}`);
+      const closeTwo = await page.find(`calcite-tab-title[id='two'] >>> .${XButtonCSS.button}`);
       expect(await closeTwo.getProperty("closable")).not.toBe(true);
     });
   });
@@ -152,7 +153,7 @@ describe("calcite-tab-title", () => {
 
         tabEl = await page.find(`#${id}`);
         tabTitleContainerEl = await page.find(`calcite-tab-title[id='${id}'] >>> .${CSS.container}`);
-        const tabTitleCloseButtonEl = await page.find(`calcite-tab-title[id='${id}'] >>> .${CSS.closeButton}`);
+        const tabTitleCloseButtonEl = await page.find(`calcite-tab-title[id='${id}'] >>> .${XButtonCSS.button}`);
 
         expect(await tabTitleContainerEl.getProperty("hidden")).not.toBe(true);
 
@@ -208,7 +209,7 @@ describe("calcite-tab-title", () => {
 
       const carTabTitleContainerEl = await page.find(`#title2 >>> .${CSS.container}`);
       matchingTabEl = await page.find("#tab2");
-      tabTitleCloseButtonEl = await page.find(`#title2 >>> .${CSS.closeButton}`);
+      tabTitleCloseButtonEl = await page.find(`#title2 >>> .${XButtonCSS.button}`);
 
       await tabTitleCloseButtonEl.click();
       await page.waitForChanges();
@@ -221,7 +222,7 @@ describe("calcite-tab-title", () => {
 
       const planeTabTitleContainerEl = await page.find(`#title3 >>> .${CSS.container}`);
       matchingTabEl = await page.find("#tab3");
-      tabTitleCloseButtonEl = await page.find(`#title3 >>> .${CSS.closeButton}`);
+      tabTitleCloseButtonEl = await page.find(`#title3 >>> .${XButtonCSS.button}`);
 
       await tabTitleCloseButtonEl.click();
       await page.waitForChanges();
@@ -236,7 +237,7 @@ describe("calcite-tab-title", () => {
 
       const bikingTabTitleContainerEl = await page.find(`#title4 >>> .${CSS.container}`);
       matchingTabEl = await page.find("#tab4");
-      tabTitleCloseButtonEl = await page.find(`#title4 >>> .${CSS.closeButton}`);
+      tabTitleCloseButtonEl = await page.find(`#title4 >>> .${XButtonCSS.button}`);
 
       await tabTitleCloseButtonEl.click();
       await page.waitForChanges();
@@ -261,7 +262,7 @@ describe("calcite-tab-title", () => {
       expect(await matchingTabEl.getProperty("selected")).toBe(true);
 
       const embarkTabTitleContainerEl = await page.find(`#title1 >>> .${CSS.container}`);
-      tabTitleCloseButtonEl = await page.find(`#title1 >>> .${CSS.closeButton}`);
+      tabTitleCloseButtonEl = await page.find(`#title1 >>> .${XButtonCSS.button}`);
 
       await tabTitleCloseButtonEl.click();
       await page.waitForChanges();
@@ -273,7 +274,7 @@ describe("calcite-tab-title", () => {
 
       const planeTabTitleContainerEl = await page.find(`#title3 >>> .${CSS.container}`);
       matchingTabEl = await page.find("#tab3");
-      tabTitleCloseButtonEl = await page.find(`#title2 >>> .${CSS.closeButton}`);
+      tabTitleCloseButtonEl = await page.find(`#title2 >>> .${XButtonCSS.button}`);
 
       await tabTitleCloseButtonEl.click();
       await page.waitForChanges();
@@ -295,7 +296,7 @@ describe("calcite-tab-title", () => {
       expect(await matchingTabEl.getProperty("selected")).toBe(true);
 
       const embarkTabTitleContainerEl = await page.find(`#title1 >>> .${CSS.container}`);
-      tabTitleCloseButtonEl = await page.find(`#title1 >>> .${CSS.closeButton}`);
+      tabTitleCloseButtonEl = await page.find(`#title1 >>> .${XButtonCSS.button}`);
 
       await tabTitleCloseButtonEl.click();
       await page.waitForChanges();
@@ -315,7 +316,7 @@ describe("calcite-tab-title", () => {
       const planeTabTitleContainerEl = await page.find(`#title3 >>> .${CSS.container}`);
       const bikingTabTitleContainerEl = await page.find(`#title4 >>> .${CSS.container}`);
       matchingTabEl = await page.find("#title3");
-      tabTitleCloseButtonEl = await page.find(`#title2 >>> .${CSS.closeButton}`);
+      tabTitleCloseButtonEl = await page.find(`#title2 >>> .${XButtonCSS.button}`);
 
       await tabTitleCloseButtonEl.click();
       await page.waitForChanges();
@@ -348,16 +349,84 @@ describe("calcite-tab-title", () => {
   });
 
   describe("theme", () => {
-    describe("start/end icons", () => {
-      themed(html` <calcite-tab-title icon-start="banana" icon-end="3d-glasses">close me</calcite-tab-title>`, {
-        "--calcite-tab-icon-color-end": {
-          shadowSelector: `.${CSS.iconEnd}`,
+    describe("default", () => {
+      themed(html`<calcite-tab-title closable>Text</calcite-tab-title>`, {
+        "--calcite-tab-text-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "color",
+        },
+        "--calcite-tab-accent-color-press": {
+          shadowSelector: `.${CSS.selectedIndicator}`,
+          targetProp: "backgroundColor",
+          state: { press: `calcite-tab-title >>> .${CSS.selectedIndicator}` },
+        },
+        "--calcite-tab-close-icon-color": {
+          shadowSelector: `.${XButtonCSS.button}`,
+          targetProp: "color",
+        },
+        "--calcite-tab-close-icon-color-press": {
+          shadowSelector: `.${XButtonCSS.button}`,
           targetProp: "color",
+          state: { press: `calcite-tab-title >>> .${XButtonCSS.button}` },
         },
+        "--calcite-tab-close-icon-background-color-press": {
+          shadowSelector: `.${XButtonCSS.button}`,
+          targetProp: "backgroundColor",
+          state: { press: `calcite-tab-title >>> .${XButtonCSS.button}` },
+        },
+        "--calcite-tab-background-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "backgroundColor",
+        },
+      });
+    });
+
+    describe("bordered", () => {
+      themed(html` <calcite-tab-title bordered closable>yeah!</calcite-tab-title>`, {
+        "--calcite-tab-background-color-hover": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "backgroundColor",
+          state: "hover",
+        },
+      });
+    });
+
+    describe("selected", () => {
+      themed(html` <calcite-tab-title selected closable>yeah!</calcite-tab-title>`, {
+        "--calcite-tab-text-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "color",
+        },
+        "--calcite-tab-close-icon-background-color": {
+          shadowSelector: `.${XButtonCSS.button}`,
+          targetProp: "backgroundColor",
+        },
+      });
+    });
+
+    describe("bordered & selected", () => {
+      themed(html`<calcite-tab-title bordered selected>close me</calcite-tab-title>`, {
+        "--calcite-tab-border-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderInlineColor",
+        },
+        "--calcite-tab-background-color": {
+          shadowSelector: `.${CSS.container}::after`,
+          targetProp: "backgroundColor",
+        },
+      });
+    });
+
+    describe("start/end icons", () => {
+      themed(html` <calcite-tab-title icon-start="banana" icon-end="3d-glasses">close me</calcite-tab-title>`, {
         "--calcite-tab-icon-color-start": {
           shadowSelector: `.${CSS.iconStart}`,
           targetProp: "color",
         },
+        "--calcite-tab-icon-color-end": {
+          shadowSelector: `.${CSS.iconEnd}`,
+          targetProp: "color",
+        },
       });
     });
   });
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss
index 341509233b4..afbd4b4d603 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.scss
+++ b/packages/calcite-components/src/components/tab-title/tab-title.scss
@@ -3,8 +3,17 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
+ * @prop --calcite-tab-text-color: Specifies the component's text color.
+ * @prop --calcite-tab-border-color: Specifies the component's border color.
+ * @prop --calcite-tab-background-color: Specifies the component's background color.
+ * @prop --calcite-tab-background-color-hover: When `calcite-tabs` is `bordered`, specifies the component's background color when hovered.
+ * @prop --calcite-tab-accent-color-press: Specifies the component's accent color when selected or active.
  * @prop --calcite-tab-icon-color-end: Specifies the component's `iconEnd` color. Fallback to `--calcite-icon-color`.
  * @prop --calcite-tab-icon-color-start: Specifies the component's `iconStart` color. Fallback to `--calcite-icon-color`.
+ * @prop --calcite-tab-close-icon-color: Specifies the component's close element icon color.
+ * @prop --calcite-tab-close-icon-color-press: Specifies the component's close element icon color when hovered, focused, and active.
+ * @prop --calcite-tab-close-icon-background-color: Specifies the component's close element icon background color.
+ * @prop --calcite-tab-close-icon-background-color-press: Specifies the component's close element icon background color when hovered, focused, and active.
  */
 
 :host {
@@ -28,7 +37,7 @@
   .content {
     @apply text-n2h py-1;
   }
-  .close-button {
+  .x-button {
     @apply w-5;
   }
 }
@@ -37,7 +46,7 @@
   .content {
     @apply text-n1h py-2;
   }
-  .close-button {
+  .x-button {
     @apply w-7;
   }
 }
@@ -46,7 +55,7 @@
   .content {
     @apply text-0h py-2.5;
   }
-  .close-button {
+  .x-button {
     @apply w-8;
   }
 }
@@ -82,10 +91,12 @@
   h-full
   justify-between
   px-0
-  text-color-3
   text-n1h
   transition-default
   w-full;
+
+  color: var(--calcite-tab-text-color, var(--calcite-color-text-3));
+  background-color: var(--calcite-tab-background-color, transparent);
 }
 
 .selected-indicator {
@@ -100,46 +111,6 @@
   inline-size: 100%;
 }
 
-.container--bottom .selected-indicator {
-  inset-block-end: unset;
-  inset-block-start: 0;
-}
-
-:host([bordered]) .selected-indicator {
-  inset-block-start: 0;
-  inset-block-end: unset;
-  inset-inline-start: -1px;
-  inset-inline-end: 0;
-  inline-size: calc(100% + var(--calcite-spacing-base));
-}
-
-:host([bordered]) .container:not(.container--bottom) {
-  border-block-end: 1px solid transparent;
-}
-
-:host(:not([bordered])) .container {
-  &:hover,
-  &:active {
-    @apply text-color-1;
-  }
-}
-
-:host([bordered]:not([selected]):hover) .container:not(.container--bottom) {
-  border-block-end: 1px solid var(--calcite-color-border-1);
-}
-
-:host([bordered]:not([selected]):hover:not(:focus)) {
-  .selected-indicator {
-    background-color: var(--calcite-color-foreground-2);
-  }
-  .container:not(.container--bottom) .selected-indicator {
-    box-shadow: inset 0 1px var(--calcite-color-border-1);
-  }
-  .container.container--bottom .selected-indicator {
-    box-shadow: inset 0 -1px var(--calcite-color-border-1);
-  }
-}
-
 :host([bordered][selected]) .container::after {
   @apply absolute
     block
@@ -150,7 +121,6 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inline-size: 100%;
-  background: var(--calcite-color-foreground-1);
   content: "";
 }
 
@@ -162,64 +132,33 @@
   background: transparent;
 }
 
-:host([bordered]) .container--bottom .selected-indicator {
-  inset-block-start: unset;
-  inset-block-end: 0;
-}
-
-:host([selected]) .selected-indicator,
-:host([selected]:hover) .selected-indicator {
-  @apply bg-brand;
-}
-
-:host(:hover) .selected-indicator {
-  background-color: var(--calcite-color-border-3);
-}
-
-:host(:focus) .selected-indicator,
-:host(:active) .selected-indicator {
-  background-color: var(--calcite-color-brand);
+.container--bottom .selected-indicator {
+  inset-block-end: unset;
+  inset-block-start: 0;
 }
 
-:host([selected]:focus) {
-  .selected-indicator {
-    block-size: 4px;
+:host(:not([bordered])) .container {
+  &:hover,
+  &:active {
+    @apply text-color-1;
   }
 }
 
-@media (forced-colors: active) {
+:host([bordered]:not([selected]):hover:not(:focus)) {
   .selected-indicator {
-    background-color: highlight;
+    background-color: var(--calcite-color-foreground-2);
   }
-}
-
-:host([closed]) {
-  @apply hidden;
-}
-
-:host([selected]) .container {
-  @apply text-color-1 border-color-transparent;
-}
-
-:host(:focus) .container {
-  @apply focus-inset;
-
-  &:focus-within {
-    @apply focus-base;
+  .container:not(.container--bottom) .selected-indicator {
+    box-shadow: inset 0 1px var(--calcite-color-border-1);
   }
-}
-
-:host(:active),
-:host(:focus),
-:host(:hover) {
-  a {
-    @apply text-color-1 border-color-2 no-underline;
+  .container.container--bottom .selected-indicator {
+    box-shadow: inset 0 -1px var(--calcite-color-border-1);
   }
 }
 
-@include disabled() {
-  .container {
-    @apply pointer-events-none opacity-50;
+:host([selected]:focus) {
+  .selected-indicator {
+    block-size: 4px;
   }
 }
 
@@ -234,20 +173,37 @@
 }
 
 .content--has-text {
-  @apply p-1;
+  .icon-start {
+    color: var(--calcite-tab-icon-color-start, var(--calcite-icon-color));
+  }
 }
 
 .content--has-text .calcite-tab-title--icon.icon-start {
-  margin-inline-end: var(--calcite-spacing-sm);
   color: var(--calcite-tab-icon-color-start, var(--calcite-icon-color));
+  .icon-end {
+    color: var(--calcite-tab-icon-color-end, var(--calcite-icon-color));
+  }
 }
 
 .content--has-text .calcite-tab-title--icon.icon-end {
-  margin-inline-start: var(--calcite-spacing-sm);
   color: var(--calcite-tab-icon-color-end, var(--calcite-icon-color));
 }
 
-.close-button {
+.content--has-text {
+  @apply p-1;
+
+  .calcite-tab-title--icon {
+    &.icon-start {
+      margin-inline-end: var(--calcite-spacing-sm);
+    }
+
+    &.icon-end {
+      margin-inline-start: var(--calcite-spacing-sm);
+    }
+  }
+}
+
+.x-button {
   @apply appearance-none
   bg-transparent
   border-none
@@ -259,51 +215,37 @@
   justify-center
   h-full
   self-center
-  text-color-3
   transition-default;
   margin-inline-start: var(--calcite-spacing-sm);
   margin-inline-end: var(--calcite-spacing-px);
   block-size: calc(100% - var(--calcite-spacing-xxs));
+  color: var(--calcite-tab-close-icon-color, var(--calcite-color-text-3));
+  background-color: var(--calcite-tab-close-icon-background-color, var(--calcite-color-transparent));
 
   &:focus {
     @apply focus-normal;
   }
 
   &:focus,
-  &:hover {
-    @apply text-color-1;
-    background-color: var(--calcite-color-foreground-3);
-  }
-
+  &:hover,
   &:active {
-    @apply text-color-1;
-    background-color: var(--calcite-color-foreground-3);
-  }
-
-  & calcite-icon {
-    color: inherit;
-  }
-}
-
-// compensate for spacing when no hastext and two icons
-:host([icon-start][icon-end]) {
-  .calcite-tab-title--icon:first-child {
-    margin-inline-end: var(--calcite-spacing-sm);
+    color: var(--calcite-tab-close-icon-color-press, var(--calcite-color-text-1));
+    background-color: var(--calcite-tab-close-icon-background-color-press, var(--calcite-color-foreground-3));
   }
 }
 
 // bordered styles
 :host([bordered]) .container {
+  border-color: transparent;
+  border-inline-width: var(--calcite-spacing-px);
+  border-inline-style: solid;
+
   &:hover,
   &:active {
     @apply text-color-1;
   }
 
-  &:not(.container--bottom) .close-button {
-    block-size: calc(100% - var(--calcite-spacing-px));
-    margin-block-start: -1px;
-  }
-  .close-button {
+  .x-button {
     & calcite-icon {
       margin-block-start: var(--calcite-spacing-px);
     }
@@ -311,49 +253,131 @@
     &:focus,
     &:hover,
     &:active {
-      box-shadow: 0 2px 0 0 var(--calcite-color-foreground-3);
+      box-shadow: 0 2px 0 0 var(--calcite-tab-close-icon-background-color-press, var(--calcite-color-foreground-3));
     }
   }
 
-  &.container--bottom .close-button {
-    box-shadow: 0 -2px 0 0 transparent;
-    & calcite-icon {
-      margin-block-end: var(--calcite-spacing-px);
+  &.container--bottom {
+    border-block-start-style: solid;
+    border-block-start-width: 1px;
+
+    .selected-indicator {
+      inset-block-start: unset;
+      inset-block-end: 0;
     }
-    &:focus,
-    &:hover,
-    &:active {
-      box-shadow: 0 -2px 0 0 var(--calcite-color-foreground-3);
+
+    .x-button {
+      box-shadow: 0 -2px 0 0 var(--calcite-tab-close-icon-background-color, var(--calcite-color-transparent));
+
+      &:focus,
+      &:hover,
+      &:active {
+        box-shadow: 0 -2px 0 0 var(--calcite-tab-close-icon-background-color-press, var(--calcite-color-foreground-3));
+      }
+
+      calcite-icon {
+        margin-block-end: var(--calcite-spacing-px);
+      }
     }
   }
+
+  &:not(.container--bottom) {
+    border-block-end-style: solid;
+    border-block-end-width: 1px;
+
+    .x-button {
+      block-size: calc(100% - var(--calcite-spacing-px));
+      margin-block-start: -1px;
+    }
+  }
+
+  .selected-indicator {
+    inset-block-start: 0;
+    inset-block-end: unset;
+    inset-inline-start: -1px;
+    inset-inline-end: 0;
+    inline-size: calc(100% + var(--calcite-spacing-base));
+  }
+
+  &:host(:not([selected])) {
+    .container .x-button {
+      box-shadow: 0 2px 0 0 transparent;
+    }
+
+    &:host(:hover) {
+      .container:not(.container--bottom) {
+        border-block-end-color: var(--calcite-tab-border-color, var(--calcite-color-border-1));
+      }
+
+      &:host(:not(:focus)) {
+        .selected-indicator {
+          box-shadow: inset 0 var(--calcite-internal-tab-shadow-length)
+            var(--calcite-tab-border-color, var(--calcite-color-border-1));
+        }
+        :not(.container--bottom) {
+          --calcite-internal-tab-shadow-length: 1px;
+        }
+        .container--bottom {
+          --calcite-internal-tab-shadow-length: -1px;
+        }
+      }
+    }
+  }
+
+  &:hover {
+    background-color: var(--calcite-tab-background-color-hover, var(--calcite-color-foreground-2));
+    border-block-end-color: var(--calcite-color-border-1);
+  }
 }
 
-:host([bordered][selected]) {
-  box-shadow: inset 0 -1px var(--calcite-color-foreground-1);
+:host(:hover) .selected-indicator {
+  background-color: var(--calcite-color-border-3);
 }
 
-:host([bordered]:not([selected])) .container .close-button {
-  box-shadow: 0 2px 0 0 transparent;
+:host([selected]) .selected-indicator,
+:host([selected]:hover) .selected-indicator,
+:host(:focus) .selected-indicator,
+:host(:active) .selected-indicator {
+  background-color: var(--calcite-tab-accent-color-press, var(--calcite-color-brand));
 }
 
-:host([bordered]:hover) {
-  .container {
-    background-color: var(--calcite-color-foreground-2);
-  }
+:host([closed]) {
+  @apply hidden;
 }
 
-:host([bordered]) .container {
-  border-inline: var(--calcite-spacing-px) solid transparent;
+:host([selected]) .container {
+  @apply border-color-transparent;
+  color: var(--calcite-tab-text-color, var(--calcite-color-text-1));
 }
 
 :host([selected][bordered]) .container {
-  border-inline-color: var(--calcite-color-border-1);
+  border-inline-color: var(--calcite-tab-border-color, var(--calcite-color-border-1));
+
+  &::after {
+    background-color: var(--calcite-tab-background-color, var(--calcite-color-foreground-1));
+  }
+
   &:hover,
   &:active {
     background: transparent;
   }
 }
 
+:host(:focus) .container {
+  @apply focus-inset;
+
+  &:focus-within {
+    @apply focus-base;
+  }
+}
+
+// compensate for spacing when no hastext and two icons
+:host([icon-start][icon-end]) {
+  .calcite-tab-title--icon:first-child {
+    margin-inline-end: var(--calcite-spacing-sm);
+  }
+}
+
 :host([layout="inline"][bordered]),
 :host([layout="center"][bordered]) {
   .scale-m {
@@ -395,14 +419,6 @@
     outline-color: highlight;
   }
 
-  :host([bordered]) .container {
-    border-block-end-style: solid;
-  }
-
-  :host([bordered]) .container--bottom {
-    border-block-start-style: solid;
-  }
-
   :host([bordered][selected]) .container {
     border-block-end-style: none;
   }
@@ -411,10 +427,19 @@
     border-block-start-style: none;
   }
 
-  .close-button {
+  .x-button {
     /* in high contrast the tab title outline covers the close button outline without a z-index */
     @apply z-default;
   }
+
+  .selected-indicator {
+    background-color: highlight;
+  }
 }
 
 @include base-component();
+@include disabled() {
+  .container {
+    @apply pointer-events-none opacity-50;
+  }
+}
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx
index 4b665a76c49..2e82074ab92 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.tsx
+++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx
@@ -24,10 +24,11 @@ import { TabChangeEventDetail, TabCloseEventDetail } from "../tab/interfaces";
 import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
 import { getIconScale } from "../../utils/component";
 import { IconNameOrString } from "../icon/interfaces";
+import { XButton } from "../functional/XButton";
 import { useT9n } from "../../controllers/useT9n";
 import type { Tabs } from "../tabs/tabs";
 import T9nStrings from "./assets/t9n/messages.en.json";
-import { CSS, ICONS } from "./resources";
+import { CSS } from "./resources";
 import { styles } from "./tab-title.scss";
 
 declare global {
@@ -451,18 +452,17 @@ export class TabTitle extends LitElement implements InteractiveComponent {
     const { closable, messages } = this;
 
     return closable ? (
-      <button
-        ariaLabel={messages.close}
-        class={CSS.closeButton}
+      <XButton
         disabled={false}
-        key={CSS.closeButton}
+        focusable={true}
+        key="close-button"
+        label={messages.close}
         onClick={this.closeClickHandler}
         ref={this.closeButtonEl}
+        round={false}
+        scale={this.scale}
         title={messages.close}
-        type="button"
-      >
-        <calcite-icon icon={ICONS.close} scale={getIconScale(this.scale)} />
-      </button>
+      />
     ) : null;
   }
 
diff --git a/packages/calcite-components/src/components/tab/tab.e2e.ts b/packages/calcite-components/src/components/tab/tab.e2e.ts
index 699077f480a..2b893fb355e 100644
--- a/packages/calcite-components/src/components/tab/tab.e2e.ts
+++ b/packages/calcite-components/src/components/tab/tab.e2e.ts
@@ -1,5 +1,6 @@
 import { describe } from "vitest";
-import { defaults, renders, hidden } from "../../tests/commonTests";
+import { defaults, renders, hidden, themed } from "../../tests/commonTests";
+import { CSS } from "./resources";
 
 describe("calcite-tab", () => {
   const tabHtml = "<calcite-tab>A tab</calcite-tab>";
@@ -21,4 +22,15 @@ describe("calcite-tab", () => {
       { propertyName: "scale", defaultValue: "m" },
     ]);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-tab", {
+        "--calcite-tab-content-space-y": {
+          shadowSelector: `.${CSS.content}`,
+          targetProp: "paddingBlock",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/tab/tab.scss b/packages/calcite-components/src/components/tab/tab.scss
index 63f7d27fa60..035e457fe30 100644
--- a/packages/calcite-components/src/components/tab/tab.scss
+++ b/packages/calcite-components/src/components/tab/tab.scss
@@ -3,42 +3,51 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-tab-content-block-padding: Specifies the block padding of the component's content in the `default` slot.
+ * @prop --calcite-tab-content-space-y: Specifies the vertical space between the component's content in the `default` slot.
+ * @prop --calcite-tab-content-block-padding: [Deprecated] Use `--calcite-tab-content-space-y` instead. Specifies the block padding of the component's content in the `default` slot.
  */
 
-:host([selected]) {
-  section,
-  .container {
-    @apply block;
-  }
-}
-
 :host {
   @apply hidden h-full w-full;
 }
 
 :host([selected]) {
   @apply block h-full w-full overflow-auto;
+
+  section,
+  .container {
+    @apply block;
+  }
 }
 
 .content {
   @apply box-border;
-  padding-block: var(--calcite-internal-tab-content-block-padding);
+
+  padding-block: var(
+    --calcite-tab-content-space-y,
+    var(--calcite-tab-content-block-padding, var(--calcite-internal-tab-content-space-y))
+  );
 }
 
 .scale-s {
-  --calcite-internal-tab-content-block-padding: var(--calcite-tab-content-block-padding, theme("spacing.1"));
-  @apply text-n2h;
+  --calcite-internal-tab-content-space-y: theme("spacing.1");
+
+  font-size: var(--calcite-font-size-sm);
+  line-height: 1rem;
 }
 
 .scale-m {
-  --calcite-internal-tab-content-block-padding: var(--calcite-tab-content-block-padding, theme("spacing.2"));
-  @apply text-n1h;
+  --calcite-internal-tab-content-space-y: theme("spacing.2");
+
+  font-size: var(--calcite-font-size);
+  line-height: 1rem;
 }
 
 .scale-l {
-  --calcite-internal-tab-content-block-padding: var(--calcite-tab-content-block-padding, theme("spacing.[2.5]"));
-  @apply text-0h;
+  --calcite-internal-tab-content-space-y: theme("spacing.[2.5]");
+
+  font-size: var(--calcite-font-size-md);
+  line-height: 1.25rem;
 }
 
 section,
diff --git a/packages/calcite-components/src/components/tabs/resources.ts b/packages/calcite-components/src/components/tabs/resources.ts
index 325745e85ad..62f036fc6d2 100644
--- a/packages/calcite-components/src/components/tabs/resources.ts
+++ b/packages/calcite-components/src/components/tabs/resources.ts
@@ -1,3 +1,7 @@
+export const CSS = {
+  section: "section",
+};
+
 export const SLOTS = {
   titleGroup: "title-group",
 };
diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts
index 7155a2a5ef7..cc162a7e9f7 100644
--- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts
+++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts
@@ -2,12 +2,13 @@
 import { E2EElement, E2EPage, EventSpy, newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { beforeEach, describe, expect, it } from "vitest";
 import { html } from "../../../support/formatting";
-import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests";
+import { accessible, defaults, hidden, reflects, renders, themed } from "../../tests/commonTests";
 import { findAll, GlobalTestProps } from "../../tests/utils";
 import { Scale } from "../interfaces";
-import { CSS as TabTitleCSS } from "../tab-title/resources";
+import { CSS as XButtonCSS } from "../functional/XButton";
 import type { TabTitle } from "../tab-title/tab-title";
 import type { TabNav } from "../tab-nav/tab-nav";
+import { CSS } from "./resources";
 import { TabPosition } from "./interfaces";
 import type { Tabs } from "./tabs";
 
@@ -345,7 +346,7 @@ describe("calcite-tabs", () => {
     });
 
     it("should emit tab change events when closing affects selected tab", async () => {
-      await page.click(`#tab-title-4 >>> .${TabTitleCSS.closeButton}`);
+      await page.click(`#tab-title-4 >>> .${XButtonCSS.button}`);
       await page.waitForChanges();
 
       expect(tabsActivateSpy).toHaveReceivedEventTimes(1);
@@ -363,7 +364,7 @@ describe("calcite-tabs", () => {
     });
 
     it("should NOT emit tab change events when closing does not affect selected tab", async () => {
-      await page.click(`#tab-title-1 >>> .${TabTitleCSS.closeButton}`);
+      await page.click(`#tab-title-1 >>> .${XButtonCSS.button}`);
       await page.waitForChanges();
 
       expect(tabsActivateSpy).toHaveReceivedEventTimes(0);
@@ -397,7 +398,7 @@ describe("calcite-tabs", () => {
 
       const tab2 = await page.find("#tab-title-2");
 
-      await page.click(`#tab-title-1 >>> .${TabTitleCSS.closeButton}`);
+      await page.click(`#tab-title-1 >>> .${XButtonCSS.button}`);
       await tab2.click();
       await page.waitForChanges();
 
@@ -409,11 +410,11 @@ describe("calcite-tabs", () => {
     describe("hiding/displaying X", () => {
       it("should hide x when tabs 2 to 4 closed and display x closable tab added", async () => {
         for (let i = 2; i <= 4; ++i) {
-          await page.click(`#tab-title-${i} >>> .${TabTitleCSS.closeButton}`);
+          await page.click(`#tab-title-${i} >>> .${XButtonCSS.button}`);
         }
         let tab1 = await page.find(`#tab-title-1`);
         expect(await tab1.getProperty("closable")).toBe(false);
-        expect(await page.find(`#tab-title-1 >>> .${TabTitleCSS.closeButton}`)).toBeNull();
+        expect(await page.find(`#tab-title-1 >>> .${XButtonCSS.button}`)).toBeNull();
 
         await page.evaluate(() => {
           document
@@ -423,16 +424,16 @@ describe("calcite-tabs", () => {
         await page.waitForChanges();
         tab1 = await page.find(`#tab-title-1`);
         expect(await tab1.getProperty("closable")).toBe(true);
-        expect(await page.find(`#tab-title-1 >>> .${TabTitleCSS.closeButton}`)).toBeDefined();
+        expect(await page.find(`#tab-title-1 >>> .${XButtonCSS.button}`)).toBeDefined();
       });
 
       it("should hide x when tabs 1 to 3 closed and display x when closable tab added", async () => {
         for (let i = 1; i <= 3; ++i) {
-          await page.click(`#tab-title-${i} >>> .${TabTitleCSS.closeButton}`);
+          await page.click(`#tab-title-${i} >>> .${XButtonCSS.button}`);
         }
         let tab4 = await page.find(`#tab-title-4`);
         expect(await tab4.getProperty("closable")).toBe(false);
-        expect(await page.find(`#tab-title-4 >>> .${TabTitleCSS.closeButton}`)).toBeNull();
+        expect(await page.find(`#tab-title-4 >>> .${XButtonCSS.button}`)).toBeNull();
 
         await page.evaluate(() => {
           document
@@ -442,7 +443,43 @@ describe("calcite-tabs", () => {
         await page.waitForChanges();
         tab4 = await page.find(`#tab-title-4`);
         expect(await tab4.getProperty("closable")).toBe(true);
-        expect(await page.find(`#tab-title-4 >>> .${TabTitleCSS.closeButton}`)).toBeDefined();
+        expect(await page.find(`#tab-title-4 >>> .${XButtonCSS.button}`)).toBeDefined();
+      });
+    });
+  });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-tabs", {
+        "--calcite-tab-border-color": {
+          shadowSelector: `.${CSS.section}`,
+          targetProp: "borderBlockStartColor",
+        },
+      });
+    });
+
+    describe("bordered", () => {
+      themed(html` <calcite-tabs bordered></calcite-tabs>`, {
+        "--calcite-tab-background-color": {
+          targetProp: "backgroundColor",
+        },
+        "--calcite-tab-border-color": [
+          {
+            targetProp: "boxShadow",
+          },
+          {
+            shadowSelector: `.${CSS.section}`,
+            targetProp: "borderColor",
+          },
+        ],
+      });
+
+      describe("bottom position", () => {
+        themed(html` <calcite-tabs bordered position="bottom"></calcite-tabs>`, {
+          "--calcite-tab-border-color": {
+            targetProp: "boxShadow",
+          },
+        });
       });
     });
   });
diff --git a/packages/calcite-components/src/components/tabs/tabs.scss b/packages/calcite-components/src/components/tabs/tabs.scss
index 96bf67d971e..e9735aa2c90 100644
--- a/packages/calcite-components/src/components/tabs/tabs.scss
+++ b/packages/calcite-components/src/components/tabs/tabs.scss
@@ -1,26 +1,53 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-tab-background-color: When `bordered`, specifies the component's background color.
+ * @prop --calcite-tab-border-color: Specifies the component's border color.
+ */
+
 :host {
   @apply flex flex-col;
 }
 
 :host([bordered]) {
-  box-shadow: inset 0 1px 0 var(--calcite-color-border-1);
-  background-color: var(--calcite-color-foreground-1);
+  box-shadow: inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1));
+  background-color: var(--calcite-tab-background-color, var(--calcite-color-foreground-1));
 
   section {
-    @apply border-color-1 border border-solid;
+    border-color: var(--calcite-tab-border-color, var(--calcite-color-border-1));
+    border-style: solid;
   }
 }
 
+section {
+  @apply border flex flex-grow overflow-hidden;
+
+  border-block-start-style: solid;
+  border-block-start-color: var(--calcite-tab-border-color, var(--calcite-color-border-1));
+}
+
 :host([bordered][position="bottom"]) {
   box-shadow:
-    inset 0 1px 0 var(--calcite-color-border-1),
-    inset 0 -1px 0 var(--calcite-color-border-1);
+    inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1)),
+    inset 0 -1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1));
 }
 
 :host([bordered]:not([position="bottom"])) ::slotted(calcite-tab-nav) {
   margin-block-end: -1px;
 }
 
+:host([position="bottom"]) {
+  @apply flex-col-reverse;
+
+  section {
+    @apply flex-col-reverse
+      border-t-0
+      border-b;
+  }
+}
+
 :host([bordered][scale="s"]) section {
   @apply p-3;
 }
@@ -33,28 +60,9 @@
   @apply p-4;
 }
 
-:host([position="bottom"]) {
-  @apply flex-col-reverse;
-}
-
-section {
-  @apply border-t-color-1
-    flex
-    flex-grow
-    overflow-hidden
-    border-t;
-  border-block-start-style: solid;
-}
-
-:host([position="bottom"]) section {
-  @apply border-b-color-1
-    flex-col-reverse
-    border-t-0
-    border-b;
-}
-
 :host([position="bottom"]:not([bordered])) section {
   border-block-end-style: solid;
+  border-block-end-color: var(--calcite-tab-border-color, var(--calcite-color-border-1));
 }
 
 @media (forced-colors: active) {
diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx
index 4015af9cbf7..d97ee6678e1 100644
--- a/packages/calcite-components/src/components/tabs/tabs.tsx
+++ b/packages/calcite-components/src/components/tabs/tabs.tsx
@@ -6,7 +6,7 @@ import { getSlotAssignedElements, slotChangeGetAssignedElements } from "../../ut
 import type { TabTitle } from "../tab-title/tab-title";
 import type { Tab } from "../tab/tab";
 import { TabLayout, TabPosition } from "./interfaces";
-import { SLOTS } from "./resources";
+import { CSS, SLOTS } from "./resources";
 import { styles } from "./tabs.scss";
 
 declare global {
@@ -195,7 +195,7 @@ export class Tabs extends LitElement {
     return (
       <>
         <slot name={SLOTS.titleGroup} />
-        <section>
+        <section class={CSS.section}>
           <slot onSlotChange={this.defaultSlotChangeHandler} ref={this.setDefaultSlotRef} />
         </section>
       </>
diff --git a/packages/calcite-components/src/custom-theme/tabs.ts b/packages/calcite-components/src/custom-theme/tabs.ts
index 23d8022620b..be9c91704bb 100644
--- a/packages/calcite-components/src/custom-theme/tabs.ts
+++ b/packages/calcite-components/src/custom-theme/tabs.ts
@@ -1,9 +1,20 @@
 import { html } from "../../support/formatting";
 
 export const tabsTokens = {
-  // additional tokens will be added in https://github.com/Esri/calcite-design-system/pull/10532/
+  calciteTabBackgroundColor: "",
+  calciteTabBackgroundColorHover: "",
+  calciteTabBorderColor: "",
+  calciteTabTextColor: "",
+  calciteTabAccentColor: "",
+  calciteTabAccentColorHover: "",
+  calciteTabAccentColorPress: "",
   calciteTabIconColorEnd: "",
   calciteTabIconColorStart: "",
+  calciteTabCloseIconColor: "",
+  calciteTabCloseIconColorPress: "",
+  calciteTabCloseBackgroundColor: "",
+  calciteTabCloseBackgroundPress: "",
+  calciteTabContentSpaceY: "",
 };
 
 export const tabs = html`
diff --git a/packages/calcite-components/src/demos/tabs.html b/packages/calcite-components/src/demos/tabs.html
index f0b7c4afc04..1be32dd7bb7 100644
--- a/packages/calcite-components/src/demos/tabs.html
+++ b/packages/calcite-components/src/demos/tabs.html
@@ -46,36 +46,6 @@
         <div class="child">large</div>
       </div>
 
-      <!-- simple tab-nav -->
-      <div class="flex-wrap">
-        <div class="child right-aligned-text">simple</div>
-
-        <div class="child">
-          <calcite-tab-nav scale="s">
-            <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 2 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 3 Title</calcite-tab-title>
-          </calcite-tab-nav>
-        </div>
-
-        <div class="child">
-          <calcite-tab-nav scale="m">
-            <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 2 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 3 Title</calcite-tab-title>
-          </calcite-tab-nav>
-        </div>
-
-        <div class="child">
-          <calcite-tab-nav scale="l">
-            <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 2 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 3 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 4 Title</calcite-tab-title>
-          </calcite-tab-nav>
-        </div>
-      </div>
-
       <!-- tab position: top (default)-->
       <div class="flex-wrap">
         <div class="child right-aligned-text">tab position: top (default)</div>
@@ -596,6 +566,20 @@
       <!-- additional tokens will be added in https://github.com/Esri/calcite-design-system/pull/10532/ -->
       <demo-theme
         tokens="
+        --calcite-tab-background-color,
+        --calcite-tab-background-color-hover,
+        --calcite-tab-border-color,
+        --calcite-tab-text-color,
+        --calcite-tab-accent-color,
+        --calcite-tab-accent-color-hover,
+        --calcite-tab-accent-color-press,
+        --calcite-tab-icon-color-end,
+        --calcite-tab-icon-color-start,
+        --calcite-tab-close-icon-color,
+        --calcite-tab-close-icon-color-press,
+        --calcite-tab-close-icon-background-color,
+        --calcite-tab-close-icon-background-color-press,
+        --calcite-tab-content-space-y,
         "
       >
         <style>