diff --git a/packages/calcite-components/src/components/action/action.e2e.ts b/packages/calcite-components/src/components/action/action.e2e.ts
index 787fc4e6e52..5168d01d307 100755
--- a/packages/calcite-components/src/components/action/action.e2e.ts
+++ b/packages/calcite-components/src/components/action/action.e2e.ts
@@ -1,5 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, disabled, hidden, renders, slots, t9n, defaults, themed } from "../../tests/commonTests";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
 describe("calcite-action", () => {
@@ -208,7 +210,7 @@ describe("calcite-action", () => {
 
   describe("theme", () => {
     describe("default", () => {
-      const tokens = {
+      const tokens: ComponentTestTokens = {
         "--calcite-action-background-color": {
           shadowSelector: `.${CSS.button}`,
           targetProp: "backgroundColor",
@@ -227,11 +229,11 @@ describe("calcite-action", () => {
         },
         "--calcite-action-indicator-color": {
           shadowSelector: `.${CSS.actionIndicator}::after`,
-          targetProp: "background-color",
+          targetProp: "backgroundColor",
         },
-      } as const;
+      };
       themed(
-        `<calcite-action
+        html`<calcite-action
           scale="s"
           indicator
           active
@@ -244,24 +246,24 @@ describe("calcite-action", () => {
       );
     });
     describe("loading", () => {
-      const tokens = {
+      const tokens: ComponentTestTokens = {
         "--calcite-action-loader-color": {
           shadowSelector: "calcite-loader",
           targetProp: "--calcite-loader-color-start",
         },
-      } as const;
+      };
 
       themed(
-        `<calcite-action
-            scale="s"
-            indicator
-            active
-            text="click-me"
-            label="hello world"
-            text-enabled
-            icon="configure-popup"
-            loading
-          ></calcite-action>`,
+        html`<calcite-action
+          scale="s"
+          indicator
+          active
+          text="click-me"
+          label="hello world"
+          text-enabled
+          icon="configure-popup"
+          loading
+        ></calcite-action>`,
         tokens,
       );
     });
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
index 9257f3c42aa..8d453c10346 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
+++ b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
@@ -1,7 +1,9 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, disabled, hidden, renders, slots } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
 import { SLOTS } from "./resources";
+import { CSS } from "./resources";
 
 describe("calcite-tree-item", () => {
   describe("renders", () => {
@@ -384,4 +386,172 @@ describe("calcite-tree-item", () => {
 
     expect(itemBounds.height).not.toBe(0);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-tree-item-chevron-color-active": {
+          selector: "calcite-tree-item",
+          shadowSelector: `.${CSS.chevron}`,
+          targetProp: "--calcite-icon-color",
+          state: { press: { attribute: "class", value: CSS.chevron } },
+        },
+        "--calcite-tree-item-chevron-color-hover": {
+          selector: "calcite-tree-item",
+          shadowSelector: `.${CSS.chevron}`,
+          targetProp: "--calcite-icon-color",
+          state: "hover",
+        },
+        "--calcite-tree-item-chevron-color": {
+          selector: "calcite-tree-item",
+          shadowSelector: `.${CSS.chevron}`,
+          targetProp: "--calcite-icon-color",
+        },
+        "--calcite-tree-item-icon-color": {
+          selector: "calcite-tree-item",
+          shadowSelector: `.${CSS.iconStart}`,
+          targetProp: "--calcite-icon-color",
+        },
+        "--calcite-tree-item-line-color": {
+          selector: "calcite-tree-item",
+          shadowSelector: `.${CSS.childrenContainer}::after`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-tree-item-text-color": {
+          selector: "calcite-tree-item",
+          targetProp: "color",
+        },
+      };
+      themed(
+        html`
+          <calcite-tree id="root" lines>
+            <calcite-tree-item icon-start="palette" expanded>
+              Parent
+              <calcite-tree slot="children">
+                <calcite-tree-item id="child">child</calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>
+        `,
+        tokens,
+      );
+    });
+    describe("selections", () => {
+      describe("ancestor", () => {
+        const tokens: ComponentTestTokens = {
+          "--calcite-tree-item-checkbox-background-color-checked": {
+            selector: "calcite-tree-item",
+            shadowSelector: "calcite-checkbox",
+            targetProp: "--calcite-checkbox-background-color-checked",
+          },
+          "--calcite-tree-item-checkbox-background-color": {
+            selector: "calcite-tree-item",
+            shadowSelector: "calcite-checkbox",
+            targetProp: "--calcite-checkbox-background-color",
+          },
+          "--calcite-tree-item-checkbox-shadow-checked": {
+            selector: "calcite-tree-item",
+            shadowSelector: "calcite-checkbox",
+            targetProp: "--calcite-checkbox-shadow-checked",
+          },
+          "--calcite-tree-item-checkbox-shadow-hover": {
+            selector: "calcite-tree-item",
+            shadowSelector: "calcite-checkbox",
+            targetProp: "--calcite-checkbox-shadow-hover",
+          },
+          "--calcite-tree-item-checkbox-shadow": {
+            selector: "calcite-tree-item",
+            shadowSelector: "calcite-checkbox",
+            targetProp: "--calcite-checkbox-shadow",
+          },
+          "--calcite-tree-item-selection-icon-color": {
+            selector: "calcite-tree-item",
+            shadowSelector: `calcite-checkbox`,
+            targetProp: "--calcite-checkbox-icon-color",
+          },
+        };
+        themed(
+          html`<calcite-tree selection-mode="ancestors">
+            <calcite-tree-item selected><span>Child 1</span></calcite-tree-item>
+            <calcite-tree-item expanded>
+              <span>Child 2</span>
+              <calcite-tree slot="children">
+                <calcite-tree-item selected><span>Grandchild 1</span></calcite-tree-item>
+                <calcite-tree-item><span>Grandchild 2</span></calcite-tree-item>
+                <calcite-tree-item expanded>
+                  <span>Grandchild 3</span>
+                  <calcite-tree slot="children">
+                    <calcite-tree-item><span>Great-Grandchild 1</span></calcite-tree-item>
+                    <calcite-tree-item><span>Great-Grandchild 2</span></calcite-tree-item>
+                    <calcite-tree-item><span>Great-Grandchild 3</span></calcite-tree-item>
+                  </calcite-tree>
+                </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>`,
+          tokens,
+        );
+      });
+      describe("multiple", () => {
+        const tokens: ComponentTestTokens = {
+          "--calcite-tree-item-selection-icon-color": {
+            selector: "calcite-tree-item[selected]",
+            shadowSelector: `.${CSS.checkmarkIcon}`,
+            targetProp: "--calcite-icon-color",
+          },
+        };
+        themed(
+          html`<calcite-tree selection-mode="multiple">
+            <calcite-tree-item selected><span>Child 1</span></calcite-tree-item>
+            <calcite-tree-item expanded>
+              <span>Child 2</span>
+              <calcite-tree slot="children">
+                <calcite-tree-item selected><span>Grandchild 1</span></calcite-tree-item>
+                <calcite-tree-item><span>Grandchild 2</span></calcite-tree-item>
+                <calcite-tree-item expanded>
+                  <span>Grandchild 3</span>
+                  <calcite-tree slot="children">
+                    <calcite-tree-item><span>Great-Grandchild 1</span></calcite-tree-item>
+                    <calcite-tree-item><span>Great-Grandchild 2</span></calcite-tree-item>
+                    <calcite-tree-item><span>Great-Grandchild 3</span></calcite-tree-item>
+                  </calcite-tree>
+                </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>`,
+          tokens,
+        );
+      });
+      describe("single", () => {
+        const tokens: ComponentTestTokens = {
+          "--calcite-tree-item-selection-icon-color": {
+            selector: "calcite-tree-item[selected]",
+            shadowSelector: `.${CSS.bulletPointIcon}`,
+            targetProp: "--calcite-icon-color",
+          },
+        };
+        themed(
+          html`<calcite-tree selection-mode="single">
+            <calcite-tree-item selected><span>Child 1</span></calcite-tree-item>
+            <calcite-tree-item expanded>
+              <span>Child 2</span>
+              <calcite-tree slot="children">
+                <calcite-tree-item><span>Grandchild 1</span></calcite-tree-item>
+                <calcite-tree-item><span>Grandchild 2</span></calcite-tree-item>
+                <calcite-tree-item>
+                  <span>Grandchild 3</span>
+                  <calcite-tree slot="children">
+                    <calcite-tree-item><span>Great-Grandchild 1</span></calcite-tree-item>
+                    <calcite-tree-item><span>Great-Grandchild 2</span></calcite-tree-item>
+                    <calcite-tree-item><span>Great-Grandchild 3</span></calcite-tree-item>
+                  </calcite-tree>
+                </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>`,
+          tokens,
+        );
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.scss b/packages/calcite-components/src/components/tree-item/tree-item.scss
index a94f0852959..da86f4ec903 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.scss
+++ b/packages/calcite-components/src/components/tree-item/tree-item.scss
@@ -5,7 +5,6 @@
  *
  * @prop --calcite-tree-item-checkbox-background-color-checked: defines the background-color of the sub-component when checked.
  * @prop --calcite-tree-item-checkbox-background-color: defines the background-color of the sub-component.
- * @prop --calcite-tree-item-checkbox-icon-color: defines the checkmark color of the sub-component.
  * @prop --calcite-tree-item-checkbox-shadow-checked: defines the shadow of the sub-component when checked.
  * @prop --calcite-tree-item-checkbox-shadow-hover: defines the shadow of the sub-component when hovered.
  * @prop --calcite-tree-item-checkbox-shadow: defines the shadow of the sub-component.
@@ -19,13 +18,13 @@
  */
 
 :host {
-  --calcite-internal-tree-item-text-color: var(--calcite-tree-item-text-color, var(--calcite-color-text-3));
+  --calcite-internal-tree-item-text-color: var(--calcite-color-text-3);
 
   @apply block
     cursor-pointer
     max-w-full;
 
-  color: var(--calcite-internal-tree-item-text-color);
+  color: var(--calcite-tree-item-text-color, var(--calcite-internal-tree-item-text-color));
 }
 
 .node-actions-container {
@@ -205,7 +204,7 @@
 }
 
 :host([selected]) {
-  --calcite-internal-tree-item-text-color: var(--calcite-tree-item-text-color, var(--calcite-color-text-1));
+  --calcite-internal-tree-item-text-color: var(--calcite-color-text-1);
 }
 
 :host([selected]) .node-container {
@@ -259,7 +258,6 @@
 
 .chevron {
   @apply transition-default
-    text-color-3
     relative
     self-center;
   flex: 0 0 auto;
@@ -284,7 +282,7 @@
 calcite-checkbox {
   --calcite-checkbox-background-color: var(--calcite-tree-item-checkbox-background-color);
   --calcite-checkbox-background-color-checked: var(--calcite-tree-item-checkbox-background-color-checked);
-  --calcite-checkbox-icon-color: var(--calcite-tree-item-checkbox-icon-color);
+  --calcite-checkbox-icon-color: var(--calcite-tree-item-selection-icon-color);
   --calcite-checkbox-shadow: var(--calcite-tree-item-checkbox-shadow);
   --calcite-checkbox-shadow-checked: var(--calcite-tree-item-checkbox-shadow-checked);
   --calcite-checkbox-shadow-hover: var(--calcite-tree-item-checkbox-shadow-hover);