diff --git a/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
index 0b4789c482af56..35b91e2be7cf5b 100644
--- a/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
+++ b/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
@@ -483,10 +483,14 @@ If a value depends on a variable, you need to move it to a CSS variable inside i
         borderRadius: '50%',
         width: `max(6px - var(--offset), 3px)`,
         height: `max(6px - var(--offset), 3px)`,
-        bgcolor: index === 0 ? 'primary.solidBg' : 'background.level3',
+        bgcolor: `var(--bg)`,
       }}
       style={{
         '--offset': `${index}px`,
+        '--bg':
+          index === 0
+            ? 'var(--mui-palette-primary-solidBg)'
+            : 'var(--mui-palette-background-level3)',
       }}
     />
   ))}