diff --git a/src/resources/theme/theme.ts b/src/resources/theme/theme.ts
index 0efcda9ef5..e8e3cc1168 100644
--- a/src/resources/theme/theme.ts
+++ b/src/resources/theme/theme.ts
@@ -5,7 +5,7 @@ import {
   typographyDerivedVariables,
   typographyStyles,
 } from "./typography.globals";
-import { waMainStyles } from "./wa.globals";
+import { waMainDerivedVariables, waMainStyles } from "./wa.globals";
 
 export const themeStyles = [
   mainStyles.toString(),
@@ -19,5 +19,5 @@ export const derivedStyles = {
   ...mainDerivedVariables,
   ...typographyDerivedVariables,
   ...colorDerivedVariables,
-  ...waMainStyles,
+  ...waMainDerivedVariables,
 };
diff --git a/src/resources/theme/wa.globals.ts b/src/resources/theme/wa.globals.ts
index 9a107feb33..29a950ae23 100644
--- a/src/resources/theme/wa.globals.ts
+++ b/src/resources/theme/wa.globals.ts
@@ -1,4 +1,5 @@
 import { css } from "lit";
+import { extractDerivedVars } from "../../common/style/derived-css-vars";
 
 export const waMainStyles = css`
   html {
@@ -9,3 +10,5 @@ export const waMainStyles = css`
       var(--wa-focus-ring-color);
   }
 `;
+
+export const waMainDerivedVariables = extractDerivedVars(waMainStyles);