diff --git a/src/components/tree-item/tree-item.styles.ts b/src/components/tree-item/tree-item.styles.ts
index 0c64e73fc..71ee23a41 100644
--- a/src/components/tree-item/tree-item.styles.ts
+++ b/src/components/tree-item/tree-item.styles.ts
@@ -2,10 +2,14 @@ import { css } from 'lit';
 
 export default css`
   :host {
+    --selection-background-color: var(--wa-color-neutral-fill-quiet);
+    --selection-indicator-color: var(--wa-color-brand-fill-loud);
+    --expand-button-color: var(--wa-color-text-quiet);
     --show-duration: 200ms;
     --hide-duration: 200ms;
 
     display: block;
+    color: var(--wa-color-text-normal);
     outline: 0;
     z-index: 0;
   }
@@ -23,7 +27,6 @@ export default css`
     display: flex;
     align-items: stretch;
     flex-direction: column;
-    color: var(--wa-color-text-normal);
     cursor: default;
     user-select: none;
     -webkit-user-select: none;
@@ -56,7 +59,8 @@ export default css`
     align-items: center;
     justify-content: center;
     box-sizing: content-box;
-    color: var(--wa-color-neutral-fill-loud);
+    color: var(--expand-button-color);
+    font-size: 0.875rem;
     padding: var(--wa-space-xs);
     width: 1rem;
     height: 1rem;
@@ -108,12 +112,12 @@ export default css`
   }
 
   :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
-    background-color: var(--wa-color-neutral-fill-quiet);
-    border-inline-start-color: var(--wa-color-brand-fill-loud);
+    background-color: var(--selection-background-color);
+    border-inline-start-color: var(--selection-indicator-color);
   }
 
   :host(:not([aria-disabled='true'])) .tree-item__expand-button {
-    color: var(--wa-color-neutral-fill-loud);
+    color: var(--expand-button-color);
   }
 
   .tree-item__label {
diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts
index 3182253e4..6c4e751b1 100644
--- a/src/components/tree-item/tree-item.ts
+++ b/src/components/tree-item/tree-item.ts
@@ -64,6 +64,9 @@ import type { CSSResultGroup, PropertyValueMap } from 'lit';
  * @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.
  * @csspart checkbox__label - The checkbox's exported `label` part.
  *
+ * @cssproperty --selection-background-color - The background color of selected tree items.
+ * @cssproperty --selection-indicator-color - The color the indicator for selected tree items.
+ * @cssproperty --expand-button-color - The color of the expand button.
  * @cssproperty [--show-duration=200ms] - The animation duration when expanding tree items.
  * @cssproperty [--hide-duration=200ms] - The animation duration when collapsing tree items.
  */