diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts
index b732aa8aae5..5aa148117ff 100644
--- a/packages/calcite-components/src/components/button/button.e2e.ts
+++ b/packages/calcite-components/src/components/button/button.e2e.ts
@@ -1,7 +1,7 @@
 // @ts-strict-ignore
 import { newE2EPage, E2EElement } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { accessible, defaults, disabled, hidden, HYDRATED_ATTR, labelable, t9n } from "../../tests/commonTests";
+import { accessible, defaults, disabled, hidden, HYDRATED_ATTR, labelable, t9n, themed } from "../../tests/commonTests";
 import { GlobalTestProps } from "../../tests/utils";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
@@ -713,4 +713,59 @@ describe("calcite-button", () => {
     expect(elementHost).toEqualAttribute("width", "full");
     expect(await elementAsButton.getComputedStyle()["width"]).toEqual(await elementHost.getComputedStyle()["width"]);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-button", {
+        "--calcite-button-background-color": {
+          shadowSelector: "button",
+          targetProp: "backgroundColor",
+        },
+        "--calcite-button-corner-radius": {
+          shadowSelector: "button",
+          targetProp: "borderRadius",
+        },
+        "--calcite-button-text-color": {
+          shadowSelector: "button",
+          targetProp: "color",
+        },
+        "--calcite-button-border-color": {
+          shadowSelector: "button",
+          targetProp: "borderColor",
+        },
+      });
+    });
+    describe("loading", () => {
+      themed(html`<calcite-button loading></calcite-button>`, {
+        "--calcite-button-background-color": {
+          shadowSelector: "button",
+          targetProp: "backgroundColor",
+        },
+        "--calcite-button-corner-radius": {
+          shadowSelector: "button",
+          targetProp: "borderRadius",
+        },
+        "--calcite-button-text-color": {
+          shadowSelector: "button",
+          targetProp: "color",
+        },
+        "--calcite-button-loader-color": {
+          shadowSelector: `.${CSS.loadingIn}`,
+          targetProp: "color",
+        },
+        "--calcite-button-border-color": {
+          shadowSelector: "button",
+          targetProp: "borderColor",
+        },
+      });
+    });
+    describe("outline", () => {
+      themed(html`<calcite-button appearance="outline"></calcite-button>`, {
+        "--calcite-button-border-color": {
+          shadowSelector: "button",
+          targetProp: "borderColor",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
index 5a01a0740b2..0597fd4d834 100644
--- a/packages/calcite-components/src/components/button/button.scss
+++ b/packages/calcite-components/src/components/button/button.scss
@@ -1,64 +1,89 @@
+/**
+ * CSS Custom Properties
+ *
+ * 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-corner-radius: Specifies the component's corner radius.
+ * @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.
+ */
+
 :host {
   @apply inline-block w-auto align-middle;
-}
 
-// fab variants
-:host([round]) {
-  border-radius: 50px;
-  & a,
-  & button {
-    border-radius: 50px;
-  }
-}
-
-// focus styles
-:host button,
-:host a {
-  @apply focus-base;
-  &:focus {
-    @apply focus-outset;
-  }
-}
-// button base
-:host button,
-:host a {
-  --calcite-button-content-margin-internal: theme("margin.2");
-  --calcite-button-padding-x-internal: 7px;
-  --calcite-button-padding-y-internal: 3px;
-  padding-block: var(--calcite-button-padding-y-internal);
-  padding-inline: var(--calcite-button-padding-x-internal);
-  @apply font-inherit
-    relative
+  border-radius: var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, 0));
+
+  a,
+  button {
+    --calcite-internal-button-content-margin: theme("margin.2");
+    --calcite-internal-button-padding-x: 7px;
+    --calcite-internal-button-padding-y-internal: 3px;
+
+    @apply appearance-none
+    border-none
     box-border
+    cursor-pointer
     flex
+    focus-base
+    font-inherit
+    font-normal
     h-full
-    w-full
-    cursor-pointer
-    select-none
-    appearance-none
     items-center
     justify-center
-    rounded-none
-    border-none
+    no-underline
+    relative
+    select-none
     text-center
-    font-normal
-    no-underline;
-  // include transition from focus
-  transition:
-    color var(--calcite-animation-timing) ease-in-out,
-    background-color var(--calcite-animation-timing) ease-in-out,
-    box-shadow var(--calcite-animation-timing) ease-in-out,
-    outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
-  &:hover {
-    @apply no-underline;
-  }
-  & span {
-    @apply truncate;
+    w-full;
+
+    background-color: var(
+      --calcite-button-background-color,
+      var(--calcite-internal-button-background-color, var(--calcite-color-transparent))
+    );
+    border-color: var(
+      --calcite-button-border-color,
+      var(--calcite-internal-button-border-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-inline: var(--calcite-internal-button-padding-x);
+
+    // include transition from focus
+    transition:
+      color var(--calcite-animation-timing) ease-in-out,
+      background-color var(--calcite-animation-timing) ease-in-out,
+      box-shadow var(--calcite-animation-timing) ease-in-out,
+      outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
+
+    &:hover {
+      @apply no-underline;
+    }
+
+    &:focus {
+      @apply focus-outset;
+    }
+
+    span {
+      @apply truncate;
+    }
+
+    calcite-loader {
+      color: var(--calcite-button-loader-color, var(--calcite-internal-button-loader-color, currentColor));
+    }
   }
 }
 
+// fab variants
+:host([round]) {
+  --calcite-internal-button-corner-radius: 50px;
+}
+
 .content {
-  margin-inline: var(--calcite-button-content-margin-internal);
+  margin-inline: var(--calcite-internal-button-content-margin);
 }
 
 .icon-start-empty {
@@ -75,13 +100,13 @@
 :host([scale="m"]) {
   button,
   a {
-    --calcite-button-content-margin-internal: theme("margin.3");
+    --calcite-internal-button-content-margin: theme("margin.3");
   }
 }
 :host([scale="l"]) {
   button,
   a {
-    --calcite-button-content-margin-internal: theme("margin.4");
+    --calcite-internal-button-content-margin: theme("margin.4");
   }
 }
 
@@ -147,7 +172,7 @@
   a:not(.content--slotted),
   button:not(.content--slotted) {
     .icon--start + .icon--end {
-      margin-inline-start: var(--calcite-button-content-margin-internal);
+      margin-inline-start: var(--calcite-internal-button-content-margin);
     }
   }
 }
@@ -199,7 +224,7 @@
   button.content--slotted,
   a.content--slotted {
     .calcite-button--loader calcite-loader {
-      margin-inline-end: var(--calcite-button-content-margin-internal);
+      margin-inline-end: var(--calcite-internal-button-content-margin);
     }
   }
   // hide icons when loading with no text
@@ -216,271 +241,297 @@
 :host([appearance]) {
   button,
   a {
-    @apply border-color-transparent
-      border
-      border-solid;
+    --calcite-internal-button-border-color: var(--calcite-color-transparent);
+
+    @apply border-solid;
+
+    border-width: var(--calcite-button-border-size, 1px);
   }
 }
 
 :host([kind="brand"]) {
   button,
   a {
-    @apply text-color-inverse bg-brand;
+    --calcite-internal-button-text-color: var(--calcite-color-text-inverse);
+    --calcite-internal-button-background-color: var(--calcite-color-brand);
+
     &:hover,
     &:focus {
-      @apply bg-brand-hover;
+      --calcite-internal-button-background-color: var(--calcite-color-brand-hover);
     }
     &:active {
-      @apply bg-brand-press;
-    }
-    calcite-loader {
-      @apply text-color-inverse;
+      --calcite-internal-button-background-color: var(--calcite-color-brand-press);
     }
   }
 }
 :host([kind="danger"]) {
   button,
   a {
-    @apply text-color-inverse bg-danger;
+    --calcite-internal-button-text-color: var(--calcite-color-text-inverse);
+    --calcite-internal-button-background-color: var(--calcite-color-status-danger);
+
     &:hover,
     &:focus {
-      @apply bg-danger-hover;
+      --calcite-internal-button-background-color: var(--calcite-color-status-danger-hover);
     }
     &:active {
-      @apply bg-danger-press;
-    }
-    calcite-loader {
-      @apply text-color-inverse;
+      --calcite-internal-button-background-color: var(--calcite-color-status-danger-press);
     }
   }
 }
 :host([kind="neutral"]) {
   button,
   a {
-    @apply text-color-1 bg-foreground-3;
+    --calcite-internal-button-text-color: var(--calcite-color-text-1);
+    --calcite-internal-button-background-color: var(--calcite-color-foreground-3);
     &:hover,
     &:focus {
-      @apply bg-foreground-2;
+      --calcite-internal-button-background-color: var(--calcite-color-foreground-2);
     }
     &:active {
-      @apply bg-foreground-1;
-    }
-    calcite-loader {
-      @apply text-color-1;
+      --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
     }
   }
 }
 :host([kind="inverse"]) {
   button,
   a {
-    @apply text-color-inverse;
-    background-color: var(--calcite-color-inverse);
+    --calcite-internal-button-text-color: var(--calcite-color-text-inverse);
+    --calcite-internal-button-background-color: var(--calcite-color-inverse);
     &:hover,
     &:focus {
-      background-color: var(--calcite-color-inverse-hover);
+      --calcite-internal-button-background-color: var(--calcite-color-inverse-hover);
     }
     &:active {
-      background-color: var(--calcite-color-inverse-press);
-    }
-    calcite-loader {
-      @apply text-color-inverse;
+      --calcite-internal-button-background-color: var(--calcite-color-inverse-press);
     }
   }
 }
 // outline
+:host([appearance="outline-fill"]),
+:host([appearance="outline"]) {
+  a,
+  button {
+    box-shadow: inset 0 0 0 1px
+      var(--calcite-button-shadow-color, var(--calcite-internal-button-shadow-color, transparent));
+
+    &:hover {
+      box-shadow: inset 0 0 0 1px
+        var(
+          --calcite-button-shadow-color,
+          var(--calcite-internal-button-shadow-color, var(--calcite-color-foreground-3))
+        );
+    }
+    &:focus,
+    &:active {
+      box-shadow: inset 0 0 0 2px
+        var(
+          --calcite-button-shadow-color,
+          var(--calcite-internal-button-shadow-color, var(--calcite-color-foreground-3))
+        );
+    }
+  }
+}
+
 :host([appearance="outline-fill"]) {
   button,
   a {
-    @apply bg-foreground-1 border border-solid;
-    box-shadow: inset 0 0 0 1px transparent;
+    --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
+    @apply border-solid;
+    border-width: var(--calcite-button-border-size, 1px);
   }
 }
 :host([appearance="outline-fill"][kind="brand"]) {
   button,
   a {
-    @apply border-color-brand bg-foreground-1;
-    color: theme("colors.brand");
+    --calcite-internal-button-border-color: var(--calcite-color-brand);
+    --calcite-internal-button-text-color: theme("colors.brand");
+    --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
+
     &:hover {
-      @apply border-color-brand-hover;
-      color: theme("colors.brand-hover");
-      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);
+      --calcite-internal-button-border-color: var(--calcite-color-brand-hover);
+      --calcite-internal-button-text-color: theme("colors.brand-hover");
+      --calcite-internal-button-shadow-color: var(--calcite-color-brand-hover);
     }
     &:focus {
-      @apply border-color-brand;
-      color: theme("colors.brand");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
+      --calcite-internal-button-border-color: var(--calcite-color-brand);
+      --calcite-internal-button-text-color: theme("colors.brand");
+      --calcite-internal-button-shadow-color: var(--calcite-color-brand);
     }
     &:active {
-      @apply border-color-brand-press;
-      color: theme("colors.brand-press");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);
+      --calcite-internal-button-border-color: var(--calcite-color-brand-press);
+      --calcite-internal-button-text-color: theme("colors.brand-press");
+      --calcite-internal-button-shadow-color: var(--calcite-color-brand-press);
     }
     calcite-loader {
-      color: theme("colors.brand");
+      --calcite-internal-button-loader-color: theme("colors.brand");
     }
   }
 }
 :host([appearance="outline-fill"][kind="danger"]) {
   button,
   a {
-    @apply border-color-danger bg-foreground-1;
-    color: theme("colors.danger");
+    --calcite-internal-button-border-color: var(--calcite-color-status-danger);
+    --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
+    --calcite-internal-button-text-color: theme("colors.danger");
+
     &:hover {
-      @apply border-color-danger-hover;
-      color: theme("colors.danger-hover");
-      box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);
+      --calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);
+      --calcite-internal-button-text-color: theme("colors.danger-hover");
+      --calcite-internal-button-shadow-color: var(--calcite-color-status-danger-hover);
     }
     &:focus {
-      @apply border-color-danger;
-      color: theme("colors.danger");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);
+      --calcite-internal-button-border-color: var(--calcite-color-status-danger);
+      --calcite-internal-button-text-color: theme("colors.danger");
+      --calcite-internal-button-shadow-color: var(--calcite-color-status-danger);
     }
     &:active {
-      @apply border-color-danger-press;
-      color: theme("colors.danger-press");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);
+      --calcite-internal-button-border-color: var(--calcite-color-status-danger-press);
+      --calcite-internal-button-text-color: theme("colors.danger-press");
+      --calcite-internal-button-shadow-color: var(--calcite-color-status-danger-press);
     }
     calcite-loader {
-      color: theme("colors.danger");
+      --calcite-internal-button-loader-color: theme("colors.danger");
     }
   }
 }
 :host([appearance="outline-fill"][kind="neutral"]) {
   button,
   a {
-    @apply text-color-1 bg-foreground-1;
-    border-color: theme("borderColor.color.1");
+    --calcite-internal-button-border-color: theme("borderColor.color.1");
+    --calcite-internal-button-text-color: var(--calcite-color-text-1);
+    --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
+
     &:hover {
-      box-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);
+      --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
     }
     &:focus {
-      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
+      --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
     }
     &:active {
-      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
-    }
-    calcite-loader {
-      @apply text-color-1;
+      --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
     }
   }
 }
 :host([appearance="outline-fill"][kind="inverse"]) {
   button,
   a {
-    @apply text-color-1 bg-foreground-1;
-    border-color: var(--calcite-color-inverse);
+    --calcite-internal-button-text-color: var(--calcite-color-text-1);
+    --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
+    --calcite-internal-button-border-color: var(--calcite-color-inverse);
+
     &:hover {
-      border-color: var(--calcite-color-inverse-hover);
-      box-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover);
+      --calcite-internal-button-border-color: var(--calcite-color-inverse-hover);
+      --calcite-internal-button-shadow-color: var(--calcite-color-inverse-hover);
     }
     &:focus {
-      border-color: var(--calcite-color-inverse);
-      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse);
+      --calcite-internal-button-border-color: var(--calcite-color-inverse);
+      --calcite-internal-button-shadow-color: var(--calcite-color-inverse);
     }
     &:active {
-      border-color: var(--calcite-color-inverse-press);
-      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press);
-    }
-    calcite-loader {
-      @apply text-color-1;
+      --calcite-internal-button-border-color: var(--calcite-color-inverse-press);
+      --calcite-internal-button-shadow-color: var(--calcite-color-inverse-press);
     }
   }
 }
 :host([appearance="outline"]) {
   button,
   a {
-    @apply border border-solid bg-transparent;
-    box-shadow: inset 0 0 0 1px transparent;
+    --calcite-internal-button-background-color: var(--calcite-color-transparent);
+
+    @apply border-solid;
+    border-width: var(--calcite-button-border-size, 1px);
   }
 }
 :host([appearance="outline"][kind="brand"]) {
   button,
   a {
-    @apply border-color-brand bg-transparent;
-    color: theme("colors.brand");
+    --calcite-internal-button-border-color: var(--calcite-color-brand);
+    --calcite-internal-button-text-color: theme("colors.brand");
+    --calcite-internal-button-background-color: var(--calcite-color-transparent);
+
     &:hover {
-      @apply border-color-brand-hover;
-      color: theme("colors.brand-hover");
-      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);
+      --calcite-internal-button-border-color: var(--calcite-color-brand-hover);
+      --calcite-internal-button-text-color: theme("colors.brand-hover");
+      --calcite-internal-button-shadow-color: var(--calcite-color-brand-hover);
     }
     &:focus {
-      @apply border-color-brand;
-      color: theme("colors.brand");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
+      --calcite-internal-button-border-color: var(--calcite-color-brand);
+      --calcite-internal-button-text-color: theme("colors.brand");
+      --calcite-internal-button-shadow-color: var(--calcite-color-brand);
     }
     &:active {
-      @apply border-color-brand-press;
-      color: theme("colors.brand-press");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);
+      --calcite-internal-button-border-color: var(--calcite-color-brand-press);
+      --calcite-internal-button-text-color: theme("colors.brand-press");
+      --calcite-internal-button-shadow-color: var(--calcite-color-brand-press);
     }
     calcite-loader {
-      color: theme("colors.brand");
+      --calcite-internal-button-loader-color: theme("colors.brand");
     }
   }
 }
 :host([appearance="outline"][kind="danger"]) {
   button,
   a {
-    @apply border-color-danger bg-transparent;
-    color: theme("colors.danger");
+    --calcite-internal-button-border-color: var(--calcite-color-status-danger);
+    --calcite-internal-button-text-color: theme("colors.danger");
+    --calcite-internal-button-background-color: var(--calcite-color-transparent);
+
     &:hover {
-      @apply border-color-danger-hover;
-      color: theme("colors.danger-hover");
-      box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);
+      --calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);
+      --calcite-internal-button-text-color: theme("colors.danger-hover");
+      --calcite-internal-button-shadow-color: var(--calcite-color-status-danger-hover);
     }
     &:focus {
-      @apply border-color-danger;
-      color: theme("colors.danger");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);
+      --calcite-internal-button-border-color: var(--calcite-color-status-danger);
+      --calcite-internal-button-text-color: theme("colors.danger");
+      --calcite-internal-button-shadow-color: var(--calcite-color-status-danger);
     }
     &:active {
-      @apply border-color-danger-press;
-      color: theme("colors.danger-press");
-      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);
+      --calcite-internal-button-border-color: var(--calcite-color-status-danger-press);
+      --calcite-internal-button-text-color: theme("colors.danger-press");
+      --calcite-internal-button-shadow-color: var(--calcite-color-status-danger-press);
     }
     calcite-loader {
-      color: theme("colors.danger");
+      --calcite-internal-button-loader-color: theme("colors.danger");
     }
   }
 }
 :host([appearance="outline"][kind="neutral"]) {
   button,
   a {
-    @apply text-color-1  bg-transparent;
-    border-color: theme("borderColor.color.1");
+    --calcite-internal-button-text-color: var(--calcite-color-text-1);
+    --calcite-internal-button-background-color: var(--calcite-color-transparent);
+    --calcite-internal-button-border-color: theme("borderColor.color.1");
+
     &:hover {
-      box-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);
+      --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
     }
     &:focus {
-      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
+      --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
     }
     &:active {
-      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);
-    }
-    calcite-loader {
-      @apply text-color-1;
+      --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
     }
   }
 }
 :host([appearance="outline"][kind="inverse"]) {
   button,
   a {
-    @apply text-color-1  bg-transparent;
-    border-color: var(--calcite-color-inverse);
+    --calcite-internal-button-text-color: var(--calcite-color-text-1);
+    --calcite-internal-button-background-color: var(--calcite-color-transparent);
+    --calcite-internal-button-border-color: var(--calcite-color-inverse);
     &:hover {
-      border-color: var(--calcite-color-inverse-hover);
-      box-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover);
+      --calcite-internal-button-border-color: var(--calcite-color-inverse-hover);
+      --calcite-internal-button-shadow-color: var(--calcite-color-inverse-hover);
     }
     &:focus {
-      border-color: var(--calcite-color-inverse);
-      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse);
+      --calcite-internal-button-border-color: var(--calcite-color-inverse);
+      --calcite-internal-button-shadow-color: var(--calcite-color-inverse);
     }
     &:active {
-      border-color: var(--calcite-color-inverse-press);
-      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press);
-    }
-    calcite-loader {
-      @apply text-color-1;
+      --calcite-internal-button-border-color: var(--calcite-color-inverse-press);
+      --calcite-internal-button-shadow-color: var(--calcite-color-inverse-press);
     }
   }
 }
@@ -501,7 +552,7 @@
 :host([appearance="transparent"]:not(.enable-editing-button)) {
   button,
   a {
-    @apply bg-transparent;
+    background-color: var(--calcite-color-transparent);
     &:hover,
     &:focus {
       background-color: var(--calcite-color-transparent-hover);
@@ -514,18 +565,18 @@
 :host([appearance="transparent"][kind="brand"]) {
   button,
   a {
-    color: theme("colors.brand");
+    --calcite-internal-button-text-color: theme("colors.brand");
     &:hover {
-      color: theme("colors.brand-hover");
+      --calcite-internal-button-text-color: theme("colors.brand-hover");
     }
     &:focus {
-      color: theme("colors.brand");
+      --calcite-internal-button-text-color: theme("colors.brand");
     }
     &:active {
-      color: theme("colors.brand-press");
+      --calcite-internal-button-text-color: theme("colors.brand-press");
     }
     calcite-loader {
-      color: theme("colors.brand");
+      --calcite-internal-button-loader-color: theme("colors.brand");
     }
   }
 }
@@ -533,18 +584,18 @@
 :host([appearance="transparent"][kind="danger"]) {
   button,
   a {
-    color: theme("colors.danger");
+    --calcite-internal-button-text-color: theme("colors.danger");
     &:hover {
-      color: theme("colors.danger-hover");
+      --calcite-internal-button-text-color: theme("colors.danger-hover");
     }
     &:focus {
-      color: theme("colors.danger");
+      --calcite-internal-button-text-color: theme("colors.danger");
     }
     &:active {
-      color: theme("colors.danger-press");
+      --calcite-internal-button-text-color: theme("colors.danger-press");
     }
     calcite-loader {
-      color: theme("colors.danger");
+      --calcite-internal-button-loader-color: theme("colors.danger");
     }
   }
 }
@@ -553,12 +604,13 @@
   button,
   a,
   calcite-loader {
-    @apply text-color-1;
+    --calcite-internal-button-text-color: var(--calcite-color-text-1);
   }
 }
 
 :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
@@ -567,11 +619,11 @@
     border-block-style: solid;
 
     &:not(.content--slotted) {
-      --calcite-button-padding-y-internal: 0;
+      --calcite-internal-button-padding-y-internal: 0;
     }
 
     &:hover {
-      @apply text-color-1;
+      --calcite-internal-button-text-color: var(--calcite-color-text-1);
     }
   }
 }
@@ -596,7 +648,7 @@
   button,
   a,
   calcite-loader {
-    @apply text-color-inverse;
+    --calcite-internal-button-text-color: var(--calcite-color-text-inverse);
   }
 }
 
@@ -609,67 +661,67 @@
 // accommodate for transparent buttons not having borders
 :host([scale="s"][appearance="transparent"]) button.content--slotted,
 :host([scale="s"][appearance="transparent"]) a.content--slotted {
-  --calcite-button-padding-x-internal: theme("padding.2");
+  --calcite-internal-button-padding-x: theme("padding.2");
 }
 
 :host([scale="s"]) button,
 :host([scale="s"]) a {
-  --calcite-button-padding-y-internal: 3px;
+  --calcite-internal-button-padding-y-internal: 3px;
 }
 
 :host([scale="m"]) button.content--slotted,
 :host([scale="m"]) a.content--slotted {
-  --calcite-button-padding-x-internal: 11px;
+  --calcite-internal-button-padding-x: 11px;
   @apply text-n1h;
 }
 
 :host([scale="m"]) button,
 :host([scale="m"]) a {
-  --calcite-button-padding-y-internal: 7px;
+  --calcite-internal-button-padding-y-internal: 7px;
 }
 // accommodate for transparent buttons not having borders
 :host([scale="m"][appearance="transparent"]) button.content--slotted,
 :host([scale="m"][appearance="transparent"]) a.content--slotted {
-  --calcite-button-padding-x-internal: theme("padding.3");
+  --calcite-internal-button-padding-x: theme("padding.3");
 }
 
 :host([scale="l"]) button.content--slotted,
 :host([scale="l"]) a.content--slotted {
-  --calcite-button-padding-x-internal: 15px;
+  --calcite-internal-button-padding-x: 15px;
   @apply text-0h;
 }
 
 :host([scale="l"]) {
   .button-padding {
-    --calcite-button-padding-x-internal: theme("padding.4");
-    --calcite-button-padding-y-internal: 11px;
+    --calcite-internal-button-padding-x: theme("padding.4");
+    --calcite-internal-button-padding-y-internal: 11px;
   }
   //shrink the padding if an icon is present to preserve the height
   .button-padding--shrunk {
-    --calcite-button-padding-y-internal: 9px;
+    --calcite-internal-button-padding-y-internal: 9px;
   }
 }
 
 // generate fab scales (scenario: 1 icon, ie., should be square)
 :host([scale="s"]) button:not(.content--slotted),
 :host([scale="s"]) a:not(.content--slotted) {
-  --calcite-button-padding-x-internal: theme("padding[0.5]");
-  --calcite-button-padding-y-internal: 3px;
+  --calcite-internal-button-padding-x: theme("padding[0.5]");
+  --calcite-internal-button-padding-y-internal: 3px;
   @apply text-0h w-6;
   min-block-size: theme("height.6");
 }
 
 :host([scale="m"]) button:not(.content--slotted),
 :host([scale="m"]) a:not(.content--slotted) {
-  --calcite-button-padding-x-internal: theme("padding[0.5]");
-  --calcite-button-padding-y-internal: 7px;
+  --calcite-internal-button-padding-x: theme("padding[0.5]");
+  --calcite-internal-button-padding-y-internal: 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-button-padding-x-internal: theme("padding[0.5]");
-  --calcite-button-padding-y-internal: 9px;
+  --calcite-internal-button-padding-x: theme("padding[0.5]");
+  --calcite-internal-button-padding-y-internal: 9px;
   @apply text-0h w-11;
   min-block-size: theme("height.11");
 }
@@ -686,33 +738,33 @@
 // 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-button-padding-y-internal: theme("padding[2.5]");
+  --calcite-internal-button-padding-y-internal: theme("padding[2.5]");
 }
 
 // generate fab scales (scenario: 2 icons, ie., should not be square)
 :host([scale="s"][icon-start][icon-end]) button:not(.content--slotted),
 :host([scale="s"][icon-start][icon-end]) a:not(.content--slotted) {
-  --calcite-button-padding-x-internal: 23px;
+  --calcite-internal-button-padding-x: 23px;
   @apply text-0h h-6;
 }
 // accommodate for transparent buttons not having borders
 :host([scale="s"][icon-start][icon-end][appearance="transparent"]) button:not(.content--slotted),
 :host([scale="s"][icon-start][icon-end][appearance="transparent"]) a:not(.content--slotted) {
-  --calcite-button-padding-x-internal: theme("padding.6");
+  --calcite-internal-button-padding-x: theme("padding.6");
 }
 :host([scale="m"][icon-start][icon-end]) button:not(.content--slotted),
 :host([scale="m"][icon-start][icon-end]) a:not(.content--slotted) {
-  --calcite-button-padding-x-internal: theme("padding.8");
+  --calcite-internal-button-padding-x: theme("padding.8");
   @apply text-0h h-8;
 }
 // accommodate for transparent buttons not having borders
 :host([scale="m"][icon-start][icon-end][appearance="transparent"]) button:not(.content--slotted),
 :host([scale="m"][icon-start][icon-end][appearance="transparent"]) a:not(.content--slotted) {
-  --calcite-button-padding-x-internal: 33px;
+  --calcite-internal-button-padding-x: 33px;
 }
 :host([scale="l"][icon-start][icon-end]) button:not(.content--slotted),
 :host([scale="l"][icon-start][icon-end]) a:not(.content--slotted) {
-  --calcite-button-padding-x-internal: 43px;
+  --calcite-internal-button-padding-x: 43px;
   @apply text-0h h-11;
   // add space between when only 2 icons
   .icon--start + .icon--end {
@@ -722,7 +774,7 @@
 // accommodate for transparent buttons not having borders
 :host([scale="l"][icon-start][icon-end][appearance="transparent"]) button:not(.content--slotted),
 :host([scale="l"][icon-start][icon-end][appearance="transparent"]) a:not(.content--slotted) {
-  --calcite-button-padding-x-internal: theme("padding.11");
+  --calcite-internal-button-padding-x: theme("padding.11");
 }
 
 @include base-component();