diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts b/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts
index af0fc8a31b0..abcd100df85 100644
--- a/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts
+++ b/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts
@@ -1,6 +1,7 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, labelable, renders, hidden, t9n } from "../../tests/commonTests";
+import { accessible, disabled, labelable, renders, hidden, t9n, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
 import { CSS } from "./resources";
 
 describe("calcite-inline-editable", () => {
@@ -379,6 +380,218 @@ describe("calcite-inline-editable", () => {
     });
   });
 
+  describe("theme", () => {
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-inline-editable-background-color": {
+          shadowSelector: `.${CSS.wrapper}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-inline-editable-edit-button-background-color": {
+          shadowSelector: `.${CSS.enableEditingButton}`,
+          targetProp: "--calcite-button-background-color",
+        },
+        "--calcite-inline-editable-edit-button-background-color-active": {
+          shadowSelector: `.${CSS.enableEditingButton}`,
+          targetProp: "--calcite-button-background-color",
+          state: { press: { attribute: "class", value: CSS.enableEditingButton } },
+        },
+        "--calcite-inline-editable-edit-button-background-color-focus": {
+          shadowSelector: `.${CSS.enableEditingButton}`,
+          targetProp: "--calcite-button-background-color",
+          state: "focus",
+        },
+        "--calcite-inline-editable-edit-button-background-color-hover": {
+          shadowSelector: `.${CSS.enableEditingButton}`,
+          targetProp: "--calcite-button-background-color",
+          state: "hover",
+        },
+        "--calcite-inline-editable-edit-button-border-color": {
+          shadowSelector: `.${CSS.enableEditingButton}`,
+          targetProp: "--calcite-button-border-color",
+        },
+        "--calcite-inline-editable-edit-button-border-color-active": {
+          shadowSelector: `.${CSS.enableEditingButton}`,
+          targetProp: "--calcite-button-border-color",
+          state: { press: { attribute: "class", value: CSS.enableEditingButton } },
+        },
+        "--calcite-inline-editable-edit-button-border-color-focus": {
+          shadowSelector: `.${CSS.enableEditingButton}`,
+          targetProp: "--calcite-button-border-color",
+          state: "focus",
+        },
+        "--calcite-inline-editable-edit-button-border-color-hover": {
+          shadowSelector: `.${CSS.enableEditingButton}`,
+          targetProp: "--calcite-button-border-color",
+          state: "hover",
+        },
+        "--calcite-inline-editable-edit-button-icon-color": {
+          shadowSelector: `.${CSS.enableEditingButton}`,
+          targetProp: "--calcite-button-icon-color",
+        },
+        "--calcite-inline-editable-edit-button-icon-color-active": {
+          shadowSelector: `.${CSS.enableEditingButton}`,
+          targetProp: "--calcite-button-icon-color",
+          state: { press: { attribute: "class", value: CSS.enableEditingButton } },
+        },
+        "--calcite-inline-editable-edit-button-icon-color-focus": {
+          shadowSelector: `.${CSS.enableEditingButton}`,
+          targetProp: "--calcite-button-icon-color",
+          state: "focus",
+        },
+        "--calcite-inline-editable-edit-button-icon-color-hover": {
+          shadowSelector: `.${CSS.enableEditingButton}`,
+          targetProp: "--calcite-button-icon-color",
+          state: "hover",
+        },
+        "--calcite-inline-editable-edit-button-corner-radius": {
+          shadowSelector: `.${CSS.enableEditingButton}`,
+          targetProp: "--calcite-button-corner-radius",
+        },
+      };
+      themed(
+        html`
+          <calcite-inline-editable controls>
+            <calcite-input placeholder="My placeholder" value="Edit me"></calcite-input>
+          </calcite-inline-editable>
+        `,
+        tokens,
+      );
+    });
+    describe("editing enabled", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-inline-editable-cancel-button-background-color": {
+          shadowSelector: `.${CSS.cancelEditingButton}`,
+          targetProp: "--calcite-button-background-color",
+        },
+        "--calcite-inline-editable-cancel-button-background-color-active": {
+          shadowSelector: `.${CSS.cancelEditingButton}`,
+          targetProp: "--calcite-button-background-color",
+          state: { press: { attribute: "class", value: CSS.cancelEditingButton } },
+        },
+        "--calcite-inline-editable-cancel-button-background-color-focus": {
+          shadowSelector: `.${CSS.cancelEditingButton}`,
+          targetProp: "--calcite-button-background-color",
+          state: "focus",
+        },
+        "--calcite-inline-editable-cancel-button-background-color-hover": {
+          shadowSelector: `.${CSS.cancelEditingButton}`,
+          targetProp: "--calcite-button-background-color",
+          state: "hover",
+        },
+        "--calcite-inline-editable-cancel-button-border-color-active": {
+          shadowSelector: `.${CSS.cancelEditingButton}`,
+          targetProp: "--calcite-button-border-color",
+          state: { press: { attribute: "class", value: CSS.cancelEditingButton } },
+        },
+        "--calcite-inline-editable-cancel-button-border-color-focus": {
+          shadowSelector: `.${CSS.cancelEditingButton}`,
+          targetProp: "--calcite-button-border-color",
+          state: { press: { attribute: "class", value: CSS.cancelEditingButton } },
+        },
+        "--calcite-inline-editable-cancel-button-border-color-hover": {
+          shadowSelector: `.${CSS.cancelEditingButton}`,
+          targetProp: "--calcite-button-border-color",
+          state: "hover",
+        },
+        "--calcite-inline-editable-cancel-button-icon-color": {
+          shadowSelector: `.${CSS.cancelEditingButton}`,
+          targetProp: "--calcite-button-icon-color",
+        },
+        "--calcite-inline-editable-cancel-button-icon-color-active": {
+          shadowSelector: `.${CSS.cancelEditingButton}`,
+          targetProp: "--calcite-button-icon-color",
+          state: { press: { attribute: "class", value: CSS.cancelEditingButton } },
+        },
+        "--calcite-inline-editable-cancel-button-icon-color-focus": {
+          shadowSelector: `.${CSS.cancelEditingButton}`,
+          targetProp: "--calcite-button-icon-color",
+          state: "focus",
+        },
+        "--calcite-inline-editable-cancel-button-icon-color-hover": {
+          shadowSelector: `.${CSS.cancelEditingButton}`,
+          targetProp: "--calcite-button-icon-color",
+          state: "hover",
+        },
+        "--calcite-inline-editable-cancel-button-corner-radius": {
+          shadowSelector: `.${CSS.cancelEditingButton}`,
+          targetProp: "--calcite-button-corner-radius",
+        },
+        "--calcite-inline-editable-ok-button-background-color": {
+          shadowSelector: `.${CSS.confirmChangesButton}`,
+          targetProp: "--calcite-button-background-color",
+        },
+        "--calcite-inline-editable-ok-button-background-color-active": {
+          shadowSelector: `.${CSS.confirmChangesButton}`,
+          targetProp: "--calcite-button-background-color",
+          state: { press: { attribute: "class", value: CSS.confirmChangesButton } },
+        },
+        "--calcite-inline-editable-ok-button-background-color-focus": {
+          shadowSelector: `.${CSS.confirmChangesButton}`,
+          targetProp: "--calcite-button-background-color",
+          state: "focus",
+        },
+        "--calcite-inline-editable-ok-button-background-color-hover": {
+          shadowSelector: `.${CSS.confirmChangesButton}`,
+          targetProp: "--calcite-button-background-color",
+          state: "hover",
+        },
+        "--calcite-inline-editable-ok-button-border-color": {
+          shadowSelector: `.${CSS.confirmChangesButton}`,
+          targetProp: "--calcite-button-border-color",
+          state: "hover",
+        },
+        "--calcite-inline-editable-ok-button-border-color-active": {
+          shadowSelector: `.${CSS.confirmChangesButton}`,
+          targetProp: "--calcite-button-border-color",
+          state: { press: { attribute: "class", value: CSS.confirmChangesButton } },
+        },
+        "--calcite-inline-editable-ok-button-border-color-focus": {
+          shadowSelector: `.${CSS.confirmChangesButton}`,
+          targetProp: "--calcite-button-border-color",
+          state: "focus",
+        },
+        "--calcite-inline-editable-ok-button-border-color-hover": {
+          shadowSelector: `.${CSS.confirmChangesButton}`,
+          targetProp: "--calcite-button-border-color",
+          state: "hover",
+        },
+        "--calcite-inline-editable-ok-button-icon-color": {
+          shadowSelector: `.${CSS.confirmChangesButton}`,
+          targetProp: "--calcite-button-icon-color",
+          state: "hover",
+        },
+        "--calcite-inline-editable-ok-button-icon-color-active": {
+          shadowSelector: `.${CSS.confirmChangesButton}`,
+          targetProp: "--calcite-button-icon-color",
+          state: { press: { attribute: "class", value: CSS.confirmChangesButton } },
+        },
+        "--calcite-inline-editable-ok-button-icon-color-focus": {
+          shadowSelector: `.${CSS.confirmChangesButton}`,
+          targetProp: "--calcite-button-icon-color",
+          state: "focus",
+        },
+        "--calcite-inline-editable-ok-button-icon-color-hover": {
+          shadowSelector: `.${CSS.confirmChangesButton}`,
+          targetProp: "--calcite-button-icon-color",
+          state: "hover",
+        },
+        "--calcite-inline-editable-ok-button-corner-radius": {
+          shadowSelector: `.${CSS.confirmChangesButton}`,
+          targetProp: "--calcite-button-corner-radius",
+        },
+      };
+      themed(
+        html`
+          <calcite-inline-editable editing-enabled controls>
+            <calcite-input placeholder="My placeholder" value="Edit me"></calcite-input>
+          </calcite-inline-editable>
+        `,
+        tokens,
+      );
+    });
+  });
+
   describe("translation support", () => {
     t9n("calcite-inline-editable");
   });
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 da8ead12cc6..cd198054b70 100755
--- a/packages/calcite-components/src/components/inline-editable/inline-editable.scss
+++ b/packages/calcite-components/src/components/inline-editable/inline-editable.scss
@@ -132,7 +132,7 @@
   }
 }
 
-.confirm-editing-button {
+.confirm-changes-button {
   --calcite-button-background-color: var(--calcite-inline-editable-ok-button-background-color);
   --calcite-button-border-color: var(--calcite-inline-editable-ok-button-border-color);
   --calcite-button-icon-color: var(--calcite-inline-editable-ok-button-icon-color);