diff --git a/cast/src/launcher/layout/hc-layout.ts b/cast/src/launcher/layout/hc-layout.ts
index 31b336cb51..ec9796475e 100644
--- a/cast/src/launcher/layout/hc-layout.ts
+++ b/cast/src/launcher/layout/hc-layout.ts
@@ -88,7 +88,7 @@ class HcLayout extends LitElement {
       }
 
       .card-header {
-        color: var(--ha-card-header-color, --primary-text-color);
+        color: var(--ha-card-header-color, var(--primary-text-color));
         font-family: var(--ha-card-header-font-family, inherit);
         font-size: var(--ha-card-header-font-size, 24px);
         letter-spacing: -0.012em;
diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts
index 9cd32b64f7..fe66b25bb7 100644
--- a/hassio/src/addon-view/config/hassio-addon-config.ts
+++ b/hassio/src/addon-view/config/hassio-addon-config.ts
@@ -417,7 +417,7 @@ class HassioAddonConfig extends LitElement {
           justify-content: space-between;
         }
         .header h2 {
-          color: var(--ha-card-header-color, --primary-text-color);
+          color: var(--ha-card-header-color, var(--primary-text-color));
           font-family: var(--ha-card-header-font-family, inherit);
           font-size: var(--ha-card-header-font-size, 24px);
           letter-spacing: -0.012em;
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index 0a9ace35a5..770ca68fc6 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -1209,7 +1209,7 @@ class HassioAddonInfo extends LitElement {
           padding-inline-start: 8px;
           padding-inline-end: initial;
           font-size: 24px;
-          color: var(--ha-card-header-color, --primary-text-color);
+          color: var(--ha-card-header-color, var(--primary-text-color));
         }
         .addon-version {
           float: var(--float-end);
diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index 38a154a768..a4c34b7ac0 100644
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -43,7 +43,7 @@ export class HaCard extends LitElement {
 
       .card-header,
       :host ::slotted(.card-header) {
-        color: var(--ha-card-header-color, --primary-text-color);
+        color: var(--ha-card-header-color, var(--primary-text-color));
         font-family: var(--ha-card-header-font-family, inherit);
         font-size: var(--ha-card-header-font-size, 24px);
         letter-spacing: -0.012em;
diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index bd705917aa..750076b5f2 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -859,11 +859,14 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           border-bottom: 1px solid transparent;
           white-space: nowrap;
           font-weight: 400;
-          color: var(--sidebar-menu-button-text-color, --primary-text-color);
+          color: var(
+            --sidebar-menu-button-text-color,
+            var(--primary-text-color)
+          );
           border-bottom: 1px solid var(--divider-color);
           background-color: var(
             --sidebar-menu-button-background-color,
-            --primary-background-color
+            var(--primary-background-color)
           );
           font-size: 20px;
           align-items: center;
diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts
index e7c88ef4ac..8353e40308 100644
--- a/src/panels/config/logs/error-log-card.ts
+++ b/src/panels/config/logs/error-log-card.ts
@@ -236,7 +236,7 @@ class ErrorLogCard extends LitElement {
     }
 
     .card-header {
-      color: var(--ha-card-header-color, --primary-text-color);
+      color: var(--ha-card-header-color, var(--primary-text-color));
       font-family: var(--ha-card-header-font-family, inherit);
       font-size: var(--ha-card-header-font-size, 24px);
       letter-spacing: -0.012em;
diff --git a/src/panels/config/logs/system-log-card.ts b/src/panels/config/logs/system-log-card.ts
index 6e9552b58f..cba54b0f9e 100644
--- a/src/panels/config/logs/system-log-card.ts
+++ b/src/panels/config/logs/system-log-card.ts
@@ -212,7 +212,7 @@ export class SystemLogCard extends LitElement {
       }
 
       .card-header {
-        color: var(--ha-card-header-color, --primary-text-color);
+        color: var(--ha-card-header-color, var(--primary-text-color));
         font-family: var(--ha-card-header-font-family, inherit);
         font-size: var(--ha-card-header-font-size, 24px);
         letter-spacing: -0.012em;
diff --git a/src/panels/lovelace/cards/hui-calendar-card.ts b/src/panels/lovelace/cards/hui-calendar-card.ts
index e791db6a5d..faa886b1ba 100644
--- a/src/panels/lovelace/cards/hui-calendar-card.ts
+++ b/src/panels/lovelace/cards/hui-calendar-card.ts
@@ -231,7 +231,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
       }
 
       .header {
-        color: var(--ha-card-header-color, --primary-text-color);
+        color: var(--ha-card-header-color, var(--primary-text-color));
         font-size: var(--ha-card-header-font-size, 24px);
         line-height: 1.2;
         padding-top: 16px;
diff --git a/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts b/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts
index 81edb16c9f..00e18f08c3 100644
--- a/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts
+++ b/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts
@@ -514,7 +514,7 @@ export class HuiBadgePicker extends LitElement {
         }
 
         .badge-header {
-          color: var(--ha-card-header-color, --primary-text-color);
+          color: var(--ha-card-header-color, var(--primary-text-color));
           font-family: var(--ha-card-header-font-family, inherit);
           font-size: 16px;
           font-weight: bold;
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
index c8686a4dfe..60d95b5e22 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -509,7 +509,7 @@ export class HuiCardPicker extends LitElement {
         }
 
         .card-header {
-          color: var(--ha-card-header-color, --primary-text-color);
+          color: var(--ha-card-header-color, var(--primary-text-color));
           font-family: var(--ha-card-header-font-family, inherit);
           font-size: 16px;
           font-weight: bold;