diff --git a/packages/calcite-components/src/components/tip-group/tip-group.e2e.ts b/packages/calcite-components/src/components/tip-group/tip-group.e2e.ts
index cd24b3cec14..77373fa03d3 100644
--- a/packages/calcite-components/src/components/tip-group/tip-group.e2e.ts
+++ b/packages/calcite-components/src/components/tip-group/tip-group.e2e.ts
@@ -1,4 +1,4 @@
-import { accessible, hidden, renders } from "../../tests/commonTests";
+import { accessible, hidden, renders, themed } from "../../tests/commonTests";
 
 describe("calcite-tip-group", () => {
   describe("renders", () => {
@@ -12,4 +12,17 @@ describe("calcite-tip-group", () => {
   describe("accessible", () => {
     accessible(`calcite-tip-group`);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-tip-group", {
+        "--calcite-tip-group-background-color": {
+          targetProp: "backgroundColor",
+        },
+        "--calcite-tip-group-text-color": {
+          targetProp: "color",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/tip-manager/tip-manager.e2e.ts b/packages/calcite-components/src/components/tip-manager/tip-manager.e2e.ts
index 7f8293412c5..9a876134bdf 100644
--- a/packages/calcite-components/src/components/tip-manager/tip-manager.e2e.ts
+++ b/packages/calcite-components/src/components/tip-manager/tip-manager.e2e.ts
@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-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 { CSS, TEXT } from "./resources";
 
@@ -252,4 +252,89 @@ describe("calcite-tip-manager", () => {
   describe("translation support", () => {
     t9n("calcite-tip-manager");
   });
+
+  describe("theme", () => {
+    const testHTML = html` <calcite-tip-manager>
+      <calcite-tip id="one"><p>first</p></calcite-tip>
+      <calcite-tip id="two"><p>second</p></calcite-tip>
+    </calcite-tip-manager>`;
+
+    describe("default", () => {
+      themed(testHTML, {
+        "--calcite-tip-manager-background-color": {
+          targetProp: "backgroundColor",
+        },
+        "--calcite-tip-manager-border-color": {
+          shadowSelector: `.${CSS.header}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-tip-manager-close-background-color": {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "--calcite-action-background-color",
+        },
+        "--calcite-tip-manager-close-background-color-active": {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "--calcite-action-background-color",
+          state: { press: { attribute: "class", value: CSS.close } },
+        },
+        "--calcite-tip-manager-close-background-color-hover": {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "--calcite-action-background-color",
+          state: "hover",
+        },
+        "--calcite-tip-manager-close-icon-color": {
+          shadowSelector: `.${CSS.close} calcite-icon`,
+          targetProp: "--calcite-icon-color",
+        },
+        "--calcite-tip-manager-close-icon-color-active": {
+          shadowSelector: `.${CSS.close} calcite-icon`,
+          targetProp: "--calcite-icon-color",
+          state: { press: { attribute: "class", value: CSS.close } },
+        },
+        "--calcite-tip-manager-close-icon-color-hover": {
+          shadowSelector: `.${CSS.close} calcite-icon`,
+          targetProp: "--calcite-icon-color",
+          state: "hover",
+        },
+        "--calcite-tip-manager-close-text-color": {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "--calcite-action-text-color",
+        },
+        "--calcite-tip-manager-close-text-color-active": {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "--calcite-action-text-color",
+          state: { press: { attribute: "class", value: CSS.close } },
+        },
+        "--calcite-tip-manager-close-text-color-hover": {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "--calcite-action-text-color",
+          state: "hover",
+        },
+        "--calcite-tip-manager-content-height": {
+          shadowSelector: `.${CSS.tipContainer}`,
+          targetProp: "blockSize",
+        },
+        "--calcite-tip-manager-heading-text-color": {
+          shadowSelector: `.${CSS.heading}`,
+          targetProp: "color",
+        },
+        "--calcite-tip-manager-text-color": {
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("deprecated", () => {
+      themed(testHTML, {
+        "--calcite-tip-manager-height": {
+          shadowSelector: `.${CSS.tipContainer}`,
+          targetProp: "blockSize",
+        },
+        "--calcite-tip-max-width": {
+          selector: "calcite-tip",
+          targetProp: "maxInlineSize",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/tip-manager/tip-manager.scss b/packages/calcite-components/src/components/tip-manager/tip-manager.scss
index d1afe4efd05..2bcd8c121c5 100644
--- a/packages/calcite-components/src/components/tip-manager/tip-manager.scss
+++ b/packages/calcite-components/src/components/tip-manager/tip-manager.scss
@@ -5,22 +5,22 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-tip-manager-action-background-color-active: defines the background color of an action sub-component when active inside the component.
-* @prop --calcite-tip-manager-action-background-color-hover: defines the background color of an action sub-component when hovered or focused inside the component.
-* @prop --calcite-tip-manager-action-background-color: defines the background color of an action sub-component inside the component.
-* @prop --calcite-tip-manager-action-text-color-active: defines the text color of an action sub-component when active inside the component.
-* @prop --calcite-tip-manager-action-text-color-hover: defines the text color of an action sub-component when hovered or focused inside the component.
-* @prop --calcite-tip-manager-action-text-color: defines the text color of an action sub-component inside the component.
 * @prop --calcite-tip-manager-background-color: The background color of the component.
 * @prop --calcite-tip-manager-border-color: The border color of the component.
+* @prop --calcite-tip-manager-close-background-color-active: defines the background color of an action sub-component when active inside the component.
+* @prop --calcite-tip-manager-close-background-color-hover: defines the background color of an action sub-component when hovered or focused inside the component.
+* @prop --calcite-tip-manager-close-background-color: defines the background color of an action sub-component inside the component.
+* @prop --calcite-tip-manager-close-icon-color-active: The color of the component's close icon when active.
+* @prop --calcite-tip-manager-close-icon-color-hover: The color of the component's close icon when hovered.
+* @prop --calcite-tip-manager-close-icon-color: The color of the component's close icon.
+* @prop --calcite-tip-manager-close-text-color-active: defines the text color of an action sub-component when active inside the component.
+* @prop --calcite-tip-manager-close-text-color-hover: defines the text color of an action sub-component when hovered or focused inside the component.
+* @prop --calcite-tip-manager-close-text-color: defines the text color of an action sub-component inside the component.
+* @prop --calcite-tip-manager-content-height: The height of the content area.
 * @prop --calcite-tip-manager-heading-text-color: The heading text color of the component.
 * @prop --calcite-tip-manager-height: [Deprecated] use `--calcite-tip-manager-content-height` instead - Specifies the maximum height of a slotted `calcite-tip` within the component.
 * @prop --calcite-tip-manager-text-color: The text color of the component.
 * @prop --calcite-tip-max-width: [Deprecated] in favor of setting `max-width` on tips directly - Specifies the maximum width of a slotted `calcite-tip` within the component.
-* @prop --calcite-tip-manager-close-icon-color: The color of the component's close icon.
-* @prop --calcite-tip-manager-close-icon-color-hover: The color of the component's close icon when hovered.
-* @prop --calcite-tip-manager-close-icon-color-active: The color of the component's close icon when active.
-*
 */
 
 :host {
@@ -81,7 +81,7 @@
     p-4;
   animation-name: none;
   animation-duration: var(--calcite-animation-timing);
-  block-size: var(--calcite-tip-manager-content-height, 19vh);
+  block-size: var(--calcite-tip-manager-height, var(--calcite-tip-manager-content-height, 19vh));
   &:focus {
     @apply focus-outset;
   }
@@ -89,6 +89,7 @@
 
 ::slotted(calcite-tip) {
   @apply m-0 border-none;
+  max-inline-size: var(--calcite-tip-max-width);
 }
 
 .tip-container--advancing {
@@ -154,18 +155,18 @@
 }
 
 calcite-action {
-  --calcite-action-background-color: var(--calcite-tip-manager-action-background-color);
-  --calcite-action-text-color: var(--calcite-tip-manager-action-text-color);
+  --calcite-action-background-color: var(--calcite-tip-manager-close-background-color);
+  --calcite-action-text-color: var(--calcite-tip-manager-close-text-color);
 
   &:hover,
   &:focus {
-    --calcite-action-background-color: var(--calcite-tip-manager-action-background-color-hover);
-    --calcite-action-text-color: var(--calcite-tip-manager-action-text-color-hover);
+    --calcite-action-background-color: var(--calcite-tip-manager-close-background-color-hover);
+    --calcite-action-text-color: var(--calcite-tip-manager-close-text-color-hover);
   }
 
   &:active {
-    --calcite-action-background-color: var(--calcite-tip-manager-action-background-color-active);
-    --calcite-action-text-color: var(--calcite-tip-manager-action-text-color-active);
+    --calcite-action-background-color: var(--calcite-tip-manager-close-background-color-active);
+    --calcite-action-text-color: var(--calcite-tip-manager-close-text-color-active);
   }
 }
 
diff --git a/packages/calcite-components/src/components/tip/tip.e2e.ts b/packages/calcite-components/src/components/tip/tip.e2e.ts
index b5e34805793..f533547f54f 100644
--- a/packages/calcite-components/src/components/tip/tip.e2e.ts
+++ b/packages/calcite-components/src/components/tip/tip.e2e.ts
@@ -1,5 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, hidden, renders, defaults, slots, t9n } from "../../tests/commonTests";
+import { accessible, hidden, renders, defaults, slots, t9n, themed } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
 describe("calcite-tip", () => {
@@ -77,4 +78,47 @@ describe("calcite-tip", () => {
   describe("translation support", () => {
     t9n("calcite-tip");
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(html`<calcite-tip heading="heading"></calcite-tip>`, {
+        "--calcite-tip-background-color": {
+          targetProp: "backgroundColor",
+        },
+        "--calcite-tip-text-color": {
+          targetProp: "color",
+        },
+        "--calcite-tip-border-color": {
+          targetProp: "borderColor",
+        },
+        "--calcite-tip-heading-text-color": {
+          shadowSelector: `.${CSS.heading}`,
+          targetProp: "color",
+        },
+        "--calcite-tip-close-background-color": {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "--calcite-action-background-color",
+        },
+        "--calcite-tip-close-background-color-hover": {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "--calcite-action-background-color",
+          state: "hover",
+        },
+        "--calcite-tip-close-background-color-active": {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "--calcite-action-background-color",
+          state: { press: { attribute: "class", value: CSS.close } },
+        },
+        "--calcite-tip-close-text-color": {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "--calcite-action-text-color",
+        },
+        "--calcite-tip-close-text-color-hover": {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "--calcite-action-text-color",
+          state: "hover",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/tip/tip.scss b/packages/calcite-components/src/components/tip/tip.scss
index 9667b074086..b77a5d30d8a 100644
--- a/packages/calcite-components/src/components/tip/tip.scss
+++ b/packages/calcite-components/src/components/tip/tip.scss
@@ -3,17 +3,15 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-tip-action-background-color: defines the background color of an action sub-component inside the component.
- * @prop --calcite-tip-action-text-color: defines the text color of an action sub-component inside the component.
- * @prop --calcite-tip-action-background-color-hover: defines the background color of an action sub-component when hovered or focused inside the component.
- * @prop --calcite-tip-action-text-color-hover: defines the text color of an action sub-component when hovered or focused inside the component.
- * @prop --calcite-tip-action-background-color-active: defines the background color of an action sub-component when active inside the component.
  * @prop --calcite-tip-background-color: The background color of the component.
  * @prop --calcite-tip-border-color: The border color of the component.
+ * @prop --calcite-tip-close-background-color-active: defines the background color of an action sub-component when active inside the component.
+ * @prop --calcite-tip-close-background-color-hover: defines the background color of an action sub-component when hovered or focused inside the component.
+ * @prop --calcite-tip-close-background-color: defines the background color of an action sub-component inside the component.
+ * @prop --calcite-tip-close-text-color-hover: defines the text color of an action sub-component when hovered or focused inside the component.
+ * @prop --calcite-tip-close-text-color: defines the text color of an action sub-component inside the component.
  * @prop --calcite-tip-heading-text-color: The heading text color of the component.
- * @prop --calcite-tip-slotted-link-text-color: The text color of the slotted link.
  * @prop --calcite-tip-text-color: The text color of the component.
- * 
  */
 
 @include header();
@@ -88,7 +86,7 @@
 ::slotted(a) {
   @apply focus-base;
 
-  color: var(--calcite-tip-slotted-link-text-color, var(--calcite-color-brand));
+  color: var(--calcite-color-brand);
 }
 
 ::slotted(a:focus) {
@@ -107,18 +105,18 @@
 }
 
 calcite-action {
-  --calcite-action-background-color: var(--calcite-tip-action-background-color);
-  --calcite-action-text-color: var(--calcite-tip-action-text-color);
+  --calcite-action-background-color: var(--calcite-tip-close-background-color);
+  --calcite-action-text-color: var(--calcite-tip-close-text-color);
 
   &:hover,
   &:focus {
-    --calcite-action-background-color: var(--calcite-tip-action-background-color-hover);
-    --calcite-action-text-color: var(--calcite-tip-action-text-color-hover);
+    --calcite-action-background-color: var(--calcite-tip-close-background-color-hover);
+    --calcite-action-text-color: var(--calcite-tip-close-text-color-hover);
   }
 
   &:active {
-    --calcite-action-background-color: var(--calcite-tip-action-background-color-active);
-    --calcite-action-text-color: var(--calcite-tip-action-text-color-active);
+    --calcite-action-background-color: var(--calcite-tip-close-background-color-active);
+    --calcite-action-text-color: var(--calcite-tip-close-text-color-active);
   }
 }