diff --git a/docs/data/material/customization/css-theme-variables/ModernColorSpaces.js b/docs/data/material/customization/css-theme-variables/ModernColorSpaces.js
index 6fc42c94a9cc29..5149b4feb0350e 100644
--- a/docs/data/material/customization/css-theme-variables/ModernColorSpaces.js
+++ b/docs/data/material/customization/css-theme-variables/ModernColorSpaces.js
@@ -10,14 +10,14 @@ import FormControl from '@mui/material/FormControl';
 
 export default function ModernColorSpaces() {
   const colorSpaces = [
-    { value: 'color(display-p3 0.7 0.5 0)', label: 'display-p3()' }, // Mud
-    { value: 'oklch(0.62 0.25 29)', label: 'oklch()' }, // Orange
-    { value: 'oklab(0.59 0.1 -0.14)', label: 'oklab()' }, // Purple
-    { value: 'hsl(141, 70%, 48%)', label: 'hsl()' }, // Green
-    { value: 'rgb(25, 118, 210)', label: 'rgb()' }, // Blue
+    'color(display-p3 0.7 0.5 0)', // Mud
+    'oklch(0.62 0.25 29)', // Orange
+    'oklab(0.59 0.1 -0.14)', // Purple
+    'hsl(141, 70%, 48%)', // Green
+    'rgb(25, 118, 210)', // Blue
   ];
 
-  const [selectedColor, setSelectedColor] = React.useState(colorSpaces[0].value);
+  const [selectedColor, setSelectedColor] = React.useState(colorSpaces[0]);
 
   const theme = React.useMemo(
     () =>
@@ -43,12 +43,12 @@ export default function ModernColorSpaces() {
           value={selectedColor}
           onChange={(event) => setSelectedColor(event.target.value)}
         >
-          {colorSpaces.map((colorSpace) => (
+          {colorSpaces.map((value) => (
             <FormControlLabel
-              key={colorSpace.value}
-              value={colorSpace.value}
+              key={value}
+              value={value}
               control={<Radio />}
-              label={colorSpace.value}
+              label={value}
             />
           ))}
         </RadioGroup>
diff --git a/docs/data/material/customization/css-theme-variables/ModernColorSpaces.tsx b/docs/data/material/customization/css-theme-variables/ModernColorSpaces.tsx
index 6fc42c94a9cc29..5149b4feb0350e 100644
--- a/docs/data/material/customization/css-theme-variables/ModernColorSpaces.tsx
+++ b/docs/data/material/customization/css-theme-variables/ModernColorSpaces.tsx
@@ -10,14 +10,14 @@ import FormControl from '@mui/material/FormControl';
 
 export default function ModernColorSpaces() {
   const colorSpaces = [
-    { value: 'color(display-p3 0.7 0.5 0)', label: 'display-p3()' }, // Mud
-    { value: 'oklch(0.62 0.25 29)', label: 'oklch()' }, // Orange
-    { value: 'oklab(0.59 0.1 -0.14)', label: 'oklab()' }, // Purple
-    { value: 'hsl(141, 70%, 48%)', label: 'hsl()' }, // Green
-    { value: 'rgb(25, 118, 210)', label: 'rgb()' }, // Blue
+    'color(display-p3 0.7 0.5 0)', // Mud
+    'oklch(0.62 0.25 29)', // Orange
+    'oklab(0.59 0.1 -0.14)', // Purple
+    'hsl(141, 70%, 48%)', // Green
+    'rgb(25, 118, 210)', // Blue
   ];
 
-  const [selectedColor, setSelectedColor] = React.useState(colorSpaces[0].value);
+  const [selectedColor, setSelectedColor] = React.useState(colorSpaces[0]);
 
   const theme = React.useMemo(
     () =>
@@ -43,12 +43,12 @@ export default function ModernColorSpaces() {
           value={selectedColor}
           onChange={(event) => setSelectedColor(event.target.value)}
         >
-          {colorSpaces.map((colorSpace) => (
+          {colorSpaces.map((value) => (
             <FormControlLabel
-              key={colorSpace.value}
-              value={colorSpace.value}
+              key={value}
+              value={value}
               control={<Radio />}
-              label={colorSpace.value}
+              label={value}
             />
           ))}
         </RadioGroup>
diff --git a/docs/data/material/customization/css-theme-variables/native-color.md b/docs/data/material/customization/css-theme-variables/native-color.md
index f20c500bb265b4..9f9473e4b976ac 100644
--- a/docs/data/material/customization/css-theme-variables/native-color.md
+++ b/docs/data/material/customization/css-theme-variables/native-color.md
@@ -86,6 +86,8 @@ If native color is not enabled, they will fall back to the JavaScript color mani
 The `theme.palette.getContrastText()` function produces the contrast color.
 The demo below shows the result of the `theme.palette.getContrastText()` function, which produces the text color based on the selected background.
 
+{{"demo": "ContrastTextDemo.js"}}
+
 :::info
 The CSS variables `--__l` and `--__a` are internal variables set globally by Material UI.