diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 32d5d2858..2eb6967ea 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -77,7 +77,7 @@ wa-page > header {
   }
   #version-number + wa-badge {
     --background-color: var(--wa-color-warning-fill-quiet);
-    --content-color: var(--wa-color-warning-on-quiet);
+    --text-color: var(--wa-color-warning-on-quiet);
     font-size: var(--wa-font-size-2xs);
     text-transform: uppercase;
   }
diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css
index 5029f036e..87ae833df 100644
--- a/src/components/avatar/avatar.css
+++ b/src/components/avatar/avatar.css
@@ -1,6 +1,6 @@
 :host {
   --background-color: var(--wa-color-neutral-fill-normal);
-  --content-color: var(--wa-color-neutral-on-normal);
+  --text-color: var(--wa-color-neutral-on-normal);
   --size: 3rem;
 
   display: inline-flex;
@@ -12,7 +12,7 @@
   background-color: var(--background-color);
   font: inherit;
   font-size: calc(var(--size) * 0.4);
-  color: var(--content-color);
+  color: var(--text-color);
   user-select: none;
   -webkit-user-select: none;
   vertical-align: middle;
diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index 317f35c56..bd8c286ed 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -25,7 +25,7 @@ import styles from './avatar.css';
  * @csspart image - The avatar image. Only shown when the `image` attribute is set.
  *
  * @cssproperty --background-color - The avatar's background color.
- * @cssproperty --content-color - The color of the avatar's content.
+ * @cssproperty --text-color - The color of the avatar's content.
  * @cssproperty --size - The size of the avatar.
  */
 @customElement('wa-avatar')
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index 76faed79c..502e43a97 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -20,7 +20,7 @@ import styles from './badge.css';
  * @cssproperty --border-radius - The radius of the badge's corners.
  * @cssproperty --border-style - The style of the badge's border.
  * @cssproperty --border-width - The width of the badge's border.
- * @cssproperty --content-color - The color of the badge's content.
+ * @cssproperty --text-color - The color of the badge's content.
  */
 @customElement('wa-badge')
 export default class WaBadge extends WebAwesomeElement {
diff --git a/src/components/callout/callout.css b/src/components/callout/callout.css
index 6b52d0074..bb691ef27 100644
--- a/src/components/callout/callout.css
+++ b/src/components/callout/callout.css
@@ -4,7 +4,7 @@
   --spacing: var(--wa-space-m);
   --background-color: var(--wa-color-fill-quiet);
   --border-color: var(--wa-color-border-quiet);
-  --content-color: var(--wa-color-on-normal);
+  --text-color: var(--wa-color-on-normal);
 
   position: relative;
   display: flex;
@@ -14,7 +14,7 @@
   border-color: var(--border-color);
   border-style: var(--wa-panel-border-style);
   border-width: var(--wa-panel-border-width);
-  color: var(--content-color);
+  color: var(--text-color);
   padding: var(--spacing);
 }
 
diff --git a/src/components/tag/tag.css b/src/components/tag/tag.css
index a39e9ed0a..e6c5dbd88 100644
--- a/src/components/tag/tag.css
+++ b/src/components/tag/tag.css
@@ -28,11 +28,11 @@
 }
 
 :host(:hover) > wa-icon-button {
-  color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-hover));
+  color: color-mix(in oklab, var(--text-color), var(--wa-color-mix-hover));
 }
 
 :host(:active) > wa-icon-button {
-  color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-active));
+  color: color-mix(in oklab, var(--text-color), var(--wa-color-mix-active));
 }
 
 /*
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index d5cfe4918..2a8f64743 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -35,7 +35,7 @@ import styles from './tooltip.css';
  *
  * @cssproperty --background-color - The tooltip's background color.
  * @cssproperty --border-radius - The radius of the tooltip's corners.
- * @cssproperty --content-color - The color of the tooltip's content.
+ * @cssproperty --text-color - The color of the tooltip's content.
  * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
  * @cssproperty --padding - The padding within the tooltip.
  * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
diff --git a/src/styles/themes/brutalist.css b/src/styles/themes/brutalist.css
index b47bdebb5..176a52d1c 100644
--- a/src/styles/themes/brutalist.css
+++ b/src/styles/themes/brutalist.css
@@ -500,7 +500,7 @@
 
   wa-alert {
     --border-width: 0 0 0 var(--wa-panel-border-width);
-    --content-color: var(--wa-color-text-normal);
+    --text-color: var(--wa-color-text-normal);
     --padding: var(--wa-space-s) var(--wa-space-m);
 
     &::part(icon) {
@@ -545,7 +545,7 @@
 
   wa-badge {
     --border-color: var(--wa-color-surface-border);
-    --content-color: var(--wa-color-base-10);
+    --text-color: var(--wa-color-base-10);
     text-transform: uppercase;
 
     &::part(base) {
diff --git a/src/styles/themes/classic.css b/src/styles/themes/classic.css
index 41f296be0..9e44c8598 100644
--- a/src/styles/themes/classic.css
+++ b/src/styles/themes/classic.css
@@ -341,7 +341,7 @@
  */
 wa-avatar {
   --background-color: var(--wa-color-neutral-fill-loud);
-  --content-color: var(--wa-color-neutral-on-loud);
+  --text-color: var(--wa-color-neutral-on-loud);
 }
 
 wa-button,
@@ -384,7 +384,7 @@ wa-breadcrumb {
 wa-callout {
   --background-color: var(--wa-color-surface-raised);
   --border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
-  --content-color: var(--wa-color-text-normal);
+  --text-color: var(--wa-color-text-normal);
   --spacing: var(--wa-space-l);
 
   font-size: var(--wa-font-size-s);
diff --git a/src/styles/themes/fa.css b/src/styles/themes/fa.css
index c08a67f8f..ef736192f 100644
--- a/src/styles/themes/fa.css
+++ b/src/styles/themes/fa.css
@@ -471,7 +471,7 @@
   }
 
   wa-alert {
-    --content-color: var(--wa-color-text-normal);
+    --text-color: var(--wa-color-text-normal);
     --icon-color: var(--border-color);
 
     .wa-theme-fa-dark & {
diff --git a/src/styles/themes/migration.css b/src/styles/themes/migration.css
index 088c84804..a9bc021d7 100644
--- a/src/styles/themes/migration.css
+++ b/src/styles/themes/migration.css
@@ -516,23 +516,23 @@
 
     &[variant='brand'] {
       --background: var(--wa-color-brand-fill-normal);
-      --content-color: var(--wa-color-brand-on-normal);
+      --text-color: var(--wa-color-brand-on-normal);
     }
     &[variant='success'] {
       --background: var(--wa-color-success-fill-normal);
-      --content-color: var(--wa-color-success-on-normal);
+      --text-color: var(--wa-color-success-on-normal);
     }
     &[variant='warning'] {
       --background: var(--wa-color-warning-fill-normal);
-      --content-color: var(--wa-color-warning-on-normal);
+      --text-color: var(--wa-color-warning-on-normal);
     }
     &[variant='danger'] {
       --background: var(--wa-color-danger-fill-normal);
-      --content-color: var(--wa-color-danger-on-normal);
+      --text-color: var(--wa-color-danger-on-normal);
     }
     &[variant='neutral'] {
       --background: var(--wa-color-neutral-fill-normal);
-      --content-color: var(--wa-color-neutral-on-normal);
+      --text-color: var(--wa-color-neutral-on-normal);
     }
   }
 
diff --git a/src/styles/themes/playful.css b/src/styles/themes/playful.css
index f0086a070..080311c8e 100644
--- a/src/styles/themes/playful.css
+++ b/src/styles/themes/playful.css
@@ -688,23 +688,23 @@
 
     &[variant='brand'] {
       --background: var(--wa-color-primary-80);
-      --content-color: var(--wa-color-primary-20);
+      --text-color: var(--wa-color-primary-20);
     }
     &[variant='success'] {
       --background: var(--wa-color-green-80);
-      --content-color: var(--wa-color-green-20);
+      --text-color: var(--wa-color-green-20);
     }
     &[variant='warning'] {
       --background: var(--wa-color-yellow-80);
-      --content-color: var(--wa-color-yellow-20);
+      --text-color: var(--wa-color-yellow-20);
     }
     &[variant='danger'] {
       --background: var(--wa-color-red-80);
-      --content-color: var(--wa-color-red-20);
+      --text-color: var(--wa-color-red-20);
     }
     &[variant='neutral'] {
       --background: white;
-      --content-color: var(--wa-color-base-30);
+      --text-color: var(--wa-color-base-30);
     }
   }
 
diff --git a/src/styles/themes/premium.css b/src/styles/themes/premium.css
index 5dd26853e..f7190145b 100644
--- a/src/styles/themes/premium.css
+++ b/src/styles/themes/premium.css
@@ -525,23 +525,23 @@
   wa-badge {
     &[variant='brand'] {
       --background: var(--wa-color-primary-80);
-      --content-color: var(--wa-color-primary-20);
+      --text-color: var(--wa-color-primary-20);
     }
     &[variant='success'] {
       --background: var(--wa-color-green-80);
-      --content-color: var(--wa-color-green-20);
+      --text-color: var(--wa-color-green-20);
     }
     &[variant='warning'] {
       --background: var(--wa-color-yellow-80);
-      --content-color: var(--wa-color-yellow-20);
+      --text-color: var(--wa-color-yellow-20);
     }
     &[variant='danger'] {
       --background: var(--wa-color-red-80);
-      --content-color: var(--wa-color-red-20);
+      --text-color: var(--wa-color-red-20);
     }
     &[variant='neutral'] {
       --background: white;
-      --content-color: var(--wa-color-base-30);
+      --text-color: var(--wa-color-base-30);
     }
   }