diff --git a/packages/webawesome/docs/examples/themes/showcase.njk b/packages/webawesome/docs/examples/themes/showcase.njk
index 2adc9a14c..1ede9611d 100644
--- a/packages/webawesome/docs/examples/themes/showcase.njk
+++ b/packages/webawesome/docs/examples/themes/showcase.njk
@@ -100,7 +100,7 @@ layout: false
             <div class="wa-flank">
               <wa-avatar
                 shape="rounded"
-                style="--background-color: var(--wa-color-green-60); --text-color: var(--wa-color-green-95)"
+                style="background-color: var(--wa-color-green-60); color: var(--wa-color-green-95)"
               >
                 <wa-icon slot="icon" name="sword-laser"></wa-icon>
               </wa-avatar>
@@ -119,7 +119,7 @@ layout: false
             <div class="wa-flank">
               <wa-avatar
                 shape="rounded"
-                style="--background-color: var(--wa-color-cyan-60); --text-color: var(--wa-color-cyan-95)"
+                style="background-color: var(--wa-color-cyan-60); color: var(--wa-color-cyan-95)"
               >
                 <wa-icon slot="icon" name="robot-astromech"></wa-icon>
               </wa-avatar>
@@ -403,7 +403,7 @@ layout: false
             <a href="" class="wa-flank wa-link-plain" tabindex="-1">
               <wa-avatar
                 shape="rounded"
-                style="--background-color: var(--wa-color-yellow-90); --text-color: var(--wa-color-yellow-50)"
+                style="background-color: var(--wa-color-yellow-90); color: var(--wa-color-yellow-50)"
               >
                 <wa-icon slot="icon" name="egg-fried"></wa-icon>
               </wa-avatar>
@@ -435,7 +435,7 @@ layout: false
               <a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
                 <wa-avatar
                   shape="rounded"
-                  style="--background-color: var(--wa-color-blue-90); color: var(--wa-color-blue-50)"
+                  style="background-color: var(--wa-color-blue-90); color: var(--wa-color-blue-50)"
                 >
                   <wa-icon slot="icon" name="shield"></wa-icon>
                 </wa-avatar>
@@ -449,7 +449,7 @@ layout: false
               <a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
                 <wa-avatar
                   shape="rounded"
-                  style="--background-color: var(--wa-color-green-90); color: var(--wa-color-green-50)"
+                  style="background-color: var(--wa-color-green-90); color: var(--wa-color-green-50)"
                 >
                   <wa-icon slot="icon" name="chevrons-up"></wa-icon>
                 </wa-avatar>
@@ -463,7 +463,7 @@ layout: false
               <a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
                 <wa-avatar
                   shape="rounded"
-                  style="--background-color: var(--wa-color-red-90); color: var(--wa-color-red-50)"
+                  style="background-color: var(--wa-color-red-90); color: var(--wa-color-red-50)"
                 >
                   <wa-icon slot="icon" name="explosion"></wa-icon>
                 </wa-avatar>
@@ -477,7 +477,7 @@ layout: false
               <a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
                 <wa-avatar
                   shape="rounded"
-                  style="--background-color: var(--wa-color-yellow-90); color: var(--wa-color-yellow-50)"
+                  style="background-color: var(--wa-color-yellow-90); color: var(--wa-color-yellow-50)"
                 >
                   <wa-icon slot="icon" name="moon-stars"></wa-icon>
                 </wa-avatar>